neo.mjs 8.1.2 → 8.2.0

package/apps/ServiceWorker.mjs

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

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

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.1.2",
+    "version": "8.2.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/grid/Container.scss

@@ -7,16 +7,17 @@
 }
 
 .neo-grid-container {
-    border        : 1px solid var(--grid-container-border-color);
-    border-spacing: 0;
-    color         : var(--grid-container-color);
-    font-size     : 13px;
-    font-weight   : 400;
-    height        : 100%;
-    line-height   : 19px;
-    overflow-y    : hidden;
-    position      : absolute;
-    width         : 100%;
+    border             : 1px solid var(--grid-container-border-color);
+    border-spacing     : 0;
+    color              : var(--grid-container-color);
+    font-size          : 13px;
+    font-weight        : 400;
+    height             : 100%;
+    line-height        : 19px;
+    overscroll-behavior: none;
+    overflow-y         : hidden;
+    position           : absolute;
+    width              : 100%;
 
     .neo-grid-row {
         display: flex;

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -2282,10 +2282,18 @@ class Component extends Base {
      * @param {Boolean} [mount] Mount the DOM after the vnode got created
      */
     async render(mount) {
-        let me            = this,
-            autoMount     = mount || me.autoMount,
-            app           = me.app,
-            useVdomWorker = Neo.config.useVdomWorker;
+        let me              = this,
+            autoMount       = mount || me.autoMount,
+            {app}           = me,
+            {useVdomWorker} = Neo.config;
+
+        if (Neo.currentWorker.countLoadingThemeFiles !== 0) {
+            Neo.currentWorker.on('themeFilesLoaded', function() {
+                me.render(mount)
+            }, me, {once: true});
+
+            return
+        }
 
         me.rendering = true;
 

package/src/grid/Container.mjs

@@ -235,6 +235,30 @@ class GridContainer extends BaseContainer {
         }
     }
 
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let me             = this,
+            ResizeObserver = Neo.main?.addon?.ResizeObserver,
+            resizeParams   = {id: me.id, windowId: me.windowId};
+
+        // Check if the remotes api is ready for slow network connections & dist/prod
+        if (!ResizeObserver) {
+            await me.timeout(100);
+            await me.addResizeObserver(mounted)
+        } else {
+            if (mounted) {
+                ResizeObserver.register(resizeParams);
+                await me.passSizeToView()
+            } else {
+                me.initialResizeEvent = true;
+                ResizeObserver.unregister(resizeParams)
+            }
+        }
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -243,18 +267,7 @@ class GridContainer extends BaseContainer {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-
-        let me               = this,
-            {ResizeObserver} = Neo.main.addon,
-            resizeParams     = {id: me.id, windowId: me.windowId};
-
-        if (value) {
-            ResizeObserver.register(resizeParams);
-            me.passSizeToView()
-        } else if (!value && oldValue) { // unmount
-            me.initialResizeEvent = true;
-            ResizeObserver.unregister(resizeParams)
-        }
+        oldValue !== undefined && this.addResizeObserver(value)
     }
 
     /**

package/src/main/addon/Stylesheet.mjs

@@ -92,11 +92,12 @@ class Stylesheet extends Base {
      * @param {String} data.className
      * @param {String[]} data.folders
      */
-    addThemeFiles(data) {
+    async addThemeFiles(data) {
         let {className} = data,
             {config}    = Neo,
             env         = config.environment,
             path        = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
+            promises    = [],
             rootPath    = config.basePath.substring(6);
 
         if (className.startsWith('Neo.')) {
@@ -107,13 +108,15 @@ class Stylesheet extends Base {
 
         data.folders.forEach(folder => {
             if (folder === 'src' || folder.includes('theme-') && config.themes.includes(`neo-${folder}`)) {
-                this.createStyleSheet(
+                promises.push(this.createStyleSheet(
                     null,
                     null,
                     `${rootPath}${path}css/${folder}/${className}.css`
-                )
+                ))
             }
-        })
+        });
+
+        await Promise.all(promises)
     }
 
     /**
@@ -121,28 +124,34 @@ class Stylesheet extends Base {
      * @param {String} [name]
      * @param {String} [id]
      * @param {String} [href]
+     * @returns {Promise<void>}
      */
-    createStyleSheet(name, id, href) {
+    async createStyleSheet(name, id, href) {
         if (!name && !href) {
             throw new Error('createStyleSheet: you need to either pass a name or a href')
         }
 
-        let link = document.createElement('link'),
-            env  = Neo.config.environment,
-            path = env.startsWith('dist/') ? env : ('dist/' + env),
-            url  = href ? href : Neo.config.basePath + path + '/' + name;
+        return new Promise((resolve, reject) => {
+            let link = document.createElement('link'),
+                env  = Neo.config.environment,
+                path = env.startsWith('dist/') ? env : ('dist/' + env),
+                url  = href ? href : Neo.config.basePath + path + '/' + name;
 
-        Object.assign(link, {
-            href: url,
-            rel : 'stylesheet',
-            type: 'text/css'
-        });
+            Object.assign(link, {
+                href: url,
+                rel : 'stylesheet',
+                type: 'text/css'
+            });
 
-        if (id) {
-            link.id = id
-        }
+            if (id) {
+                link.id = id
+            }
 
-        document.head.appendChild(link)
+            link.addEventListener('error', function() {reject()})
+            link.addEventListener('load',  function() {resolve()})
+
+            document.head.appendChild(link)
+        })
     }
 
     /**

package/src/worker/App.mjs

@@ -20,6 +20,10 @@ class App extends Base {
          * @protected
          */
         className: 'Neo.worker.App',
+        /**
+         * @member {Number} countLoadingThemeFiles_=0
+         */
+        countLoadingThemeFiles_: 0,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -77,6 +81,18 @@ class App extends Base {
         Neo.setCssVariable = me.setCssVariable.bind(me)
     }
 
+    /**
+     * Triggered after the countLoadingThemeFiles config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetCountLoadingThemeFiles(value, oldValue) {
+        if (value === 0 && oldValue !== undefined) {
+            this.fire('themeFilesLoaded')
+        }
+    }
+
     /**
      * @param {String} appName
      * @param {Array|Object} deltas
@@ -282,7 +298,7 @@ class App extends Base {
     insertThemeFiles(windowId, proto, className) {
         if (Neo.config.themes.length > 0) {
             className = className || proto.className;
-            //console.log(windowId, className);
+
             let me     = this,
                 cssMap = Neo.cssMap,
                 parent = proto?.__proto__,
@@ -310,7 +326,7 @@ class App extends Base {
                 }
 
                 themeFolders = Neo.ns(mapClassName || className, false, cssMap.fileInfo);
-                //console.log(cssMap);
+
                 if (themeFolders && !Neo.ns(`${windowId}.${className}`, false, cssMap)) {
                     classPath = className.split('.');
                     fileName  = classPath.pop();
@@ -319,10 +335,14 @@ class App extends Base {
 
                     ns[fileName] = true;
 
+                    me.countLoadingThemeFiles++;
+
                     Neo.main.addon.Stylesheet.addThemeFiles({
                         className: mapClassName || className,
                         folders  : themeFolders,
                         windowId
+                    }).then(() => {
+                        me.countLoadingThemeFiles--
                     })
                 }
             }