neo.mjs 6.10.17 → 6.12.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.17",
+    "version": "6.12.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,7 +55,7 @@
         "inquirer": "^9.2.14",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.33",
+        "postcss": "^8.4.35",
         "sass": "^1.70.0",
         "siesta-lite": "5.5.2",
         "showdown": "^2.1.0",

package/resources/scss/src/tree/List.scss

@@ -1,9 +1,14 @@
 .neo-tree-list {
-    border  : none;
-    color   : var(--tree-list-color);
-    display : flex;
-    overflow: hidden;
-    position: relative;
+    border         : none;
+    color          : var(--tree-list-color);
+    display        : flex;
+    flex-direction : column;
+    overflow       : hidden;
+    position       : relative;
+
+    // Allow item's scrollIntoView upwards to avoid
+    // being hidden below a sticky item stuck at the top.
+    scroll-padding-block-start : 3em;
 
     .neo-list {
         overflow   : visible;

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -209,7 +209,7 @@ class Main extends core.Base {
             module = await import(`./main/addon/${name}.mjs`)
         }
 
-        this.addon[module.default.constructor.name] = module.default;
+        this.registerAddon(module.default);
 
         return true
     }
@@ -254,7 +254,7 @@ class Main extends core.Base {
         me.addon = {};
 
         modules.forEach(module => {
-            me.addon[module.default.constructor.name] = module.default;
+            me.registerAddon(module.default)
         });
 
         WorkerManager.onWorkerConstructed({
@@ -370,6 +370,24 @@ class Main extends core.Base {
         window.location.href = data.url;
     }
 
+    /**
+     * Helper method to register main thread addons
+     * @param {Neo.core.Base} addon Can either be a neo class or instance
+     */
+    registerAddon(addon) {
+        if (Neo.typeOf(addon) === 'NeoClass') {
+            // Addons could get imported multiple times. Ensure to only create an instance once.
+            if (Neo.typeOf(Neo.ns(addon.prototype.className)) !== 'NeoInstance') {
+                addon = Neo.create(addon)
+            }
+
+            // Main thread addons need to get registered as singletons inside the neo namespace
+            Neo.applyToGlobalNs(addon)
+        }
+
+        this.addon[addon.constructor.name] = addon;
+    }
+
     /**
      * Triggers the different DOM operation queues
      * @protected

package/src/Neo.mjs

@@ -1,8 +1,10 @@
 import DefaultConfig from './DefaultConfig.mjs';
 
-const configSymbol = Symbol.for('configSymbol'),
-      getSetCache  = Symbol('getSetCache'),
-      typeDetector = {
+const
+    camelRegex   = /-./g,
+    configSymbol = Symbol.for('configSymbol'),
+    getSetCache  = Symbol('getSetCache'),
+    typeDetector = {
         function: (item) => {
             if (item.prototype?.constructor.isClass) {
                 return 'NeoClass'
@@ -60,17 +62,19 @@ Neo = globalThis.Neo = Object.assign({
      * @tutorial 02_ClassSystem
      */
     applyClassConfig(cls) {
-        let baseCfg  = null,
-            ntypeMap = Neo.ntypeMap,
-            proto    = cls.prototype || cls,
-            protos   = [],
+        let baseCfg    = null,
+            ntypeChain = [],
+            ntypeMap   = Neo.ntypeMap,
+            proto      = cls.prototype || cls,
+            protos     = [],
             cfg, config, ctor, ntype;
 
         while (proto.__proto__) {
             ctor = proto.constructor;
 
             if (Object.hasOwn(ctor, 'classConfigApplied')) {
-                baseCfg = Neo.clone(ctor.config, true);
+                baseCfg    = Neo.clone(ctor.config, true);
+                ntypeChain = [...ctor.ntypeChain];
                 break
             }
 
@@ -113,6 +117,8 @@ Neo = globalThis.Neo = Object.assign({
             if (Object.hasOwn(cfg, 'ntype')) {
                 ntype = cfg.ntype;
 
+                ntypeChain.unshift(ntype);
+
                 // Running the docs app inside a workspace can pull in the same classes from different roots,
                 // so we want to check for different class names as well
                 if (Object.hasOwn(ntypeMap, ntype) && cfg.className !== ntypeMap[ntype]) {
@@ -136,7 +142,7 @@ Neo = globalThis.Neo = Object.assign({
                 applyMixins(ctor, mixins);
 
                 if (Neo.ns('Neo.core.Observable', false, ctor.prototype.mixins)) {
-                    ctor.observable = true;
+                    ctor.observable = true
                 }
             }
 
@@ -148,7 +154,8 @@ Neo = globalThis.Neo = Object.assign({
             Object.assign(ctor, {
                 classConfigApplied: true,
                 config            : Neo.clone(config, true),
-                isClass           : true
+                isClass           : true,
+                ntypeChain
             });
 
             !config.singleton && this.applyToGlobalNs(cls)
@@ -156,6 +163,10 @@ Neo = globalThis.Neo = Object.assign({
 
         proto = cls.prototype || cls;
 
+        ntypeChain.forEach(ntype => {
+            proto[`is${Neo.capitalize(Neo.camel(ntype))}`] = true
+        });
+
         if (proto.singleton) {
             cls = Neo.create(cls);
             Neo.applyToGlobalNs(cls)
@@ -234,6 +245,26 @@ Neo = globalThis.Neo = Object.assign({
         return target
     },
 
+    /**
+     * Converts kebab-case strings into camel-case
+     * @memberOf module:Neo
+     * @param {String} value The target object
+     * @returns {String}
+     */
+    camel(value) {
+        return value.replace(camelRegex, match => match[1].toUpperCase())
+    },
+
+    /**
+     * Makes the first character of a string uppercase
+     * @memberOf module:Neo
+     * @param {String} value
+     * @returns {Boolean|String} Returns false for non string inputs
+     */
+    capitalize(value) {
+        return value[0].toUpperCase() + value.slice(1)
+    },
+
     /**
      * @memberOf module:Neo
      * @param {Object|Array|*} obj

package/src/component/Base.mjs

@@ -801,12 +801,6 @@ class Base extends CoreBase {
         }
     }
 
-    revertFocus() {
-        if (this.containsFocus && this.focusEnterData?.relatedTarget) {
-            Neo.getComponent(this.focusEnterData.relatedTarget.id)?.focus();
-        }
-    }
-
     /**
      * Triggered after the reference config got changed
      * @param {String|null} value
@@ -1838,13 +1832,19 @@ class Base extends CoreBase {
         this.keys?.register(this)
     }
 
+    /**
+     * @param {Object} data
+     */
     onFocusEnter(data) {
         // If we are hidden, or unmounted while we still contain focus, we have to revert
         // focus to where it came from if possible
         this.focusEnterData = data;
     }
 
-    onFocusLeave() {
+    /**
+     * @param {Object} data
+     */
+    onFocusLeave(data) {
         this.focusEnterData = null;
     }
 
@@ -2067,6 +2067,17 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     *
+     */
+    revertFocus() {
+        let relatedTarget = this.focusEnterData?.relatedTarget;
+
+        if (this.containsFocus && relatedTarget) {
+            Neo.getComponent(relatedTarget.id)?.focus()
+        }
+    }
+
     /**
      * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
      * @param {Object} values={}

package/src/core/Base.mjs

@@ -327,6 +327,15 @@ class Base {
         return this.constructor[key]
     }
 
+    /**
+     * Check if a given ntype exists inside the proto chain, including the top level class
+     * @param {String} ntype
+     * @returns {Boolean}
+     */
+    hasNtype(ntype) {
+        return this.constructor.ntypeChain.includes(ntype)
+    }
+
     /**
      * Gets triggered after onConstructed() is done
      * @see {@link Neo.core.Base#onConstructed onConstructed}
@@ -361,7 +370,7 @@ class Base {
             currentWorker = Neo.currentWorker,
             listenerId;
 
-        if (!me.singleton) {
+        if (!me.singleton && !me.isMainThreadAddon) {
             throw new Error('Remote method access is only functional for Singleton classes ' + className)
         }
 

package/src/core/Util.mjs

@@ -36,15 +36,6 @@ class Util extends Base {
         });
     }
 
-    /**
-     * Makes the first character of a string uppercase
-     * @param {String} value
-     * @returns {Boolean|String} Returns false for non string inputs
-     */
-    static capitalize(value) {
-        return value[0].toUpperCase() + value.slice(1)
-    }
-
     /**
      * Transforms a styles string into a styles object using camelcase syntax
      * @param {String} string The styles string to parse
@@ -225,7 +216,6 @@ Neo.applyFromNs(Neo, Util, {
     bindMethods      : 'bindMethods',
     createStyleObject: 'createStyleObject',
     createStyles     : 'createStyles',
-    capitalize       : 'capitalize',
     decamel          : 'decamel',
     isArray          : 'isArray',
     isBoolean        : 'isBoolean',

package/src/form/field/Select.mjs

@@ -661,7 +661,7 @@ class Select extends Picker {
                 cls: ['neo-input-field-wrapper'],
                 cn : [{
                     tag         : 'input',
-                    autocomplete: 'off',
+                    autocomplete: 'no', // while "off" is the correct value, browser vendors ignore it. Arbitrary strings do the trick.
                     autocorrect : 'off',
                     cls         : ['neo-textfield-input', 'neo-typeahead-input'],
                     disabled    : true,

package/src/form/field/Text.mjs

@@ -318,7 +318,8 @@ class Text extends Base {
      * @protected
      */
     afterSetAutoComplete(value, oldValue) {
-        this.changeInputElKey('autocomplete', value ? null : 'off')
+        // while "off" is the correct value, browser vendors ignore it. Arbitrary strings do the trick.
+        this.changeInputElKey('autocomplete', value ? null : 'no')
     }
 
     /**

package/src/list/Base.mjs

@@ -411,14 +411,13 @@ class Base extends Component {
             itemContent    = me.createItemContent(record, index),
             itemId         = me.getItemId(record[me.getKeyProperty()]),
             selectionModel = me.selectionModel,
+            isSelected     = !me.disableSelection && selectionModel?.isSelected(itemId),
             item;
 
         isHeader && cls.push('neo-list-header');
 
-        if (!me.disableSelection && selectionModel) {
-            if (selectionModel.isSelected(itemId)) {
-                cls.push(selectionModel.selectedCls)
-            }
+        if (isSelected){
+            cls.push(selectionModel.selectedCls)
         }
 
         if (record.cls) {
@@ -432,7 +431,7 @@ class Base extends Component {
         item = {
             id  : itemId,
             tag : isHeader ? 'dt' : me.itemTagName,
-            'aria-selected' : false,
+            'aria-selected' : isSelected,
             cls
         };
 

package/src/main/addon/AmCharts.mjs

@@ -1,12 +1,11 @@
-import Base      from '../../core/Base.mjs';
+import Base      from './Base.mjs';
 import DomAccess from '../DomAccess.mjs';
 
 /**
  * Helper class to include amCharts into your neo.mjs app
  * https://www.amcharts.com/docs/v4/
  * @class Neo.main.addon.AmCharts
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class AmCharts extends Base {
     static config = {
@@ -44,16 +43,6 @@ class AmCharts extends Base {
          * @protected
          */
         fallbackPath: 'https://neomjs.github.io/pages/resources/amCharts/',
-        /**
-         * @member {Boolean} scriptsLoaded_=true
-         * @protected
-         */
-        scriptsLoaded_: false,
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
@@ -68,7 +57,12 @@ class AmCharts extends Base {
                 'setProperty',
                 'updateData'
             ]
-        }
+        },
+        /**
+         * @member {Boolean} scriptsLoaded_=true
+         * @protected
+         */
+        scriptsLoaded_: false
     }
 
     /**
@@ -278,6 +272,6 @@ class AmCharts extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(AmCharts);
+Neo.applyClassConfig(AmCharts);
 
-export default instance;
+export default AmCharts;

package/src/main/addon/AnalyticsByGoogle.mjs

@@ -1,12 +1,11 @@
-import Base from '../../core/Base.mjs';
+import Base from './Base.mjs';
 
 /**
  * Required for the online version of the examples & docs app
  * We can not name the file GoogleAnalytics, since it does break when using uBlock origin for dist versions.
  * See: https://github.com/neomjs/neo/issues/651
  * @class Neo.main.addon.AnalyticsByGoogle
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class AnalyticsByGoogle extends Base {
     static config = {
@@ -14,12 +13,7 @@ class AnalyticsByGoogle extends Base {
          * @member {String} className='Neo.main.addon.AnalyticsByGoogle'
          * @protected
          */
-        className: 'Neo.main.addon.AnalyticsByGoogle',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        className: 'Neo.main.addon.AnalyticsByGoogle'
     }
 
     /**
@@ -54,6 +48,6 @@ class AnalyticsByGoogle extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(AnalyticsByGoogle);
+Neo.applyClassConfig(AnalyticsByGoogle);
 
-export default instance;
+export default AnalyticsByGoogle;

package/src/main/addon/Base.mjs

@@ -0,0 +1,26 @@
+import CoreBase from '../../core/Base.mjs';
+
+/**
+ * Base class for main thread addons
+ * @class Neo.main.addon.Base
+ * @extends Neo.core.Base
+ */
+class Base extends CoreBase {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.Base'
+         * @protected
+         */
+        className: 'Neo.main.addon.Base',
+        /**
+         * An identifier for core.Base to get handled like singletons for remote method access
+         * @member {Boolean} isMainThreadAddon=true
+         * @protected
+         */
+        isMainThreadAddon: true
+    }
+}
+
+Neo.applyClassConfig(Base);
+
+export default Base;

package/src/main/addon/CesiumJS.mjs

@@ -1,11 +1,10 @@
-import Base      from '../../core/Base.mjs';
+import Base      from './Base.mjs';
 import DomAccess from '../DomAccess.mjs';
 
 /**
  * See: https://github.com/CesiumGS/cesium
  * @class Neo.main.addon.CesiumJS
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class CesiumJS extends Base {
     static config = {
@@ -26,12 +25,7 @@ class CesiumJS extends Base {
                 'destroy',
                 'flyTo'
             ]
-        },
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        }
     }
 
     /**
@@ -117,6 +111,6 @@ class CesiumJS extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(CesiumJS);
+Neo.applyClassConfig(CesiumJS);
 
-export default instance;
+export default CesiumJS;

package/src/main/addon/CloneNode.mjs

@@ -1,11 +1,10 @@
-import Base from '../../core/Base.mjs';
+import Base from './Base.mjs';
 
 /**
  * Basic helper class to create template DOM nodes and apply them to a target node via cloning.
  * See: https://github.com/neomjs/neo/blob/dev/apps/krausest/view/TableComponent.mjs
  * @class Neo.main.addon.CloneNode
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class CloneNode extends Base {
     static config = {
@@ -30,12 +29,7 @@ class CloneNode extends Base {
                 'applyClones',
                 'createNode'
             ]
-        },
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        }
     }
 
     /**
@@ -93,15 +87,16 @@ class CloneNode extends Base {
      */
     createNode(data) {
         let template = document.createElement(data.tag);
+
         template.innerHTML = data.html;
 
         this.map[data.id] = {
-            paths   : data.paths,
-            template: template
+            paths: data.paths,
+            template
         };
     }
 }
 
-let instance = Neo.applyClassConfig(CloneNode);
+Neo.applyClassConfig(CloneNode);
 
-export default instance;
+export default CloneNode;

package/src/main/addon/Cookie.mjs

@@ -1,10 +1,9 @@
-import Base from '../../core/Base.mjs';
+import Base from './Base.mjs';
 
 /**
  * Basic Read and write access for document.cookie
  * @class Neo.main.addon.Cookie
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class Cookie extends Base {
     static config = {
@@ -24,12 +23,7 @@ class Cookie extends Base {
                 'getCookies',
                 'setCookie'
             ]
-        },
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        }
     }
 
     /**
@@ -59,6 +53,6 @@ class Cookie extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Cookie);
+Neo.applyClassConfig(Cookie);
 
-export default instance;
+export default Cookie;

package/src/main/addon/DragDrop.mjs

@@ -1,11 +1,10 @@
-import Base      from '../../core/Base.mjs';
+import Base      from './Base.mjs';
 import DomAccess from '../DomAccess.mjs';
 import DomEvents from '../DomEvents.mjs';
 
 /**
  * @class Neo.main.addon.DragDrop
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class DragDrop extends Base {
     static config = {
@@ -124,12 +123,7 @@ class DragDrop extends Base {
         /**
          * @member {Number} scrollFactorTop=1
          */
-        scrollFactorTop: 1,
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        scrollFactorTop: 1
     }
 
     /**
@@ -515,6 +509,6 @@ class DragDrop extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(DragDrop);
+Neo.applyClassConfig(DragDrop);
 
-export default instance;
+export default DragDrop;