@llui/vite-plugin 0.0.20 → 0.0.22

package/dist/diagnostics.js

@@ -1,4 +1,5 @@
 import ts from 'typescript';
+import { collectStatePathsFromSource, collectAccessorPathSets } from './collect-deps.js';
 const INTERACTIVE_ELEMENTS = new Set([
     'button',
     'a',
@@ -81,8 +82,8 @@ export function diagnose(source) {
     const diagnostics = [];
     // Collect Msg type variants for exhaustive update() check
     const msgVariants = collectMsgVariants(sf);
-    // Collect state access paths for bitmask warning
-    const statePaths = collectStatePaths(sf);
+    // Collect state access paths for bitmask warning (shared scanner with collect-deps.ts)
+    const statePaths = collectStatePathsFromSource(sf);
     function visit(node) {
         checkMapOnState(node, sf, diagnostics);
         checkExhaustiveUpdate(node, sf, diagnostics, msgVariants);
@@ -93,6 +94,7 @@ export function diagnose(source) {
         checkNamespaceImport(node, sf, diagnostics);
         checkSpreadChildren(node, sf, diagnostics);
         checkEmptyProps(node, sf, diagnostics);
+        checkStaticOn(node, sf, diagnostics);
         ts.forEachChild(node, visit);
     }
     visit(sf);
@@ -117,6 +119,7 @@ function checkNamespaceImport(node, sf, diagnostics) {
     const name = clause.namedBindings.name.text;
     const { line, column } = pos(clause.namedBindings, sf);
     diagnostics.push({
+        rule: 'namespace-import',
         message: `Namespace import '${name}' from '@llui/dom' at line ${line} disables compiler optimizations. Use named imports instead: import { div, text, ... } from '@llui/dom'.`,
         line,
         column,
@@ -125,6 +128,12 @@ function checkNamespaceImport(node, sf, diagnostics) {
 // Warns when a children array contains a spread — the compiler can't
 // analyze variable-length children, so it bails on template cloning and
 // falls back to runtime elSplit. Not fatal, but silent.
+//
+// Scope-aware: when the spread source (or an array-method's receiver)
+// resolves to a locally-bounded binding — `const x = [...]`, `const x =
+// fn(...)`, `const x = other.map(...)` where `other` is bounded — the
+// child count is statically known and `each()` is not a usable fix.
+// Those cases stay silent; only truly dynamic spreads warn.
 function checkSpreadChildren(node, sf, diagnostics) {
     if (!ts.isCallExpression(node))
         return;
@@ -136,15 +145,14 @@ function checkSpreadChildren(node, sf, diagnostics) {
     for (const arg of node.arguments) {
         if (!ts.isArrayLiteralExpression(arg))
             continue;
-        // Look for "suspicious" spreads — ones that aren't obviously returning
-        // Node[] from a structural primitive or user-defined view helper.
         for (const el of arg.elements) {
             if (!ts.isSpreadElement(el))
                 continue;
-            if (isStructuralSpread(el.expression))
+            if (isBoundedSpreadSource(el.expression, sf))
                 continue;
             const { line, column } = pos(arg, sf);
             diagnostics.push({
+                rule: 'spread-in-children',
                 message: `Spread in children array of '${node.expression.text}()' at line ${line} disables template-clone compilation. For dynamic child counts, use each() instead.`,
                 line,
                 column,
@@ -166,22 +174,139 @@ const ARRAY_ITERATION_METHODS = new Set([
     'reverse',
     'sort',
 ]);
-function isStructuralSpread(expr) {
-    // Only keep the warning for suspect patterns: identifier spreads and
-    // array-iteration method calls. Everything else is presumed to be a
-    // structural primitive or user helper returning Node[].
+/**
+ * Classify a spread-source expression as "bounded" — i.e., the child
+ * count is statically knowable and `each()` is not an applicable fix.
+ * Returns true when the spread should stay silent, false when the
+ * spread is genuinely suspect (state-derived, unresolved, inline
+ * array-method call on a non-bounded receiver).
+ */
+function isBoundedSpreadSource(expr, sf) {
+    // Identifier spread `...foo` — resolve the binding.
+    if (ts.isIdentifier(expr)) {
+        const init = resolveBindingInitializer(expr, sf);
+        if (init === null)
+            return false;
+        return isBoundedInitializer(init, sf);
+    }
+    // Call-expression spread.
     if (ts.isCallExpression(expr)) {
         const callee = expr.expression;
+        // Array-method call: `...x.map(...)`, `...arr.concat([...])`, etc.
+        if (ts.isPropertyAccessExpression(callee) && ts.isIdentifier(callee.name)) {
+            if (!ARRAY_ITERATION_METHODS.has(callee.name.text)) {
+                // Non-array-method method call (e.g. `...my.overlay()`) — presume
+                // structural/helper. Same as before.
+                return true;
+            }
+            // Array method — bounded if the receiver resolves to a bounded
+            // array source. Inline literals (e.g. `...[1,2,3].map(...)`)
+            // stay suspect intentionally so authors see the warning on the
+            // canonical dynamic-mapping shape.
+            return isBoundedArrayReceiver(callee.expression, sf);
+        }
+        // Plain function call `...fn()` — presume structural/helper.
+        return true;
+    }
+    // Anything else (array literal inline, etc.) — treat as suspect for
+    // now. Inline `...[...]` at a call site is unusual and worth flagging.
+    return false;
+}
+/**
+ * Is the initializer a bounded expression? Array literals and
+ * function-call results both qualify; method calls recurse on their
+ * receivers.
+ */
+function isBoundedInitializer(init, sf) {
+    // `const foo = [...]` — bounded.
+    if (ts.isArrayLiteralExpression(init))
+        return true;
+    // `const foo = x as const` / `x as T` — look through the assertion.
+    if (ts.isAsExpression(init) || ts.isTypeAssertionExpression(init)) {
+        return isBoundedInitializer(init.expression, sf);
+    }
+    // `const foo = someCall(...)` — treat plain-call results as bounded
+    // structural output. Same heuristic the original syntactic rule used.
+    if (ts.isCallExpression(init)) {
+        const callee = init.expression;
+        if (ts.isIdentifier(callee))
+            return true;
         if (ts.isPropertyAccessExpression(callee) && ts.isIdentifier(callee.name)) {
-            // `...arr.map(...)`, `...arr.filter(...)` — suspect
-            return !ARRAY_ITERATION_METHODS.has(callee.name.text);
+            if (!ARRAY_ITERATION_METHODS.has(callee.name.text))
+                return true;
+            // Method call is an array method — bounded iff receiver is.
+            return isBoundedArrayReceiver(callee.expression, sf);
         }
-        // Plain function call `...fn()` — presume structural/helper
+    }
+    return false;
+}
+/**
+ * A method-call receiver (the `x` in `x.map(...)`) is bounded when
+ * resolved to a named array-literal binding. Inline literals are
+ * intentionally NOT bounded here — callers who inline `[1,2,3].map(...)`
+ * should still see the warning.
+ */
+function isBoundedArrayReceiver(receiver, sf) {
+    if (!ts.isIdentifier(receiver))
+        return false;
+    const init = resolveBindingInitializer(receiver, sf);
+    if (init === null)
+        return false;
+    if (ts.isArrayLiteralExpression(init))
         return true;
+    if (ts.isAsExpression(init) || ts.isTypeAssertionExpression(init)) {
+        return ts.isArrayLiteralExpression(init.expression);
     }
-    // Identifier spread (`...arr`) — suspect
     return false;
 }
+/**
+ * Walk the identifier's ancestor scopes looking for a matching
+ * VariableDeclaration. Returns its initializer (or null if the name
+ * resolves to a function parameter, import, or nothing at all).
+ */
+function resolveBindingInitializer(ident, sf) {
+    const name = ident.text;
+    let scope = ident.parent;
+    while (scope) {
+        const decl = findVariableDeclarationInScope(scope, name, ident);
+        if (decl)
+            return decl.initializer ?? null;
+        if (scope === sf)
+            break;
+        scope = scope.parent;
+    }
+    return null;
+}
+/**
+ * Scan a scope's immediate statements for a `const/let/var name = ...`
+ * declaration. Does not descend into inner function bodies — those are
+ * visible only from within themselves.
+ */
+function findVariableDeclarationInScope(scope, name, from) {
+    let found = null;
+    function visit(node) {
+        if (found)
+            return;
+        // Don't descend into nested function bodies other than the one
+        // containing `from` — that walking is handled by the outer loop.
+        if (node !== from.parent &&
+            (ts.isFunctionDeclaration(node) ||
+                ts.isFunctionExpression(node) ||
+                ts.isArrowFunction(node) ||
+                ts.isMethodDeclaration(node) ||
+                ts.isConstructorDeclaration(node))) {
+            // Still scan the parameters? No — parameters aren't VariableDeclarations.
+            return;
+        }
+        if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.name.text === name) {
+            found = node;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    }
+    ts.forEachChild(scope, visit);
+    return found;
+}
 // Warns when an element helper is called with an empty props object — the
 // attrs argument is optional, so `h1({}, [...])` should be `h1([...])`.
 function checkEmptyProps(node, sf, diagnostics) {
@@ -198,6 +323,7 @@ function checkEmptyProps(node, sf, diagnostics) {
         return;
     const { line, column } = pos(firstArg, sf);
     diagnostics.push({
+        rule: 'empty-props',
         message: `Empty props object passed to '${node.expression.text}()' at line ${line}. The attrs argument is optional — omit it: ${node.expression.text}([...]).`,
         line,
         column,
@@ -245,6 +371,7 @@ function checkMapOnState(node, sf, diagnostics) {
         return;
     const { line, column } = pos(node, sf);
     diagnostics.push({
+        rule: 'map-on-state',
         message: `Array .map() on state-derived value at line ${line}. Use each() for reactive lists that update when the array changes.`,
         line,
         column,
@@ -345,6 +472,7 @@ function checkExhaustiveUpdate(node, sf, diagnostics, msgVariants) {
         return;
     const { line, column } = pos(node, sf);
     diagnostics.push({
+        rule: 'exhaustive-update',
         message: `update() does not handle message type${missing.length > 1 ? 's' : ''} ${missing.map((m) => `'${m}'`).join(', ')} at line ${line}.`,
         line,
         column,
@@ -367,6 +495,7 @@ function checkAccessibility(node, sf, diagnostics) {
     if (tag === 'img' && !props.has('alt')) {
         const { line, column } = pos(node, sf);
         diagnostics.push({
+            rule: 'accessibility',
             message: `<img> at line ${line} has no 'alt' attribute. Add alt text for screen readers, or alt='' for decorative images.`,
             line,
             column,
@@ -376,6 +505,7 @@ function checkAccessibility(node, sf, diagnostics) {
     if (props.has('onClick') && !INTERACTIVE_ELEMENTS.has(tag) && !props.has('role')) {
         const { line, column } = pos(node, sf);
         diagnostics.push({
+            rule: 'accessibility',
             message: `onClick on <${tag}> at line ${line} without role and tabIndex. Non-interactive elements with click handlers are not keyboard-accessible. Add role='button' and tabIndex={0}, or use <button>.`,
             line,
             column,
@@ -405,6 +535,7 @@ function checkControlledInput(node, sf, diagnostics) {
     if (!props.has('onInput') && !props.has('onChange')) {
         const { line, column } = pos(node, sf);
         diagnostics.push({
+            rule: 'controlled-input',
             message: `Controlled input at line ${line}: reactive 'value' binding without 'onInput' handler. The binding will overwrite user input on every state update.`,
             line,
             column,
@@ -447,6 +578,7 @@ function checkChildStaticProps(node, sf, diagnostics) {
         if (ts.isObjectLiteralExpression(prop.initializer)) {
             const { line, column } = pos(node, sf);
             diagnostics.push({
+                rule: 'child-static-props',
                 message: `child() at line ${line}: 'props' is a static object literal. It must be a reactive accessor function (s => ({ ... })) so props update when parent state changes.`,
                 line,
                 column,
@@ -477,6 +609,7 @@ function checkChildStaticProps(node, sf, diagnostics) {
                 const kind = ts.isArrayLiteralExpression(init) ? 'array' : 'object';
                 const { line, column } = pos(keyProp, sf);
                 diagnostics.push({
+                    rule: 'child-static-props',
                     message: `child() at line ${line}: the 'props' accessor returns a fresh ${kind} literal for '${keyName}'. Prop diffing uses Object.is per key, so a freshly-constructed reference reports changed every render — propsMsg will fire on every parent update. Hoist to a module-level constant, reuse a reference from state, or return null from propsMsg when the value is unchanged.`,
                     line,
                     column,
@@ -507,52 +640,9 @@ function getReturnedObjectLiteral(fn) {
     return null;
 }
 // ── Bitmask overflow warning ────────────────────────────────────
-function collectStatePaths(sf) {
-    const paths = new Set();
-    function visit(node) {
-        if ((ts.isArrowFunction(node) || ts.isFunctionExpression(node)) &&
-            node.parameters.length === 1) {
-            const param = node.parameters[0].name;
-            if (ts.isIdentifier(param)) {
-                // Check if this looks like a reactive accessor
-                const parent = node.parent;
-                if (ts.isPropertyAssignment(parent)) {
-                    const key = parent.name;
-                    if (ts.isIdentifier(key) && !/^on[A-Z]/.test(key.text)) {
-                        extractAccessPaths(node.body, param.text, paths);
-                    }
-                }
-                else if (ts.isCallExpression(parent) && parent.arguments[0] === node) {
-                    extractAccessPaths(node.body, param.text, paths);
-                }
-            }
-        }
-        ts.forEachChild(node, visit);
-    }
-    visit(sf);
-    return paths;
-}
-function extractAccessPaths(node, paramName, paths) {
-    if (ts.isPropertyAccessExpression(node)) {
-        const chain = resolveSimpleChain(node, paramName);
-        if (chain)
-            paths.add(chain);
-    }
-    ts.forEachChild(node, (child) => extractAccessPaths(child, paramName, paths));
-}
-function resolveSimpleChain(node, paramName) {
-    const parts = [];
-    let current = node;
-    while (ts.isPropertyAccessExpression(current)) {
-        parts.unshift(current.name.text);
-        current = current.expression;
-    }
-    if (!ts.isIdentifier(current) || current.text !== paramName)
-        return null;
-    if (parts.length > 2)
-        return parts.slice(0, 2).join('.');
-    return parts.join('.');
-}
+// The path-scan walker lives in `collect-deps.ts` and is shared with
+// the runtime bit-assignment path. Keeping one scanner means one truth
+// about what counts as a reactive accessor.
 function checkBitmaskOverflow(node, sf, diagnostics, paths) {
     // Only emit once, on the component() call
     if (!ts.isCallExpression(node))
@@ -585,12 +675,32 @@ function checkBitmaskOverflow(node, sf, diagnostics, paths) {
     }
     const breakdown = sorted.map(([field, n]) => `${field} (${n})`).join(', ');
     const candidateList = candidates.map((f) => `\`${f}\``).join(', ');
+    // Co-occurrence analysis: identify top-level fields whose every
+    // sub-path always fires in the same accessor sets. Those are prime
+    // candidates to read as a single object — the parent path (one bit)
+    // replaces multiple sub-paths (one bit each), saving (count - 1) bits
+    // toward the 31 limit without the larger surgery that `child()`
+    // extraction requires.
+    const accessorSets = collectAccessorPathSets(sf);
+    const cooccurringFields = findCooccurringFields(paths, accessorSets);
+    const cooccurrenceNote = cooccurringFields.length > 0
+        ? `\n\nCo-occurrence detected: ` +
+            cooccurringFields
+                .map(({ field, saved }) => `every sub-path under \`${field}\` always fires together; reading \`s.${field}\` as one unit saves ${saved} bit${saved === 1 ? '' : 's'}`)
+                .join('; ') +
+            `. Bundle those reads into a single \`s.${cooccurringFields[0].field}\` ` +
+            `access (e.g. \`const ${cooccurringFields[0].field} = s.${cooccurringFields[0].field}\`) ` +
+            `before extraction — cheaper refactor, same budget relief.`
+        : '';
     diagnostics.push({
+        rule: 'bitmask-overflow',
         message: `Component at line ${line} has ${pathCount} unique state access paths ` +
             `(${overflow} past the 31-path limit). Paths 32..${pathCount} fall back to ` +
             `FULL_MASK — their changes re-evaluate every binding in the component, ` +
             `negating the bitmask optimization for those updates.\n\n` +
-            `Top-level fields by path count: ${breakdown}.\n\n` +
+            `Top-level fields by path count: ${breakdown}.` +
+            cooccurrenceNote +
+            `\n\n` +
             `Recommended fix: extract ${candidateList} into ${candidates.length === 1 ? 'a' : ''} ` +
             `child component${candidates.length === 1 ? '' : 's'} via \`child()\` ` +
             `(see /api/dom#child). Each child gets its own 31-path bitmask, so the ` +
@@ -601,4 +711,136 @@ function checkBitmaskOverflow(node, sf, diagnostics, paths) {
         column,
     });
 }
+/**
+ * Identify top-level fields whose every sub-path fires in the SAME set
+ * of accessors — the signature of paths that could share a single bit
+ * if the author read the parent object as one unit. Returns a list of
+ * `{ field, saved }` records where `saved = sub-path count - 1` (the
+ * bits freed by collapsing to the parent read).
+ *
+ * Only meaningful for fields with 2+ sub-paths; single-path top-level
+ * fields already occupy exactly one bit.
+ */
+function findCooccurringFields(paths, accessorSets) {
+    // Group paths by top-level field. Only fields whose depth-2 paths
+    // uniformly share the same appearance-signature are candidates.
+    const subPathsByTop = new Map();
+    for (const p of paths) {
+        const dot = p.indexOf('.');
+        if (dot < 0)
+            continue; // depth-1 path — no bundling opportunity
+        const top = p.slice(0, dot);
+        const arr = subPathsByTop.get(top) ?? [];
+        arr.push(p);
+        subPathsByTop.set(top, arr);
+    }
+    // For each path, record the set of accessors that read it.
+    const appearances = new Map();
+    for (let i = 0; i < accessorSets.length; i++) {
+        for (const path of accessorSets[i]) {
+            if (!appearances.has(path))
+                appearances.set(path, new Set());
+            appearances.get(path).add(i);
+        }
+    }
+    const out = [];
+    for (const [field, subPaths] of subPathsByTop) {
+        if (subPaths.length < 2)
+            continue;
+        // Compute the signature for each sub-path and check they all match.
+        const first = appearances.get(subPaths[0]) ?? new Set();
+        let uniform = true;
+        for (let i = 1; i < subPaths.length; i++) {
+            const set = appearances.get(subPaths[i]) ?? new Set();
+            if (!setsEqual(first, set)) {
+                uniform = false;
+                break;
+            }
+        }
+        if (uniform)
+            out.push({ field, saved: subPaths.length - 1 });
+    }
+    return out.sort((a, b) => b.saved - a.saved);
+}
+function setsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const x of a)
+        if (!b.has(x))
+            return false;
+    return true;
+}
+// ── scope/branch `on` reads no state ────────────────────────────
+// If the discriminant accessor doesn't read any state paths, the key
+// never changes after mount and the subtree never rebuilds. Likely a
+// bug — warn so the author can verify intent.
+function checkStaticOn(node, sf, diagnostics) {
+    if (!ts.isCallExpression(node))
+        return;
+    if (!ts.isIdentifier(node.expression))
+        return;
+    const name = node.expression.text;
+    if (name !== 'scope' && name !== 'branch')
+        return;
+    const optsArg = node.arguments[0];
+    if (!optsArg || !ts.isObjectLiteralExpression(optsArg))
+        return;
+    const onProp = optsArg.properties.find((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === 'on');
+    if (!onProp)
+        return;
+    const onValue = onProp.initializer;
+    if (!ts.isArrowFunction(onValue) && !ts.isFunctionExpression(onValue))
+        return;
+    // Extract paths rooted at `on`'s single parameter. Zero-param
+    // on (`on: () => 'x'`) definitionally reads no state and must warn.
+    const params = onValue.parameters;
+    const paths = new Set();
+    if (params.length === 1) {
+        const param = params[0].name;
+        if (!ts.isIdentifier(param))
+            return;
+        collectPathsInBody(onValue.body, param.text, paths);
+    }
+    else if (params.length !== 0) {
+        return;
+    }
+    if (paths.size > 0)
+        return;
+    const { line, column } = pos(node, sf);
+    diagnostics.push({
+        rule: 'static-on',
+        message: `${name}() at line ${line}: 'on' reads no state — the key never ` +
+            `changes, so the subtree mounts once and never rebuilds. ` +
+            `Is this intentional? If so, consider replacing with a static ` +
+            `builder; if not, reference the state field(s) that drive the ` +
+            `discriminant.`,
+        line,
+        column,
+    });
+}
+// Minimal state-path extractor used only by checkStaticOn; it needs the
+// same "chain rooted at paramName" logic as the shared collector but
+// without walking into nested reactive-accessor arrows (we only care
+// about reads inside `on`'s immediate body).
+function collectPathsInBody(body, paramName, out) {
+    if (ts.isPropertyAccessExpression(body)) {
+        const parts = [];
+        let current = body;
+        while (ts.isPropertyAccessExpression(current)) {
+            parts.unshift(current.name.text);
+            current = current.expression;
+        }
+        if (ts.isIdentifier(current) && current.text === paramName) {
+            out.add(parts.slice(0, 2).join('.'));
+        }
+    }
+    if (ts.isElementAccessExpression(body)) {
+        if (ts.isIdentifier(body.expression) &&
+            body.expression.text === paramName &&
+            ts.isStringLiteral(body.argumentExpression)) {
+            out.add(body.argumentExpression.text);
+        }
+    }
+    ts.forEachChild(body, (child) => collectPathsInBody(child, paramName, out));
+}
 //# sourceMappingURL=diagnostics.js.map