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

package/src/state/createHierarchicalDataProxy.mjs

@@ -0,0 +1,124 @@
+import EffectManager from '../core/EffectManager.mjs';
+
+/**
+ * Creates a nested Proxy that represents a level in the hierarchical data structure.
+ * @param {Neo.state.Provider} rootProvider The top-level provider to start searches from.
+ * @param {String} path The current path of this proxy level (e.g., 'user' for data.user).
+ * @returns {Proxy|null}
+ * @private
+ */
+function createNestedProxy(rootProvider, path) {
+    // The target object for the proxy can be empty because all lookups are dynamic.
+    const target = {};
+
+    return new Proxy(target, {
+        /**
+         * The get trap for the proxy. This is where the magic happens.
+         * @param {Object} currentTarget The proxy's target object.
+         * @param {String|Symbol} property The name of the property being accessed.
+         * @returns {*} The value of the property or a new proxy for nested access.
+         */
+        get(currentTarget, property) {
+            // Handle internal properties that might be set directly on the proxy's target
+            // or are expected by the environment (like Siesta's __REFADR__).
+            if (typeof property === 'symbol' || property === '__REFADR__' || property === 'inspect' || property === 'then') {
+                return Reflect.get(currentTarget, property);
+            }
+
+            // Only allow string or number properties to proceed as data paths.
+            if (typeof property !== 'string' && typeof property !== 'number') {
+                return undefined; // For other non-string/non-number properties, return undefined.
+            }
+
+            const fullPath = path ? `${path}.${property}` : property;
+
+            // 1. Check if the full path corresponds to an actual data property.
+            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+
+            if (ownerDetails) {
+                const
+                    {owner, propertyName} = ownerDetails,
+                    config                = owner.getDataConfig(propertyName);
+
+                if (config) {
+                    const activeEffect = EffectManager.getActiveEffect();
+                    if (activeEffect) {
+                        activeEffect.addDependency(config);
+                    }
+
+                    const value = config.get();
+                    // If the value is an object, return a new proxy for it to ensure nested accesses are also proxied.
+                    if (Neo.typeOf(value) === 'Object') {
+                        return createNestedProxy(rootProvider, fullPath)
+                    }
+                    return value;
+                }
+            }
+
+            // 2. If not a direct match, it might be a parent object of a nested property
+            //    (e.g., accessing `user` when a `user.firstname` binding exists).
+            //    In this case, we return another proxy for the next level down.
+            if (rootProvider.hasNestedDataStartingWith(fullPath)) {
+                return createNestedProxy(rootProvider, fullPath)
+            }
+
+            // 3. If it's neither a data property nor a path to one, it doesn't exist in the state.
+            return null
+        },
+
+        set(currentTarget, property, value) {
+            // Allow internal properties (like Symbols or specific strings) to be set directly on the target.
+            if (typeof property === 'symbol' || property === '__REFADR__') {
+                return Reflect.set(currentTarget, property, value);
+            }
+
+            const fullPath = path ? `${path}.${property}` : property;
+            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+
+            let targetProvider;
+            if (ownerDetails) {
+                targetProvider = ownerDetails.owner;
+            } else {
+                // If no owner is found, set it on the rootProvider (the one that created this proxy)
+                targetProvider = rootProvider;
+            }
+
+            targetProvider.setData(fullPath, value);
+            return true; // Indicate that the assignment was successful
+        },
+
+        ownKeys(currentTarget) {
+            return rootProvider.getTopLevelDataKeys(path);
+        },
+
+        getOwnPropertyDescriptor(currentTarget, property) {
+            const fullPath = path ? `${path}.${property}` : property;
+            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+
+            if (ownerDetails) {
+                const config = ownerDetails.owner.getDataConfig(ownerDetails.propertyName);
+                if (config) {
+                    const value = config.get();
+                    return {
+                        value: Neo.isObject(value) ? createNestedProxy(rootProvider, fullPath) : value,
+                        writable: true,
+                        enumerable: true,
+                        configurable: true,
+                    };
+                }
+            }
+            return undefined; // Property not found
+        }
+    })
+}
+
+/**
+ * Creates a Proxy object that represents the merged, hierarchical data from a `state.Provider` chain.
+ * When a property is accessed through this proxy while an Effect is running, it automatically
+ * tracks the underlying core.Config instance as a dependency.
+ * @param {Neo.state.Provider} provider The starting state.Provider.
+ * @returns {Proxy}
+ */
+export function createHierarchicalDataProxy(provider) {
+    return createNestedProxy(provider, '')
+}

package/src/tab/header/EffectButton.mjs

@@ -0,0 +1,75 @@
+import EffectButton from '../../button/Effect.mjs';
+
+/**
+ * @class Neo.tab.header.EffectButton
+ * @extends Neo.button.Effect
+ */
+class EffectTabButton extends EffectButton {
+    static config = {
+        /**
+         * @member {String} className='Neo.tab.header.EffectButton'
+         * @protected
+         */
+        className: 'Neo.tab.header.EffectButton',
+        /**
+         * @member {String} ntype='tab-header-effect-button'
+         * @protected
+         */
+        ntype: 'tab-header-effect-button',
+        /**
+         * @member {String[]} baseCls=['neo-tab-header-button', 'neo-button']
+         */
+        baseCls: ['neo-tab-header-button', 'neo-button'],
+        /**
+         * Specify a role tag attribute for the vdom root.
+         * @member {String|null} role='tab'
+         */
+        role: 'tab',
+        /**
+         * @member {Boolean} useActiveTabIndicator_=true
+         */
+        useActiveTabIndicator_: true
+    }
+
+    /**
+     * Builds the top-level VDOM object.
+     * @returns {Object}
+     * @protected
+     */
+    getVdomConfig() {
+        let vdomConfig = super.getVdomConfig();
+
+        vdomConfig.role = this.role;
+
+        if (this.pressed) {
+            vdomConfig['aria-selected'] = true;
+        }
+
+        return vdomConfig;
+    }
+
+    /**
+     * Builds the array of child nodes (the 'cn' property).
+     * @returns {Object[]}
+     * @protected
+     */
+    getVdomChildren() {
+        let children = super.getVdomChildren();
+
+        children.push({
+            cls      : ['neo-tab-button-indicator'],
+            removeDom: !this.useActiveTabIndicator
+        });
+
+        return children;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    showRipple(data) {
+        !this.pressed && super.showRipple(data);
+    }
+}
+
+export default Neo.setupClass(EffectTabButton);

package/src/vdom/Helper.mjs

@@ -529,16 +529,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

@@ -78,7 +78,7 @@ class VNode {
                 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.

package/src/worker/App.mjs

@@ -45,11 +45,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/test/siesta/siesta.js

@@ -17,8 +17,40 @@ 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/CollectionBase.mjs',
     'tests/ManagerInstance.mjs',
     'tests/Rectangle.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 => {