@abide/abide 0.32.1 → 0.33.0

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

@@ -24,6 +24,7 @@ export function when(
     condition: () => unknown,
     render: (parent: Node) => void,
     renderElse?: (parent: Node) => void,
+    before: Node | null = null,
 ): void {
     const hydration = RENDER.hydration
     const chosenFor = (branch: 'then' | 'else') => (branch === 'then' ? render : renderElse)
@@ -31,7 +32,10 @@ export function when(
     let activeBranch: 'then' | 'else'
     let end: Comment
 
-    const start = openMarker(parent, '[')
+    /* `before` (a static node located by the skeleton) places the range among siblings on
+       create, so the block sits before a static suffix rather than at the parent's end.
+       Hydrate ignores it — the claim cursor (positioned past the prefix) drives placement. */
+    const start = openMarker(parent, '[', before)
     if (hydration !== undefined) {
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
@@ -40,7 +44,7 @@ export function when(
         }
         end = openMarker(parent, ']')
     } else {
-        end = openMarker(parent, ']')
+        end = openMarker(parent, ']', before)
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
         if (chosen !== undefined) {

package/src/lib/ui/installHotBridge.ts

@@ -2,9 +2,11 @@ import { html } from '../shared/html.ts'
 import { snippet } from '../shared/snippet.ts'
 import { derived } from './derived.ts'
 import { doc } from './doc.ts'
+import { anchorCursor } from './dom/anchorCursor.ts'
 import { appendSnippet } from './dom/appendSnippet.ts'
 import { appendStatic } from './dom/appendStatic.ts'
 import { appendText } from './dom/appendText.ts'
+import { appendTextAt } from './dom/appendTextAt.ts'
 import { attach } from './dom/attach.ts'
 import { attr } from './dom/attr.ts'
 import { awaitBlock } from './dom/awaitBlock.ts'
@@ -14,8 +16,9 @@ import { eachAsync } from './dom/eachAsync.ts'
 import { hydrate } from './dom/hydrate.ts'
 import { mount } from './dom/mount.ts'
 import { mountChild } from './dom/mountChild.ts'
+import { mountSlot } from './dom/mountSlot.ts'
 import { on } from './dom/on.ts'
-import { openChild } from './dom/openChild.ts'
+import { skeleton } from './dom/skeleton.ts'
 import { switchBlock } from './dom/switchBlock.ts'
 import { tryBlock } from './dom/tryBlock.ts'
 import { when } from './dom/when.ts'
@@ -48,11 +51,13 @@ export function installHotBridge(): void {
         derived,
         effect,
         mount,
-        openChild,
         appendText,
+        appendTextAt,
         appendSnippet,
         appendStatic,
         cloneStatic,
+        skeleton,
+        anchorCursor,
         attr,
         on,
         attach,
@@ -62,6 +67,7 @@ export function installHotBridge(): void {
         awaitBlock,
         tryBlock,
         switchBlock,
+        mountSlot,
         mountChild,
         hydrate,
         nextBlockId,

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

@@ -0,0 +1,9 @@
+/*
+The marker attribute the client back-end stamps on each hole element in a skeleton
+string — an element carrying reactive attributes/listeners/binds whose live node the
+build must wire up. Its value is the hole's index, so attach code addresses holes by
+number regardless of document order. `skeleton` records each marked node's path,
+strips the attribute, and returns the holes indexed by it. One source of truth so the
+compiler's emit and the runtime's read can't drift.
+*/
+export const HOLE_ATTRIBUTE = 'data-abide-hole'

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

@@ -11,13 +11,20 @@ child components it inlines, so ids are globally unique within one render pass (
 SSR stream and client hydration agree on them — `RESUME` is keyed by id). `depth`
 tracks nesting so the OUTERMOST render/mount resets the counter and a child render/
 mount continues it. See `enterRenderPass`/`nextBlockId`.
+
+`namespace` is the ambient foreign-content namespace (SVG/MathML) a control-flow block
+sets from its insertion parent while building into a detached fragment, so foreign
+elements built there get the right namespace — the fragment itself carries none. It is
+undefined outside foreign content. See `enterNamespace`/`effectiveChildNamespace`.
 */
 export const RENDER: {
     hydration: { next: Map<Node, Node | null> } | undefined
     blockId: number
     depth: number
+    namespace: string | undefined
 } = {
     hydration: undefined,
     blockId: 0,
     depth: 0,
+    namespace: undefined,
 }

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

@@ -1,7 +1,6 @@
 import { applyPatchToTree } from './applyPatchToTree.ts'
 import { createSignalNode } from './createSignalNode.ts'
 import { flushEffects } from './flushEffects.ts'
-import { pathExists } from './pathExists.ts'
 import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
 import { readNode } from './readNode.ts'
 import { trigger } from './trigger.ts'
@@ -9,7 +8,7 @@ import type { Cell } from './types/Cell.ts'
 import type { Doc } from './types/Doc.ts'
 import type { Patch } from './types/Patch.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
-import { valueAtPath } from './valueAtPath.ts'
+import { walkPath } from './walkPath.ts'
 import { writeNode } from './writeNode.ts'
 
 /*
@@ -39,7 +38,7 @@ export function createDoc(initial: unknown): Doc {
     function nodeFor(path: string): ReactiveNode {
         let node = nodes.get(path)
         if (node === undefined) {
-            node = createSignalNode(valueAtPath(tree, path))
+            node = createSignalNode(walkPath(tree, path).value)
             nodes.set(path, node)
         }
         return node
@@ -60,7 +59,7 @@ export function createDoc(initial: unknown): Doc {
     paying a scan over every minted node.
     */
     function wakeSubtree(rootPath: string, force: boolean, descend: boolean): void {
-        const rootValue = valueAtPath(tree, rootPath)
+        const rootValue = walkPath(tree, rootPath).value
         const rootNode = nodes.get(rootPath)
         if (rootNode !== undefined) {
             if (force) {
@@ -82,8 +81,9 @@ export function createDoc(initial: unknown): Doc {
                    and this very descend scan degrades linearly with it. The woken
                    reader re-mints a fresh node on its flush if the path ever returns.
                    Deleting the current entry mid-iteration is safe on a Map. */
-                if (pathExists(tree, candidate)) {
-                    writeNode(node, valueAtPath(tree, candidate))
+                const walk = walkPath(tree, candidate)
+                if (walk.exists) {
+                    writeNode(node, walk.value)
                 } else {
                     writeNode(node, undefined)
                     nodes.delete(candidate)
@@ -95,8 +95,11 @@ export function createDoc(initial: unknown): Doc {
     function apply(patch: Patch): void {
         const segments = patch.path === '' ? [] : patch.path.split('/')
         tree = applyPatchToTree(tree, patch, segments)
-        const parentPath = segments.slice(0, -1).join('/')
-        const parentValue = valueAtPath(tree, parentPath)
+        /* parentPath is patch.path minus its last segment — the same string
+           `segments.slice(0, -1).join('/')` rebuilds, taken by one slice instead. */
+        const lastSlash = patch.path.lastIndexOf('/')
+        const parentPath = lastSlash === -1 ? '' : patch.path.slice(0, lastSlash)
+        const parentValue = walkPath(tree, parentPath).value
         const leafKey = segments[segments.length - 1] as string | undefined
         /* A structural change (add/remove, or an array element replaced by index)
            reshapes the parent; a plain value replace reshapes only its own path. */

package/src/lib/ui/runtime/types/PathWalk.ts

@@ -0,0 +1,10 @@
+/*
+The result of walking a `/`-joined path through a tree: whether the path still
+resolves to an own slot at every segment, and the value it holds. `exists` is
+false when a segment is missing (a deleted key, an out-of-range index); `value`
+is then `undefined`. Separates a missing path from one holding a real `undefined`.
+*/
+export type PathWalk = {
+    exists: boolean
+    value: unknown
+}

package/src/lib/ui/runtime/types/UiProps.ts

@@ -3,13 +3,12 @@ What a component is invoked with. Two real shapes flow through the one parameter
 A top-level page/layout is called by the router (client) and `renderChain` (SSR)
 with its decoded route params — a plain string map. A nested child is called by
 the compiler-emitted `mountChild` with a map of reactive thunks (each authored
-prop, read in the body as `$props[name]?.()`) plus optional slot builders:
-`$children` for default-slot markup and `$slots[name]` for named slots, each
-mounting into the host element it is handed.
+prop, read in the body as `$props[name]?.()`) plus an optional `$children` slot
+builder carrying the component's `<slot>` markup, mounting into the host element
+it is handed.
 */
 export type UiProps =
     | Record<string, string>
     | (Record<string, () => unknown> & {
           $children?: (host: Element) => void
-          $slots?: Record<string, (host: Element) => void>
       })

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

@@ -0,0 +1,27 @@
+import type { PathWalk } from './types/PathWalk.ts'
+
+/*
+Walks a `/`-joined path through a plain tree in one pass, returning both whether
+the path still resolves (`exists`) and the value it holds (`value`). `''` is the
+root. Arrays index by their numeric segment as a string — JS array access coerces
+the key, and `in` covers an own index in range or `length`.
+
+The two answers are inseparable on the eviction path (`createDoc`'s descend),
+which must distinguish a path the tree no longer has (a deleted key, an
+out-of-range index after a shrink) from one holding a genuine `undefined` — a
+distinction the value alone can't make. Returning both walks the path once where
+a separate value-read + existence-check would walk it twice.
+*/
+export function walkPath(tree: unknown, path: string): PathWalk {
+    if (path === '') {
+        return { exists: tree !== undefined, value: tree }
+    }
+    let current: unknown = tree
+    for (const segment of path.split('/')) {
+        if (current === null || typeof current !== 'object' || !(segment in current)) {
+            return { exists: false, value: undefined }
+        }
+        current = (current as Record<string, unknown>)[segment]
+    }
+    return { exists: true, value: current }
+}

package/template/src/ui/pages/about/page.abide

@@ -1,9 +1,7 @@
 <script>
-/* A second page — served at GET /about. Folder name becomes the URL segment. */
-import Layout from '../../Layout.abide'
+/* A second page — served at GET /about. Folder name becomes the URL segment; the
+   root layout.abide wraps it, same as the home page. */
 </script>
 
-<Layout>
-    <h1>About</h1>
-    <p>This is a barebones abide app.</p>
-</Layout>
+<h1>About</h1>
+<p>This is a barebones abide app.</p>

package/template/src/ui/pages/layout.abide

@@ -0,0 +1,21 @@
+<script>
+/*
+Root layout. A layout.abide wraps every page at or below its folder — here
+src/ui/pages/, so it wraps the whole app. The page lands in the <slot/> outlet;
+the resolver finds it by filename (no per-page import), and the client router
+keeps it mounted across navigation, so this chrome never re-mounts. A nested
+layout.abide (in a subfolder) wraps inside this one. Runs on the server during
+SSR and on the client after hydration.
+*/
+import '../app.css'
+</script>
+
+<header>
+    <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+    </nav>
+</header>
+<main>
+    <slot></slot>
+</main>

package/template/src/ui/pages/page.abide

@@ -1,7 +1,7 @@
 <script>
 /*
 Root page — served at GET /. Every folder under src/ui/pages/ that contains a
-page.abide mounts at that folder's URL.
+page.abide mounts at that folder's URL; the root layout.abide wraps it.
 
 The blocking await-block below (the `then` attribute sits ON the <template await>)
 resolves on the server during SSR and renders inline — no pending placeholder. The
@@ -11,12 +11,9 @@ instead would stream the resolution in out of order.
 */
 import { cache } from '@abide/abide/shared/cache'
 import { getHello } from '$server/rpc/getHello.ts'
-import Layout from '../Layout.abide'
 </script>
 
-<Layout>
-    <template await={cache(getHello)()} then="hello">
-        <h1>{hello.message}</h1>
-    </template>
-    <p>Edit <code>src/ui/pages/page.abide</code> and the page hot-reloads.</p>
-</Layout>
+<template await={cache(getHello)()} then="hello">
+    <h1>{hello.message}</h1>
+</template>
+<p>Edit <code>src/ui/pages/page.abide</code> and the page hot-reloads.</p>

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

@@ -1,36 +0,0 @@
-import { staticAttrValue } from './staticAttrValue.ts'
-import type { TemplateNode } from './types/TemplateNode.ts'
-
-/* A component's slotted children split by destination slot. */
-export type SlotGroups = {
-    default: TemplateNode[]
-    named: { name: string; nodes: TemplateNode[] }[]
-}
-
-/*
-Partitions a component's children by their `slot="name"` attribute: an element
-carrying one goes to that named group (with the directive attr stripped so it
-never renders as a real attribute), everything else forms the default slot. Both
-back-ends partition identically, so SSR and client agree on which markup lands in
-which `<slot>`.
-*/
-export function partitionSlots(children: TemplateNode[]): SlotGroups {
-    const defaults: TemplateNode[] = []
-    const named = new Map<string, TemplateNode[]>()
-    for (const child of children) {
-        const name = child.kind === 'element' ? staticAttrValue(child, 'slot') : undefined
-        if (child.kind !== 'element' || name === undefined) {
-            defaults.push(child)
-            continue
-        }
-        const stripped = {
-            ...child,
-            attrs: child.attrs.filter((attr) => !(attr.kind === 'static' && attr.name === 'slot')),
-        }
-        named.set(name, [...(named.get(name) ?? []), stripped])
-    }
-    return {
-        default: defaults,
-        named: [...named].map(([name, nodes]) => ({ name, nodes })),
-    }
-}

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

@@ -1,22 +0,0 @@
-import { claimChild } from '../runtime/claimChild.ts'
-import { RENDER } from '../runtime/RENDER.ts'
-
-/*
-Opens a child element of `parent`: creates and appends it (create mode), or claims
-the existing server-rendered node at the parent's current build position (hydrate
-mode), advancing the claim pointer. Returns the element so bindings and children
-attach to it. The compiler emits this for every element so the same build code
-serves both modes.
-*/
-// @readme plumbing
-export function openChild(parent: Node, tag: string): Element {
-    const hydration = RENDER.hydration
-    if (hydration !== undefined) {
-        const current = claimChild(hydration, parent)
-        hydration.next.set(parent, current === null ? null : current.nextSibling)
-        return current as unknown as Element
-    }
-    const element = document.createElement(tag)
-    parent.appendChild(element)
-    return element
-}

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

@@ -1,23 +0,0 @@
-/*
-Whether a `/`-joined path still resolves through `tree` — every segment present
-in its container. The `in` operator covers both shapes: an object key, an array's
-own index (in range) or its `length`. Distinguishes a path the tree no longer has
-(a deleted key, an out-of-range index after a shrink) from one holding a genuine
-`undefined`, which `valueAtPath` alone can't — used to evict dead reactive nodes.
-*/
-export function pathExists(tree: unknown, path: string): boolean {
-    if (path === '') {
-        return tree !== undefined
-    }
-    let current: unknown = tree
-    for (const segment of path.split('/')) {
-        if (current === null || typeof current !== 'object') {
-            return false
-        }
-        if (!(segment in current)) {
-            return false
-        }
-        current = (current as Record<string, unknown>)[segment]
-    }
-    return true
-}

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

@@ -1,18 +0,0 @@
-/*
-Reads the value at a `/`-joined path in a plain tree. `''` is the root. Returns
-undefined if any segment is missing — arrays index by their numeric segment as a
-string, which works because JS array access coerces the key.
-*/
-export function valueAtPath(tree: unknown, path: string): unknown {
-    if (path === '') {
-        return tree
-    }
-    let current: unknown = tree
-    for (const segment of path.split('/')) {
-        if (current === null || typeof current !== 'object') {
-            return undefined
-        }
-        current = (current as Record<string, unknown>)[segment]
-    }
-    return current
-}

package/template/src/ui/Layout.abide

@@ -1,19 +0,0 @@
-<script>
-/*
-Userland root layout. abide has no framework layout resolution — a layout is just
-a component a page wraps its body in (<Layout>…</Layout>), and the body lands in
-the <slot>. Import and wrap this from each page.abide to share chrome. Runs on the
-server during SSR and on the client after hydration.
-*/
-import './app.css'
-</script>
-
-<header>
-    <nav>
-        <a href="/">Home</a>
-        <a href="/about">About</a>
-    </nav>
-</header>
-<main>
-    <slot></slot>
-</main>