juxscript 1.1.378 → 1.1.380

package/machinery/autowrap.js

@@ -31,6 +31,31 @@ function isPageStateAccess(node) {
     return false;
 }
 
+/**
+ * Checks if a node is a `.state.xxx` access on a known jux component variable.
+ * e.g. `btn2.state.click` where `btn2` is in juxVarNames
+ */
+function isComponentStateAccess(node, juxVarNames) {
+    if (node.type !== 'MemberExpression') return false;
+    const obj = node.object;
+    // Pattern: <varName>.state.<prop>
+    if (obj.type === 'MemberExpression' &&
+        obj.object.type === 'Identifier' &&
+        juxVarNames.has(obj.object.name) &&
+        obj.property.type === 'Identifier' &&
+        obj.property.name === 'state') {
+        return true;
+    }
+    // Pattern: <varName>.state (without further property — still reactive)
+    if (node.object.type === 'Identifier' &&
+        juxVarNames.has(node.object.name) &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'state') {
+        return true;
+    }
+    return false;
+}
+
 function containsPageStateRef(node) {
     let found = false;
     walkSimple(node, {
@@ -39,6 +64,24 @@ function containsPageStateRef(node) {
     return found;
 }
 
+/**
+ * Checks if a node tree contains any .state. access on known jux component variables.
+ */
+function containsComponentStateRef(node, juxVarNames) {
+    let found = false;
+    walkSimple(node, {
+        MemberExpression(n) { if (isComponentStateAccess(n, juxVarNames)) found = true; }
+    });
+    return found;
+}
+
+/**
+ * Returns true if the node contains either a pageState ref or a component .state. ref.
+ */
+function containsAnyReactiveRef(node, juxVarNames) {
+    return containsPageStateRef(node) || containsComponentStateRef(node, juxVarNames);
+}
+
 function containsJuxCall(node) {
     let found = false;
     walkSimple(node, {
@@ -118,6 +161,51 @@ function containsAwait(node) {
     return found;
 }
 
+/**
+ * Collects variable names that are assigned from jux.xxx() calls.
+ * e.g. `let btn2 = jux.btn('id')` → adds 'btn2' to the set.
+ */
+function collectJuxVarNames(ast) {
+    const names = new Set();
+    for (const stmt of ast.body) {
+        if (stmt.type === 'VariableDeclaration') {
+            for (const decl of stmt.declarations) {
+                if (decl.id.type === 'Identifier' && decl.init) {
+                    let call = decl.init;
+                    // Unwrap chained calls: jux.btn('x').onClick(...)
+                    while (call.type === 'CallExpression' &&
+                        call.callee.type === 'MemberExpression' &&
+                        call.callee.object.type === 'CallExpression') {
+                        call = call.callee.object;
+                    }
+                    if (call.type === 'CallExpression' &&
+                        call.callee?.type === 'MemberExpression' &&
+                        call.callee.object?.type === 'Identifier' &&
+                        call.callee.object.name === 'jux') {
+                        names.add(decl.id.name);
+                    }
+                    // Also handle: await jux.xxx()
+                    if (call.type === 'AwaitExpression') {
+                        let inner = call.argument;
+                        while (inner?.type === 'CallExpression' &&
+                            inner.callee?.type === 'MemberExpression' &&
+                            inner.callee.object?.type === 'CallExpression') {
+                            inner = inner.callee.object;
+                        }
+                        if (inner?.type === 'CallExpression' &&
+                            inner.callee?.type === 'MemberExpression' &&
+                            inner.callee.object?.type === 'Identifier' &&
+                            inner.callee.object.name === 'jux') {
+                            names.add(decl.id.name);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return names;
+}
+
 /**
  * @param {string} source - Raw .jux source code
  * @param {string} [filename] - For logging
@@ -136,23 +224,23 @@ export function autowrap(source, filename = '') {
         return { code: source, wrappedCount: 0, details: [`parse error: ${err.message}`] };
     }
 
+    // Collect jux component variable names for .state. detection
+    const juxVarNames = collectJuxVarNames(ast);
+
     const needsWatch = [];
     let i = 0;
 
     while (i < ast.body.length) {
         const stmt = ast.body[i];
 
-        if (isSetupStatement(stmt)) { i++; continue; }
+        if (isSetupStatement(stmt) && !containsComponentStateRef(stmt, juxVarNames)) { 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);
+                const groups = groupBodyStatements(bodyStmts, source, juxVarNames);
                 if (groups.length > 1) {
-                    // Verify no cross-group variable dependencies before splitting
                     const allDeclared = [];
                     let hasCrossDep = false;
                     for (const group of groups) {
@@ -160,7 +248,6 @@ export function autowrap(source, filename = '') {
                         for (const s of group.stmts) {
                             groupVars.push(...getDeclaredVarNames(s));
                         }
-                        // Check if this group uses vars declared in a previous group
                         for (const s of group.stmts) {
                             if (allDeclared.some(v => usesIdentifier(s, v))) {
                                 hasCrossDep = true;
@@ -187,19 +274,16 @@ export function autowrap(source, filename = '') {
             continue;
         }
 
-        // VariableDeclaration reading pageState — group with subsequent stmts that use declared vars
-        if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
+        // VariableDeclaration reading pageState or component .state.
+        if (stmt.type === 'VariableDeclaration' && containsAnyReactiveRef(stmt, juxVarNames)) {
             const varNames = [...getDeclaredVarNames(stmt)];
             const groupStmts = [stmt];
             let j = i + 1;
 
-            // Greedily consume following statements that use any of the declared variable names
             while (j < ast.body.length) {
                 const next = ast.body[j];
-                // Check variable dependency FIRST — if it uses our vars, consume it
                 if (varNames.some(v => usesIdentifier(next, v))) {
                     groupStmts.push(next);
-                    // Track any new variable declarations in the consumed statement
                     getDeclaredVarNames(next).forEach(v => varNames.push(v));
                     j++;
                 } else {
@@ -215,8 +299,8 @@ export function autowrap(source, filename = '') {
             continue;
         }
 
-        // Any other statement referencing pageState
-        if (containsPageStateRef(stmt)) {
+        // Any other statement referencing pageState or component .state.
+        if (containsAnyReactiveRef(stmt, juxVarNames)) {
             needsWatch.push({
                 line: getLineNumber(source, stmt.start),
                 endLine: getLineNumber(source, stmt.end),
@@ -287,29 +371,24 @@ export function autowrap(source, filename = '') {
 
 /**
  * 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) {
+function groupBodyStatements(bodyStmts, source, juxVarNames = new Set()) {
     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)) {
+        // VariableDeclaration reading pageState or .state. — group with dependents
+        if (stmt.type === 'VariableDeclaration' && containsAnyReactiveRef(stmt, juxVarNames)) {
             const varNames = getDeclaredVarNames(stmt);
             const groupStmts = [stmt];
             let j = i + 1;
 
             while (j < bodyStmts.length) {
                 const next = bodyStmts[j];
-                // Also collect any new variable names declared within grouped statements
-                if (varNames.some(v => usesIdentifier(next, v)) || !containsPageStateRef(next)) {
+                if (varNames.some(v => usesIdentifier(next, v)) || !containsAnyReactiveRef(next, juxVarNames)) {
                     groupStmts.push(next);
-                    // Track any new variable declarations in the consumed statement
                     getDeclaredVarNames(next).forEach(v => varNames.push(v));
                     j++;
                 } else {
@@ -325,8 +404,8 @@ function groupBodyStatements(bodyStmts, source) {
             continue;
         }
 
-        // Any statement referencing pageState — standalone group
-        if (containsPageStateRef(stmt)) {
+        // Any statement referencing reactive state — standalone group
+        if (containsAnyReactiveRef(stmt, juxVarNames)) {
             groups.push({
                 stmts: [stmt],
                 lines: extractSourceLines([stmt], source),

package/package.json

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