MC-15981: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/Block/Adminhtml/Stage/Render.php

@@ -9,11 +9,59 @@
 namespace Magento\PageBuilder\Block\Adminhtml\Stage;
 
 use Magento\Framework\View\Element\Template;
+use Magento\RequireJs\Model\FileManager;
 
 /**
  * Class Render
  */
 class Render extends Template
 {
+    private $fileManager;
 
-}
+    /**
+     * @param Template\Context $context
+     * @param FileManager $fileManager
+     * @param array $data
+     */
+    public function __construct(
+        Template\Context $context,
+        FileManager $fileManager,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+        $this->fileManager = $fileManager;
+    }
+
+    /**
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function getLocalStoragePolyfillIUrl() : string
+    {
+        $asset = $this->_assetRepo->createAsset('mage/polyfill.js');
+        return $asset->getUrl();
+    }
+
+    /**
+     * Generate the URL to RequireJS
+     *
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function getRequireJsUrl() : string
+    {
+        $asset = $this->_assetRepo->createAsset('requirejs/require.js');
+        return $asset->getUrl();
+    }
+
+    /**
+     * Retrieve the URL to the RequireJS Config file
+     *
+     * @return string
+     */
+    public function getRequireJsConfigUrl() : string
+    {
+        $requireJsConfig = $this->fileManager->createRequireJsConfigAsset();
+        return $requireJsConfig->getUrl();
+    }
+}

app/code/Magento/PageBuilder/Controller/Adminhtml/Stage/Render.php

@@ -7,7 +7,15 @@
 
 namespace Magento\PageBuilder\Controller\Adminhtml\Stage;
 
-class Render extends \Magento\Backend\App\Action
+use Magento\Framework\App\Action\HttpGetActionInterface;
+use Magento\RequireJs\Block\Html\Head\Config;
+
+/**
+ * Class Render
+ *
+ * Iframe to render Page Builder stage in isolation
+ */
+class Render extends \Magento\Backend\App\Action implements HttpGetActionInterface
 {
     /**
      * Preview transactional email action
@@ -16,7 +24,19 @@ class Render extends \Magento\Backend\App\Action
      */
     public function execute()
     {
-        $this->_view->loadLayout();
-        $this->_view->renderLayout();
+        $layout = $this->_view->getLayout();
+        $requireJs = $layout->createBlock(
+            \Magento\Backend\Block\Page\RequireJs::class,
+            'require.js'
+        );
+        $requireJs->setTemplate('Magento_Backend::page/js/require_js.phtml');
+        /* @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $renderBlock */
+        $renderBlock = $layout->createBlock(
+            \Magento\PageBuilder\Block\Adminhtml\Stage\Render::class,
+            'stage_render'
+        );
+        $renderBlock->setTemplate('Magento_PageBuilder::stage/render.phtml');
+        $this->getResponse()->setBody($requireJs->toHtml() . $renderBlock->toHtml());
+        $this->getResponse()->sendResponse();
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/layout/pagebuilder_stage_render.xml

@@ -6,9 +6,46 @@
 
 /** @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $block */
 ?>
-Page Builder Render Frame
+<script type="text/javascript">
+    // Shim localStorage as it won't work correctly in our sandboxed iframe
+    Object.defineProperty(
+        window,
+        'localStorage',
+        {
+            get: function () {
+                return {
+                    _data: {},
+                    setItem: function (id, val) {
+                        return this._data[id] = String(val);
+                    },
+                    getItem: function (id) {
+                        return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+                    },
+                    removeItem: function (id) {
+                        return delete this._data[id];
+                    },
+                    clear: function () {
+                        return this._data = {};
+                    }
+                };
+            }
+        }
+    );
+</script>
+<script type="text/javascript" src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>
+<script type="text/javascript" src="<?= $block->escapeUrl($block->getRequireJsConfigUrl()); ?>"></script>
+<script type="text/javascript">
+    require.config({
+        'map': {
+            '*': {
+                'text': 'Magento_PageBuilder/js/render/requirejs/text',
+            }
+        },
+    })
+</script>
 <script type="text/javascript">
     require(['Magento_PageBuilder/js/render/frame'], function (listen) {
         listen('<?= $block->escapeUrl($block->getBaseUrl()); ?>');
     });
-</script>
+</script>
+Page Builder Render Frame