juxscript 1.1.279 → 1.1.281

package/machinery/autowrap.js

@@ -69,20 +69,36 @@ function isAlreadyWrapped(stmt) {
         stmt.expression?.callee?.property?.name === '__watch';
 }
 
+/**
+ * Extract the body statements from an existing __watch callback.
+ * Returns null if the statement is not a __watch or has no block body.
+ */
+function getWatchBody(stmt) {
+    if (!isAlreadyWrapped(stmt)) return null;
+    const arg = stmt.expression.arguments?.[0];
+    if (!arg) return null;
+    if (arg.type === 'ArrowFunctionExpression' || arg.type === 'FunctionExpression') {
+        if (arg.body?.type === 'BlockStatement') {
+            return arg.body.body; // array of statements
+        }
+    }
+    return null;
+}
+
 function isSetupStatement(stmt) {
+    // Never treat statements referencing pageState as setup
+    if (containsPageStateRef(stmt)) return false;
+
     if (stmt.type === 'ImportDeclaration') return true;
     if (stmt.type === 'FunctionDeclaration') return true;
     if (stmt.type === 'ExpressionStatement') {
         const expr = stmt.expression;
         if (expr.type === 'CallExpression' &&
-            expr.callee?.object?.name === 'jux' &&
-            !containsPageStateRef(stmt)) return true;
+            expr.callee?.object?.name === 'jux') return true;
         if (expr.type === 'AwaitExpression' &&
-            expr.argument?.callee?.object?.name === 'jux' &&
-            !containsPageStateRef(stmt)) return true;
+            expr.argument?.callee?.object?.name === 'jux') return true;
     }
-    if (stmt.type === 'VariableDeclaration' && !containsPageStateRef(stmt) && !containsJuxCall(stmt)) return true;
-    if (stmt.type === 'VariableDeclaration' && containsJuxCall(stmt) && !containsPageStateRef(stmt)) return true;
+    if (stmt.type === 'VariableDeclaration') return true;
     return false;
 }
 
@@ -119,7 +135,30 @@ export function autowrap(source, filename = '') {
         const stmt = ast.body[i];
 
         if (isSetupStatement(stmt)) { i++; continue; }
-        if (isAlreadyWrapped(stmt)) { i++; continue; }
+
+        // Check if this is a single __watch that contains multiple independent concerns
+        // If so, unwrap it and re-wrap each concern separately
+        if (isAlreadyWrapped(stmt)) {
+            const bodyStmts = getWatchBody(stmt);
+            if (bodyStmts && bodyStmts.length > 1) {
+                // Check if the body has multiple independent reactive groups
+                const groups = groupBodyStatements(bodyStmts, source);
+                if (groups.length > 1) {
+                    // Replace single watch with multiple watches
+                    // Record the original watch range for removal
+                    const watchStart = getLineNumber(source, stmt.start);
+                    const watchEnd = getLineNumber(source, stmt.end);
+                    needsWatch.push({
+                        line: watchStart,
+                        endLine: watchEnd,
+                        replace: true,
+                        groups: groups,
+                    });
+                }
+            }
+            i++;
+            continue;
+        }
 
         // VariableDeclaration reading pageState — group with subsequent stmts that use declared vars
         if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
@@ -172,17 +211,33 @@ export function autowrap(source, filename = '') {
     for (const item of sorted) {
         const startIdx = item.line - 1;
         const endIdx = item.endLine - 1;
-        const blockLines = lines.slice(startIdx, endIdx + 1);
-        const indent = blockLines[0].match(/^(\s*)/)[1];
 
-        const wrapped = [
-            `${indent}pageState.__watch(() => {`,
-            ...blockLines.map(l => `${indent}    ${l.trim()}`),
-            `${indent}});`,
-        ];
+        if (item.replace && item.groups) {
+            // Replace a single big __watch with multiple smaller ones
+            const indent = lines[startIdx].match(/^(\s*)/)[1];
+            const newLines = [];
+            for (const group of item.groups) {
+                newLines.push(`${indent}pageState.__watch(() => {`);
+                for (const gLine of group.lines) {
+                    newLines.push(`${indent}    ${gLine.trim()}`);
+                }
+                newLines.push(`${indent}});`);
+            }
+            lines.splice(startIdx, endIdx - startIdx + 1, ...newLines);
+            details.push(`L${item.line}-${item.endLine} (split ${item.groups.length})`);
+        } else {
+            const blockLines = lines.slice(startIdx, endIdx + 1);
+            const indent = blockLines[0].match(/^(\s*)/)[1];
+
+            const wrapped = [
+                `${indent}pageState.__watch(() => {`,
+                ...blockLines.map(l => `${indent}    ${l.trim()}`),
+                `${indent}});`,
+            ];
 
-        lines.splice(startIdx, endIdx - startIdx + 1, ...wrapped);
-        details.push(`L${item.line}-${item.endLine}`);
+            lines.splice(startIdx, endIdx - startIdx + 1, ...wrapped);
+            details.push(`L${item.line}-${item.endLine}`);
+        }
     }
 
     return {
@@ -191,3 +246,64 @@ export function autowrap(source, filename = '') {
         details
     };
 }
+
+/**
+ * Groups statements inside a __watch body into independent reactive groups.
+ * Uses the same logic as the top-level grouping: VariableDeclarations that
+ * read pageState get grouped with following statements that use those vars.
+ * Standalone if-statements with pageState become their own group.
+ */
+function groupBodyStatements(bodyStmts, source) {
+    const groups = [];
+    let i = 0;
+
+    while (i < bodyStmts.length) {
+        const stmt = bodyStmts[i];
+
+        // VariableDeclaration reading pageState — group with dependents
+        if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
+            const varNames = getDeclaredVarNames(stmt);
+            const groupStmts = [stmt];
+            let j = i + 1;
+
+            while (j < bodyStmts.length) {
+                const next = bodyStmts[j];
+                if (varNames.some(v => usesIdentifier(next, v))) {
+                    groupStmts.push(next);
+                    j++;
+                } else {
+                    break;
+                }
+            }
+
+            groups.push({
+                stmts: groupStmts,
+                lines: extractSourceLines(groupStmts, source),
+            });
+            i = j;
+            continue;
+        }
+
+        // Any statement referencing pageState — standalone group
+        if (containsPageStateRef(stmt)) {
+            groups.push({
+                stmts: [stmt],
+                lines: extractSourceLines([stmt], source),
+            });
+            i++;
+            continue;
+        }
+
+        // Non-reactive statement — attach to next reactive group or skip
+        i++;
+    }
+
+    return groups;
+}
+
+function extractSourceLines(stmts, source) {
+    if (stmts.length === 0) return [];
+    const start = stmts[0].start;
+    const end = stmts[stmts.length - 1].end;
+    return source.slice(start, end).split('\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.279",
+  "version": "1.1.281",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",