neo.mjs 7.6.0 → 7.8.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.6.0'
+         * @member {String} version='7.8.0'
          */
-        version: '7.6.0'
+        version: '7.8.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-16",
+      "datePublished": "2024-09-21",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/neo-config.json

@@ -13,6 +13,7 @@
         "DragDrop",
         "HighlightJS",
         "IntersectionObserver",
+        "LocalStorage",
         "MonacoEditor",
         "Navigator",
         "ResizeObserver",

package/apps/portal/resources/data/examples_devmode.json

@@ -37,93 +37,92 @@
     "sharedWorkers": true,
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/apps/mainapp/index.html"
 }, {
-    "id"       : 16,
+    "id"           : 16,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi-Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "apps/shareddialog/index.html"
+}, {
+    "id"       : 15,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "examples/tab/container/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 14,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "examples/model/advanced/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 13,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "examples/dialog/"
 }, {
-    "id"           : 13,
+    "id"           : 12,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "apps/colors/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 11,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "apps/covid/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 10,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "examples/component/gallery/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "examples/tableFiltering/"
 }, {
-    "id"       : 8,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "examples/component/dateSelector/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "examples/form/field/date/index.html"
 }, {
-    "id"       : 6,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "examples/form/field/combobox/index.html"
 }, {
-    "id"           : 5,
+    "id"           : 4,
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "apps/portal/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 3,
     "image"    : "devmode/siesta.png",
     "name"     : "Siesta Unit Tests",
     "sourceUrl": "test/siesta",
     "url"      : "test/siesta/index.html"
-}, {
-    "hidden"       : true,
-    "id"           : 3,
-    "image"        : "devmode/multi_window_dd.png",
-    "name"         : "Multi Window Drag&Drop",
-    "sharedWorkers": true,
-    "sourceUrl"    : "apps/shareddialog",
-    "url"          : "apps/shareddialog/index.html"
 }, {
     "hidden"   : true,
     "id"       : 2,

package/apps/portal/resources/data/examples_dist_dev.json

@@ -37,87 +37,86 @@
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/development/apps/mainapp/index.html"
 }, {
-    "id"       : 15,
+    "id"           : 15,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi-Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "dist/development/apps/shareddialog/index.html"
+}, {
+    "id"       : 14,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/development/examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 13,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/development/examples/model/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 12,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/development/examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 11,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/development/apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 10,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/development/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 10,
+    "id"       : 9,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/development/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 8,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/development/examples/component/gallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 7,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/development/examples/tableFiltering/"
 }, {
-    "id"       : 7,
+    "id"       : 6,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/development/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 6,
+    "id"       : 5,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/development/examples/form/field/date/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 4,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/development/examples/form/field/combobox/index.html"
 }, {
-    "id"           : 4,
+    "id"           : 3,
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "dist/development/apps/portal/index.html"
-}, {
-    "hidden"       : true,
-    "id"           : 3,
-    "image"        : "devmode/multi_window_dd.png",
-    "name"         : "Multi Window Drag&Drop",
-    "sharedWorkers": true,
-    "sourceUrl"    : "apps/shareddialog",
-    "url"          : "dist/development/apps/shareddialog/index.html"
 }, {
     "hidden"   : true,
     "id"       : 2,

package/apps/portal/resources/data/examples_dist_prod.json

@@ -37,87 +37,86 @@
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
 }, {
-    "id"       : 15,
+    "id"           : 15,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi-Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "dist/production/apps/shareddialog/index.html"
+}, {
+    "id"       : 14,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/production/examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 13,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/production/examples/model/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 12,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/production/examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 11,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/production/apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 10,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/production/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 10,
+    "id"       : 9,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/production/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 8,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/production/examples/component/gallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 7,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/production/examples/tableFiltering/"
 }, {
-    "id"       : 7,
+    "id"       : 6,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/production/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 6,
+    "id"       : 5,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/production/examples/form/field/date/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 4,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/production/examples/form/field/combobox/index.html"
 }, {
-    "id"           : 4,
+    "id"           : 3,
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "dist/production/apps/portal/index.html"
-}, {
-    "hidden"       : true,
-    "id"           : 3,
-    "image"        : "devmode/multi_window_dd.png",
-    "name"         : "Multi Window Drag&Drop",
-    "sharedWorkers": true,
-    "sourceUrl"    : "apps/shareddialog",
-    "url"          : "dist/production/apps/shareddialog/index.html"
 }, {
     "hidden"   : true,
     "id"       : 2,

package/apps/portal/view/ViewportController.mjs

@@ -36,9 +36,9 @@ class ViewportController extends Controller {
          */
         defaultHash: '/home',
         /**
-         * @member {String} mainContentLayout_='mixed'
+         * @member {String} mainContentLayout_='card'
          */
-        mainContentLayout_: 'mixed',
+        mainContentLayout_: 'card',
         /**
          * @member {Object} routes
          */
@@ -88,14 +88,30 @@ class ViewportController extends Controller {
      * @protected
      */
     afterSetMainContentLayout(value, oldValue) {
-        let {activeIndex} = this,
-            container     = this.component.getItem('main-content'); // happens before instantiation
+        let me                      = this,
+            {activeIndex, windowId} = me,
+            container               = me.component.getItem('main-content'); // happens before instantiation
+
+        if (oldValue === undefined) {
+            // We can not turn this method itself into async and await the addon response,
+            // since the container needs its layout right away
+            Neo.main.addon.LocalStorage.readLocalStorageItem({
+                key: 'mainContentLayout',
+                windowId
+            }).then(data => {
+                if (data.value !== 'card') {
+                    me.mainContentLayout = data.value
+                }
+            })
+        }
 
         if (value === 'cube') {
             container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
         } else {
             container.layout = {ntype: 'card', activeIndex}
         }
+
+        Neo.main.addon.LocalStorage.updateLocalStorageItem({key: 'mainContentLayout', value, windowId})
     }
 
     /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.6.0'
+                html  : 'v7.8.0'
             }]
         }],
         /**

package/apps/portal/view/learn/{ContentView.mjs → ContentComponent.mjs}

@@ -10,16 +10,16 @@ const
     preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
 
 /**
- * @class Portal.view.learn.ContentView
+ * @class Portal.view.learn.ContentComponent
  * @extends Neo.component.Base
  */
-class ContentView extends Component {
+class ContentComponent extends Component {
     static config = {
         /**
-         * @member {String} className='Portal.view.learn.ContentView'
+         * @member {String} className='Portal.view.learn.ContentComponent'
          * @protected
          */
-        className: 'Portal.view.learn.ContentView',
+        className: 'Portal.view.learn.ContentComponent',
         /**
          * @member {String[]} baseCls=['learn-content']
          * @protected
@@ -41,6 +41,17 @@ class ContentView extends Component {
         tag: 'article'
     }
 
+    /**
+     *
+     * @member {Neo.component.Base[]} customComponents=[]
+     */
+    customComponents = []
+    /**
+     *
+     * @member {Neo.code.LivePreview[]} livePreviews=[]
+     */
+    livePreviews = []
+
     /**
      * @param {Object} config
      */
@@ -71,14 +82,36 @@ class ContentView extends Component {
 
         let me = this;
 
-        value && me.timeout(50).then(() => {
-            Neo.main.addon.IntersectionObserver.register({
-                callback: 'findTopmostItem',
-                id      : me.id,
-                root    : `#${me.parentId}`,
-                windowId: me.windowId
+        if (value) {
+            me.timeout(50).then(() => {
+                me.customComponents.forEach(component => {
+                    if (!component.mounted && !component.rendering) {
+                        component.render(true)
+                    }
+                });
+
+                me.livePreviews.forEach(livePreview => {
+                    if (!livePreview.mounted && !livePreview.rendering) {
+                        livePreview.render(true)
+                    }
+                });
+
+                Neo.main.addon.IntersectionObserver.register({
+                    callback: 'findTopmostItem',
+                    id      : me.id,
+                    root    : `#${me.parentId}`,
+                    windowId: me.windowId
+                })
             })
-        })
+        } else if (oldValue !== undefined) {
+            me.customComponents.forEach(component => {
+                component.mounted = false
+            });
+
+            me.livePreviews.forEach(livePreview => {
+                livePreview.mounted = false
+            });
+        }
     }
 
     /**
@@ -90,6 +123,8 @@ class ContentView extends Component {
         if (value) {
             let me = this;
 
+            oldValue && me.destroyChildInstances();
+
             await me.doFetchContent(value);
 
             if (oldValue) {
@@ -104,25 +139,55 @@ class ContentView extends Component {
         }
     }
 
+    /**
+     * Destroy all created child instances
+     * @param args
+     */
+    destroy(...args) {
+        this.destroyChildInstances();
+        super.destroy(...args)
+    }
+
+    /**
+     *
+     */
+    destroyChildInstances() {
+        let me = this;
+
+        me.customComponents.forEach(component => {
+            component.destroy()
+        });
+
+        me.customComponents = [];
+
+        me.livePreviews.forEach(livePreview => {
+            livePreview.destroy()
+        });
+
+        me.livePreviews = []
+    }
+
     /**
      * @param {Object} record
      * @returns {Promise<void>}
      */
     async doFetchContent(record) {
-        let me   = this,
-            path = me.getModel().getData('contentPath'),
-            content, data, html, modifiedHtml, neoComponents, neoDivs;
+        let me                  = this,
+            {appName, windowId} = me,
+            path                = me.getModel().getData('contentPath'),
+            baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
 
         path += `/pages/${record.id.replaceAll('.', '/')}.md`;
 
         if (record.isLeaf && path) {
+            baseConfigs   = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
             data          = await fetch(path);
             content       = await data.text();
             content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
             content       = `# ${record.name}\n${content}`;
             modifiedHtml  = await me.highlightPreContent(content);
             neoComponents = {};
-            neoDivs       = {}
+            neoDivs       = {};
 
             // Replace <pre neo-component></pre> with <div id='neo-component-x'/>
             // and create a map keyed by ID, whose value is the javascript
@@ -144,30 +209,25 @@ class ContentView extends Component {
             await me.timeout(Neo.config.environment === 'development' ? 100 : 150);
 
             Object.keys(neoComponents).forEach(key => {
-                Neo.create({
-                    appName        : me.appName,
-                    autoMount      : true,
-                    autoRender     : true,
-                    className      : 'Neo.component.Base',
-                    parentComponent: me,
-                    parentId       : key,
-                    windowId       : me.windowId,
+                instance = Neo.create({
+                    ...baseConfigs,
+                    className: 'Neo.component.Base',
+                    parentId : key,
                     ...neoComponents[key]
-                })
+                });
+
+                me.customComponents.push(instance)
             });
 
             Object.keys(neoDivs).forEach(key => {
-                // Create LivePreview for each iteration, set value to neoDivs[key]
-                Neo.create({
-                    module         : LivePreview,
-                    appName        : me.appName,
-                    autoMount      : true,
-                    autoRender     : true,
-                    parentComponent: me,
-                    parentId       : key,
-                    value          : neoDivs[key],
-                    windowId       : me.windowId
-                })
+                instance = Neo.create({
+                    ...baseConfigs,
+                    module  : LivePreview,
+                    parentId: key,
+                    value   : neoDivs[key]
+                });
+
+                me.livePreviews.push(instance)
             });
 
             Neo.main.addon.IntersectionObserver.observe({
@@ -278,11 +338,11 @@ class ContentView extends Component {
             record = me.record;
 
         if (data.altKey && data.shiftKey && !data.metaKey) {
-            me.fire('edit', { component: me, record })
+            me.fire('edit', {component: me, record})
         }
         // Command/windows shift click = refresh
         else if (!data.altKey && data.shiftKey && data.metaKey) {
-            me.fire('refresh', { component: me, record })
+            me.fire('refresh', {component: me, record})
         }
     }
 
@@ -326,4 +386,4 @@ class ContentView extends Component {
     }
 }
 
-export default Neo.setupClass(ContentView);
+export default Neo.setupClass(ContentComponent);