@mintjamsinc/ichigojs 0.1.1 → 0.1.3

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.
@@ -7147,10 +7163,18 @@ class VBindings {
      * The change tracker, if any.
      */
     #onChange;
+    /**
+     * The logger instance.
+     */
+    #logger;
     /**
      * 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.
@@ -7158,6 +7182,10 @@ class VBindings {
     constructor(args = {}) {
         this.#parent = args.parent;
         this.#onChange = args.onChange;
+        this.#logger = args.vApplication?.logManager.getLogger('VBindings');
+        if (this.#logger?.isDebugEnabled) {
+            this.#logger.debug(`VBindings created. Parent: ${this.#parent ? 'yes' : 'no'}`);
+        }
         this.#local = new Proxy({}, {
             get: (obj, key) => {
                 if (Reflect.has(obj, key)) {
@@ -7178,14 +7206,37 @@ 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.#logger?.debug(`Binding changed: ${path}`);
+                            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 (Array.isArray(newValue)) {
+                    const cachedLength = this.#lengthCache.get(key);
+                    const currentLength = newValue.length;
+                    if (!hasChanged && cachedLength !== undefined && cachedLength !== currentLength) {
+                        hasChanged = true;
+                    }
+                    this.#lengthCache.set(key, currentLength);
+                }
+                if (hasChanged) {
+                    if (this.#logger?.isDebugEnabled) {
+                        const oldValueString = typeof oldValue === 'string' ? `"${oldValue}"` : JSON.stringify(oldValue) || 'undefined';
+                        const newValueString = typeof newValue === 'string' ? `"${newValue}"` : JSON.stringify(newValue) || 'undefined';
+                        const oldValuePreview = oldValueString.length > 100 ? `${oldValueString.substring(0, 100)}...` : oldValueString;
+                        const newValuePreview = newValueString.length > 100 ? `${newValueString.substring(0, 100)}...` : newValueString;
+                        this.#logger.debug(`Binding set on ${target === obj ? 'local' : 'parent'}: ${key}: ${oldValuePreview} -> ${newValuePreview}`);
+                    }
                     this.#changes.add(key);
                     this.#onChange?.(key);
                 }
@@ -7193,6 +7244,7 @@ class VBindings {
             },
             deleteProperty: (obj, key) => {
                 const result = Reflect.deleteProperty(obj, key);
+                this.#logger?.debug(`Binding deleted: ${key}`);
                 this.#changes.add(key);
                 this.#onChange?.(key);
                 return result;
@@ -7541,6 +7593,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 +7642,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 +7794,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 +7827,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 +7946,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 +7998,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 +8670,8 @@ class VForDirective {
             node: clone,
             vApplication: this.#vNode.vApplication,
             parentVNode: this.#vNode.parentVNode,
-            bindings
+            bindings,
+            dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
         });
         return vNode;
     }
@@ -8852,10 +8958,13 @@ class VModelDirective {
         }
         // .number modifier: convert to number
         if (this.#modifiers.has('number')) {
-            const parsed = Number(result);
-            // Only convert if it's a valid number
-            if (!isNaN(parsed)) {
-                result = parsed;
+            // Skip conversion if the value is empty string
+            if (result !== '') {
+                const parsed = Number(result);
+                // Only convert if it's a valid number
+                if (!isNaN(parsed)) {
+                    result = parsed;
+                }
             }
         }
         return result;
@@ -9383,49 +9492,105 @@ var LogLevel;
 })(LogLevel || (LogLevel = {}));
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * A simple logger class for virtual applications.
+ */
 class VLogger {
+    /** The name of the logger. */
     #name;
+    /** The log manager instance. */
     #logManager;
     constructor(name, logManager) {
         this.#name = name;
         this.#logManager = logManager;
     }
+    /**
+     * Indicates whether the debug level is enabled.
+     */
+    get isDebugEnabled() {
+        return [LogLevel.DEBUG].includes(this.#logManager.logLevel);
+    }
+    /**
+     * Indicates whether the info level is enabled.
+     */
+    get isInfoEnabled() {
+        return [LogLevel.DEBUG, LogLevel.INFO].includes(this.#logManager.logLevel);
+    }
+    /**
+     * Indicates whether the warn level is enabled.
+     */
+    get isWarnEnabled() {
+        return [LogLevel.DEBUG, LogLevel.INFO, LogLevel.WARN].includes(this.#logManager.logLevel);
+    }
+    /**
+     * Logs a debug message.
+     * @param message The message to log.
+     */
     debug(message) {
-        if (![LogLevel.DEBUG].includes(this.#logManager.logLevel)) {
+        if (!this.isDebugEnabled) {
             return;
         }
         console.debug(`[${this.#name}] ${LogLevel.DEBUG}: ${message}`);
     }
+    /**
+     * Logs an info message.
+     * @param message The message to log.
+     */
     info(message) {
-        if (![LogLevel.DEBUG, LogLevel.INFO].includes(this.#logManager.logLevel)) {
+        if (!this.isInfoEnabled) {
             return;
         }
         console.info(`[${this.#name}] ${LogLevel.INFO}: ${message}`);
     }
+    /**
+     * Logs a warn message.
+     * @param message The message to log.
+     */
     warn(message) {
-        if (![LogLevel.DEBUG, LogLevel.INFO, LogLevel.WARN].includes(this.#logManager.logLevel)) {
+        if (!this.isWarnEnabled) {
             return;
         }
         console.warn(`[${this.#name}] ${LogLevel.WARN}: ${message}`);
     }
+    /**
+     * Logs an error message.
+     * @param message The message to log.
+     */
     error(message) {
         console.error(`[${this.#name}] ${LogLevel.ERROR}: ${message}`);
     }
 }
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Manages loggers and their log levels.
+ */
 class VLogManager {
+    /** The current log level. */
     #logLevel;
+    /** A map of logger instances by name. */
     #loggers = new Map();
     constructor(logLevel = LogLevel.INFO) {
         this.#logLevel = logLevel;
     }
+    /**
+     * Sets the log level for all loggers.
+     * @param level The log level to set.
+     */
     set logLevel(level) {
         this.#logLevel = level;
     }
+    /**
+     * Gets the current log level.
+     */
     get logLevel() {
         return this.#logLevel;
     }
+    /**
+     * Gets a logger by name, creating it if it doesn't exist.
+     * @param name The name of the logger.
+     * @returns The logger instance.
+     */
     getLogger(name) {
         if (this.#loggers.has(name)) {
             return this.#loggers.get(name);
@@ -9595,9 +9760,10 @@ class VApplication {
     #initializeBindings() {
         // Create bindings with change tracking
         this.#bindings = new VBindings({
-            onChange: (key) => {
+            onChange: (identifier) => {
                 this.#scheduleUpdate();
-            }
+            },
+            vApplication: this
         });
         // Inject utility methods into bindings
         this.#bindings.set('$nextTick', (callback) => this.#nextTick(callback));
@@ -9659,6 +9825,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 +9849,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 +9867,7 @@ 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}`);
+                    allChanges.add(key);
                 }
             }
             catch (error) {
@@ -9704,7 +9879,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);
             }
         }