juxscript 1.1.271 → 1.1.275

package/dist/lib/state/pageState.d.ts

@@ -1,12 +1,13 @@
 declare class PageState {
     private _registry;
     private _proxy;
-    static readonly WIRE_EVENTS: readonly ["blur", "focus", "click", "dblclick", "change", "input", "keydown", "keyup", "keypress", "mouseenter", "mouseleave", "submit"];
+    static readonly WIRE_EVENTS: readonly ["blur", "focus", "click", "dblclick", "change", "input", "keydown", "keyup", "keypress", "mouseenter", "mouseleave", "mousedown", "mouseup", "submit"];
     constructor();
     private _createComponentProxy;
     private _register;
     private _wireEvent;
     private _findElement;
+    private _wireStateFlag;
     private _unregister;
     private _notify;
     private _watch;

package/dist/lib/state/pageState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AAeA,cAAM,SAAS;IACX,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,MAAM,CAAsB;IAEpC,MAAM,CAAC,QAAQ,CAAC,WAAW,2IAOhB;;IA2BX,OAAO,CAAC,qBAAqB;IAoF7B,OAAO,CAAC,SAAS;IA0DjB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAcd,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGlC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AAeA,cAAM,SAAS;IACX,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,MAAM,CAAsB;IAEpC,MAAM,CAAC,QAAQ,CAAC,WAAW,mKAQhB;;IA2BX,OAAO,CAAC,qBAAqB;IAoF7B,OAAO,CAAC,SAAS;IA+DjB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAcd,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGlC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/state/pageState.js

@@ -165,6 +165,10 @@ class PageState {
         for (const eventName of PageState.WIRE_EVENTS) {
             this._wireEvent(id, entry, eventName);
         }
+        // Wire composite state flags: hover, active, focused
+        this._wireStateFlag(id, entry, 'hover', 'mouseenter', 'mouseleave');
+        this._wireStateFlag(id, entry, 'active', 'mousedown', 'mouseup');
+        this._wireStateFlag(id, entry, 'focused', 'focus', 'blur');
     }
     _wireEvent(id, entry, eventName) {
         entry.events[eventName] = false;
@@ -206,6 +210,20 @@ class PageState {
         }
         return null;
     }
+    _wireStateFlag(id, entry, flagName, onEvent, offEvent) {
+        entry.events[flagName] = false;
+        const el = this._findElement(entry.component);
+        if (!el)
+            return;
+        el.addEventListener(onEvent, () => {
+            entry.events[flagName] = true;
+            this._notify(`${id}.${flagName}`);
+        });
+        el.addEventListener(offEvent, () => {
+            entry.events[flagName] = false;
+            this._notify(`${id}.${flagName}`);
+        });
+    }
     _unregister(id) {
         this._registry.delete(id);
     }
@@ -252,6 +270,7 @@ PageState.WIRE_EVENTS = [
     'change', 'input',
     'keydown', 'keyup', 'keypress',
     'mouseenter', 'mouseleave',
+    'mousedown', 'mouseup',
     'submit'
 ];
 // Singleton

package/machinery/autowrap.js

@@ -0,0 +1,190 @@
+/**
+ * Auto-wraps unwatched pageState references with __watch wrappers.
+ *
+ * Takes raw .jux source code and returns the same code with
+ * reactive statements wrapped in pageState.__watch(() => { ... });
+ *
+ * Pure function: source in → { code, wrappedCount, details } out
+ */
+import * as acorn from 'acorn';
+
+// We use acorn's simple walker inline to avoid import issues
+function walkSimple(node, visitors) {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) { node.forEach(n => walkSimple(n, visitors)); return; }
+    const visitor = visitors[node.type];
+    if (visitor) visitor(node);
+    for (const key of Object.keys(node)) {
+        if (key === 'type' || key === 'start' || key === 'end' || key === 'loc' || key === 'raw') continue;
+        const child = node[key];
+        if (child && typeof child === 'object') walkSimple(child, visitors);
+    }
+}
+
+function isPageStateAccess(node) {
+    if (node.type !== 'MemberExpression') return false;
+    const obj = node.object;
+    if (obj.type === 'MemberExpression' &&
+        obj.object.type === 'Identifier' &&
+        obj.object.name === 'pageState') return true;
+    if (node.object.type === 'Identifier' && node.object.name === 'pageState') return true;
+    return false;
+}
+
+function containsPageStateRef(node) {
+    let found = false;
+    walkSimple(node, {
+        MemberExpression(n) { if (isPageStateAccess(n)) found = true; }
+    });
+    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' &&
+        stmt.expression?.callee?.object?.name === 'pageState' &&
+        stmt.expression?.callee?.property?.name === '__watch';
+}
+
+function isSetupStatement(stmt) {
+    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;
+        if (expr.type === 'AwaitExpression' &&
+            expr.argument?.callee?.object?.name === 'jux' &&
+            !containsPageStateRef(stmt)) return true;
+    }
+    if (stmt.type === 'VariableDeclaration' && !containsPageStateRef(stmt)) return true;
+    if (stmt.type === 'VariableDeclaration' && containsJuxCall(stmt)) return true;
+    return false;
+}
+
+function getLineNumber(source, pos) {
+    let line = 1;
+    for (let i = 0; i < pos; i++) {
+        if (source[i] === '\n') line++;
+    }
+    return line;
+}
+
+/**
+ * @param {string} source - Raw .jux source code
+ * @param {string} [filename] - For logging
+ * @returns {{ code: string, wrappedCount: number, details: string[] }}
+ */
+export function autowrap(source, filename = '') {
+    let ast;
+    try {
+        ast = acorn.parse(source, {
+            ecmaVersion: 2022,
+            sourceType: 'module',
+            allowAwaitOutsideFunction: true,
+        });
+    } catch (err) {
+        // Can't parse — return as-is
+        return { code: source, wrappedCount: 0, details: [`parse error: ${err.message}`] };
+    }
+
+    const needsWatch = [];
+    let i = 0;
+
+    while (i < ast.body.length) {
+        const stmt = ast.body[i];
+
+        if (isSetupStatement(stmt)) { i++; continue; }
+        if (isAlreadyWrapped(stmt)) { i++; continue; }
+
+        // VariableDeclaration reading pageState — group with next if uses declared var
+        if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
+            const varNames = getDeclaredVarNames(stmt);
+            const groupStmts = [stmt];
+            const next = ast.body[i + 1];
+            if (next && !isAlreadyWrapped(next) && !isSetupStatement(next)) {
+                if (varNames.some(v => usesIdentifier(next, v))) {
+                    groupStmts.push(next);
+                    i += 2;
+                } else {
+                    i++;
+                }
+            } else {
+                i++;
+            }
+
+            needsWatch.push({
+                line: getLineNumber(source, groupStmts[0].start),
+                endLine: getLineNumber(source, groupStmts[groupStmts.length - 1].end),
+            });
+            continue;
+        }
+
+        // Any other statement referencing pageState
+        if (containsPageStateRef(stmt)) {
+            needsWatch.push({
+                line: getLineNumber(source, stmt.start),
+                endLine: getLineNumber(source, stmt.end),
+            });
+            i++;
+            continue;
+        }
+
+        i++;
+    }
+
+    if (needsWatch.length === 0) {
+        return { code: source, wrappedCount: 0, details: [] };
+    }
+
+    // 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 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}`);
+    }
+
+    return {
+        code: lines.join('\n'),
+        wrappedCount: needsWatch.length,
+        details
+    };
+}

package/machinery/compiler4.js

@@ -5,6 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { generateErrorCollector } from './errors.js';
+import { autowrap } from './autowrap.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -77,9 +78,19 @@ export class JuxCompiler {
                         } else if (hasExports) {
                             sharedModules.push({ name, file: relativePath, content, originalContent: content });
                         } else {
+                            // ✅ Auto-wrap pageState references before wrapping in async function
+                            let processedContent = content;
+                            if (file.endsWith('.jux')) {
+                                const result = autowrap(content, relativePath);
+                                if (result.wrappedCount > 0) {
+                                    console.log(`🔄 Auto-wrapped ${result.wrappedCount} reactive block(s) in ${relativePath} [${result.details.join(', ')}]`);
+                                    processedContent = result.code;
+                                }
+                            }
+
                             let wrappedContent;
                             try {
-                                const ast = acorn.parse(content, {
+                                const ast = acorn.parse(processedContent, {
                                     ecmaVersion: 'latest',
                                     sourceType: 'module',
                                     locations: true
@@ -90,12 +101,12 @@ export class JuxCompiler {
 
                                 for (const node of ast.body) {
                                     if (node.type === 'ImportDeclaration') {
-                                        imports.push(content.substring(node.start, node.end));
+                                        imports.push(processedContent.substring(node.start, node.end));
                                         lastImportEnd = node.end;
                                     }
                                 }
 
-                                const restOfCode = content.substring(lastImportEnd).trim();
+                                const restOfCode = processedContent.substring(lastImportEnd).trim();
 
                                 wrappedContent = [
                                     ...imports,
@@ -107,7 +118,7 @@ export class JuxCompiler {
 
                             } catch (parseError) {
                                 console.warn(`⚠️  Could not parse ${relativePath}, using basic wrapping`);
-                                wrappedContent = `export default async function() {\n${content}\n}`;
+                                wrappedContent = `export default async function() {\n${processedContent}\n}`;
                             }
 
                             views.push({ name, file: relativePath, content: wrappedContent, originalContent: content });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.271",
+  "version": "1.1.275",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",
@@ -15,6 +15,7 @@
       "import": "./dist/lib/index.js",
       "types": "./dist/lib/index.d.ts"
     },
+    "./machinery/*": "./machinery/*",
     "./package.json": "./package.json"
   },
   "files": [