neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/src/util/vdom/TreeBuilder.mjs

@@ -0,0 +1,129 @@
+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
+    }
+
+    /**
+     * Copies a given vdom tree and replaces child component references with the vdom of their matching components
+     * @param {Object} vdom
+     * @param {Number} [depth=-1]
+     *     The component replacement depth.
+     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
+     * @param {Set<String>|null} [mergedChildIds=null] A set of component IDs to selectively expand.
+     * @returns {Object}
+     */
+    getVdomTree(vdom, depth = -1, mergedChildIds = null) {
+        if (!Neo.isObject(vdom)) {
+            return vdom
+        }
+
+        let output = {...vdom}; // Shallow copy
+
+        if (vdom.cn) {
+            output.cn = [];
+
+            vdom.cn.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.cn.push({componentId: 'neo-ignore', id: item.id || item.componentId});
+                        // Stop processing this branch
+                        return
+                    }
+                    // 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);
+                        if (component?.vdom) {
+                            currentItem = component.vdom
+                        }
+                    }
+                }
+
+                if (item.componentId) {
+                    childDepth = (depth === -1) ? -1 : Math.max(0, depth - 1)
+                } else {
+                    childDepth = depth
+                }
+
+                output.cn.push(this.getVdomTree(currentItem, childDepth, mergedChildIds))
+            })
+        }
+
+        return output
+    }
+
+    /**
+     * Copies a given vnode tree and replaces child component references with the vnode of their matching components
+     * @param {Object} vnode
+     * @param {Number} [depth=-1]
+     *     The component replacement depth.
+     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
+     * @param {Set<String>|null} [mergedChildIds=null] A set of component IDs to selectively expand.
+     * @returns {Object}
+     */
+    getVnodeTree(vnode, depth = -1, mergedChildIds = null) {
+        let output = {...vnode}; // Shallow copy
+
+        if (vnode.childNodes) {
+            output.childNodes = [];
+
+            vnode.childNodes.forEach(item => {
+                let currentItem = item,
+                    childDepth, component;
+
+                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.childNodes.push({componentId: 'neo-ignore', id: item.id || item.componentId});
+                        // Stop processing this branch
+                        return
+                    }
+                    // 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)) {
+                        component = ComponentManager.get(currentItem.componentId);
+
+                        // Keep references in case there is no vnode (e.g. component not mounted yet)
+                        if (component?.vnode) {
+                            currentItem = component.vnode
+                        }
+                    }
+                }
+
+                if (item.componentId) {
+                    childDepth = (depth === -1) ? -1 : Math.max(0, depth - 1)
+                } else {
+                    childDepth = depth
+                }
+
+                output.childNodes.push(this.getVnodeTree(currentItem, childDepth, mergedChildIds))
+            })
+        }
+
+        return output
+    }
+}
+
+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':
@@ -529,16 +541,15 @@ class Helper extends Base {
      * @protected
      */
     insertNode({deltas, index, oldVnodeMap, vnode, vnodeMap}) {
-        let details                = vnodeMap.get(vnode.id),
-            {parentNode}           = details,
-            parentId               = parentNode.id,
-            me                     = this,
-            movedNodes             = me.findMovedNodes({oldVnodeMap, vnode, vnodeMap}),
-            delta                  = {action: 'insertNode', parentId},
-            hasLeadingTextChildren = false,
-            physicalIndex          = me.getPhysicalIndex(parentNode, index); // Processes the children of the *NEW* parent's VNode in the *current* state
-
-        Object.assign(delta, {hasLeadingTextChildren, index: physicalIndex});
+        let details      = vnodeMap.get(vnode.id),
+            {parentNode} = details,
+            parentId     = parentNode.id,
+            me           = this,
+            movedNodes   = me.findMovedNodes({oldVnodeMap, vnode, vnodeMap}),
+            delta        = {action: 'insertNode', parentId};
+
+        // Processes the children of the *NEW* parent's VNode in the *current* state
+        delta.index = me.getPhysicalIndex(parentNode, index);
 
         if (NeoConfig.useDomApiRenderer) {
             // For direct DOM API mounting, pass the pruned VNode tree

package/src/vdom/VNode.mjs

@@ -71,14 +71,15 @@ 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 || {},
                 className : normalizeClassName(config.className),
                 nodeName  : config.nodeName   || 'div',
-                style     : config.style
+                style     : config.style      || {}
             });
 
             // Use vdom.html on your own risk, it is not fully XSS secure.
@@ -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,
         /**
@@ -45,11 +46,6 @@ class App extends Base {
         singleton: true
     }
 
-    /**
-     * @member {Boolean} isUsingStateProviders=false
-     * @protected
-     */
-    isUsingStateProviders = false
     /**
      * We are storing the params of insertThemeFiles() calls here, in case the method does get triggered
      * before the json theme structure got loaded.

package/src/worker/Base.mjs

@@ -9,6 +9,8 @@ import RemoteMethodAccess    from './mixin/RemoteMethodAccess.mjs';
  * The abstract base class for e.g. the App, Data & VDom worker
  * @class Neo.worker.Base
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
+ * @mixes Neo.worker.mixin.RemoteMethodAccess
  * @abstract
  */
 class Worker extends Base {

package/src/worker/Manager.mjs

@@ -18,6 +18,8 @@ navigator.serviceWorker?.addEventListener('controllerchange', function() {
  * Also, responsible for sending messages from the main thread to the different workers.
  * @class Neo.worker.Manager
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
+ * @mixes Neo.worker.mixin.RemoteMethodAccess
  * @singleton
  */
 class Manager extends Base {

package/src/worker/ServiceBase.mjs

@@ -16,6 +16,7 @@ class ServiceBase extends Base {
         className: 'Neo.worker.ServiceBase',
         /**
          * @member {String} cacheName_='neo-runtime'
+         * @reactive
          */
         cacheName_: 'neo-runtime',
         /**
@@ -26,6 +27,7 @@ class ServiceBase extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [
@@ -175,6 +177,8 @@ class ServiceBase extends Base {
      * @param {ExtendableMessageEvent} event
      */
     async onActivate(event) {
+        await globalThis.clients.claim();
+
         console.log('onActivate', event);
 
         let me   = this,
@@ -229,7 +233,8 @@ class ServiceBase extends Base {
      * @param {ExtendableMessageEvent} event
      */
     onInstall(event) {
-        console.log('onInstall', event)
+        console.log('onInstall', event);
+        globalThis.skipWaiting();
     }
 
     /**

package/test/siesta/siesta.js

@@ -17,8 +17,41 @@ project.configure({
 });
 
 project.plan(
+    {
+        group: 'neo',
+        items: [
+            'tests/neo/MixinStaticConfig.mjs'
+        ]
+    },
     'tests/ClassConfigsAndFields.mjs',
     'tests/ClassSystem.mjs',
+    {
+        group: 'core',
+        items: [
+            'tests/core/Effect.mjs'
+        ]
+    },
+    {
+        group: 'config',
+        items: [
+            'tests/config/Basic.mjs',
+            'tests/config/Hierarchy.mjs',
+            'tests/config/MultiLevelHierarchy.mjs',
+            'tests/config/CustomFunctions.mjs',
+            'tests/config/AfterSetConfig.mjs',
+            'tests/config/MemoryLeak.mjs',
+            'tests/config/CircularDependencies.mjs',
+            'tests/core/EffectBatching.mjs'
+        ]
+    },
+    {
+        group: 'state',
+        items: [
+            'tests/state/createHierarchicalDataProxy.mjs',
+            'tests/state/Provider.mjs',
+            'tests/state/ProviderNestedDataConfigs.mjs'
+        ]
+    },
     'tests/CollectionBase.mjs',
     'tests/ManagerInstance.mjs',
     'tests/Rectangle.mjs',
@@ -37,7 +70,9 @@ project.plan(
                 'tests/vdom/table/Container.mjs'
             ]
         },
-        'tests/vdom/Advanced.mjs']
+        'tests/vdom/Advanced.mjs',
+        'tests/vdom/VdomAsymmetricUpdates.mjs',
+        'tests/vdom/VdomRealWorldUpdates.mjs']
     }
 );
 

package/test/siesta/tests/CollectionBase.mjs

@@ -28,20 +28,20 @@ StartTest(t => {
             ]
         });
 
-        t.isStrict(collection.getCount(), 6, 'Collection has 6 items');
+        t.isStrict(collection.count, 6, 'Collection has 6 items');
         t.isStrict(collection.map.size, 6, 'map has 6 items');
     });
 
     t.it('Modify collection items', t => {
         collection.add({country: 'Germany', firstname: 'Bastian', githubId: 'bhaustein', lastname: 'Haustein'});
 
-        t.isStrict(collection.getCount(), 7, 'Collection has 7 items');
+        t.isStrict(collection.count, 7, 'Collection has 7 items');
         t.isStrict(collection.map.size, 7, 'map has 7 items');
 
 
         collection.remove('bhaustein');
 
-        t.isStrict(collection.getCount(), 6, 'Collection has 6 items');
+        t.isStrict(collection.count, 6, 'Collection has 6 items');
         t.isStrict(collection.map.size, 6, 'map has 6 items');
 
         collection.insert(1, [
@@ -49,12 +49,12 @@ StartTest(t => {
             {country: 'Argentina', firstname: 'Max',     githubId: 'elmasse',   lastname: 'Fierro'}
         ]);
 
-        t.isStrict(collection.getCount(), 8, 'Collection has 8 items');
+        t.isStrict(collection.count, 8, 'Collection has 8 items');
         t.isStrict(collection.map.size, 8, 'map has 8 items');
 
         collection.insert(1, {country: 'Croatia', firstname: 'Grgur', githubId: 'grgur', lastname: 'Grisogono'});
 
-        t.isStrict(collection.getCount(), 9, 'Collection has 9 items');
+        t.isStrict(collection.count, 9, 'Collection has 9 items');
         t.isStrict(collection.map.size, 9, 'map has 9 items');
 
         t.isDeeplyStrict(collection.getRange(1, 4), [
@@ -227,7 +227,7 @@ StartTest(t => {
         collection3.remove('mrsunshine');
         collection3.remove('elmasse');
 
-        t.isStrict(collection3.getCount(), 7, 'collection3 count is 7');
+        t.isStrict(collection3.count, 7, 'collection3 count is 7');
 
         t.diag("filter by firstname, like, 'a'");
 
@@ -238,8 +238,8 @@ StartTest(t => {
             value             : 'a'
         }];
 
-        t.isStrict(collection3.getCount(), 4, 'collection3 count is 4');
-        t.isStrict(collection3.allItems.getCount(), 7, 'collection3 allItems count is 7');
+        t.isStrict(collection3.count, 4, 'collection3 count is 4');
+        t.isStrict(collection3.allItems.count, 7, 'collection3 allItems count is 7');
 
         t.diag("Add Max & Nils back");
 
@@ -248,8 +248,8 @@ StartTest(t => {
             {country: 'Germany',   firstname: 'Nils',    githubId: 'mrsunshine',    lastname: 'Dehl'}
         ]);
 
-        t.isStrict(collection3.getCount(), 5, 'collection3 count is 5');
-        t.isStrict(collection3.allItems.getCount(), 9, 'collection3 allItems count is 9');
+        t.isStrict(collection3.count, 5, 'collection3 count is 5');
+        t.isStrict(collection3.allItems.count, 9, 'collection3 allItems count is 9');
     });
 
     t.it('Add & remove at same time', t => {

package/test/siesta/tests/VdomCalendar.mjs

@@ -7,6 +7,10 @@ import VDomUtil   from '../../../src/util/VDom.mjs';
 
 let deltas, output, vdom, vnode;
 
+// tests are designed for this rendering mode
+Neo.config.useDomApiRenderer = false;
+VdomHelper.onNeoConfigChange({useDomApiRenderer: false})
+
 StartTest(t => {
     t.it('Week view: Infinite Scrolling', t => {
         vdom =
@@ -23,7 +27,7 @@ StartTest(t => {
             {id: 'col-15'}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-vnode-1', cn: [
@@ -105,7 +109,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -165,7 +169,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -216,7 +220,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -268,7 +272,7 @@ StartTest(t => {
             {id: 'neo-column-3'}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -333,7 +337,7 @@ StartTest(t => {
         vdom =
         {id: 'neo-1'};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-1', removeDom: true};
@@ -358,7 +362,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -403,7 +407,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {tag: 'ul', id: 'neo-calendar-calendars-list-1', cn: [
@@ -1696,7 +1700,7 @@ StartTest(t => {
             }], tag: 'div'
         }
 
-        vnode = VdomHelper.create(vdom);
+        let vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {cls: ['neo-c-m-scrollcontainer', 'neo-scroll-shadows', 'neo-is-scrolling'], id: 'neo-vnode-150', cn: [