@mintjamsinc/ichigojs 0.1.32 → 0.1.34

package/dist/ichigo.cjs

@@ -6734,6 +6734,70 @@
                         }
                     }
                 }
+                else if (node.type === 'MemberExpression') {
+                    // Reconstruct chain parts from a MemberExpression (e.g. a.b.c)
+                    const parts = [];
+                    let cur = node;
+                    let stop = false;
+                    while (cur && !stop) {
+                        // property part (right side)
+                        if (cur.property) {
+                            if (!cur.computed && cur.property.type === 'Identifier') {
+                                parts.unshift(cur.property.name);
+                            }
+                            else if (cur.computed && cur.property.type === 'Literal') {
+                                parts.unshift(String(cur.property.value));
+                            }
+                            else if (cur.computed && cur.property.type === 'Identifier') {
+                                // e.g. obj[prop] -> include the prop identifier (it will also be added separately)
+                                parts.unshift(cur.property.name);
+                            }
+                            else {
+                                // unknown property shape (e.g. expression) — stop adding chain here
+                                // inner expressions will be visited separately by walk.full
+                                stop = true;
+                                break;
+                            }
+                        }
+                        // object part (left side)
+                        if (cur.object) {
+                            if (cur.object.type === 'Identifier') {
+                                parts.unshift(cur.object.name);
+                                break;
+                            }
+                            else if (cur.object.type === 'ThisExpression') {
+                                // For `this.x` or `this.a.b` we don't want to include 'this' itself.
+                                // Stop unwrapping here; we'll drop a leading 'this' later.
+                                break;
+                            }
+                            else if (cur.object.type === 'MemberExpression') {
+                                // continue unwrapping
+                                cur = cur.object;
+                            }
+                            else {
+                                // other object types (CallExpression, etc.) — stop here
+                                stop = true;
+                                break;
+                            }
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    if (parts.length > 0) {
+                        // Add progressive chains: 'a', 'a.b', 'a.b.c'
+                        for (let i = 0; i < parts.length; i++) {
+                            const chain = parts.slice(0, i + 1).join('.');
+                            identifiers.add(chain);
+                            // Also apply functionDependencies lookup for the chain key
+                            if (functionDependencies[chain]) {
+                                for (const dependency of functionDependencies[chain]) {
+                                    identifiers.add(dependency);
+                                }
+                            }
+                        }
+                    }
+                }
             });
             return Array.from(identifiers);
         }
@@ -6939,6 +7003,8 @@
          * The identifiers extracted from the expression.
          */
         identifiers;
+        // The original extracted identifiers (may include member chains like 'a.b')
+        originalIdentifiers;
         /**
          * The bindings to use for evaluating the expression.
          */
@@ -6954,10 +7020,11 @@
         /**
          * Private constructor. Use ExpressionEvaluator.create() to create instances.
          */
-        constructor(expression, bindings, identifiers, evaluatorFunc, additionalContext) {
+        constructor(expression, bindings, identifiers, originalIdentifiers, evaluatorFunc, additionalContext) {
             this.expression = expression;
             this.bindings = bindings;
             this.identifiers = identifiers;
+            this.originalIdentifiers = originalIdentifiers;
             this.evaluatorFunc = evaluatorFunc;
             this.additionalContext = additionalContext;
         }
@@ -6971,12 +7038,22 @@
          * @returns An ExpressionEvaluator instance.
          */
         static create(expression, bindings, functionDependencies, options) {
-            // Extract identifiers from the expression
-            const identifiers = ExpressionUtils.extractIdentifiers(expression, functionDependencies);
+            // Extract identifiers from the expression (may include member chains like 'a.b')
+            const extractedIdentifiers = ExpressionUtils.extractIdentifiers(expression, functionDependencies);
+            // For compilation we must only pass simple identifier names (no dots).
+            // Use the base (left-most) segment of member chains and preserve order.
+            const baseIdentifiers = [];
+            for (const id of extractedIdentifiers) {
+                const base = id.split('.')[0];
+                if (!baseIdentifiers.includes(base)) {
+                    baseIdentifiers.push(base);
+                }
+            }
             // Apply custom rewrite if provided (used by VOnDirective)
             let processedExpression = expression;
             if (options?.rewriteExpression) {
-                processedExpression = options.rewriteExpression(expression, identifiers);
+                // Pass the original extracted identifiers (may include member chains)
+                processedExpression = options.rewriteExpression(expression, extractedIdentifiers);
             }
             // Build cache key including options that affect compilation
             const cacheKey = JSON.stringify({
@@ -6986,12 +7063,12 @@
             // Check cache
             let evaluatorFunc = this.cache.get(cacheKey);
             if (!evaluatorFunc) {
-                // Compile the expression
-                evaluatorFunc = this.compileExpression(processedExpression, identifiers, options);
+                // Compile the expression using base identifiers (no dots)
+                evaluatorFunc = this.compileExpression(processedExpression, baseIdentifiers, options);
                 // Cache the compiled function
                 this.cache.set(cacheKey, evaluatorFunc);
             }
-            return new ExpressionEvaluator(expression, bindings, identifiers, evaluatorFunc, options?.additionalContext);
+            return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, options?.additionalContext);
         }
         /**
          * Compiles an expression into a function.
@@ -7002,7 +7079,7 @@
          * @returns A compiled function.
          */
         static compileExpression(expression, identifiers, options) {
-            // Build parameter list: globals first, then identifiers, then additional context
+            // Build parameter list: globals first, then identifiers (base names), then additional context
             const params = [
                 ...Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST),
                 ...identifiers
@@ -7059,7 +7136,8 @@
          * Gets the list of identifiers extracted from the expression.
          */
         get dependentIdentifiers() {
-            return this.identifiers;
+            // Return the original extracted identifiers (may include member chains like 'a.b')
+            return this.originalIdentifiers;
         }
         /**
          * Clears the expression cache.
@@ -7624,6 +7702,11 @@
          * These objects will not be wrapped with Proxy.
          */
         static rawObjects = new WeakSet();
+        /**
+         * A WeakMap to store the path for each proxy object.
+         * This allows retrieving the source path of an object for computed property mapping.
+         */
+        static proxyPaths = new WeakMap();
         /**
          * Creates a reactive proxy for the given object.
          * The proxy will call the onChange callback whenever a property is modified.
@@ -7722,6 +7805,10 @@
             pathMap.set(path, proxy);
             // Track that this proxy wraps the target to prevent double-wrapping
             this.proxyToTarget.set(proxy, target);
+            // Store the path for this proxy (for computed property mapping)
+            if (path) {
+                this.proxyPaths.set(proxy, path);
+            }
             return proxy;
         }
         /**
@@ -7771,6 +7858,21 @@
         static isRaw(obj) {
             return typeof obj === 'object' && obj !== null && this.rawObjects.has(obj);
         }
+        /**
+         * Gets the source path for a proxy object.
+         * This is used to map computed property values back to their source paths.
+         * For example, if a computed property returns `model.elements[0]`,
+         * this method returns "model.elements[0]" for that object.
+         *
+         * @param obj The proxy object to get the path for.
+         * @returns The source path, or undefined if not found.
+         */
+        static getPath(obj) {
+            if (typeof obj !== 'object' || obj === null) {
+                return undefined;
+            }
+            return this.proxyPaths.get(obj);
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -7977,6 +8079,15 @@
                 this.#suppressOnChange = false;
             }
         }
+        /**
+         * Manually adds an identifier to the set of changed identifiers.
+         * This is useful for computed properties that need to mark themselves as changed
+         * without triggering a new update cycle.
+         * @param key The identifier to mark as changed.
+         */
+        markChanged(key) {
+            this.#changes.add(key);
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -8277,12 +8388,21 @@
             const evaluators = matches.map(match => {
                 const expression = match[1].trim();
                 const ids = ExpressionUtils.extractIdentifiers(expression, functionDependencies);
-                // Gather identifiers
+                // Keep chain-style identifiers (a, a.b, a.b.c) for metadata
                 this.#identifiers.push(...ids.filter(id => !this.#identifiers.includes(id)));
-                const args = ids.join(", ");
+                // Build base parameter names (no dots), preserving order of first appearance
+                const baseArgs = [];
+                for (const id of ids) {
+                    const base = id.split('.')[0];
+                    if (!baseArgs.includes(base)) {
+                        baseArgs.push(base);
+                    }
+                }
+                const args = baseArgs.join(", ");
                 const funcBody = `return (${expression});`;
                 return {
                     ids,
+                    baseArgs,
                     func: new Function(args, funcBody)
                 };
             });
@@ -8290,17 +8410,13 @@
             this.#evaluate = (bindings) => {
                 let result = text;
                 evaluators.forEach((evaluator, i) => {
-                    // Gather the current values of the identifiers from the bindings
-                    // Fall back to global objects if not found in bindings
-                    const values = evaluator.ids.map(id => {
-                        const value = bindings.get(id);
-                        if (value !== undefined) {
+                    // Build values for baseArgs (no dots) in the same order as function parameters
+                    const values = evaluator.baseArgs.map((name) => {
+                        const value = bindings.get(name);
+                        if (value !== undefined)
                             return value;
-                        }
-                        // Check if it's a global object
-                        if (id in GLOBAL_OBJECTS) {
-                            return GLOBAL_OBJECTS[id];
-                        }
+                        if (name in GLOBAL_OBJECTS)
+                            return GLOBAL_OBJECTS[name];
                         return undefined;
                     });
                     // Evaluate the expression and replace {{...}} in the text
@@ -10104,10 +10220,16 @@
                 // Evaluate the options expression
                 let options;
                 if (optionsDirective && optionsDirective.expression) {
-                    // Evaluate the options expression
+                    // Evaluate the options expression using base identifiers (no dots)
                     const identifiers = optionsDirective.dependentIdentifiers;
-                    const values = identifiers.map(id => this.#vNode.bindings?.get(id));
-                    const args = identifiers.join(", ");
+                    const baseArgs = [];
+                    for (const id of identifiers) {
+                        const base = id.split('.')[0];
+                        if (!baseArgs.includes(base))
+                            baseArgs.push(base);
+                    }
+                    const values = baseArgs.map(name => this.#vNode.bindings?.get(name));
+                    const args = baseArgs.join(", ");
                     const funcBody = `return (${optionsDirective.expression});`;
                     const func = new Function(args, funcBody);
                     options = func(...values);
@@ -10180,8 +10302,14 @@
                 }
                 // For inline expressions, evaluate normally
                 // Note: inline expressions receive entries and $ctx as parameters
-                const values = identifiers.map(id => vNode.bindings?.get(id));
-                const args = [...identifiers, 'entries', '$ctx'].join(", ");
+                const baseArgs = [];
+                for (const id of identifiers) {
+                    const base = id.split('.')[0];
+                    if (!baseArgs.includes(base))
+                        baseArgs.push(base);
+                }
+                const values = baseArgs.map(name => vNode.bindings?.get(name));
+                const args = [...baseArgs, 'entries', '$ctx'].join(", ");
                 const funcBody = `return (${expression});`;
                 const func = new Function(args, funcBody);
                 return func.call(bindings?.raw, ...values, entries, $ctx);
@@ -11004,10 +11132,16 @@
                 // Evaluate the options expression
                 let options;
                 if (optionsDirective && optionsDirective.expression) {
-                    // Evaluate the options expression
+                    // Evaluate the options expression using base identifiers (no dots)
                     const identifiers = optionsDirective.dependentIdentifiers;
-                    const values = identifiers.map(id => this.#vNode.bindings?.get(id));
-                    const args = identifiers.join(", ");
+                    const baseArgs = [];
+                    for (const id of identifiers) {
+                        const base = id.split('.')[0];
+                        if (!baseArgs.includes(base))
+                            baseArgs.push(base);
+                    }
+                    const values = baseArgs.map(name => this.#vNode.bindings?.get(name));
+                    const args = baseArgs.join(", ");
                     const funcBody = `return (${optionsDirective.expression});`;
                     const func = new Function(args, funcBody);
                     options = func(...values);
@@ -11088,8 +11222,14 @@
                 }
                 // For inline expressions, evaluate normally
                 // Note: inline expressions receive entries, observer, options, and $ctx as parameters
-                const values = identifiers.map(id => vNode.bindings?.get(id));
-                const args = [...identifiers, 'entries', 'observer', 'options', '$ctx'].join(", ");
+                const baseArgs = [];
+                for (const id of identifiers) {
+                    const base = id.split('.')[0];
+                    if (!baseArgs.includes(base))
+                        baseArgs.push(base);
+                }
+                const values = baseArgs.map(name => vNode.bindings?.get(name));
+                const args = [...baseArgs, 'entries', 'observer', 'options', '$ctx'].join(", ");
                 const funcBody = `return (${expression});`;
                 const func = new Function(args, funcBody);
                 return func.call(bindings?.raw, ...values, entries, observer, options, $ctx);
@@ -11213,10 +11353,16 @@
                 // Evaluate the options expression
                 let options;
                 if (optionsDirective && optionsDirective.expression) {
-                    // Evaluate the options expression
+                    // Evaluate the options expression using base identifiers (no dots)
                     const identifiers = optionsDirective.dependentIdentifiers;
-                    const values = identifiers.map(id => this.#vNode.bindings?.get(id));
-                    const args = identifiers.join(", ");
+                    const baseArgs = [];
+                    for (const id of identifiers) {
+                        const base = id.split('.')[0];
+                        if (!baseArgs.includes(base))
+                            baseArgs.push(base);
+                    }
+                    const values = baseArgs.map(name => this.#vNode.bindings?.get(name));
+                    const args = baseArgs.join(", ");
                     const funcBody = `return (${optionsDirective.expression});`;
                     const func = new Function(args, funcBody);
                     options = func(...values);
@@ -11289,8 +11435,14 @@
                 }
                 // For inline expressions, evaluate normally
                 // Note: inline expressions receive entries and $ctx as parameters
-                const values = identifiers.map(id => vNode.bindings?.get(id));
-                const args = [...identifiers, 'entries', '$ctx'].join(", ");
+                const baseArgs = [];
+                for (const id of identifiers) {
+                    const base = id.split('.')[0];
+                    if (!baseArgs.includes(base))
+                        baseArgs.push(base);
+                }
+                const values = baseArgs.map(name => vNode.bindings?.get(name));
+                const args = [...baseArgs, 'entries', '$ctx'].join(", ");
                 const funcBody = `return (${expression});`;
                 const func = new Function(args, funcBody);
                 return func.call(bindings?.raw, ...values, entries, $ctx);
@@ -11887,6 +12039,12 @@
          * A dictionary mapping computed property names to their dependencies.
          */
         #computedDependencies;
+        /**
+         * A map tracking source paths for computed property values.
+         * Maps source path (e.g., "model.elements[0]") to computed property name (e.g., "selectedElement").
+         * This allows changes to source paths to be mapped to computed property changes.
+         */
+        #computedSourcePaths = new Map();
         /**
          * Flag to indicate if an update is already scheduled.
          */
@@ -12124,11 +12282,45 @@
         #update() {
             // Re-evaluate computed properties that depend on changed values
             this.#recomputeProperties();
+            // Apply computed source path mappings to changes
+            // This converts paths like "model.elements[0].executionListeners"
+            // to "selectedElement.executionListeners" when selectedElement points to model.elements[0]
+            this.#applyComputedPathMappings();
             // Update the DOM
             this.#vNode?.update();
             // Clear the set of changed identifiers after the update
             this.#bindings?.clearChanges();
         }
+        /**
+         * Applies computed source path mappings to the current changes.
+         * For each changed path, if it starts with a source path that maps to a computed property,
+         * adds the corresponding computed property path to the changes.
+         */
+        #applyComputedPathMappings() {
+            if (this.#computedSourcePaths.size === 0 || !this.#bindings) {
+                return;
+            }
+            const changes = this.#bindings.changes;
+            const mappedPaths = [];
+            for (const changedPath of changes) {
+                for (const [sourcePath, computedName] of this.#computedSourcePaths) {
+                    // Check if the changed path starts with or equals the source path
+                    if (changedPath === sourcePath) {
+                        // Exact match: mark the computed property itself as changed
+                        mappedPaths.push(computedName);
+                    }
+                    else if (changedPath.startsWith(sourcePath + '.') || changedPath.startsWith(sourcePath + '[')) {
+                        // Subpath match: convert "model.elements[0].x" to "selectedElement.x"
+                        const suffix = changedPath.slice(sourcePath.length);
+                        mappedPaths.push(computedName + suffix);
+                    }
+                }
+            }
+            // Add all mapped paths to the changes
+            for (const path of mappedPaths) {
+                this.#bindings.markChanged(path);
+            }
+        }
         /**
          * Recursively recomputes computed properties based on changed identifiers.
          * @param isInitialization - If true, computes all computed properties regardless of dependencies
@@ -12186,8 +12378,26 @@
                     }
                     if (hasChanged) {
                         // Use setSilent to avoid triggering onChange during computed property updates
+                        // Then mark the computed property as changed so UI depending on it will update
                         this.#bindings?.setSilent(key, newValue);
+                        this.#bindings?.markChanged(key);
                         allChanges.add(key);
+                        // Track source path mapping for computed property values
+                        // This allows changes like "model.elements[0].x" to be mapped to "selectedElement.x"
+                        if (typeof newValue === 'object' && newValue !== null) {
+                            const sourcePath = ReactiveProxy.getPath(newValue);
+                            if (sourcePath) {
+                                // Remove old mapping for this computed property
+                                for (const [path, name] of this.#computedSourcePaths) {
+                                    if (name === key) {
+                                        this.#computedSourcePaths.delete(path);
+                                        break;
+                                    }
+                                }
+                                // Add new mapping
+                                this.#computedSourcePaths.set(sourcePath, key);
+                            }
+                        }
                     }
                 }
                 catch (error) {
@@ -12284,6 +12494,7 @@
         }
     }
 
+    exports.ExpressionUtils = ExpressionUtils;
     exports.ReactiveProxy = ReactiveProxy;
     exports.VComponent = VComponent;
     exports.VComponentRegistry = VComponentRegistry;