neo.mjs 6.10.2 → 6.10.3

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.2",
+    "version": "6.10.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -42,7 +42,7 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.5.0",
+        "@fortawesome/fontawesome-free": "^6.5.1",
         "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",

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

@@ -143,13 +143,13 @@
             "name": "Main Thread Addons"
         },
         {
-            "id": "mainThreadAddonIntro",
+            "id": "MainThreadAddonIntro",
             "parentId": "MainThreadAddons",
             "isLeaf": true,
             "name": "Introduction"
         },
         {
-            "id": "mainThreadAddonExample",
+            "id": "MainThreadAddonExample",
             "parentId": "MainThreadAddons",
             "isLeaf": true,
             "name": "Example"
@@ -214,4 +214,4 @@
             "isLeaf": true
         }
     ]
-}
+}

package/resources/scss/src/component/Base.scss

@@ -25,3 +25,29 @@
     top             : -10000px;
     z-index         : 1000;
 }
+
+.neo-masked {
+    position : relative;
+
+    .neo-load-mask {
+        position         : absolute;
+        inset            : 0;
+        background-color : inherit;
+        z-index          : 4;
+        display          : grid;
+        justify-content  : center;
+        align-content    : center;
+        overflow         : clip;
+
+        .neo-load-mask-body {
+            display   : flex;
+            flex-flow : row nowrap;
+            gap       : 0.7em;
+
+            .fa-spinner {
+                width  : 1em;
+                height : 1em;
+            }
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -199,6 +199,12 @@ class Base extends CoreBase {
          * @member {String|null} html_=null
          */
         html_: null,
+        /**
+         * Set to `true` to show a spinner centered in the component.
+         * Set to a string to show a message next to a spinner centered in the component.
+         * @member {Boolean|String} isLoading=false
+         */
+        isLoading_: false,
         /**
          * Internal flag which will get set to true while an update request (worker messages) is in progress
          * @member {Boolean} isVdomUpdating=false
@@ -653,6 +659,48 @@ class Base extends CoreBase {
         ComponentManager.register(this)
     }
 
+    /**
+     * Triggered after the isLoading config got changed
+     * @param {Boolean|String} value
+     * @param {Boolean|String} oldValue
+     * @protected
+     */
+    afterSetIsLoading(value, oldValue) {
+        if (!(value === false && oldValue === undefined)) {
+            let me            = this,
+                { cls, vdom } = me,
+                maskIndex;
+
+            if (oldValue !== undefined && vdom.cn) {
+                maskIndex = vdom.cn.findIndex(c => c.cls.includes('neo-load-mask'));
+
+                // Remove the load mask
+                if (maskIndex !== -1) {
+                    vdom.cn.splice(maskIndex, 1)
+                }
+            }
+
+            if (value) {
+                vdom.cn.push(me.loadMask = {
+                    cls: ['neo-load-mask'],
+                    cn : [{
+                        cls: ['neo-load-mask-body'],
+                        cn : [{
+                            cls: ['fa', 'fa-spinner', 'fa-spin']
+                        }, {
+                            cls      : ['neo-loading-message'],
+                            html     : value,
+                            removeDom: !Neo.isString(value)
+                        }]
+                    }]
+                })
+            }
+
+            NeoArray.toggle(cls, 'neo-masked', value);
+            me.set({cls, vdom})
+        }
+    }
+
     /**
      * Triggered after the maxHeight config got changed
      * @param {Number|String|null} value
@@ -1231,8 +1279,12 @@ class Base extends CoreBase {
      * Triggers all stored resolve() callbacks
      */
     doResolveUpdateCache() {
-        this.resolveUpdateCache.forEach(item => item());
-        this.resolveUpdateCache = [];
+        let me = this;
+
+        if (me.resolveUpdateCache) {
+            me.resolveUpdateCache.forEach(item => item());
+            me.resolveUpdateCache = []
+        }
     }
 
     /**
@@ -1959,10 +2011,11 @@ class Base extends CoreBase {
         resolve?.();
 
         if (me.needsVdomUpdate) {
-            me.childUpdateCache = [];     // if a new update is scheduled, we can clear the cache => these updates are included
+            // if a new update is scheduled, we can clear the cache => these updates are included
+            me.childUpdateCache = [];
 
             me.update()
-        } else {
+        } else if (me.childUpdateCache) {
             [...me.childUpdateCache].forEach(id => {
                 Neo.getComponent(id)?.update();
                 NeoArray.remove(me.childUpdateCache, id)
@@ -2133,16 +2186,7 @@ class Base extends CoreBase {
         me._hidden = true; // silent update
         me.mounted = false;
 
-        Neo.currentWorker.promiseMessage('main', {
-            action : 'updateDom',
-            appName: me.appName,
-            deltas : [{
-                action: 'removeNode',
-                id    : me.vdom.id
-            }]
-        }).catch(err => {
-            console.log('Error attempting to unmount component', err, me)
-        })
+        Neo.applyDeltas(me.appName, {action: 'removeNode', id: me.vdom.id})
     }
 
     /**

package/src/util/Array.mjs

@@ -117,18 +117,8 @@ class NeoArray extends Base {
      * @param {*} item
      * @param {Boolean} [add]
      */
-    static toggle(arr, item, add) {
-        let operation;
-
-        if (add === true) {
-            operation = 'add';
-        } else if (add === false) {
-            operation = 'remove';
-        } else {
-            operation = this.hasItem(arr, item) ? 'remove' : 'add';
-        }
-
-        this[operation](arr, item);
+    static toggle(arr, item, add = !this.hasItem(arr, item)) {
+        this[add ? 'add' : 'remove'](arr, item);
     }
 
     /**

package/src/worker/App.mjs

@@ -107,16 +107,22 @@ class App extends Base {
      *     }).then(id => console.log(id))
      *
      * @param {Object} config
+     * @param {String} [config.importPath] you can lazy load missing classes via this config. dev mode only.
      * @param {String} [config.parentId] passing a parentId will put your instance into a container
      * @param {Number} [config.parentIndex] if a parentId is passed, but no index, neo will use add()
      * @returns {String} the instance id
      */
-    createNeoInstance(config) {
+    async createNeoInstance(config) {
+        if (config.importPath) {
+            await import(/* webpackIgnore: true */ config.importPath);
+            delete config.importPath
+        }
+
         let appName   = Object.keys(Neo.apps)[0], // fallback in case no appName was provided
             Container = Neo.container?.Base,
             index, instance, parent;
 
-        config = {appName: appName, ...config};
+        config = {appName, ...config};
 
         if (config.parentId) {
             parent = Neo.getComponent(config.parentId);

package/test/components/files/button/Base.mjs

@@ -1,17 +1,44 @@
 StartTest(t => {
-    t.it('Checking if neo.mjs got started', async t => {
-        if (!globalThis.Neo?.Main) {
-            console.log('Starting the neo.mjs workers setup');
-
-            await import('../../../../src/MicroLoader.mjs');
-        }
-
-        setTimeout(() => {
-            Neo.worker.App.createNeoInstance({
-                ntype  : 'button',
-                iconCls: 'fa fa-home',
-                text   : 'Hello Siesta'
-            })
-        }, 300)
+    let button;
+
+    t.beforeEach(async t => {
+        button && await Neo.worker.App.destroyNeoInstance(button);
+    });
+
+    t.it('Sanity', async t => {
+        button = await Neo.worker.App.createNeoInstance({
+            ntype  : 'button',
+            iconCls: 'fa fa-home',
+            text   : 'Hello Siesta'
+        });
+    });
+
+    t.it('Should show isLoading UI', async t => {
+        button = await Neo.worker.App.createNeoInstance({
+            ntype     : 'button',
+            iconCls   : 'fa fa-home',
+            text      : 'Hello Siesta',
+            isLoading : 'Loading...'
+        });
+
+        // Spinner and text exist
+        await t.waitForSelector('button .fa-spinner.fa-spin');
+        t.selectorExists('button .neo-loading-message:contains(Loading...)');
+
+        await Neo.worker.App.setConfigs({ id: button, isLoading : true });
+
+        // Just a spinner now, no text
+        await t.waitForSelectorNotFound('button .neo-loading-message:contains(Loading...)');
+        t.selectorExists('button .fa-spinner');
+
+        await Neo.worker.App.setConfigs({ id: button, isLoading : 'New loading message' });
+
+        await t.waitForSelector('button .neo-loading-message:contains(New loading message)');
+        t.selectorExists('button .fa-spinner.fa-spin');
+
+        await Neo.worker.App.setConfigs({ id: button, isLoading : false });
+
+        // Not loading now
+        await t.waitForSelectorNotFound('button .fa-spinner');
     });
 });

package/test/components/files/form/field/Select.mjs

@@ -1,35 +1,27 @@
 StartTest(t => {
-    t.it('Checking if neo.mjs got started', async t => {
-        if (!globalThis.Neo?.Main) {
-            console.log('Starting the neo.mjs workers setup');
+    t.it('Sanity', async t => {
+        Neo.worker.App.createNeoInstance({
+            ntype        : 'selectfield',
+            labelPosition: 'inline',
+            labelText    : 'US States',
+            labelWidth   : 80,
+            width        : 300,
 
-            await import('../../../../../src/MicroLoader.mjs');
-        }
+            store : {
+                autoLoad   : true,
+                keyProperty: 'abbreviation',
+                url        : '../../resources/examples/data/us_states.json',
 
-        setTimeout(() => {
-            Neo.worker.App.createNeoInstance({
-                ntype        : 'selectfield',
-                labelPosition: 'inline',
-                labelText    : 'US States',
-                labelWidth   : 80,
-                width        : 300,
-
-                store : {
-                    autoLoad   : true,
-                    keyProperty: 'abbreviation',
-                    url        : '../../resources/examples/data/us_states.json',
-
-                    model: {
-                        fields: [{
-                            name: 'abbreviation',
-                            type: 'string'
-                        }, {
-                            name: 'name',
-                            type: 'string'
-                        }]
-                    }
+                model: {
+                    fields: [{
+                        name: 'abbreviation',
+                        type: 'string'
+                    }, {
+                        name: 'name',
+                        type: 'string'
+                    }]
                 }
-            })
-        }, 1000)
+            }
+        });
     });
 });

package/test/components/siesta.js

@@ -1,8 +1,38 @@
 const project = new Siesta.Project.Browser();
 
 project.configure({
-    title       : 'Neo Component Tests',
-    isEcmaModule: true
+    title        : 'Neo Component Tests',
+    isEcmaModule : true,
+    preload      : [{
+        type         : 'js',
+        url          : '../../src/MicroLoader.mjs',
+        isEcmaModule : true
+    }],
+    testClass   : Class('My.Test.Class', {
+        isa      : Siesta.Test.Browser,
+        override : {
+            setup(callback, errback) {
+                this.SUPER(function() {
+                    // We need to call the startup callback only when we know we are
+                    // ready to start testing.
+                    const
+                        { global }   = this,
+                        startupTimer = setInterval(() => {
+                            if (global.Neo?.worker?.App && global.Neo.worker.Manager && global.Neo.Main) {
+                                clearInterval(startupTimer);
+
+                                // TODO: Find what we actually need to wait for
+                                setTimeout(callback, 300);
+                            }
+                        }, 100);
+                }, errback);
+            },
+            async beforeEach() {
+                this.SUPER(...arguments);
+                this.SUPER(t => t.waitFor(50));
+            }
+        }
+    })
 });
 
 project.plan(