Feature Request: Enhance State Provider with Non-Leaf and Batched Reactivity #7082

Author: tobiu

src/state/Provider.mjs

@@ -2,6 +2,7 @@ import Base                          from '../core/Base.mjs';
 import ClassSystemUtil               from '../util/ClassSystem.mjs';
 import Config                        from '../core/Config.mjs';
 import Effect                        from '../core/Effect.mjs';
+import EffectBatchManager            from '../core/EffectBatchManager.mjs';
 import Observable                    from '../core/Observable.mjs';
 import {createHierarchicalDataProxy} from './createHierarchicalDataProxy.mjs';
 import {isDescriptor}                from '../core/ConfigSymbols.mjs';
@@ -449,30 +450,33 @@ class Provider extends Base {
                 }
             }
         }
-        return Array.from(keys);
+
+        return Array.from(keys)
     }
 
     /**
-     * Internal method to avoid code redundancy.
-     * Use setData() or setDataAtSameLevel() instead.
+     * This is the core method for setting data, providing a single entry point for all data modifications.
+     * It handles multiple scenarios:
+     * 1.  **Object-based updates:** If `key` is an object, it recursively calls itself for each key-value pair.
+     * 2.  **Data Records:** If `value` is a `Neo.data.Record`, it is treated as an atomic value and set directly.
+     * 3.  **Bubbling Reactivity:** For a given key (e.g., 'user.name'), it sets the leaf value and then "bubbles up"
+     *     the change, creating new parent objects (e.g., 'user') to ensure that effects depending on any part
+     *     of the path are triggered.
      *
-     * This method handles setting data properties, including nested paths and Neo.data.Record instances.
-     * It determines the owning StateProvider in the hierarchy and delegates to #setConfigValue.
+     * All updates are batched by the public `setData` methods to ensure effects run only once.
+     * Use `setData()` or `setDataAtSameLevel()` instead of calling this method directly.
      *
-     * Passing an originStateProvider param will try to set each key on the closest property match
-     * inside the parent stateProvider chain => setData()
-     * Not passing it will set all values on the stateProvider where the method gets called => setDataAtSameLevel()
-     * @param {Object|String} key
-     * @param {*} value
-     * @param {Neo.state.Provider} [originStateProvider]
+     * @param {Object|String} key The property to set, or an object of key-value pairs.
+     * @param {*} value The new value.
+     * @param {Neo.state.Provider} [originStateProvider] The provider to start the search from for hierarchical updates.
      * @protected
      */
     internalSetData(key, value, originStateProvider) {
         const me = this;
 
         // If the value is a Neo.data.Record, treat it as an atomic value
         // and set it directly without further recursive processing of its properties.
-        if (Neo.isObject(value) && value.isRecord) {
+        if (Neo.isRecord(value)) {
             const
                 ownerDetails   = me.getOwnerOfDataProperty(key),
                 targetProvider = ownerDetails ? ownerDetails.owner : (originStateProvider || me);
@@ -481,42 +485,40 @@ class Provider extends Base {
             return
         }
 
-        // If the key is an object, iterate over its entries and recursively call internalSetData.
-        // This handles setting multiple properties at once (e.g., setData({prop1: val1, prop2: val2})).
         if (Neo.isObject(key)) {
             Object.entries(key).forEach(([dataKey, dataValue]) => {
                 me.internalSetData(dataKey, dataValue, originStateProvider)
             });
             return
         }
 
-        // Handle single key/value pairs, including nested paths (e.g., 'user.firstName').
         const
             ownerDetails   = me.getOwnerOfDataProperty(key),
-            targetProvider = ownerDetails ? ownerDetails.owner : (originStateProvider || me),
-            pathParts      = key.split('.');
-
-        let currentPath     = '',
-            currentConfig   = null,
-            currentProvider = targetProvider;
-
-        for (let i = 0; i < pathParts.length; i++) {
-            const part = pathParts[i];
-            currentPath = currentPath ? `${currentPath}.${part}` : part;
-            currentConfig = currentProvider.getDataConfig(currentPath);
-
-            if (i === pathParts.length - 1) { // Last part of the path
-                // Set the value for the final property in the path.
-                me.#setConfigValue(currentProvider, currentPath, value, null)
-            } else { // Intermediate part of the path
-                // Ensure intermediate paths exist as objects. If not, create them.
-                // If an intermediate path exists but is not an object, overwrite it with an empty object.
-                if (!currentConfig) {
-                    currentConfig = new Config({}); // Create an empty object config
-                    currentProvider.#dataConfigs[currentPath] = currentConfig
-                } else if (!Neo.isObject(currentConfig.get())) {
-                    currentConfig.set({})
+            targetProvider = ownerDetails ? ownerDetails.owner : (originStateProvider || me);
+
+        me.#setConfigValue(targetProvider, key, value, null);
+
+        // Bubble up the change to parent configs to trigger their effects
+        let path        = key,
+            latestValue = value;
+
+        while (path.includes('.')) {
+            const leafKey = path.split('.').pop();
+            path = path.substring(0, path.lastIndexOf('.'));
+
+            const parentConfig = targetProvider.getDataConfig(path);
+
+            if (parentConfig) {
+                const oldParentValue = parentConfig.get();
+                if (Neo.isObject(oldParentValue)) {
+                    const newParentValue = { ...oldParentValue, [leafKey]: latestValue };
+                    parentConfig.set(newParentValue);
+                    latestValue = newParentValue;
+                } else {
+                    break // Stop if parent is not an object
                 }
+            } else {
+                break // Stop if parent config does not exist
             }
         }
     }
@@ -622,21 +624,33 @@ class Provider extends Base {
     /**
      * The method will assign all values to the closest stateProvider where it finds an existing key.
      * In case no match is found inside the parent chain, a new data property will get generated.
+     *
+     * All updates within a single call are batched to ensure that reactive effects (bindings and formulas)
+     * are run only once.
+     *
      * @param {Object|String} key
      * @param {*} value
      */
     setData(key, value) {
-        this.internalSetData(key, value, this)
+        EffectBatchManager.startBatch();
+        this.internalSetData(key, value, this);
+        EffectBatchManager.endBatch()
     }
 
     /**
      * Use this method instead of setData() in case you want to enforce
      * setting all keys on this instance instead of looking for matches inside parent stateProviders.
+     *
+     * All updates within a single call are batched to ensure that reactive effects (bindings and formulas)
+     * are run only once.
+     *
      * @param {Object|String} key
      * @param {*} value
      */
     setDataAtSameLevel(key, value) {
-        this.internalSetData(key, value)
+        EffectBatchManager.startBatch();
+        this.internalSetData(key, value);
+        EffectBatchManager.endBatch()
     }
 }
 

src/state/createHierarchicalDataProxy.mjs

@@ -22,7 +22,7 @@ function createNestedProxy(rootProvider, path) {
             // 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);
+                return Reflect.get(currentTarget, property)
             }
 
             // Only allow string or number properties to proceed as data paths.
@@ -35,13 +35,13 @@ function createNestedProxy(rootProvider, path) {
                 return new Proxy({}, {
                     get(target, storeName) {
                         if (typeof storeName === 'symbol' || storeName === '__REFADR__') {
-                            return Reflect.get(target, storeName);
+                            return Reflect.get(target, storeName)
                         }
                         // Delegate to the StateProvider's getStore method for hierarchical resolution
                         // Accessing store.count later will register the dependency via the Config system
-                        return rootProvider.getStore(storeName);
+                        return rootProvider.getStore(storeName)
                     }
-                });
+                })
             }
 
             const fullPath = path ? `${path}.${property}` : property;
@@ -55,17 +55,15 @@ function createNestedProxy(rootProvider, path) {
                     config                = owner.getDataConfig(propertyName);
 
                 if (config) {
-                    const activeEffect = EffectManager.getActiveEffect();
-                    if (activeEffect) {
-                        activeEffect.addDependency(config);
-                    }
+                    EffectManager.getActiveEffect()?.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') {
+                    if (Neo.isObject(value)) {
                         return createNestedProxy(rootProvider, fullPath)
                     }
-                    return value;
+
+                    return value
                 }
             }
 
@@ -76,52 +74,54 @@ function createNestedProxy(rootProvider, path) {
                 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
+            // 3. If it's neither a data property nor a path to one, it doesn't exist.
+            //    Returning undefined ensures that chained accesses (e.g., data.nonexistent.property) fail gracefully.
         },
 
         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);
+                return Reflect.set(currentTarget, property, value)
             }
 
-            const fullPath = path ? `${path}.${property}` : property;
-            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
-
+            const
+                fullPath     = path ? `${path}.${property}` : property,
+                ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
             let targetProvider;
+
             if (ownerDetails) {
-                targetProvider = ownerDetails.owner;
+                targetProvider = ownerDetails.owner
             } else {
                 // If no owner is found, set it on the rootProvider (the one that created this proxy)
-                targetProvider = rootProvider;
+                targetProvider = rootProvider
             }
 
             targetProvider.setData(fullPath, value);
-            return true; // Indicate that the assignment was successful
+            return true // Indicate that the assignment was successful
         },
 
         ownKeys(currentTarget) {
-            return rootProvider.getTopLevelDataKeys(path);
+            return rootProvider.getTopLevelDataKeys(path)
         },
 
         getOwnPropertyDescriptor(currentTarget, property) {
-            const fullPath = path ? `${path}.${property}` : property;
-            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+            const
+                fullPath     = path ? `${path}.${property}` : property,
+                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,
-                    };
+                        value       : Neo.isObject(value) ? createNestedProxy(rootProvider, fullPath) : value,
+                        writable    : true,
+                        enumerable  : true,
+                        configurable: true
+                    }
                 }
             }
-            return undefined; // Property not found
         }
     })
 }

test/siesta/siesta.js

@@ -48,7 +48,8 @@ project.plan(
         group: 'state',
         items: [
             'tests/state/createHierarchicalDataProxy.mjs',
-            'tests/state/Provider.mjs'
+            'tests/state/Provider.mjs',
+            'tests/state/ProviderNestedDataConfigs.mjs'
         ]
     },
     'tests/CollectionBase.mjs',