@abide/abide 0.34.2 → 0.35.0

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

@@ -2,26 +2,28 @@ import ts from 'typescript'
 import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 import { renameSignalRefs } from './renameSignalRefs.ts'
 
-/* The reactive primitives that must be reached through a scope (`prop` is excluded — it
-   reads parent-passed props, not scope data, so it stays a bare call). A bare call to one
-   of these is a compile error: reactive state is owned by a scope and the surface must show
+/* The reactive primitives that must be reached through a scope. A bare call to one of
+   these is a compile error: reactive state is owned by a scope and the surface must show
    it (`scope().state(...)`), so a reader always sees the scope interaction. */
 const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed'])
 
-/* Throws if the script calls a scope primitive bare (`state(0)`) instead of through a scope
-   (`scope().state(0)` / `c.state(0)`). Walks all calls, so a stray one nested in a function
-   is caught too, not just top-level declarations. */
+/* Throws on a bare scope primitive (`state(0)` instead of `scope().state(0)`) or on the
+   removed `prop(...)` reader — props are now read by destructuring `props()`. Walks all
+   calls, so a stray one nested in a function is caught too, not just top-level declarations. */
 function assertScopedPrimitives(source: ts.SourceFile): void {
     const visit = (node: ts.Node): void => {
-        if (
-            ts.isCallExpression(node) &&
-            ts.isIdentifier(node.expression) &&
-            SCOPE_PRIMITIVES.has(node.expression.text)
-        ) {
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression)) {
             const name = node.expression.text
-            throw new Error(
-                `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
-            )
+            if (SCOPE_PRIMITIVES.has(name)) {
+                throw new Error(
+                    `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
+                )
+            }
+            if (name === 'prop') {
+                throw new Error(
+                    'abide: `prop(...)` has been removed — read props by destructuring `props()`, e.g. `const { name } = props()` (with a default: `const { name = fallback } = props()`).',
+                )
+            }
         }
         ts.forEachChild(node, visit)
     }
@@ -64,6 +66,19 @@ export function desugarSignals(scriptBody: string): {
         }
         for (const declaration of statement.declarationList.declarations) {
             const callee = signalCallee(declaration)
+            if (callee === 'props') {
+                /* `const {…} = props()` — each destructured binding is a read-only
+                   computed over the parent thunk, read as `name()`. */
+                if (!ts.isObjectBindingPattern(declaration.name)) {
+                    throw new Error(
+                        'abide: `props()` must be destructured — `const { a, b } = props()`',
+                    )
+                }
+                for (const binding of propsBindings(declaration)) {
+                    computedNames.add(binding.local)
+                }
+                continue
+            }
             if (!ts.isIdentifier(declaration.name)) {
                 continue
             }
@@ -71,9 +86,9 @@ export function desugarSignals(scriptBody: string): {
                 /* Plain `state(initial)` → a serializable `model` doc slot. */
                 stateNames.add(declaration.name.text)
             } else if (isComputedSlot(declaration)) {
-                /* Read-only `computed(compute)` / `prop` → a computed `scope().derive`
-                   doc slot, referenced as `name()` (its string-free reader): a function
-                   of other paths, recomputed via the graph, never stored/serialized. */
+                /* Read-only `computed(compute)` → a computed `scope().derive` doc slot,
+                   referenced as `name()` (its string-free reader): a function of other
+                   paths, recomputed via the graph, never stored/serialized. */
                 computedNames.add(declaration.name.text)
             } else if (callee !== undefined && REACTIVE_CALLEES.has(callee)) {
                 /* `.value` cells: `linked` and `state(initial, transform)` — they own
@@ -95,14 +110,14 @@ export function desugarSignals(scriptBody: string): {
     for (const statement of source.statements) {
         const stateAssignments = stateDeclarationAssignments(statement, printer, source)
         const computedDeclarations = computedDeclarationLines(statement, printer, source)
-        const propDeclarations = propDeclarationLines(statement, printer, source)
+        const propsDestructure = propsDestructureLines(statement, printer, source)
         const cellDeclarations = cellDeclarationLines(statement, printer, source)
         if (stateAssignments !== undefined) {
             lines.push(...stateAssignments)
         } else if (computedDeclarations !== undefined) {
             lines.push(...computedDeclarations)
-        } else if (propDeclarations !== undefined) {
-            lines.push(...propDeclarations)
+        } else if (propsDestructure !== undefined) {
+            lines.push(...propsDestructure)
         } else if (cellDeclarations !== undefined) {
             lines.push(...cellDeclarations)
         } else {
@@ -118,16 +133,12 @@ export function desugarSignals(scriptBody: string): {
 }
 
 /* True for a read-only computed slot — `computed(compute)` with no write-through
-   `set`, or a `prop` (a read-only computed over the parent thunk). The writable
-   `computed(compute, set)` lens keeps a `.value` cell (handled by the caller). */
+   `set`. The writable `computed(compute, set)` lens keeps a `.value` cell (handled by
+   the caller). */
 function isComputedSlot(declaration: ts.VariableDeclaration): boolean {
-    const callee = signalCallee(declaration)
-    if (callee === 'prop') {
-        return true
-    }
     const initializer = declaration.initializer
     return (
-        callee === 'computed' &&
+        signalCallee(declaration) === 'computed' &&
         initializer !== undefined &&
         ts.isCallExpression(initializer) &&
         initializer.arguments.length === 1
@@ -234,10 +245,51 @@ function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     return undefined
 }
 
-/* If `statement` declares `prop(...)` bindings, returns a reactive computed over
-   the parent-supplied `$props` thunk for each; otherwise undefined. The optional
-   call (`?.()`) tolerates an omitted prop. */
-function propDeclarationLines(
+/* One destructured prop: the local binding name, the parent prop key it reads, and
+   the optional `= default` expression (the fallback when the prop is absent). */
+type PropsBinding = { local: string; key: string; initializer: ts.Expression | undefined }
+
+/* The bindings of a `const {…} = props()` pattern. Rest (`...rest`) and nested
+   destructuring have no single prop key, so they throw a legible compile error. */
+function propsBindings(declaration: ts.VariableDeclaration): PropsBinding[] {
+    const pattern = declaration.name as ts.ObjectBindingPattern
+    return pattern.elements.map((element) => {
+        if (element.dotDotDotToken !== undefined) {
+            throw new Error('abide: `...rest` in `props()` destructuring is not supported')
+        }
+        if (!ts.isIdentifier(element.name)) {
+            throw new Error('abide: nested destructuring in `props()` is not supported')
+        }
+        return {
+            local: element.name.text,
+            key: propsBindingKey(element),
+            initializer: element.initializer,
+        }
+    })
+}
+
+/* The parent prop key a binding element reads — its rename source (`name: alias` →
+   `name`) or, absent a rename, the local name itself. */
+function propsBindingKey(element: ts.BindingElement): string {
+    const propertyName = element.propertyName
+    if (propertyName === undefined) {
+        return (element.name as ts.Identifier).text
+    }
+    if (
+        ts.isIdentifier(propertyName) ||
+        ts.isStringLiteralLike(propertyName) ||
+        ts.isNumericLiteral(propertyName)
+    ) {
+        return propertyName.text
+    }
+    throw new Error('abide: computed prop keys in `props()` destructuring are not supported')
+}
+
+/* If `statement` is a `const {…} = props()` destructure, returns one reactive
+   computed per binding — `scope().derive("name", () => $props["key"]?.() ?? default)`
+   — read as `name()`; otherwise undefined. The `?? default` applies the binding's
+   `= default` fallback when the prop is absent. */
+function propsDestructureLines(
     statement: ts.Statement,
     printer: ts.Printer,
     source: ts.SourceFile,
@@ -247,15 +299,18 @@ function propDeclarationLines(
     }
     const lines: string[] = []
     for (const declaration of statement.declarationList.declarations) {
-        if (signalCallee(declaration) !== 'prop' || !ts.isIdentifier(declaration.name)) {
+        if (signalCallee(declaration) !== 'props' || !ts.isObjectBindingPattern(declaration.name)) {
             return undefined
         }
-        const key = (declaration.initializer as ts.CallExpression).arguments[0]
-        const keyText =
-            key === undefined ? "''" : printer.printNode(ts.EmitHint.Unspecified, key, source)
-        lines.push(
-            `const ${declaration.name.text} = scope().derive(${JSON.stringify(declaration.name.text)}, () => $props[${keyText}]?.())`,
-        )
+        for (const { local, key, initializer } of propsBindings(declaration)) {
+            const fallback =
+                initializer === undefined
+                    ? ''
+                    : ` ?? (${printer.printNode(ts.EmitHint.Unspecified, initializer, source)})`
+            lines.push(
+                `const ${local} = scope().derive(${JSON.stringify(local)}, () => $props[${JSON.stringify(key)}]?.()${fallback})`,
+            )
+        }
     }
     return lines
 }

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

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { escapeKey } from '../runtime/escapeKey.ts'
 
 /*
 The linchpin compiler pass. Rewrites idiomatic data access on a reactive document
@@ -9,16 +10,19 @@ component hit the fast path instead of building path strings by hand:
   model.note = 'x'        →  model.replace("note", 'x')
   model.count += 1        →  model.replace("count", model.read("count") + 1)
   model.lines.push(v)     →  model.add("lines/-", v)
-  delete model.byId[key]  →  model.remove(`byId/${key}`)
+  delete model.byId[key]  →  model.remove("byId/" + escapeKey(key))
   model.lines[0].sku      →  model.read("lines/0/sku")
-  model.lines[i].sku      →  model.read(`lines/${i}/sku`)
+  model.lines[i].sku      →  model.read("lines/" + escapeKey(i) + "/sku")
 
 A member/element-access chain rooted at `docName` becomes a `/`-joined path:
 literal keys and numeric indices fold into one string literal; a non-literal
-index makes the path a template (a dynamic segment). Reads are lowered to
-`read(path)`; a later pass hoists static-path reads to a `cell` bound once at
-component init (the string-free hot path the bench measured). Index expressions
-are themselves visited, so a read used as an index lowers too.
+index makes the path a template (a dynamic segment). Path segments are
+JSON-Pointer-escaped so a key holding `/` or `~` addresses one segment, not
+many — literal keys at compile time, dynamic ones wrapped in a runtime
+`escapeKey(...)`. Reads are lowered to `read(path)`; a later pass hoists
+static-path reads to a `cell` bound once at component init (the string-free hot
+path the bench measured). Index expressions are themselves visited, so a read
+used as an index lowers too.
 */
 export function lowerDocAccess(code: string, docName: string): string {
     const source = ts.createSourceFile('component.ts', code, ts.ScriptTarget.Latest, true)
@@ -54,12 +58,15 @@ function docAccessTransformer(docName: string): ts.TransformerFactory<ts.SourceF
             let current: ts.Expression = node
             while (true) {
                 if (ts.isPropertyAccessExpression(current)) {
-                    segments.unshift({ kind: 'literal', value: current.name.text })
+                    /* A property name is an identifier — escapeKey is a no-op on it, but
+                       a string-literal element key (`model["a/b"]`) can carry `/`|`~` and
+                       must escape at compile time so the `/`-joined path doesn't mis-split. */
+                    segments.unshift({ kind: 'literal', value: escapeKey(current.name.text) })
                     current = current.expression
                 } else if (ts.isElementAccessExpression(current)) {
                     const argument = current.argumentExpression
                     if (ts.isStringLiteral(argument) || ts.isNumericLiteral(argument)) {
-                        segments.unshift({ kind: 'literal', value: argument.text })
+                        segments.unshift({ kind: 'literal', value: escapeKey(argument.text) })
                     } else {
                         segments.unshift({
                             kind: 'expression',
@@ -165,8 +172,8 @@ function docCall(docName: string, method: string, args: ts.Expression[]): ts.Cal
 /*
 Turns segments into a path expression: an all-literal path is one string literal
 (`"lines/0/sku"`); a path with a dynamic segment is a string-concatenation that
-evaluates to the path at runtime (`"lines/" + i + "/sku"`), kept string-typed by
-leading with a literal.
+evaluates to the path at runtime (`"lines/" + escapeKey(i) + "/sku"`), kept
+string-typed by leading with a literal.
 */
 function buildPath(segments: Segment[]): ts.Expression {
     if (segments.every((segment) => segment.kind === 'literal')) {
@@ -194,7 +201,15 @@ function buildPath(segments: Segment[]): ts.Expression {
             if (separator !== '') {
                 appendText(separator)
             }
-            fragments.push(segment.node)
+            /* A dynamic key's value is unknown at compile time — escape it at runtime so a
+               key holding `/`|`~` (a date, a composite id) addresses one segment, not many. */
+            fragments.push(
+                ts.factory.createCallExpression(
+                    ts.factory.createIdentifier('escapeKey'),
+                    undefined,
+                    [segment.node],
+                ),
+            )
         }
     })
     const head = fragments[0]

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

@@ -130,7 +130,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 cursor += 1
             }
             if (source.charAt(cursor) !== '=') {
-                attrs.push({ kind: 'static', name, value: '' }) // boolean attribute
+                attrs.push({ kind: 'static', name, value: '', bare: true }) // boolean attribute
                 continue
             }
             cursor += 1 // past '='
@@ -284,13 +284,16 @@ function rejectStrayBranches(
 /* 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
-   assigned) instead of being dropped. A static value becomes a string literal;
-   every other kind keeps its `code`, letting a prop hold any value, functions
-   included (e.g. an `onclick` callback). */
+   assigned) instead of being dropped. A static value becomes a string literal —
+   a bare attribute coerces to `true` instead; every other kind keeps its `code`,
+   letting a prop hold any value, functions included (e.g. an `onclick` callback). */
 function toProps(attrs: TemplateAttr[]): { name: string; code: string; loc?: number }[] {
     return attrs.map((attr) => {
         if (attr.kind === 'static') {
-            return { name: attr.name, code: JSON.stringify(attr.value) }
+            /* A bare attribute (`<Toggle on />`) is a boolean flag: coerce it to
+               `true` so the prop reads as a boolean, not the empty string a native
+               element would serialise. An explicit `on=""` stays the empty string. */
+            return { name: attr.name, code: attr.bare ? 'true' : JSON.stringify(attr.value) }
         }
         /* Every non-static kind keeps its `code`/`loc`; only the prop name differs —
            a directive (`event`/`bind`/`attach`) round-trips to its written name. */

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

@@ -3,7 +3,7 @@ import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 
 /*
 The signal binding names a `<script>` nested in a control-flow branch declares
-(`state`/`linked`/`computed`/`prop`). The back-end adds them to the deref scope so both the
+(`state`/`linked`/`computed`). The back-end adds them to the deref scope so both the
 script body and the branch's markup rewrite `{a}` → `a.value` — these stay PLAIN
 signals (local to the branch's render, owned by its scope, re-seeded from the
 in-scope data each mount), unlike the top-level component script which desugars to
@@ -30,7 +30,7 @@ export function nestedBindingNames(code: string): Set<string> {
     return names
 }
 
-/* The callee name of a `NAME = state(...)` / `computed(...)` / `prop(...)` declaration —
+/* The callee name of a `NAME = state(...)` / `computed(...)` / `linked(...)` declaration —
    bare or the explicit scope form (`scope().state(...)` / `c.state(...)`), receiver-agnostic. */
 function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     const initializer = declaration.initializer

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

@@ -9,6 +9,13 @@ touched — declaration names, parameter names, and property names are collected
 into a skip set first, and object shorthand (`{ count }`) is expanded to
 `{ count: model.count }`. This is the bridge from the signal surface the author
 writes to the patch substrate underneath.
+
+The rewrite is lexically scope-aware: a reference whose name is re-bound by an
+enclosing scope (a function/arrow parameter or a nested local declaration) refers
+to that inner binding, not the component signal, so it is left untouched. Without
+this, a callback like `list.map(option => option.toUpperCase())` in a component
+that also has an `option` prop (`const { option } = props()`) would have its loop
+variable rewritten to `option()` and blow up at runtime (`option is not a function`).
 */
 export function renameSignalRefs(
     code: string,
@@ -18,6 +25,10 @@ export function renameSignalRefs(
 ): string {
     const source = ts.createSourceFile('component.ts', code, ts.ScriptTarget.Latest, true)
 
+    /* The signal names that a nested binding can shadow — only these matter for
+       scope tracking, so we ignore every other local binding. */
+    const signalNames = new Set<string>([...stateNames, ...derivedNames, ...computedNames])
+
     /* Identifier nodes that are names, not value reads — never rewritten. */
     const skip = new Set<ts.Node>()
     const collect = (node: ts.Node): void => {
@@ -45,33 +56,47 @@ export function renameSignalRefs(
 
     const result = ts.transform(source, [
         (context) => (root) => {
-            const visit = (node: ts.Node): ts.Node => {
-                /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`. */
-                if (ts.isShorthandPropertyAssignment(node)) {
-                    const replacement = referenceFor(
-                        node.name.text,
-                        stateNames,
-                        derivedNames,
-                        computedNames,
-                    )
-                    if (replacement !== undefined) {
-                        return ts.factory.createPropertyAssignment(node.name.text, replacement)
+            /* Each visitor carries the set of signal names shadowed by the scopes it sits
+               inside; entering a scope that re-binds a signal name produces a fresh visitor
+               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 => {
+                    /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`,
+                       unless a nearer scope shadows the name. */
+                    if (ts.isShorthandPropertyAssignment(node) && !shadowed.has(node.name.text)) {
+                        const replacement = referenceFor(
+                            node.name.text,
+                            stateNames,
+                            derivedNames,
+                            computedNames,
+                        )
+                        if (replacement !== undefined) {
+                            return ts.factory.createPropertyAssignment(node.name.text, replacement)
+                        }
                     }
-                }
-                if (ts.isIdentifier(node) && !skip.has(node)) {
-                    const replacement = referenceFor(
-                        node.text,
-                        stateNames,
-                        derivedNames,
-                        computedNames,
-                    )
-                    if (replacement !== undefined) {
-                        return replacement
+                    if (ts.isIdentifier(node) && !skip.has(node) && !shadowed.has(node.text)) {
+                        const replacement = referenceFor(
+                            node.text,
+                            stateNames,
+                            derivedNames,
+                            computedNames,
+                        )
+                        if (replacement !== undefined) {
+                            return replacement
+                        }
                     }
+                    /* Recurse with the scope this node introduces folded in (same visitor when
+                       it adds no shadowing name, so unscoped subtrees allocate nothing extra). */
+                    const inner = extendShadowed(node, shadowed, signalNames)
+                    return ts.visitEachChild(
+                        node,
+                        inner === shadowed ? visit : makeVisitor(inner),
+                        context,
+                    )
                 }
-                return ts.visitEachChild(node, visit, context)
+                return visit
             }
-            return ts.visitNode(root, visit) as ts.SourceFile
+            return ts.visitNode(root, makeVisitor(new Set())) as ts.SourceFile
         },
     ])
     const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
@@ -80,6 +105,111 @@ export function renameSignalRefs(
     return output
 }
 
+/* The shadowed-name set for `node`'s children: the parent set plus any signal name
+   that `node` re-binds as a new scope. Returns the parent set unchanged (same
+   reference) when `node` introduces no colliding binding, so the caller can skip
+   allocating a new visitor. */
+function extendShadowed(
+    node: ts.Node,
+    shadowed: ReadonlySet<string>,
+    signalNames: ReadonlySet<string>,
+): ReadonlySet<string> {
+    const introduced = new Set<string>()
+    collectScopeBindings(node, introduced)
+    const added = [...introduced].filter((name) => signalNames.has(name) && !shadowed.has(name))
+    if (added.length === 0) {
+        return shadowed
+    }
+    return new Set<string>([...shadowed, ...added])
+}
+
+/* The names `node` binds when it opens a lexical scope — function/arrow parameters
+   (and the function's own name), block-level `let`/`const`/`function`/`class`,
+   `for`-header declarations, and the `catch` binding. Only names bound directly at
+   this scope; deeper scopes are folded in as the walk descends into them. */
+function collectScopeBindings(node: ts.Node, into: Set<string>): void {
+    const parameters = functionParameters(node)
+    if (parameters !== undefined) {
+        for (const parameter of parameters) {
+            collectBindingNames(parameter.name, into)
+        }
+        if (
+            (ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node)) &&
+            node.name !== undefined
+        ) {
+            into.add(node.name.text)
+        }
+        return
+    }
+    if (ts.isBlock(node) || ts.isModuleBlock(node) || ts.isCaseBlock(node)) {
+        const statements = ts.isCaseBlock(node)
+            ? node.clauses.flatMap((clause) => [...clause.statements])
+            : node.statements
+        for (const statement of statements) {
+            collectStatementBindings(statement, into)
+        }
+        return
+    }
+    if (ts.isCatchClause(node) && node.variableDeclaration !== undefined) {
+        collectBindingNames(node.variableDeclaration.name, into)
+        return
+    }
+    if (ts.isForStatement(node) || ts.isForInStatement(node) || ts.isForOfStatement(node)) {
+        const initializer = node.initializer
+        if (initializer !== undefined && ts.isVariableDeclarationList(initializer)) {
+            for (const declaration of initializer.declarations) {
+                collectBindingNames(declaration.name, into)
+            }
+        }
+    }
+}
+
+/* The names a single block-level statement binds: `var`/`let`/`const`, and named
+   `function`/`class` declarations. */
+function collectStatementBindings(statement: ts.Statement, into: Set<string>): void {
+    if (ts.isVariableStatement(statement)) {
+        for (const declaration of statement.declarationList.declarations) {
+            collectBindingNames(declaration.name, into)
+        }
+    }
+    if (
+        (ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) &&
+        statement.name !== undefined
+    ) {
+        into.add(statement.name.text)
+    }
+}
+
+/* Every identifier bound by a binding name — a plain identifier or the leaves of a
+   destructuring pattern (object/array, including rest elements). */
+function collectBindingNames(name: ts.BindingName, into: Set<string>): void {
+    if (ts.isIdentifier(name)) {
+        into.add(name.text)
+        return
+    }
+    for (const element of name.elements) {
+        if (ts.isBindingElement(element)) {
+            collectBindingNames(element.name, into)
+        }
+    }
+}
+
+/* The parameter list of a function-like node, or undefined if `node` is not one. */
+function functionParameters(node: ts.Node): ts.NodeArray<ts.ParameterDeclaration> | undefined {
+    if (
+        ts.isArrowFunction(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isMethodDeclaration(node) ||
+        ts.isConstructorDeclaration(node) ||
+        ts.isGetAccessorDeclaration(node) ||
+        ts.isSetAccessorDeclaration(node)
+    ) {
+        return node.parameters
+    }
+    return undefined
+}
+
 /* `model.<name>` for a state binding, `<name>()` for a computed doc-slot (the
    string-free reader `scope().derive` returns), `<name>.value` for a runtime cell
    (linked / lens / transform-state), else undefined. */

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

@@ -1,5 +1,7 @@
 /*
-An element attribute. `static` is a literal; `expression` is `name={code}` bound
+An element attribute. `static` is a literal — `bare` marks a valueless attribute
+(`disabled`, not `disabled=""`), letting a component coerce it to `true` while a
+native element still serialises it as `name=""`; `expression` is `name={code}` bound
 reactively; `event` is `on<event>={code}` where `code` evaluates to the handler;
 `bind` is `bind:<property>={lvalue}`, a two-way binding whose `code` is the
 writable doc path read into the property and written back on input; `attach` is
@@ -9,7 +11,7 @@ absolute offset of `code` in the original `.abide` source (see TextPart) —
 optional, set only when the parser tracks positions for the type-checking shadow.
 */
 export type TemplateAttr =
-    | { kind: 'static'; name: string; value: string }
+    | { kind: 'static'; name: string; value: string; bare?: true }
     | { kind: 'expression'; name: string; code: string; loc?: number }
     | { kind: 'event'; event: string; code: string; loc?: number }
     | { kind: 'bind'; property: string; code: string; loc?: number }

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

@@ -1,13 +1,23 @@
 import { RESUME } from '../runtime/RESUME.ts'
+import { seedStreamedResolution } from '../seedStreamedResolution.ts'
 
 /*
-Client consumer of an SSR stream fragment. Parses a streamed
-`<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
-arrives — completing the out-of-order streaming loop on the client.
+Bundle-side consumer of an SSR stream chunk, the counterpart of the doc stream's inline
+vanilla scripts (SSR_SWAP_SCRIPT's `__abideSwap` + `__abideResolve`) for a stream the
+running bundle consumes itself — streaming SPA navigation, socket-delivered SSR. It routes
+the two chunk kinds the stream interleaves:
+
+  - `<abide-cache>{StreamedResolution}</abide-cache>` → seed the streamed cache partition.
+    A script set via innerHTML never runs, so the cache channel rides a data frame here
+    (not the doc stream's `<script>__abideResolve(…)</script>`); seeding it keeps the
+    pending {#await} read warm instead of cold-missing to the network.
+  - `<abide-resolve data-id="ID"><script type="application/json">…</script>…</abide-resolve>`
+    → register the value in the resume manifest (for hydration), find the matching
+    `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary in `root`, remove the pending
+    nodes between the markers, and insert the resolved content in their place.
+
+The pending shell painted instantly; this swaps in each value as it arrives — completing
+the out-of-order streaming loop on the client.
 */
 // @documentation plumbing
 export function applyResolved(root: Element, frame: string): void {
@@ -17,6 +27,16 @@ export function applyResolved(root: Element, frame: string): void {
     if (resolved === null || resolved.getAttribute === undefined) {
         return
     }
+    /* A cache-seed frame warms the streamed cache partition — paired with the DOM swap so a
+       bundle-consumed stream can't adopt a resolved branch while dropping its cache key. */
+    if (resolved.nodeName === 'ABIDE-CACHE') {
+        try {
+            seedStreamedResolution(JSON.parse(resolved.textContent ?? 'null'))
+        } catch {
+            /* malformed payload — leave unseeded; the read falls back to a live fetch */
+        }
+        return
+    }
     const id = resolved.getAttribute('data-id')
     if (id === null) {
         return

package/src/lib/ui/installHotBridge.ts

@@ -24,6 +24,7 @@ import { effect } from './effect.ts'
 import { enterScope } from './enterScope.ts'
 import { exitScope } from './exitScope.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
+import { escapeKey } from './runtime/escapeKey.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
 import { hotReloadEnabled } from './runtime/hotReloadEnabled.ts'
 import { hotReplace } from './runtime/hotReplace.ts'
@@ -68,6 +69,7 @@ export function installHotBridge(): void {
         mountSlot,
         mountChild,
         hydrate,
+        escapeKey,
         nextBlockId,
         enterRenderPass,
         exitRenderPass,

package/src/lib/ui/runtime/escapeKey.ts

@@ -4,10 +4,16 @@ Escapes one object key into a JSON Pointer reference token (RFC 6901): `~`→`~0
 survives a `/`-joined path instead of being mis-split into segments. `~` is
 escaped first so a `/`→`~1` substitution isn't re-escaped. The common key (a
 plain identifier) contains neither char, so the scan returns it untouched.
+
+Coerces first: lowerDocAccess wraps every dynamic path segment in this call, and a
+segment is often a number (an array index `lines[i]`) — String() mirrors the `+`
+join that built the path before, leaving numerics as their decimal text.
 */
-export function escapeKey(key: string): string {
-    if (!key.includes('~') && !key.includes('/')) {
-        return key
+// @documentation plumbing
+export function escapeKey(key: string | number): string {
+    const segment = String(key)
+    if (!segment.includes('~') && !segment.includes('/')) {
+        return segment
     }
-    return key.replace(/~/g, '~0').replace(/\//g, '~1')
+    return segment.replace(/~/g, '~0').replace(/\//g, '~1')
 }