MC-18601: Page Builder Render

Author: davemacaulay

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

@@ -3,19 +3,20 @@
  * See COPYING.txt for license details.
  */
 
-define(['jquery', 'underscore', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, _, events, consoleLogger) {
+define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, events, consoleLogger) {
     'use strict';
 
     var mixin = {
         defaults: {
-            pageBuilderInstances: [],
+            pageBuilderInstances: []
         },
 
         /**
          * Record instances of Page Builder initialized in the forms namespace
          */
         initialize: function () {
             var self = this;
+
             this._super();
 
             events.on('pagebuilder:register', function (data) {
@@ -35,33 +36,31 @@ define(['jquery', 'underscore', 'Magento_PageBuilder/js/events', 'consoleLogger'
          */
         save: function (redirect, data) {
             var self = this,
-                submit = this._super.bind(self, redirect, data);
+                submit = this._super.bind(self, redirect, data),
+                locks,
+                timeout;
 
-            if (this.pageBuilderInstances.length > 0) {
-                let locks = this.pageBuilderInstances.map(function (instance) {
-                    if (instance.stage.renderingLock && !_.isUndefined(instance.stage.renderingLock.promise)) {
-                        return instance.stage.renderingLock.promise;
-                    }
-                }).filter(function (promise) {
-                    return promise !== undefined;
+            if (this.pageBuilderInstances.length === 0) {
+                submit();
+            } else {
+                locks = this.pageBuilderInstances.map(function (instance) {
+                    return instance.stage.renderingLock;
                 });
 
                 if (locks.length === 0) {
                     submit();
                 } else {
-                    var timeout = setTimeout(function () {
-                        consoleLogger.error("Page Builder was rendering for 5 seconds without releasing locks.");
+                    timeout = setTimeout(function () {
+                        consoleLogger.error('Page Builder was rendering for 5 seconds without releasing locks.');
                     }, 5000);
 
                     $('body').trigger('processStart');
-                    Promise.all(locks).then(function () {
+                    $.when.apply(null, locks).then(function () {
                         $('body').trigger('processStop');
                         clearTimeout(timeout);
                         submit();
                     });
                 }
-            } else {
-                submit();
             }
         }
     };

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

@@ -41,9 +41,11 @@ export default class Edit {
     }
 
     /**
-     * Serialize and unserialize the data to ensure it can be serialized in the future
+     * Flip flop to JSON and back again to ensure all data received from the form is serializable. Magento by default
+     * adds functions into some basic types which cannot be serialized when calling PostMessage.
      *
-     * @param data
+     * @param {DataObject} data
+     * @returns {DataObject}
      */
     private filterData(data: DataObject): DataObject {
         return JSON.parse(JSON.stringify(data));

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

@@ -104,7 +104,7 @@ export default class ObservableUpdater {
 
             if (elementConfig.style !== undefined) {
                 let previousStyles = {};
-                if (typeof this.previousData[elementName].style !== "undefined") {
+                if (this.previousData[elementName].style !== undefined) {
                     previousStyles = this.previousData[elementName].style;
                 }
                 generatedData[elementName].style = this.generateStyles(previousStyles, elementConfig, convertedData);
@@ -125,7 +125,7 @@ export default class ObservableUpdater {
 
             if (elementConfig.css !== undefined && elementConfig.css.var in convertedData) {
                 let previousCss = {};
-                if (typeof this.previousData[elementName].css !== "undefined") {
+                if (this.previousData[elementName].css !== undefined) {
                     previousCss = this.previousData[elementName].css;
                 }
                 generatedData[elementName].css = this.generateCss(previousCss, elementConfig, convertedData);
@@ -288,7 +288,7 @@ export default class ObservableUpdater {
                 }
                 if (typeof value === "object") {
                     _.extend(result, value);
-                } else if (typeof value !== "undefined") {
+                } else if (value !== undefined) {
                     result[fromSnakeToCamelCase(propertyConfig.name)] = value;
                 }
             }

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

@@ -3,6 +3,7 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import "Magento_PageBuilder/js/resource/jquery/ui/jquery.ui.touch-punch";
@@ -31,7 +32,11 @@ export default class Stage {
     public dataStore: DataStore = new DataStore();
     public afterRenderDeferred: DeferredInterface = deferred();
     public rootContainer: ContentTypeCollectionInterface;
-    public renderingLock: DeferredInterface;
+    /**
+     * We always complete a single render when the stage is first loaded, so we can set the lock when the stage is
+     * created. The lock is used to halt the parent forms submission when Page Builder is rendering.
+     */
+    public renderingLock: JQueryDeferred<boolean> = $.Deferred();
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();
@@ -42,13 +47,12 @@ export default class Stage {
      * @type {(() => void) & _.Cancelable}
      */
     private applyBindingsDebounce = _.debounce(() => {
-        this.renderingLock = deferred();
+        this.renderingLock = $.Deferred();
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
                 value: renderedOutput,
             })).then(() => {
                 this.renderingLock.resolve();
-                this.renderingLock = null;
             }).catch((error: Error) => {
                 console.error(error);
             });