neo.mjs 9.11.1 → 9.13.0

package/README.md

@@ -115,17 +115,17 @@ import Component from '../../src/component/Base.mjs';
 
 class MyComponent extends Component {
     static config = {
-        className    : 'MyComponent',
-        someProperty_: 'defaultValue',
-        domListeners : {
+        className   : 'MyComponent',
+        myConfig_   : 'defaultValue',
+        domListeners: {
             click: 'onClick'
         }
     }
 
-    afterSetSomeProperty(value, oldValue) {
-       console.log('someProperty changed:', value, oldValue)
+    afterSetMyConfig(value, oldValue) {
+       console.log('myConfig changed:', value, oldValue)
     }
-    
+
     onClick(data) {
         console.log('Clicked!', data)
     }

package/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-09",
+      "datePublished": "2025-06-13",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/blog.json

@@ -6,10 +6,10 @@
     "image"       : "json-blueprints.png",
     "name"        : "How JSON Blueprints & Shared Workers Power Next-Gen AI Interfaces",
     "provider"    : "Medium",
-    "publisher"   : "",
+    "publisher"   : "ITNEXT",
     "selectedInto": [],
     "type"        : "Blog Post",
-    "url"         : "https://tobiasuhlig.medium.com/the-ui-revolution-how-json-blueprints-shared-workers-power-next-gen-ai-interfaces-60a2bf0fc1dc?source=friends_link&sk=1b0b306285e23bb12f31271dd87bebe5"
+    "url"         : "https://itnext.io/the-ui-revolution-how-json-blueprints-shared-workers-power-next-gen-ai-interfaces-60a2bf0fc1dc?source=friends_link&sk=1b0b306285e23bb12f31271dd87bebe5"
 }, {
     "author"      : "Tobias Uhlig",
     "authorImage" : "author_TobiasUhlig.jpeg",

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

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

package/docs/app/view/ApiTreeList.mjs

@@ -29,7 +29,17 @@ class ApiTreeList extends TreeList {
      */
     onConstructed() {
         super.onConstructed();
-        this.store.load()
+
+        this.store.load().then(data => {
+            if (!data) {
+                this.html = [
+                    '<div style="padding: 1em">',
+                        'To get the content please use:</br>',
+                        '<code>npm run generate-docs-json</code>',
+                    '</div>'
+                ].join('')
+            }
+        })
     }
 }
 

package/docs/app/view/MainContainer.mjs

@@ -127,12 +127,15 @@ class MainContainer extends Viewport {
     onConstructed() {
         super.onConstructed();
 
-        let me = this;
+        let me  = this,
+            url = '../../docs/output/all.json';
 
-        Neo.Xhr.promiseJson({
-            url: '../../docs/output/all.json'
+        Neo.Xhr.promiseJson({url}).catch(err => {
+            console.error('Error for Neo.Xhr.request', {id: me.store.id, error: err, url})
         }).then(data => {
-            me.store.items = data.json;
+            if (data) {
+                me.store.items = data.json
+            }
         })
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "9.11.1",
+    "version"        : "9.13.0",
     "description"    : "The webworkers driven UI framework",
     "type"           : "module",
     "repository"     : {
@@ -63,10 +63,10 @@
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
         "neo-jsdoc-x"                  : "1.0.5",
-        "postcss"                      : "^8.5.4",
-        "sass"                         : "^1.89.1",
+        "postcss"                      : "^8.5.5",
+        "sass"                         : "^1.89.2",
         "siesta-lite"                  : "5.5.2",
-        "terser"                       : "^5.41.0",
+        "terser"                       : "^5.42.0",
         "url"                          : "^0.11.4",
         "webpack"                      : "^5.99.9",
         "webpack-cli"                  : "^6.0.1",

package/src/DefaultConfig.mjs

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

package/src/code/LivePreview.mjs

@@ -223,9 +223,8 @@ class LivePreview extends Container {
         }
 
         let me                = this,
-            {config}          = Neo,
+            {environment}     = Neo.config,
             container         = me.getPreviewContainer(),
-            hasJsModules      = config.environment === 'development' || config.environment === 'dist/esm',
             source            = me.editorValue || me.value,
             className         = me.findLastClassName(source),
             cleanLines        = [],
@@ -242,13 +241,25 @@ class LivePreview extends Container {
                     path       = importMatch[2],
                     index;
 
-                if (!hasJsModules) {
+                // We want the non-minified version for code which can not get bundled.
+                if (environment === 'dist/development') {
                     index = path.lastIndexOf('../');
 
                     if (index === 0) {
-                        path = '../../../../src/' + path.slice(index + 3);
+                        path = '../../../../src/' + path.slice(index + 3)
                     } else {
-                        path = path.slice(0, index) + '../../../' + path.slice(index + 3);
+                        path = path.slice(0, index) + '../../../' + path.slice(index + 3)
+                    }
+                }
+
+                // We want the minified version of the code which can not get bundled.
+                else if (environment === 'dist/production') {
+                    index = path.lastIndexOf('../');
+
+                    if (index === 0) {
+                        path = '../../../esm/src/' + path.slice(index + 3)
+                    } else {
+                        path = path.slice(0, index) + '../../esm/' + path.slice(index + 3)
                     }
                 }
 
@@ -261,9 +272,9 @@ class LivePreview extends Container {
         });
 
         // Figure out the parts of the source we'll be running.
-        // o The promises/import() corresponding to the user's import statements
-        // o The vars holding the name of the imported module based on the module name for each import
-        // o The rest of the user-provided source
+        // * The promises/import() corresponding to the user's import statements
+        // * The vars holding the name of the imported module based on the module name for each import
+        // * The rest of the user-provided source
         // It'll end up looking like this:
         // Promise.all([
         //     import('../../../node_modules/neo.mjs/src/container/Base.mjs'),

package/src/component/Base.mjs

@@ -8,7 +8,6 @@ import NeoArray         from '../util/Array.mjs';
 import Observable       from '../core/Observable.mjs';
 import Rectangle        from '../util/Rectangle.mjs';
 import Style            from '../util/Style.mjs';
-import Util             from '../core/Util.mjs';
 import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
 
@@ -517,8 +516,8 @@ class Component extends Base {
      * @returns {Object} all styles of this.el
      */
     addStyle(value) {
-        if (typeof value === 'string') {
-            value = Util.createStyleObject(value);
+        if (Neo.isString(value)) {
+            value =  Neo.createStyleObject(value)
         }
 
         // todo: add a check if something has changed

package/src/data/Store.mjs

@@ -351,9 +351,10 @@ class Store extends Base {
      * @param {String} opts.responseType
      * @param {Object} opts.scope
      * @param {String} opts.url
+     * @returns {Promise<Object|Object[]>}
      * @protected
      */
-    load(opts={}) {
+    async load(opts={}) {
         let me     = this,
             params = {page: me.currentPage, pageSize: me.pageSize, ...opts.params};
 
@@ -371,26 +372,34 @@ class Store extends Base {
                 service  = Neo.ns(apiArray.join('.'));
 
             if (!service) {
-                console.log('Api is not defined', this)
+                console.error('Api is not defined', this)
             } else {
-                service[fn](params).then(response => {
-                    response = Neo.ns(me.responseRoot, false, response);
-
-                    if (response.success) {
-                        me.totalCount = response.totalCount;
-                        me.data       = Neo.ns(me.responseRoot, false, response); // fires the load event
-                    }
-                })
+                const response = await service[fn](params);
+
+                if (response.success) {
+                    me.totalCount = response.totalCount;
+                    me.data       = Neo.ns(me.responseRoot, false, response); // fires the load event
+
+                    return me.data
+                }
+
+                return null
             }
         } else {
             opts.url ??= me.url;
 
-            Neo.Xhr.promiseJson(opts).catch(err => {
-                console.log('Error for Neo.Xhr.request', err, me.id)
-            }).then(data => {
-                me.data = Neo.ns(me.responseRoot, false, data.json) || data.json
-                // we do not need to fire a load event => onCollectionMutate()
-            })
+            try {
+                const data = await Neo.Xhr.promiseJson(opts);
+
+                if (data) {
+                    me.data = Neo.ns(me.responseRoot, false, data.json) || data.json // fires the load event
+                }
+
+                return data?.json || null
+            } catch(err) {
+                console.error('Error for Neo.Xhr.request', {id: me.id, error: err, url: opts.url});
+                return null
+            }
         }
     }
 

package/src/form/field/Text.mjs

@@ -247,8 +247,8 @@ class Text extends Field {
          */
         validator: null,
         /**
-         * getVlue can be xssProtected and values are escaped
-         * @member {Boolean} xssProtected=false
+         * get value can be xssProtected and values are escaped
+         * @member {Boolean} xssProtected_=false
          */
         xssProtected_: false,
         /**
@@ -1074,6 +1074,10 @@ class Text extends Field {
             })
         }
 
+        me.triggers?.forEach(trigger => {
+            trigger.destroy()
+        })
+
         super.destroy(...args)
     }
 

package/src/form/field/trigger/Base.mjs

@@ -177,7 +177,7 @@ class Base extends Component {
      */
     onMouseEnter() {
         this.isHovered = true;
-        this.hidden    = false;
+        this.hidden    = false
     }
 
     /**
@@ -185,7 +185,7 @@ class Base extends Component {
      */
     onMouseLeave() {
         this.isHovered = false;
-        this.hidden    = true;
+        this.hidden    = true
     }
 
     /**

package/src/vdom/Helper.mjs

@@ -35,42 +35,73 @@ class Helper extends Base {
         singleton: true
     }
 
+    /**
+     * The following top-level attributes will get converted into styles:
+     * height, maxHeight, maxWidth, minHeight, minWidth, width
+     *
+     * Some tags must not do the transformation, so we add them here.
+     * @member {Set} rawDimensionTags
+     */
+    rawDimensionTags = new Set([
+        'circle',
+        'clipPath',
+        'ellipse',
+        'filter',
+        'foreignObject',
+        'image',
+        'marker',
+        'mask',
+        'pattern',
+        'rect',
+        'svg',
+        'use'
+    ])
     /**
      * @member {Boolean} returnChildNodeOuterHtml=false
      */
     returnChildNodeOuterHtml = false
     /**
      * Void attributes inside html tags
-     * @member {String[]} voidAttributes
+     * @member {Set} voidAttributes
      * @protected
      */
-    voidAttributes = [
+    voidAttributes = new Set([
         'checked',
-        'required'
-    ]
+        'defer',
+        'disabled',
+        'ismap',
+        'multiple',
+        'nohref',
+        'noresize',
+        'noshade',
+        'nowrap',
+        'open',
+        'readonly',
+        'required',
+        'reversed',
+        'selected'
+    ])
     /**
      * Void html tags
-     * @member {String[]} voidElements
+     * @member {Set} voidElements
      * @protected
      */
-    voidElements = [
+    voidElements = new Set([
         'area',
         'base',
         'br',
         'col',
-        'command',
         'embed',
         'hr',
         'img',
         'input',
-        'keygen',
         'link',
         'meta',
         'param',
         'source',
         'track',
         'wbr'
-    ]
+    ])
 
     /**
      * Creates a Neo.vdom.VNode tree for the given vdom template.
@@ -117,7 +148,7 @@ class Helper extends Base {
      * @protected
      */
     createCloseTag(vnode) {
-        return this.voidElements.indexOf(vnode.nodeName) > -1 ? '' : '</' + vnode.nodeName + '>'
+        return this.voidElements.has(vnode.nodeName) ? '' : '</' + vnode.nodeName + '>'
     }
 
     /**
@@ -362,7 +393,7 @@ class Helper extends Base {
         }
 
         Object.entries(attributes).forEach(([key, value]) => {
-            if (this.voidAttributes.includes(key)) {
+            if (this.voidAttributes.get(key)) {
                 if (value === 'true') { // vnode attribute values get converted into strings
                     string += ` ${key}`
                 }
@@ -528,8 +559,12 @@ class Helper extends Base {
                     case 'minHeight':
                     case 'minWidth':
                     case 'width':
-                        hasUnit = value != parseInt(value);
-                        node.style[key] = value + (hasUnit ? '' : 'px');
+                        if (me.rawDimensionTags.get(node.nodeName)) {
+                            node.attributes[key] = value + ''
+                        } else {
+                            hasUnit = value != parseInt(value);
+                            node.style[key] = value + (hasUnit ? '' : 'px')
+                        }
                         break
                     case 'componentId':
                     case 'id':