@llui/vite-plugin 0.0.11 → 0.0.14

package/dist/transform.js

@@ -90,6 +90,68 @@ const PROP_KEYS = new Set([
     'innerHTML',
     'textContent',
 ]);
+/**
+ * Walk from `use` outward toward the source file root, looking for a
+ * `const <name> = <initializer>` (or `let`/`var`) declaration that binds
+ * this identifier in an enclosing scope. Returns the initializer if found.
+ *
+ * This enables reactive-binding detection for hoisted accessors:
+ *
+ *   const cls = (s: State) => isActive(item, s.path) ? 'on' : 'off'
+ *   return a({ class: cls }, ...)
+ *
+ * Without resolution, `class: cls` would fall through the static path
+ * and emit `__e.className = cls`, coercing the function to its source
+ * string. With resolution, we see that `cls` is an arrow and emit a
+ * binding exactly as if the arrow had been inlined.
+ *
+ * Scope rules:
+ *   - Only single-binding `const`/`let`/`var` declarations with an
+ *     initializer are considered. No destructuring, no multi-declarator
+ *     statements (too easy to get wrong without a type checker).
+ *   - Later reassignments are NOT tracked — if the identifier is `let`
+ *     and gets reassigned, the resolution is unreliable. We conservatively
+ *     refuse to resolve `let` bindings for now (arrow-valued accessors
+ *     are ~always `const` in practice).
+ *   - The declaration must dominate the use (same block or an enclosing
+ *     one). TypeScript's block semantics mean walking up parent blocks
+ *     is sufficient.
+ */
+function resolveLocalConstInitializer(use) {
+    const name = use.text;
+    let node = use;
+    while (node.parent) {
+        const parent = node.parent;
+        // Scan statements of an enclosing block/source-file for a matching declaration
+        let statements = null;
+        if (ts.isBlock(parent) || ts.isSourceFile(parent) || ts.isModuleBlock(parent)) {
+            statements = parent.statements;
+        }
+        else if (ts.isCaseClause(parent) || ts.isDefaultClause(parent)) {
+            statements = parent.statements;
+        }
+        if (statements) {
+            for (const stmt of statements) {
+                if (!ts.isVariableStatement(stmt))
+                    continue;
+                // Skip `let` — reassignment would invalidate our resolution
+                const flags = stmt.declarationList.flags;
+                if (!(flags & ts.NodeFlags.Const))
+                    continue;
+                if (stmt.declarationList.declarations.length !== 1)
+                    continue;
+                const decl = stmt.declarationList.declarations[0];
+                if (!ts.isIdentifier(decl.name) || decl.name.text !== name)
+                    continue;
+                if (!decl.initializer)
+                    continue;
+                return decl.initializer;
+            }
+        }
+        node = parent;
+    }
+    return null;
+}
 function classifyKind(key) {
     if (key === 'class' || key === 'className')
         return 'class';
@@ -328,11 +390,24 @@ __enableDevTools()${relayCall}
     const replaceCalls = components
         .map(({ varName, componentName }) => `      __replaceComponent("${componentName}", ${varName})`)
         .join('\n');
+    // HMR auto-connect: when the Vite plugin detects that @llui/mcp's
+    // active marker file exists or appears, it sends `llui:mcp-ready`
+    // with the MCP bridge port. We forward that to __lluiConnect so the
+    // browser connects automatically — no console gymnastics, no retry
+    // spam, regardless of whether MCP or Vite started first.
+    const mcpHmrHandler = mcpPort !== null
+        ? `
+  import.meta.hot.on('llui:mcp-ready', (data) => {
+    if (typeof globalThis.__lluiConnect === 'function') {
+      globalThis.__lluiConnect(data?.port)
+    }
+  })`
+        : '';
     const bottom = `
 if (import.meta.hot) {
   import.meta.hot.accept(() => {
 ${replaceCalls}
-  })
+  })${mcpHmrHandler}
 }
 `.trim();
     return { top, bottom };
@@ -629,6 +704,17 @@ function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f)
                 events.push(f.createArrayLiteralExpression([f.createStringLiteral(eventName), value]));
                 continue;
             }
+            // If the value is an Identifier that refers to a local const-bound
+            // arrow/function, resolve it and treat it as if the arrow had been
+            // inlined. Without this, `class: cls` where `const cls = (s) => ...`
+            // falls through to the static path and emits `.className = cls`,
+            // coercing the function to its source string in the DOM.
+            if (ts.isIdentifier(value)) {
+                const resolved = resolveLocalConstInitializer(value);
+                if (resolved && (ts.isArrowFunction(resolved) || ts.isFunctionExpression(resolved))) {
+                    value = resolved;
+                }
+            }
             // Reactive binding — value is an arrow function or function expression
             if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
                 const kind = classifyKind(key);
@@ -2373,6 +2459,14 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                 events.push([key.slice(2).toLowerCase(), value]);
                 continue;
             }
+            // Resolve identifier → local const arrow initializer (see elSplit
+            // path for the full rationale).
+            if (ts.isIdentifier(value)) {
+                const resolved = resolveLocalConstInitializer(value);
+                if (resolved && (ts.isArrowFunction(resolved) || ts.isFunctionExpression(resolved))) {
+                    value = resolved;
+                }
+            }
             // Reactive binding
             if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
                 const kind = classifyKind(key);
@@ -2851,9 +2945,12 @@ function isPerItemCall(node) {
     return ts.isArrowFunction(arg) || ts.isFunctionExpression(arg);
 }
 // Matches: item.FIELD — the item-proxy shorthand equivalent of item(t => t.FIELD).
-// Loose heuristic: any `IDENT.IDENT` where the left side is the bare identifier `item`.
-// The runtime detects per-item via accessor.length === 0, so passing the property access
-// directly as a binding accessor works regardless of what the compiler assumes.
+// Scope-checked: the `item` identifier must resolve to a parameter of an
+// `each({ render })` callback. Without this check, plain
+// `arr.map((item) => item.field)` outside each() would be rewritten as a
+// per-item binding and crash at runtime with "accessor is not a function"
+// because `item.field` evaluates to a bare value (not a function) when
+// treated as an accessor.
 function isPerItemFieldAccess(node) {
     if (!ts.isPropertyAccessExpression(node))
         return false;
@@ -2863,6 +2960,58 @@ function isPerItemFieldAccess(node) {
         return false;
     if (!ts.isIdentifier(node.name))
         return false;
+    return isItemBoundToEachRender(node);
+}
+/**
+ * Walks up from a node and returns true iff the nearest enclosing function
+ * that binds an `item` parameter is the `render` property of an `each()`
+ * call. Handles both positional (`(item) => …`) and destructured
+ * (`({ item, index }) => …`) parameter bindings.
+ */
+function isItemBoundToEachRender(node) {
+    let current = node.parent;
+    while (current) {
+        if (ts.isArrowFunction(current) || ts.isFunctionExpression(current)) {
+            if (functionParamsBindItem(current)) {
+                return isEachRenderCallback(current);
+            }
+        }
+        current = current.parent;
+    }
+    return false;
+}
+function functionParamsBindItem(fn) {
+    for (const param of fn.parameters) {
+        if (bindingNameBindsItem(param.name))
+            return true;
+    }
+    return false;
+}
+function bindingNameBindsItem(name) {
+    if (ts.isIdentifier(name))
+        return name.text === 'item';
+    if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+        for (const el of name.elements) {
+            if (ts.isBindingElement(el) && bindingNameBindsItem(el.name))
+                return true;
+        }
+    }
+    return false;
+}
+function isEachRenderCallback(fn) {
+    const parent = fn.parent;
+    if (!parent || !ts.isPropertyAssignment(parent))
+        return false;
+    if (!ts.isIdentifier(parent.name) || parent.name.text !== 'render')
+        return false;
+    const objLit = parent.parent;
+    if (!objLit || !ts.isObjectLiteralExpression(objLit))
+        return false;
+    const call = objLit.parent;
+    if (!call || !ts.isCallExpression(call))
+        return false;
+    if (!ts.isIdentifier(call.expression) || call.expression.text !== 'each')
+        return false;
     return true;
 }
 // Matches the hoisted identifiers produced by tryDeduplicateItemSelectors: __a0, __a1, …