@abide/abide 0.39.0 → 0.40.1

package/src/lib/shared/decodeRefJson.ts

@@ -0,0 +1,110 @@
+/*
+Inverse of encodeRefJson — rebuild a value graph (cycles, shared references, and the
+JSON-hostile types) from a `[rootValue, slots]` ref-json string. Two passes are
+required: pass one allocates every hoisted container as an empty shell, pass two fills
+them. The shell must exist before its contents are filled so a back-reference to an
+ancestor resolves to the already-allocated object — which is what reconnects a cycle.
+Inline primitives need no shell; they decode directly where they sit.
+*/
+import { REF_JSON_TAGS } from './REF_JSON_TAGS'
+
+export function decodeRefJson(text: string): unknown {
+    const parsed = JSON.parse(text)
+    if (!Array.isArray(parsed) || parsed.length !== 2 || !Array.isArray(parsed[1])) {
+        // encodeRefJson always emits a `[rootValue, slots]` pair; anything else isn't our format.
+        throw new TypeError('decodeRefJson: not a ref-json payload')
+    }
+    const [rootValue, slots] = parsed as [unknown, unknown[]]
+    // Pass 1: an empty container shell per slot. Pass 2 fills them so a ref to an ancestor finds its shell.
+    const shells = slots.map(buildShell)
+    slots.forEach((slot, index) => {
+        fillShell(slot, shells[index], shells)
+    })
+    return resolveValue(rootValue, shells)
+}
+
+// Empty container matching a slot's kind. Every slot is a container (only containers are hoisted).
+function buildShell(slot: unknown): unknown {
+    if (Array.isArray(slot)) {
+        if (slot[0] === REF_JSON_TAGS.ARRAY) {
+            return []
+        }
+        if (slot[0] === REF_JSON_TAGS.MAP) {
+            return new Map()
+        }
+        if (slot[0] === REF_JSON_TAGS.SET) {
+            return new Set()
+        }
+    }
+    return {}
+}
+
+// Decode an inline value: bare primitive (itself), a leaf-special, or a reference to a built shell.
+function resolveValue(value: unknown, shells: unknown[]): unknown {
+    if (!Array.isArray(value)) {
+        return value
+    }
+    switch (value[0]) {
+        case REF_JSON_TAGS.REF:
+            return shells[value[1] as number]
+        case REF_JSON_TAGS.UNDEFINED:
+            return undefined
+        case REF_JSON_TAGS.DATE:
+            return new Date(value[1] as number)
+        case REF_JSON_TAGS.REGEXP:
+            return new RegExp(value[1] as string, value[2] as string)
+        case REF_JSON_TAGS.BIGINT:
+            return BigInt(value[1] as string)
+        case REF_JSON_TAGS.NUMBER:
+            return decodeNumberToken(value[1] as string)
+        default:
+            throw new TypeError(`decodeRefJson: unknown value tag ${String(value[0])}`)
+    }
+}
+
+// Fill a container shell from its slot, resolving each inline child.
+function fillShell(slot: unknown, shell: unknown, shells: unknown[]): void {
+    if (!Array.isArray(slot)) {
+        const target = shell as Record<string, unknown>
+        const record = slot as Record<string, unknown>
+        for (const key of Object.keys(record)) {
+            target[key] = resolveValue(record[key], shells)
+        }
+        return
+    }
+    if (slot[0] === REF_JSON_TAGS.ARRAY) {
+        const target = shell as unknown[]
+        // Loop (not push(...spread)) so a huge array can't blow the call-stack arg limit.
+        for (let index = 1; index < slot.length; index++) {
+            target.push(resolveValue(slot[index], shells))
+        }
+        return
+    }
+    if (slot[0] === REF_JSON_TAGS.MAP) {
+        const target = shell as Map<unknown, unknown>
+        for (const [key, val] of slot[1] as [unknown, unknown][]) {
+            target.set(resolveValue(key, shells), resolveValue(val, shells))
+        }
+        return
+    }
+    if (slot[0] === REF_JSON_TAGS.SET) {
+        const target = shell as Set<unknown>
+        for (const member of slot[1] as unknown[]) {
+            target.add(resolveValue(member, shells))
+        }
+    }
+}
+
+// Reverse of encodeRefJson's numberToken.
+function decodeNumberToken(token: string): number {
+    if (token === 'NaN') {
+        return Number.NaN
+    }
+    if (token === 'Infinity') {
+        return Number.POSITIVE_INFINITY
+    }
+    if (token === '-Infinity') {
+        return Number.NEGATIVE_INFINITY
+    }
+    return -0
+}

package/src/lib/shared/encodeRefJson.ts

@@ -0,0 +1,106 @@
+/*
+Serialise an arbitrary value graph to a JSON string that survives cycles and shared
+references — the gap JSON.stringify can't cross. Only mutable CONTAINERS (objects,
+arrays, Maps, Sets) are hoisted into a flat `slots` array and referenced by index, so
+a cycle becomes a back-reference instead of infinite recursion, and two paths to the
+same container decode back to the same object. Primitives are encoded INLINE at their
+position (not hoisted), so a primitive-heavy payload stays near plain-JSON size and
+speed. Beyond plain objects/arrays it round-trips the types JSON drops or coerces:
+undefined, bigint, NaN, ±Infinity, -0, Date, RegExp, Map and Set. Functions and
+symbols can't be serialised and encode as undefined, matching JSON.stringify. Output
+shape is `[rootValue, slots]`. Decode with decodeRefJson. Not streaming — the whole
+graph is walked up front.
+*/
+import { REF_JSON_TAGS } from './REF_JSON_TAGS'
+
+export function encodeRefJson(value: unknown): string {
+    // Hoisted containers only; slots[i] is addressed by ['~r', i]. Primitives stay inline.
+    const slots: unknown[] = []
+    // Container identity → slot index: a revisited container emits a back-reference instead of recursing.
+    const ids = new Map<object, number>()
+
+    // Hoist a container to a slot (once) and return its index. Reserve the index BEFORE encoding
+    // children so a cyclic child resolves back to this slot.
+    function intern(container: object): number {
+        const seen = ids.get(container)
+        if (seen !== undefined) {
+            return seen
+        }
+        const index = slots.length
+        slots.push(0)
+        ids.set(container, index)
+        slots[index] = encodeContainer(container)
+        return index
+    }
+
+    // Inline encoding of a value at its position: bare primitive, leaf-special tag, or a container reference.
+    function encodeValue(input: unknown): unknown {
+        if (input === null) {
+            return null
+        }
+        const type = typeof input
+        if (type === 'string' || type === 'boolean') {
+            return input
+        }
+        if (type === 'number') {
+            const numeric = input as number
+            // -0, NaN, ±Infinity can't round-trip as bare JSON; tag them.
+            if (!Number.isFinite(numeric) || Object.is(numeric, -0)) {
+                return [REF_JSON_TAGS.NUMBER, numberToken(numeric)]
+            }
+            return numeric
+        }
+        if (type === 'bigint') {
+            return [REF_JSON_TAGS.BIGINT, (input as bigint).toString()]
+        }
+        // undefined | function | symbol — not representable; fold to undefined as JSON drops them.
+        if (type !== 'object') {
+            return [REF_JSON_TAGS.UNDEFINED]
+        }
+        if (input instanceof Date) {
+            return [REF_JSON_TAGS.DATE, input.getTime()]
+        }
+        if (input instanceof RegExp) {
+            return [REF_JSON_TAGS.REGEXP, input.source, input.flags]
+        }
+        // Mutable container: hoist for identity and reference it — primitives above never reach here.
+        return [REF_JSON_TAGS.REF, intern(input as object)]
+    }
+
+    // A hoisted container's slot: a tagged array (or plain object) whose nested values are encoded inline.
+    function encodeContainer(container: object): unknown {
+        if (Array.isArray(container)) {
+            return [REF_JSON_TAGS.ARRAY, ...container.map(encodeValue)]
+        }
+        if (container instanceof Map) {
+            return [
+                REF_JSON_TAGS.MAP,
+                Array.from(container, ([key, val]) => [encodeValue(key), encodeValue(val)]),
+            ]
+        }
+        if (container instanceof Set) {
+            return [REF_JSON_TAGS.SET, Array.from(container, encodeValue)]
+        }
+        const record = container as Record<string, unknown>
+        // Own enumerable keys, built in one loop — ~2× cheaper than Object.fromEntries(keys.map(...))
+        // (no intermediate pairs array / closures) on this per-object always-hot path.
+        const encoded: Record<string, unknown> = {}
+        for (const key of Object.keys(record)) {
+            encoded[key] = encodeValue(record[key])
+        }
+        return encoded
+    }
+
+    return JSON.stringify([encodeValue(value), slots])
+}
+
+// Stable token for the numbers JSON can't carry.
+function numberToken(value: number): string {
+    if (Object.is(value, -0)) {
+        return '-0'
+    }
+    if (Number.isNaN(value)) {
+        return 'NaN'
+    }
+    return value > 0 ? 'Infinity' : '-Infinity'
+}

package/src/lib/test/createTestSocketChannel.ts

@@ -3,6 +3,8 @@ import type { SocketClientFrame } from '../server/sockets/types/SocketClientFram
 import type { SocketServerFrame } from '../server/sockets/types/SocketServerFrame.ts'
 import { buildSocketOverChannel } from '../shared/buildSocketOverChannel.ts'
 import { createSocketSubRegistry } from '../shared/createSocketSubRegistry.ts'
+import { decodeRefJson } from '../shared/decodeRefJson.ts'
+import { encodeRefJson } from '../shared/encodeRefJson.ts'
 
 /*
 Test-side substitute for the browser socketChannel: one ws to the booted
@@ -37,7 +39,8 @@ export function createTestSocketChannel(wsUrl: string): {
     }
 
     function send(frame: SocketClientFrame): void {
-        const message = JSON.stringify(frame)
+        // ref-json, matching the browser channel + the server's dispatcher/publish codec.
+        const message = encodeRefJson(frame)
         if (ws.readyState === WebSocket.OPEN) {
             ws.send(message)
             return
@@ -53,7 +56,8 @@ export function createTestSocketChannel(wsUrl: string): {
     ws.addEventListener('message', (event) => {
         let frame: SocketServerFrame
         try {
-            frame = JSON.parse(event.data as string) as SocketServerFrame
+            // The server sends ref-json frames (createSocketDispatcher/defineSocket); decode to match.
+            frame = decodeRefJson(event.data as string) as SocketServerFrame
         } catch {
             return
         }

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

@@ -0,0 +1,7 @@
+import ts from 'typescript'
+
+/* The shared TypeScript printer every compile pass prints its transformed tree with.
+   A `ts.Printer` is stateless and reusable, so the passes share one instance rather
+   than each re-creating the same `{ newLine: LineFeed }` printer. LineFeed keeps the
+   emitted source `\n`-delimited regardless of the host platform. */
+export const TS_PRINTER = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })

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

@@ -1,5 +1,4 @@
-import { desugarSignals } from './desugarSignals.ts'
-import { lowerDocAccess } from './lowerDocAccess.ts'
+import { lowerScript } from './lowerScript.ts'
 import { parseTemplate } from './parseTemplate.ts'
 import { scopeCss } from './scopeCss.ts'
 import type { AnalyzedComponent } from './types/AnalyzedComponent.ts'
@@ -30,19 +29,18 @@ export function analyzeComponent(source: string, scopeSeed?: string): AnalyzedCo
     const scriptBody = (scriptMatch?.[1] ?? '').trim()
     const template = source.replace(/^\s*<script[^>]*>[\s\S]*?<\/script>/, '').trim()
 
-    const { code: desugared, stateNames, derivedNames, computedNames } = desugarSignals(scriptBody)
-    const lowered = desugared.trim() === '' ? '' : lowerDocAccess(desugared, 'model')
-    /* Hoist top-level import statements (e.g. child components) out of the script
-       so the module wrapper can place them at module scope — they can't live
-       inside the mount callback / render function. */
-    const imports: string[] = []
-    const script = lowered
-        .replace(/^[ \t]*import\s[^\n]*$/gm, (line) => {
-            imports.push(line.trim())
-            return ''
-        })
-        .replace(/\n{2,}/g, '\n')
-        .trim()
+    /* `lowerScript` parses the script ONCE and chains signal desugaring, reference
+       renaming, and doc-access lowering over that single tree, then hoists top-level
+       imports off the tree structurally — imports live at module scope, not inside the
+       mount/render function the body becomes. It returns the collected signal name sets. */
+    const {
+        body: script,
+        ssrBody: ssrScript,
+        imports,
+        stateNames,
+        derivedNames,
+        computedNames,
+    } = lowerScript(scriptBody)
     /* The parser keeps each `<style>` as an in-place node (one inside an expression
        is text, never a node). `annotateScopes` mutates the tree — assigning each
        style its scope attribute and stamping covered elements — and returns the
@@ -51,7 +49,8 @@ export function analyzeComponent(source: string, scopeSeed?: string): AnalyzedCo
     const styles = annotateScopes(nodes, [], scopeSeed, { count: 0 })
     return {
         script,
-        imports: imports.join('\n'),
+        ssrScript,
+        imports,
         stateNames,
         derivedNames,
         computedNames,

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

@@ -0,0 +1,66 @@
+import ts from 'typescript'
+import { UI_RUNTIME_IMPORTS } from './UI_RUNTIME_IMPORTS.ts'
+
+/*
+Independent backstop on the per-component dead-import filter (`compileModule`). The filter
+decides which runtime helpers to import by reading the generated output's identifiers; if it
+ever undercounts — as a raw token scan once did, mis-reading the tail of a module after a
+`${…}` template substitution — a helper gets CALLED but never imported, and the bundle throws
+`ReferenceError` the instant `build()` runs. The router escalates that into a reload loop, so
+the failure is both opaque and unrecoverable.
+
+This re-derives the same question a DIFFERENT way (so it can't share the filter's blind spot):
+walk the final module's AST, find every call whose callee is a bare runtime-helper identifier,
+and require that name to be imported or locally bound. A helper name inside a string / template /
+comment is not a `CallExpression` callee, so a docs component quoting framework code
+(`mount(...)` in a snippet) never false-positives. Compile-time only; never on the hot path.
+*/
+export function assertRuntimeHelpersBound(module: string, context: string): void {
+    const helperNames = new Set(UI_RUNTIME_IMPORTS.map((entry) => entry.name))
+    const source = ts.createSourceFile(
+        'module.ts',
+        module,
+        ts.ScriptTarget.Latest,
+        /* setParentNodes */ true,
+    )
+    /* Names a bare call can resolve to: every import binding plus every declared name.
+       Collected generously (any identifier in a binding position) — over-approximating the
+       bound set only risks missing a defect, never raising a false alarm on valid output. */
+    const bound = new Set<string>()
+    const calledHelpers: { name: string; position: number }[] = []
+    const visit = (node: ts.Node): void => {
+        if (
+            (ts.isVariableDeclaration(node) ||
+                ts.isFunctionDeclaration(node) ||
+                ts.isParameter(node) ||
+                ts.isBindingElement(node) ||
+                ts.isImportSpecifier(node) ||
+                ts.isImportClause(node) ||
+                ts.isNamespaceImport(node)) &&
+            node.name !== undefined &&
+            ts.isIdentifier(node.name)
+        ) {
+            bound.add(node.name.text)
+        }
+        if (
+            ts.isCallExpression(node) &&
+            ts.isIdentifier(node.expression) &&
+            helperNames.has(node.expression.text)
+        ) {
+            calledHelpers.push({
+                name: node.expression.text,
+                position: node.expression.getStart(source),
+            })
+        }
+        node.forEachChild(visit)
+    }
+    visit(source)
+
+    const unbound = calledHelpers.find((call) => !bound.has(call.name))
+    if (unbound !== undefined) {
+        const { line, character } = source.getLineAndCharacterOfPosition(unbound.position)
+        throw new Error(
+            `[abide] ${context} calls runtime helper \`${unbound.name}\` at line ${line + 1}:${character + 1} but never imports it — the dead-import filter dropped it. Please report this with the component source.\nOutput:\n${module}`,
+        )
+    }
+}

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

@@ -0,0 +1,19 @@
+/*
+Fail-loud guard for generated code. The compile passes build modules as strings and
+AST — a corruption (an un-handled rewrite position, a generator bug, a stale lowering)
+otherwise ships as a broken bundle that fails opaquely at load. Transpiling the output
+turns it into a compile-time error naming the stage and showing the offending source.
+`context` labels which stage produced it. Compile-time only; never on the hot path.
+*/
+
+const transpiler = new Bun.Transpiler({ loader: 'ts' })
+
+export function assertTranspiles(code: string, context: string): void {
+    try {
+        transpiler.transformSync(code)
+    } catch (error) {
+        throw new Error(
+            `[abide] ${context} produced invalid syntax — please report this with the component source. Output:\n${code}\n\n${String(error)}`,
+        )
+    }
+}

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

@@ -1,5 +1,8 @@
+import ts from 'typescript'
 import { ABIDE_PACKAGE_NAME } from '../../shared/ABIDE_PACKAGE_NAME.ts'
 import { analyzeComponent } from './analyzeComponent.ts'
+import { assertRuntimeHelpersBound } from './assertRuntimeHelpersBound.ts'
+import { assertTranspiles } from './assertTranspiles.ts'
 import { compileComponent } from './compileComponent.ts'
 import { compileSSR } from './compileSSR.ts'
 import { UI_RUNTIME_IMPORTS } from './UI_RUNTIME_IMPORTS.ts'
@@ -58,14 +61,6 @@ if (!hotReplace(${id}, component)) location.reload()
     }
 
     const ssrBody = indent(compileSSR(source, isLayout, options.moduleId, analyzed))
-    /* Per-component dead-import elimination: emit only the runtime names this module
-       actually references. A component that uses no `each`/`await`/`html` shouldn't
-       drag those modules into its chunk. The package isn't globally side-effect-free
-       (the dev/runtime entries register globals), so a bundler can't tree-shake the
-       unused imports for us — but the generated code is the one place that knows
-       exactly which names it emitted, so it filters here. A name absent from the body
-       is unreferenced; erring toward inclusion (a stray match in user script) only
-       keeps a harmless unused import, never drops a needed one. */
     const moduleBody = `function build(host, $props) {
 ${body}
 }
@@ -89,37 +84,37 @@ component.hydrate = hydrateInto
 component.build = build
 component.hydratable = ${analyzed.hydratable}
 ${options.moduleId === undefined ? '' : `component.__abideId = ${JSON.stringify(options.moduleId)}\n`}`
-    /* Scope each name to the surface that genuinely references it. The SSR body
-       carries fixed boilerplate ($attr/$text helpers, `<!--abide:html-->` markers,
-       the `{ html, state, awaits }` return shape) whose substrings would falsely
-       match value/DOM imports — so client helpers are matched against the client
-       build, render-pass helpers against the SSR body, and the two wrapper calls
-       (mount/hydrate) are always present. */
-    const clientSurface = `${userImports}\n${body}`
-    const isReferenced = (entry: { name: string; specifier: string }): boolean => {
-        if (entry.name === 'mount' || entry.name === 'hydrate') {
-            return true
-        }
-        /* The SSR render always brackets itself with a per-render scope (compileSSR),
-           so these are referenced whenever the `render` export is — i.e. always. */
-        if (entry.name === 'enterScope' || entry.name === 'exitScope') {
-            return true
-        }
-        /* Render-pass helpers are emitted by both back-ends (e.g. client and server
-           await/try blocks both call nextBlockId); their names are distinctive enough
-           that scanning both surfaces adds no false match. */
-        const surface = entry.specifier.startsWith('ui/runtime/')
-            ? `${clientSurface}\n${ssrBody}`
-            : clientSurface
-        return new RegExp(`\\b${entry.name}\\b`).test(surface)
-    }
-    const importBlock = UI_RUNTIME_IMPORTS.filter(isReferenced)
+    /* Per-component dead-import elimination: emit only the runtime helpers this module
+       references. A component using no `each`/`await`/`html` shouldn't drag those modules
+       into its chunk, and the package isn't globally side-effect-free (the dev/runtime
+       entries register globals), so a bundler can't tree-shake them for us.
+       Which to keep: tokenize the generated body and keep the names it genuinely
+       references. Reading the ACTUAL output (not hand-tracking emit sites) is safe by
+       construction — it can never drop a needed import, the way a missed emit-site tag
+       could. Tokenizing rather than substring-matching (`\bname\b`) means a name inside a
+       string/comment/HTML literal (e.g. an `on`-attribute in static markup) no longer
+       forces a spurious import, so no per-surface scoping is needed: a client-only helper
+       simply doesn't appear as an identifier in the SSR body. */
+    const referenced = collectIdentifiers(`${userImports}\n${body}\n${ssrBody}\n${moduleBody}`)
+    const importBlock = UI_RUNTIME_IMPORTS.filter((entry) => referenced.has(entry.name))
         .map((entry) => `import { ${entry.name} } from '${ABIDE_PACKAGE_NAME}/${entry.specifier}'`)
         .join('\n')
-    return `${importBlock}
+    const module = `${importBlock}
 ${userImports}
 
 ${moduleBody}`
+    /* Fail-loud over the WHOLE module, not just the script: the `generateBuild` /
+       `generateSSR` back-ends emit the build and render bodies as string-codegen, the
+       largest un-typed surface in the pipeline. A corruption there (a bad emit on a
+       template shape no test exercises) otherwise ships as a broken bundle; this surfaces
+       it as a located compile error for every component. */
+    assertTranspiles(module, 'component module generation')
+    /* `assertTranspiles` only proves the output PARSES — a call to an un-imported helper is
+       valid syntax, so it slips through. This second guard proves the output is BOUND: every
+       runtime helper it calls is actually imported (an independent check of the dead-import
+       filter above), turning a runtime `ReferenceError` into a located compile error. */
+    assertRuntimeHelpersBound(module, 'component module generation')
+    return module
 }
 
 /* Indents a body block for embedding inside a wrapper function. Lines whose start
@@ -152,3 +147,30 @@ function unescapedBacktickCount(line: string): number {
     }
     return count
 }
+
+/* The identifier names a generated module references — every Identifier node, walked
+   from the real output's AST so string / comment / HTML-literal contents are excluded.
+   Used to decide which runtime helpers to import; reading the output (vs hand-tracking
+   emit sites) can never drop a needed import. A full parse (not a raw token scan) is what
+   keeps template literals honest: a `${…}` substitution — e.g. `navigate(`/p?ts=${Date.now()}`)`
+   in a handler — leaves the scanner unable to find the substitution's closing `}` without
+   the parser's re-scan, so a token-only pass mis-reads the rest of the module as template
+   text and drops every helper referenced after it (an `import`-less `effect`/`mountChild`
+   → a `ReferenceError` at mount → the router's reload fallback → a refresh loop). */
+function collectIdentifiers(code: string): Set<string> {
+    const source = ts.createSourceFile(
+        'module.ts',
+        code,
+        ts.ScriptTarget.Latest,
+        /* setParentNodes */ false,
+    )
+    const names = new Set<string>()
+    const visit = (node: ts.Node): void => {
+        if (ts.isIdentifier(node)) {
+            names.add(node.text)
+        }
+        node.forEachChild(visit)
+    }
+    visit(source)
+    return names
+}

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

@@ -1,7 +1,6 @@
 import { analyzeComponent } from './analyzeComponent.ts'
 import { generateSSR } from './generateSSR.ts'
 import { SSR_ESCAPE } from './SSR_ESCAPE.ts'
-import { stripEffects } from './stripEffects.ts'
 import type { AnalyzedComponent } from './types/AnalyzedComponent.ts'
 
 /*
@@ -44,8 +43,7 @@ export function compileSSR(
     scopeSeed?: string,
     analyzed: AnalyzedComponent = analyzeComponent(source, scopeSeed),
 ): string {
-    const { script, stateNames, derivedNames, computedNames, nodes } = analyzed
-    const lowered = stripEffects(script)
+    const { ssrScript: lowered, stateNames, derivedNames, computedNames, nodes } = analyzed
     const ssr = generateSSR(nodes, stateNames, derivedNames, computedNames, isLayout)
     /* No `<style>` in the markup — the scoped CSS is bundled into the entry stylesheet
        the shell links (see `abideUiPlugin`), so SSR output is styled by that sheet. The

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

@@ -381,19 +381,26 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                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 branches = node.children.filter(
+                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
             )
-            const thenChildren = node.children.filter((child) => child !== elseChild)
+            const thenChildren = node.children.filter((child) => child.kind !== 'case')
             builder.raw('if ')
             builder.expr(node.condition, node.loc)
             builder.raw(' {\n')
             emitNodes(thenChildren, builder)
             builder.raw('}')
-            if (elseChild !== undefined) {
-                builder.raw(' else {\n')
-                emitNodes(elseChild.children, builder)
+            /* `elseif` → a real `else if` so its body inherits the prior conditions' negative
+               narrowing plus its own positive; `else` → the trailing block. */
+            for (const branch of branches) {
+                if (branch.condition !== undefined) {
+                    builder.raw(' else if ')
+                    builder.expr(branch.condition, branch.loc)
+                    builder.raw(' {\n')
+                } else {
+                    builder.raw(' else {\n')
+                }
+                emitNodes(branch.children, builder)
                 builder.raw('}')
             }
             builder.raw('\n')