@abide/abide 0.39.0 → 0.40.0

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

@@ -5,7 +5,9 @@ import { bindListenEvent } from './bindListenEvent.ts'
 import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
+import { isWhitespaceText } from './isWhitespaceText.ts'
 import { lowerContext } from './lowerContext.ts'
+import { resolveBranches } from './resolveBranches.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
 import { spreadExcludedNames } from './spreadExcludedNames.ts'
@@ -477,27 +479,25 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const isBranch = (which: 'then' | 'catch' | 'finally') => (child: TemplateNode) =>
-            child.kind === 'branch' && child.branch === which
-        const catchBranch = node.children.find(isBranch('catch'))
-        const finallyChildren = branchChildren(node.children.find(isBranch('finally')))
+        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
+            node,
+            'then',
+            'catch',
+            'finally',
+        )
+        const finallyChildren = finallyBranch?.children ?? []
         /* Blocking: no pending, the children are the resolved branch bound to `node.as`.
            Streaming: pending is the non-branch children, resolved is the `then` child. */
         const pending = node.blocking
             ? []
             : node.children.filter((child) => child.kind !== 'branch')
-        const thenBranch = node.children.find(isBranch('then'))
         const thenThunk = node.blocking
             ? branchThunk(
                   node.children.filter((child) => child.kind !== 'branch'),
                   node.as ?? '_value',
                   finallyChildren,
               )
-            : branchThunk(
-                  branchChildren(thenBranch),
-                  branchVar(thenBranch) ?? '_value',
-                  finallyChildren,
-              )
+            : branchThunk(thenBranch?.children ?? [], thenBranch?.as ?? '_value', finallyChildren)
         /* Neither catch nor finally → pass `undefined` so awaitBlock re-throws the
            rejection (surfacing it) instead of rendering an empty branch. A finally-only
            block keeps a catch thunk that renders just finally. */
@@ -505,8 +505,8 @@ export function generateBuild(
             catchBranch === undefined && finallyChildren.length === 0
                 ? 'undefined'
                 : branchThunk(
-                      branchChildren(catchBranch),
-                      branchVar(catchBranch) ?? '_error',
+                      catchBranch?.children ?? [],
+                      catchBranch?.as ?? '_error',
                       finallyChildren,
                   )
         const pendingThunk = hasRenderableContent(pending) ? branchThunk(pending) : 'undefined'
@@ -518,16 +518,6 @@ export function generateBuild(
         )
     }
 
-    /* Children of a branch node (then/catch), or [] when the branch is absent. */
-    function branchChildren(branch: TemplateNode | undefined): TemplateNode[] {
-        return branch !== undefined && branch.kind === 'branch' ? branch.children : []
-    }
-
-    /* The value/error variable name a branch binds, if any. */
-    function branchVar(branch: TemplateNode | undefined): string | undefined {
-        return branch !== undefined && branch.kind === 'branch' ? branch.as : undefined
-    }
-
     /* A branch's content as a void render thunk `(parent[, value]) => void` that
        builds its children — and an optional trailing `finally` branch — into
        `parent`. The full-range model tracks the built content between markers, so a
@@ -566,17 +556,6 @@ export function generateBuild(
         )
     }
 
-    /* The branch child of a control block matching `which` (then/catch/finally). */
-    function findBranch(
-        children: TemplateNode[],
-        which: 'then' | 'catch' | 'finally',
-    ): Extract<TemplateNode, { kind: 'branch' }> | undefined {
-        return children.find(
-            (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                child.kind === 'branch' && child.branch === which,
-        )
-    }
-
     /* A sync error boundary: build the guarded subtree (++ finally); a throw while
        building swaps to the catch branch (++ finally). No catch → `undefined`, which
        makes the runtime re-throw to the nearest enclosing boundary. */
@@ -585,18 +564,14 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const catchBranch = findBranch(node.children, 'catch')
-        const finallyChildren = branchChildren(findBranch(node.children, 'finally'))
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const tryThunk = branchThunk(guarded, undefined, finallyChildren)
         const catchThunk =
             catchBranch === undefined
                 ? 'undefined'
-                : branchThunk(
-                      branchChildren(catchBranch),
-                      branchVar(catchBranch) ?? '_error',
-                      finallyChildren,
-                  )
+                : branchThunk(catchBranch.children, catchBranch.as ?? '_error', finallyChildren)
         return `tryBlock(${parentVar}, nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
     }
 
@@ -607,13 +582,33 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const elseBranch = node.children.find(
+        /* The `case` children are the chain's `elseif`/`else` branches in source order;
+           the rest are the `then` content. */
+        const branches = node.children.filter(
             (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
         )
         const thenChildren = node.children.filter((child) => child.kind !== 'case')
-        const thenThunk = branchThunk(thenChildren)
-        const elseThunk = elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
-        return `when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
+        const hasElseif = branches.some((branch) => branch.condition !== undefined)
+        /* Fast path: a plain `if` (with optional `else`) is the binary `when` runtime. */
+        if (!hasElseif) {
+            const elseBranch = branches.find((branch) => branch.condition === undefined)
+            const thenThunk = branchThunk(thenChildren)
+            const elseThunk =
+                elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
+            return `when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
+        }
+        /* if/elseif/else is a cond-chain — reuse `switchBlock` over a constant `true`
+           subject with `Boolean`-coerced match thunks, so the first truthy branch wins
+           (`else` is the match-less default). */
+        const entries = [
+            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(thenChildren)} }`,
+            ...branches.map((branch) =>
+                branch.condition !== undefined
+                    ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
+                    : `{ match: undefined, render: ${branchThunk(branch.children)} }`,
+            ),
+        ]
+        return `switchBlock(${parentVar}, () => true, [${entries.join(', ')}], ${before});\n`
     }
 
     /* A keyed each. Each row is a content RANGE (any content, tracked between the
@@ -635,11 +630,9 @@ export function generateBuild(
            optional `<template catch>` branch rendered (after the streamed rows) when the
            iterator rejects. Absent → `undefined`, so the rejection surfaces instead. */
         const fn = node.async ? 'eachAsync' : 'each'
-        const catchBranch = node.children.find(
-            (child) => child.kind === 'branch' && child.branch === 'catch',
-        )
+        const [catchBranch] = resolveBranches(node, 'catch')
         const catchArg = node.async
-            ? `, ${catchBranch === undefined ? 'undefined' : branchThunk(branchChildren(catchBranch), branchVar(catchBranch) ?? '_error')}`
+            ? `, ${catchBranch === undefined ? 'undefined' : branchThunk(catchBranch.children, catchBranch.as ?? '_error')}`
             : ''
         return (
             `${fn}(${parentVar}, () => (${lowerExpression(node.items)}), ` +
@@ -650,16 +643,6 @@ export function generateBuild(
     return generateChildren(rootNodes, hostVar)
 }
 
-/* A text node that is purely whitespace (no interpolation, only blank static
-   parts). Both back-ends drop it, so it neither contributes markup nor breaks a
-   static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. */
-function isWhitespaceText(node: TemplateNode): boolean {
-    return (
-        node.kind === 'text' &&
-        node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
-    )
-}
-
 /*
 Whether an element subtree is fully static — no reactive/event/bind attributes,
 no nested `<script>`, and every descendant likewise static (static text, static

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

@@ -5,6 +5,7 @@ import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isAnchorPositioned } from './isAnchorPositioned.ts'
 import { lowerContext } from './lowerContext.ts'
+import { resolveBranches } from './resolveBranches.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
 import { spreadExcludedNames } from './spreadExcludedNames.ts'
@@ -21,17 +22,6 @@ import { VOID_TAGS } from './VOID_TAGS.ts'
 const RANGE_OPEN = '<!--[-->'
 const RANGE_CLOSE = '<!--]-->'
 
-/* The `then`/`catch`/`finally` branch child of an await/try block, or undefined. */
-function branchNamed(
-    children: TemplateNode[],
-    which: 'then' | 'catch' | 'finally',
-): Extract<TemplateNode, { kind: 'branch' }> | undefined {
-    return children.find(
-        (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-            child.kind === 'branch' && child.branch === which,
-    )
-}
-
 /*
 Server code generator: turns the parsed template into statements that push HTML
 fragments onto an output array, reading the document synchronously (no DOM, no
@@ -212,11 +202,19 @@ export function generateSSR(
                 .join('')
         }
         if (node.kind === 'if') {
-            const elseBranch = node.children.find((child) => child.kind === 'case')
+            /* `case` children are the `elseif`/`else` branches in source order; the rest are
+               the `then` content. Each `elseif` becomes an `else if`, the match-less `else`
+               the trailing `else`. */
+            const branches = node.children.filter(
+                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
+            )
             const thenChildren = node.children.filter((child) => child.kind !== 'case')
             let code = `if (${lowerExpression(node.condition)}) {\n${branchContent(thenChildren, target)}}`
-            if (elseBranch !== undefined && elseBranch.kind === 'case') {
-                code += ` else {\n${branchContent(elseBranch.children, target)}}`
+            for (const branch of branches) {
+                code +=
+                    branch.condition !== undefined
+                        ? ` else if (${lowerExpression(branch.condition)}) {\n${branchContent(branch.children, target)}}`
+                        : ` else {\n${branchContent(branch.children, target)}}`
             }
             return `${anchor}${openRange(target)}${code}\n${closeRange(target)}`
         }
@@ -442,8 +440,8 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const resolvedChildren = node.children.filter((child) => child.kind !== 'branch')
         const resolvedAs = node.as ?? '_value'
         const errorAs = catchBranch?.as ?? '_error'
@@ -480,9 +478,13 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
-        const thenBranch = branchNamed(node.children, 'then')
+        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
+            node,
+            'then',
+            'catch',
+            'finally',
+        )
+        const finallyChildren = finallyBranch?.children ?? []
         const pending = node.children.filter((child) => child.kind !== 'branch')
         const id = nextVar('$aid')
         let code = `const ${id} = $ctx.next++;\n`
@@ -510,8 +512,8 @@ export function generateSSR(
        an enclosing boundary / the 500 / the stream). Boundary comments let hydration
        discard the server content if the client adoption fails. */
     function generateTry(node: Extract<TemplateNode, { kind: 'try' }>, target: string): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const errName = catchBranch?.as ?? '_error'
         const id = nextVar('$tid')

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

@@ -0,0 +1,11 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* A text node that is purely whitespace (no interpolation, only blank static
+   parts). Both back-ends drop it, so it neither contributes markup nor breaks a
+   static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. */
+export function isWhitespaceText(node: TemplateNode): boolean {
+    return (
+        node.kind === 'text' &&
+        node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
+    )
+}

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

@@ -1,4 +1,5 @@
 import { decodeHtmlEntities } from './decodeHtmlEntities.ts'
+import { isWhitespaceText } from './isWhitespaceText.ts'
 import type { TemplateAttr } from './types/TemplateAttr.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import type { TextPart } from './types/TextPart.ts'
@@ -303,6 +304,13 @@ function rejectStrayBranches(
                 '[abide] <template else>/<template case> must be nested inside its <template if>/<template switch> — a sibling branch is not supported',
             )
         }
+        /* `elseif` is an `if`-chain branch; inside a `switch` it would silently read as the
+           default (match-less), so reject the cross-construct mix. */
+        if (node.kind === 'case' && node.condition !== undefined && parentKind === 'switch') {
+            throw new Error(
+                '[abide] <template elseif> belongs to a <template if> chain, not a <template switch> — use <template case>',
+            )
+        }
         if (
             node.kind === 'branch' &&
             parentKind !== 'await' &&
@@ -313,12 +321,62 @@ function rejectStrayBranches(
                 '[abide] <template then>/<template catch>/<template finally> must be nested inside its <template await>/<template try>/<template each await>',
             )
         }
+        if (node.kind === 'if' || node.kind === 'switch') {
+            rejectMisplacedBranchContent(node)
+        }
         if ('children' in node) {
             rejectStrayBranches(node.children, node.kind)
         }
     }
 }
 
+/* A `<template if>` chain's `then` content precedes its first branch tag
+   (`elseif`/`else`); a `<template switch>` renders only its branch tags. So rendered
+   content sitting AFTER the first branch in an `if` — or ANYWHERE in a `switch` —
+   belongs to no branch: today it silently folds into `then` / is dropped. Reject it so
+   the misplacement surfaces. Whitespace stays transparent, and `<script>`/`<style>` are
+   directives (scoping, not rendered output), so both remain legal anywhere. */
+function rejectMisplacedBranchContent(
+    node: Extract<TemplateNode, { kind: 'if' | 'switch' }>,
+): void {
+    const firstBranch = node.children.findIndex((child) => child.kind === 'case')
+    node.children.forEach((child, index) => {
+        const isRenderedContent =
+            child.kind !== 'case' &&
+            child.kind !== 'script' &&
+            child.kind !== 'style' &&
+            !isWhitespaceText(child)
+        /* In a switch nothing but branches renders, so every position is illegal; in an if
+           only content past the first branch is (the leading then-content is legal). */
+        const illegalPosition =
+            node.kind === 'switch' || (firstBranch !== -1 && index > firstBranch)
+        if (isRenderedContent && illegalPosition) {
+            throw new Error(
+                node.kind === 'switch'
+                    ? '[abide] a <template switch> renders only its <template case>/<template default> branches — move stray content into a branch'
+                    : '[abide] content after a <template elseif>/<template else> belongs to no branch — the then-content must precede the first branch tag',
+            )
+        }
+    })
+    /* In an `if` chain the match-less `<template else>` is the trailing block, so any
+       branch after it (a second `else`, or an `elseif`) compiles to invalid `} else {…}
+       else if {…}` (SSR/type-shadow) or a silently-shadowed branch (the `switchBlock`
+       default wins). Reject so the misordering surfaces here, not as opaque codegen. */
+    if (node.kind === 'if') {
+        const branches = node.children.filter(
+            (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
+        )
+        const elseIndex = branches.findIndex(
+            (branch) => branch.match === undefined && branch.condition === undefined,
+        )
+        if (elseIndex !== -1 && elseIndex < branches.length - 1) {
+            throw new Error(
+                '[abide] <template else> must be the last branch of its <template if> chain — no <template elseif>/<template else> may follow it',
+            )
+        }
+    }
+}
+
 /* Turns a component's attributes into props. A component has no directives —
    every attribute is a prop under its written name, so `on*`/`bind:`/`attach`
    round-trip to their original names (the kinds the tag-blind attribute parser
@@ -468,6 +526,22 @@ function toControlFlow(attrs: TemplateAttr[], children: TemplateNode[]): Templat
         }
         return { kind: 'case', match: matchCode, children, loc: attrLoc(caseAttr) }
     }
+    /* `<template elseif={c}>` is a match-less case carrying a condition — a branch of the
+       enclosing `<template if>` chain, truthy-tested in source order. */
+    const elseif = find('elseif')
+    if (elseif !== undefined) {
+        const conditionCode = attrText(elseif)
+        if (conditionCode === undefined) {
+            throw new Error('[abide] <template elseif> requires a condition expression')
+        }
+        return {
+            kind: 'case',
+            match: undefined,
+            condition: conditionCode,
+            children,
+            loc: attrLoc(elseif),
+        }
+    }
     if (find('default') !== undefined || find('else') !== undefined) {
         return { kind: 'case', match: undefined, children } // default (switch) / else (if)
     }

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

@@ -68,6 +68,18 @@ export function renameSignalRefs(
                with that name added, so shadowing is per-branch (a sibling scope is unaffected). */
             const makeVisitor = (shadowed: ReadonlySet<string>): ts.Visitor => {
                 const visit = (node: ts.Node): ts.Node => {
+                    /* Type space never holds a value read. A type alias, an interface, or any
+                       type annotation can name a signal — a prop-type member `option?: …`, a
+                       `typeof x` — without it being a runtime reference. Leave the whole type
+                       subtree untouched so it isn't rewritten into a call/access (`option()`)
+                       and emitted as broken code (types erase at build anyway). */
+                    if (
+                        ts.isTypeAliasDeclaration(node) ||
+                        ts.isInterfaceDeclaration(node) ||
+                        ts.isTypeNode(node)
+                    ) {
+                        return node
+                    }
                     /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`,
                        unless a nearer scope shadows the name. */
                     if (ts.isShorthandPropertyAssignment(node) && !shadowed.has(node.name.text)) {

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

@@ -0,0 +1,21 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+type Branch = Extract<TemplateNode, { kind: 'branch' }>
+type BranchName = Branch['branch']
+
+/* Extracts the `then`/`catch`/`finally` branch children of a control-flow block
+   (await/try), one slot per requested name in the order asked, so callers
+   destructure them directly. A requested branch that is absent yields `undefined`
+   — the caller reads `?.children`/`?.as` for its content and bound var. This is
+   the one branch-lookup site both back-ends share, replacing the per-generator
+   `findBranch`/`branchNamed`/`branchChildren`/`branchVar` copies. */
+export function resolveBranches(
+    node: Extract<TemplateNode, { children: TemplateNode[] }>,
+    ...which: BranchName[]
+): (Branch | undefined)[] {
+    return which.map((name) =>
+        node.children.find(
+            (child): child is Branch => child.kind === 'branch' && child.branch === name,
+        ),
+    )
+}

package/src/lib/ui/compile/types/TemplateNode.ts

@@ -4,7 +4,7 @@ import type { TextPart } from './TextPart.ts'
 /*
 A parsed template node. `text` carries interpolation parts; `element` carries
 attributes and children; `each` is the `<template each as key>` control flow over
-a list. (if/await/switch are future siblings.)
+a list; `if`/`await`/`switch`/`try` are its control-flow siblings.
 
 `loc` (where present) is the absolute offset of the node's primary expression in
 the original `.abide` source — additive, set only when the parser tracks
@@ -67,7 +67,17 @@ export type TemplateNode =
           children: TemplateNode[]
       }
     | { kind: 'switch'; subject: string; children: TemplateNode[]; loc?: number }
-    | { kind: 'case'; match: string | undefined; children: TemplateNode[]; loc?: number }
+    /* A branch of a `<template switch>` (`match` set) or `<template if>` chain. Inside an
+       `if`, `<template elseif={c}>` sets `condition` (match-less, truthy-tested), and
+       `<template else>` leaves both unset (the default). `loc` points at whichever
+       expression the node carries (`match` or `condition`). */
+    | {
+          kind: 'case'
+          match: string | undefined
+          condition?: string
+          children: TemplateNode[]
+          loc?: number
+      }
     /* A `<template name="row" args={item}>` snippet: a named, scope-capturing
        builder declared once and called like a function (`{row(item)}`). `params`
        is the raw `args` source spliced into the builder's parameter list. */

package/src/lib/ui/createScope.ts

@@ -37,6 +37,9 @@ export function createScope(
     const data = (): Doc => (document ??= createDoc({}))
     const id = parent === undefined ? `scope-${nextId++}` : `${parent.id}.${nextId++}`
     const children: Scope[] = []
+    /* Context values shared down the tree, held apart from the reactive doc (which
+       a child does not inherit): keyed by name, read by the closest ancestor walk. */
+    const shared = new Map<string, unknown>()
     let past: History | undefined
     let persistence: PersistHandle | undefined
     let unsync: (() => void) | undefined
@@ -64,6 +67,16 @@ export function createScope(
             return created
         },
         root: () => (parent === undefined ? self : parent.root()),
+        /* Reference store — no tracking, so a lookup never subscribes; reactivity comes
+           from what is shared (a cell/scope), not from the share. */
+        share: (key, value) => {
+            shared.set(key, value)
+        },
+        /* Closest-ancestor resolve: own map first (self can read what it shared), then
+           defer up via each scope's own `shared`. `has` distinguishes a shared
+           `undefined` from "not provided"; undefined at the root means no provider. */
+        shared: <T>(key: string): T | undefined =>
+            shared.has(key) ? (shared.get(key) as T) : parent?.shared<T>(key),
         record: (options) => {
             past ??= history(data(), options)
         },
@@ -82,6 +95,7 @@ export function createScope(
                 created.dispose()
             }
             children.length = 0
+            shared.clear()
             past?.dispose()
             past = undefined
             persistence?.dispose()

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

@@ -4,6 +4,7 @@ import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { appendSnippet } from './appendSnippet.ts'
+import { parseRawNodes } from './parseRawNodes.ts'
 
 const CLOSE = '/abide:html'
 
@@ -73,9 +74,7 @@ function appendRawHtml(parent: Node, read: () => unknown): void {
         for (const node of nodes) {
             parent.removeChild(node)
         }
-        const holder = document.createElement('div')
-        holder.innerHTML = value
-        nodes = [...holder.childNodes]
+        nodes = parseRawNodes(parent, value)
         for (const node of nodes) {
             parent.insertBefore(node, anchor)
         }

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

@@ -4,6 +4,7 @@ import { effect } from '../effect.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { appendSnippet } from './appendSnippet.ts'
 import { appendText } from './appendText.ts'
+import { parseRawNodes } from './parseRawNodes.ts'
 
 /*
 A reactive `{expr}` interpolation mounted at a skeleton anchor comment (`<!--a-->`), used
@@ -51,9 +52,7 @@ export function appendTextAt(anchor: Node, read: () => unknown): void {
             for (const node of nodes) {
                 parent.removeChild(node)
             }
-            const holder = document.createElement('div')
-            holder.innerHTML = rawHtmlString(read()) ?? ''
-            nodes = [...holder.childNodes]
+            nodes = parseRawNodes(parent, rawHtmlString(read()) ?? '')
             /* Insert the fresh markup just after the anchor (its live re-insertion point). */
             const after = anchor.nextSibling
             for (const node of nodes) {

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

@@ -41,16 +41,13 @@ export function applyResolved(root: Element, frame: string): void {
     if (id === null) {
         return
     }
-    /* 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). */
+    /* The resolved value rides in a leading <script type=application/json> as ref-json
+       text; store it raw and remove the node so only the resolved markup moves into the
+       boundary. Decoding is deferred to the read in `awaitBlock` (which has the codec);
+       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(payload.textContent ?? 'null')
-        } catch {
-            /* malformed payload — leave unregistered, hydration re-runs the promise */
-        }
+        RESUME[Number(id)] = payload.textContent ?? ''
         payload.remove()
     }
     const open = `abide:await:${id}`

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

@@ -1,6 +1,8 @@
+import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import type { ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
@@ -161,7 +163,18 @@ export function awaitBlock(
     const firstHydrate = (result: unknown): void => {
         const cursor = hydration as NonNullable<typeof hydration>
         const open = claimChild(cursor, parent)
-        const entry = RESUME[id]
+        /* RESUME holds the ref-json-encoded entry STRING; decode here, where the codec
+           lives. A decode failure (malformed/absent payload) reads as "no resume" — fall
+           through to the live promise rather than crash hydration. */
+        const raw = RESUME[id]
+        let entry: ResumeEntry | undefined
+        if (raw !== undefined) {
+            try {
+                entry = decodeRefJson(raw) as ResumeEntry
+            } catch {
+                entry = undefined
+            }
+        }
         if (entry !== undefined) {
             let build: (host: Node) => void
             if (entry.ok) {

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

@@ -12,6 +12,13 @@ resolves the component, not whatever is current when the event fires.
 */
 // @documentation plumbing
 export function on(element: Element, type: string, handler: EventListener): void {
+    /* A caller that omits an optional `on*` prop forwards it as undefined, yet the
+       compiler still emits this on() call — so skip attaching a non-function rather
+       than invoke undefined when the event fires (e.g. input/keydown on a search box,
+       which would throw "handler is not a function" on every keystroke). */
+    if (typeof handler !== 'function') {
+        return
+    }
     const captured = CURRENT_SCOPE.current
     const wrapped: EventListener = (event) => inScope(captured, () => handler(event))
     element.addEventListener(type, wrapped)

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

@@ -0,0 +1,17 @@
+import { foreignWrapperTag } from './foreignWrapperTag.ts'
+
+/*
+Parses a trusted raw-markup string into detached nodes in the SAME foreign namespace
+as `parent`. The HTML fragment parser namespaces by its context element, so markup
+bound inside an <svg>/<math> must parse inside a matching wrapper — otherwise a bare
+`<path>` lands in the HTML namespace and never renders. Mirrors `cloneStatic`'s
+foreign handling, but parses per-call into a throwaway `<template>` rather than the
+skeleton cache: raw values are dynamic, so caching every distinct string would leak.
+*/
+export function parseRawNodes(parent: Node, markup: string): Node[] {
+    const wrapper = foreignWrapperTag(parent)
+    const template = document.createElement('template')
+    template.innerHTML = wrapper === undefined ? markup : `<${wrapper}>${markup}</${wrapper}>`
+    const source = wrapper === undefined ? template.content : (template.content.firstChild as Node)
+    return [...source.childNodes]
+}