neo.mjs 7.2.0 → 7.4.0

package/apps/portal/view/examples/List.mjs

@@ -1,5 +1,5 @@
 import BaseList from '../../../../src/list/Base.mjs';
-import Examples from '../../store/Examples.mjs';
+import VDomUtil from '../../../../src/util/VDom.mjs';
 
 /**
  * @class Portal.view.examples.List
@@ -25,13 +25,24 @@ class List extends BaseList {
          */
         baseCls: ['portal-examples-list', 'neo-list'],
         /**
-         * @member {Neo.data.Store} store=Examples
+         * @member {String} baseUrl='https://neomjs.com/'
          */
-        store: Examples,
+        baseUrl: 'https://neomjs.com/',
         /**
-         * @member {String|null} storeUrl_=null
+         * The env of the example links.
+         * Valid values are 'development', 'dist/development', 'dist/production'
+         * @member {String} environment='development'
          */
-        storeUrl_: null,
+        environment: 'development',
+        /**
+         * Specify how many example item images to preload when intersecting
+         * @member {Number} preloadImages=5
+         */
+        preloadImages: 5,
+        /**
+         * @member {String} sourceBaseUrl='https://github.com/neomjs/neo/tree/dev/'
+         */
+        sourceBaseUrl: 'https://github.com/neomjs/neo/tree/dev/',
         /**
          * @member {Boolean} useWrapperNode=true
          */
@@ -46,31 +57,9 @@ class List extends BaseList {
     }
 
     /**
-     * Triggered before the store config gets changed.
-     * @param {Object|Neo.data.Store} value
-     * @param {Object|Neo.data.Store} oldValue
-     * @returns {Neo.data.Store}
-     * @protected
+     * @member {String} imageBasePath
      */
-    beforeSetStore(value, oldValue) {
-        if (value) {
-            if (value.isClass) {
-                value = {
-                    module: value,
-                    url   : this.storeUrl
-                };
-            } else if (Neo.isObject(value)) {
-                value.url = this.storeUrl;
-            }
-        }
-
-        return super.beforeSetStore(value, oldValue);
-    }
-
-    /**
-     * @param {Object} record
-     */
-    createItemContent(record) {
+    get imageBasePath() {
         let basePath;
 
         if (Neo.config.isGitHubPages) {
@@ -83,17 +72,50 @@ class List extends BaseList {
             basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/website/examples'
         }
 
+        return basePath
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            intersect: me.onIntersect,
+            scope    : me
+        })
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        value && this.registerIntersectionObserver()
+    }
+
+    /**
+     * @param {Object} record
+     */
+    createItemContent(record) {
+        let me = this;
+
         return [
-            {cls: ['content', 'neo-relative'], cn: [
-                {cls: ['neo-full-size', 'preview-image'], style: {
-                    backgroundImage: `url('${basePath}/${record.image}'), linear-gradient(#777, #333)`}
-                },
+            {cls: ['content', 'neo-relative'], data: {recordId: record.id}, removeDom: me.isHiddenItem(record), cn: [
+                {cls: ['neo-multi-window'], data: {neoTooltip: 'Multi Window Demo'}, removeDom: !record.sharedWorkers, cn: [
+                    {cls: ['far', 'fa-window-restore']}
+                ]},
+                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
                 {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
-                    {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
-                        {html: record.name.replace(List.nameRegEx, "$1")}
-                    ]},
+                    {...me.createLink(record)},
                     {cls: ['neo-top-20'], cn: [
-                        {tag: 'a', cls: ['fab fa-github', 'neo-github-image'], href: record.sourceUrl, target: '_blank'},
+                        {...me.createSourceLink(record)},
                         {cls: ['neo-inner-content'], cn: [
                             {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
                             {cls: ['neo-inner-details'], html: record.environments.join(', ')}
@@ -104,6 +126,56 @@ class List extends BaseList {
         ]
     }
 
+    /**
+     *
+     * @param {Object} record
+     * @returns {Object}
+     */
+    createLink(record) {
+        let externalLink = record.url.startsWith('http'),
+
+        vdom = {
+            tag : 'a',
+            cls : ['neo-title'],
+            cn  : [{html: record.name.replace(List.nameRegEx, "$1")}],
+            href: record.url
+        };
+
+        // We can use a shorter syntax for pointing examples to neomjs.com, but not all examples have to be there.
+        if (!externalLink) {
+            vdom.href = this.baseUrl + record.url
+        }
+
+        // Do not open multi-window examples inside a new browser window, in case the environment is the same.
+        // E.g. opening the multi-window covid app & the portal app inside the same app worker is problematic.
+        if (!record.sharedWorkers || this.environment !== Neo.config.environment || externalLink) {
+            vdom.target = '_blank'
+        }
+
+        return vdom
+    }
+
+    /**
+     *
+     * @param {Object} record
+     * @returns {Object}
+     */
+    createSourceLink(record) {
+        let vdom = {
+            tag   : 'a',
+            cls   : ['fab fa-github', 'neo-github-image'],
+            href  : record.sourceUrl,
+            target: '_blank'
+        };
+
+        // We can use a shorter syntax for pointing examples to neomjs/neo repo, but not all examples have to be there.
+        if (!record.sourceUrl.startsWith('http')) {
+            vdom.href = this.sourceBaseUrl + record.sourceUrl
+        }
+
+        return vdom
+    }
+
     /**
      * @returns {Object}
      */
@@ -117,6 +189,78 @@ class List extends BaseList {
     getVnodeRoot() {
         return this.vnode.childNodes[0]
     }
+
+    /**
+     * @param {Object} record
+     * @returns {Boolean}
+     */
+    isHiddenItem(record) {
+        if (record.hidden) {
+            return true
+        }
+
+        // We only want to show the portal app for the non-current environment.
+        // => A link to itself feels pointless
+        return record.sourceUrl === 'apps/portal' && this.environment === Neo.config.environment
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onIntersect(data) {
+        let me                     = this,
+            {imageBasePath, store} = me,
+            record                 = store.get(parseInt(data.data.recordId)),
+            i                      = store.indexOf(record),
+            len                    = Math.min(i + me.preloadImages, store.getCount()),
+            needsUpdate            = false,
+            node;
+
+        for (; i < len; i++) {
+            node = VDomUtil.getByFlag(me.vdom, `image-${record.id}`);
+
+            if (!node.style) {
+                needsUpdate = true;
+
+                node.style = {
+                    backgroundImage: `url('${imageBasePath}/${record.image}'), linear-gradient(#777, #333)`
+                }
+            }
+        }
+
+        needsUpdate && me.update()
+    }
+
+    /**
+     *
+     */
+    async registerIntersectionObserver() {
+        let me   = this,
+            opts = {id: me.id, observe: ['.content'], windowId: me.windowId},
+            i    = 0,
+            len  = me.intersectionObserverReconnects,
+            data;
+
+        await me.timeout(150);
+
+        data = await Neo.main.addon.IntersectionObserver.register({
+            ...opts,
+            callback: 'isVisible',
+            root    : `#${me.parentId}`
+        });
+
+        if (data.countTargets < 1) {
+            for (; i < len; i++) {
+                await me.timeout(100);
+
+                data = await Neo.main.addon.IntersectionObserver.observe(opts);
+
+                if (data.countTargets > 0) {
+                    break
+                }
+            }
+        }
+    }
 }
 
 export default Neo.setupClass(List);

package/apps/portal/view/examples/TabContainer.mjs

@@ -1,4 +1,5 @@
 import Container              from '../../../../src/tab/Container.mjs';
+import ExampleStore           from '../../store/Examples.mjs';
 import List                   from './List.mjs';
 import TabContainerController from './TabContainerController.mjs';
 
@@ -42,23 +43,25 @@ class TabContainer extends Container {
          */
         items: [{
             reference      : 'examples-devmode-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_devmode.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_devmode.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-knight',
                 route  : '/examples/devmode',
                 text   : 'DevMode'
             }
         }, {
+            environment    : 'dist/development',
             reference      : 'examples-dist-dev-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_dist_dev.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_dev.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-queen',
                 route  : '/examples/dist_dev',
                 text   : 'dist/dev'
             }
         }, {
+            environment    : 'dist/production',
             reference      : 'examples-dist-prod-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_dist_prod.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_prod.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-king',
                 route  : '/examples/dist_prod',

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.2.0'
+                html  : 'v7.4.0'
             }]
         }],
         /**

package/apps/realworld/api/Article.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld.api.Article
  * @extends RealWorld.api.Base
+ * @singleton
  */
 class Article extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Article extends Base {
         /**
          * @member {String} resource='/articles'
          */
-        resource: '/articles'
+        resource: '/articles',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld/api/Favorite.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld.api.Favorite
  * @extends RealWorld.api.Base
+ * @singleton
  */
 class Favorite extends Base {
     static config = {
@@ -10,7 +11,12 @@ class Favorite extends Base {
          * @member {String} className='RealWorld.api.Favorite'
          * @protected
          */
-        className: 'RealWorld.api.Favorite'
+        className: 'RealWorld.api.Favorite',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld/api/Profile.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld.api.Profile
  * @extends RealWorld.api.Base
+ * @singleton
  */
 class Profile extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Profile extends Base {
         /**
          * @member {String} resource='/profiles'
          */
-        resource: '/profiles'
+        resource: '/profiles',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld/api/Tag.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld.api.Tag
  * @extends RealWorld.api.Base
+ * @singleton
  */
 class Tag extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Tag extends Base {
         /**
          * @member {String} resource='/tags'
          */
-        resource: '/tags'
+        resource: '/tags',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 }
 

package/apps/realworld/api/User.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld.api.User
  * @extends RealWorld.api.Base
+ * @singleton
  */
 class User extends Base {
     static config = {
@@ -14,7 +15,12 @@ class User extends Base {
         /**
          * @member {String} resource='/tags'
          */
-        resource: '/users'
+        resource: '/users',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 }
 

package/apps/realworld2/api/Article.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld2.api.Article
  * @extends RealWorld2.api.Base
+ * @singleton
  */
 class Article extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Article extends Base {
         /**
          * @member {String} resource='/articles'
          */
-        resource: '/articles'
+        resource: '/articles',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld2/api/Favorite.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld2.api.Favorite
  * @extends RealWorld2.api.Base
+ * @singleton
  */
 class Favorite extends Base {
     static config = {
@@ -10,7 +11,12 @@ class Favorite extends Base {
          * @member {String} className='RealWorld2.api.Favorite'
          * @protected
          */
-        className: 'RealWorld2.api.Favorite'
+        className: 'RealWorld2.api.Favorite',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld2/api/Profile.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld2.api.Profile
  * @extends RealWorld2.api.Base
+ * @singleton
  */
 class Profile extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Profile extends Base {
         /**
          * @member {String} resource='/profiles'
          */
-        resource: '/profiles'
+        resource: '/profiles',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 
     /**

package/apps/realworld2/api/Tag.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld2.api.Tag
  * @extends RealWorld2.api.Base
+ * @singleton
  */
 class Tag extends Base {
     static config = {
@@ -14,7 +15,12 @@ class Tag extends Base {
         /**
          * @member {String} resource='/tags'
          */
-        resource: '/tags'
+        resource: '/tags',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 }
 

package/apps/realworld2/api/User.mjs

@@ -3,6 +3,7 @@ import Base from './Base.mjs';
 /**
  * @class RealWorld2.api.User
  * @extends RealWorld2.api.Base
+ * @singleton
  */
 class User extends Base {
     static config = {
@@ -14,7 +15,12 @@ class User extends Base {
         /**
          * @member {String} resource='/tags'
          */
-        resource: '/users'
+        resource: '/users',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }
 }
 

package/examples/ServiceWorker.mjs

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

package/examples/table/container/MainStore.mjs

@@ -41,12 +41,6 @@ class MainStore extends Store {
             firstname: 'Bastian',
             githubId : 'bhaustein',
             lastname : 'Haustein'
-        }, {
-            colspan  : {firstname: 3},
-            country  : 'Germany',
-            firstname: 'Colspan 3',
-            githubId : 'random',
-            lastname : ''
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.2.0",
+    "version": "7.4.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -31,6 +31,8 @@
         "javascript",
         "frontend",
         "framework",
+        "offscreencanvas",
+        "sharedworker",
         "webworker",
         "ecmascript",
         "css",
@@ -49,7 +51,7 @@
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.1.0",
         "cssnano": "^7.0.6",
-        "envinfo": "^7.13.0",
+        "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^10.2.2",
@@ -57,7 +59,7 @@
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.45",
+        "postcss": "^8.4.47",
         "sass": "^1.78.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

package/resources/scss/src/apps/portal/examples/List.scss

@@ -5,6 +5,7 @@
         cursor      : default;
         display     : flex;
         max-width   : 800px;
+        margin      : 0 auto;
         overflow    : hidden;
         padding     : 0;
         transition  : height var(--portal-transition-duration) ease-out, margin-bottom var(--portal-transition-duration) ease-out;
@@ -50,6 +51,21 @@
             transition: margin var(--portal-transition-duration) ease-out;
         }
 
+        .neo-multi-window {
+            align-items     : center;
+            background-color: #fff;
+            border-radius   : 50%;
+            box-shadow      : 0 5px 10px rgba(0, 0, 0, 0.3);
+            color           : #3E63DD;
+            display         : flex;
+            height          : 2em;
+            justify-content : center;
+            position        : absolute;
+            right           : 1em;
+            top             : 1em;
+            width           : 2em;
+        }
+
         .neo-relative {
             position: relative;
         }

package/resources/scss/src/apps/portal/examples/TabContainer.scss

@@ -1,8 +1,8 @@
 .portal-examples-tab-container.neo-tab-container {
-    margin   : 0 auto;
-    max-width: 830px;
+
 }
 
+// must not be inside the root class to honor the styling for tab button drag&drop
 .portal-examples-tab-header-toolbar.neo-tab-header-toolbar {
     background-color: #8BA6FF;
 

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -53,6 +53,7 @@ class Main extends core.Base {
                 'importAddon',
                 'log',
                 'redirectTo',
+                'reloadWindow',
                 'setNeoConfig',
                 'setRoute',
                 'windowClose',
@@ -410,6 +411,13 @@ class Main extends core.Base {
         this.addon[addon.constructor.name] = addon
     }
 
+    /**
+     * @param {Object} data
+     */
+    reloadWindow(data) {
+        location.reload()
+    }
+
     /**
      * Triggers the different DOM operation queues
      * @protected