neo.mjs 6.0.1 → 6.0.2

package/apps/ServiceWorker.mjs

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

package/apps/covid/view/MainContainerController.mjs

@@ -390,31 +390,18 @@ class MainContainerController extends ComponentController {
         logo.vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
         logo.update();
 
+        cls = [...component.cls];
 
-        if (Neo.config.useCssVars) {
-            cls = [...component.cls];
-
-            component.cls.forEach(item => {
-                if (item.includes('neo-theme')) {
-                    NeoArray.remove(cls, item);
-                }
-            });
+        component.cls.forEach(item => {
+            if (item.includes('neo-theme')) {
+                NeoArray.remove(cls, item);
+            }
+        });
 
-            NeoArray.add(cls, theme);
-            component.cls = cls;
+        NeoArray.add(cls, theme);
+        component.cls = cls;
 
-            button.set({
-                iconCls,
-                text: buttonText
-            });
-        } else {
-            Neo.main.addon.Stylesheet.swapStyleSheet({
-                href: href,
-                id  : 'neo-theme'
-            }).then(data => {
-                button.text = buttonText;
-            });
-        }
+        button.set({iconCls, text: buttonText});
 
         if (mapView) {
             mapView.mapboxStyle = mapViewStyle;

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -580,42 +580,23 @@ class MainContainerController extends ComponentController {
         logo.vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
         logo.update();
 
+        [component.appName, ...me.connectedApps].forEach(appName => {
+            component = me.getMainView(appName);
 
-        if (Neo.config.useCssVars) {
-            [component.appName, ...me.connectedApps].forEach(appName => {
-                component = me.getMainView(appName);
+            cls = [...component.cls];
 
-                cls = [...component.cls];
-
-                component.cls.forEach(item => {
-                    if (item.includes('neo-theme')) {
-                        NeoArray.remove(cls, item);
-                    }
-                });
-
-                NeoArray.add(cls, theme);
-                component.cls = cls;
-            });
-
-            button.set({
-                iconCls,
-                text: buttonText
-            });
-        } else {
-            [component.appName, ...me.connectedApps].forEach(appName => {
-                Neo.main.addon.Stylesheet.swapStyleSheet({
-                    appName,
-                    href,
-                    id: 'neo-theme'
-                });
+            component.cls.forEach(item => {
+                if (item.includes('neo-theme')) {
+                    NeoArray.remove(cls, item)
+                }
             });
-        }
 
-        button.set({
-            iconCls,
-            text: buttonText
+            NeoArray.add(cls, theme);
+            component.cls = cls;
         });
 
+        button.set({iconCls, text: buttonText});
+
         if (mapView) {
             mapView.mapboxStyle = mapViewStyle;
         } else {

package/docs/app/view/MainContainerController.mjs

@@ -192,20 +192,18 @@ class MainContainerController extends Component {
             theme      = 'neo-theme-dark';
         }
 
-        if (Neo.config.useCssVars) {
-            cls = [...view.cls];
+        cls = [...view.cls];
 
-            view.cls.forEach((item, index) => {
-                if (item.includes('neo-theme')) {
-                    NeoArray.remove(cls, item);
-                }
-            });
+        view.cls.forEach(item => {
+            if (item.includes('neo-theme')) {
+                NeoArray.remove(cls, item)
+            }
+        });
 
-            NeoArray.add(cls, theme);
-            view.cls = cls;
+        NeoArray.add(cls, theme);
+        view.cls = cls;
 
-            button.text = buttonText;
-        }
+        button.text = buttonText
     }
 
     /**

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/src/DefaultConfig.mjs

@@ -153,7 +153,6 @@ const DefaultConfig = {
     renderCountDeltas: false,
     /**
      * Add themes you want to use here. The first theme will get applied.
-     * If config.useCssVars === true, other theme variables will get included as well
      * @default ['neo-theme-light', 'neo-theme-dark']
      * @memberOf! module:Neo
      * @name config.themes
@@ -168,14 +167,6 @@ const DefaultConfig = {
      * @type Boolean
      */
     unitTestMode: false,
-    /**
-     * Flag if CSS variable based stylesheets are in use (important for switching themes)
-     * @default true
-     * @memberOf! module:Neo
-     * @name config.useCssVars
-     * @type Boolean
-     */
-    useCssVars: true,
     /**
      * Experimental flag if an offscreen canvas worker should get created.
      * @default false
@@ -245,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.0.1'
+     * @default '6.0.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.0.1'
+    version: '6.0.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -50,6 +50,7 @@ class Main extends core.Base {
                 'editRoute',
                 'getByPath',
                 'getWindowData',
+                'importAddon',
                 'redirectTo',
                 'setNeoConfig',
                 'setRoute',
@@ -192,9 +193,25 @@ class Main extends core.Base {
         };
     }
 
-    // todo: https://developer.mozilla.org/en-US/docs/Web/Events/resize
-    globalResizeListener(event) {
-        console.log('globalResizeListener', event);
+    /**
+     * Import main thread addons at run-time from within the app worker
+     * @param {Object} data
+     * @param {String} data.name
+     * @returns {Boolean}
+     */
+    async importAddon(data) {
+        let name = data.name,
+            module;
+
+        if (name.startsWith('WS/')) {
+            module = await import(`../../../src/main/addon/${name.substring(3)}.mjs`)
+        } else {
+            module = await import(`./main/addon/${name}.mjs`)
+        }
+
+        this.addon[module.default.constructor.name] = module.default;
+
+        return true
     }
 
     /**
@@ -209,9 +226,6 @@ class Main extends core.Base {
 
         DomAccess.onDomContentLoaded();
 
-        // not in use right now
-        // window.addEventListener('resize', me.globalResizeListener.bind(me));
-
         // we need different publicPath values for the main thread inside the webpack based dist envs,
         // depending on the hierarchy level of the app entry point
         if (config.environment !== 'development') {
@@ -229,7 +243,7 @@ class Main extends core.Base {
 
         mainThreadAddons.forEach(addon => {
             if (addon.startsWith('WS/')) {
-                imports.push(import(`../../../src/main/addon/${addon.substr(3)}.mjs`));
+                imports.push(import(`../../../src/main/addon/${addon.substring(3)}.mjs`));
             } else {
                 imports.push(import(`./main/addon/${addon}.mjs`));
             }
@@ -245,7 +259,7 @@ class Main extends core.Base {
 
         WorkerManager.onWorkerConstructed({
             origin: 'main'
-        });
+        })
     }
 
     /**
@@ -258,7 +272,7 @@ class Main extends core.Base {
             action : 'reply',
             replyId: data.id,
             success: true
-        });
+        })
     }
 
     /**

package/src/main/DomEvents.mjs

@@ -118,8 +118,8 @@ class DomEvents extends Base {
 
         let me = this;
 
-        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
         document.addEventListener('DOMContentLoaded', me.onDomContentLoaded.bind(me));
+        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
         window  .addEventListener('hashchange',       me.onHashChange      .bind(me));
 
         if (Neo.config.useSharedWorkers) {
@@ -332,6 +332,11 @@ class DomEvents extends Base {
         return path
     }
 
+    /**
+     * @param {Object[]} path
+     * @param {HTMLElement} target
+     * @returns {Object[]}
+     */
     getSelectionPath(path, target) {
         if (target.parentNode && target.id.split('__').length > 1) {
             path = this.getSelectionPath(path, target.parentNode);
@@ -343,7 +348,7 @@ class DomEvents extends Base {
     }
 
     /**
-     * @param {Object} node
+     * @param {HTMLElement} node
      * @returns {Object}
      */
     getTargetData(node) {

package/src/main/addon/Stylesheet.mjs

@@ -72,7 +72,7 @@ class Stylesheet extends Base {
     addGlobalCss() {
         let config   = Neo.config,
             themes   = config.themes,
-            folders  = config.useCssVars ? ['src', ...themes] : [themes[0]],
+            folders  = ['src', ...themes],
             env      = config.environment,
             path      = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
             rootPath = config.basePath.substr(6);
@@ -87,7 +87,7 @@ class Stylesheet extends Base {
             this.createStyleSheet(
                 null,
                 null,
-                `${rootPath}${path}css${config.useCssVars ? '' : '-no-vars'}/${folder}/Global.css`
+                `${rootPath}${path}css/${folder}/Global.css`
             );
         });
     }
@@ -112,19 +112,14 @@ class Stylesheet extends Base {
         className = className.split('.').join('/');
 
         data.folders.forEach(folder => {
-            if (
-                folder === 'src' && config.useCssVars || folder.includes('theme-') && (
-                     config.useCssVars && config.themes.includes(`neo-${folder}`) ||
-                    !config.useCssVars && config.themes[0] === `neo-${folder}`
-                )
-            ) {
+            if (folder === 'src' || folder.includes('theme-') && config.themes.includes(`neo-${folder}`)) {
                 this.createStyleSheet(
                     null,
                     null,
-                    `${rootPath}${path}css${config.useCssVars ? '' : '-no-vars'}/${folder}/${className}.css`
-                );
+                    `${rootPath}${path}css/${folder}/${className}.css`
+                )
             }
-        });
+        })
     }
 
     /**

package/src/worker/App.mjs

@@ -313,7 +313,7 @@ class App extends Base {
         super.onRegisterNeoConfig(msg);
 
         let config = Neo.config,
-            url    = `resources/theme-map${config.useCssVars ? '' : '-no-vars'}.json`;
+            url    = 'resources/theme-map.json';
 
         if (config.environment === 'development') {
             url = `../../${url}`

package/docs/index_no_css_vars.html

@@ -1,17 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>Neo Docs NoCssVars</title>
-</head>
-<body>
-    <script type="module">
-        fetch('./neo-config-no-css-vars.json').then(response => response.json()).then(data => {
-            self.Neo = {config: {}};
-            Object.assign(Neo.config, data);
-            import(data.mainPath);
-        });
-    </script>
-</body>
-</html>

package/docs/neo-config-no-css-vars.json

@@ -1,8 +0,0 @@
-{
-    "appPath"         : "docs/app.mjs",
-    "basePath"        : "../",
-    "environment"     : "development",
-    "mainPath"        : "../src/Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet"],
-    "useCssVars"      : false
-}