MC-18601: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/config.js

@@ -6,8 +6,9 @@
 import _ from "underscore";
 import ContentTypeConfigInterface from "./content-type-config.types";
 
-export default class Config {
+export type Mode = "Preview" | "Master";
 
+export default class Config {
     /**
      * Set the initial config
      *
@@ -17,6 +18,22 @@ export default class Config {
         Config.config = _.extend(Config.config, config);
     }
 
+    /**
+     * Set the applications mode
+     *
+     * @param mode
+     */
+    public static setMode(mode: Mode): void {
+        Config.mode = mode;
+    }
+
+    /**
+     * Retrieve the applications mode
+     */
+    public static getMode(): Mode {
+        return Config.mode;
+    }
+
     /**
      * Retrieve the init config
      *
@@ -50,4 +67,5 @@ export default class Config {
     private static config: any = {
         dataContentTypeAttributeName: "data-content-type",
     };
+    private static mode: Mode;
 }

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

@@ -5,15 +5,25 @@
 
 import events from "Magento_PageBuilder/js/events";
 import _ from "underscore";
+import Config, {Mode} from "./config";
 import ContentType from "./content-type";
 import ContentTypeCollectionInterface from "./content-type-collection.types";
 import ContentTypeConfigInterface, {ConfigFieldInterface} from "./content-type-config.types";
 import ContentTypeInterface from "./content-type.types";
 import {ContentTypeMountEventParamsInterface} from "./content-type/content-type-events.types";
+import Master from "./content-type/master";
+import MasterCollection from "./content-type/master-collection";
 import masterFactory from "./content-type/master-factory";
+import Preview from "./content-type/preview";
+import PreviewCollection from "./content-type/preview-collection";
 import previewFactory from "./content-type/preview-factory";
 import loadModule from "./utils/loader";
 
+type ViewFactory = (
+    contentType: ContentTypeInterface | ContentTypeCollectionInterface,
+    config: ContentTypeConfigInterface,
+) => Promise<Preview | PreviewCollection | Master | MasterCollection>;
+
 /**
  * Create new content type
  *
@@ -43,14 +53,10 @@ export default function createContentType(
                     config,
                     stageId,
                 );
-                Promise.all(
-                    [
-                        previewFactory(contentType, config),
-                        masterFactory(contentType, config),
-                    ],
-                ).then(([previewComponent, masterComponent]) => {
-                    contentType.preview = previewComponent;
-                    contentType.content = masterComponent;
+                const viewFactory: ViewFactory = Config.getMode() === "Preview" ? previewFactory : masterFactory;
+                viewFactory(contentType, config).then((viewComponent) => {
+                    const viewName = Config.getMode() === "Preview" ? "preview" : "content";
+                    contentType[viewName] = viewComponent;
                     contentType.dataStore.setState(
                         prepareData(config, data),
                     );

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -8,7 +8,7 @@ import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import utils from "mageUtils";
 import _ from "underscore";
-import Config from "./config";
+import Config, {Mode} from "./config";
 import ContentTypeCollectionInterface from "./content-type-collection";
 import createContentType from "./content-type-factory";
 import PageBuilderInterface from "./page-builder.types";
@@ -33,6 +33,7 @@ export default class PageBuilder implements PageBuilderInterface {
 
     constructor(config: any, initialValue: string) {
         Config.setConfig(config);
+        Config.setMode("Preview");
         this.initialValue = initialValue;
         this.isFullScreen(config.isFullScreen);
         this.config = config;

app/code/Magento/PageBuilder/view/adminhtml/web/js/render/frame.js

@@ -23,6 +23,7 @@ const deferredTemplates: {[key: string]: JQueryDeferred<string>} = {};
  */
 export default function listen(config: object) {
     Config.setConfig(config);
+    Config.setMode("Master");
     window.addEventListener(
         "message",
         (event) => {
@@ -108,6 +109,8 @@ function render(message: {stageId: string, tree: TreeItem}) {
                     },
                 },
             );
+        }).catch((error) => {
+            reject(error);
         });
     });
 }
@@ -148,6 +151,8 @@ function createRenderTree(
             } else {
                 resolve(contentType);
             }
+        }).catch((error) => {
+            reject(error);
         });
     });
 }