MC-18601: Page Builder Render

- Create original tree in iframe

Author: davemacaulay

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

@@ -10,29 +10,49 @@
 
 use Magento\Framework\View\Element\Template;
 use Magento\RequireJs\Model\FileManager;
+use Magento\PageBuilder\Model\Stage\Config;
+use Magento\Framework\Serialize\Serializer\Json;
 
 /**
  * Class Render
  */
 class Render extends Template
 {
+    /**
+     * @var FileManager
+     */
     private $fileManager;
 
+    /**
+     * @var Config
+     */
+    private $pageBuilderConfig;
+
+    /**
+     * @var Json
+     */
+    private $json;
+
     /**
      * @param Template\Context $context
      * @param FileManager $fileManager
+     * @param Config $config
+     * @param Json $json
      * @param array $data
      */
     public function __construct(
         Template\Context $context,
         FileManager $fileManager,
+        Config $config,
+        Json $json,
         array $data = []
     ) {
         parent::__construct($context, $data);
         $this->fileManager = $fileManager;
+        $this->pageBuilderConfig = $config;
+        $this->json = $json;
     }
 
-
     /**
      * Generate the URL to RequireJS
      *
@@ -55,4 +75,14 @@ public function getRequireJsConfigUrl() : string
         $requireJsConfig = $this->fileManager->createRequireJsConfigAsset();
         return $requireJsConfig->getUrl();
     }
+
+    /**
+     * Retrieve the Page Builder's config
+     *
+     * @return array
+     */
+    public function getPageBuilderConfig() : string
+    {
+        return $this->json->serialize($this->pageBuilderConfig->getConfig());
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/templates/stage/render.phtml

@@ -68,7 +68,7 @@
 </script>
 <script type="text/javascript">
     require(['Magento_PageBuilder/js/render/frame'], function (listen) {
-        listen();
+        listen(<?= $this->getPageBuilderConfig(); ?>);
     });
 </script>
 Page Builder Render Frame

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-factory.js

@@ -36,7 +36,10 @@ export default function createContentType(
         (resolve: (contentType: ContentTypeInterface | ContentTypeCollectionInterface) => void,
          reject: (error: string) => void,
     ) => {
+        const t0 = performance.now();
         loadModule([config.component], (contentTypeComponent: typeof ContentType) => {
+            const t1 = performance.now();
+            console.log("Call to load " + config.component + " took " + (t1 - t0) + " milliseconds.")
             try {
                 const contentType = new contentTypeComponent(
                     parentContentType,
@@ -107,6 +110,10 @@ function prepareData(config: ContentTypeConfigInterface, data: {}) {
  * @returns {FieldDefaultsInterface}
  */
 function prepareDefaults(fields: ConfigFieldInterface): FieldDefaultsInterface {
+    if (_.isEmpty(fields)) {
+        return {};
+    }
+
     return _.mapObject(fields, (field) => {
         if (!_.isUndefined(field.default)) {
             return field.default;

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render.js

@@ -36,7 +36,10 @@ export default class MasterFormatRenderer {
             if (this.ready) {
                 this.channel.port1.postMessage({
                     type: "render",
-                    message: getSerializedTree(rootContainer),
+                    message: {
+                        stageId: this.stageId,
+                        tree: getSerializedTree(rootContainer),
+                    },
                 });
                 this.channel.port1.onmessage = (event) => {
                     if (event.isTrusted) {

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render/serialize.js

@@ -5,25 +5,26 @@
 
 import ContentTypeCollection from "../../content-type-collection";
 import ContentTypeInterface from "../../content-type.types";
-import appearanceConfig from "../../content-type/appearance-config";
 import {GeneratedElementsData} from "../../content-type/observable-updater";
 import { DataObject } from "../../data-store";
 
 export interface TreeItem {
-    template: string;
+    name: string;
+    id: string;
     data: DataObject;
     children: TreeItem[];
 }
 
 /**
- * Serailize the tree as a simplified object for rendering
+ * Serialize the tree as a simplified object for rendering
  *
  * @param contentType
  */
 export function buildTree(contentType: ContentTypeInterface) {
-    const data = getMasterData(contentType);
+    const data = getData(contentType);
     const tree: TreeItem = {
-        template: getTemplate(contentType, data.appearance),
+        name: contentType.config.name,
+        id: contentType.id,
         data,
         children: [],
     };
@@ -46,20 +47,11 @@ export function getSerializedTree(contentType: ContentTypeInterface) {
     return buildTree(contentType);
 }
 
-/**
- * Retrieve the template for the content type \
- * @param contentType
- * @param appearance
- */
-function getTemplate(contentType: ContentTypeInterface, appearance: string): string {
-    return appearanceConfig(contentType.config.name, appearance).master_template;
-}
-
 /**
  * Retrieve the master data from the content types instance
  *
  * @param contentType
  */
-function getMasterData(contentType: ContentTypeInterface): GeneratedElementsData {
-    return contentType.content.getBindings() || {};
+function getData(contentType: ContentTypeInterface): GeneratedElementsData {
+    return contentType.dataStore.getState() || {};
 }