@vesk/compiler 0.2.24 → 0.2.26

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

package/dist/client-codegen.js

@@ -9,6 +9,7 @@ import { transformTopLevelForActions } from '@vesk/compiler/src/actions';
 import { extractRuntimeNames, extractTopLevelNames } from '@vesk/compiler/src/server-utils';
 import { importBindingPairs, localValueImportNames } from '@vesk/compiler/src/module-imports';
 import { stripTrackGeneric } from '@vesk/compiler/src/scan';
+import { importModuleTarget } from '@vesk/compiler/src/tokens';
 import { inlineMdImportsFrom } from '@vesk/compiler/src/md-inline';
 import { stripTsTypes, hasTsSyntax } from '@vesk/compiler/src/strip-ts';
 function memberExpr(object, property) {
@@ -253,6 +254,11 @@ class Ctx {
     c = 0;
     importedNames = new Set();
     linkNames = new Set();
+    // Runtime component imports that claim their own SSR root via `nextElement`
+    // (Link/NavLink/Md/Form/Field/LoadingIndicator) and return a DocumentFragment
+    // when claimed. They need no call-site adoption guard — the guard targets
+    // genuinely-plain components that never touch the walker.
+    selfClaimNames = new Set();
     delegatedEvents = new Set();
     directEvents = new Set();
     hydrate = false;
@@ -412,16 +418,33 @@ function emitStatic(ctx, node, tracked, effectsVar) {
             ctx.push(`${el}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(escapeHtml(attr.value))});`);
         }
     }
+    let residueBefore = 0;
     for (const child of children) {
         const childVar = emitNode(ctx, child, tracked, effectsVar, el);
         if (childVar) {
             if (ctx.hydrate) {
-                ctx.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+                // Fresh text nodes (static or dynamic) cannot be appended at the end of
+                // a claimed element: its SSR element children (component-boundary
+                // wrappers, skipped static markup) are still in the DOM at their SSR
+                // slots, so appending would move the text AFTER them, reordering
+                // mixed text + component children (the hero "compiler-first framework ·
+                // <VersionBadge />" label). Insert the fresh node at the SSR position
+                // of the text instead: the k-th source text child precedes the residue
+                // elements rendered before it, so it slots in before
+                // `el.__vsk_ssrEls[k]` (the residue list captured by the runtime at
+                // claim time).
+                if (child instanceof TextNode || child instanceof DynamicBinding) {
+                    ctx.push(`if (${childVar}.parentNode !== ${el}) { const __ssr = ${el}.__vsk_ssrEls || []; if (${residueBefore} < __ssr.length) ${el}.insertBefore(${childVar}, __ssr[${residueBefore}]); else ${el}.appendChild(${childVar}); }`);
+                }
+                else {
+                    ctx.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+                }
             }
             else {
                 ctx.push(`${el}.appendChild(${childVar});`);
             }
         }
+        residueBefore += ssrResidueEstimate(child);
     }
     for (const attr of dynAttrs) {
         const target = attr.target || '';
@@ -640,7 +663,11 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
     }
     const propsObj = `{ ${propsEntries.join(', ')} }`;
     const v = ctx.n();
-    const awaitKw = ctx.asyncComps.has(node.componentName) ? 'await ' : '';
+    // Await children whenever the calling scope is async. Async-ness is
+    // parent-driven (mirroring the server side) so that imported async
+    // components from other files — whose names are not in the local
+    // asyncComps set — still resolve to nodes before append/insert.
+    const awaitKw = ctx.isAsyncScope ? 'await ' : '';
     // 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;
@@ -649,15 +676,30 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             ?? (ctx.importedNames.has(node.componentName)
                 ? node.componentName
                 : `__components[${JSON.stringify(node.componentName)}]`);
-        const subScope = () => ctx.inTryBody
-            ? `${ctx.walker}.subWalker(${parentVar})`
-            : `${ctx.walker}.subWalker(${ctx.walker}.nextElement())`;
+        // SSR for component calls is marker-ONLY (`<!--vsk-->` + the component's
+        // own root; no display:contents wrapper). Compiled `.vsk` components claim
+        // their own root on the SHARED walker. Call targets that are not known
+        // compiled components (imported values, member-expression tags) cannot
+        // claim, so after the call we adopt their SSR root ourselves and replace it
+        // with the fresh node they returned — never a duplicate, never a box.
+        const plainTarget = !!(calleeExpr || ctx.importedNames.has(node.componentName)) && !ctx.selfClaimNames.has(node.componentName);
+        const walkerArg = ctx.walker;
+        const maybeReplace = (v) => {
+            if (!plainTarget)
+                return;
+            // nodeType 11 = DocumentFragment: self-claiming imports (Link/Md/Form)
+            // return a fragment when they adopted their SSR root, so there is nothing
+            // to replace — claiming here would steal the NEXT sibling's root.
+            ctx.push(`if (${v} && ${v}.parentNode == null && ${v}.nodeType !== 11) { const __sr = ${walkerArg}.claimOnly(); if (__sr && __sr.parentNode) __sr.parentNode.replaceChild(${v}, __sr); }`);
+        };
+        const maybeRetire = () => {
+            if (ctx.selfClaimNames.has(node.componentName)) {
+                ctx.push(`${walkerArg}.retireDetached();`);
+            }
+        };
         if (node.children.length > 0) {
-            const walkerVar = ctx.n();
-            ctx.push(`const ${walkerVar} = ${subScope()};`);
             const frag = ctx.n();
             ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
-            const savedWalker = ctx.walker;
             const savedEffects = ctx.effects;
             // Link/NavLink hydrate branches WIPE their SSR anchor (a.replaceChildren())
             // and remount the children fragment. Suppressed fully-static children would
@@ -666,7 +708,6 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             const savedHydrate = ctx.hydrate;
             if (wipeMount)
                 ctx.hydrate = false;
-            ctx.walker = walkerVar;
             ctx.effects = [];
             for (const child of node.children) {
                 const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
@@ -676,14 +717,17 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             for (const eff of ctx.effects)
                 ctx.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
             ctx.effects = savedEffects;
-            ctx.walker = savedWalker;
             ctx.hydrate = savedHydrate;
             ctx.push(`return $f; })();`);
             propsEntries.push(`children: ${frag}`);
-            ctx.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(', ')} }, __registry, ${walkerVar});`);
+            ctx.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(', ')} }, __registry, ${walkerArg});`);
+            maybeReplace(v);
+            maybeRetire();
             return v;
         }
-        ctx.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${subScope()});`);
+        ctx.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${walkerArg});`);
+        maybeReplace(v);
+        maybeRetire();
         return v;
     }
     else {
@@ -1567,11 +1611,12 @@ ${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()) {
+function generateComponent(comp, importedNames = new Set(), hydrate = false, asyncComps = new Set(), linkNames = new Set(), selfClaimNames = new Set()) {
     const tracked = collectTrackedNames(comp.body);
     const ctx = new Ctx();
     ctx.importedNames = importedNames;
     ctx.linkNames = linkNames;
+    ctx.selfClaimNames = selfClaimNames;
     ctx.hydrate = hydrate;
     ctx.asyncComps = asyncComps;
     ctx.isAsyncScope = comp.isAsync || asyncComps.has(comp.name);
@@ -1596,11 +1641,19 @@ function generateComponent(comp, importedNames = new Set(), hydrate = false, asy
     const paramInit = buildParamInit(comp.paramNames);
     if (paramInit)
         ctx.push(indent(paramInit));
+    // Hoist TrackDecls to top to avoid TDZ when Head/effects reference them before declaration
+    for (const node of comp.body) {
+        if (node instanceof TrackDecl) {
+            emitNode(ctx, node, tracked, null);
+        }
+    }
     for (const node of comp.body) {
+        if (node instanceof TrackDecl)
+            continue;
         const v = emitNode(ctx, node, tracked, null);
         if (v) {
             if (ctx.hydrate) {
-                ctx.push(indent(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !$root.contains(${v})) $root.appendChild(${v}); }`));
+                ctx.push(indent(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !${v}.parentNode.contains(${v})) $root.appendChild(${v}); }`));
             }
             else {
                 ctx.push(indent(`$root.appendChild(${v});`));
@@ -1635,7 +1688,19 @@ function buildComponentMap(irRoot, hydrate = false) {
     // hydration, so their children fragments must be rebuilt in full. Track the
     // file-local binding names regardless of aliasing (`const Nav = NavLink`).
     const linkNames = new Set();
+    // Runtime components that self-claim during hydration (adopt their own SSR
+    // root via nextElement and return a fragment when claimed). Excluded from the
+    // call-site adoption guard; the walker cursor passes them but never a
+    // claimOnly() on their behalf.
+    const selfClaimNames = new Set();
+    const SELF_CLAIM_RUNTIME = new Set(['Link', 'NavLink', 'Md', 'Form', 'Field', 'LoadingIndicator']);
     for (const imp of irRoot.imports) {
+        if (importModuleTarget(imp) !== '@vesk/runtime')
+            continue;
+        for (const pair of importBindingPairs(imp)) {
+            if (SELF_CLAIM_RUNTIME.has(pair.imported))
+                selfClaimNames.add(pair.local);
+        }
         for (const pair of importBindingPairs(imp)) {
             if (pair.imported === 'Link' || pair.imported === 'NavLink')
                 linkNames.add(pair.local);
@@ -1650,11 +1715,13 @@ function buildComponentMap(irRoot, hydrate = false) {
     const directNames = new Set([...extractRuntimeNames(irRoot.imports), ...localValueImportNames(irRoot.imports), ...topValueNames]);
     for (const comp of irRoot.components) {
         if (hydrate && isStaticComponent(comp)) {
-            const stub = `(props, __registry, __hydrate) => { return __hydrate.root; }`;
+            // Static components keep their SSR content untouched: claim the root
+            // WITHOUT stripping its direct text (nothing will re-create it).
+            const stub = `(props, __registry, __hydrate) => { return __hydrate.claimOnly(); }`;
             mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${stub};`);
             continue;
         }
-        const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames);
+        const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames);
         mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${code};`);
     }
     mapLines.push(`function __cleanup(start, end) {`);
@@ -1683,6 +1750,40 @@ function buildComponentMap(irRoot, hydrate = false) {
     mapLines.push(`}`);
     return mapLines.join('\n\n');
 }
+function ssrResidueEstimate(node) {
+    if (Array.isArray(node)) {
+        let total = 0;
+        for (const n of node)
+            total += ssrResidueEstimate(n);
+        return total;
+    }
+    if (node instanceof StaticNode)
+        return 1;
+    if (node instanceof ComponentCall)
+        return 1;
+    if (node instanceof OpaqueDynamicRegion) {
+        return Math.max(ssrResidueEstimate(node.consequentNodes), ssrResidueEstimate(node.alternateNodes));
+    }
+    if (node instanceof MapRegion) {
+        return Math.max(ssrResidueEstimate(node.bodyTemplate), ssrResidueEstimate(node.alternateNodes));
+    }
+    if (node instanceof ForLoop)
+        return ssrResidueEstimate(node.bodyTemplate);
+    if (node instanceof WhileLoop)
+        return ssrResidueEstimate(node.bodyTemplate);
+    if (node instanceof SwitchBlock) {
+        let max = 0;
+        for (const c of node.cases)
+            max = Math.max(max, ssrResidueEstimate(c.body));
+        return max;
+    }
+    if (node instanceof TryCatch) {
+        return Math.max(ssrResidueEstimate(node.bodyTemplate), ssrResidueEstimate(node.catchBody));
+    }
+    // TextNode, DynamicBinding, TrackDecl, RuntimeStatement, SlotNode,
+    // ServerBlock, ClientBlock, HeadBlock emit no SSR element residue.
+    return 0;
+}
 function isStaticIR(body) {
     for (const node of body) {
         if (node instanceof StaticNode) {

package/dist/server-jsgen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-jsgen.d.ts","sourceRoot":"","sources":["../src/server-jsgen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAOzE,OAAO,EAAkG,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAoCrK,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAmDjJ;AAsWD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAmD1F;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,EAAE,CA4BzE;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAYhG"}
+{"version":3,"file":"server-jsgen.d.ts","sourceRoot":"","sources":["../src/server-jsgen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAOzE,OAAO,EAAkG,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAoCrK,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAmDjJ;AAoWD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAmD1F;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,EAAE,CA4BzE;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAYhG"}

package/dist/server-jsgen.js

@@ -19,14 +19,14 @@ import { localValueImportNames } from '@vesk/compiler/src/module-imports';
 // the client's for every property, not just sticky.
 //
 // The wrapper tag must be `<span>`, not `<div>`. The HTML parser implicitly
-// closes an open `<p>` on a flow-content start tag like `<div>`, so a `<div>`
-// wrapper inside a `<p>` (a component called inside a paragraph, e.g. a `Link`
-// in an eyebrow row) is hoisted out of the paragraph, stranding its `<!--vsk-->`
-// marker in the now-empty `<p>` → `nextElementSibling` is null → the hydration
-// claim misses and every later claim tag-shifts, wiping the SSR content. `<span>`
-// is phrasing content (legal inside `<p>`) and never triggers an implicit close,
-// while `display: contents` keeps it box-less everywhere a `<div>` would be.
-const HYDRATE_COMPONENT_WRAPPER = '<!--vsk--><span style="display:contents">';
+// Marker-ONLY component boundary. The client's shared walker claims a
+// component call-site by reading the component's own root element off this
+// marker — the SSR output of a component call is exactly `<!--vsk-->` followed
+// by the callee's content. A `<span style="display:contents">` box here would
+// sit between the marker and that root, so a `nextElement(tag)` claim (e.g.
+// LoadingIndicator claiming `div`) hits a tag mismatch, never advances the
+// walker cursor, and every later claim miss wipes the SSR content.
+const HYDRATE_COMPONENT_WRAPPER = '<!--vsk-->';
 export function irNodeToJS(node, importedNames, isAsync = false, tracked) {
     importedNames = importedNames || __vskImportedNames;
     if (node instanceof StaticNode)
@@ -448,9 +448,7 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked) {
     lines.push(`const ${calleeVar} = ${callee};`);
     const callExpr = `${awaitKw}${calleeVar}(${propsObj}, __registry, (${calleeVar}.__veskScope || __vesk))`;
     if (__vskHydrate) {
-        // Wrapper purpose documented at HYDRATE_COMPONENT_WRAPPER; it must never
-        // become a layout box (see the constant's comment for why).
-        lines.push(`__out.push(${JSON.stringify(HYDRATE_COMPONENT_WRAPPER)} + (${callExpr} || '') + '</span>');`);
+        lines.push(`__out.push(${JSON.stringify(HYDRATE_COMPONENT_WRAPPER)} + (${callExpr} || ''));`);
     }
     else {
         lines.push(`__out.push(${callExpr} || '');`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/compiler",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "type": "module",
   "description": "Vesk compiler — lexer, parser, semantic analysis, IR, codegen",
   "main": "./dist/index.js",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@sveltejs/acorn-typescript": "^1.0.0",
-    "@vesk/types": "^0.2.24",
+    "@vesk/types": "^0.2.26",
     "acorn": "^8.15.0",
     "esrap": "^2.3.0",
     "is-reference": "^3.0.0",