neo.mjs 9.12.0 → 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.12.0'
+         * @member {String} version='9.13.0'
          */
-        version: '9.12.0'
+        version: '9.13.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-11",
+      "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.12.0'
+                html  : 'v9.13.0'
             }]
         }],
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "9.12.0",
+    "version"        : "9.13.0",
     "description"    : "The webworkers driven UI framework",
     "type"           : "module",
     "repository"     : {
@@ -63,7 +63,7 @@
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
         "neo-jsdoc-x"                  : "1.0.5",
-        "postcss"                      : "^8.5.4",
+        "postcss"                      : "^8.5.5",
         "sass"                         : "^1.89.2",
         "siesta-lite"                  : "5.5.2",
         "terser"                       : "^5.42.0",

package/src/DefaultConfig.mjs

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

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/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':