@mintjamsinc/ichigojs 0.1.55 → 0.1.56

package/dist/ichigo.esm.js

@@ -6731,11 +6731,18 @@ class ExpressionUtils {
      * 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') {
@@ -6967,10 +6974,10 @@ class ExpressionUtils {
      * @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',
@@ -6982,7 +6989,7 @@ class ExpressionUtils {
         // 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);
@@ -7004,7 +7011,26 @@ class ExpressionUtils {
         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) => {
@@ -7015,6 +7041,10 @@ class ExpressionUtils {
                 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) {
@@ -7026,10 +7056,10 @@ class ExpressionUtils {
                         }
                     }
                 }
-                // 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
                 });
             });
@@ -11228,10 +11258,12 @@ class VOnDirective {
             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)) {
@@ -11445,10 +11477,11 @@ class VOnDirective {
                 // 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);
         };
@@ -11478,12 +11511,15 @@ class VOnDirective {
                 // 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);
         };
     }
     /**
@@ -11494,8 +11530,8 @@ class VOnDirective {
      * @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);
     }
 }