@abide/abide 0.32.0 → 0.32.1

package/AGENTS.md

@@ -181,6 +181,7 @@ Same selector grammar as `cache.invalidate`; also accept a `Subscribable`. See C
 Valid HTML with `<script>` + native `<template>` control flow + scoped `<style>`.
 - **Bindings:** `{expr}` text, `name={expr}` attr, `onclick={fn}`, `bind:value={…}` / `bind:checked` / `bind:group`, `attach={fn}` (node-lifetime attachment — the dual of `on`; the `use:`-action / `{@attach}` equivalent, lowered to `ui/dom/attach`).
 - **Control flow (native `<template>`):** `if`/`else`, `each={list} as="x" key="x.id"`, `await={p}`/`then`/`catch`, `switch`/`case`/`default`.
+- **A branch is a lexical scope:** any control-flow branch may host its own nested `<script>` and `<style>`. The nested `<script>` declares branch-local **plain** signals (`state`/`derived`/`linked`/`prop`) — owned by the branch's render scope, re-seeded each mount (not the serializable top-level `doc`) — with the branch's binding in scope (`then`/`catch`'s `as` value, the `each` `as`/`key` row), so it can derive from the awaited/iterated value; its bindings cover the branch subtree and later siblings auto-deref them. The nested `<style>` is scoped to that branch alone (its own `data-a-<hash>`), not the whole component.
 - **Components:** capitalised tags (`<Layout title=…>`); children fill `<slot/>`; props are reactive (passed as thunks). A component has no directives — every attribute is a prop under its written name (so `onclick=`/`bind:open=`/`attach=` pass through as props, e.g. callbacks, not the DOM-element directives those are on a lowercase tag) and is type-checked against the child's declared props. `prop('name')` reads a typed component prop (the parent-supplied thunk, reactive + read-only); route params come from the `page` proxy (`page.params.name`), not `prop()`.
 - **Snippets / named slots:** `<template name="x" args={…}>` declares a reusable named builder (the `snippet()` form), rendered like a function — covers named slots / `{@render}`.
 - **Reactivity:** write plain assignment (`count += 1`, `items.push(x)`); the compiler lowers it to patches. Deep-field edits wake only that field.

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # abide
 
+## 0.32.1
+
+### Patch Changes
+
+- [`660ce08`](https://github.com/briancray/abide/commit/660ce08109160156dc9697fcb223fbb335229243) - fold asset-serve request logging into a timedServe helper ([`17aa14a`](https://github.com/briancray/abide/commit/17aa14aa3f04abe76a2e06b0c2fb0a8d4e725603))
+
+- [`660ce08`](https://github.com/briancray/abide/commit/660ce08109160156dc9697fcb223fbb335229243) - swallow the superseded each-async iterator's return rejection ([`5e2898f`](https://github.com/briancray/abide/commit/5e2898ff8a785508aa8fde70f3fc351dcdc8e014))
+
+- [`9643066`](https://github.com/briancray/abide/commit/9643066cf19bb944a55509333fd1421a3a8cce7a) - fix(check): narrow `<template else>` against the condition's negation. The shadow type-checker emitted a nested `else` child inside the `if` block, so the else body inherited the if's positive narrowing — a literal-union compare read as "no overlap" and a `typeof`-narrowed branch saw the wrong member. It now pairs the `else` child as a real `if (…) {…} else {…}`, matching the runtime's pairing.
+
+- [`9643066`](https://github.com/briancray/abide/commit/9643066cf19bb944a55509333fd1421a3a8cce7a) - fix(check): value-project a nested control-flow `<script>` like the leading one. The shadow type-checker emitted a branch-scoped `<script>` body raw, so its `state`/`derived` declarations kept their `State<T>`/`Derived<T>` types — every read of a nested signal in the branch's markup false-positived (`'Derived<string>' and 'string' have no overlap`, `Property 'length' does not exist on type 'Derived<…>'`). It now rewrites a nested script's reactive declarations to their value types, matching the runtime, which derefs nested-script signals through the rest of the branch.
+
+- [`0c54e5a`](https://github.com/briancray/abide/commit/0c54e5a025eef96ebc7eece3f51b8a167241434d) - fix(ui): don't emit a void element as a component's mount wrapper. A component instance mounts into a wrapper tag derived from its name (`<Search>`→`<search>`); when the name lowercases to a void element (`<Input>`→`<input>`, `<Img>`→`<img>`) the wrapper self-closes and the HTML parser reparents the component's own markup as the wrapper's siblings, so on hydration `openChild` finds the wrapper empty, claims `null`, and `attr` throws `null is not an object (setAttribute)` — aborting hydration. Such names now map to a hyphenated custom-element tag (`abide-input`, never void) made layout-transparent with `display:contents`, so the child's real root still lays out as a direct child of the parent. Both the SSR string and the client build go through the shared `componentWrapperTag`, keeping them in agreement.
+
+- [`9695bea`](https://github.com/briancray/abide/commit/9695bea26309b693d6b61a4dec1641559421c714) - perf(ui): carry the streamed await-block resume value in a `<script type="application/json">` child instead of a `data-resume` attribute. The attribute form HTML-escaped the JSON (`"` → `&quot;`, plus `&`/`<` passes), inflating the raw payload ~38% and costing two full-string regex passes per render (~2.6 ms/MB; ~10 ms for a 3.7 MB payload). Script content is raw text, so only `<` is neutralized as the JSON escape — ~130–150× cheaper to encode and no quote inflation. `applyResolved` and the inline `SSR_SWAP_SCRIPT` now read the value via `.textContent` and drop the script before swapping the resolved markup into its boundary.
+
 ## 0.32.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.32.0",
+    "version": "0.32.1",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

package/src/lib/server/runtime/SSR_SWAP_SCRIPT.ts

@@ -1,6 +1,7 @@
 /*
 The tiny inline script the abide-ui SSR stream ships in <head>. For each streamed
-`<abide-resolve data-id data-resume>` frame it registers the resolved value into
+`<abide-resolve data-id>` frame it reads the leading `<script type=application/json>`,
+registers the resolved value into
 `window.__abideResume` (the resume manifest hydration reads) and swaps the resolved
 markup into the matching `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary —
 so the pending shell paints instantly and each value lands as it arrives, before
@@ -9,8 +10,8 @@ minified to one line so it inlines cheaply ahead of the document body.
 */
 export const SSR_SWAP_SCRIPT =
     "function __abideSwap(){var f=document.querySelector('abide-resolve');while(f){" +
-    "var id=f.getAttribute('data-id'),w=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT),o=null,c;" +
-    "try{(window.__abideResume=window.__abideResume||{})[id]=JSON.parse(f.getAttribute('data-resume')||'null');}catch(e){}" +
+    "var id=f.getAttribute('data-id'),p=f.firstChild,w=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT),o=null,c;" +
+    "if(p&&p.nodeName==='SCRIPT'){try{(window.__abideResume=window.__abideResume||{})[id]=JSON.parse(p.textContent||'null');}catch(e){}p.remove();}" +
     "while((c=w.nextNode())){if(c.data==='abide:await:'+id){o=c;break;}}" +
     "if(o){var n=o.nextSibling;while(n&&!(n.nodeType===8&&n.data==='/abide:await:'+id)){var x=n.nextSibling;n.remove();n=x;}" +
     "while(f.firstChild){o.parentNode.insertBefore(f.firstChild,n);}}f.remove();f=document.querySelector('abide-resolve');}}"

package/src/lib/server/runtime/createServer.ts

@@ -238,6 +238,32 @@ export async function createServer({
     /* Request closing records are on by default — DEBUG=-abide is the off switch (negation, like the abide channel itself). */
     const logRequests = !isDebugNegated('abide')
 
+    /*
+    Time an asset serve and emit its closing record when logging is on. A miss
+    (undefined, from the public server) passes through unlogged so the request
+    can fall through to the 404 path.
+    */
+    const timedServe = async <T extends Response | undefined>(
+        serve: () => Promise<T>,
+        req: Request,
+        url: URL,
+    ): Promise<T> => {
+        if (!logRequests) {
+            return serve()
+        }
+        const start = Bun.nanoseconds()
+        const response = await serve()
+        if (response) {
+            logClosingRecord(
+                req.method,
+                `${url.pathname}${url.search}`,
+                response.status,
+                (Bun.nanoseconds() - start) / 1e6,
+            )
+        }
+        return response
+    }
+
     // App-configured headers extend the in-process forward allowlist for the process lifetime.
     extraForwardHeaders.set(app?.forwardHeaders ?? [])
 
@@ -546,19 +572,7 @@ export async function createServer({
                 catches anything that goes wrong inside serveAppAsset.
                 */
                 if (url.pathname.startsWith('/_app/')) {
-                    if (!logRequests) {
-                        return serveAppAsset(req, url)
-                    }
-                    const start = Bun.nanoseconds()
-                    const response = await serveAppAsset(req, url)
-                    const ms = (Bun.nanoseconds() - start) / 1e6
-                    logClosingRecord(
-                        req.method,
-                        `${url.pathname}${url.search}`,
-                        response.status,
-                        ms,
-                    )
-                    return response
+                    return timedServe(() => serveAppAsset(req, url), req, url)
                 }
                 /*
                 Files under public/ are served at the site root, sidestepping
@@ -566,17 +580,8 @@ export async function createServer({
                 undefined so the request falls through to the 404 / middleware
                 path below.
                 */
-                const publicStart = Bun.nanoseconds()
-                const publicResponse = await servePublicAsset(req, url)
+                const publicResponse = await timedServe(() => servePublicAsset(req, url), req, url)
                 if (publicResponse) {
-                    if (logRequests) {
-                        logClosingRecord(
-                            req.method,
-                            `${url.pathname}${url.search}`,
-                            publicResponse.status,
-                            (Bun.nanoseconds() - publicStart) / 1e6,
-                        )
-                    }
                     return publicResponse
                 }
                 /*

package/src/lib/server/runtime/createUiPageRenderer.ts

@@ -27,7 +27,7 @@ Response out.
 
 A page with no `await` block renders synchronously and ships buffered. A page with
 await blocks STREAMS: the pending shell flushes first, then each resolved fragment
-(`<abide-resolve data-resume>`) as its promise settles, swapped into its boundary
+(`<abide-resolve>` carrying a JSON `<script>`) as its promise settles, swapped into its boundary
 by the inline SSR_SWAP_SCRIPT — which also registers the value into the resume
 manifest so client hydration adopts it without re-fetching (see abide/ui/awaitBlock).
 

package/src/lib/ui/compile/compileShadow.ts

@@ -184,6 +184,27 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
     return { imports, types, scope, props }
 }
 
+/* Value-projects a nested control-flow `<script>` body the way `analyzeScript`
+   projects the leading script's scope: reactive declarations become their value
+   type, every other statement stays verbatim. Returns the projected source text
+   (unmapped — nested scripts carry no source offset yet), so a branch's markup
+   reads a nested signal as its value type instead of the raw `State`/`Derived`. */
+function projectNestedScript(code: string): string {
+    const file = ts.createSourceFile('nested.ts', code, ts.ScriptTarget.Latest, true)
+    const verbatim = (node: ts.Node): string => code.slice(node.getStart(file), node.getEnd())
+    /* No mapping: a zero-length segment the caller drops. */
+    const span = (): ShadowMapping => ({ shadowStart: 0, sourceStart: 0, length: 0 })
+    return file.statements
+        .flatMap((statement) => {
+            const reactive = reactiveDeclarations(statement)
+            if (reactive === undefined) {
+                return [verbatim(statement)]
+            }
+            return reactive.map((declaration) => scopeLineFor(declaration, [], verbatim, span).text)
+        })
+        .join('\n')
+}
+
 /* The `state`/`derived`/`prop` declarations in a variable statement, or undefined
    if it isn't one declaring them (so the caller emits it verbatim). A statement
    mixing reactive and plain declarations is rare; treated as all-verbatim. */
@@ -264,51 +285,13 @@ function scopeLineFor(
     return { text: `let ${name} = props[${JSON.stringify(keyText)}];`, segments: [] }
 }
 
-/* Emits a sibling list. Walks with lookahead so an `if` and its trailing `else`
-   (the next meaningful sibling — a `case` with no match) fuse into one
-   `if (…) {…} else {…}`, giving the else branch the condition's negative narrowing
-   instead of being checked bare against the un-narrowed type. Every other node is
-   emitted standalone via `emitNode`. */
+/* Emits a sibling list — each node standalone via `emitNode`. */
 function emitNodes(nodes: TemplateNode[], builder: Builder): void {
-    for (let index = 0; index < nodes.length; index += 1) {
-        const node = nodes[index]
-        if (node === undefined) {
-            continue
-        }
-        if (node.kind !== 'if') {
+    for (const node of nodes) {
+        if (node !== undefined) {
             emitNode(node, builder)
-            continue
-        }
-        builder.raw('if ')
-        builder.expr(node.condition, node.loc)
-        builder.raw(' {\n')
-        emitNodes(node.children, builder)
-        builder.raw('}')
-        const elseIndex = nextMeaningful(nodes, index + 1)
-        const elseNode = elseIndex === -1 ? undefined : nodes[elseIndex]
-        if (elseNode?.kind === 'case' && elseNode.match === undefined) {
-            builder.raw(' else {\n')
-            emitNodes(elseNode.children, builder)
-            builder.raw('}')
-            index = elseIndex
-        }
-        builder.raw('\n')
-    }
-}
-
-/* Index of the next node that isn't whitespace-only text (which separates the `if`
-   and `else` tags in source but carries no checkable content); -1 if none remain. */
-function nextMeaningful(nodes: TemplateNode[], from: number): number {
-    for (let index = from; index < nodes.length; index += 1) {
-        const node = nodes[index]
-        const blank =
-            node?.kind === 'text' &&
-            node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
-        if (!blank) {
-            return index
         }
     }
-    return -1
 }
 
 /* Emits a template node's expressions into the shadow's render body. Control flow
@@ -353,15 +336,31 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             emitNodes(node.children, builder)
             return
         }
-        case 'if':
-            /* Reached only for an `if` emitted outside a sibling list (none today);
-               `emitNodes` owns the `if`/`else` fusion. Emit without an else. */
+        case 'if': {
+            /* The optional `<template else>` is a match-less `case` CHILD (the runtime
+               pairs it the same way — see `generateIf`); the rest are the then-content.
+               Emitting it as a real `else` gives its body the condition's NEGATIVE
+               narrowing — emitting it inside the `if` block (as a plain child) instead
+               gave it the positive narrowing, so a literal-union compare read as a
+               "no overlap" and a typeof-narrowed branch saw the wrong member. */
+            const elseChild = node.children.find(
+                (child): child is Extract<TemplateNode, { kind: 'case' }> =>
+                    child.kind === 'case' && child.match === undefined,
+            )
+            const thenChildren = node.children.filter((child) => child !== elseChild)
             builder.raw('if ')
             builder.expr(node.condition, node.loc)
             builder.raw(' {\n')
-            emitNodes(node.children, builder)
-            builder.raw('}\n')
+            emitNodes(thenChildren, builder)
+            builder.raw('}')
+            if (elseChild !== undefined) {
+                builder.raw(' else {\n')
+                emitNodes(elseChild.children, builder)
+                builder.raw('}')
+            }
+            builder.raw('\n')
             return
+        }
         case 'each':
             /* `for await` over an async each's AsyncIterable, plain `for…of` otherwise —
                so the item binds to the element type under either iteration protocol. */
@@ -436,8 +435,8 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('}\n')
             return
         case 'case':
-            /* Reached only for a stray case outside a switch/if-else (none today); a
-               `switch` emits its own cases and `emitNodes` consumes an `else`. */
+            /* Reached only for a stray case outside a switch/if (none today); a `switch`
+               emits its own cases and the `if` handler consumes its `else` child. */
             if (node.match !== undefined) {
                 builder.stmt(node.match, node.loc)
             }
@@ -464,14 +463,16 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('};\n')
             return
         case 'script':
-            /* A scoped reactive `<script>`: emit its body INLINE in the current block,
-               not a nested `{…}` — so its bindings are visible to the branch's later
-               siblings (a nested if/each within the same branch), matching runtime
-               scope where a nested script's declarations deref through the rest of the
-               branch. A wrapping block trapped them, surfacing "Cannot find name" on a
-               sibling. Leading `;` guards a preceding semicolon-less call from merging
-               in (see the component case). Not yet position-mapped (rare). */
-            builder.raw(`;\n${node.code}\n`)
+            /* A scoped reactive `<script>`: value-project its reactive declarations to
+               their value types (`derived(…)` → the computed value, `state(…)` → the
+               initial) exactly as the leading script's scope lines are, so the branch's
+               markup type-checks a nested signal as its value — matching the runtime,
+               which derefs nested-script signals through the rest of the branch. Emitted
+               INLINE in the current block, not a nested `{…}`, so its bindings reach the
+               branch's later siblings (a nested if/each); a wrapping block trapped them,
+               surfacing "Cannot find name". Leading `;` guards a preceding semicolon-less
+               call from merging in (see the component case). Not yet position-mapped. */
+            builder.raw(`;\n${projectNestedScript(node.code)}\n`)
             return
         case 'style':
             /* CSS, not TypeScript — nothing for the shadow to type-check. */

package/src/lib/ui/compile/componentWrapperTag.ts

@@ -0,0 +1,20 @@
+import { VOID_TAGS } from './VOID_TAGS.ts'
+
+/*
+The element tag a component instance mounts into. Normally the component name
+lowercased — readable in devtools, a real box like any abide wrapper. But a name
+that lowercases to a VOID element (`Input`→`input`, `Img`→`img`) would yield a
+wrapper the HTML parser self-closes, reparenting the component's own markup as the
+wrapper's siblings — so on hydration `openChild` finds the wrapper empty, claims
+`null`, and `attr` throws on it. Those names map to a hyphenated custom-element tag
+(a custom element is never void) made layout-transparent with `display:contents`,
+so the component's real root still lays out as a direct child of the parent the way
+the (parse-broken) void wrapper effectively did. Both back-ends call this so the SSR
+string and the client build agree on the wrapper.
+*/
+export function componentWrapperTag(name: string): { tag: string; transparent: boolean } {
+    const lower = name.toLowerCase()
+    return VOID_TAGS.has(lower)
+        ? { tag: `abide-${lower}`, transparent: true }
+        : { tag: lower, transparent: false }
+}

package/src/lib/ui/compile/generateBuild.ts

@@ -1,5 +1,6 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
+import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { lowerContext } from './lowerContext.ts'
 import { partitionSlots } from './partitionSlots.ts'
@@ -283,10 +284,14 @@ export function generateBuild(
         node: Extract<TemplateNode, { kind: 'component' }>,
         parentVar: string,
     ): string {
-        return mountComponent(
+        const { tag, transparent } = componentWrapperTag(node.name)
+        const { code, varName } = mountComponent(
             node,
-            `openChild(${parentVar}, ${JSON.stringify(node.name.toLowerCase())})`,
-        ).code
+            `openChild(${parentVar}, ${JSON.stringify(tag)})`,
+        )
+        /* A void-name remap is layout-transparent so the child's root stays a direct
+           child of the parent (idempotent on a claimed SSR node that already has it). */
+        return transparent ? `${code}${varName}.setAttribute("style", "display:contents");\n` : code
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a

package/src/lib/ui/compile/generateSSR.ts

@@ -1,4 +1,5 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { lowerContext } from './lowerContext.ts'
 import { partitionSlots } from './partitionSlots.ts'
@@ -154,7 +155,7 @@ export function generateSSR(
                the same wrapper the client mounts into, so SSR and client agree.
                Props pass as thunks; slot content passes as a string-returning
                `$children` the child invokes from its <slot>. */
-            const tag = node.name.toLowerCase()
+            const { tag, transparent } = componentWrapperTag(node.name)
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
@@ -181,7 +182,7 @@ export function generateSSR(
                the enclosing render body, including from branch closures.) */
             const result = nextVar('$child')
             return (
-                push(target, `<${tag}>`) +
+                push(target, `<${tag}${transparent ? ' style="display:contents"' : ''}>`) +
                 `const ${result} = ${node.name}.render({ ${parts.join(', ')} });\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +

package/src/lib/ui/dom/applyResolved.ts

@@ -2,8 +2,8 @@ import { RESUME } from '../runtime/RESUME.ts'
 
 /*
 Client consumer of an SSR stream fragment. Parses a streamed
-`<abide-resolve data-id="ID" data-resume="…">…</abide-resolve>` frame, registers
-its serialized value in the resume manifest (for later hydration), finds the
+`<abide-resolve data-id="ID"><script type="application/json">…</script>…</abide-resolve>`
+frame, registers its serialized value in the resume manifest (for later hydration), finds the
 matching `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary in `root`, removes
 the pending nodes between the markers, and inserts the resolved content in their
 place. The pending shell painted instantly; this swaps in each value as it
@@ -21,14 +21,17 @@ export function applyResolved(root: Element, frame: string): void {
     if (id === null) {
         return
     }
-    /* Record the resolved value so a later hydrate adopts this branch (no re-fetch). */
-    const resume = resolved.getAttribute('data-resume')
-    if (resume !== null) {
+    /* The resolved value rides in a leading <script type=application/json>; parse and
+       remove it so only the resolved markup moves into the boundary. Recording it lets a
+       later hydrate adopt this branch (no re-fetch). */
+    const payload = resolved.firstChild as Element | null
+    if (payload !== null && payload.nodeName === 'SCRIPT') {
         try {
-            RESUME[Number(id)] = JSON.parse(resume)
+            RESUME[Number(id)] = JSON.parse(payload.textContent ?? 'null')
         } catch {
             /* malformed payload — leave unregistered, hydration re-runs the promise */
         }
+        payload.remove()
     }
     const open = `abide:await:${id}`
     const close = `/abide:await:${id}`

package/src/lib/ui/dom/eachAsync.ts

@@ -69,7 +69,7 @@ export function eachAsync<T>(
     effect(() => {
         generation += 1
         const generationAtStart = generation
-        iterator?.return?.() // close the superseded run's iterator before re-streaming
+        iterator?.return?.(undefined)?.catch(() => undefined) // close the superseded run's iterator before re-streaming
         iterator = undefined
         clearError() // a fresh run drops a prior error branch
         const iterable = items() // read (subscribe) synchronously
@@ -128,7 +128,7 @@ export function eachAsync<T>(
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => {
             generation += 1
-            iterator?.return?.()
+            iterator?.return?.(undefined)?.catch(() => undefined)
             iterator = undefined
             clearError()
             for (const row of rows.values()) {

package/src/lib/ui/renderToStream.ts

@@ -5,10 +5,11 @@ import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 Out-of-order SSR streaming. Yields the pending shell first (so the browser paints
 immediately), then one resolved fragment per await block as its promise settles —
 in completion order, not source order, so a slow read never blocks a fast one.
-Each resolved fragment is a `<abide-resolve data-id="ID" data-resume="…">…</abide-resolve>`
-that `applyResolved` swaps into the matching `<!--abide:await:ID-->` boundary; the
-`data-resume` payload is the JSON-serialized value, registered for hydration so an
-`await` block adopts the resolved branch on resume instead of re-running.
+Each resolved fragment is a `<abide-resolve data-id="ID"><script type="application/json">
+…</script>…</abide-resolve>` that `applyResolved` swaps into the matching
+`<!--abide:await:ID-->` boundary; the leading script holds the JSON-serialized value,
+registered for hydration so an `await` block adopts the resolved branch on resume
+instead of re-running.
 
 This is the await-block-streams half of the cache rule: a top-level `await` in the
 script would have blocked the shell (inlined), but an await *block* flushes its
@@ -46,7 +47,9 @@ export async function* renderToStream(render: () => SsrRender): AsyncGenerator<s
         const resolved = await Promise.race(inflight.values())
         inflight.delete(resolved.id)
         const resume = encodeResume(resolved.resume)
-        yield `<abide-resolve data-id="${resolved.id}" data-resume="${resume}">${resolved.html}</abide-resolve>`
+        yield `<abide-resolve data-id="${resolved.id}">` +
+            `<script type="application/json">${resume}</script>` +
+            `${resolved.html}</abide-resolve>`
     }
 }
 
@@ -94,11 +97,11 @@ function settle(block: SsrAwait): Promise<Settled> {
     )
 }
 
-/* JSON for an HTML double-quoted attribute: escape `"` and `&` (and `<` for safety
-   inside markup). `applyResolved`/the inline swap script decode it via the DOM. */
+/* JSON for a `<script type="application/json">` data block: script content is raw
+   text, so only `<` needs neutralizing (emitted as a unicode escape) to keep a
+   literal `</script>` from closing the block early — quotes stay raw. Far cheaper
+   than attribute escaping (no full-string `"`/`&` passes) and JSON.parse decodes it
+   back. `applyResolved`/the inline swap script read it via `.textContent`. */
 function encodeResume(resume: ResumeEntry): string {
-    return JSON.stringify(resume)
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
+    return JSON.stringify(resume).replace(/</g, '\\u003c')
 }