@mintjamsinc/ichigojs 0.1.1 → 0.1.3

package/dist/ichigo.umd.js

@@ -7050,34 +7050,46 @@
      */
     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') {
@@ -7085,7 +7097,7 @@
                         if (arrayMutationMethods.includes(key)) {
                             return function (...args) {
                                 const result = value.apply(this, args);
-                                onChange();
+                                onChange(path || undefined);
                                 return result;
                             };
                         }
@@ -7097,18 +7109,22 @@
                     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;
         }
         /**
@@ -7118,7 +7134,7 @@
          * @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.
@@ -7153,10 +7169,18 @@
          * 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.
@@ -7164,6 +7188,10 @@
         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)) {
@@ -7184,14 +7212,37 @@
                     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);
                     }
@@ -7199,6 +7250,7 @@
                 },
                 deleteProperty: (obj, key) => {
                     const result = Reflect.deleteProperty(obj, key);
+                    this.#logger?.debug(`Binding deleted: ${key}`);
                     this.#changes.add(key);
                     this.#onChange?.(key);
                     return result;
@@ -7547,6 +7599,11 @@
          * 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.
@@ -7591,6 +7648,7 @@
             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) {
@@ -7742,6 +7800,8 @@
             }
             // 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);
@@ -7773,6 +7833,29 @@
             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.
@@ -7869,24 +7952,46 @@
         /**
          * 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: () => {
@@ -7899,7 +8004,7 @@
                 });
             }
             // 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;
         }
@@ -8571,7 +8676,8 @@
                 node: clone,
                 vApplication: this.#vNode.vApplication,
                 parentVNode: this.#vNode.parentVNode,
-                bindings
+                bindings,
+                dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
             });
             return vNode;
         }
@@ -8858,10 +8964,13 @@
             }
             // .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;
@@ -9389,49 +9498,105 @@
     })(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);
@@ -9601,9 +9766,10 @@
         #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));
@@ -9665,6 +9831,15 @@
             }
             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
@@ -9680,7 +9855,7 @@
                 // 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;
                 }
@@ -9698,7 +9873,7 @@
                     // 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) {
@@ -9710,7 +9885,7 @@
             // 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);
                 }
             }