@vesk/compiler 0.2.26 → 0.2.28

package/dist/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAoBxD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,WAAW,GAAE,MAAU,GAAG,MAAM,GAAG,IAAI,CAWrG;AAqCD,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAI,EAAE,KAAK,SAAI,GAAG,MAAM,CAkBrG;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgBD,qBAAa,SAAU,SAAQ,KAAK;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;gBAEF,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,gBAAqB;IAYxD,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IA6BnG,MAAM,CAAC,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAmB3D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAkBvF,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAkBvF,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAO3G,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAWvG,MAAM,CAAC,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAkB/G,QAAQ,IAAI,MAAM;IA0BlB,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAclC"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAoBxD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,WAAW,GAAE,MAAU,GAAG,MAAM,GAAG,IAAI,CAWrG;AAqCD,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAI,EAAE,KAAK,SAAI,GAAG,MAAM,CAkBrG;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgBD,qBAAa,SAAU,SAAQ,KAAK;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;gBAEF,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,gBAAqB;IAYxD,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IA8BnG,MAAM,CAAC,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAoB3D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAmBvF,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAmBvF,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAO3G,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,GAAE,MAAM,EAAO,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAYvG,MAAM,CAAC,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS;IAmB/G,MAAM,CAAC,cAAc,CAAC,OAAO,GAAE,gBAAgB,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAO,GAAG,SAAS;IAmBpF,QAAQ,IAAI,MAAM;IA0BlB,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAclC"}

package/dist/errors.js

@@ -142,6 +142,7 @@ export class VeskError extends Error {
         }
         return new VeskError(msg, {
             ...context,
+            code: context.code || 'V0401',
             suggestions: [name, ...allCandidates.slice(0, 8)],
             nextSteps,
             tip: isBuiltin
@@ -152,6 +153,7 @@ export class VeskError extends Error {
     static classDecl(context = {}) {
         return new VeskError('class declarations are not supported inside Vesk components.', {
             ...context,
+            code: context.code || 'V0402',
             suggestions: [
                 'Use a plain object: const obj = { ... };',
                 'Use a factory function: function create() { return { ... }; }',
@@ -167,6 +169,7 @@ export class VeskError extends Error {
     static serverBlockInClient(compName, context = {}) {
         return new VeskError(`{#server} block found in client island "${compName}". Client islands render on both server and client, so {#server} blocks have no effect.`, {
             ...context,
+            code: context.code || 'V0403',
             suggestions: [
                 `Remove the {#server} block from "${compName}".`,
                 `Or remove the \`client\` keyword from "${compName}" declaration.`,
@@ -181,6 +184,7 @@ export class VeskError extends Error {
     static clientBlockInServer(compName, context = {}) {
         return new VeskError(`{#client} block found in component "${compName}", but this component is not a client island. {#client} blocks are only allowed inside components declared with the \`client\` keyword.`, {
             ...context,
+            code: context.code || 'V0404',
             suggestions: [
                 `Add \`client\`: \`component ${compName} client { ... }\``,
                 `Or remove the {#client}...{/client} block.`,
@@ -201,6 +205,7 @@ export class VeskError extends Error {
     static configError(msg, validOptions = [], context = {}) {
         return new VeskError(msg, {
             ...context,
+            code: context.code || 'V0405',
             suggestions: validOptions.length ? [`Valid options: ${validOptions.join(', ')}`] : [],
             nextSteps: [
                 'Check your vesk.config file for typos.',
@@ -211,6 +216,7 @@ export class VeskError extends Error {
     static asyncChildInSyncParent(parentName, childName, context = {}) {
         return new VeskError(`Component "${parentName}" renders "<${childName} />", but "<${childName} />" is async and "${parentName}" is not declared async.`, {
             ...context,
+            code: context.code || 'V0406',
             suggestions: [
                 `Declare the parent async: \`async component ${parentName} ...\``,
             ],
@@ -222,8 +228,23 @@ export class VeskError extends Error {
             tip: `A component that renders an async component must itself be async so the renderer can await it before serializing the HTML. Async components also include components that call \`useFetch\`.`,
         });
     }
+    static attrJsxElement(context = {}) {
+        return new VeskError(`Attribute "${context.attr ?? ''}" on an HTML element is given a JSX element value. DOM attributes hold plain values — JSX elements belong to content or to a component prop (where they become a content slot).`, {
+            ...context,
+            code: context.code || 'V0407',
+            suggestions: [
+                'Pass the element as a child instead: <div>{ <yourElement /> }</div>',
+                'If the component accepts it, pass the element as a component prop instead of an HTML attribute.',
+            ],
+            nextSteps: [
+                'Move the JSX element into the element\'s content so it renders as a child node.',
+                'Component props can hold JSX elements — they are threaded as content slots and read back with {props.<name>}.',
+            ],
+            tip: 'JSX elements are content. They render inside an element or travel as a component prop — never as an attribute value on an HTML tag.',
+        });
+    }
     toString() {
-        let out = `[vesk] ${this.message}`;
+        let out = this.code ? `[vesk ${this.code}] ${this.message}` : `[vesk] ${this.message}`;
         if (this.file) {
             out += `\n  File: ${this.file}`;
             if (this.line) {

package/dist/ir-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ir-generator.d.ts","sourceRoot":"","sources":["../src/ir-generator.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EAoBP,MAAM,uBAAuB,CAAC;AA0L/B,wBAAgB,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkCnL;AAg0BD,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CA2Q9E"}
+{"version":3,"file":"ir-generator.d.ts","sourceRoot":"","sources":["../src/ir-generator.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EAsBP,MAAM,uBAAuB,CAAC;AA0S/B,wBAAgB,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkCnL;AA07BD,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAwN9E"}

package/dist/ir-generator.js

@@ -1,12 +1,20 @@
-import { IRRoot, ComponentIR, StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, WhileLoop, SwitchBlock, TryCatch, RuntimeStatement, ForLoop, TrackDecl, ComponentRef, ComponentCall, ServerBlock, ClientBlock, HeadBlock, Expression, SlotNode, } from '@vesk/compiler/src/ir';
+import { IRRoot, ComponentIR, StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, WhileLoop, SwitchBlock, TryCatch, RuntimeStatement, ForLoop, TrackDecl, ComponentRef, ComponentCall, ServerBlock, ClientBlock, HeadBlock, Expression, SlotNode, PropSlot, PropSlotRender, } from '@vesk/compiler/src/ir';
 import { VeskError, codeFrame } from '@vesk/compiler/src/errors';
 import { createBaseParser } from '@vesk/compiler/src/parser';
 import { skipWhitespace, findBalancedEnd, splitTopLevel, startsWithIdentifier, stripDeclKeyword, isWhitespaceChar, collapseNewlineWhitespace } from '@vesk/compiler/src/scan';
 import { stripCodeTypes } from '@vesk/compiler/src/strip-ts';
 import { stripTypeImport } from '@vesk/compiler/src/vsk-imports';
 import { importBindingPairs } from '@vesk/compiler/src/module-imports';
-import { collectCalledIdentifiers, extractImportNames, importModuleTarget } from '@vesk/compiler/src/tokens';
+import { extractImportNames, importModuleTarget } from '@vesk/compiler/src/tokens';
 let __vskAnnotations = [];
+/**
+ * Prop names of the component currently being processed that are declared as
+ * renderable content (`*: Component`) and are therefore threaded through the
+ * slot channel. A content read `{props.<name>}` of such a prop compiles to
+ * {@link PropSlotRender} instead of a value binding, so the child can render a
+ * slot handed to it by a caller that wrote `name={<div/>}`.
+ */
+let __slotProps = null;
 function parseExprNode(text) {
     try {
         const ParserClass = createBaseParser();
@@ -39,6 +47,34 @@ function getForClauseAnnotation(forStart) {
 function getSource(source, node) {
     return source.slice(node.start, node.end);
 }
+/**
+ * Returns the source text for a loop/map binding pattern, preserving
+ * destructuring (`[a, b]`, `{x, y}`, defaults, rest) while stripping a
+ * top-level TS type annotation (`[a, b]: T` → `[a, b]`). Plain identifiers
+ * return their name directly so `const x: T` still yields `x`.
+ */
+function patternSource(source, node) {
+    if (!node)
+        return 'item';
+    if (node.type === 'Identifier')
+        return node.name ?? 'item';
+    const end = node.typeAnnotation ? node.typeAnnotation.start : node.end;
+    const text = source.slice(node.start, end).trim();
+    return text || 'item';
+}
+function mapParamSource(source, param) {
+    if (!param)
+        return 'item';
+    if (param.type === 'Identifier')
+        return param.name ?? 'item';
+    const end = param.typeAnnotation ? param.typeAnnotation.start : param.end;
+    if (typeof param.start === 'number' && typeof end === 'number') {
+        const text = source.slice(param.start, end).trim();
+        if (text)
+            return text;
+    }
+    return 'item';
+}
 function collectComponentCalls(nodes, out) {
     for (const n of nodes) {
         if (n instanceof ComponentCall) {
@@ -48,6 +84,9 @@ function collectComponentCalls(nodes, out) {
         else if (n instanceof StaticNode || n instanceof ServerBlock || n instanceof ClientBlock || n instanceof HeadBlock) {
             collectComponentCalls(n.children, out);
         }
+        else if (n instanceof PropSlot) {
+            collectComponentCalls(n.body, out);
+        }
         else if (n instanceof MapRegion) {
             collectComponentCalls(n.bodyTemplate, out);
             collectComponentCalls(n.alternateNodes, out);
@@ -129,6 +168,92 @@ function estreeCallsFetch(ast) {
     }
     return false;
 }
+/**
+ * The simple identifier a member chain *ends* in (`a.b.c` → `c`), or null when
+ * the object doesn't end in a bare name token — mirrors the tokenizer's "name
+ * two tokens before the call paren" rule so `a.b(` and `a?.b(` surface `a`,
+ * `a.b.c(` surfaces `b`, while `this.b(`, `a[0].b(` and `a(x).b(` surface
+ * nothing.
+ */
+function memberReceiverName(obj) {
+    if (!obj || typeof obj !== 'object')
+        return null;
+    const rec = obj;
+    if (rec.type === 'Identifier' && typeof rec.name === 'string')
+        return rec.name;
+    const prop = rec.type === 'MemberExpression' && !rec.computed ? rec.property : null;
+    if (prop && typeof prop === 'object' && prop.type === 'Identifier') {
+        const propName = prop.name;
+        if (typeof propName === 'string')
+            return propName;
+    }
+    return null;
+}
+/**
+ * Single-pass ESTree walk collecting every simple call target in `ast` —
+ * identifiers invoked directly (`fn(` / `fn<T>(`, constructor calls included)
+ * and the receiver name of a bare member call (`a.b(` → `a`, `a.b?.c(` → `b`)
+ * — plus every JSX element tag name. Mirrors the semantics of
+ * `collectCalledIdentifiers` over the equivalent text, so one walk of the
+ * already-parsed tree replaces re-tokenizing each IR raw fragment.
+ */
+function collectCallAndJsxTargets(ast) {
+    const targets = new Set();
+    const stack = [ast];
+    while (stack.length > 0) {
+        const candidate = stack.pop();
+        if (!candidate || typeof candidate !== 'object')
+            continue;
+        const node = candidate;
+        if (typeof node.type === 'string') {
+            if (node.type === 'CallExpression' || node.type === 'NewExpression') {
+                const callee = node.callee;
+                if (callee && typeof callee === 'object') {
+                    const c = callee;
+                    if (c.type === 'Identifier' && typeof c.name === 'string' && node.optional !== true) {
+                        targets.add(c.name);
+                    }
+                    else if (c.type === 'MemberExpression' && !c.computed && node.optional !== true) {
+                        const receiverName = memberReceiverName(c.object);
+                        if (receiverName)
+                            targets.add(receiverName);
+                    }
+                }
+            }
+            else if (node.type === 'JSXElement') {
+                const opening = node.openingElement;
+                const tag = opening && typeof opening === 'object' ? opening.name : null;
+                if (tag && typeof tag === 'object') {
+                    const t = tag;
+                    if (t.type === 'JSXIdentifier' && typeof t.name === 'string') {
+                        targets.add(t.name);
+                    }
+                    else if (t.type === 'JSXMemberExpression') {
+                        const prop = t.property;
+                        if (prop && typeof prop === 'object' && prop.type === 'JSXIdentifier') {
+                            const propName = prop.name;
+                            if (typeof propName === 'string')
+                                targets.add(propName);
+                        }
+                    }
+                }
+            }
+            for (const key of Object.keys(node)) {
+                if (key === 'parent' || key === 'loc' || key === 'start' || key === 'end' || key === 'range')
+                    continue;
+                const value = node[key];
+                if (Array.isArray(value)) {
+                    for (const item of value)
+                        stack.push(item);
+                }
+                else {
+                    stack.push(value);
+                }
+            }
+        }
+    }
+    return targets;
+}
 function componentUsesFetch(nodes) {
     for (const node of nodes) {
         if (node instanceof ServerBlock || node instanceof ClientBlock) {
@@ -281,10 +406,99 @@ function processAttribute(source, attr) {
         const expr = attr.value.expression;
         if (expr.type === 'Literal')
             return { name, value: String(expr.value) };
+        // A JSX element can never be a DOM attribute value — elements belong to
+        // content/slots, not to an attribute slot on an HTML tag. Surfacing a real
+        // error here beats a raw `(<div/>)` leaking into compiled JS (the previous
+        // behavior crashed with a runtime SyntaxError deep inside codegen).
+        if (containsJSX(expr)) {
+            throw VeskError.attrJsxElement({ attr: name });
+        }
         return { name, value: toExpression(source, expr) };
     }
     return { name, value: '' };
 }
+/**
+ * True when `node` (an expression AST) contains a JSX element or fragment
+ * anywhere in its subtree — used to distinguish slot-bearing prop values
+ * (`trigger={<Button/>}`, `trigger={open ? <A/> : <B/>}`) from plain ones
+ * (`align={'end'}`, `count={n + 1}`).
+ */
+function containsJSX(node) {
+    if (!node || typeof node !== 'object')
+        return false;
+    if (node.type === 'JSXElement' || node.type === 'JSXFragment')
+        return true;
+    if (node.type === 'JSXExpressionContainer')
+        return containsJSX(node.expression);
+    // TS-only position holders (type annotations, parameter names) never contain
+    // JSX — skipping them avoids walking TS structure.
+    for (const key of [
+        'expression', 'object', 'property', 'callee', 'arguments', 'test',
+        'consequent', 'alternate', 'left', 'right', 'init', 'elements', 'params', 'body',
+    ]) {
+        const child = node[key];
+        if (Array.isArray(child)) {
+            for (const c of child)
+                if (containsJSX(c))
+                    return true;
+        }
+        else if (child && containsJSX(child)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Returns the prop name when `expr` is a bare `props.<name>` read, else null.
+ */
+function slotReadPropName(expr) {
+    if (expr.type === 'MemberExpression' && !expr.computed &&
+        expr.object.type === 'Identifier' && expr.object.name === 'props' &&
+        expr.property.type === 'Identifier') {
+        return expr.property.name;
+    }
+    return null;
+}
+/**
+ * Parses an inline component props type (`{ trigger: Component; ... }`) and
+ * returns the set of prop names declared as renderable content — any member
+ * whose type text mentions `Component`. Those props may be handed a JSX
+ * element at the call site and are read back with `{props.<name>}` as slots.
+ */
+function slotPropNamesFromType(propsType) {
+    const out = new Set();
+    if (!propsType)
+        return out;
+    const trimmed = propsType.trim();
+    if (trimmed.startsWith('{')) {
+        const inner = findBalancedEnd(trimmed, 0) === trimmed.length - 1
+            ? trimmed.slice(1, -1)
+            : trimmed;
+        for (const part of splitTopLevel(inner, ';')) {
+            const colon = findTopLevelColon(part);
+            if (colon === -1)
+                continue;
+            const namePart = part.slice(0, colon).trim().replace(/^\$/, '').replace(/\?$/, '').trim();
+            const typePart = part.slice(colon + 1).trim();
+            if (namePart && typePart.includes('Component'))
+                out.add(namePart);
+        }
+    }
+    return out;
+}
+function findTopLevelColon(text) {
+    let depth = 0;
+    for (let i = 0; i < text.length; i++) {
+        const ch = text[i];
+        if (ch === '(' || ch === '[' || ch === '{' || ch === '<')
+            depth++;
+        else if (ch === ')' || ch === ']' || ch === '}')
+            depth = Math.max(0, depth - 1);
+        else if (ch === ':' && depth === 0)
+            return i;
+    }
+    return -1;
+}
 /**
  * Recognizes a statement-mode `if (cond)` opening among JSX children.
  * Returns the condition source, or null when `text` does not open an if
@@ -433,7 +647,7 @@ function processJSXChildren(source, children) {
                     const exprText = ofParts[1].trim();
                     const arrExpr = new Expression(exprText, [], parseExprNode(exprText), null);
                     const rawFor = hasForPrefix(child.value);
-                    const ann = rawFor ? getForClauseAnnotation(child.start + rawFor) : null;
+                    const ann = rawFor !== -1 ? getForClauseAnnotation(child.start + rawFor) : null;
                     const keyExpr = ann?.keyRange ? new Expression(source.slice(ann.keyRange[0], ann.keyRange[1])) : null;
                     const indexVar = ann?.indexName ?? null;
                     let alternate = [];
@@ -470,7 +684,7 @@ function processJSXChildren(source, children) {
             }
             if (isMapCall(expr)) {
                 const arrowFn = expr.arguments[0];
-                const itemVar = arrowFn.params[0]?.name ?? 'item';
+                const itemVar = mapParamSource(source, arrowFn.params[0]);
                 const indexVar = arrowFn.params[1]?.name ?? null;
                 const bodyNodes = processJSXCallbackBody(source, arrowFn.body);
                 const arrayExpr = toExpression(source, expr.callee.object);
@@ -502,6 +716,16 @@ function processJSXChildren(source, children) {
                 i++;
                 continue;
             }
+            // A content read of a component-declared slot prop (`{props.trigger}`)
+            // must render the threaded content — not stringify a fragment.
+            {
+                const slotName = slotReadPropName(expr);
+                if (slotName !== null && __slotProps !== null && __slotProps.has(slotName)) {
+                    result.push(new PropSlotRender(slotName));
+                    i++;
+                    continue;
+                }
+            }
             result.push(new DynamicBinding(toExpression(source, expr)));
             i++;
         }
@@ -557,7 +781,7 @@ function exprToIR(source, expr) {
     }
     if (isMapCall(expr)) {
         const arrowFn = expr.arguments[0];
-        const itemVar = arrowFn.params[0]?.name ?? 'item';
+        const itemVar = mapParamSource(source, arrowFn.params[0]);
         const indexVar = arrowFn.params[1]?.name ?? null;
         const bodyNodes = processJSXCallbackBody(source, arrowFn.body);
         const arrayExpr = toExpression(source, expr.callee.object);
@@ -580,6 +804,19 @@ function exprToIR(source, expr) {
         const consequent = exprToIR(source, expr.right);
         return [new OpaqueDynamicRegion(condExpr, consequent)];
     }
+    // `props.children` (or bare `children`) inside an expression branch must
+    // insert the slot nodes — not degrade to a text binding that stringifies
+    // the fragment (`String(props.children)` → "[object DocumentFragment]").
+    if ((expr.type === 'MemberExpression' && !expr.computed &&
+        expr.object.type === 'Identifier' && expr.object.name === 'props' &&
+        expr.property.type === 'Identifier' && expr.property.name === 'children')
+        || (expr.type === 'Identifier' && expr.name === 'children')) {
+        return [new SlotNode()];
+    }
+    const slotName = slotReadPropName(expr);
+    if (slotName !== null && __slotProps !== null && __slotProps.has(slotName)) {
+        return [new PropSlotRender(slotName)];
+    }
     return [new DynamicBinding(toExpression(source, expr))];
 }
 /**
@@ -633,18 +870,18 @@ function processJSXElement(source, element) {
     // actual in-scope value instead of `document.createElement("it.icon")` or a
     // registry lookup by dotted string.
     if (nameNode && nameNode.type === 'JSXMemberExpression') {
-        const { props, spreadProps } = extractProps(source, element);
+        const { props, spreadProps, slots } = extractProps(source, element);
         const children = selfClosing ? [] : processJSXChildren(source, element.children || []);
-        return [new ComponentCall(tagName, props, children, spreadProps, element.start, getSource(source, nameNode))];
+        return [new ComponentCall(tagName, props, [...children, ...slots.map((s) => new PropSlot(s.name, s.nodes))], spreadProps, element.start, getSource(source, nameNode))];
     }
     if (!isHTMLTag(tagName) && selfClosing) {
-        const { props, spreadProps } = extractProps(source, element);
-        return [new ComponentCall(tagName, props, [], spreadProps, element.start)];
+        const { props, spreadProps, slots } = extractProps(source, element);
+        return [new ComponentCall(tagName, props, slots.map((s) => new PropSlot(s.name, s.nodes)), spreadProps, element.start)];
     }
     if (!isHTMLTag(tagName)) {
-        const { props, spreadProps } = extractProps(source, element);
+        const { props, spreadProps, slots } = extractProps(source, element);
         const children = processJSXChildren(source, element.children || []);
-        return [new ComponentCall(tagName, props, children, spreadProps, element.start)];
+        return [new ComponentCall(tagName, props, [...children, ...slots.map((s) => new PropSlot(s.name, s.nodes))], spreadProps, element.start)];
     }
     const attributes = element.openingElement.attributes
         .filter((attr) => attr.type !== 'JSXSpreadAttribute')
@@ -677,22 +914,34 @@ function processJSXElement(source, element) {
 function extractProps(source, element) {
     const props = [];
     const spreadProps = [];
+    const slots = [];
     for (const attr of element.openingElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
             spreadProps.push(toExpression(source, attr.argument));
         }
         else {
-            props.push({
-                name: attr.name.type === 'JSXIdentifier' ? attr.name.name : getSource(source, attr.name),
-                value: attr.value === null
-                    ? new Expression('true')
-                    : attr.value.type === 'JSXExpressionContainer'
-                        ? toExpression(source, attr.value.expression)
-                        : new Expression(JSON.stringify(attr.value.value)),
-            });
+            const name = attr.name.type === 'JSXIdentifier' ? attr.name.name : getSource(source, attr.name);
+            let value;
+            if (attr.value === null) {
+                value = new Expression('true');
+            }
+            else if (attr.value.type === 'JSXExpressionContainer') {
+                const expr = attr.value.expression;
+                // JSX elements as prop values are named content slots (`trigger={<Button/>}`),
+                // not scalar values — the call site hoists them into the slot channel.
+                if (containsJSX(expr)) {
+                    slots.push({ name, nodes: exprToIR(source, expr) });
+                    continue;
+                }
+                value = toExpression(source, expr);
+            }
+            else {
+                value = new Expression(JSON.stringify(attr.value.value));
+            }
+            props.push({ name, value });
         }
     }
-    return { props, spreadProps };
+    return { props, spreadProps, slots };
 }
 function buildGuardChain(source, guardClauses, mainReturn) {
     const mainBody = [];
@@ -842,9 +1091,16 @@ function processIfStatement(source, stmt) {
 function processForStatement(source, stmt, alternate = []) {
     if (stmt.type === 'ForOfStatement') {
         const left = stmt.left;
-        const itemVar = left.type === 'VariableDeclaration'
-            ? left.declarations[0]?.id?.name ?? 'item'
-            : left.name ?? 'item';
+        let itemVar = 'item';
+        if (left.type === 'VariableDeclaration') {
+            itemVar = patternSource(source, left.declarations[0]?.id);
+        }
+        else if (left.type === 'Identifier') {
+            itemVar = left.name ?? 'item';
+        }
+        else if (typeof left.start === 'number' && typeof left.end === 'number') {
+            itemVar = source.slice(left.start, left.end).trim() || 'item';
+        }
         const arrayExpr = toExpression(source, stmt.right);
         const bodyTemplate = processBlockBody(source, stmt.body);
         const ann = getForClauseAnnotation(stmt.start);
@@ -1112,6 +1368,7 @@ function idxOfQuote(s, from) {
 }
 export function generateIR(ast, source, filename) {
     __vskAnnotations = ast.__vskAnnotations ?? [];
+    __slotProps = null;
     const file = filename || '';
     const components = [];
     const imports = [];
@@ -1206,6 +1463,11 @@ export function generateIR(ast, source, filename) {
         const propsType = getPropsType(inner.params, source);
         const bodyStmts = inner.body.body;
         const isClientComp = !!inner.client;
+        // Slot props are declared at the component boundary (`trigger: Component`),
+        // so content reads of `props.<name>` compile to slot renders instead of
+        // value bindings for THIS component only.
+        const prevSlotProps = __slotProps;
+        __slotProps = slotPropNamesFromType(propsType);
         if (isStatementMode(bodyStmts)) {
             const raw = processStatementModeBody(source, bodyStmts, file);
             const { body, css } = extractStyle(raw);
@@ -1213,6 +1475,7 @@ export function generateIR(ast, source, filename) {
             const comp = new ComponentIR(name, paramNames, body, { mode: 'statement', exported, defaultExport, isClient: inner.client, isAsync: inner.async, ssrAwait: componentUsesFetch(body), propsType });
             comp.style = css;
             components.push(comp);
+            __slotProps = prevSlotProps;
         }
         else {
             const guardClauses = [];
@@ -1261,6 +1524,7 @@ export function generateIR(ast, source, filename) {
             const comp = new ComponentIR(name, paramNames, body, { exported, defaultExport, isClient: inner.client, isAsync: inner.async, ssrAwait: componentUsesFetch(body), propsType });
             comp.style = css;
             components.push(comp);
+            __slotProps = prevSlotProps;
         }
     }
     const asyncNames = new Set(components.filter((c) => c.isAsync || c.ssrAwait).map((c) => c.name));
@@ -1292,83 +1556,17 @@ export function generateIR(ast, source, filename) {
         'createResource', 'getAction', 'validateActionInput', 'issuesToFieldMap', 'isFormAction',
         'Show', 'For', 'Switch', 'Match',
     ];
+    // One walk of the already-parsed tree finds every auto-importable call
+    // target and JSX element name. Every IR raw the old per-fragment scan
+    // re-tokenized ("addUsedFrom" over ~15 text slices) is a subtree of this
+    // very same `ast` — nothing is lost, but the acorn tokenizer is invoked once
+    // per file instead of once per fragment.
+    const called = collectCallAndJsxTargets(ast);
     const usedFunctions = new Set();
-    const addUsedFrom = (code) => {
-        const called = collectCalledIdentifiers(code);
-        for (const fn of autoImportable) {
-            if (called.has(fn))
-                usedFunctions.add(fn);
-        }
-    };
-    for (const code of topLevelCode)
-        addUsedFrom(code);
-    for (const code of [loadFn, staticProps]) {
-        if (code)
-            addUsedFrom(code);
-    }
-    function scanForAutoImport(nodes) {
-        for (const node of nodes) {
-            if (node instanceof RuntimeStatement && node.raw) {
-                addUsedFrom(node.raw);
-            }
-            if (node instanceof TrackDecl && node.init) {
-                addUsedFrom(node.init);
-            }
-            if (node instanceof ForLoop) {
-                if (node.init)
-                    addUsedFrom(node.init);
-                if (node.update)
-                    addUsedFrom(node.update);
-                if (node.condition && node.condition.raw)
-                    addUsedFrom(node.condition.raw);
-                scanForAutoImport(node.bodyTemplate);
-            }
-            if (node instanceof WhileLoop) {
-                if (node.condition && node.condition.raw)
-                    addUsedFrom(node.condition.raw);
-                scanForAutoImport(node.bodyTemplate);
-            }
-            if (node instanceof SwitchBlock) {
-                if (node.discriminant && node.discriminant.raw)
-                    addUsedFrom(node.discriminant.raw);
-                for (const c of node.cases) {
-                    if (c.test && c.test.raw)
-                        addUsedFrom(c.test.raw);
-                    scanForAutoImport(c.body);
-                }
-            }
-            if (node instanceof TryCatch) {
-                scanForAutoImport(node.bodyTemplate);
-                scanForAutoImport(node.catchBody);
-            }
-            if (node instanceof ComponentCall) {
-                if (autoImportable.includes(node.componentName)) {
-                    usedFunctions.add(node.componentName);
-                }
-                for (const prop of node.props) {
-                    if (prop.value && prop.value.raw) {
-                        addUsedFrom(prop.value.raw);
-                    }
-                }
-                scanForAutoImport(node.children);
-            }
-            if (node instanceof MapRegion) {
-                scanForAutoImport(node.bodyTemplate);
-                scanForAutoImport(node.alternateNodes);
-            }
-            if (node instanceof OpaqueDynamicRegion) {
-                scanForAutoImport(node.consequentNodes);
-                scanForAutoImport(node.alternateNodes);
-            }
-            if (node instanceof DynamicBinding && node.expression && node.expression.raw) {
-                addUsedFrom(node.expression.raw);
-            }
-            if (node instanceof StaticNode || node instanceof ServerBlock || node instanceof ClientBlock || node instanceof HeadBlock) {
-                scanForAutoImport(node.children);
-            }
-        }
+    for (const fn of autoImportable) {
+        if (called.has(fn))
+            usedFunctions.add(fn);
     }
-    scanForAutoImport(components.flatMap(c => c.body));
     if (usedFunctions.size > 0) {
         const existing = new Set();
         for (const imp of imports) {

package/dist/ir.d.ts

@@ -104,6 +104,29 @@ export declare class ComponentCall {
 export declare class SlotNode {
     constructor();
 }
+/**
+ * A named content slot threaded to a component through a prop that was given a
+ * JSX element value at the call site (`<Popover trigger={<Button/>}>`). The
+ * prop is neither a scalar value nor JSON-able — it is renderable content, so
+ * codegen hoists the slot body and passes it under the prop name using the
+ * exact same channel as `children` (a serialized string IIFE on the server, a
+ * fresh DocumentFragment on the client). Child components draw it back with
+ * `{props.<name>}`, which compiles to a {@link PropSlotRender}.
+ */
+export declare class PropSlot {
+    propName: string;
+    body: IRNode[];
+    constructor(propName: string, body: IRNode[]);
+}
+/**
+ * A content read of a slot prop (`{props.trigger}`). The runtime value behind
+ * it is threaded through the same channel as `children`, so emitting it on the
+ * server pushes the serialized string and on the client appends the fragment.
+ */
+export declare class PropSlotRender {
+    propName: string;
+    constructor(propName: string);
+}
 export declare class WhileLoop {
     condition: Expression;
     bodyTemplate: IRNode[];
@@ -163,5 +186,5 @@ export declare class HeadBlock {
     children: IRNode[];
     constructor(children: IRNode[]);
 }
-export type IRNode = StaticNode | TextNode | DynamicBinding | OpaqueDynamicRegion | MapRegion | WhileLoop | SwitchBlock | TryCatch | ForLoop | TrackDecl | RuntimeStatement | ComponentRef | ComponentCall | ServerBlock | ClientBlock | HeadBlock | SlotNode;
+export type IRNode = StaticNode | TextNode | DynamicBinding | OpaqueDynamicRegion | MapRegion | WhileLoop | SwitchBlock | TryCatch | ForLoop | TrackDecl | RuntimeStatement | ComponentRef | ComponentCall | ServerBlock | ClientBlock | HeadBlock | SlotNode | PropSlot | PropSlotRender;
 //# sourceMappingURL=ir.d.ts.map