neo.mjs 3.2.7 → 3.2.10

package/README.md

@@ -54,7 +54,7 @@ neo.mjs offers two different setups which follow the exact same API.
 You can switch between <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">dedicated</a> and
 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">shared</a> workers at any point.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/workers-setup-canvas.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/workers-setup-v4.png">
 
 The dedicated workers setup uses 4 threads (CPUs).
 Most parts of the frameworks as well as your apps and components live within the app worker.

package/apps/ServiceWorker.mjs

@@ -8,6 +8,12 @@ import ServiceBase from '../src/worker/ServiceBase.mjs';
  * @singleton
  */
 class ServiceWorker extends ServiceBase {
+    /**
+     * @member {String} workerId='service'
+     * @protected
+     */
+    workerId = 'service'
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.ServiceWorker'
@@ -18,12 +24,7 @@ class ServiceWorker extends ServiceBase {
          * @member {Boolean} singleton=true
          * @protected
          */
-        singleton: true,
-        /**
-         * @member {String} workerId='service'
-         * @protected
-         */
-        workerId: 'service'
+        singleton: true
     }}
 }
 

package/buildScripts/webpack/development/webpack.config.worker.mjs

@@ -15,8 +15,10 @@ export default env => {
 
     if (filenameConfig.workers) {
         Object.entries(filenameConfig.workers).forEach(([key, value]) => {
+            // Inside a neo workspace, we want to use the SW inside the top level apps folder,
+            // to allow overriding its logic
             if (key === env.worker) {
-                entry[key] = path.resolve(neoPath, value.input);
+                entry[key] = path.resolve(key === 'service' && !insideNeo ? cwd : neoPath, value.input);
             }
         });
     }

package/buildScripts/webpack/json/myApps.template.json

@@ -13,23 +13,5 @@
         "SharedDialog",
         "SharedDialog2",
         "Website"
-    ],
-    "workers": {
-        "app": {
-            "input": "./src/worker/App.mjs",
-            "output": "appworker.js"
-        },
-        "canvas": {
-            "input": "./src/worker/Canvas.mjs",
-            "output": "canvasworker.js"
-        },
-        "data": {
-            "input": "./src/worker/Data.mjs",
-            "output": "dataworker.js"
-        },
-        "vdom": {
-            "input": "./src/worker/VDom.mjs",
-            "output": "vdomworker.js"
-        }
-    }
+    ]
 }

package/buildScripts/webpack/production/webpack.config.worker.mjs

@@ -15,8 +15,10 @@ export default env => {
 
     if (filenameConfig.workers) {
         Object.entries(filenameConfig.workers).forEach(([key, value]) => {
+            // Inside a neo workspace, we want to use the SW inside the top level apps folder,
+            // to allow overriding its logic
             if (key === env.worker) {
-                entry[key] = path.resolve(neoPath, value.input);
+                entry[key] = path.resolve(key === 'service' && !insideNeo ? cwd : neoPath, value.input);
             }
         });
     }

package/examples/ServiceWorker.mjs

@@ -8,6 +8,12 @@ import ServiceBase from '../src/worker/ServiceBase.mjs';
  * @singleton
  */
 class ServiceWorker extends ServiceBase {
+    /**
+     * @member {String} workerId='service'
+     * @protected
+     */
+    workerId = 'service'
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.ServiceWorker'
@@ -18,12 +24,7 @@ class ServiceWorker extends ServiceBase {
          * @member {Boolean} singleton=true
          * @protected
          */
-        singleton: true,
-        /**
-         * @member {String} workerId='service'
-         * @protected
-         */
-        workerId: 'service'
+        singleton: true
     }}
 }
 

package/examples/preloadingAssets/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './view/MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'MyApp'
+});

package/examples/preloadingAssets/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Preloading Assets</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/preloadingAssets/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath": "examples/preloadingAssets/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "./Main.mjs",
+    "useServiceWorker": true
+}

package/examples/preloadingAssets/view/MainContainer.mjs

@@ -0,0 +1,77 @@
+import Component               from '../../../src/component/Base.mjs';
+import MainContainerController from './MainContainerController.mjs'
+import TabContainer            from '../../../src/tab/Container.mjs';
+import Viewport                from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.preloadingAssets.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.preloadingAssets.view.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.preloadingAssets.view.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Neo.controller.Component} controller=MainContainerController
+         */
+        controller: MainContainerController,
+        /**
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TabContainer,
+            height: 300,
+            width : 500,
+            style : {flex: 'none', margin: '20px'},
+
+            itemDefaults: {
+                module: Component,
+                style : {flex: 'none', padding: '20px'}
+            },
+
+            items: [{
+                tabButtonConfig: {
+                    iconCls: 'fa fa-user-astronaut',
+                    text   : 'Bob'
+                },
+
+                vdom: {
+                    tag: 'img',
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000150.jpg'
+                }
+            }, {
+                tabButtonConfig: {
+                    iconCls: 'fa fa-user-ninja',
+                    text   : 'Alice'
+                },
+
+                vdom: {
+                    tag: 'img',
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000074.jpg'
+                }
+            }],
+            /**
+             * @member {Object} listeners
+             */
+            listeners: {
+                activeIndexChange: 'onActiveIndexChange',
+                mounted          : 'onMounted'
+            }
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/preloadingAssets/view/MainContainerController.mjs

@@ -0,0 +1,41 @@
+import Component from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.preloadingAssets.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.preloadingAssets.view.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.preloadingAssets.view.MainContainerController'
+    }}
+
+    /**
+     * @param {Object} data
+     */
+    onActiveIndexChange(data) {
+        console.log('onActiveIndexChange', data);
+    }
+
+    /**
+     * @param {String} id
+     */
+    onMounted(id) {
+        console.log('onMounted', id);
+
+        setTimeout(() => {
+            Neo.ServiceWorker.preloadAssets({
+                files: ['https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000074.jpg']
+            }).then(data => {
+                console.log(data);
+            });
+        }, 3000)
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.2.7",
+    "version": "3.2.10",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -34,21 +34,21 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.0.0",
+        "@fortawesome/fontawesome-free": "^6.1.0",
         "@material/mwc-button": "^0.25.3",
         "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.2",
-        "chalk": "^5.0.0",
+        "autoprefixer": "^10.4.4",
+        "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^9.0.0",
-        "cssnano": "^5.1.0",
+        "commander": "^9.1.0",
+        "cssnano": "^5.1.4",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^8.1.5",
+        "inquirer": "^8.2.1",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.12",
         "sass": "^1.49.9",
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2",

package/src/calendar/README.md

@@ -1,2 +1,2 @@
 # Development in progress
-Currently, scheduled for the v2.4 release
+Currently, scheduled for the v4.x release

package/src/calendar/view/EditEventContainer.mjs

@@ -92,10 +92,7 @@ class EditEventContainer extends FormContainer {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-
-        if (value) {
-            this.getField('title').focus();
-        }
+        value && this.getField('title').focus();
     }
 
     /**

package/src/calendar/view/MainContainer.mjs

@@ -310,7 +310,7 @@ class MainContainer extends Container {
                     style  : {marginLeft: '10px'}
                 });
             }, 10);
-        } else if (value === false && oldValue) {
+        } else if (!value && oldValue) {
             // we only need this logic in case we dynamically change the config from true to false
             me.items[1]         .removeLast();
             me.items[0].items[1].removeLast();
@@ -652,9 +652,7 @@ class MainContainer extends Container {
 
         map[me.activeView]();
 
-        me.model.setData({
-            currentDate: currentDate
-        });
+        me.model.setData({currentDate});
     }
 }
 

package/src/layout/HBox.mjs

@@ -29,9 +29,7 @@ class HBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed width
-        if (!item.width) {
-            super.applyChildAttributes(item);
-        }
+        !item.width && super.applyChildAttributes(item);
     }
 }
 

package/src/layout/VBox.mjs

@@ -29,9 +29,7 @@ class VBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed height
-        if (!item.height) {
-            super.applyChildAttributes(item);
-        }
+        !item.height && super.applyChildAttributes(item);
     }
 }
 

package/src/main/addon/ServiceWorker.mjs

@@ -36,15 +36,16 @@ class ServiceWorker extends Base {
      */
     construct(config) {
         if ('serviceWorker' in navigator) {
-            let me       = this,
-                config   = Neo.config,
-                devMode  = config.environment === 'development',
-                fileName = devMode ? 'ServiceWorker.mjs' : 'serviceworker.js',
-                folder   = window.location.pathname.includes('/examples/') ? 'examples/' : 'apps/',
-                opts     = devMode ? {type: 'module'} : {},
+            let me            = this,
+                config        = Neo.config,
+                devMode       = config.environment === 'development',
+                fileName      = devMode ? 'ServiceWorker.mjs' : 'serviceworker.js',
+                folder        = window.location.pathname.includes('/examples/') ? 'examples/' : 'apps/',
+                opts          = devMode ? {type: 'module'} : {},
+                path          = (devMode ? config.basePath : config.workerBasePath) + (devMode ? folder : '') + fileName,
                 serviceWorker = navigator.serviceWorker;
 
-            serviceWorker.register(config.basePath + folder + fileName, opts)
+            serviceWorker.register(path, opts)
                 .then(registration => {
                     me.registration = registration;
 
@@ -52,9 +53,9 @@ class ServiceWorker extends Base {
                         serviceWorker.onmessage = WorkerManager.onWorkerMessage.bind(WorkerManager);
 
                         WorkerManager.sendMessage('service', {
-                            action: 'registerNeoConfig',
-                            data  : config,
-                            port  : registration.active
+                            action     : 'registerNeoConfig',
+                            channelPort: registration.active,
+                            data       : config
                         });
                     });
                 })

package/src/main/addon/Stylesheet.mjs

@@ -53,7 +53,6 @@ class Stylesheet extends Base {
 
         if (Neo.config.themes.length > 0 && Neo.config.themes[0] !== '') {
             this.addGlobalCss();
-            // this.insertTheme();
         }
     }
 

package/src/tab/Container.mjs

@@ -139,9 +139,9 @@ class Container extends BaseContainer {
                     me.updateTabButtons();
 
                     me.fire('activeIndexChange', {
-                        item    : me.getActiveCard(),
-                        oldValue: oldValue,
-                        value   : value
+                        item: me.getActiveCard(),
+                        oldValue,
+                        value
                     });
                 }
             }
@@ -245,7 +245,7 @@ class Container extends BaseContainer {
             tabButtons.push(me.getTabButtonConfig(item.tabButtonConfig, index));
 
             if (!(item instanceof Neo.component.Base)) {
-                item = {...me.itemDefaults, flex: 1, isTab:true, ...item};
+                item = {flex: 1, ...me.itemDefaults, isTab: true, ...item};
             }
 
             tabComponents.push(item);

package/src/worker/Manager.mjs

@@ -390,9 +390,9 @@ class Manager extends Base {
             message, worker;
 
         if (!me.stopCommunication) {
-            if (opts.port) {
-                worker = opts.port;
-                delete opts.port;
+            if (opts.channelPort) {
+                worker = opts.channelPort;
+                delete opts.channelPort;
             } else {
                 worker = me.getWorker(dest);
             }
@@ -405,7 +405,7 @@ class Manager extends Base {
 
             message = new Message(opts);
 
-            (me.sharedWorkersEnabled && NeoConfig.useSharedWorkers ? worker.port : worker).postMessage(message, transfer);
+            (worker.port ? worker.port : worker).postMessage(message, transfer);
             return message;
         }
     }

package/src/worker/ServiceBase.mjs

@@ -8,6 +8,19 @@ import RemoteMethodAccess from './mixin/RemoteMethodAccess.mjs';
  * @abstract
  */
 class ServiceBase extends Base {
+    /**
+     * @member {String} cacheName='neo-runtime'
+     */
+    cacheName = 'neo-runtime'
+    /**
+     * @member {String[]} cachePaths
+     */
+    cachePaths = [
+        'raw.githubusercontent.com/',
+        '/dist/production/',
+        '/fontawesome',
+        '/resources/'
+    ]
     /**
      * @member {Object[]|null} channelPorts=null
      * @protected
@@ -28,6 +41,11 @@ class ServiceBase extends Base {
      * @protected
      */
     remotes = []
+    /**
+     * @member {String|null} workerId=null
+     * @protected
+     */
+    workerId = null
 
     static getConfig() {return {
         /**
@@ -35,19 +53,6 @@ class ServiceBase extends Base {
          * @protected
          */
         className: 'Neo.worker.ServiceBase',
-        /**
-         * @member {String} cacheName='neo-runtime'
-         */
-        cacheName: 'neo-runtime',
-        /**
-         * @member {String[]|null} cachePaths
-         */
-        cachePaths: [
-            'raw.githubusercontent.com/',
-            '/dist/production/',
-            '/fontawesome',
-            '/resources/'
-        ],
         /**
          * @member {String[]|Neo.core.Base[]|null} mixins=[RemoteMethodAccess]
          */
@@ -60,14 +65,11 @@ class ServiceBase extends Base {
         remote: {
             app: [
                 'clearCache',
-                'clearCaches'
+                'clearCaches',
+                'preloadAssets',
+                'removeAssets'
             ]
-        },
-        /**
-         * @member {String|null} workerId=null
-         * @protected
-         */
-        workerId: null
+        }
     }}
 
     /**
@@ -94,19 +96,20 @@ class ServiceBase extends Base {
 
     /**
      * @param {String} name=this.cacheName
+     * @returns {Object}
      */
-    clearCache(name=this.cacheName) {
-        caches.keys()
-            .then(cacheNames     => cacheNames.filter(cacheName => cacheName === name))
-            .then(cachesToDelete => Promise.all(cachesToDelete.map(cacheToDelete => caches.delete(cacheToDelete))))
+    async clearCache(name=this.cacheName) {
+        await caches.delete(name);
+        return {success: true}
     }
 
     /**
-     *
+     * @returns {Object}
      */
-    clearCaches() {
-        caches.keys()
-            .then(cachesToDelete => Promise.all(cachesToDelete.map(cacheToDelete => caches.delete(cacheToDelete))))
+    async clearCaches() {
+        let keys = await caches.keys();
+        await Promise.all(keys.map(name => caches.delete(name)));
+        return {success: true}
     }
 
     /**
@@ -254,6 +257,41 @@ class ServiceBase extends Base {
         this.onConnect(event.source);
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} [data.cacheName=this.cacheName]
+     * @param {String[]|String} data.files
+     * @param {Boolean} [data.foreReload=false]
+     */
+    async preloadAssets(data) {
+        let cacheName = data.cacheName || this.cacheName,
+            cache     = await caches.open(cacheName),
+            files     = data.files,
+            items     = [],
+            asset, hasMatch, item;
+
+        if (!Array.isArray(files)) {
+            files = [files];
+        }
+
+        for (item of files) {
+            hasMatch = false;
+
+            if (!data.forceReload) {
+                asset    = await cache.match(item);
+                hasMatch = !!asset;
+            }
+
+            !hasMatch && items.push(item);
+        }
+
+        if (items.length > 0) {
+            await cache.addAll(items);
+        }
+
+        return {success: true};
+    }
+
     /**
      * @param {String} dest app, data, main or vdom (excluding the current worker)
      * @param {Object} opts configs for Neo.worker.Message
@@ -273,6 +311,44 @@ class ServiceBase extends Base {
         });
     }
 
+    /**
+     * You can either pass an url, an array of urls or an object with additional options
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete
+     * @param {String|String[]|Object} data
+     * @param {String|String[]} data.assets
+     * @param {String} data.cacheName=this.cacheName
+     * @param {Object} data.options
+     * @param {Boolean} data.options.ignoreMethod=false
+     * @param {Boolean} data.options.ignoreSearch=false
+     * @param {Boolean} data.options.ignoreVary=false
+     * @returns {Object}
+     */
+    async removeAssets(data) {
+        if (!Neo.isObject(data)) {
+            data = {
+                assets: data
+            };
+        }
+
+        let assets    = data.assets,
+            cacheName = data.cacheName || this.cacheName,
+            options   = data.options || {},
+            cache     = await caches.open(cacheName),
+            promises  = [];
+
+        if (!Array.isArray(assets)) {
+            assets = [assets];
+        }
+
+        assets.forEach(asset => {
+            promises.push(cache.delete(asset, options));
+        });
+
+        await Promise.all(promises);
+
+        return {success: true};
+    }
+
     /**
      * @param {String} dest app, data, main or vdom (excluding the current worker)
      * @param {Object} opts configs for Neo.worker.Message