neo.mjs 3.2.3 → 3.2.6

package/apps/ServiceWorker.mjs

@@ -0,0 +1,36 @@
+import Neo         from '../src/Neo.mjs';
+import * as core   from '../src/core/_export.mjs';
+import ServiceBase from '../src/worker/ServiceBase.mjs';
+
+/**
+ * @class Neo.ServiceWorker
+ * @extends Neo.worker.ServiceBase
+ * @singleton
+ */
+class ServiceWorker extends ServiceBase {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.ServiceWorker'
+         * @protected
+         */
+        className: 'Neo.ServiceWorker',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * @member {String} workerId='service'
+         * @protected
+         */
+        workerId: 'service'
+    }}
+}
+
+Neo.applyClassConfig(ServiceWorker);
+
+let instance = Neo.create(ServiceWorker);
+
+Neo.applyToGlobalNs(instance);
+
+export default instance;

package/apps/covid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -74,6 +69,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -121,10 +121,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/apps/realworld2/view/article/Gallery.mjs

@@ -17,15 +17,15 @@ class Gallery extends BaseGallery {
          */
         cls: ['rw2-article-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 240,
+        itemHeight: 240,
         /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
          */
-        imageWidth: 320,
+        itemWidth: 320,
         /**
          * Array containing the PreviewComponent references
          * @member {Array} items=[]
@@ -69,8 +69,8 @@ class Gallery extends BaseGallery {
             id      : me.getItemVnodeId(record[me.keyProperty]),
             tabIndex: '-1',
             style: {
-                height: me.imageHeight + 'px',
-                width : me.imageWidth  + 'px'
+                height: me.itemHeight + 'px',
+                width : me.itemWidth  + 'px'
             },
             cn: [{
                 cls: ['item-wrapper'],

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -94,6 +89,11 @@ class CountryGallery extends Gallery {
                 }]
             }]
         },
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -141,10 +141,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/buildScripts/webpack/buildThreads.mjs

@@ -61,7 +61,7 @@ if (programOpts.info) {
                 type   : 'list',
                 name   : 'threads',
                 message: 'Please choose the threads to build:',
-                choices: ['all', 'app', 'canvas', 'data', 'main', 'vdom'],
+                choices: ['all', 'app', 'canvas', 'data', 'main', 'service', 'vdom'],
                 default: 'all'
             });
         }
@@ -88,11 +88,12 @@ if (programOpts.info) {
         }
 
         function parseThreads(tPath) {
-            (threads === 'all' || threads === 'main')   && spawnSync(webpack, ['--config', `${tPath}.main.mjs`],                                                    cpOpts);
-            (threads === 'all' || threads === 'app')    && spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`],               cpOpts);
-            (threads === 'all' || threads === 'canvas') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=canvas`], cpOpts);
-            (threads === 'all' || threads === 'data')   && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=data`],   cpOpts);
-            (threads === 'all' || threads === 'vdom')   && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=vdom`],   cpOpts);
+            (threads === 'all' || threads === 'main')    && spawnSync(webpack, ['--config', `${tPath}.main.mjs`],                                                     cpOpts);
+            (threads === 'all' || threads === 'app')     && spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`],                cpOpts);
+            (threads === 'all' || threads === 'canvas')  && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=canvas`],  cpOpts);
+            (threads === 'all' || threads === 'data')    && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=data`],    cpOpts);
+            (threads === 'all' || threads === 'service') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=service`], cpOpts);
+            (threads === 'all' || threads === 'vdom')    && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=vdom`],    cpOpts);
         }
 
         // dist/development

package/buildScripts/webpack/json/build.json

@@ -14,6 +14,10 @@
             "input": "./src/worker/Data.mjs",
             "output": "dataworker.js"
         },
+        "service": {
+            "input": "./apps/ServiceWorker.mjs",
+            "output": "serviceworker.js"
+        },
         "vdom": {
             "input": "./src/worker/VDom.mjs",
             "output": "vdomworker.js"

package/examples/ServiceWorker.mjs

@@ -0,0 +1,36 @@
+import Neo         from '../src/Neo.mjs';
+import * as core   from '../src/core/_export.mjs';
+import ServiceBase from '../src/worker/ServiceBase.mjs';
+
+/**
+ * @class Neo.ServiceWorker
+ * @extends Neo.worker.ServiceBase
+ * @singleton
+ */
+class ServiceWorker extends ServiceBase {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.ServiceWorker'
+         * @protected
+         */
+        className: 'Neo.ServiceWorker',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * @member {String} workerId='service'
+         * @protected
+         */
+        workerId: 'service'
+    }}
+}
+
+Neo.applyClassConfig(ServiceWorker);
+
+let instance = Neo.create(ServiceWorker);
+
+Neo.applyToGlobalNs(instance);
+
+export default instance;

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -27,15 +27,10 @@ class CountryGallery extends Gallery {
          */
         cls: ['neo-country-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -73,6 +68,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -103,10 +103,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = me.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;
@@ -184,7 +184,7 @@ class CountryGallery extends Gallery {
 
         imageName = map[imageName] || imageName;
 
-        return 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/' + imageName + '.png'
+        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/examples/component/coronaGallery/CountryModel.mjs

@@ -1,4 +1,4 @@
-import Model  from '../../../src/data/Model.mjs';
+import Model from '../../../src/data/Model.mjs';
 
 /**
  * @class Neo.examples.component.coronaGallery.CountryModel
@@ -6,8 +6,14 @@ import Model  from '../../../src/data/Model.mjs';
  */
 class CountryModel extends Model {
     static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryModel'
+         * @protected
+         */
         className: 'Neo.examples.component.coronaGallery.CountryModel',
-
+        /**
+         * @member {Object[]} fields
+         */
         fields: [{
             name: 'cases',
             type: 'int'

package/examples/component/coronaGallery/CountryStore.mjs

@@ -7,9 +7,19 @@ import Store        from '../../../src/data/Store.mjs';
  */
 class CountryStore extends Store {
     static getConfig() {return {
-        className  : 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryStore'
+         * @protected
+         */
+        className: 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} keyProperty='country'
+         */
         keyProperty: 'country',
-        model      : CountryModel
+        /**
+         * @member {Neo.data.Model} model=CountryModel
+         */
+        model: CountryModel
     }}
 }
 

package/examples/component/coronaGallery/MainContainer.mjs

@@ -363,14 +363,11 @@ class MainContainer extends Viewport {
         }
     }
 
+    /**
+     * @param {Object[]} data
+     */
     addStoreItems(data) {
         this.getStore().data = data;
-
-        setTimeout(() => {
-            Neo.main.DomAccess.focus({
-                id: this.gallery.id
-            });
-        }, 200);
     }
 
     /**

package/examples/component/gallery/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/gallery/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/gallery/MainContainer.mjs

@@ -1,4 +1,5 @@
 import Gallery     from '../../../src/component/Gallery.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -228,6 +229,7 @@ class MainContainer extends Viewport {
         me.gallery = Neo.create({
             module: Gallery,
             id    : 'neo-gallery-1',
+            store : ImageStore,
             ...me.galleryConfig
         });
 

package/examples/component/helix/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/helix/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/helix/MainContainer.mjs

@@ -1,5 +1,6 @@
 import CheckBox    from '../../../src/form/field/CheckBox.mjs';
 import Helix       from '../../../src/component/Helix.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -312,6 +313,7 @@ class MainContainer extends Viewport {
         me.helix = Neo.create({
             module: Helix,
             id    : 'neo-helix-1',
+            store : ImageStore,
             ...me.helixConfig
         });
 

package/examples/component/helix/neo-config.json

@@ -4,5 +4,6 @@
     "environment"      : "development",
     "mainPath"         : "./Main.mjs",
     "renderCountDeltas": true,
-    "themes"           : ["neo-theme-dark"]
+    "themes"           : ["neo-theme-dark"],
+    "useServiceWorker" : true
 }

package/examples/list/animate/MainStore.mjs

@@ -10,7 +10,7 @@ class MainStore extends Store {
         className: 'Neo.examples.list.animate.MainStore',
         autoLoad : true,
         model    : MainModel,
-        url      : '../../resources/examples/data/circleContacts.json',
+        url      : '../../resources/examples/data/circles/group1.json',
 
         filters: [{
             disabled : true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.2.3",
+    "version": "3.2.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -41,16 +41,16 @@
         "chalk": "^5.0.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.0.0",
-        "cssnano": "^5.0.17",
+        "cssnano": "^5.1.0",
         "envinfo": "^7.8.1",
-        "fs-extra": "^10.0.0",
+        "fs-extra": "^10.0.1",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^8.1.5",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.6",
-        "sass": "^1.49.7",
-        "webpack": "^5.68.0",
+        "postcss": "^8.4.7",
+        "sass": "^1.49.9",
+        "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "4.7.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/apps/covid/country/Gallery.scss

@@ -16,6 +16,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -66,4 +67,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

package/resources/scss/src/component/Gallery.scss

@@ -62,6 +62,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity  : .95;
             transform: translate3d(0, 0, 180px) scale(1.5);
         }
     }
@@ -69,4 +70,4 @@
     .image-wrap.neo-selected img {
         -webkit-box-reflect: unset !important;
     }
-}
+}

package/resources/scss/src/component/Helix.scss

@@ -16,6 +16,12 @@
         outline: 0;
     }
 
+    &.neo-follow-selection {
+        .neo-helix-item {
+            transition: all 0.1s linear;
+        }
+    }
+
     &.neo-transition-100 {
         .neo-helix-item {
             transition: all 0.1s ease-in-out !important;
@@ -87,4 +93,4 @@
         right       : 0;
         text-shadow : 0 0 10px #61DFE5;
     }
-}
+}

package/resources/scss/src/examples/component/coronaGallery/CountryGallery.scss

@@ -42,6 +42,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -87,4 +88,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

package/src/DefaultConfig.mjs

@@ -134,7 +134,7 @@ const DefaultConfig = {
      * Experimental flag if an offscreen canvas worker should get created.
      * @default false
      * @memberOf! module:Neo
-     * @name config.useCssVars
+     * @name config.useCanvasWorker
      * @type Boolean
      */
     useCanvasWorker: false,
@@ -163,6 +163,15 @@ const DefaultConfig = {
      * @type Boolean
      */
     useGoogleAnalytics: false,
+    /**
+     * True will add the ServiceWorker main thread addon to support caching of assets (PWA)
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
+     * @default false
+     * @memberOf! module:Neo
+     * @name config.useServiceWorker
+     * @type Boolean
+     */
+    useServiceWorker: false,
     /**
      * Creates App, Data & VDom as SharedWorkers.
      * Set this one to true in case you want to connect multiple main threads.