@mintjamsinc/ichigojs 0.1.55 → 0.1.57

package/dist/ichigo.cjs

@@ -6737,11 +6737,18 @@
          * Extracts variable and function names used in the expression.
          * @param expression The expression string to analyze.
          * @param functionDependencies A dictionary mapping function names to their dependencies.
+         * @param options Optional parsing options.
+         *   - asScript: If true, parse the input as a Script (allows multi-statement source with semicolons,
+         *     declarations, control-flow, etc.). If false/omitted, parse as a single expression (the default,
+         *     for backward compatibility with interpolation and binding directives).
          * @returns An array of identifier names.
          */
-        static extractIdentifiers(expression, functionDependencies) {
+        static extractIdentifiers(expression, functionDependencies, options) {
             const identifiers = new Set();
-            const ast = parse(`(${expression})`, { ecmaVersion: "latest" });
+            // In expression mode we wrap in parens so acorn parses the source as a single expression.
+            // In script mode we parse as a Program so that multi-statement bodies (e.g. "a=1; b=2") work.
+            const source = options?.asScript ? expression : `(${expression})`;
+            const ast = parse(source, { ecmaVersion: "latest" });
             // Use walk.full instead of walk.simple to visit ALL nodes including assignment LHS
             full(ast, (node) => {
                 if (node.type === 'Identifier') {
@@ -6973,10 +6980,10 @@
          * @param identifiers The list of identifiers that are available in bindings.
          * @returns The rewritten expression.
          */
-        static rewriteExpression(expression, identifiers) {
+        static rewriteExpression(expression, identifiers, options) {
             // Reserved words and built-in objects that should not be prefixed with 'this.'
             const reserved = new Set([
-                'event', '$ctx', '$newValue',
+                'event', '$event', '$ctx', '$newValue',
                 'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
                 'Math', 'Date', 'String', 'Number', 'Boolean', 'Array', 'Object',
                 'JSON', 'console', 'window', 'document', 'navigator',
@@ -6988,7 +6995,7 @@
             // identifiers that are used (right-hand side), not assigned to (left-hand side)
             let allIdentifiersInExpression;
             try {
-                allIdentifiersInExpression = ExpressionUtils.extractIdentifiers(expression, {});
+                allIdentifiersInExpression = ExpressionUtils.extractIdentifiers(expression, {}, options);
             }
             catch (error) {
                 console.warn('[ichigo.js] Failed to extract identifiers from expression:', expression, error);
@@ -7010,7 +7017,26 @@
             try {
                 // Build a map of positions to replace: { start: number, end: number, name: string }[]
                 const replacements = [];
-                const parsedAst = parse(`(${expression})`, { ecmaVersion: 'latest' });
+                // In script mode we must not wrap in parens (that would make multi-statement input invalid).
+                // Offsets from the parser therefore refer directly to the original expression, so no shift.
+                const asScript = options?.asScript === true;
+                const source = asScript ? expression : `(${expression})`;
+                const offsetShift = asScript ? 0 : 1;
+                const parsedAst = parse(source, { ecmaVersion: 'latest' });
+                // Track identifiers that are locally declared within the handler body (let/const/var, function
+                // params) so we don't rewrite them to `this.xxx`. Only relevant in script mode, where the user
+                // can write declarations; in expression mode there are no declarations to track.
+                const locallyDeclared = new Set();
+                if (asScript) {
+                    full(parsedAst, (node) => {
+                        if (node.type === 'VariableDeclarator' && node.id?.type === 'Identifier') {
+                            locallyDeclared.add(node.id.name);
+                        }
+                        else if (node.type === 'FunctionDeclaration' && node.id?.type === 'Identifier') {
+                            locallyDeclared.add(node.id.name);
+                        }
+                    });
+                }
                 // Collect all identifier nodes that should be replaced
                 // Use walk.fullAncestor to visit ALL nodes (including assignment LHS) while tracking ancestors
                 fullAncestor(parsedAst, (node, _state, ancestors) => {
@@ -7021,6 +7047,10 @@
                     if (!bindingIdentifiers.has(node.name)) {
                         return;
                     }
+                    // Skip identifiers that were declared locally in the handler body
+                    if (locallyDeclared.has(node.name)) {
+                        return;
+                    }
                     // Check if this identifier is a property of a MemberExpression
                     // (e.g., in 'obj.prop', we should skip 'prop')
                     if (ancestors.length >= 1) {
@@ -7032,10 +7062,10 @@
                             }
                         }
                     }
-                    // Add to replacements list (adjust for the wrapping parentheses)
+                    // Add to replacements list (adjust for the wrapping parentheses in expression mode)
                     replacements.push({
-                        start: node.start - 1,
-                        end: node.end - 1,
+                        start: node.start - offsetShift,
+                        end: node.end - offsetShift,
                         name: node.name
                     });
                 });
@@ -11234,10 +11264,12 @@
                 this.#eventName = parts[0];
                 parts.slice(1).forEach(mod => this.#modifiers.add(mod));
             }
-            // Parse the expression to extract identifiers and create the handler wrapper
+            // Parse the expression to extract identifiers and create the handler wrapper.
+            // Event handlers are parsed in script mode so that users can write multi-statement bodies
+            // (e.g. "a=1; b=2"), declarations, and control-flow constructs — matching Vue semantics.
             const expression = context.attribute.value;
             if (expression) {
-                this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+                this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies, { asScript: true });
             }
             // Check if this is a lifecycle hook or a regular event
             if (this.#eventName && this.#isLifecycleHook(this.#eventName)) {
@@ -11367,23 +11399,27 @@
             this.#listener = (event) => {
                 // Check key modifiers for keyboard events
                 if (event instanceof KeyboardEvent) {
-                    const keyModifiers = ['enter', 'tab', 'delete', 'esc', 'space', 'up', 'down', 'left', 'right'];
-                    const hasKeyModifier = keyModifiers.some(key => this.#modifiers.has(key));
+                    // Map of modifier alias -> KeyboardEvent.key values it matches.
+                    // Multiple values allow a single modifier to match several physical keys
+                    // (e.g. `.delete` matches both Delete and Backspace, matching Vue's behavior).
+                    // Multiple aliases pointing to the same key are allowed (e.g. `.esc` / `.escape`).
+                    const keyMap = {
+                        'enter': ['Enter'],
+                        'tab': ['Tab'],
+                        'delete': ['Delete', 'Backspace'],
+                        'esc': ['Escape'],
+                        'escape': ['Escape'],
+                        'space': [' '],
+                        'up': ['ArrowUp'],
+                        'down': ['ArrowDown'],
+                        'left': ['ArrowLeft'],
+                        'right': ['ArrowRight']
+                    };
+                    const hasKeyModifier = Object.keys(keyMap).some(key => this.#modifiers.has(key));
                     if (hasKeyModifier) {
-                        const keyMap = {
-                            'enter': 'Enter',
-                            'tab': 'Tab',
-                            'delete': 'Delete',
-                            'esc': 'Escape',
-                            'space': ' ',
-                            'up': 'ArrowUp',
-                            'down': 'ArrowDown',
-                            'left': 'ArrowLeft',
-                            'right': 'ArrowRight'
-                        };
                         let keyMatched = false;
-                        for (const [modifier, keyValue] of Object.entries(keyMap)) {
-                            if (this.#modifiers.has(modifier) && event.key === keyValue) {
+                        for (const [modifier, keyValues] of Object.entries(keyMap)) {
+                            if (this.#modifiers.has(modifier) && keyValues.includes(event.key)) {
                                 keyMatched = true;
                                 break;
                             }
@@ -11451,10 +11487,11 @@
                     // This allows the method to access the DOM element, VNode, and userData
                     return originalMethod($ctx);
                 }
-                // For inline expressions, rewrite to use 'this' context
-                // This allows assignments like "currentTab = 'shop'" to work correctly
-                const rewrittenExpr = this.#rewriteExpression(expression, identifiers);
-                const funcBody = `return (${rewrittenExpr});`;
+                // For inline bodies, rewrite to use 'this' context
+                // This allows assignments like "currentTab = 'shop'" to work correctly.
+                // Script mode allows multi-statement bodies (e.g. "a=1; init()") and control-flow.
+                const rewrittenExpr = this.#rewriteExpression(expression, identifiers, { asScript: true });
+                const funcBody = rewrittenExpr;
                 const func = new Function('$ctx', funcBody);
                 return func.call(bindings?.raw, $ctx);
             };
@@ -11484,12 +11521,15 @@
                     // Pass event as first argument and $ctx as second argument
                     return originalMethod(event, $ctx);
                 }
-                // For inline expressions, rewrite to use 'this' context
-                // This allows assignments like "currentTab = 'shop'" to work correctly
-                const rewrittenExpr = this.#rewriteExpression(expression, identifiers);
-                const funcBody = `return (${rewrittenExpr});`;
-                const func = new Function('event', '$ctx', funcBody);
-                return func.call(bindings?.raw, event, $ctx);
+                // For inline bodies, rewrite to use 'this' context
+                // This allows assignments like "currentTab = 'shop'" to work correctly.
+                // Script mode allows multi-statement bodies (e.g. "a=1; b=2") and control-flow,
+                // so we emit the rewritten source directly as the function body (no `return (...)`).
+                const rewrittenExpr = this.#rewriteExpression(expression, identifiers, { asScript: true });
+                const funcBody = rewrittenExpr;
+                // '$event' is an alias for 'event' for Vue compatibility
+                const func = new Function('event', '$event', '$ctx', funcBody);
+                return func.call(bindings?.raw, event, event, $ctx);
             };
         }
         /**
@@ -11500,8 +11540,8 @@
          * @param identifiers The list of identifiers that are available in bindings.
          * @returns The rewritten expression.
          */
-        #rewriteExpression(expression, identifiers) {
-            return ExpressionUtils.rewriteExpression(expression, identifiers);
+        #rewriteExpression(expression, identifiers, options) {
+            return ExpressionUtils.rewriteExpression(expression, identifiers, options);
         }
     }