neo.mjs 8.31.1 → 8.33.0

package/src/grid/column/Currency.mjs

@@ -0,0 +1,72 @@
+import Column from './Base.mjs';
+
+/**
+ * @class Neo.grid.column.Currency
+ * @extends Neo.grid.column.Base
+ */
+class Currency extends Column {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Currency'
+         * @protected
+         */
+        className: 'Neo.grid.column.Currency',
+        /**
+         * @member {String} type='currency'
+         * @protected
+         */
+        type: 'currency',
+        /**
+         * @member {String} currency='USD'
+         */
+        currency: 'USD',
+        /**
+         * @member {String} locale='default'
+         */
+        locale: 'default'
+    }
+
+    /**
+     * @member {Intl.NumberFormat|null} formatter=null
+     */
+    formatter = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createFormatter()
+    }
+
+    /**
+     * @param {Object}             data
+     * @param {Neo.button.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
+     * @param {Number|String}      data.value
+     * @returns {*}
+     */
+    cellRenderer({value}) {
+        if (value === null || value === undefined) {
+            return ''
+        }
+
+        return this.formatter.format(value)
+    }
+
+    /**
+     *
+     */
+    createFormatter() {
+        let me = this;
+
+        me.formatter = new Intl.NumberFormat(me.locale, {style: 'currency', currency: me.currency})
+    }
+}
+
+export default Neo.setupClass(Currency);

package/src/grid/column/_export.mjs

@@ -1,7 +1,8 @@
 import AnimatedChange from './AnimatedChange.mjs';
 import Base           from './Base.mjs';
 import Component      from './Component.mjs';
+import Currency       from './Currency.mjs';
 import Index          from './Index.mjs';
 import Progress       from './Progress.mjs';
 
-export {AnimatedChange, Base, Component, Index, Progress};
+export {AnimatedChange, Base, Component, Currency, Index, Progress};

package/src/grid/plugin/AnimateRows.mjs

@@ -27,7 +27,7 @@ class AnimateRows extends Base {
          */
         ntype: 'plugin-grid-animate-rows',
         /**
-         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * Time in ms for the background-color, opacity & transform transitions
          * @member {Number} transitionDuration_=500
          */
         transitionDuration_: 500,
@@ -65,7 +65,7 @@ class AnimateRows extends Base {
         // Add the re-bound listeners
         owner.store = store;
 
-        me.updateTransitionDetails()
+        owner.addCls('neo-animate-rows')
     }
 
     /**
@@ -75,7 +75,7 @@ class AnimateRows extends Base {
      * @protected
      */
     afterSetTransitionDuration(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue))
+        this.owner.addStyle({'--neo-duration': value + 'ms'})
     }
 
     /**
@@ -85,7 +85,7 @@ class AnimateRows extends Base {
      * @protected
      */
     afterSetTransitionEasing(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(!!oldValue)
+        this.owner.addStyle({'--neo-easing': value})
     }
 
     /**
@@ -102,7 +102,11 @@ class AnimateRows extends Base {
      * @param {Object} args
      */
     destroy(...args) {
-        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-grid-row`);
+        this.owner.addStyle({
+            '--neo-duration': null,
+            '--neo-easing'  : null
+        });
+
         super.destroy(...args)
     }
 
@@ -125,32 +129,6 @@ class AnimateRows extends Base {
         this.updateView()
     }
 
-    /**
-     * We do not want to apply the style to each list item itself,
-     * so we are using Neo.util.Css
-     * @param {Boolean} deleteRule=false
-     * @protected
-     */
-    async updateTransitionDetails(deleteRule=false) {
-        let me       = this,
-            duration = me.transitionDuration,
-            easing   = me.transitionEasing,
-            {id}     = me.owner;
-
-        if (deleteRule) {
-            await CssUtil.deleteRules(me.appName, `#${id} .neo-grid-row`)
-        }
-
-        CssUtil.insertRules(me.appName, [
-            `#${id} .neo-grid-row {`,
-                'transition:',
-                    `background-color ${duration}ms ${easing},`,
-                    `opacity ${duration}ms ${easing},`,
-                    `transform ${duration}ms ${easing}`,
-            '}'
-        ].join(''))
-    }
-
     /**
      *
      */

package/src/list/Base.mjs

@@ -206,9 +206,7 @@ class List extends Component {
                     plugins = me.plugins || [];
 
                 plugins.push({
-                    module  : module.default,
-                    appName : me.appName,
-                    windowId: me.windowId,
+                    module: module.default,
                     ...me.pluginAnimateConfig
                 });
 

package/src/list/plugin/Animate.mjs

@@ -156,7 +156,7 @@ class Animate extends Base {
      * @param {Object} args
      */
     destroy(...args) {
-        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-list-item`);
+        CssUtil.deleteRules(this.windowId, `#${this.owner.id} .neo-list-item`);
         super.destroy(...args)
     }
 
@@ -431,10 +431,10 @@ class Animate extends Base {
             {id}     = me.owner;
 
         if (deleteRule) {
-            await CssUtil.deleteRules(me.appName, `#${id} .neo-list-item`)
+            await CssUtil.deleteRules(me.windowId, `#${id} .neo-list-item`)
         }
 
-        CssUtil.insertRules(me.appName, [
+        CssUtil.insertRules(me.windowId, [
             `#${id} .neo-list-item {`,
                 `transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
             '}'

package/src/main/addon/ServiceWorker.mjs

@@ -19,6 +19,14 @@ class ServiceWorker extends Base {
      * @param {Object} config
      */
     construct(config) {
+        super.construct(config);
+        this.registerServiceWorker()
+    }
+
+    /**
+     * @returns {Promise<void>}
+     */
+    async registerServiceWorker() {
         if ('serviceWorker' in navigator) {
             let me              = this,
                 {config}        = Neo,
@@ -27,30 +35,32 @@ class ServiceWorker extends Base {
                 folder          = window.location.pathname.includes('/examples/') ? 'examples/' : 'apps/',
                 opts            = devMode ? {type: 'module'} : {},
                 path            = (devMode ? config.basePath : config.workerBasePath) + (devMode ? folder : '') + fileName,
-                {serviceWorker} = navigator;
+                {serviceWorker} = navigator,
+                registration    = await serviceWorker.register(path, opts);
 
             window.addEventListener('beforeunload', me.onBeforeUnload.bind(me));
 
-            serviceWorker.register(path, opts)
-                .then(registration => {
-                    serviceWorker.ready.then(() => {
-                        serviceWorker.onmessage = WorkerManager.onWorkerMessage.bind(WorkerManager);
+            registration.addEventListener('updatefound', () => {
+                window.location.reload()
+            })
+
+            await serviceWorker.ready;
+
+            serviceWorker.onmessage = WorkerManager.onWorkerMessage.bind(WorkerManager);
 
-                        if (!WorkerManager.getWorker('service')) {
-                            /*
-                             * navigator.serviceWorker.controller can be null in case we load a page for the first time
-                             * or in case of a force refresh.
-                             * See: https://www.w3.org/TR/service-workers/#navigator-service-worker-controller
-                             */
-                            WorkerManager.serviceWorker = registration.active
-                        }
+            if (!WorkerManager.getWorker('service')) {
+                /*
+                 * navigator.serviceWorker.controller can be null in case we load a page for the first time
+                 * or in case of a force refresh.
+                 * See: https://www.w3.org/TR/service-workers/#navigator-service-worker-controller
+                 */
+                WorkerManager.serviceWorker = registration.active
+            }
 
-                        WorkerManager.sendMessage('service', {
-                            action: 'registerNeoConfig',
-                            data  : config
-                        })
-                    })
-                })
+            WorkerManager.sendMessage('service', {
+                action: 'registerNeoConfig',
+                data  : config
+            })
         }
     }
 

package/src/manager/Component.mjs

@@ -400,8 +400,6 @@ class Component extends Manager {
         if (vdom.cn) {
             output.cn = [];
 
-            childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
-
             vdom.cn.forEach(item => {
                 childDepth = depth;
 
@@ -445,7 +443,7 @@ class Component extends Manager {
                         component = this.get(item.componentId);
 
                         // keep references in case there is no vnode (cmp not mounted)
-                        if (component.vnode) {
+                        if (component?.vnode) {
                             item = component.vnode
                         }
                     }

package/src/plugin/Base.mjs

@@ -37,12 +37,21 @@ class Plugin extends Base {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me      = this,
+            {owner} = me;
 
-        if (me.owner.mounted) {
+        if (owner.isConstructed) {
+            me.onOwnerConstructed()
+        } else {
+            owner.on('constructed', () => {
+                me.onOwnerConstructed()
+            }, me, {once: true})
+        }
+
+        if (owner.mounted) {
             me.onOwnerMounted();
         } else {
-            me.owner.on('mounted', me.onOwnerMounted, me);
+            owner.on('mounted', me.onOwnerMounted, me);
         }
     }
 
@@ -56,6 +65,17 @@ class Plugin extends Base {
         value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
+    /**
+     * Override this method to apply changes to the owner Component when it is constructed
+     */
+    onOwnerConstructed() {
+        let {owner} = this;
+
+        if (owner.windowId) {
+            this.windowId = owner.windowId
+        }
+    }
+
     /**
      * Override this method to apply changes to the owner Component when it does get mounted
      */

package/src/selection/HelixModel.mjs

@@ -223,8 +223,7 @@ class HelixModel extends Model {
             isSelected = toggleSelection === false ? false : me.items.includes(itemId),
             items      = me.items,
             oldItems   = [...items],
-            deltas     = [],
-            listenerId;
+            deltas     = [];
 
         // a select() call can happen before the view is registered
         if (!view) {
@@ -232,13 +231,11 @@ class HelixModel extends Model {
         }
 
         if (!view.mounted) {
-            listenerId = view.on('mounted', () => {
-                view.un('mounted', listenerId);
-
+            view.on('mounted', () => {
                 me.timeout(300).then(() => {
                     me.select(itemId, toggleSelection)
                 })
-            })
+            }, me, {once: true})
         }
 
         if (me.singleSelect) {

package/src/tab/Container.mjs

@@ -524,7 +524,7 @@ class Container extends BaseContainer {
             i             = 0,
             len           = tabBar.items.length,
             index         = -1,
-            card, listenerId;
+            card;
 
         for (; i < len; i++) {
             if (tabBar.items[i].id === buttonId) {
@@ -537,10 +537,9 @@ class Container extends BaseContainer {
             card = cardContainer.items[index];
 
             if (me.vnode && !card.mounted) {
-                listenerId = card.on('mounted', () => {
-                    card.un('mounted', listenerId);
+                card.on('mounted', () => {
                     me.activeIndex = index
-                })
+                }, me, {once: true})
             } else {
                 me.activeIndex = index
             }

package/src/table/Container.mjs

@@ -161,14 +161,13 @@ class Container extends BaseContainer {
     afterSetCellEditing(value, oldValue) {
         if (value) {
             import('./plugin/CellEditing.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
-                    module : module.default,
-                    appName,
-                    windowId
+                    module: module.default,
+                    appName
                 });
 
                 me.plugins = plugins
@@ -262,7 +261,7 @@ class Container extends BaseContainer {
         }
 
         if (cssRules.length > 0) {
-            CssUtil.insertRules(me.appName, cssRules)
+            CssUtil.insertRules(me.windowId, cssRules)
         }
 
         me.scrollbarsCssApplied = true

package/src/util/Css.mjs

@@ -15,27 +15,27 @@ class Css extends Base {
 
     /**
      * Pass the selectorText of the rules which you want to remove
-     * @param {String} appName
+     * @param {Number} windowId
      * @param {String[]|String} rules
      */
-    static deleteRules(appName, rules) {
+    static deleteRules(windowId, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules]
         }
 
-        Neo.main.addon.Stylesheet.deleteCssRules({appName, rules})
+        Neo.main.addon.Stylesheet.deleteCssRules({rules, windowId})
     }
 
     /**
-     * @param {String} appName
+     * @param {Number} windowId
      * @param {String[]|String} rules
      */
-    static insertRules(appName, rules) {
+    static insertRules(windowId, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules]
         }
 
-        Neo.main.addon.Stylesheet.insertCssRules({appName, rules})
+        Neo.main.addon.Stylesheet.insertCssRules({rules, windowId})
     }
 }
 

package/src/worker/App.mjs

@@ -413,17 +413,6 @@ class App extends Base {
             })
         })
     }
-    /**
-     * Triggered in case a connected ServiceWorker receives a new version.
-     * Especially inside dist envs, a reload of the connecting window is required,
-     * since the SW will clear its caches and the app can receive conflicting bundle versions.
-     * @param {Object} data
-     * @param {String} data.newVersion
-     * @param {String} data.oldVersion
-     */
-    onNewVersion(data) {
-        Neo.Main.reloadWindow({});
-    }
 
     /**
      * Fire event on all apps

package/src/worker/Manager.mjs

@@ -8,6 +8,10 @@ import RemoteMethodAccess from './mixin/RemoteMethodAccess.mjs';
 const NeoConfig = Neo.config,
       devMode   = NeoConfig.environment === 'development';
 
+navigator.serviceWorker.addEventListener('controllerchange', function() {
+    window.location.reload()
+}, {once: true});
+
 /**
  * The worker manager lives inside the main thread and creates the App, Data & VDom worker.
  * Also, responsible for sending messages from the main thread to the different workers.

package/src/worker/ServiceBase.mjs

@@ -14,6 +14,10 @@ class ServiceBase extends Base {
          * @protected
          */
         className: 'Neo.worker.ServiceBase',
+        /**
+         * @member {String} cacheName_='neo-runtime'
+         */
+        cacheName_: 'neo-runtime',
         /**
          * @member {String[]|Neo.core.Base[]|null} mixins=[RemoteMethodAccess]
          */
@@ -33,10 +37,6 @@ class ServiceBase extends Base {
         }
     }
 
-    /**
-     * @member {String} cacheName='neo-runtime'
-     */
-    cacheName = 'neo-runtime'
     /**
      * @member {String[]} cachePaths
      */
@@ -94,6 +94,15 @@ class ServiceBase extends Base {
         Neo.workerId      = me.workerId
     }
 
+    /**
+     * Triggered when accessing the cacheName config
+     * @param {String} value
+     * @protected
+     */
+    beforeGetCacheName(value) {
+        return value + '-' + this.version
+    }
+
     /**
      * @param {String} name=this.cacheName
      * @returns {Promise<Object>}
@@ -163,14 +172,26 @@ class ServiceBase extends Base {
     /**
      * @param {ExtendableMessageEvent} event
      */
-    onActivate(event) {
-        console.log('onActivate', event)
+    async onActivate(event) {
+        console.log('onActivate', event);
+
+        let me   = this,
+            keys = await caches.keys(),
+            key;
+
+        for (key of keys) {
+            // Clear caches for prior SW versions, without touching non-related caches
+            if (key.startsWith(me._cacheName) && key !== me.cacheName) {
+                // No need to await the method execution
+                me.clearCache(key)
+            }
+        }
     }
 
     /**
      * @param {Client} source
      */
-    onConnect(source) {
+    async onConnect(source) {
         console.log('onConnect', source);
 
         this.createMessageChannel(source);
@@ -181,8 +202,8 @@ class ServiceBase extends Base {
      * @param {ExtendableMessageEvent} event
      */
     onFetch(event) {
-        let hasMatch   = false,
-            {request}  = event,
+        let hasMatch  = false,
+            {request} = event,
             key;
 
         for (key of this.cachePaths) {
@@ -192,7 +213,7 @@ class ServiceBase extends Base {
             }
         }
 
-        hasMatch && event.respondWith(
+        hasMatch && request.method === 'GET' && event.respondWith(
             caches.match(request)
                 .then(cachedResponse => cachedResponse || caches.open(this.cacheName)
                 .then(cache          => fetch(request)
@@ -206,8 +227,7 @@ class ServiceBase extends Base {
      * @param {ExtendableMessageEvent} event
      */
     onInstall(event) {
-        console.log('onInstall', event);
-        globalThis.skipWaiting()
+        console.log('onInstall', event)
     }
 
     /**
@@ -250,25 +270,15 @@ class ServiceBase extends Base {
      * @param {ExtendableMessageEvent} event
      */
     async onRegisterNeoConfig(msg, event) {
-        let me        = this,
-            {version} = me;
-
-        Neo.config = Neo.config || {};
-        Object.assign(Neo.config, msg.data);
-
-        if (version !== Neo.config.version) {
-            await me.clearCaches();
-
-            me.version = Neo.config.version;
+        this.onConnect(event.source)
+    }
 
-            me.sendMessage('app', {
-                action    : 'newVersion',
-                newVersion: Neo.config.version,
-                oldVersion: version
-            })
-        } else {
-            me.onConnect(event.source)
-        }
+    /**
+     * @param {Object} msg
+     * @param {ExtendableMessageEvent} event
+     */
+    async onSkipWaiting(msg, event) {
+        await globalThis.skipWaiting()
     }
 
     /**