Enhance code.LivePreview to support nested windows #8074

Author: tobiu

src/code/LivePreview.mjs

@@ -107,10 +107,10 @@ class LivePreview extends Container {
         value_: null,
         /**
          * The url for the child app to use for the popout window
-         * @member {String} windowUrl='./childapps/preview/index.html'
+         * @member {String} windowUrl_='./childapps/preview/index.html'
          * @reactive
          */
-        windowUrl: './childapps/preview/index.html'
+        windowUrl_: './childapps/preview/index.html'
     }
 
     /**
@@ -199,6 +199,24 @@ class LivePreview extends Container {
         return this.beforeSetEnumValue(value, oldValue, 'language')
     }
 
+    /**
+     * Triggered before the language config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetWindowUrl(value, oldValue) {
+        if (value.startsWith('./')) {
+            let appPath = Neo.config.appPath.split('/');
+            appPath.pop()
+
+            return new URL(Neo.config.basePath + appPath.join('/') + value.substring(1), location.href).href
+        }
+
+        return value
+    }
+
     /**
      * @param {Object} data
      */
@@ -327,25 +345,18 @@ class LivePreview extends Container {
 
             container.removeAll();
             container.add({
-                module: me.markdownComponentClass,
-                style : {height: '100%', overflow: 'auto'},
-                value : source
+                module   : me.markdownComponentClass,
+                style    : {height: '100%', overflow: 'auto'},
+                value    : source,
+                windowUrl: me.windowUrl
             })
         } else {
             if (!me.neoExecutor) {
                 const module = await import('./executor/Neo.mjs');
                 me.neoExecutor = Neo.create(module.default);
             }
 
-            await me.neoExecutor.execute({
-                code: source,
-                container: container,
-                context: {
-                    appName        : me.appName,
-                    windowId       : me.windowId,
-                    parentComponent: me
-                }
-            })
+            await me.neoExecutor.execute({code: source, container})
         }
     }
 

src/code/executor/Neo.mjs

@@ -81,7 +81,7 @@ class NeoExecutor extends Base {
      *     instead of using a cached version.
      * @param {Object} data
      * @param {String} data.code
-     * @param {Neo.component.Base} data.container
+     * @param {Neo.container.Base} data.container
      * @returns {Promise<Object>}
      */
     async execute({code, container}) {

src/component/Markdown.mjs

@@ -45,7 +45,12 @@ class Markdown extends Component {
          * @member {String|null} value_=null
          * @reactive
          */
-        value_: null
+        value_: null,
+        /**
+         * Optional windowUrl to pass to nested code.LivePreviews.
+         * @member {String|null} windowUrl=null
+         */
+        windowUrl: null
     }
 
     /**
@@ -86,20 +91,24 @@ class Markdown extends Component {
             // Clean up previous instances
             me.destroyComponents();
 
-            await me.render({
-                code     : value,
-                container: me,
-                context: {
-                    appName        : me.appName,
-                    windowId       : me.windowId,
-                    parentComponent: me
-                }
-            });
+            await me.render({code: value})
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    async afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+        this.activeComponents.forEach(component => component.windowId = value)
+    }
+
     /**
      * Destroy all created child instances
+     * @param {...*} args
      */
     destroy(...args) {
         this.destroyComponents();
@@ -113,7 +122,7 @@ class Markdown extends Component {
         let me = this;
 
         me.activeComponents.forEach(component => component.destroy());
-        me.activeComponents = [];
+        me.activeComponents = []
     }
 
     /**
@@ -247,22 +256,19 @@ class Markdown extends Component {
      *     the actual Neo.mjs components, rendering them into the placeholder DIVs within the generated HTML.
      * @param {Object} data
      * @param {String} data.code
-     * @param {Neo.component.Base} data.container
-     * @param {Object} [data.context]
      * @returns {Promise<Object>}
      */
-    async render({code, container, context={}}) {
-        let me               = this,
-            content          = code,
-            neoComponents    = {},
-            neoDivs          = {},
-            parentComponent  = context.parentComponent || container,
-            baseConfigs      = {
-                appName      : context.appName,
-                autoInitVnode: true,
-                autoMount    : true,
-                parentComponent,
-                windowId     : context.windowId || parentComponent.windowId
+    async render({code}) {
+        let me            = this,
+            content       = code,
+            neoComponents = {},
+            neoDivs       = {},
+            baseConfigs   = {
+                appName        : me.appName,
+                autoInitVnode  : true,
+                autoMount      : true,
+                parentComponent: me.parentComponent,
+                windowId       : me.windowId
             },
             html, instance;
 
@@ -285,9 +291,7 @@ class Markdown extends Component {
         html = marked.parse(content);
 
         // Insert lab divs (these are markdown comments, so process on the final HTML)
-        html = me.insertLabDivs(html);
-
-        container.html = html;
+        me.html = me.insertLabDivs(html);
 
         await new Promise(resolve => setTimeout(resolve, Neo.config.environment === 'development' ? 100 : 150));
 
@@ -299,9 +303,7 @@ class Markdown extends Component {
                     parentId : key,
                     ...neoComponents[key]
                 });
-                me.activeComponents.push(instance);
-
-                console.log(me.activeComponents);
+                me.activeComponents.push(instance)
             });
         }
 
@@ -310,12 +312,18 @@ class Markdown extends Component {
             const LivePreviewClass  = LivePreviewModule.default;
 
             Object.keys(neoDivs).forEach(key => {
-                instance = Neo.create({
+                const config = {
                     ...baseConfigs,
                     module  : LivePreviewClass,
                     parentId: key,
                     value   : neoDivs[key].code
-                });
+                }
+
+                if (me.windowUrl) {
+                    config.windowUrl = me.windowUrl
+                }
+
+                instance = Neo.create(config);
                 me.activeComponents.push(instance);
             });
         }
@@ -329,7 +337,7 @@ class Markdown extends Component {
      */
     updateComponentState(mounted) {
         this.activeComponents.forEach(component => {
-            if (mounted) {console.log('remount cmp', component.id);
+            if (mounted) {
                 component.initVnode(true)
             } else {
                 component.mounted = false

src/component/wrapper/MonacoEditor.mjs

@@ -388,6 +388,7 @@ class MonacoEditor extends Base {
             scrollBeyondLastLine: me.scrollBeyondLastLine,
             theme               : me.editorTheme,
             value               : me.stringifyValue(me.value),
+            windowId            : me.windowId,
 
             scrollbar: {
                 alwaysConsumeMouseWheel: false // enables page scrolling when over-scrolling the content box

src/container/Base.mjs

@@ -351,6 +351,10 @@ class Container extends Component {
                     parent.remove?.(item, false);
                     delete item.vdom.removeDom;
 
+                    if (parent.windowId !== me.windowId) {
+                        item.mounted = false
+                    }
+
                     // Convenience logic, especially for moving components into different browser windows:
                     // A component might rely on references & handler methods inside the previous controller realm
                     // todo: We need ?. until functional.component.Base supports controllers

src/main/addon/MonacoEditor.mjs

@@ -97,7 +97,7 @@ class MonacoEditor extends Base {
      * @returns {Object}
      */
     getValue(data) {
-        return this.map[data.id].getModel().getValue()
+        return this.map[data.id]?.getModel().getValue()
     }
 
     /**
@@ -106,7 +106,7 @@ class MonacoEditor extends Base {
      * @param {String} data.id
      */
     layoutEditor(data) {
-        this.map[data.id].layout()
+        this.map[data.id]?.layout()
     }
 
     /**