neo.mjs 6.34.0 → 6.36.0

package/resources/data/deck/learnneo/tree.json

@@ -1,15 +1,15 @@
 {"data": [
     {"name":  "Welcome!",                                   "parentId": null,                "isLeaf":  true, "id": "Welcome" },
-    {"name": "Benefits?",                                "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
+    {"name": "Benefits",                                    "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
         {"name": "Introduction ",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Intro"},
-        {"name": "Multi-Threaded",                          "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Threaded"},
+        {"name": "Multi-Threading",                         "parentId": "WhyNeo",            "isLeaf": true,  "id": "benefits.Multi-Threading"},
         {"name": "Extreme Speed",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Speed"},
         {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
         {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
         {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
         {"name": "Features and Benefits Summary",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Features"},
     {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed":  true},
-        {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup", "hidden":  false},
+        {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup"},
         {"name": "Workspaces and Applications",             "parentId": "GettingStarted",    "isLeaf": true,  "id": "2023-10-14T19-25-08-153Z"},
         {"name": "Describing a View",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "DescribingTheUI"},
         {"name": "Events",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Events"},
@@ -20,24 +20,23 @@
     {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials",  "collapsed":  true},
         {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
         {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes", "collapsed":  true},
-
         {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
     {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
-        {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
-        {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
+        {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle", "hidden":  true},
+        {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms",  "hidden":  true},
         {"name": "Component and Container Basics",          "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
-        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
+        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts", "hidden":  true},
         {"name": "View Models",                             "parentId": "InDepth",           "isLeaf": true,  "id": "GuideViewModels"},
-        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents"},
+        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents", "hidden":  true},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
-        {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables"},
-        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels"},
-        {"name": "Multi-Window Applications",               "parentId": "InDepth",           "isLeaf": false, "id": "MultiWindow"},
-        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons"},
+        {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables", "hidden":  true},
+        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels", "hidden":  true},
+        {"name": "Multi-Window Applications",               "parentId": "InDepth",           "isLeaf": false, "id": "MultiWindow", "hidden":  true},
+        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden":  true},
             {"name": "Introduction",                        "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonIntro"},
             {"name": "Example",                             "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonExample"},
-        {"name": "Mixins",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Mixins"},
+        {"name": "Mixins",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Mixins", "hidden":  true},
     {"name": "JavaScript Classes",                          "parentId": null,                "isLeaf": false, "id": "JavaScriptClasses", "hidden":  true},
         {"name": "Classes, Properties, and Methods",        "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-07T19-18-28-517Z"},
         {"name": "Overriding Methods",                      "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-07-934Z"},

package/resources/scss/src/apps/portal/Viewport.scss

@@ -35,4 +35,23 @@ body {
             transform: translateZ(0px);
         }
     }
+
+    // the style will get used inside home & learn
+    .neo-worker-setup {
+        align-items     : center;
+        background-color: #17141c;
+        display         : flex;
+        height          : 100%;
+        justify-content : center;
+        padding         : 20px;
+        width           : 100%;
+
+        --fill-opacity  : 0.05;
+        --stroke-opacity: 0.05;
+
+        &:hover {
+            --fill-opacity  : 1;
+            --stroke-opacity: 1;
+        }
+    }
 }

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -13,9 +13,16 @@
 
     .portal-content-box-content {
         padding-left: 1.3em;
+        margin-top: 0.75em;
     }
 
-    .portal-content-box-header {
-
+    .portal-content-box-headline {
+        border-bottom: 1px solid #ececec;
+        padding-bottom: 0.75em;
+        max-width: 85%;
+        margin: 1em auto 0 auto;
+        text-align: center;
+        letter-spacing: 1.5px!important;
+        word-spacing: 1.5px;
     }
 }

package/resources/scss/src/apps/portal/home/FeatureSection.scss

@@ -0,0 +1,68 @@
+.portal-home-feature-section {
+    align-items      : stretch;
+    display          : flex;
+    flex-wrap        : nowrap;
+    justify-content  : center;
+    min-height       : 100%;
+    scroll-snap-align: center;
+
+    @media (max-width: 840px) {
+        flex-direction: column;
+    }
+
+    &.portal-position-end {
+        flex-direction: row-reverse;
+    }
+
+    .neo-content {
+        font-size: min(max(2.3vw, 16px), 30px);
+    }
+
+    .neo-h1 {
+        font-size  : min(max(5.5vw, 30px), 64px);
+        line-height: 1em;
+        margin     : 0;
+        text-align : center;
+    }
+
+    .neo-h2 {
+        font-size  : min(max(3.5vw, 24px), 44px);
+        font-weight: 600;
+        line-height: 1em;
+        margin     : 0;
+        text-align : center;
+    }
+
+    .page-live-preview {
+        height: 100%;
+        margin: 0;
+    }
+
+    .portal-content-text {
+        align-items    : center;
+        display        : flex;
+        flex           : 1;
+        flex-direction : column;
+        flex-wrap      : nowrap;
+        justify-content: center;
+        padding        : 2rem;
+
+        @media (max-width: 600px) {
+            flex           : .5 !important;
+            justify-content: start;
+            padding        : 1rem;
+        }
+    }
+
+    .portal-content-wrapper {
+        background-color: lightgray;
+        flex            : 2;
+        padding         : 20px;
+
+        @media (max-width: 600px) {
+            max-height: 35em;
+            min-height: 35em;
+            padding   : 5px;
+        }
+    }
+}

package/resources/scss/src/apps/portal/home/parts/Colors.scss

@@ -1,14 +1,3 @@
 .portal-home-parts-colors {
-    @media (max-width: 840px) {
-        &.neo-flex-container {
-            flex-direction: column;
-        }
-    }
 
-    @media (max-width: 600px) {
-        .portal-content-wrapper {
-            max-height: 46em;
-            min-height: 46em;
-        }
-    }
 }

package/resources/scss/src/apps/portal/home/parts/Helix.scss

@@ -1,13 +1,7 @@
 .portal-home-parts-helix {
-    @media (max-width: 840px) {
-        &.neo-flex-container {
-            flex-direction: column;
-        }
-    }
-
     @media (max-width: 600px) {
         .portal-content-text {
-            min-height: 40em;
+            min-height: 23em;
         }
     }
 }

package/resources/scss/src/apps/portal/home/parts/How.scss

@@ -1,25 +1,7 @@
 .portal-home-parts-how {
-    .neo-worker-setup {
-        align-items    : center;
-        display        : flex;
-        height         : 100%;
-        justify-content: center;
-        width          : 100%;
-
-        --fill-opacity  : 0.05;
-        --stroke-opacity: 0.05;
-
-        &:hover {
-            --fill-opacity  : 1;
-            --stroke-opacity: 1;
-        }
-    }
-
     .portal-content-container {
-        background-color: #17141c;
         border          : 1px solid #e6e6e6;
         border-radius   : 8px;
-        padding         : 20px;
     }
 
     @media (max-width: 500px) {
@@ -33,10 +15,6 @@
     @media (max-width: 840px) {
         min-height: 100%;
 
-        &.neo-flex-container {
-            flex-direction: column;
-        }
-
         .portal-content-text {
             flex: 0.8 !important;
         }

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -19,6 +19,14 @@
         padding      : 12px;
     }
 
+    blockquote {
+        background-color: var(--sem-color-bg-neutral-default);;
+        border-left     : 4px solid var(--sem-color-border-default);
+        font-style      : italic;
+        margin-left     : 0;
+        padding         : 5px 5px 5px 15px;
+    }
+
     p {
         margin: 0.5em 0 0.7em 0;
     }

package/resources/scss/src/code/LivePreview.scss

@@ -1,4 +1,5 @@
 .neo-code-live-preview {
+    height                    : 400px;
     margin-bottom             : 2em;
     transition-duration       : .3s;
     transition-property       : height, left, top, width;

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.34.0'
+     * @default '6.36.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.34.0'
+    version: '6.36.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -633,7 +633,7 @@ function autoGenerateGetSet(proto, key) {
     }
 
     if (!Neo[getSetCache]) {
-        Neo[getSetCache] = {};
+        Neo[getSetCache] = {}
     }
 
     if (!Neo[getSetCache][key]) {
@@ -667,6 +667,10 @@ function autoGenerateGetSet(proto, key) {
             },
 
             set(value) {
+                if (value === undefined) {
+                    return
+                }
+
                 let me        = this,
                     _key      = '_' + key,
                     uKey      = key[0].toUpperCase() + key.slice(1),

package/src/code/LivePreview.mjs

@@ -48,10 +48,6 @@ class LivePreview extends Container {
          * @member {Boolean} enableFullscreen=true
          */
         enableFullscreen: true,
-        /**
-         * @member {Number} height=400
-         */
-        height: 400,
         /**
          * @member {Object|String} layout='fit'
          */
@@ -226,11 +222,14 @@ class LivePreview extends Container {
         }
 
         let me                = this,
+            container         = me.getPreviewContainer(),
             source            = me.editorValue || me.value,
             cleanLines        = [],
-            importModuleNames = [],
             moduleNameAndPath = [],
-            className         = me.findLastClassName(source);
+            className         = me.findLastClassName(source),
+            params            = [],
+            vars              = [],
+            codeString, promises;
 
         source.split('\n').forEach(line => {
             let importMatch = line.match(importRegex);
@@ -239,18 +238,14 @@ class LivePreview extends Container {
                 let moduleName = importMatch[1],
                     path       = importMatch[2];
 
-                moduleNameAndPath.push({moduleName, path});
-
-                importModuleNames.push(moduleName);
+                moduleNameAndPath.push({moduleName, path})
             } else if (line.match(exportRegex)) {
                 // Skip export statements
             } else {
-                cleanLines.push(`    ${line}`);
+                cleanLines.push(`    ${line}`)
             }
         });
 
-        var params = [];
-        var vars   = [];
         // Figure out the parts of the source we'll be running.
         // o The promises/import() corresponding to the user's import statements
         // o The vars holding the name of the imported module based on the module name for each import
@@ -266,14 +261,13 @@ class LivePreview extends Container {
         //   });
         // Making the promise part of the eval seems weird, but it made it easier to
         // set up the import vars.
-
-        let promises = moduleNameAndPath.map(item => {
+        promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
             vars.push(`    const ${item.moduleName} = ${item.moduleName}Module.default;`);
             return `import('${item.path}')`
         });
 
-        const codeString = [
+        codeString = [
             'Promise.all([',
             `    ${promises.join(',\n')}`,
             `]).then(([${params.join(', ')}]) => {`,
@@ -287,7 +281,6 @@ class LivePreview extends Container {
             '.catch(error => container.add({ntype:\'component\', html:error.message}));'
         ].join('\n')
 
-        const container = me.getPreviewContainer();
         container.removeAll();
 
         try {
@@ -338,14 +331,18 @@ class LivePreview extends Container {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
-        let me     = this,
-            hidden = data.value !== 1;
+        let me        = this,
+            isPreview = data.value === 1;
 
         if (data.item.reference === 'preview') {
             me.doRunSource()
         }
+        // Navigating to the source view should destroy the app, in case the preview view is not popped out
+        else if (!isPreview && !me.previewContainer) {
+            me.getReference('preview').removeAll()
+        }
 
-        me.getReference('popout-window-button').hidden = hidden
+        me.getReference('popout-window-button').hidden = !isPreview
         me.disableRunSource = false;
     }
 

package/src/component/Base.mjs

@@ -275,9 +275,9 @@ class Base extends CoreBase {
         parentComponent_: null,
         /**
          * The parent component id or document.body
-         * @member {String} parentId='document.body'
+         * @member {String} parentId_='document.body'
          */
-        parentId: 'document.body',
+        parentId_: 'document.body',
         /**
          * Array of Plugin Modules and / or config objects
          * @member {Array|null} plugins_=null

package/src/component/Toast.mjs

@@ -114,17 +114,17 @@ class Toast extends Base {
         }]}
     }
 
+    /**
+     * Timeout in ms after which the toast is removed
+     * @member {Number} removeDelay=3000
+     */
+    removeDelay = 3000
     /**
      * Used by the ToastManager
      * @member {Boolean} running=false
      * @private
      */
     running = false
-    /**
-     * Timeout in ms after which the toast is removed
-     * @member {Number} timeout=3000
-     */
-    timeout = 3000 // todo: conflicting class field name => timeout()
 
     /**
      * @param {Object} config
@@ -206,9 +206,9 @@ class Toast extends Base {
         let me = this;
 
         if (!me.closable && value) {
-            setTimeout(() => {
-                this.destroy(true)
-            }, me.timeout)
+            me.timeout(me.removeDelay).then(() => {
+                me.destroy(true)
+            })
         }
     }
 

package/src/component/Video.mjs

@@ -38,8 +38,7 @@ class Video extends BaseComponent {
          */
         autoplay: false,
         /**
-         * In case the browser does not support the video source
-         * the component should show an error.
+         * In case the browser does not support the video source the component should show an error.
          * @member {Boolean} errorMsg='The browser does not support the video'
          */
         errorMsg: 'Your browser does not support the video tag.',
@@ -90,25 +89,7 @@ class Video extends BaseComponent {
         let me = this;
 
         me.handleAutoplay();
-        me.addDomListeners(
-            {click: me.play, delegate: '.neo-video-ghost'},
-            {click: me.pause, delegate: '.neo-video-media'}
-        )
-    }
-
-    /**
-     * beforeSetPlaying autgen by playing_
-     *
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @returns {Boolean}
-     */
-    beforeSetPlaying(value, oldValue) {
-        if (!Neo.isBoolean(value)) {
-            return oldValue
-        }
-
-        return value
+        me.addDomListeners({click: me.play, delegate: '.neo-video-ghost'});
     }
 
     /**
@@ -137,23 +118,37 @@ class Video extends BaseComponent {
     afterSetUrl(value, oldValue) {
         if (!value) return;
 
-        let {vdom} = this,
-            media = VDomUtil.getFlags(vdom, 'media')[0];
+        let {vdom}      = this,
+            media       = VDomUtil.getFlags(vdom, 'media')[0],
+            ua          = navigator.userAgent || navigator.vendor || window.opera,
+            isOperaMini = /Opera Mini/i.test(ua);
 
         media.cn = [{
             tag: 'source',
             src: value,
             type: this.type
-        }, {
-            tag: 'span',
-            html: this.errorMsg,
         }];
 
+        // Opera Mini might not support the video-source => check the user agent string
+        if (isOperaMini) {
+            media.cn.push({
+                tag: 'span',
+                html: this.errorMsg,
+            });
+        }
+
         this.update()
     }
 
     /**
      * autoplay - run the event listeners
+     * Only called in constructor and sets playing => calls update already
+     *
+     * Rationale: update() sends the vdom & vnode on a workers roundtrip to get the deltas. 
+     * While this is happening,  the component locks itself for future updates until the new vnode got back (async).
+     * After the delay the framework  would trigger a 2nd roundtrip to get the deltas for the visible node.
+     *
+     * @protected
      */
     handleAutoplay() {
         if (!this.autoplay) return;
@@ -166,12 +161,11 @@ class Video extends BaseComponent {
         // Allows inline playback on iOS devices
         media.playsInline = true;
 
-        this.update();
         this.playing = true;
     }
 
     /**
-     * Clicked media
+     * Simulates `Clicked media` programmatically
      */
     pause() {
         this.playing = false

package/src/component/wrapper/AmChart.mjs

@@ -89,24 +89,23 @@ class AmChart extends Component {
      * @protected
      */
     afterSetMounted(value, oldValue) {
-        let me = this,
-            {appName, id, windowId} = me;
+        let me                      = this,
+            {appName, id, windowId} = me,
+            opts                    = {appName, id, windowId};
 
         if (value === false && oldValue !== undefined) {
-            Neo.main.addon.AmCharts.destroy({appName, id, windowId})
+            Neo.main.addon.AmCharts.destroy(opts)
         }
 
         super.afterSetMounted(value, oldValue);
 
         if (value) {
-            let opts = {
-                appName,
+            opts = {
+                ...opts,
                 combineSeriesTooltip: me.combineSeriesTooltip,
                 config              : me.chartConfig,
-                id,
                 package             : me.package,
-                type                : me.chartType,
-                windowId
+                type                : me.chartType
             };
 
             if (me.chartData) {
@@ -136,6 +135,14 @@ class AmChart extends Component {
         return value
     }
 
+    destroy(...args) {
+        let {appName, id, windowId} = this;
+
+        Neo.main.addon.AmCharts.destroy({appName, id, windowId})
+
+        super.destroy(...args)
+    }
+
     /**
      *
      */

package/src/main/addon/AmCharts.mjs

@@ -181,7 +181,7 @@ class AmCharts extends Base {
      * @param {String} data.id
      */
     destroy(data) {
-        this.charts[data.id].dispose();
+        this.charts[data.id]?.dispose?.();
         delete this.charts[data.id]
     }
 

package/src/main/addon/IntersectionObserver.mjs

@@ -102,11 +102,14 @@ class NeoIntersectionObserver extends Base {
      * @param {Boolean} [data.disconnect=false] true removes all currently observed targets
      * @param {String} data.id
      * @param {String|String[]} data.observe The querySelector to match elements
-     * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
+     * @returns {Object} opts
+     *     {Boolean} opts.cached      : true in case the observer is not registered yet
+     *     {Number}  opts.countTargets: amount of found target nodes inside the DOM
      */
     observe(data) {
         let me            = this,
             cache         = me.cache,
+            cached        = false,
             {id, observe} = data,
             observer      = me.map[data.id],
             targets       = [];
@@ -126,6 +129,8 @@ class NeoIntersectionObserver extends Base {
                 observer.observe(target)
             })
         } else {
+            cached = true;
+
             if (!cache[id]) {
                 cache[id] = []
             }
@@ -133,7 +138,10 @@ class NeoIntersectionObserver extends Base {
             cache[id].push(data);
         }
 
-        return !!observer
+        return {
+            cached,
+            countTargets: targets.length
+        }
     }
 
     /**
@@ -144,11 +152,15 @@ class NeoIntersectionObserver extends Base {
      * @param {String} data.root
      * @param {String} data.rootMargin='0px'
      * @param {Number|Number[]} data.threshold=0.0
+     * @returns {Boolean}
+     *     if data.observe is passed: true in case there is at least one found target node inside the DOM
+     *     if data.observe is not passed: true
      */
     register(data) {
         let me            = this,
             {cache}       = me,
             {id, observe} = data,
+            returnValue   = true,
             observer;
 
         me.map[id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
@@ -159,12 +171,16 @@ class NeoIntersectionObserver extends Base {
 
         observer.rootId = data.id; // storing the component id
 
-        observe && me.observe({id, observe});
+        if (observe) {
+            returnValue = me.observe({id, observe})
+        }
 
         if (cache[id]) {
             cache[id].forEach(item => me.observe(item));
             delete cache[id]
         }
+
+        return returnValue
     }
 
     /**