@abide/abide 0.32.2 → 0.33.0

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/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/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/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>