@vesk/compiler 0.2.26 → 0.2.28

package/dist/client-codegen.d.ts

@@ -16,6 +16,20 @@ export declare function collectTrackedNames(body: IRNode[]): Map<string, Tracked
  * normal vesk parser so TS generics and `.vsk` syntax survive.
  */
 export declare function transformTrackedInit(init: string, tracked: Map<string, TrackedInfo>): string;
+/** Shared counter for generated `$n` identifiers. */
+export type NameAlloc = {
+    c: number;
+};
+/**
+ * Allocates a disjoint `$n` name block per source file. esbuild's bundler
+ * renames colliding top-level symbols when it links a chunk, and on 0.25.x
+ * that rename can leave references inside nested closures pointing at the
+ * pre-rename name — surfacing as `$nNN is not defined` at hydration. Seeding
+ * every file from a hash of its path keeps the names globally unique so the
+ * renamer has nothing to rename. Callers without a `sourcePath` keep the
+ * historical `$n0…` numbering.
+ */
+export declare function nameAllocFor(sourcePath?: string, start?: number): NameAlloc;
 declare function isStaticIR(body: IRNode[]): boolean;
 export declare function escapeHtml(str: string): string;
 export declare function compileClient(source: string, _componentName: string | null, options?: {
@@ -24,6 +38,7 @@ export declare function compileClient(source: string, _componentName: string | n
     includeTopLevel?: boolean;
     sourcePath?: string;
     mdRoots?: string[];
+    nameAllocator?: NameAlloc;
 }): string;
 /**
  * Compiles a component source in BOTH client modes (plain + hydrate)

package/dist/client-codegen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-codegen.d.ts","sourceRoot":"","sources":["../src/client-codegen.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAuB,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAGL,cAAc,EAQd,gBAAgB,EAOjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAyCxD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAiDD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,gBAAgB,GAAG,cAAc,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAwGlI;AAID,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAU5E;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAY5F;AAk8CD,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAe3C;AA2HD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAqED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CAAO,GAAG,MAAM,CAOnN;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAqBxJ;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"client-codegen.d.ts","sourceRoot":"","sources":["../src/client-codegen.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAuB,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAGL,cAAc,EAQd,gBAAgB,EASjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAyCxD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAiDD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,gBAAgB,GAAG,cAAc,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAwGlI;AAID,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAU5E;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAY5F;AAoBD,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,SAAS,CAQtE;AAmjDD,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAe3C;AAgID,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAqED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,SAAS,CAAA;CAAO,GAAG,MAAM,CAO9O;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAwBxJ;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/client-codegen.js

@@ -2,7 +2,7 @@ import { walk } from 'zimmerframe';
 import { print } from 'esrap';
 import ts from 'esrap/languages/ts';
 import tsx from 'esrap/languages/tsx';
-import { StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, WhileLoop, SwitchBlock, TryCatch, ForLoop, TrackDecl, RuntimeStatement, ComponentRef, ComponentCall, ServerBlock, ClientBlock, HeadBlock, SlotNode, } from '@vesk/compiler/src/ir';
+import { StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, WhileLoop, SwitchBlock, TryCatch, ForLoop, TrackDecl, RuntimeStatement, ComponentRef, ComponentCall, ServerBlock, ClientBlock, HeadBlock, SlotNode, PropSlot, PropSlotRender, } from '@vesk/compiler/src/ir';
 import { parse } from '@vesk/compiler/src/parser';
 import { generateIR } from '@vesk/compiler/src/ir-generator';
 import { transformTopLevelForActions } from '@vesk/compiler/src/actions';
@@ -248,10 +248,29 @@ function indent(code, level = 1) {
     const pad = '\t'.repeat(level);
     return code.split('\n').map((l) => (l ? pad + l : '')).join('\n');
 }
+/**
+ * Allocates a disjoint `$n` name block per source file. esbuild's bundler
+ * renames colliding top-level symbols when it links a chunk, and on 0.25.x
+ * that rename can leave references inside nested closures pointing at the
+ * pre-rename name — surfacing as `$nNN is not defined` at hydration. Seeding
+ * every file from a hash of its path keeps the names globally unique so the
+ * renamer has nothing to rename. Callers without a `sourcePath` keep the
+ * historical `$n0…` numbering.
+ */
+export function nameAllocFor(sourcePath, start = 0) {
+    if (!sourcePath)
+        return { c: start };
+    let h = 0x811c9dc5;
+    for (let i = 0; i < sourcePath.length; i++) {
+        h ^= sourcePath.charCodeAt(i);
+        h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    return { c: h * 1_000_000 + start };
+}
 class Ctx {
     lines = [];
     effects = [];
-    c = 0;
+    alloc;
     importedNames = new Set();
     linkNames = new Set();
     // Runtime component imports that claim their own SSR root via `nextElement`
@@ -270,12 +289,15 @@ class Ctx {
     walker = '__hydrate';
     asyncComps = new Set();
     isAsyncScope = false;
+    constructor(alloc) {
+        this.alloc = alloc ?? { c: 0 };
+    }
     push(...args) {
         for (const a of args)
             if (a)
                 this.lines.push(a);
     }
-    n() { return `$n${this.c++}`; }
+    n() { return `$n${this.alloc.c++}`; }
     getCode() { return this.lines.join('\n'); }
     flushEffects() {
         if (this.effects.length === 0)
@@ -292,8 +314,17 @@ class Ctx {
             lines.push(`if (!document.${guard}) {`);
             lines.push(`\tdocument.${guard} = true;`);
             lines.push(`\tdocument.addEventListener(${JSON.stringify(type)}, (e) => {`);
-            lines.push(`\t\tvar el = e.target.closest('[data-vsk-ev]');`);
-            lines.push(`\t\tif (el && el.${prop}) el.${prop}(e);`);
+            // Walk up from the target to the nearest element that actually has a
+            // handler for this event. Using `closest('[data-vsk-ev]')` alone stops at
+            // the nearest event-capable element even when its handler is undefined
+            // (`<Button/>` forwards an optional onClick that was never passed), which
+            // shadows a real handler on an ancestor (e.g. a Popover trigger wrapper).
+            lines.push(`\t\tvar el = e.target;`);
+            lines.push(`\t\tif (el && el.nodeType !== 1) el = el.parentElement;`);
+            lines.push(`\t\twhile (el && el.nodeType === 1) {`);
+            lines.push(`\t\t\tif (el.${prop}) { el.${prop}(e); break; }`);
+            lines.push(`\t\t\tel = el.parentElement;`);
+            lines.push(`\t\t}`);
             lines.push(`\t});`);
             lines.push(`}`);
         }
@@ -325,7 +356,7 @@ function emitNode(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__com
     if (node instanceof OpaqueDynamicRegion)
         return emitOpaque(ctx, node, tracked, effectsVar, parentVar);
     if (node instanceof MapRegion)
-        return emitMap(ctx, node, tracked, parentVar);
+        return emitMap(ctx, node, tracked, effectsVar, parentVar);
     if (node instanceof ServerBlock)
         return null;
     if (node instanceof ClientBlock) {
@@ -353,7 +384,7 @@ function emitNode(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__com
             ctx.push(`if (props.children !== undefined && props.children !== null) {`);
             ctx.push(`  if (typeof props.children === 'function') {`);
             ctx.push(`    const __child = props.children(${ctx.walker});`);
-            ctx.push(`    if (__child && typeof __child.then === 'function') __pendingChild = __child.then(() => $root);`);
+            ctx.push(`    if (__child && typeof __child.then === 'function') __pendingChild = __child.then(() => $mount || $root);`);
             ctx.push(`  } else {`);
             ctx.push(`    ${parentVar}.appendChild(props.children);`);
             ctx.push(`  }`);
@@ -372,6 +403,32 @@ function emitNode(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__com
         return emitForLoop(ctx, node, tracked, parentVar);
     if (node instanceof SwitchBlock)
         return emitSwitchBlock(ctx, node, tracked, parentVar);
+    if (node instanceof PropSlot)
+        return null;
+    if (node instanceof PropSlotRender) {
+        const slotProp = `props.${node.propName}`;
+        if (!parentVar)
+            return null;
+        if (ctx.hydrate) {
+            ctx.push(`if (${slotProp} !== undefined && ${slotProp} !== null) {`);
+            ctx.push(`  if (typeof ${slotProp} === 'function') {`);
+            ctx.push(`    const __child = ${slotProp}(${ctx.walker});`);
+            ctx.push(`    if (__child && typeof __child.then === 'function') __pendingChild = __child.then(() => ${parentVar});`);
+            ctx.push(`  } else if (${slotProp}.nodeType !== undefined) {`);
+            ctx.push(`    ${parentVar}.appendChild(${slotProp});`);
+            ctx.push(`  } else {`);
+            ctx.push(`    ${parentVar}.appendChild(document.createTextNode(String(${slotProp})));`);
+            ctx.push(`  }`);
+            ctx.push(`}`);
+        }
+        else {
+            ctx.push(`if (${slotProp} !== undefined && ${slotProp} !== null) {`);
+            ctx.push(`  if (${slotProp}.nodeType !== undefined) ${parentVar}.appendChild(${slotProp});`);
+            ctx.push(`  else ${parentVar}.appendChild(document.createTextNode(String(${slotProp})));`);
+            ctx.push(`}`);
+        }
+        return null;
+    }
     return null;
 }
 const PROPERTY_ATTRS = {
@@ -408,9 +465,15 @@ function emitStatic(ctx, node, tracked, effectsVar) {
             children.push(child);
         }
     }
+    const dynAttrNames = new Set();
+    for (const d of dynAttrs)
+        if (d.target)
+            dynAttrNames.add(d.target);
     for (const attr of node.attributes) {
         if (attr.name.startsWith('on') && attr.name.length > 2)
             continue;
+        if (dynAttrNames.has(attr.name))
+            continue;
         if (attr.value === '') {
             ctx.push(`${el}.setAttribute(${JSON.stringify(attr.name)}, '');`);
         }
@@ -418,9 +481,24 @@ function emitStatic(ctx, node, tracked, effectsVar) {
             ctx.push(`${el}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(escapeHtml(attr.value))});`);
         }
     }
+    // Hydrate-mode A5 snapshot: exactly one text-ish child that is a reactive
+    // dynamic binding gets initialized from the claimed parent's SSR text.
+    // Computed only in hydrate mode — normal mode pays zero for this.
+    let singleReactiveText = false;
+    if (ctx.hydrate) {
+        const textKids = children.filter((c) => c instanceof TextNode || (c instanceof DynamicBinding && c.kind === 'text'));
+        singleReactiveText = textKids.length === 1 && textKids[0] instanceof DynamicBinding
+            && isReactiveExpression(textKids[0].expression, tracked);
+    }
     let residueBefore = 0;
     for (const child of children) {
-        const childVar = emitNode(ctx, child, tracked, effectsVar, el);
+        let childVar;
+        if (singleReactiveText && child instanceof DynamicBinding && child.kind === 'text') {
+            childVar = emitDynamicBinding(ctx, child, tracked, effectsVar, `${el}.__vsk_ssrText`);
+        }
+        else {
+            childVar = emitNode(ctx, child, tracked, effectsVar, el);
+        }
         if (childVar) {
             if (ctx.hydrate) {
                 // Fresh text nodes (static or dynamic) cannot be appended at the end of
@@ -467,12 +545,22 @@ function emitStatic(ctx, node, tracked, effectsVar) {
             }
             ctx.push(`${el}.setAttribute('data-vsk-ev', '');`);
         }
+        else if (target === 'style') {
+            const expr = transformTracked(attr.expression, tracked);
+            const eff = `effect(() => { applyStyle(${el}, ${expr}); })`;
+            if (effectsVar) {
+                ctx.push(`${effectsVar}.push(${eff});`);
+            }
+            else {
+                ctx.effects.push(`${eff};`);
+            }
+        }
         else {
             const expr = transformTracked(attr.expression, tracked);
             const useProp = PROPERTY_ATTRS[node.tag]?.has(target);
             const eff = useProp
                 ? `effect(() => { ${el}.${target} = ${expr}; })`
-                : `effect(() => { ${el}.setAttribute(${JSON.stringify(target)}, String(${expr})); })`;
+                : `effect(() => { const __v = ${expr}; if (__v != null && __v !== false) ${el}.setAttribute(${JSON.stringify(target)}, __v === true ? 'true' : String(__v)); })`;
             if (effectsVar) {
                 ctx.push(`${effectsVar}.push(${eff});`);
             }
@@ -627,7 +715,7 @@ function isReactiveExpression(node, tracked) {
     });
     return reactive;
 }
-function emitDynamicBinding(ctx, node, tracked, effectsVar) {
+function emitDynamicBinding(ctx, node, tracked, effectsVar, ssrTextExpr = null) {
     if (node.kind === 'attribute')
         return null;
     const expr = transformTracked(node.expression, tracked);
@@ -636,7 +724,13 @@ function emitDynamicBinding(ctx, node, tracked, effectsVar) {
         ctx.push(`const ${v} = document.createTextNode(String(${expr}));`);
         return v;
     }
-    ctx.push(`const ${v} = document.createTextNode('');`);
+    // Hydrate-mode sole-dynamic-text snapshot (Hydrate-Todo A5): initialize from
+    // the claimed parent's stashed SSR text so a missed effect degrades to stale
+    // text instead of an empty element. The effect below still overwrites on its
+    // first run, so live values are unaffected. Fresh (unclaimed) parents stash
+    // nothing and the `?? ''` keeps the old empty initial.
+    const init = ssrTextExpr ? `String(${ssrTextExpr} ?? '')` : `''`;
+    ctx.push(`const ${v} = document.createTextNode(${init});`);
     const eff = `effect(() => { ${v}.data = String(${expr}); })`;
     if (effectsVar) {
         ctx.push(`${effectsVar}.push(${eff});`);
@@ -646,6 +740,29 @@ function emitDynamicBinding(ctx, node, tracked, effectsVar) {
     }
     return v;
 }
+/**
+ * Emits a fresh DocumentFragment built from `nodes` (used for both the
+ * `children` of a component call and every named content slot). Children
+ * effects are collected into `effectsVar` (or `ctx.effects`) exactly as the
+ * component-call path does today, so slot bodies inherit identical effects,
+ * claim, and async semantics as regular children.
+ */
+function emitFragment(ctx, nodes, tracked, effectsVar) {
+    const frag = ctx.n();
+    const savedEffects = ctx.effects;
+    ctx.effects = [];
+    ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
+    for (const child of nodes) {
+        const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
+        if (childVar)
+            ctx.push(`$f.appendChild(${childVar});`);
+    }
+    for (const eff of ctx.effects)
+        ctx.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
+    ctx.effects = savedEffects;
+    ctx.push(`return $f; })();`);
+    return frag;
+}
 function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__components') {
     const propsEntries = node.props.map((p) => {
         if (typeof p.value === 'string')
@@ -661,7 +778,6 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
         const expr = transformTracked(sp, tracked);
         propsEntries.push(`...${expr}`);
     }
-    const propsObj = `{ ${propsEntries.join(', ')} }`;
     const v = ctx.n();
     // Await children whenever the calling scope is async. Async-ness is
     // parent-driven (mirroring the server side) so that imported async
@@ -671,6 +787,11 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
     // Member-expression tags (`<it.icon>`) carry the raw component-valued
     // expression — invoke it directly; it is never a registry name.
     const calleeExpr = node.calleeExpr ? `(${node.calleeExpr})` : null;
+    // Named content slots (`trigger={<Button/>}`) thread through the same channel
+    // as `children`: a fresh DocumentFragment per slot hoisted from the IR.
+    const slotChildren = node.children.filter((c) => c instanceof PropSlot);
+    const regChildren = node.children.filter((c) => !(c instanceof PropSlot));
+    const callArgs = () => `{ ${propsEntries.join(', ')} }`;
     if (ctx.hydrate) {
         const access = calleeExpr
             ?? (ctx.importedNames.has(node.componentName)
@@ -697,19 +818,20 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
                 ctx.push(`${walkerArg}.retireDetached();`);
             }
         };
-        if (node.children.length > 0) {
+        for (const slot of slotChildren) {
+            const frag = emitFragment(ctx, slot.body, tracked, effectsVar);
+            propsEntries.push(`${JSON.stringify(slot.propName)}: ${frag}`);
+        }
+        if (regChildren.length > 0) {
             const frag = ctx.n();
-            ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
-            const savedEffects = ctx.effects;
-            // Link/NavLink hydrate branches WIPE their SSR anchor (a.replaceChildren())
-            // and remount the children fragment. Suppressed fully-static children would
-            // therefore be lost, so rebuild the whole subtree fresh instead of claiming.
             const wipeMount = ctx.linkNames.has(node.componentName);
             const savedHydrate = ctx.hydrate;
             if (wipeMount)
                 ctx.hydrate = false;
+            ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
+            const savedEffects = ctx.effects;
             ctx.effects = [];
-            for (const child of node.children) {
+            for (const child of regChildren) {
                 const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
                 if (childVar)
                     ctx.push(`$f.appendChild(${childVar});`);
@@ -720,23 +842,23 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             ctx.hydrate = savedHydrate;
             ctx.push(`return $f; })();`);
             propsEntries.push(`children: ${frag}`);
-            ctx.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(', ')} }, __registry, ${walkerArg});`);
-            maybeReplace(v);
-            maybeRetire();
-            return v;
         }
-        ctx.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${walkerArg});`);
+        ctx.push(`const ${v} = ${awaitKw}${access}(${callArgs()}, __registry, ${walkerArg});`);
         maybeReplace(v);
         maybeRetire();
         return v;
     }
     else {
-        if (node.children.length > 0) {
+        for (const slot of slotChildren) {
+            const frag = emitFragment(ctx, slot.body, tracked, effectsVar);
+            propsEntries.push(`${JSON.stringify(slot.propName)}: ${frag}`);
+        }
+        if (regChildren.length > 0) {
             const frag = ctx.n();
-            ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
             const savedEffects = ctx.effects;
             ctx.effects = [];
-            for (const child of node.children) {
+            ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
+            for (const child of regChildren) {
                 const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
                 if (childVar)
                     ctx.push(`$f.appendChild(${childVar});`);
@@ -748,13 +870,13 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             propsEntries.push(`children: ${frag}`);
         }
         if (calleeExpr) {
-            ctx.push(`const ${v} = ${calleeExpr}({ ${propsEntries.join(', ')} });`);
+            ctx.push(`const ${v} = ${calleeExpr}(${callArgs()});`);
         }
         else if (ctx.importedNames.has(node.componentName)) {
-            ctx.push(`const ${v} = ${awaitKw}${node.componentName}({ ${propsEntries.join(', ')} });`);
+            ctx.push(`const ${v} = ${awaitKw}${node.componentName}(${callArgs()});`);
         }
         else {
-            ctx.push(`const ${v} = ${awaitKw}${compPrefix}[${JSON.stringify(node.componentName)}]({ ${propsEntries.join(', ')} });`);
+            ctx.push(`const ${v} = ${awaitKw}${compPrefix}[${JSON.stringify(node.componentName)}](${callArgs()});`);
         }
     }
     return v;
@@ -1373,7 +1495,7 @@ function emitSwitchBlock(ctx, node, tracked, parentVar) {
 }`);
     return null;
 }
-function emitMap(ctx, node, tracked, parentVar) {
+function emitMap(ctx, node, tracked, effTarget, parentVar) {
     const arrExpr = transformTracked(node.expression, tracked);
     const itemVar = node.itemVariable;
     const anchor = ctx.n();
@@ -1393,6 +1515,26 @@ function emitMap(ctx, node, tracked, parentVar) {
     // emitting a top-level effect there would reference the loop/statement local
     // (`col`, `pages`) which is out of scope — `ReferenceError` at hydrate.
     const reactiveSource = isReactiveExpression(node.expression, tracked);
+    // The re-render effect below closes over the anchors/reconciler declared
+    // inline above. When this map is nested inside a branch/item builder those
+    // bindings live in that nested closure — so the effect must be created in
+    // the same scope (registered on the enclosing effects array), not flushed
+    // to the component top level where the names are out of scope
+    // (`$nNN is not defined` at hydration, plus an esbuild shadowing rename).
+    const pushEffect = (lets, effCall) => {
+        if (effTarget) {
+            ctx.push(`${effTarget}.push((() => {
+    ${lets}
+    return ${effCall};
+  })());`);
+        }
+        else {
+            ctx.effects.push(`{
+  ${lets}
+  ${effCall};
+}`);
+        }
+    };
     ctx.push(`const ${anchor} = document.createComment('map');`);
     if (!hyd && !hydKeyed)
         ctx.push(`${parent}.appendChild(${anchor});`);
@@ -1480,6 +1622,13 @@ function emitMap(ctx, node, tracked, parentVar) {
     ctx.push(`const ${hasItems} = () => { const __l = ${arrExpr}; return __l != null && __l.length > 0; };`);
     if (node.keyExpr) {
         const keyExpr = transformTracked(node.keyExpr, tracked);
+        // A `key` may reference the loop's `index` variable (`for (… ; key i; index i)`).
+        // The key function is evaluated outside the item renderer (where the index is
+        // in scope), so it must receive the index as its own parameter — otherwise the
+        // emitted `item => i` key closes over an undefined `i` (ReferenceError).
+        // Parenthesize the parameters: without them `item, i => …` parses as a comma
+        // sequence expression rather than a two-parameter arrow in argument position.
+        const keyFnSrc = `(${itemVar}${node.indexVariable ? `, ${node.indexVariable}` : ''}) => ${keyExpr}`;
         const reconciler = ctx.n();
         const initList = ctx.n();
         ctx.push(`let ${reconciler} = () => {};`);
@@ -1488,10 +1637,10 @@ function emitMap(ctx, node, tracked, parentVar) {
             // inside `parent` (pre-attach, `anchor.parentNode` is null) and peeks all
             // keys before claim-by-key consumes the walker, so server-rendered items
             // are adopted and wired in place instead of being rebuilt.
-            ctx.push(`const ${initList} = () => { ${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${itemVar} => ${keyExpr}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'}, null, __root), __hydrate, ${parent}); };`);
+            ctx.push(`const ${initList} = () => { ${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'}, null, __root), __hydrate, ${parent}); };`);
         }
         else {
-            ctx.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${itemVar} => ${keyExpr}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'})); };`);
+            ctx.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'})); };`);
         }
         if (emptyRenderName) {
             const isEmptyVar = ctx.n();
@@ -1499,9 +1648,7 @@ function emitMap(ctx, node, tracked, parentVar) {
             ctx.push(`if (!${isEmptyVar}) { ${initList}(); } else { ${aw}${emptyRenderName}(); }`);
             if (!reactiveSource)
                 return null;
-            ctx.effects.push(`{
-  let __first = true;
-  effect(${effOpen}
+            pushEffect(`let __first = true;`, `effect(${effOpen}
     const __new = ${hasItems}();
     if (__first) { __first = false; __new; return; }
     if (__new !== ${isEmptyVar}) {
@@ -1513,21 +1660,17 @@ function emitMap(ctx, node, tracked, parentVar) {
     ${effectsVar}.length = 0;
     __cleanup(${anchor}, ${endAnchor});
     if (__new) { ${initList}(); } else { ${aw}${emptyRenderName}(); }
-  });
-}`);
+  })`);
         }
         else {
             ctx.push(`${initList}();`);
             if (!reactiveSource)
                 return null;
-            ctx.effects.push(`{
-  let __first = true;
-  effect(() => {
+            pushEffect(`let __first = true;`, `effect(() => {
     const __nv = ${arrExpr};
     if (__first) { __first = false; __nv; ${reconciler}(${arrExpr}); return; }
     ${reconciler}(${arrExpr});
-  });
-}`);
+  })`);
         }
     }
     else {
@@ -1560,9 +1703,7 @@ function emitMap(ctx, node, tracked, parentVar) {
                 ctx.push(`__place(${anchor}, ${endAnchor}, ${collectVar}, ${parent});`);
             if (!reactiveSource)
                 return null;
-            ctx.effects.push(`{
-  let __first = true;
-  effect(${effOpen}
+            pushEffect(`let __first = true;`, `effect(${effOpen}
     const __new = ${hasItems}();
     if (__first) { __first = false; __new; return; }
     if (__new !== ${isEmptyVar}) {
@@ -1581,8 +1722,7 @@ ${renderAllItems('        ', null)}
     if (__new) {
 ${renderAllItems('      ', null)}
     } else { ${aw}${emptyRenderName}(${collectVar ? collectVar : ''}); }
-  });
-}`);
+  })`);
         }
         else {
             const collectVar = hyd ? ctx.n() : null;
@@ -1593,17 +1733,14 @@ ${renderAllItems('      ', null)}
                 ctx.push(`__place(${anchor}, ${endAnchor}, ${collectVar}, ${parent});`);
             if (!reactiveSource)
                 return null;
-            ctx.effects.push(`{
-  let __first = true;
-  effect(${effOpen}
+            pushEffect(`let __first = true;`, `effect(${effOpen}
     const __nv = ${arrExpr};
     if (__first) { __first = false; __nv; return; }
     for (const e of ${effectsVar}) destroy_block(e);
     ${effectsVar}.length = 0;
     __cleanup(${anchor}, ${endAnchor});
 ${renderAllItems('    ', null)}
-  });
-}`);
+  })`);
         }
     }
     return null;
@@ -1611,9 +1748,9 @@ ${renderAllItems('    ', null)}
 function computeAsyncComponents(comps) {
     return new Set(comps.filter((c) => c.isAsync).map((c) => c.name));
 }
-function generateComponent(comp, importedNames = new Set(), hydrate = false, asyncComps = new Set(), linkNames = new Set(), selfClaimNames = new Set()) {
+function generateComponent(comp, importedNames = new Set(), hydrate = false, asyncComps = new Set(), linkNames = new Set(), selfClaimNames = new Set(), alloc) {
     const tracked = collectTrackedNames(comp.body);
-    const ctx = new Ctx();
+    const ctx = new Ctx(alloc);
     ctx.importedNames = importedNames;
     ctx.linkNames = linkNames;
     ctx.selfClaimNames = selfClaimNames;
@@ -1632,7 +1769,16 @@ function generateComponent(comp, importedNames = new Set(), hydrate = false, asy
         ctx.push(indent(`}`));
     }
     if (ctx.hydrate) {
+        // Two distinct roles must not be conflated:
+        //  - `$root` is the shared page container. It is only ever a last-resort
+        //    mount target for detached dynamic regions (`__place`) that could not
+        //    be claimed in place; it must never be handed back to a caller.
+        //  - `$mount` is THIS component's own first top-level node. It is what the
+        //    hydrator returns so the parent can position/guard the component. A
+        //    component's own node is never an ancestor of the caller, so the
+        //    parent's `contains()` guards and `__place` end-anchor bounds are valid.
         ctx.push(indent(`const $root = __hydrate.root;`));
+        ctx.push(indent(`let $mount = null;`));
     }
     else {
         ctx.push(indent(`const $root = document.createDocumentFragment();`));
@@ -1653,7 +1799,11 @@ function generateComponent(comp, importedNames = new Set(), hydrate = false, asy
         const v = emitNode(ctx, node, tracked, null);
         if (v) {
             if (ctx.hydrate) {
-                ctx.push(indent(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !${v}.parentNode.contains(${v})) $root.appendChild(${v}); }`));
+                // The first top-level node becomes `$mount`. Late top-level nodes are
+                // already in the DOM when claimed; only a divergent fresh node is
+                // nested onto the mount (matching the pre-marker wrapper behaviour).
+                ctx.push(indent(`if ($mount === null) $mount = ${v};`));
+                ctx.push(indent(`if (${v} !== $mount && ${v}.parentNode == null) $mount.appendChild(${v});`));
             }
             else {
                 ctx.push(indent(`$root.appendChild(${v});`));
@@ -1666,7 +1816,15 @@ function generateComponent(comp, importedNames = new Set(), hydrate = false, asy
     const delCode = ctx.emitDelegates();
     if (delCode)
         ctx.push(indent(delCode.trim()));
-    ctx.push(indent(`return __pendingChild || $root;`));
+    if (ctx.hydrate) {
+        // A hydrator with no claimable nodes must still hand its caller a value the
+        // parent guards can safely inspect (an empty fragment places nothing).
+        ctx.push(indent(`if ($mount === null) $mount = document.createDocumentFragment();`));
+        ctx.push(indent(`return __pendingChild || $mount;`));
+    }
+    else {
+        ctx.push(indent(`return __pendingChild || $root;`));
+    }
     ctx.push(indent(`} finally {`));
     ctx.push(indent(`\tsetActiveComponent(__prev);`));
     ctx.push(indent(`}`));
@@ -1680,7 +1838,7 @@ function buildParamInit(paramNames) {
         return '';
     return `const { ${paramNames.join(', ')} } = props;`;
 }
-function buildComponentMap(irRoot, hydrate = false) {
+function buildComponentMap(irRoot, hydrate = false, alloc) {
     const mapLines = [];
     mapLines.push(`const __components = {};`);
     const asyncComps = computeAsyncComponents(irRoot.components);
@@ -1721,7 +1879,7 @@ function buildComponentMap(irRoot, hydrate = false) {
             mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${stub};`);
             continue;
         }
-        const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames);
+        const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames, alloc);
         mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${code};`);
     }
     mapLines.push(`function __cleanup(start, end) {`);
@@ -1879,6 +2037,10 @@ function findBindingInIR(nodes, names) {
             if (findBindingInIR(node.children, names))
                 return true;
         }
+        else if (node instanceof PropSlot) {
+            if (findBindingInIR(node.body, names))
+                return true;
+        }
         else if (node instanceof RuntimeStatement) {
             if (astHasBinding(node.ast, names))
                 return true;
@@ -1907,6 +2069,10 @@ function findFormNameInIR(nodes, name) {
             if (findFormNameInIR(node.children, name))
                 return true;
         }
+        if (node instanceof PropSlot) {
+            if (findFormNameInIR(node.body, name))
+                return true;
+        }
         if (node instanceof DynamicBinding && node.expression && node.expression.raw) {
             if (node.expression.raw.includes(fnPattern))
                 return true;
@@ -1985,7 +2151,7 @@ function emitClientFromIR(ir, options) {
     if (!options.forceClient && !needsClient) {
         return '';
     }
-    const componentMapCode = buildComponentMap(ir, options.hydrate);
+    const componentMapCode = buildComponentMap(ir, options.hydrate, options.nameAllocator);
     const importLines = ir.imports.length > 0 ? ir.imports.join('\n') + '\n' : '';
     const topCode = (options.includeTopLevel === false ? [] : transformTopLevelForActions(ir.topLevelCode, 'client')).join('\n') + '\n';
     const exportLines = [];
@@ -2000,7 +2166,7 @@ function emitClientFromIR(ir, options) {
         }
     }
     const exportCode = exportLines.join('\n');
-    const runtimeNames = ['track', 'get', 'set', 'destroy_block', 'getActiveComponent', 'setActiveComponent', 'reactiveProps'];
+    const runtimeNames = ['track', 'get', 'set', 'destroy_block', 'getActiveComponent', 'setActiveComponent', 'reactiveProps', 'applyStyle'];
     if (ir.components.some(c => !isStaticIR(c.body)))
         runtimeNames.push('effect');
     for (const name of usedRuntimeBindings(ir))
@@ -2051,7 +2217,7 @@ export function compileClient(source, _componentName, options = {}) {
     }
     const ast = parse(source, options.sourcePath ? { filename: options.sourcePath } : {});
     const ir = generateIR(ast, source, options.sourcePath);
-    return emitClientFromIR(ir, options);
+    return emitClientFromIR(ir, { ...options, nameAllocator: options.nameAllocator ?? nameAllocFor(options.sourcePath) });
 }
 /**
  * Compiles a component source in BOTH client modes (plain + hydrate)
@@ -2080,9 +2246,12 @@ export function compileClientBoth(source, _componentName, sourcePath) {
         if (exportedComp)
             name = exportedComp.name;
     }
+    // Comp and hyd land in the same scoped file block, so they share one
+    // allocator: hyd continues after the names comp already consumed.
+    const alloc = nameAllocFor(sourcePath);
     return {
-        comp: emitClientFromIR(ir, { forceClient: true }),
-        hyd: emitClientFromIR(irHyd, { forceClient: true, hydrate: true, includeTopLevel: false }),
+        comp: emitClientFromIR(ir, { forceClient: true, nameAllocator: alloc }),
+        hyd: emitClientFromIR(irHyd, { forceClient: true, hydrate: true, includeTopLevel: false, nameAllocator: alloc }),
         name,
     };
 }

package/dist/errors.d.ts

@@ -28,6 +28,9 @@ export declare class VeskError extends Error {
     static componentNotFound(name: string, available?: string[], context?: VeskErrorOptions): VeskError;
     static configError(msg: string, validOptions?: string[], context?: VeskErrorOptions): VeskError;
     static asyncChildInSyncParent(parentName: string, childName: string, context?: VeskErrorOptions): VeskError;
+    static attrJsxElement(context?: VeskErrorOptions & {
+        attr?: string;
+    }): VeskError;
     toString(): string;
     toJSON(): Record<string, unknown>;
 }