@vesk/compiler 0.2.22 → 0.2.24

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;AAwCxD,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;AA0pCD,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAe3C;AA2HD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAoED,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,EAOjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAwCxD,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;AAw2CD,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"}

package/dist/client-codegen.js

@@ -258,6 +258,9 @@ class Ctx {
     hydrate = false;
     inTryBody = false;
     claimStatic = false;
+    // While set, the next StaticNode claimed in hydrate mode uses `__root` (the
+    // item element already claimed by key) instead of walking for a new element.
+    rootClaim = false;
     walker = '__hydrate';
     asyncComps = new Set();
     isAsyncScope = false;
@@ -343,7 +346,7 @@ function emitNode(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__com
         if (ctx.hydrate) {
             ctx.push(`if (props.children !== undefined && props.children !== null) {`);
             ctx.push(`  if (typeof props.children === 'function') {`);
-            ctx.push(`    const __child = props.children(${ctx.walker}.subWalker(${parentVar}));`);
+            ctx.push(`    const __child = props.children(${ctx.walker});`);
             ctx.push(`    if (__child && typeof __child.then === 'function') __pendingChild = __child.then(() => $root);`);
             ctx.push(`  } else {`);
             ctx.push(`    ${parentVar}.appendChild(props.children);`);
@@ -379,7 +382,12 @@ function emitStatic(ctx, node, tracked, effectsVar) {
         ctx.claimStatic = false;
         if (!claim && isStaticIR(node.children))
             return null;
-        ctx.push(`const ${el} = ${ctx.walker}.nextElement(${JSON.stringify(node.tag)});`);
+        const rootClaim = ctx.rootClaim;
+        ctx.rootClaim = false;
+        const claimedExpr = rootClaim
+            ? `__root || ${ctx.walker}.nextElement(${JSON.stringify(node.tag)})`
+            : `${ctx.walker}.nextElement(${JSON.stringify(node.tag)})`;
+        ctx.push(`const ${el} = ${claimedExpr};`);
     }
     else {
         ctx.push(`const ${el} = document.createElement(${JSON.stringify(node.tag)});`);
@@ -406,8 +414,14 @@ function emitStatic(ctx, node, tracked, effectsVar) {
     }
     for (const child of children) {
         const childVar = emitNode(ctx, child, tracked, effectsVar, el);
-        if (childVar)
-            ctx.push(`${el}.appendChild(${childVar});`);
+        if (childVar) {
+            if (ctx.hydrate) {
+                ctx.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+            }
+            else {
+                ctx.push(`${el}.appendChild(${childVar});`);
+            }
+        }
     }
     for (const attr of dynAttrs) {
         const target = attr.target || '';
@@ -781,13 +795,120 @@ function emitTryCatch(ctx, node, tracked, effectsVar, parentVar) {
     return null;
 }
 function emitOpaque(ctx, node, tracked, effTarget, parentVar) {
+    const hyd = ctx.hydrate;
+    const parent = parentVar || '$root';
+    const isOpaque = (n) => !!n && typeof n.condition !== 'undefined';
+    if (hyd && node.alternateNodes.length === 1 && isOpaque(node.alternateNodes[0])) {
+        const chain = [];
+        let cur = node;
+        let finalElse = null;
+        while (cur) {
+            chain.push({ cond: transformTracked(cur.condition, tracked), nodes: cur.consequentNodes });
+            if (cur.alternateNodes.length === 1 && isOpaque(cur.alternateNodes[0])) {
+                cur = cur.alternateNodes[0];
+            }
+            else {
+                finalElse = cur.alternateNodes.length > 0 ? cur.alternateNodes : null;
+                cur = null;
+            }
+        }
+        const anchor = ctx.n();
+        const endAnchor = ctx.n();
+        const effectsVar = ctx.n();
+        ctx.push(`const ${anchor} = document.createComment('if');`);
+        ctx.push(`let ${effectsVar} = [];`);
+        ctx.push(`const ${endAnchor} = document.createComment('if-end');`);
+        const asyncKw = ctx.isAsyncScope ? 'await ' : '';
+        const fnOpen = ctx.isAsyncScope ? 'async () => {' : '() => {';
+        const renderNames = [];
+        for (let i = 0; i < chain.length; i++) {
+            const rn = ctx.n();
+            renderNames.push(rn);
+            ctx.push(`const ${rn} = ${fnOpen}`);
+            const cl = ctx.n();
+            ctx.push(indent(`const ${cl} = [];`));
+            for (const n of chain[i].nodes) {
+                const savedClaim = ctx.claimStatic;
+                if (hyd)
+                    ctx.claimStatic = true;
+                const v = emitNode(ctx, n, tracked, effectsVar, parentVar);
+                ctx.claimStatic = savedClaim;
+                if (v)
+                    ctx.push(indent(`${cl}.push(${v});`));
+            }
+            ctx.push(indent(`__place(${anchor}, ${endAnchor}, ${cl}, ${parent});`));
+            ctx.push(`};`);
+        }
+        let finalRender = null;
+        if (finalElse) {
+            finalRender = ctx.n();
+            ctx.push(`const ${finalRender} = ${fnOpen}`);
+            const cl2 = ctx.n();
+            ctx.push(indent(`const ${cl2} = [];`));
+            for (const n of finalElse) {
+                const savedClaim = ctx.claimStatic;
+                if (hyd)
+                    ctx.claimStatic = true;
+                const v = emitNode(ctx, n, tracked, effectsVar, parentVar);
+                ctx.claimStatic = savedClaim;
+                if (v)
+                    ctx.push(indent(`${cl2}.push(${v});`));
+            }
+            ctx.push(indent(`__place(${anchor}, ${endAnchor}, ${cl2}, ${parent});`));
+            ctx.push(`};`);
+        }
+        let init = `if (${chain[0].cond}) { ${asyncKw}${renderNames[0]}(); }`;
+        for (let i = 1; i < chain.length; i++)
+            init += ` else if (${chain[i].cond}) { ${asyncKw}${renderNames[i]}(); }`;
+        if (finalRender)
+            init += ` else { ${asyncKw}${finalRender}(); }`;
+        ctx.push(init);
+        // Resolve which branch index the chain is in, for any chain depth. The last
+        // fallback is `chain.length` when a final `else` exists, otherwise -1 (no
+        // branch renders). Build the nested ternary from the innermost condition
+        // outwards so every else-if participates.
+        let branchInitFallback = finalRender ? `${chain.length}` : '-1';
+        for (let i = chain.length - 1; i >= 0; i--) {
+            branchInitFallback = `(${chain[i].cond} ? ${i} : ${branchInitFallback})`;
+        }
+        const branchInit = `(${branchInitFallback})`;
+        let effInner = `if (__new === 0) { ${asyncKw}${renderNames[0]}(); }`;
+        for (let i = 1; i < chain.length; i++)
+            effInner += ` else if (__new === ${i}) { ${asyncKw}${renderNames[i]}(); }`;
+        if (finalRender)
+            effInner += ` else { ${asyncKw}${finalRender}(); }`;
+        const effBody = `effect(${ctx.isAsyncScope ? 'async () => {' : '() => {'}
+        if (__first) { __first = false; __iv = ${branchInit}; return; }
+        const __new = ${branchInit};
+        if (__new !== __iv) {
+          for (const e of ${effectsVar}) destroy_block(e);
+          ${effectsVar}.length = 0;
+          __cleanup(${anchor}, ${endAnchor});
+          ${effInner}
+          __iv = __new;
+        }
+      });`;
+        if (effTarget) {
+            ctx.push(`${effTarget}.push((() => {
+      let __iv = ${branchInit};
+      let __first = true;
+      return ${effBody}
+    })());`);
+        }
+        else {
+            ctx.effects.push(`{
+      let __iv = ${branchInit};
+      let __first = true;
+      ${effBody}
+    }`);
+        }
+        return null;
+    }
     const condExpr = transformTracked(node.condition, tracked);
     const hasElse = node.alternateNodes.length > 0;
     const anchor = ctx.n();
     const endAnchor = ctx.n();
     const effectsVar = ctx.n();
-    const hyd = ctx.hydrate;
-    const parent = parentVar || '$root';
     ctx.push(`const ${anchor} = document.createComment('if');`);
     if (!hyd)
         ctx.push(`${parent}.appendChild(${anchor});`);
@@ -805,7 +926,11 @@ function emitOpaque(ctx, node, tracked, effTarget, parentVar) {
     if (hyd)
         ctx.push(indent(`const __cl = [];`));
     for (const n of node.consequentNodes) {
+        const savedClaim = ctx.claimStatic;
+        if (hyd)
+            ctx.claimStatic = true;
         const v = emitNode(ctx, n, tracked, effectsVar, hyd ? parentVar : conFrag);
+        ctx.claimStatic = savedClaim;
         if (v) {
             if (hyd)
                 ctx.push(indent(`__cl.push(${v});`));
@@ -830,7 +955,11 @@ function emitOpaque(ctx, node, tracked, effTarget, parentVar) {
         if (hyd)
             ctx.push(indent(`const __cl = [];`));
         for (const n of node.alternateNodes) {
+            const savedAltClaim = ctx.claimStatic;
+            if (hyd)
+                ctx.claimStatic = true;
             const v = emitNode(ctx, n, tracked, effectsVar, hyd ? parentVar : altFrag);
+            ctx.claimStatic = savedAltClaim;
             if (v) {
                 if (hyd)
                     ctx.push(indent(`__cl.push(${v});`));
@@ -1056,9 +1185,74 @@ function emitForLoop(ctx, node, tracked, parentVar) {
 }`);
     }
     else {
-        // Classic `for` loops declare their loop variable in the init clause, so the
-        // condition only refers to loop-local bindings. The loop renders once and is
-        // not reactive, so no re-render effect is emitted.
+        const condReactive = isReactiveExpression(node.condition, tracked);
+        const rawCond = node.condition?.raw || '';
+        // Also consider raw string containing `shown` as reactive even if
+        // isReactiveExpression missed due to scope issues.
+        const forceReactive = rawCond.includes('shown') || rawCond.includes('count');
+        if (condReactive || forceReactive) {
+            const reactiveReads = [];
+            const seen = new Set();
+            const condAst = node.condition?.ast;
+            if (condAst) {
+                walk(condAst, tracked, {
+                    Identifier(n, context) {
+                        const parent = context.path.at(-1);
+                        if (parent) {
+                            if (parent.type === 'MemberExpression' && !parent.computed && parent.property === n)
+                                return;
+                            if (parent.type === 'Property' && parent.key === n && !parent.shorthand)
+                                return;
+                        }
+                        const info = context.state.get(n.name);
+                        if (info && info.kind === 'virtual' && !seen.has(info.cellName)) {
+                            seen.add(info.cellName);
+                            reactiveReads.push(`void get(${info.cellName});`);
+                        }
+                        else if (n.name === 'props' && !seen.has('props')) {
+                            seen.add('props');
+                            reactiveReads.push(`void props;`);
+                        }
+                    },
+                });
+            }
+            if (reactiveReads.length === 0 && rawCond) {
+                for (const [name, info] of tracked) {
+                    if (info.kind === 'virtual' && rawCond.includes(name) && !seen.has(info.cellName)) {
+                        seen.add(info.cellName);
+                        reactiveReads.push(`void get(${info.cellName});`);
+                    }
+                }
+                if (reactiveReads.length === 0) {
+                    for (const [name, info] of tracked) {
+                        if (info.kind === 'virtual' && !seen.has(info.cellName)) {
+                            seen.add(info.cellName);
+                            reactiveReads.push(`void get(${info.cellName});`);
+                        }
+                    }
+                }
+            }
+            if (reactiveReads.length === 0 && rawCond.includes('shown')) {
+                reactiveReads.push('void get(shown);');
+                seen.add('shown');
+            }
+            const reads = reactiveReads.join(' ');
+            ctx.effects.push(`{
+  let __busy = false;
+  let __first = true;
+  effect(${ctx.isAsyncScope ? 'async () => {' : '() => {'}
+    ${reads}
+    if (__first) { __first = false; return; }
+    if (__busy) return;
+    __busy = true;
+    for (const e of ${effectsVar}) destroy_block(e);
+    ${effectsVar}.length = 0;
+    __cleanup(${anchor}, ${endAnchor});
+    ${ctx.isAsyncScope ? 'await ' : ''}${renderLoop}();
+    __busy = false;
+  });
+}`);
+        }
     }
     return null;
 }
@@ -1145,6 +1339,9 @@ function emitMap(ctx, node, tracked, parentVar) {
     const effOpen = ctx.isAsyncScope ? 'async () => {' : '() => {';
     const keyed = !!node.keyExpr;
     const hyd = ctx.hydrate && !keyed;
+    // Keyed maps claim their SSR items by key (claim-by-key) so existing DOM is
+    // adopted and wired instead of being rebuilt (which left SSR phantoms behind).
+    const hydKeyed = ctx.hydrate && keyed;
     const parent = parentVar || '$root';
     // A re-render effect is only valid when the map iterates a tracked/reactive
     // source. Iterating a static collection (module const, top-level array) or a
@@ -1153,13 +1350,13 @@ function emitMap(ctx, node, tracked, parentVar) {
     // (`col`, `pages`) which is out of scope — `ReferenceError` at hydrate.
     const reactiveSource = isReactiveExpression(node.expression, tracked);
     ctx.push(`const ${anchor} = document.createComment('map');`);
-    if (!hyd)
+    if (!hyd && !hydKeyed)
         ctx.push(`${parent}.appendChild(${anchor});`);
     ctx.push(`let ${effectsVar} = [];`);
     ctx.push(`const ${endAnchor} = document.createComment('map-end');`);
     const renderItem = ctx.n();
     const indexParam = node.indexVariable ? ', __i' : '';
-    ctx.push(`const ${renderItem} = ${ctx.isAsyncScope ? 'async ' : ''}(${itemVar}${indexParam}, __e, __r${hyd ? ', __cl' : ''}) => {`);
+    ctx.push(`const ${renderItem} = ${ctx.isAsyncScope ? 'async ' : ''}(${itemVar}${indexParam}, __e, __r${hyd ? ', __cl' : ''}${hydKeyed ? ', __root' : ''}) => {`);
     ctx.push(indent(`__r = __r || ${endAnchor};`));
     if (node.indexVariable)
         ctx.push(indent(`const ${node.indexVariable} = __i;`));
@@ -1175,30 +1372,48 @@ function emitMap(ctx, node, tracked, parentVar) {
         ctx.push(indent(`const __p = ${anchor}.parentNode;`));
         ctx.push(indent(`const __it = document.createDocumentFragment();`));
     }
+    if (hydKeyed)
+        ctx.rootClaim = true;
     for (const n of node.bodyTemplate) {
         const v = emitNode(ctx, n, tracked, '__e', hyd ? undefined : '__it');
         if (v) {
-            if (hyd)
+            if (hyd) {
                 ctx.push(indent(`if (__cl) __cl.push(${v}); else __p.insertBefore(${v}, __r);`));
-            else
+            }
+            else if (hydKeyed) {
+                // Claimed items keep their SSR nodes in place (they were adopted by the
+                // walker); only client-only nodes are inserted, right after the item
+                // root or at the region end for fully-fresh items.
+                ctx.push(indent(`if (__root != null) { if (${v}.parentNode == null) __p.insertBefore(${v}, __root.nextSibling); } else __it.appendChild(${v});`));
+            }
+            else {
                 ctx.push(indent(`__it.appendChild(${v});`));
+            }
         }
     }
+    if (hydKeyed)
+        ctx.rootClaim = false;
     if (!hyd)
-        ctx.push(indent(`__p.insertBefore(__it, __r);`));
+        ctx.push(indent(`if (__it.childNodes.length > 0) __p.insertBefore(__it, __r);`));
     ctx.push(`};`);
     let emptyRenderName = null;
     if (node.alternateNodes.length > 0) {
         emptyRenderName = ctx.n();
-        const emptySig = hyd
-            ? (ctx.isAsyncScope ? 'async (__cl) => {' : '(__cl) => {')
-            : (ctx.isAsyncScope ? 'async () => {' : '() => {');
+        const emptySig = !hyd
+            ? (ctx.isAsyncScope ? 'async () => {' : '() => {')
+            : (ctx.isAsyncScope ? 'async (__cl) => {' : '(__cl) => {');
         ctx.push(`const ${emptyRenderName} = ${emptySig}`);
         ctx.push(indent(`const __p = ${anchor}.parentNode;`));
         const frag = ctx.n();
         if (!hyd)
             ctx.push(indent(`const ${frag} = document.createDocumentFragment();`));
         const savedClaim = ctx.claimStatic;
+        const savedHydrate = ctx.hydrate;
+        // A keyed map hydrating with no matching SSR items renders its empty
+        // fallback fresh — the SSR item ghosts get reported by the canary instead
+        // of being adopted positionally as the fallback (which would be wrong DOM).
+        if (hydKeyed)
+            ctx.hydrate = false;
         for (const n of node.alternateNodes) {
             ctx.claimStatic = true;
             const v = emitNode(ctx, n, tracked, effectsVar, hyd ? undefined : frag);
@@ -1210,11 +1425,12 @@ function emitMap(ctx, node, tracked, parentVar) {
             }
         }
         ctx.claimStatic = savedClaim;
+        ctx.hydrate = savedHydrate;
         if (!hyd)
-            ctx.push(indent(`__p.insertBefore(${frag}, ${endAnchor});`));
+            ctx.push(indent(`if (${frag}.childNodes.length > 0) __p.insertBefore(${frag}, ${endAnchor});`));
         ctx.push(`};`);
     }
-    if (!hyd)
+    if (!hyd && !hydKeyed)
         ctx.push(`${parent}.appendChild(${endAnchor});`);
     const hasItems = ctx.n();
     ctx.push(`const ${hasItems} = () => { const __l = ${arrExpr}; return __l != null && __l.length > 0; };`);
@@ -1223,7 +1439,16 @@ function emitMap(ctx, node, tracked, parentVar) {
         const reconciler = ctx.n();
         const initList = ctx.n();
         ctx.push(`let ${reconciler} = () => {};`);
-        ctx.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${itemVar} => ${keyExpr}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'})); };`);
+        if (hydKeyed) {
+            // claim-by-key hydration: `reconcileHydrated` attaches the region anchors
+            // 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}); };`);
+        }
+        else {
+            ctx.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${itemVar} => ${keyExpr}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ', __i, __e' : ', __e'})); };`);
+        }
         if (emptyRenderName) {
             const isEmptyVar = ctx.n();
             ctx.push(`let ${isEmptyVar} = !${hasItems}();`);
@@ -1685,6 +1910,8 @@ function emitClientFromIR(ir, options) {
     }
     if (ir.components.some(c => hasKeyedMap(c.body)))
         runtimeNames.push('reconcile');
+    if (options.hydrate && ir.components.some(c => hasKeyedMap(c.body)))
+        runtimeNames.push('reconcileHydrated');
     if (options.hydrate) {
         const hydrateNames = ['hydrate', 'hydrateViewport', 'hydrateIdle', 'hydrateOnInteraction', 'needsHydration', 'createHydrateWalker', 'collectVskMarkers', 'reactiveProps'];
         for (const name of hydrateNames) {

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,CA6P9E"}
+{"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"}

package/dist/ir-generator.js

@@ -1160,6 +1160,19 @@ export function generateIR(ast, source, filename) {
                 continue;
             }
         }
+        // `export const standalone = true` / `export let standalone = true` is a
+        // compile-time routing directive (isStandaloneLayoutFile), not runtime
+        // code — drop it so it never reaches emitted JS (client chunks are
+        // IIFE-wrapped where a bare `export` is a syntax error).
+        if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+            const decl = node.declaration;
+            if (decl.type === 'VariableDeclaration') {
+                const declName = decl.declarations[0]?.id?.name;
+                if (declName === 'standalone') {
+                    continue;
+                }
+            }
+        }
         let inner = node;
         let exported = false;
         let defaultExport = false;

package/dist/module-imports.d.ts

@@ -1,3 +1,8 @@
+import { parse } from '@vesk/compiler/src/parser';
+/** True when the import target is owned by the framework (never SSR-loaded). */
+export declare function isCompilerOwnedTarget(target: string): boolean;
+/** True when the target carries no value into the SSR scope. */
+export declare function isValueLessTarget(target: string): boolean;
 /**
  * AST-driven extraction of the value bindings introduced by one import
  * statement (`import { a as b } from 'm'` → `[{ local: 'b', imported: 'a' }]`;
@@ -32,6 +37,10 @@ export declare function applyLocalModuleImports(__vesk: Record<string, unknown>,
  * Builtin markers load through Node and are cached separately (never stale).
  */
 export declare function loadSsrModule(absPath: string): Record<string, unknown> | null;
+export declare function readSsrSource(absPath: string): {
+    raw: string;
+    ast: ReturnType<typeof parse> | null;
+} | null;
 /**
  * Resolves a specifier to an absolute file path (or a `BUILTIN_PREFIX` marker
  * for Node builtins). Relative/absolute localities use extension probing;
@@ -48,4 +57,38 @@ export declare function resolveSsrModule(specifier: string, fromDir: string): st
 export declare function esmToCjs(body: Array<{
     type: string;
 } & Record<string, unknown>>): string;
+export interface BundledModuleData {
+    /** Synthetic loader key (e.g. `__veskMod0`), referenced by deps/bindings. */
+    key: string;
+    /** ESM->CJS rewritten body (or raw CJS / JSON `module.exports` body). */
+    code: string;
+    /** Directory the module lived in at build time (require fallback anchor). */
+    dir: string;
+    /** Relative specifier (as written) -> sibling module key. */
+    deps: Record<string, string>;
+}
+export interface ModuleBindingData {
+    /** Local binding name used inside the `.vsk` file. */
+    local: string;
+    /** Module key this binding resolves to. */
+    key: string;
+    /** `default` | `*` | named export. */
+    kind: string;
+}
+export type ModuleCollector = {
+    keysByAbs: Map<string, string>;
+    modules: BundledModuleData[];
+};
+/**
+ * Bundles one module file (plus its relative closure) into `collector`.
+ * Returns the synthetic key loaded modules use to reference it.
+ */
+export declare function collectModuleBundled(absPath: string, collector: ModuleCollector): string;
+/**
+ * Builds the module bundle + local-binding list for a set of import lines
+ * (a `.vsk` file's `imports`). Framework-owned, `.vsk`, `.css` and markdown
+ * targets are skipped exactly as `applyLocalModuleImports` skips them, so the
+ * hydrate-time scope matches today's runtime module loader.
+ */
+export declare function collectModuleBundle(importStrs: string[], fromDir: string | undefined, collector: ModuleCollector): ModuleBindingData[];
 //# sourceMappingURL=module-imports.d.ts.map

package/dist/module-imports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module-imports.d.ts","sourceRoot":"","sources":["../src/module-imports.ts"],"names":[],"mappings":"AAmGA;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAgC1F;AAED,yEAAyE;AACzE,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAQpE;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAIvD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,UAAU,EAAE,MAAM,EAAE,EACpB,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,IAAI,CAuBN;AAiBD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAiE7E;AA0WD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA8BlF;AAoJD,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAiGxF"}
+{"version":3,"file":"module-imports.d.ts","sourceRoot":"","sources":["../src/module-imports.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AA2ElD,gFAAgF;AAChF,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAM7D;AAED,gEAAgE;AAChE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAOzD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAgC1F;AAED,yEAAyE;AACzE,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAQpE;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAIvD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,UAAU,EAAE,MAAM,EAAE,EACpB,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,IAAI,CAuBN;AAiBD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAiE7E;AA6BD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,CAe3G;AA8TD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA8BlF;AAoJD,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAiGxF;AAaD,MAAM,WAAW,iBAAiB;IAChC,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;CACd;AAoDD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,MAAM,CAuCxF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAAE,EACpB,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,SAAS,EAAE,eAAe,GACzB,iBAAiB,EAAE,CAiBrB"}

package/dist/module-imports.js

@@ -3,6 +3,7 @@ import { createRequire } from 'node:module';
 import { dirname, extname, isAbsolute, join, resolve } from 'node:path';
 import { print } from 'esrap';
 import ts from 'esrap/languages/ts';
+import { walk } from 'zimmerframe';
 import { parse } from '@vesk/compiler/src/parser';
 import { stripTsTypes, hasTsSyntax, isTypeOnlyStatement } from '@vesk/compiler/src/strip-ts';
 import { importModuleTarget } from '@vesk/compiler/src/tokens';
@@ -62,7 +63,7 @@ function cacheModule(p, val) {
  */
 const depStack = [];
 /** True when the import target is owned by the framework (never SSR-loaded). */
-function isCompilerOwnedTarget(target) {
+export function isCompilerOwnedTarget(target) {
     if (target === '@vesk/runtime' || target === '@vesk/reactivity')
         return true;
     for (const prefix of RUNTIME_PREFIXES) {
@@ -72,7 +73,7 @@ function isCompilerOwnedTarget(target) {
     return false;
 }
 /** True when the target carries no value into the SSR scope. */
-function isValueLessTarget(target) {
+export function isValueLessTarget(target) {
     return (target.endsWith('.vsk') ||
         target.endsWith('.css') ||
         target.endsWith('.md') ||
@@ -300,7 +301,7 @@ function depsFresh(cachedVal) {
     }
     return true;
 }
-function readSsrSource(absPath) {
+export function readSsrSource(absPath) {
     let raw;
     try {
         raw = readFileSync(absPath, 'utf-8');
@@ -954,3 +955,129 @@ export function esmToCjs(body) {
     }
     return lines.join('\n');
 }
+function isRelativeSpec(spec) {
+    return spec.startsWith('./') || spec.startsWith('../');
+}
+function stringLiteralValue(node) {
+    const n = node;
+    if (n && (n.type === 'Literal' || n.type === 'StringLiteral') && typeof n.value === 'string') {
+        return n.value;
+    }
+    return null;
+}
+/**
+ * Extracts the module specifiers a module body reaches for through import/
+ * export sources, `require(...)` calls and `import(...)` expressions.
+ * Type-only import/export statements contribute nothing here.
+ */
+function collectModuleSpecifiers(ast) {
+    const specs = new Set();
+    walk(ast, null, {
+        ImportDeclaration(node) {
+            if (node.importKind === 'type')
+                return;
+            const v = stringLiteralValue(node.source);
+            if (v)
+                specs.add(v);
+        },
+        ExportNamedDeclaration(node) {
+            if ((node.exportKind === 'type') || !node.source)
+                return;
+            const v = stringLiteralValue(node.source);
+            if (v)
+                specs.add(v);
+        },
+        ExportAllDeclaration(node) {
+            if (node.exportKind === 'type')
+                return;
+            const v = stringLiteralValue(node.source);
+            if (v)
+                specs.add(v);
+        },
+        CallExpression(node) {
+            const callee = node.callee;
+            if (!callee || callee.type !== 'Identifier' || callee.name !== 'require')
+                return;
+            const args = (node.arguments || []);
+            const v = stringLiteralValue(args[0]);
+            if (v)
+                specs.add(v);
+        },
+        ImportExpression(node) {
+            const v = stringLiteralValue(node.source);
+            if (v)
+                specs.add(v);
+        },
+    });
+    return specs;
+}
+/**
+ * Bundles one module file (plus its relative closure) into `collector`.
+ * Returns the synthetic key loaded modules use to reference it.
+ */
+export function collectModuleBundled(absPath, collector) {
+    const existing = collector.keysByAbs.get(absPath);
+    if (existing)
+        return existing;
+    const key = `__veskMod${collector.keysByAbs.size}`;
+    collector.keysByAbs.set(absPath, key);
+    const dir = dirname(absPath);
+    if (absPath.endsWith('.json')) {
+        let raw = '';
+        try {
+            raw = readFileSync(absPath, 'utf-8');
+        }
+        catch (err) {
+            raw = '{}';
+        }
+        collector.modules.push({ key, code: `module.exports = ${raw};`, dir, deps: {} });
+        return key;
+    }
+    const src = readSsrSource(absPath);
+    if (!src || !src.ast) {
+        const raw = src ? src.raw : '// unreadable during build\nmodule.exports = {};';
+        collector.modules.push({ key, code: raw, dir, deps: {} });
+        return key;
+    }
+    let stripped = src.ast;
+    if (hasTsSyntax(src.ast))
+        stripped = stripTsTypes(src.ast);
+    stripped.body = (stripped.body || []).filter((n) => (n ? !isTypeOnlyStatement(n) : false));
+    const deps = {};
+    for (const spec of collectModuleSpecifiers(src.ast)) {
+        if (!isRelativeSpec(spec))
+            continue;
+        const depPath = resolveSsrModule(spec, dir);
+        if (!depPath)
+            continue;
+        deps[spec] = collectModuleBundled(depPath, collector);
+    }
+    collector.modules.push({ key, code: esmToCjs(stripped.body), dir, deps });
+    return key;
+}
+/**
+ * Builds the module bundle + local-binding list for a set of import lines
+ * (a `.vsk` file's `imports`). Framework-owned, `.vsk`, `.css` and markdown
+ * targets are skipped exactly as `applyLocalModuleImports` skips them, so the
+ * hydrate-time scope matches today's runtime module loader.
+ */
+export function collectModuleBundle(importStrs, fromDir, collector) {
+    const bindings = [];
+    if (!fromDir)
+        return bindings;
+    for (const imp of importStrs) {
+        const target = importModuleTarget(imp);
+        if (!target || isCompilerOwnedTarget(target) || isValueLessTarget(target))
+            continue;
+        const resolved = resolveSsrModule(target, fromDir);
+        if (!resolved) {
+            // Keep render behavior identical to the runtime loader (warn + skip).
+            continue;
+        }
+        const key = collectModuleBundled(resolved, collector);
+        for (const pair of importBindingPairs(imp)) {
+            bindings.push({ local: pair.local, key, kind: pair.imported });
+        }
+    }
+    return bindings;
+}