@mintjamsinc/ichigojs 0.1.40 → 0.1.42

package/dist/ichigo.cjs

@@ -7816,6 +7816,13 @@
          * This allows retrieving the source path of an object for computed property mapping.
          */
         static proxyPaths = new WeakMap();
+        /**
+         * A Map to store path aliases.
+         * Key: alias path (e.g., "editingNestedStep.steps")
+         * Value: source path (e.g., "routes[0].steps[0].steps")
+         * This allows mapping variable names to their actual source paths for dependency tracking.
+         */
+        static pathAliases = new Map();
         /**
          * Creates a reactive proxy for the given object.
          * The proxy will call the onChange callback whenever a property is modified.
@@ -7982,6 +7989,84 @@
             }
             return this.proxyPaths.get(obj);
         }
+        /**
+         * Registers a path alias.
+         * This is used when a variable is assigned to reference an existing reactive object.
+         * For example, when `editingNestedStep = routes[0].steps[0]`, this creates an alias
+         * so that changes to "routes[0].steps[0].steps" also match "editingNestedStep.steps".
+         *
+         * @param aliasPath The alias path (e.g., "editingNestedStep")
+         * @param sourcePath The source path (e.g., "routes[0].steps[0]")
+         */
+        static registerPathAlias(aliasPath, sourcePath) {
+            if (aliasPath && sourcePath && aliasPath !== sourcePath) {
+                this.pathAliases.set(aliasPath, sourcePath);
+            }
+        }
+        /**
+         * Unregisters a path alias.
+         *
+         * @param aliasPath The alias path to remove
+         */
+        static unregisterPathAlias(aliasPath) {
+            // Remove all aliases that start with the given path
+            for (const key of this.pathAliases.keys()) {
+                if (key === aliasPath || key.startsWith(aliasPath + '.') || key.startsWith(aliasPath + '[')) {
+                    this.pathAliases.delete(key);
+                }
+            }
+        }
+        /**
+         * Resolves an alias path to its source path.
+         * Also handles nested paths (e.g., "editingNestedStep.steps" -> "routes[0].steps[0].steps").
+         *
+         * @param aliasPath The alias path to resolve
+         * @returns The source path, or undefined if no alias exists
+         */
+        static resolvePathAlias(aliasPath) {
+            // Direct match
+            if (this.pathAliases.has(aliasPath)) {
+                return this.pathAliases.get(aliasPath);
+            }
+            // Check if this is a nested path of an aliased variable
+            // e.g., "editingNestedStep.steps" when "editingNestedStep" is aliased
+            for (const [alias, source] of this.pathAliases.entries()) {
+                if (aliasPath.startsWith(alias + '.') || aliasPath.startsWith(alias + '[')) {
+                    const suffix = aliasPath.substring(alias.length);
+                    return source + suffix;
+                }
+            }
+            return undefined;
+        }
+        /**
+         * Checks if a change path matches an identifier, considering path aliases.
+         * For example, if "editingNestedStep" is aliased to "routes[0].steps[0]",
+         * then a change to "routes[0].steps[0].steps" should match "editingNestedStep.steps".
+         *
+         * @param changePath The path that was changed (e.g., "routes[0].steps[0].steps")
+         * @param identifier The identifier to check (e.g., "editingNestedStep.steps")
+         * @returns True if the change path matches the identifier
+         */
+        static doesChangeMatchIdentifier(changePath, identifier) {
+            // Direct match
+            if (changePath === identifier) {
+                return true;
+            }
+            // Check if the identifier has an alias that matches
+            const resolvedIdentifier = this.resolvePathAlias(identifier);
+            if (resolvedIdentifier && changePath === resolvedIdentifier) {
+                return true;
+            }
+            // Check if change path starts with the resolved identifier
+            // (handles cases like array item changes)
+            if (resolvedIdentifier) {
+                if (changePath.startsWith(resolvedIdentifier + '.') ||
+                    changePath.startsWith(resolvedIdentifier + '[')) {
+                    return true;
+                }
+            }
+            return false;
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -8049,18 +8134,48 @@
                     }
                     let newValue = value;
                     if (typeof value === 'object' && value !== null) {
-                        // Wrap objects/arrays with reactive proxy, tracking the root 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);
-                            }
-                            if (!this.#suppressOnChange) {
-                                this.#onChange?.(changedPath);
+                        // Check if the value already has a path (it's an existing reactive proxy reference)
+                        const existingPath = ReactiveProxy.getPath(value);
+                        if (existingPath) {
+                            // Register a path alias so changes to the source path will match this identifier
+                            ReactiveProxy.registerPathAlias(key, existingPath);
+                            this.#logger?.debug(`Path alias registered: ${key} -> ${existingPath}`);
+                            // Keep the existing proxy as-is to preserve reactivity chain
+                            newValue = value;
+                        }
+                        else {
+                            // Before wrapping, check if any properties are existing ReactiveProxies
+                            // and register path aliases for them
+                            if (!Array.isArray(value)) {
+                                for (const propKey of Object.keys(value)) {
+                                    const propValue = value[propKey];
+                                    if (typeof propValue === 'object' && propValue !== null) {
+                                        const propPath = ReactiveProxy.getPath(propValue);
+                                        if (propPath) {
+                                            // Register alias: key.propKey -> propPath
+                                            ReactiveProxy.registerPathAlias(`${key}.${propKey}`, propPath);
+                                            this.#logger?.debug(`Property path alias registered: ${key}.${propKey} -> ${propPath}`);
+                                        }
+                                    }
+                                }
                             }
-                        }, key);
+                            // Wrap objects/arrays with reactive proxy, tracking the root 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);
+                                }
+                                if (!this.#suppressOnChange) {
+                                    this.#onChange?.(changedPath);
+                                }
+                            }, key);
+                        }
+                    }
+                    else if (value === null || value === undefined) {
+                        // When setting to null/undefined, unregister any path alias
+                        ReactiveProxy.unregisterPathAlias(key);
                     }
                     const oldValue = Reflect.get(target, key);
                     const result = Reflect.set(target, key, newValue);
@@ -8910,8 +9025,8 @@
             const changes = this.bindings?.changes || [];
             if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
                 // If this is a text node with a text evaluator, update its content if needed
-                // Check if any of the identifiers are in the changed identifiers
-                const changed = this.#textEvaluator.identifiers.some(id => changes.includes(id));
+                // Check if any of the identifiers are in the changed identifiers (considering path aliases)
+                const changed = this.#textEvaluator.identifiers.some(id => changes.some(change => ReactiveProxy.doesChangeMatchIdentifier(change, id)));
                 // If the text node has changed, update its content
                 if (changed) {
                     const text = this.#node;
@@ -8934,7 +9049,7 @@
                     }
                     // Prepare bindings for each preparer if relevant identifiers have changed
                     for (const preparer of this.#directiveManager.bindingsPreparers) {
-                        const changed = preparer.dependentIdentifiers.some(id => changes.includes(id));
+                        const changed = preparer.dependentIdentifiers.some(id => changes.some(change => ReactiveProxy.doesChangeMatchIdentifier(change, id)));
                         if (changed) {
                             preparer.prepareBindings();
                         }
@@ -8943,7 +9058,7 @@
                 // Apply DOM updaters from directives, if any
                 if (this.#directiveManager?.domUpdaters) {
                     for (const updater of this.#directiveManager.domUpdaters) {
-                        const changed = updater.dependentIdentifiers.some(id => changes.includes(id));
+                        const changed = updater.dependentIdentifiers.some(id => changes.some(change => ReactiveProxy.doesChangeMatchIdentifier(change, id)));
                         if (changed) {
                             updater.applyToDOM();
                         }
@@ -8951,7 +9066,7 @@
                 }
                 // Recursively update dependent virtual nodes
                 this.#dependents?.forEach(dependentNode => {
-                    const changed = dependentNode.dependentIdentifiers.some(id => changes.includes(id));
+                    const changed = dependentNode.dependentIdentifiers.some(id => changes.some(change => ReactiveProxy.doesChangeMatchIdentifier(change, id)));
                     if (changed) {
                         dependentNode.update();
                     }
@@ -12210,6 +12325,13 @@
             });
             // Initial rendering
             this.#vNode.update();
+            // Remove v-cloak attributes after mounting
+            // v-cloak is used to hide un-compiled template until the app is ready
+            // Usage: Add CSS rule "[v-cloak] { display: none; }" to hide elements with v-cloak
+            element.querySelectorAll('[v-cloak]').forEach(el => {
+                el.removeAttribute('v-cloak');
+            });
+            element.removeAttribute('v-cloak');
             this.#logger.info('Application mounted.');
         }
         /**