MC-18601: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/form-mixin.js

@@ -3,7 +3,7 @@
  * See COPYING.txt for license details.
  */
 
-define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, events, consoleLogger) {
+define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger', 'Magento_PageBuilder/js/stage'], function ($, events, consoleLogger, stage) {
     'use strict';
 
     var mixin = {
@@ -50,12 +50,14 @@ define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($
                 if (locks.length === 0) {
                     submit();
                 } else {
+                    stage.debugLog('Lock detected, waiting for resolution');
                     timeout = setTimeout(function () {
                         consoleLogger.error('Page Builder was rendering for 5 seconds without releasing locks.');
                     }, 5000);
 
                     $('body').trigger('processStart');
                     $.when.apply(null, locks).then(function () {
+                        stage.debugLog('Resolved lock, saving');
                         $('body').trigger('processStop');
                         clearTimeout(timeout);
                         submit();

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

@@ -21,5 +21,6 @@
             <render/>
         </with>
         <iframe width="1" height="1" attr="src: config.render_url, id: 'render_frame_' + id" sandbox="allow-scripts" style="display: none;"></iframe>
+        <textarea name="debug" rows="15" cols="250"></textarea>
     </if>
 </div>

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

@@ -4,9 +4,17 @@
  */
 
 import $ from "jquery";
+import _ from "underscore";
 import ContentTypeCollectionInterface from "../content-type-collection.types";
 import { getSerializedTree } from "./render/serialize";
 
+function debugLog(message: any) {
+    if (_.isObject(message) || _.isArray(message)) {
+        message = JSON.stringify(message);
+    }
+    $("[name=debug]").append(message + "\n");
+}
+
 export default class MasterFormatRenderer {
     public stageId: string;
     public channel: MessageChannel;
@@ -28,34 +36,45 @@ export default class MasterFormatRenderer {
      */
     public applyBindings(rootContainer: ContentTypeCollectionInterface): Promise<string> {
         if (!this.getRenderFrame()) {
+            debugLog("No render frame");
             console.error("No render frame present for Page Builder instance.");
             return;
         }
 
         return new Promise((resolve, reject) => {
             if (this.ready) {
-                this.channel.port1.postMessage({
-                    type: "render",
-                    message: {
-                        stageId: this.stageId,
-                        tree: getSerializedTree(rootContainer),
-                    },
-                });
+                debugLog("Frame is ready, posting data");
+                try {
+                    this.channel.port1.postMessage({
+                        type: "render",
+                        message: {
+                            stageId: this.stageId,
+                            tree: getSerializedTree(rootContainer),
+                        },
+                    });
+                } catch (e) {
+                    debugLog("Error in postMessage");
+                    debugLog(e);
+                }
                 this.channel.port1.onmessage = (event) => {
                     if (event.isTrusted) {
                         if (event.data.type === "render") {
                             console.log(event.data.message);
+                            debugLog("Render complete, resolving event");
                             resolve(event.data.message);
                         }
                         if (event.data.type === "template") {
+                            debugLog("Requested template " + event.data.message);
                             this.loadTemplate(event.data.message);
                         }
                     } else {
                         reject();
                     }
                 };
             } else {
+                debugLog("Frame not ready, waiting for ready...");
                 this.readyDeferred.then(() => {
+                    debugLog("Frame became ready");
                     this.applyBindings(rootContainer).then((rendered: string) => {
                         resolve(rendered);
                     }).catch(() => {
@@ -90,6 +109,7 @@ export default class MasterFormatRenderer {
      */
     private loadTemplate(name: string): void {
         require(["text!" + name], (template: string) => {
+            debugLog("Loaded template " + name);
             this.channel.port1.postMessage({
                 type: "template",
                 message: {

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

@@ -20,6 +20,13 @@ import buildStage from "./stage-builder";
 import {StageUpdateAfterParamsInterface} from "./stage-events.types";
 import deferred, {DeferredInterface} from "./utils/promise-deferred";
 
+export function debugLog(message: any) {
+    if (_.isObject(message) || _.isArray(message)) {
+        message = JSON.stringify(message);
+    }
+    $("[name=debug]").append(message + "\n");
+}
+
 export default class Stage {
     public static readonly rootContainerName: string = "root-container";
     public pageBuilder: PageBuilderInterface;
@@ -47,11 +54,14 @@ export default class Stage {
      * @type {(() => void) & _.Cancelable}
      */
     private applyBindingsDebounce = _.debounce(() => {
+        debugLog("------------------------------------------");
+        debugLog("Lock created");
         this.renderingLock = $.Deferred();
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
                 value: renderedOutput,
             })).then(() => {
+                debugLog("Lock resolved");
                 this.renderingLock.resolve();
             }).catch((error: Error) => {
                 console.error(error);