neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/tab/header/Toolbar.mjs

@@ -22,6 +22,7 @@ class Toolbar extends BaseToolbar {
         baseCls: ['neo-tab-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
          */
         useActiveTabIndicator_: true
     }

package/src/table/Body.mjs

@@ -36,6 +36,7 @@ class TableBody extends Component {
         containerId: null,
         /**
          * @member {Boolean} highlightModifiedCells_=false
+         * @reactive
          */
         highlightModifiedCells_: false,
         /**
@@ -49,6 +50,7 @@ class TableBody extends Component {
         recordVnodeMap: {},
         /**
          * @member {Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
@@ -57,6 +59,7 @@ class TableBody extends Component {
         selectedRecordField: 'annotations.selected',
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**

package/src/table/Container.mjs

@@ -34,11 +34,13 @@ class Container extends BaseContainer {
         /**
          * @member {String|null} bodyId_=null
          * @protected
+         * @reactive
          */
         bodyId_: null,
         /**
          * true uses table.plugin.CellEditing
          * @member {Boolean} cellEditing_=false
+         * @reactive
          */
         cellEditing_: false,
         /**
@@ -48,6 +50,7 @@ class Container extends BaseContainer {
         columnDefaults: null,
         /**
          * @member {Object[]} columns_=[]
+         * @reactive
          */
         columns_: [],
         /**
@@ -57,10 +60,12 @@ class Container extends BaseContainer {
         headerToolbarConfig: null,
         /**
          * @member {String|null} headerToolbarId_=null
+         * @reactive
          */
         headerToolbarId_: null,
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**
@@ -70,24 +75,29 @@ class Container extends BaseContainer {
         scrollbarsCssApplied: false,
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * todo: only works for chrome & safari -> add a check
          * @member {Boolean} useCustomScrollbars_=true
+         * @reactive
          */
         useCustomScrollbars_: true,
         /**
          * @member {Array|null} items=null
          * @protected
+         * @reactive
          */
         items: null,
         /**

package/src/table/header/Button.mjs

@@ -34,6 +34,7 @@ class Button extends BaseButton {
         /**
          * Alignment of the matching table cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'
+         * @reactive
          */
         cellAlign_: 'left',
         /**
@@ -47,6 +48,7 @@ class Button extends BaseButton {
         defaultSortDirection: 'ASC',
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
@@ -64,20 +66,24 @@ class Button extends BaseButton {
         filterField: null,
         /**
          * @member {String} iconCls='fa fa-arrow-circle-up'
+         * @reactive
          */
         iconCls: 'fa fa-arrow-circle-up',
         /**
          * @member {String} iconPosition='right'
+         * @reactive
          */
         iconPosition: 'right',
         /**
          * 'ASC', 'DESC' or null
          * @member {String|null} isSorted_=null
          * @protected
+         * @reactive
          */
         isSorted_: null,
         /**
          * @member {Function|String|null} renderer_='cellRenderer'
+         * @reactive
          */
         renderer_: 'cellRenderer',
         /**
@@ -88,10 +94,12 @@ class Button extends BaseButton {
         rendererScope: null,
         /**
          * @member {Boolean} showHeaderFilter_=false
+         * @reactive
          */
         showHeaderFilter_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true,
         /**

package/src/table/header/Toolbar.mjs

@@ -22,26 +22,31 @@ class Toolbar extends BaseToolbar {
         baseCls: ['neo-table-header-toolbar'],
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**
          * @member {Object} itemDefaults={ntype : 'table-header-button'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'table-header-button'
         },
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * Convenience shortcut to pass sortable to all toolbar items.
          * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true,
         /**

package/src/table/plugin/CellEditing.mjs

@@ -24,6 +24,7 @@ class CellEditing extends Plugin {
         cellCls: 'neo-table-cell',
         /**
          * @member {Boolean} disabled_=false
+         * @reactive
          */
         disabled_: false,
         /**

package/src/toolbar/Base.mjs

@@ -33,16 +33,19 @@ class Toolbar extends Container {
         baseCls: ['neo-toolbar'],
         /**
          * @member {String|null} dock_=null
+         * @reactive
          */
         dock_: null,
         /**
          * @member {Object} itemDefaults={ntype:'button'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'button'
         },
         /**
          * @member {Object} layout={ntype:'flexbox',align:'center',direction: 'row', pack:'start'}
+         * @reactive
          */
         layout: {
             ntype    : 'flexbox',
@@ -52,6 +55,7 @@ class Toolbar extends Container {
         },
         /**
          * @member {Boolean} sortable_=false
+         * @reactive
          */
         sortable_: false,
         /**

package/src/toolbar/Breadcrumb.mjs

@@ -21,6 +21,7 @@ class Breadcrumb extends Toolbar {
         ntype: 'breadcrumb-toolbar',
         /**
          * @member {Number|String|null} activeKey_=null
+         * @reactive
          */
         activeKey_: null,
         /**
@@ -29,6 +30,7 @@ class Breadcrumb extends Toolbar {
         baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
         /**
          * @member {Object} itemDefaults={ntype:'button', ui: 'tertiary'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'button',
@@ -36,6 +38,7 @@ class Breadcrumb extends Toolbar {
         },
         /**
          * @member {Neo.data.Store|Object} store_=null
+         * @reactive
          */
         store_: null
     }

package/src/toolbar/Paging.mjs

@@ -24,22 +24,27 @@ class Paging extends Toolbar {
         baseCls: ['neo-paging-toolbar', 'neo-toolbar'],
         /**
          * @member {Number} currentPage_=1
+         * @reactive
          */
         currentPage_: 1,
         /**
          * @member {Number} pageSize_=30
+         * @reactive
          */
         pageSize_: 30,
         /**
          * @member {Function} pagesText_=me=>`Page: ${me.page} / ${me.getMaxPages()}`
+         * @reactive
          */
         pagesText_: me => `Page ${me.currentPage} / ${me.getMaxPages()}`,
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * @member {Function} totalText_=count=>`Total: ${count} records`
+         * @reactive
          */
         totalText_: count => `Total: ${count} rows`,
         /**

package/src/tooltip/Base.mjs

@@ -27,6 +27,7 @@ class Tooltip extends Container {
         /**
          * A reference to the target component which is supposed to show this tooltip on mouseenter
          * @member {String|null} componentId_=null
+         * @reactive
          */
         componentId_: null,
         /**
@@ -75,6 +76,7 @@ class Tooltip extends Container {
         /**
          * True prevents the tooltip from hiding while the mouse cursor is above it
          * @member {Boolean|null} stayOnHover_=true
+         * @reactive
          */
         stayOnHover_: true
     }

package/src/tree/List.mjs

@@ -27,6 +27,7 @@ class Tree extends Base {
         baseCls: ['neo-tree-list'],
         /**
          * @member {Boolean} disableSelection=false
+         * @reactive
          */
         disableSelection: false,
         /**
@@ -43,6 +44,7 @@ class Tree extends Base {
         showCollapseExpandAllIcons: true,
         /**
          * @member {Boolean} sortable_=false
+         * @reactive
          */
         sortable_: false,
         /**
@@ -55,6 +57,7 @@ class Tree extends Base {
         sortZoneConfig: null,
         /**
          * @member {String[]} wrapperCls=[]
+         * @reactive
          */
         wrapperCls: [],
         /**

package/src/util/HashHistory.mjs

@@ -4,6 +4,7 @@ import Observable from '../core/Observable.mjs';
 /**
  * @class Neo.util.HashHistory
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  * @singleton
  */
 class HashHistory extends Base {

package/src/util/KeyNavigation.mjs

@@ -20,6 +20,7 @@ class KeyNavigation extends Base {
         /**
          * Internally stores the component id inside _component
          * @member {Neo.component.Base|null} component_=null
+         * @reactive
          */
         component_: null,
         /**
@@ -29,6 +30,7 @@ class KeyNavigation extends Base {
         keyDownEventBubble: false,
         /**
          * @member {Array|null} keys_=null
+         * @reactive
          */
         keys_: null
     }

package/src/util/Matrix.mjs

@@ -15,6 +15,7 @@ class Matrix extends Base {
         /**
          * @member {Array|null} items_=null
          * @protected
+         * @reactive
          */
         items_: null
     }

package/src/util/VDom.mjs

@@ -261,7 +261,13 @@ class VDom extends Base {
      */
     static getVdom(vdom) {
         if (vdom.componentId) {
-            vdom = ComponentManager.get(vdom.componentId).vdom
+            const component = ComponentManager.get(vdom.componentId);
+
+            if (!component) {
+                throw new Error(`util.VDom.getVdom: Component not found for id: ${vdom.componentId}`)
+            }
+
+            vdom = component.vdom
         }
 
         return vdom
@@ -385,16 +391,23 @@ class VDom extends Base {
                     vdom.id = vnode.id
                 }
             } else {
-                // we only want to change vdom ids in case there is not already an own id
-                // (think of adding & removing nodes in parallel)
-                if (!vdom.id && vnode.id) {
+                // We only want to add an ID if the vdom node does not already have one.
+                // This preserves developer-provided IDs while allowing the framework
+                // to assign IDs to nodes that need them for reconciliation.
+                // Also think of adding and removing nodes in parallel.
+                if (vnode.id && (!vdom.id || vdom.id.startsWith('neo-vnode-'))) {
                     vdom.id = vnode.id
                 }
             }
 
             if (childNodes) {
                 cn  = childNodes.map(item => VDom.getVdom(item));
-                cn  = cn.filter(item => item.removeDom !== true);
+                // The vnode.childNodes array is already filtered by the worker.
+                // We must filter the component's vdom.cn array identically to ensure
+                // both arrays are structurally aligned for the sync loop.
+                // The boolean check `item &&` is critical to remove falsy values
+                // from conditional rendering and prevent runtime errors.
+                cn  = cn.filter(item => item && item.removeDom !== true);
                 i   = 0;
                 len = cn?.length || 0;
 

package/src/util/VNode.mjs

@@ -168,7 +168,13 @@ class VNode extends Base {
      */
     static getVnode(vnode) {
         if (vnode.componentId) {
-            vnode = ComponentManager.get(vnode.componentId).vnode
+            const component = ComponentManager.get(vnode.componentId);
+
+            if (!component) {
+                throw new Error(`util.VNode.getVnode: Component not found for id: ${vnode.componentId}`)
+            }
+
+            vnode = component.vnode
         }
 
         return vnode

package/src/util/vdom/TreeBuilder.mjs

@@ -0,0 +1,105 @@
+import Base             from '../../core/Base.mjs';
+import ComponentManager from '../../manager/Component.mjs';
+
+/**
+ * A singleton utility class responsible for recursively building VDOM and VNode trees.
+ * It can expand component references within a tree structure into their full VDOM/VNode representations,
+ * supporting selective (asymmetric) tree expansion for optimized updates.
+ * @class Neo.util.vdom.TreeBuilder
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class TreeBuilder extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.util.vdom.TreeBuilder'
+         * @protected
+         */
+        className: 'Neo.util.vdom.TreeBuilder',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * Private helper to recursively build a tree, abstracting the child node key.
+     * @param {Object} node The vdom or vnode to process.
+     * @param {Number} depth The current recursion depth.
+     * @param {Set<String>|null} mergedChildIds A set of component IDs to selectively expand.
+     * @param {String} childKey The property name for child nodes ('cn' or 'childNodes').
+     * @returns {Object}
+     * @private
+     */
+    #buildTree(node, depth, mergedChildIds, childKey) {
+        // We can not use Neo.isObject() here, since inside unit-test scenarios, we will import vdom.Helper into main threads.
+        // Inside this scenario, Neo.isObject() returns false for VNode instances
+        if (typeof node !== 'object' || node === null) {
+            return node
+        }
+
+        let output = {...node}; // Shallow copy
+
+        if (node[childKey]) {
+            output[childKey] = [];
+
+            node[childKey].forEach(item => {
+                let currentItem = item,
+                    childDepth;
+
+                if (currentItem.componentId) {
+                    // Prune the branch only if we are at the boundary AND the child is not part of a merged update
+                    if (depth === 1 && !mergedChildIds?.has(currentItem.componentId)) {
+                        output[childKey].push({componentId: 'neo-ignore', id: item.id || item.componentId});
+                        return // Stop processing this branch
+                    }
+                    // Expand the branch if it's part of a merged update, or if the depth requires it
+                    else if (depth > 1 || depth === -1 || mergedChildIds?.has(currentItem.componentId)) {
+                        const component = ComponentManager.get(currentItem.componentId);
+                        // Use the correct tree type based on the childKey
+                        const componentTree = childKey === 'cn' ? component?.vdom : component?.vnode;
+                        if (componentTree) {
+                            currentItem = componentTree
+                        }
+                    }
+                }
+
+                if (item.componentId) {
+                    childDepth = (depth === -1) ? -1 : Math.max(0, depth - 1)
+                } else {
+                    childDepth = depth
+                }
+
+                output[childKey].push(this.#buildTree(currentItem, childDepth, mergedChildIds, childKey))
+            })
+        }
+
+        return output
+    }
+
+
+    /**
+     * Copies a given vdom tree and replaces child component references with their vdom.
+     * @param {Object} vdom
+     * @param {Number} [depth=-1]
+     * @param {Set<String>|null} [mergedChildIds=null]
+     * @returns {Object}
+     */
+    getVdomTree(vdom, depth=-1, mergedChildIds=null) {
+        return this.#buildTree(vdom, depth, mergedChildIds, 'cn')
+    }
+
+    /**
+     * Copies a given vnode tree and replaces child component references with their vnode.
+     * @param {Object} vnode
+     * @param {Number} [depth=-1]
+     * @param {Set<String>|null} [mergedChildIds=null]
+     * @returns {Object}
+     */
+    getVnodeTree(vnode, depth=-1, mergedChildIds=null) {
+        return this.#buildTree(vnode, depth, mergedChildIds, 'childNodes')
+    }
+}
+
+export default Neo.setupClass(TreeBuilder);

package/src/vdom/Helper.mjs

@@ -23,6 +23,7 @@ class Helper extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app:['create','update']}
          * @protected
+         * @reactive
          */
         remote: {
             app: [
@@ -47,19 +48,21 @@ class Helper extends Base {
      * @protected
      */
     compareAttributes({deltas, oldVnode, vnode, vnodeMap}) {
-        // Do not compare attributes for component references
-        if (oldVnode.componentId && (oldVnode.id === vnode.id || oldVnode.componentId === vnode.id)) {
-            return deltas
+        // If either vnode is a component placeholder (indicated by the presence of componentId),
+        // we must not compare element attributes.
+        if (vnode.componentId || oldVnode.componentId) {
+            return deltas;
         }
 
-        let attributes, delta, value, keys, styles, add, remove;
+        let delta = {},
+            attributes, value, keys, styles, add, remove;
 
-        if (vnode.vtype === 'text' && vnode.innerHTML !== oldVnode.innerHTML) {
+        if (vnode.vtype === 'text' && vnode.textContent !== oldVnode.textContent) {
             deltas.default.push({
                 action  : 'updateVtext',
                 id      : vnode.id,
                 parentId: vnodeMap.get(vnode.id).parentNode.id,
-                value   : vnode.innerHTML
+                value   : vnode.textContent
             })
         } else {
             keys = Object.keys(vnode);
@@ -77,7 +80,6 @@ class Helper extends Base {
             });
 
             keys.forEach(prop => {
-                delta = {};
                 value = vnode[prop];
 
                 switch (prop) {
@@ -143,12 +145,12 @@ class Helper extends Base {
                         }
                         break
                 }
+            });
 
-                if (Object.keys(delta).length > 0) {
-                    delta.id = vnode.id;
-                    deltas.default.push(delta)
-                }
-            })
+            if (Object.keys(delta).length > 0) {
+                delta.id = vnode.id;
+                deltas.default.push(delta)
+            }
         }
 
         return deltas
@@ -200,12 +202,11 @@ class Helper extends Base {
      */
     createDeltas(config) {
         let {deltas={default: [], remove: []}, oldVnode, vnode} = config,
-            oldVnodeId = oldVnode?.id || oldVnode?.componentId,
-            vnodeId    = vnode?.id;
+            vnodeId = vnode?.id;
 
         // Edge case: setting `removeDom: true` on a top-level vdom node
-        if (!vnode && oldVnodeId) {
-            deltas.remove.push({action: 'removeNode', id: oldVnodeId});
+        if (!vnode && (oldVnode?.id || oldVnode?.componentId)) {
+            deltas.remove.push({action: 'removeNode', id: oldVnode.id || oldVnode.componentId});
             return deltas
         }
 
@@ -213,8 +214,10 @@ class Helper extends Base {
             return deltas
         }
 
-        if (vnodeId !== oldVnodeId && vnode.componentId !== oldVnode.componentId) {
-            throw new Error(`createDeltas() must get called for the same node. ${vnodeId}, ${oldVnodeId}`);
+        // The top-level nodes passed to createDeltas must be the same logical node. The VdomLifecycle
+        // mixin ensures symmetric trees, so IDs and types (component vs element) must match.
+        if (vnode.id !== oldVnode.id || vnode.componentId !== oldVnode.componentId) {
+            throw new Error(`createDeltas() must be called for the same node. new: {id: ${vnode.id}, cId: ${vnode.componentId}}, old: {id: ${oldVnode.id}, cId: ${oldVnode.componentId}}`);
         }
 
         let me            = this,
@@ -243,11 +246,19 @@ class Helper extends Base {
                 break
             }
 
-            // Same node, continue recursively
+            // A "match" requires nodes to be of the same type (placeholder or element) and have
+            // the same identifier. The VdomLifecycle mixin ensures that both the old (vnode)
+            // and new (vdom) trees are expanded to the same symmetric depth before diffing.
             if (childNode && oldChildNode && (
-                childNode.id === oldChildNode.id ||
-                (childNode.componentId && childNode.componentId === oldChildNode.componentId))
-            ) {
+                // Case 1: Both nodes are elements with the same ID
+                (!childNode.componentId && !oldChildNode.componentId && childNode.id === oldChildNode.id) ||
+                // Case 2: Both nodes are placeholders for the same component
+                (childNode.componentId && childNode.componentId === oldChildNode.componentId)
+            )) {
+                if (childNode.componentId === 'neo-ignore') {
+                    continue
+                }
+
                 me.createDeltas({deltas, oldVnode: oldChildNode, oldVnodeMap, vnode: childNode, vnodeMap});
                 continue
             }
@@ -334,7 +345,7 @@ class Helper extends Base {
 
                         newValue = [];
 
-                        value.forEach(item => {
+                        value.filter(Boolean).forEach(item => {
                             if (item.removeDom !== true) {
                                 delete item.removeDom; // could be false
                                 potentialNode = me.createVnode(item);
@@ -371,6 +382,7 @@ class Helper extends Base {
                     case 'componentId':
                     case 'id':
                     case 'static':
+                    case 'vtype':
                         node[key] = value;
                         break
                     case 'style':

package/src/vdom/VNode.mjs

@@ -71,8 +71,9 @@ class VNode {
         });
 
         if (isVText) {
-            // XSS Security: a pure text node is not supposed to contain HTML
-            me.textContent = StringUtil.escapeHtml(hasInnerHtml ? config.innerHTML : textContent)
+            // A vtext node represents a pure text node. It should not be created from an innerHTML property.
+            // For XSS Security, we escape the content when using the string-based renderer.
+            me.textContent = Neo.config.useDomApiRenderer ? textContent : StringUtil.escapeHtml(textContent);
         } else {
             Object.assign(me, {
                 attributes: config.attributes || {},
@@ -135,7 +136,4 @@ function normalizeClassName(classNameInput) {
     return [...new Set(normalizedClasses)]
 }
 
-const ns = Neo.ns('Neo.vdom', true);
-ns.VNode = VNode;
-
-export default VNode;
+export default Neo.gatekeep(VNode, 'Neo.vdom.VNode');

package/src/worker/App.mjs

@@ -21,6 +21,7 @@ class App extends Base {
         className: 'Neo.worker.App',
         /**
          * @member {Number} countLoadingThemeFiles_=0
+         * @reactive
          */
         countLoadingThemeFiles_: 0,
         /**