juxscript 1.1.282 → 1.1.283

package/machinery/autowrap.js

@@ -39,6 +39,29 @@ function containsPageStateRef(node) {
     return found;
 }
 
+function containsJuxCall(node) {
+    let found = false;
+    walkSimple(node, {
+        CallExpression(n) { if (n.callee?.object?.name === 'jux') found = true; }
+    });
+    return found;
+}
+
+function getDeclaredVarNames(stmt) {
+    if (stmt.type !== 'VariableDeclaration') return [];
+    return stmt.declarations
+        .filter(d => d.id.type === 'Identifier')
+        .map(d => d.id.name);
+}
+
+function usesIdentifier(node, name) {
+    let found = false;
+    walkSimple(node, {
+        Identifier(n) { if (n.name === name) found = true; }
+    });
+    return found;
+}
+
 function isAlreadyWrapped(stmt) {
     return stmt.type === 'ExpressionStatement' &&
         stmt.expression?.type === 'CallExpression' &&
@@ -46,10 +69,36 @@ function isAlreadyWrapped(stmt) {
         stmt.expression?.callee?.property?.name === '__watch';
 }
 
-function isSetupOnly(stmt) {
-    // Statements that should stay outside __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') return true;
+        if (expr.type === 'AwaitExpression' &&
+            expr.argument?.callee?.object?.name === 'jux') return true;
+    }
+    if (stmt.type === 'VariableDeclaration') return true;
     return false;
 }
 
@@ -75,68 +124,186 @@ export function autowrap(source, filename = '') {
             allowAwaitOutsideFunction: true,
         });
     } catch (err) {
+        // Can't parse — return as-is
         return { code: source, wrappedCount: 0, details: [`parse error: ${err.message}`] };
     }
 
-    // Check if there are any unwrapped pageState references at all
-    let hasUnwrappedPageState = false;
-    let firstUnwrappedIdx = -1;
-    let lastUnwrappedIdx = -1;
+    const needsWatch = [];
+    let i = 0;
 
-    for (let i = 0; i < ast.body.length; i++) {
+    while (i < ast.body.length) {
         const stmt = ast.body[i];
-        if (isAlreadyWrapped(stmt)) continue;
-        if (isSetupOnly(stmt)) continue;
-        if (containsPageStateRef(stmt)) {
-            hasUnwrappedPageState = true;
-            if (firstUnwrappedIdx === -1) firstUnwrappedIdx = i;
-            lastUnwrappedIdx = i;
+
+        if (isSetupStatement(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;
         }
-    }
 
-    if (!hasUnwrappedPageState) {
-        return { code: source, wrappedCount: 0, details: [] };
-    }
+        // VariableDeclaration reading pageState — group with subsequent stmts that use declared vars
+        if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
+            const varNames = getDeclaredVarNames(stmt);
+            const groupStmts = [stmt];
+            let j = i + 1;
 
-    // Find the contiguous range: from first unwrapped pageState ref
-    // to end of file (or last unwrapped ref), including any non-pageState
-    // statements in between (they may depend on reactive variables).
-    // But exclude leading setup-only statements (imports, function decls).
+            // Greedily consume following statements that use any of the declared variable names
+            while (j < ast.body.length) {
+                const next = ast.body[j];
+                if (isAlreadyWrapped(next) || isSetupStatement(next)) break;
+                if (varNames.some(v => usesIdentifier(next, v))) {
+                    groupStmts.push(next);
+                    j++;
+                } else {
+                    break;
+                }
+            }
 
-    // Walk backwards from firstUnwrappedIdx to include any immediately
-    // preceding non-setup statements that declare variables used later
-    let rangeStart = firstUnwrappedIdx;
-    let rangeEnd = lastUnwrappedIdx;
+            needsWatch.push({
+                line: getLineNumber(source, groupStmts[0].start),
+                endLine: getLineNumber(source, groupStmts[groupStmts.length - 1].end),
+            });
+            i = j;
+            continue;
+        }
 
-    // Collect all statements in the range
-    const lines = source.split('\n');
-    const stmtsInRange = ast.body.slice(rangeStart, rangeEnd + 1);
+        // Any other statement referencing pageState
+        if (containsPageStateRef(stmt)) {
+            needsWatch.push({
+                line: getLineNumber(source, stmt.start),
+                endLine: getLineNumber(source, stmt.end),
+            });
+            i++;
+            continue;
+        }
 
-    // Check if ALL pageState refs are already wrapped (nothing to do)
-    const unwrappedInRange = stmtsInRange.filter(s => !isAlreadyWrapped(s) && containsPageStateRef(s));
-    if (unwrappedInRange.length === 0) {
+        i++;
+    }
+
+    if (needsWatch.length === 0) {
         return { code: source, wrappedCount: 0, details: [] };
     }
 
-    const startLine = getLineNumber(source, stmtsInRange[0].start);
-    const endLine = getLineNumber(source, stmtsInRange[stmtsInRange.length - 1].end);
+    // Apply wraps bottom-up to preserve line numbers
+    const lines = source.split('\n');
+    const sorted = [...needsWatch].sort((a, b) => b.line - a.line);
+    const details = [];
+
+    for (const item of sorted) {
+        const startIdx = item.line - 1;
+        const endIdx = item.endLine - 1;
 
-    const startIdx = startLine - 1;
-    const endIdx = endLine - 1;
-    const blockLines = lines.slice(startIdx, endIdx + 1);
-    const indent = blockLines[0].match(/^(\s*)/)[1];
+        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.trimEnd()}`),
-        `${indent}});`,
-    ];
+            const wrapped = [
+                `${indent}pageState.__watch(() => {`,
+                ...blockLines.map(l => `${indent}    ${l.trim()}`),
+                `${indent}});`,
+            ];
 
-    lines.splice(startIdx, endIdx - startIdx + 1, ...wrapped);
+            lines.splice(startIdx, endIdx - startIdx + 1, ...wrapped);
+            details.push(`L${item.line}-${item.endLine}`);
+        }
+    }
 
     return {
         code: lines.join('\n'),
-        wrappedCount: 1,
-        details: [`L${startLine}-${endLine} (single watch block)`],
+        wrappedCount: needsWatch.length,
+        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/machinery/compiler4.js

@@ -121,7 +121,7 @@ export class JuxCompiler {
                                 wrappedContent = `export default async function() {\n${processedContent}\n}`;
                             }
 
-                            views.push({ name, file: relativePath, content: wrappedContent, originalContent: content });
+                            views.push({ name, file: relativePath, content: wrappedContent, originalContent: content });towrappedContent: processedContent });
                         }
                     }
                 }
@@ -334,8 +334,8 @@ export class JuxCompiler {
         views.forEach((v, index) => {
             const functionName = `renderJux${index}`;
 
-            let codeBody = v.originalContent || v.content;
-            const originalLines = codeBody.split('\n');
+            let codeBody = v.autowrappedContent || v.originalContent || v.content;
+            const originalLines = (v.originalContent || codeBody).split('\n');
             codeBody = this._stripImportsAndExports(codeBody);
 
             sourceSnapshot[v.file] = {

package/machinery/test-autowrap.js

@@ -0,0 +1,23 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { autowrap } from './autowrap.js';
+
+const file = process.argv[2];
+if (!file) {
+    console.error('Usage: node test-autowrap.js <path-to-jux-file>');
+    process.exit(1);
+}
+
+const filepath = resolve(file);
+const source = readFileSync(filepath, 'utf-8');
+
+console.log('═══ INPUT ═══');
+console.log(source);
+console.log('\n═══ AUTOWRAP RESULT ═══');
+
+const result = autowrap(source, filepath);
+
+console.log(`Wrapped: ${result.wrappedCount}`);
+console.log(`Details: ${result.details.join(', ') || '(none)'}`);
+console.log('\n═══ OUTPUT ═══');
+console.log(result.code);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.282",
+  "version": "1.1.283",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",
@@ -45,7 +45,8 @@
     "dev": "tsc --watch",
     "prepublishOnly": "npm run scan-css && npm run build",
     "postpublish": "echo '✅ Published successfully. Verify with: npm info juxscript'",
-    "scan-css": "node scripts/scan-css-classes.js"
+    "scan-css": "node scripts/scan-css-classes.js",
+    "test-autowrap": "node machinery/test-autowrap.js"
   },
   "dependencies": {
     "acorn": "^8.15.0",