neo.mjs 10.2.1 → 10.3.0

package/package.json

@@ -1,36 +1,38 @@
 {
-    "name"           : "neo.mjs",
-    "version"        : "10.2.1",
-    "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
-    "type"           : "module",
-    "repository"     : {
+    "name": "neo.mjs",
+    "version": "10.3.0",
+    "description": "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
+    "type": "module",
+    "repository": {
         "type": "git",
-        "url" : "https://github.com/neomjs/neo.git"
+        "url": "https://github.com/neomjs/neo.git"
     },
-    "bin"            : {
+    "bin": {
         "neo-cc": "./buildScripts/createClass.mjs"
     },
-    "scripts"        : {
-        "add-config"            : "node ./buildScripts/addConfig.mjs",
-        "add-reactive-tags"     : "node ./buildScripts/addReactiveTags.mjs",
-        "build-all"             : "node ./buildScripts/buildAll.mjs -f -n",
-        "build-all-questions"   : "node ./buildScripts/buildAll.mjs -f",
-        "build-es-modules"      : "node ./buildScripts/buildESModules.mjs",
-        "build-themes"          : "node ./buildScripts/buildThemes.mjs -f",
-        "build-threads"         : "node ./buildScripts/webpack/buildThreads.mjs -f",
-        "check-reactive-tags"   : "node ./buildScripts/checkReactiveTags.mjs",
-        "convert-design-tokens" : "node ./buildScripts/convertDesignTokens.mjs",
-        "create-app"            : "node ./buildScripts/createApp.mjs",
-        "create-app-minimal"    : "node ./buildScripts/createAppMinimal.mjs",
-        "create-class"          : "node ./buildScripts/createClass.mjs",
-        "create-component"      : "node ./buildScripts/createComponent.mjs",
-        "generate-docs-json"    : "node ./buildScripts/docs/jsdocx.mjs",
+    "scripts": {
+        "add-config": "node ./buildScripts/addConfig.mjs",
+        "add-reactive-tags": "node ./buildScripts/addReactiveTags.mjs",
+        "build-all": "node ./buildScripts/buildAll.mjs -f -n",
+        "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
+        "build-dist-esm": "node ./buildScripts/buildESModules.mjs",
+        "build-themes": "node ./buildScripts/buildThemes.mjs -f",
+        "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
+        "bundle-parse5": "node ./buildScripts/bundleParse5.mjs",
+        "check-reactive-tags": "node ./buildScripts/checkReactiveTags.mjs",
+        "convert-design-tokens": "node ./buildScripts/convertDesignTokens.mjs",
+        "create-app": "node ./buildScripts/createApp.mjs",
+        "create-app-minimal": "node ./buildScripts/createAppMinimal.mjs",
+        "create-class": "node ./buildScripts/createClass.mjs",
+        "create-component": "node ./buildScripts/createComponent.mjs",
+        "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
         "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
-        "server-start"          : "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
-        "test"                  : "echo \"Error: no test specified\" && exit 1",
-        "watch-themes"          : "node ./buildScripts/watchThemes.mjs"
+        "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build-single-file": "node ./buildScripts/buildSingleFile.mjs",
+        "watch-themes": "node ./buildScripts/watchThemes.mjs"
     },
-    "keywords"       : [
+    "keywords": [
         "javascript",
         "frontend",
         "framework",
@@ -71,41 +73,45 @@
         "progressive-web-app",
         "predictive-caching"
     ],
-    "author"         : "Tobias Uhlig",
-    "license"        : "MIT",
-    "bugs"           : {
+    "author": "Tobias Uhlig",
+    "license": "MIT",
+    "bugs": {
         "url": "https://github.com/neomjs/neo/issues"
     },
-    "homepage"       : "https://neomjs.com/",
+    "homepage": "https://neomjs.com/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^7.0.0",
-        "autoprefixer"                 : "^10.4.21",
-        "chalk"                        : "^5.4.1",
-        "clean-webpack-plugin"         : "^4.0.0",
-        "commander"                    : "^14.0.0",
-        "cssnano"                      : "^7.1.0",
-        "envinfo"                      : "^7.14.0",
-        "fs-extra"                     : "^11.3.0",
-        "highlightjs-line-numbers.js"  : "^2.9.0",
-        "html-minifier-terser"         : "^7.2.0",
-        "inquirer"                     : "^12.9.0",
-        "marked"                       : "^16.1.1",
-        "monaco-editor"                : "0.50.0",
-        "neo-jsdoc"                    : "1.0.1",
-        "neo-jsdoc-x"                  : "1.0.5",
-        "postcss"                      : "^8.5.6",
-        "sass"                         : "^1.89.2",
-        "siesta-lite"                  : "5.5.2",
-        "terser"                       : "^5.43.1",
-        "url"                          : "^0.11.4",
-        "webpack"                      : "^5.101.0",
-        "webpack-cli"                  : "^6.0.1",
-        "webpack-dev-server"           : "^5.2.2",
-        "webpack-hook-plugin"          : "^1.0.7",
-        "webpack-node-externals"       : "^3.0.0"
+        "acorn": "^8.15.0",
+        "astring": "^1.9.0",
+        "autoprefixer": "^10.4.21",
+        "chalk": "^5.4.1",
+        "clean-webpack-plugin": "^4.0.0",
+        "commander": "^14.0.0",
+        "cssnano": "^7.1.0",
+        "envinfo": "^7.14.0",
+        "esbuild": "^0.25.8",
+        "fs-extra": "^11.3.0",
+        "highlightjs-line-numbers.js": "^2.9.0",
+        "html-minifier-terser": "^7.2.0",
+        "inquirer": "^12.9.0",
+        "marked": "^16.1.1",
+        "monaco-editor": "0.50.0",
+        "neo-jsdoc": "1.0.1",
+        "neo-jsdoc-x": "1.0.5",
+        "parse5": "^8.0.0",
+        "postcss": "^8.5.6",
+        "sass": "^1.89.2",
+        "siesta-lite": "5.5.2",
+        "terser": "^5.43.1",
+        "url": "^0.11.4",
+        "webpack": "^5.101.0",
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.2",
+        "webpack-hook-plugin": "^1.0.7",
+        "webpack-node-externals": "^3.0.0"
     },
-    "funding"        : {
+    "funding": {
         "type": "GitHub Sponsors",
-        "url" : "https://github.com/sponsors/tobiu"
+        "url": "https://github.com/sponsors/tobiu"
     }
 }

package/src/DefaultConfig.mjs

@@ -194,7 +194,7 @@ const DefaultConfig = {
     unitTestMode: false,
     /**
      * When unitTestMode is true, this flag can be enabled to allow VDOM-related
-     * operations like render() and update() to proceed. This is useful for integration-style
+     * operations like initVnode() and update() to proceed. This is useful for integration-style
      * tests that need to verify component lifecycle and DOM output.
      * @default false
      * @memberOf! module:Neo
@@ -299,12 +299,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '10.2.1'
+     * @default '10.3.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '10.2.1'
+    version: '10.3.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/calendar/view/calendars/List.mjs

@@ -126,7 +126,7 @@ class List extends ComponentList {
             });
 
             if (!mounted) {
-                editCalendarContainer.render(true)
+                editCalendarContainer.initVnode(true)
             } else {
                 editCalendarContainer.afterSetMounted(true, false)
             }

package/src/calendar/view/month/Component.mjs

@@ -601,7 +601,7 @@ class Component extends BaseComponent {
                 style
             });
 
-            editEventContainer.render(true)
+            editEventContainer.initVnode(true)
         }
     }
 

package/src/calendar/view/week/Component.mjs

@@ -704,7 +704,7 @@ class Component extends BaseComponent {
 
             Object.assign(style, {left: `${eventNode.rect.width + 15}px`, top: eventVdom.style.top});
             editEventContainer.setSilent({parentId: path[1].id, record, style});
-            editEventContainer.render(true)
+            editEventContainer.initVnode(true)
         }
     }
 

package/src/component/Abstract.mjs

@@ -71,7 +71,7 @@ class Abstract extends Base {
          */
         modelData: null,
         /**
-         * True after the component render() method was called. Also fires the rendered event.
+         * True after the component initVnode() method was called. Also fires the rendered event.
          * @member {Boolean} mounted_=false
          * @protected
          * @reactive

package/src/component/Base.mjs

@@ -88,7 +88,7 @@ class Component extends Abstract {
          */
         dropZoneConfig: null,
         /**
-         * True to render this component into the viewport outside of the document flow
+         * True to mount this component into the viewport outside of the document flow
          * @member {Boolean} floating
          */
         floating: false,
@@ -253,6 +253,12 @@ class Component extends Abstract {
          * @reactive
          */
         ui_: null,
+        /**
+         * True after the component initVnode() method was called. Also fires the vnodeInitialized event.
+         * @member {Boolean} vnodeInitialized=false
+         * @protected
+         */
+        vnodeInitialized: false,
         /**
          * Shortcut for style.width, defaults to px
          * @member {Number|String|null} width_=null
@@ -288,24 +294,6 @@ class Component extends Abstract {
         return this.mounted && !this.hidden && (!this.parent || this.parent.isVisible);
     }
 
-    /**
-     * True after the component render() method was called. Also fires the rendered event.
-     * @member {Boolean} rendered=false
-     * @protected
-     */
-    get rendered() {
-        return this._rendered || false
-    }
-    set rendered(value) {
-        let me = this;
-
-        me._rendered = value;
-
-        if (value === true) {
-            me.fire('rendered', me.id)
-        }
-    }
-
     /**
      * The setter will handle vdom updates automatically
      * @member {Object} vdom=this._vdom
@@ -317,6 +305,24 @@ class Component extends Abstract {
         this.afterSetVdom(value, value)
     }
 
+    /**
+     * True after the component vnodeInitialized() method was called. Also fires the vnodeInitialized event.
+     * @member {Boolean} vnodeInitialized=false
+     * @protected
+     */
+    get vnodeInitialized() {
+        return this._vnodeInitialized || false
+    }
+    set vnodeInitialized(value) {
+        let me = this;
+
+        me._vnodeInitialized = value;
+
+        if (value === true) {
+            me.fire('vnodeInitialized', me.id)
+        }
+    }
+
     /**
      * Add a new cls to the vdomRoot
      * @param {String} value
@@ -1365,7 +1371,7 @@ class Component extends Abstract {
      *
      */
     init() {
-        this.autoRender && this.render()
+        this.autoInitVnode && this.initVnode()
     }
 
     /**
@@ -1426,21 +1432,21 @@ class Component extends Abstract {
     }
 
     /**
-     * Can get called after the component got rendered. See the autoMount config as well.
+     * Can get called after the component got vnodeInitialized. See the autoMount config as well.
      */
     async mount() {
         let me = this,
             child, childIds;
 
         if (!me.vnode) {
-            throw new Error('Component vnode must be generated before mounting, use Component.render()');
+            throw new Error('Component vnode must be generated before mounting, use Component.initVnode()');
         }
 
         // In case the component was already mounted, got unmounted and received vdom changes afterwards,
-        // a new render() call is mandatory since delta updates could not get applied.
+        // a new initVnode() call is mandatory since delta updates could not get applied.
         // We need to clear the hasUnmountedVdomChanges state for all child components
         if (me.hasUnmountedVdomChanges) {
-            // todo: the hasUnmountedVdomChanges flag changes should happen on render
+            // todo: the hasUnmountedVdomChanges flag changes should happen on initVnode
             me.hasUnmountedVdomChanges = false;
 
             childIds = ComponentManager.getChildIds(me.vnode);
@@ -1454,7 +1460,7 @@ class Component extends Abstract {
             });
             // end todo
 
-            me.render(true)
+            me.initVnode(true)
         } else {
             await currentWorker.promiseMessage('main', {
                 action     : 'mountDom',
@@ -1591,7 +1597,7 @@ class Component extends Abstract {
                 me.parent.updateDepth = 2;
                 me.parent.update()
             } else {
-                !me.mounted && me.render(true)
+                !me.mounted && me.initVnode(true)
             }
         } else {
             let style = me.style;
@@ -1659,7 +1665,7 @@ class Component extends Abstract {
      * In case you are sure a DOMRect exists, use getDomRect()
      * Otherwise you can wait for it using this method.
      * @example:
-     *     await this.render(true);
+     *     await this.initVnode(true);
      *     await this.waitForDomRect();
      * @param {Object}          opts
      * @param {String}          opts.appName=this.appName

package/src/container/Base.mjs

@@ -102,7 +102,7 @@ class Container extends Component {
             value         : []
         },
         /**
-         * It is crucial to define a layout before the container does get rendered.
+         * It is crucial to define a layout before the container does get vdomInitialized.
          * Meaning: onConstructed() is the latest life-cycle point.
          * You can use layout: 'base', in case you do not need a layout at all.
          * @member {Object|String|null} layout_={ntype: 'vbox', align: 'stretch'}
@@ -161,7 +161,7 @@ class Container extends Component {
     afterSetLayout(value, oldValue) {
         let me = this;
 
-        if (me.rendered) {
+        if (me.vnodeInitialized) {
             oldValue?.removeRenderAttributes();
             value?.applyRenderAttributes();
 
@@ -213,12 +213,12 @@ class Container extends Component {
     }
 
     /**
-     * Triggered after the rendering config got changed
+     * Triggered after the vnodeInitializing config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetRendering(value, oldValue) {
+    afterSetIsVnodeInitializing(value, oldValue) {
         if (oldValue !== undefined) {
             let {items} = this,
                 i       = 0,
@@ -226,7 +226,7 @@ class Container extends Component {
 
             for (; i < len; i++) {
                 if (!items[i].vdom.removeDom) {
-                    items[i].rendering = value
+                    items[i].isVnodeInitializing = value
                 }
             }
         }

package/src/controller/Application.mjs

@@ -47,15 +47,15 @@ class Application extends Base {
          */
         parentId: 'document.body',
         /**
-         * @member {Boolean} rendered=false
+         * @member {Boolean} vnodeInitialising=false
          * @protected
          */
-        rendered: false,
+        vnodeInitialising: false,
         /**
-         * @member {Boolean} rendering=false
+         * @member {Boolean} vnodeInitialized=false
          * @protected
          */
-        rendering: false,
+        vnodeInitialized: false,
         /**
          * @member {Number|null} windowId=null
          */
@@ -101,7 +101,7 @@ class Application extends Base {
             // short delay to ensure changes from onHashChange() got applied
             await me.timeout(Neo.config.hash ? 200 : 10);
 
-            await value.render(true)
+            await value.initVnode(true)
         }
     }
 

package/src/dialog/Base.mjs

@@ -39,13 +39,13 @@ class Dialog extends Panel {
          */
         animateTargetId_: null,
         /**
-         * @member {Boolean} autoMount=true
+         * @member {Boolean} autoInitVnode=true
          */
-        autoMount: true,
+        autoInitVnode: true,
         /**
-         * @member {Boolean} autoRender=true
+         * @member {Boolean} autoMount=true
          */
-        autoRender: true,
+        autoMount: true,
         /**
          * @member {Boolean} autoShow=true
          */
@@ -173,7 +173,7 @@ class Dialog extends Panel {
      */
     afterSetAnimateTargetId(value, oldValue) {
         this.autoMount  = !value;
-        this.autoRender = !value
+        this.autoInitVnode = !value
     }
 
     /**
@@ -784,7 +784,7 @@ class Dialog extends Panel {
             me.animateShow()
         } else {
             if (!me.mounted) {
-                me.render(true)
+                me.initVnode(true)
             }
 
             me.fire('show')

package/src/draggable/DragProxyComponent.mjs

@@ -17,13 +17,13 @@ class DragProxyComponent extends Base {
          */
         ntype: 'dragproxy',
         /**
-         * @member {Boolean} autoMount=true
+         * @member {Boolean} autoInitVnode=true
          */
-        autoMount: true,
+        autoInitVnode: true,
         /**
-         * @member {Boolean} autoRender=true
+         * @member {Boolean} autoMount=true
          */
-        autoRender: true,
+        autoMount: true,
         /**
          * @member {String[]} baseCls=['neo-dragproxy']
          */

package/src/form/field/ComboBox.mjs

@@ -209,7 +209,7 @@ class ComboBox extends Picker {
      * @protected
      */
     afterSetTypeAhead(value, oldValue) {
-        this.rendered && this.updateTypeAhead()
+        this.vnodeInitialized && this.updateTypeAhead()
     }
 
     /**

package/src/functional/_export.mjs

@@ -1,6 +1,7 @@
 import Component       from './component/Base.mjs';
 import defineComponent from './defineComponent.mjs';
+import {html}          from './util/html.mjs';
 import useConfig       from './useConfig.mjs';
 import useEvent        from './useEvent.mjs';
 
-export {Component, defineComponent, useConfig, useEvent};
+export {Component, defineComponent, html, useConfig, useEvent};