@mintjamsinc/ichigojs 0.1.1 → 0.1.2

package/dist/ichigo.esm.js

@@ -7044,34 +7044,46 @@ class VBindDirective {
  */
 class ReactiveProxy {
     /**
-     * A WeakMap to store the original target for each proxy.
-     * This allows us to avoid creating multiple proxies for the same object.
+     * A WeakMap to store the proxy for each target object and path combination.
+     * This prevents creating multiple proxies for the same object accessed from different paths.
      */
-    static proxyMap = new WeakMap();
+    static proxyCache = new WeakMap();
     /**
      * Creates a reactive proxy for the given object.
      * The proxy will call the onChange callback whenever a property is modified.
      *
      * @param target The object to make reactive.
-     * @param onChange Callback function to call when the object changes. Receives the changed key name.
+     * @param onChange Callback function to call when the object changes. Receives the full path of the changed property.
+     * @param path The current path in the object tree (used internally for nested objects).
      * @returns A reactive proxy of the target object.
      */
-    static create(target, onChange) {
+    static create(target, onChange, path = '') {
         // If the target is not an object or is null, return it as-is
         if (typeof target !== 'object' || target === null) {
             return target;
         }
-        // If this object already has a proxy, return the existing proxy
-        if (this.proxyMap.has(target)) {
-            return this.proxyMap.get(target);
+        // Check if we already have a proxy for this target with this path
+        let pathMap = this.proxyCache.get(target);
+        if (pathMap) {
+            const existingProxy = pathMap.get(path);
+            if (existingProxy) {
+                return existingProxy;
+            }
+        }
+        else {
+            pathMap = new Map();
+            this.proxyCache.set(target, pathMap);
         }
-        // Create the proxy
+        // Create the proxy with path captured in closure
         const proxy = new Proxy(target, {
             get(obj, key) {
                 const value = Reflect.get(obj, key);
                 // If the value is an object or array, make it reactive too
                 if (typeof value === 'object' && value !== null) {
-                    return ReactiveProxy.create(value, onChange);
+                    // Build the nested path
+                    const keyStr = String(key);
+                    const nestedPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                    return ReactiveProxy.create(value, onChange, nestedPath);
                 }
                 // For arrays, intercept mutation methods
                 if (Array.isArray(obj) && typeof value === 'function') {
@@ -7079,7 +7091,7 @@ class ReactiveProxy {
                     if (arrayMutationMethods.includes(key)) {
                         return function (...args) {
                             const result = value.apply(this, args);
-                            onChange();
+                            onChange(path || undefined);
                             return result;
                         };
                     }
@@ -7091,18 +7103,22 @@ class ReactiveProxy {
                 const result = Reflect.set(obj, key, value);
                 // Only trigger onChange if the value actually changed
                 if (oldValue !== value) {
-                    onChange(key);
+                    const keyStr = String(key);
+                    const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                    onChange(fullPath);
                 }
                 return result;
             },
             deleteProperty(obj, key) {
                 const result = Reflect.deleteProperty(obj, key);
-                onChange(key);
+                const keyStr = String(key);
+                const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                onChange(fullPath);
                 return result;
             }
         });
-        // Store the proxy so we can return it if requested again
-        this.proxyMap.set(target, proxy);
+        // Cache the proxy for this path
+        pathMap.set(path, proxy);
         return proxy;
     }
     /**
@@ -7112,7 +7128,7 @@ class ReactiveProxy {
      * @returns True if the object is a reactive proxy, false otherwise.
      */
     static isReactive(obj) {
-        return this.proxyMap.has(obj);
+        return this.proxyCache.has(obj);
     }
     /**
      * Unwraps a reactive proxy to get the original object.
@@ -7151,6 +7167,10 @@ class VBindings {
      * The set of changed identifiers.
      */
     #changes = new Set();
+    /**
+     * Cache for array lengths to detect length changes when the same object reference is used.
+     */
+    #lengthCache = new Map();
     /**
      * Creates a new instance of VBindings.
      * @param parent The parent bindings, if any.
@@ -7178,14 +7198,29 @@ class VBindings {
                 let newValue = value;
                 if (typeof value === 'object' && value !== null) {
                     // Wrap objects/arrays with reactive proxy, tracking the root key
-                    newValue = ReactiveProxy.create(value, () => {
-                        this.#changes.add(key);
-                        this.#onChange?.(key);
-                    });
+                    newValue = ReactiveProxy.create(value, (changedPath) => {
+                        let path = '';
+                        for (const part of changedPath?.split('.') || []) {
+                            path = path ? `${path}.${part}` : part;
+                            this.#changes.add(path);
+                        }
+                        this.#onChange?.(changedPath);
+                    }, key);
                 }
                 const oldValue = Reflect.get(target, key);
                 const result = Reflect.set(target, key, newValue);
-                if ((oldValue !== newValue) || (typeof oldValue === 'object' || typeof newValue === 'object')) {
+                // Detect changes
+                let hasChanged = oldValue !== newValue;
+                // Special handling for arrays: check length changes even if same object reference
+                if (!hasChanged && Array.isArray(newValue)) {
+                    const cachedLength = this.#lengthCache.get(key);
+                    const currentLength = newValue.length;
+                    if (cachedLength !== undefined && cachedLength !== currentLength) {
+                        hasChanged = true;
+                    }
+                    this.#lengthCache.set(key, currentLength);
+                }
+                if (hasChanged) {
                     this.#changes.add(key);
                     this.#onChange?.(key);
                 }
@@ -7541,6 +7576,11 @@ class VNode {
      * The data bindings associated with this virtual node, if any.
      */
     #bindings;
+    /**
+     * The initial set of identifiers that this node depends on.
+     * This is optional and may be undefined if there are no dependent identifiers.
+     */
+    #initDependentIdentifiers;
     /**
      * An evaluator for text nodes that contain expressions in {{...}}.
      * This is used to dynamically update the text content based on data bindings.
@@ -7585,6 +7625,7 @@ class VNode {
         this.#nodeName = args.node.nodeName;
         this.#parentVNode = args.parentVNode;
         this.#bindings = args.bindings;
+        this.#initDependentIdentifiers = args.dependentIdentifiers;
         this.#parentVNode?.addChild(this);
         // If the node is a text node, check for expressions and create a text evaluator
         if (this.#nodeType === Node.TEXT_NODE) {
@@ -7736,6 +7777,8 @@ class VNode {
         }
         // Collect identifiers from text evaluator and directives
         const ids = [];
+        // Include initial dependent identifiers, if any
+        ids.push(...this.#initDependentIdentifiers ?? []);
         // If this is a text node with a text evaluator, include its identifiers
         if (this.#textEvaluator) {
             ids.push(...this.#textEvaluator.identifiers);
@@ -7767,6 +7810,29 @@ class VNode {
         this.#preparableIdentifiers = preparableIdentifiers.length === 0 ? [] : [...new Set(preparableIdentifiers)];
         return this.#preparableIdentifiers;
     }
+    /**
+     * The DOM path of this virtual node.
+     * This is a string representation of the path from the root to this node,
+     * using the node names and their indices among siblings with the same name.
+     * For example: "DIV[0]/SPAN[1]/#text[0]"
+     * @return The DOM path as a string.
+     */
+    get domPath() {
+        const path = [];
+        let node = this;
+        while (node) {
+            if (node.parentVNode && node.parentVNode.childVNodes) {
+                const siblings = node.parentVNode.childVNodes.filter(v => v.nodeName === node?.nodeName);
+                const index = siblings.indexOf(node);
+                path.unshift(`${node.nodeName}[${index}]`);
+            }
+            else {
+                path.unshift(node.nodeName);
+            }
+            node = node.parentVNode;
+        }
+        return path.join('/');
+    }
     /**
      * Updates the virtual node and its children based on the current bindings.
      * This method evaluates any expressions in text nodes and applies effectors from directives.
@@ -7863,24 +7929,46 @@ class VNode {
     /**
      * Adds a dependent virtual node that relies on this node's bindings.
      * @param dependent The dependent virtual node to add.
+     * @param dependentIdentifiers The identifiers that the dependent node relies on.
+     * If not provided, the dependent node's own identifiers will be used.
      * @returns A list of closers to unregister the dependency, or undefined if no dependency was added.
      */
-    addDependent(dependent) {
+    addDependent(dependent, dependentIdentifiers = undefined) {
         // List of closers to unregister the dependency
         const closers = [];
-        // Check if any of the dependent node's identifiers are in this node's identifiers
-        let hasIdentifier = dependent.dependentIdentifiers.some(id => this.preparableIdentifiers.includes(id));
-        if (!hasIdentifier) {
-            hasIdentifier = dependent.dependentIdentifiers.some(id => this.#bindings?.has(id, false) ?? false);
+        // If dependent identifiers are not provided, use the dependent node's own identifiers
+        if (!dependentIdentifiers) {
+            dependentIdentifiers = [...dependent.dependentIdentifiers];
+        }
+        // Prepare alternative identifiers by stripping array indices (e.g., "items[0]" -> "items")
+        const allDeps = new Set();
+        dependentIdentifiers.forEach(id => {
+            allDeps.add(id);
+            const idx = id.indexOf('[');
+            if (idx !== -1) {
+                allDeps.add(id.substring(0, idx));
+            }
+        });
+        // Get this node's identifiers
+        const thisIds = [...this.preparableIdentifiers];
+        if (this.#bindings) {
+            thisIds.push(...this.#bindings?.raw ? Object.keys(this.#bindings.raw) : []);
         }
         // If the dependent node has an identifier in this node's identifiers, add it as a dependency
-        if (hasIdentifier) {
+        if ([...allDeps].some(id => thisIds.includes(id))) {
             // If the dependencies list is not initialized, create it
             if (!this.#dependents) {
                 this.#dependents = [];
             }
             // Add the dependent node to the list
             this.#dependents.push(dependent);
+            // Remove the matched identifiers from the dependent node's identifiers to avoid duplicate dependencies
+            thisIds.forEach(id => {
+                const idx = dependentIdentifiers.indexOf(id);
+                if (idx !== -1) {
+                    dependentIdentifiers.splice(idx, 1);
+                }
+            });
             // Create a closer to unregister the dependency
             closers.push({
                 close: () => {
@@ -7893,7 +7981,7 @@ class VNode {
             });
         }
         // Recursively add the dependency to the parent node, if any
-        this.#parentVNode?.addDependent(dependent)?.forEach(closer => closers.push(closer));
+        this.#parentVNode?.addDependent(dependent, dependentIdentifiers)?.forEach(closer => closers.push(closer));
         // Return a closer to unregister the dependency
         return closers.length > 0 ? closers : undefined;
     }
@@ -8565,7 +8653,8 @@ class VForDirective {
             node: clone,
             vApplication: this.#vNode.vApplication,
             parentVNode: this.#vNode.parentVNode,
-            bindings
+            bindings,
+            dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
         });
         return vNode;
     }
@@ -9595,7 +9684,7 @@ class VApplication {
     #initializeBindings() {
         // Create bindings with change tracking
         this.#bindings = new VBindings({
-            onChange: (key) => {
+            onChange: (identifier) => {
                 this.#scheduleUpdate();
             }
         });
@@ -9659,6 +9748,15 @@ class VApplication {
         }
         const computed = new Set();
         const processing = new Set();
+        // Gather all changed identifiers, including parent properties for array items
+        const allChanges = new Set();
+        this.#bindings?.changes.forEach(id => {
+            allChanges.add(id);
+            const idx = id.indexOf('[');
+            if (idx !== -1) {
+                allChanges.add(id.substring(0, idx));
+            }
+        });
         // Helper function to recursively compute a property
         const compute = (key) => {
             // Skip if already computed in this update cycle
@@ -9674,7 +9772,7 @@ class VApplication {
             // Get the dependencies for this computed property
             const deps = this.#computedDependencies[key] || [];
             // If none of the dependencies have changed, skip recomputation
-            if (!deps.some(dep => this.#bindings?.changes.includes(dep))) {
+            if (!deps.some(dep => allChanges.has(dep))) {
                 computed.add(key);
                 return;
             }
@@ -9692,7 +9790,13 @@ class VApplication {
                 // Track if the computed value actually changed
                 if (oldValue !== newValue) {
                     this.#bindings?.set(key, newValue);
-                    this.#logger.debug(`Computed property '${key}' changed: ${oldValue} -> ${newValue}`);
+                    this.#bindings?.changes.forEach(id => {
+                        allChanges.add(id);
+                        const idx = id.indexOf('[');
+                        if (idx !== -1) {
+                            allChanges.add(id.substring(0, idx));
+                        }
+                    });
                 }
             }
             catch (error) {
@@ -9704,7 +9808,7 @@ class VApplication {
         // Find all computed properties that need to be recomputed
         for (const [key, deps] of Object.entries(this.#computedDependencies)) {
             // Check if any dependency has changed
-            if (deps.some(dep => this.#bindings?.changes.includes(dep))) {
+            if (deps.some(dep => allChanges.has(dep))) {
                 compute(key);
             }
         }