neo.mjs 3.2.9 → 4.0.1

package/README.md

@@ -19,6 +19,8 @@ No need to take care of a workers setup, and the cross channel communication on
 <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/neo-movie.png"></a>
 </p>
 
+<a href="https://tobiasuhlig.medium.com/predictive-offline-support-for-assets-you-have-not-used-yet-aeeccccd3754?source=friends_link&sk=e946e0f25f508e6a8cec4136400291a3">Version 4 release announcement</a>
+
 ## Content
 1. <a href="#slack-channel">Slack Channel for questions & feedback</a>
 2. <a href="#architectures">Scalable frontend architectures</a>
@@ -54,7 +56,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/apps/website/data/blog.json

@@ -1,4 +1,30 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Mar 28, 2022",
+        "id"          : 51,
+        "image"       : "predictive-offline-support-for-assets-you-have-not-used-yet.png",
+        "name"        : "Predictive offline support for assets you have not used yet",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/predictive-offline-support-for-assets-you-have-not-used-yet-aeeccccd3754?source=friends_link&sk=e946e0f25f508e6a8cec4136400291a3"
+    },
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Jan 31, 2022",
+        "id"          : 50,
+        "image"       : "clean-architectures-your-benefits-of-using-view-controllers.png",
+        "name"        : "Clean architectures: Your benefits of using view controllers",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/clean-architectures-your-benefits-of-using-view-controllers-7ce6b00f0ad5?source=friends_link&sk=ebef34d36d5d307c7985ba4dedb261f9"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/buildScripts/createApp.mjs

@@ -32,6 +32,7 @@ program
     .option('-i, --info',                     'print environment debug info')
     .option('-a, --appName <value>')
     .option('-m, --mainThreadAddons <value>', `Comma separated list of:\n${addonChoices.join(', ')}\nDefaults to DragDrop, Stylesheet`)
+    .option('-s, --useServiceWorker <value>', '"yes", "no"')
     .option('-t, --themes <value>',           ['all', ...themeFolders, 'none'].join(", "))
     .option('-u, --useSharedWorkers <value>', '"yes", "no"')
     .allowUnknownOption()
@@ -105,11 +106,22 @@ if (programOpts.info) {
         });
     }
 
+    if (!programOpts.useServiceWorker) {
+        questions.push({
+            type   : 'list',
+            name   : 'useServiceWorker',
+            message: 'Do you want to use a ServiceWorker for caching assets?',
+            choices: ['yes', 'no'],
+            default: 'no'
+        });
+    }
+
     inquirer.prompt(questions).then(answers => {
         let appName          = programOpts.appName          || answers.appName,
             mainThreadAddons = programOpts.mainThreadAddons || answers.mainThreadAddons,
             themes           = programOpts.themes           || answers.themes,
             useSharedWorkers = programOpts.useSharedWorkers || answers.useSharedWorkers,
+            useServiceWorker = programOpts.useServiceWorker || answers.useServiceWorker,
             lAppName         = appName.toLowerCase(),
             appPath          = 'apps/' + lAppName + '/',
             dir              = 'apps/' + lAppName,
@@ -181,6 +193,10 @@ if (programOpts.info) {
                 neoConfig.useSharedWorkers = true;
             }
 
+            if (useServiceWorker !== 'no') {
+                neoConfig.useServiceWorker = true;
+            }
+
             if (!insideNeo) {
                 neoConfig.workerBasePath = '../../node_modules/neo.mjs/src/worker/';
             }

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.2.9",
+    "version": "4.0.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -34,22 +34,22 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.0.0",
+        "@fortawesome/fontawesome-free": "^6.1.1",
         "@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.5",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^8.1.5",
+        "inquirer": "^8.2.2",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.7",
-        "sass": "^1.49.9",
+        "postcss": "^8.4.12",
+        "sass": "^1.49.10",
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "4.7.4",

package/src/main/addon/ServiceWorker.mjs

@@ -1,6 +1,5 @@
-import Base               from '../../core/Base.mjs';
-import RemoteMethodAccess from '../../worker/mixin/RemoteMethodAccess.mjs';
-import WorkerManager      from '../../worker/Manager.mjs';
+import Base          from '../../core/Base.mjs';
+import WorkerManager from '../../worker/Manager.mjs';
 
 /**
  * Creates a ServiceWorker instance, in case Neo.config.useServiceWorker is set to true
@@ -15,15 +14,6 @@ class ServiceWorker extends Base {
          * @protected
          */
         className: 'Neo.main.addon.ServiceWorker',
-        /**
-         * @member {String[]|Neo.core.Base[]|null} mixins=[RemoteMethodAccess]
-         */
-        mixins: [RemoteMethodAccess],
-        /**
-         * @member {ServiceWorkerRegistration|null} registration=null
-         * @protected
-         */
-        registration: null,
         /**
          * @member {Boolean} singleton=true
          * @protected
@@ -45,22 +35,30 @@ class ServiceWorker extends Base {
                 path          = (devMode ? config.basePath : config.workerBasePath) + (devMode ? folder : '') + fileName,
                 serviceWorker = navigator.serviceWorker;
 
+            window.addEventListener('beforeunload', me.onBeforeUnload.bind(me));
+
             serviceWorker.register(path, opts)
                 .then(registration => {
-                    me.registration = registration;
-
                     serviceWorker.ready.then(() => {
                         serviceWorker.onmessage = WorkerManager.onWorkerMessage.bind(WorkerManager);
 
                         WorkerManager.sendMessage('service', {
-                            action     : 'registerNeoConfig',
-                            channelPort: registration.active,
-                            data       : config
+                            action: 'registerNeoConfig',
+                            data  : config
                         });
                     });
                 })
         }
     }
+
+    /**
+     *
+     */
+    onBeforeUnload() {
+        WorkerManager.sendMessage('service', {
+            action: 'unregisterPort'
+        });
+    }
 }
 
 Neo.applyClassConfig(ServiceWorker);

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]
          */
@@ -61,14 +66,10 @@ class ServiceBase extends Base {
             app: [
                 'clearCache',
                 'clearCaches',
-                'preloadAssets'
+                'preloadAssets',
+                'removeAssets'
             ]
-        },
-        /**
-         * @member {String|null} workerId=null
-         * @protected
-         */
-        workerId: null
+        }
     }}
 
     /**
@@ -95,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}
     }
 
     /**
@@ -255,6 +257,19 @@ class ServiceBase extends Base {
         this.onConnect(event.source);
     }
 
+    /**
+     * @param {Object} msg
+     * @param {ExtendableMessageEvent} event
+     */
+    onUnregisterPort(msg, event) {
+        for (let [index, value] of this.channelPorts.entries()) {
+            if (value.clientId === event.source.id) {
+                this.channelPorts.splice(index, 1);
+                break;
+            }
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.cacheName=this.cacheName]
@@ -280,9 +295,7 @@ class ServiceBase extends Base {
                 hasMatch = !!asset;
             }
 
-            if (!hasMatch) {
-                items.push(item);
-            }
+            !hasMatch && items.push(item);
         }
 
         if (items.length > 0) {
@@ -311,6 +324,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