neo.mjs 6.35.0 → 6.37.0

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,7 +1,3 @@
 .portal-home-parts-colors {
-    @media (max-width: 840px) {
-        &.neo-flex-container {
-            flex-direction: column;
-        }
-    }
+
 }

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

@@ -12,15 +12,16 @@
         padding: 1rem 1rem 0;
     }
 
-    pre[data-javascript] {
-        border       : thin solid lightgray;
-        border-radius: 4px;
-        overflow-x   : scroll;
-        padding      : 12px;
+    a {
+        color: #3E63DD;;
     }
 
-    p {
-        margin: 0.5em 0 0.7em 0;
+    blockquote {
+        background-color: var(--gray-100);
+        border-left     : 4px solid var(--sem-color-surface-primary-background);
+        font-style      : italic;
+        margin-left     : 0;
+        padding         : 5px 5px 5px 15px;
     }
 
     details {
@@ -72,11 +73,22 @@
         padding      : 2px 16px;
         font-size    : 1em;
         margin-bottom: 1em;
+
+        &:hover {
+            /* On mouse-over, add a deeper shadow */
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        }
     }
 
-    /* On mouse-over, add a deeper shadow */
-    .lab:hover {
-        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    p {
+        margin: 0.5em 0 0.7em 0;
+    }
+
+    pre[data-javascript] {
+        border       : thin solid lightgray;
+        border-radius: 4px;
+        overflow-x   : scroll;
+        padding      : 12px;
     }
 }
 

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/resources/scss/src/examples/videoMove/MainContainer.scss

@@ -0,0 +1,31 @@
+.examples-videomove-maincontainer.neo-viewport {
+    padding: 50px;
+
+    .video-wrapper {
+        .neo-container {
+            background-color: rgb(139,166,255);
+            padding         : 50px;
+
+            &:last-child {
+                margin-left: 50px;
+            }
+        }
+    }
+
+    @media (max-width: 840px) {
+        padding: 1em;
+
+        .video-wrapper {
+            flex-direction: column;
+
+            .neo-container {
+                padding: 1em;
+
+                &:last-child {
+                    margin-left: 0;
+                    margin-top : 1em;
+                }
+            }
+        }
+    }
+}

package/resources/scss/theme-neo-light/design-tokens/Core.scss

@@ -9,6 +9,7 @@
     --core-fontsize-body           : 16px;
     --core-fontsize-h1             : 2.5rem;
     --core-fontsize-h2             : 1.75rem;
+    --core-fontsize-h3             : 1.25rem;
     --core-fontsize-label          : 1rem;
     --core-fontweight-bold         : 700;
     --core-fontweight-medium       : 500;

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.35.0'
+     * @default '6.37.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.35.0'
+    version: '6.37.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/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/manager/DomEvent.mjs

@@ -427,7 +427,7 @@ class DomEvent extends Base {
                 })
             });
 
-            if (component.mounted) {
+            if (component.mounted && domListeners?.length > 0) {
                 me.timeout(100).then(() => {
                     me.mountDomListeners(component)
                 })

package/src/worker/App.mjs

@@ -384,7 +384,7 @@ class App extends Base {
      * @param {Object} data
      * @param {Number} data.angle
      * @param {String} data.layout landscape|portrait
-     * @param {Number} data.type landscape-primary|landscape-secondary|portrait-primary|portrait-secondary
+     * @param {String} data.type landscape-primary|landscape-secondary|portrait-primary|portrait-secondary
      */
     onOrientationChange(data) {
         Object.values(Neo.apps).forEach(app => {

package/src/worker/mixin/RemoteMethodAccess.mjs

@@ -67,9 +67,7 @@ class RemoteMethodAccess extends Base {
                     throw new Error('Duplicate remote method definition ' + className + '.' + method)
                 }
 
-                if (!pkg[method] ) {
-                    pkg[method] = me.generateRemote(remote, method)
-                }
+                pkg[method] ??= me.generateRemote(remote, method)
             })
         }
     }

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Threaded.md

@@ -1,15 +0,0 @@
-When a Neo.mjs application starts, the framework spawns three web-workers, in addition
-to the main browser thread, resulting in:
-
-1. The <b>main</b> browser thread, where DOM updates are applied
-2. An <b>application</b> web-worker where normal application logic is run
-3. A <b>data</b> web-worker were HTTP and socket calls are run
-4. A <b>view</b> web-worker that manages delta updates
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png" width="120%"></img>
-
-The benefits of using web workers is that each runs in parallel its own thread. In a typical framework
-all code is run in the main thread, so processes compete for CPU cycles.
-
-Neo.mjs also allows you to easily spawn additional threads in order to have processor-intensive
-tasks to be run separately.