@abide/abide 0.32.1 → 0.32.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # abide
 
+## 0.32.2
+
+### Patch Changes
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - sync examples and ui README to current API ([`923bb86`](https://github.com/briancray/abide/commit/923bb8674814e8efcacc954beac0f1c7982b0e2c))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - reject a static import in a nested <template> script ([`b9e7c76`](https://github.com/briancray/abide/commit/b9e7c76509d2401484d3f997b0cb904af4b5080c))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - merge valueAtPath + pathExists into a single-pass walkPath ([`bad087b`](https://github.com/briancray/abide/commit/bad087b39c4b5427bf44fec6c3f2eb1fdbccf9c2))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - remap any HTML-element-named component wrapper, not just void ([`bbbbe35`](https://github.com/briancray/abide/commit/bbbbe353e22b5d016cd47e81eb8bc9a786fbe336))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - extract the static-clone template cache, keyed per document ([`d35beaa`](https://github.com/briancray/abide/commit/d35beaa956a449b79a5be63034473262226ad44d))
+
 ## 0.32.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.32.1",
+    "version": "0.32.2",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

package/src/lib/ui/README.md

@@ -46,8 +46,8 @@ every page, and `.abide` files are the only component format.
   `<template await>`/`then`/`catch`, `<template switch>`/`case`/`default`.
 - **Components** are capitalised tags (`<Layout title="…">`); children fill the
   child's `<slot>`. Props are reactive (passed as thunks).
-- **Scoped styles**: a `<style>` block is scoped per component via a
-  `[data-b-<hash>]` attribute.
+- **Scoped styles**: a `<style>` block is scoped via a `[data-a-<hash>]`
+  attribute — per component, or per control-flow branch when nested in one.
 
 ## Substrate (why it's fast)
 

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

@@ -0,0 +1,132 @@
+/*
+Every standard HTML element name (lowercase), plus the two foreign-content roots
+`svg`/`math`. A component wrapper tag that collides with one of these is a real
+element with a content model and parser quirks — `<button>`/`<a>` reject interactive
+descendants, table/list/select families foster or auto-close non-conforming children,
+void elements self-close, and `<svg>`/`<math>` switch the parser into SVG/MathML
+namespace so the wrapper's HTML children break out (foster-parent) of it entirely —
+so the parser reparents the component's own markup out of the wrapper and hydration
+claims `null`. `componentWrapperTag` remaps any such name to a transparent custom
+element instead. Pure SVG/MathML descendant names (`circle`, `path`, `mrow`, …) are
+NOT here: in HTML context they are inert unknown elements that hold children fine, so
+a `<Circle>` component stays as-is like any non-element name. Superset of VOID_TAGS
+(which the parser/SSR still use for self-closing); this set is only the
+wrapper-safety check.
+*/
+export const HTML_TAGS: ReadonlySet<string> = new Set([
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'math',
+    'menu',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'search',
+    'section',
+    'select',
+    'slot',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'template',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+])

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

@@ -1,20 +1,23 @@
-import { VOID_TAGS } from './VOID_TAGS.ts'
+import { HTML_TAGS } from './HTML_TAGS.ts'
 
 /*
 The element tag a component instance mounts into. Normally the component name
 lowercased — readable in devtools, a real box like any abide wrapper. But a name
-that lowercases to a VOID element (`Input`→`input`, `Img`→`img`) would yield a
-wrapper the HTML parser self-closes, reparenting the component's own markup as the
-wrapper's siblings — so on hydration `openChild` finds the wrapper empty, claims
-`null`, and `attr` throws on it. Those names map to a hyphenated custom-element tag
-(a custom element is never void) made layout-transparent with `display:contents`,
-so the component's real root still lays out as a direct child of the parent the way
-the (parse-broken) void wrapper effectively did. Both back-ends call this so the SSR
-string and the client build agree on the wrapper.
+that lowercases to a real HTML element (`Button`→`button`, `Input`→`input`) yields a
+wrapper with a content model the parser enforces: void elements self-close, and
+`<button>`/`<a>`/table/list/select families reject or foster the component's own
+markup as the wrapper's siblings — so on hydration `openChild` finds the wrapper
+empty, claims `null`, and `attr` throws on it. Those names map to a hyphenated
+custom-element tag (a custom element is never void and has no content model) made
+layout-transparent with `display:contents`, so the component's real root still lays
+out as a direct child of the parent the way the (parse-broken) wrapper would have.
+A name that is NOT a known HTML element (the common case — `Card`, `Dropdown`) is an
+inert unknown tag that holds any content untouched, so it stays as-is. Both back-ends
+call this so the SSR string and the client build agree on the wrapper.
 */
 export function componentWrapperTag(name: string): { tag: string; transparent: boolean } {
     const lower = name.toLowerCase()
-    return VOID_TAGS.has(lower)
+    return HTML_TAGS.has(lower)
         ? { tag: `abide-${lower}`, transparent: true }
         : { tag: lower, transparent: false }
 }

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

@@ -20,6 +20,12 @@ text, never mistaken for a real style. Keeping it in the tree lets the front-end
 scope it to its sibling subtree (`analyzeComponent`); the node emits no DOM/markup.
 */
 
+/* A line-leading static `import` in a nested script body. The `(?=\s)` requires
+   whitespace after the keyword (sparing `import.meta` and no-space `import(...)`),
+   and `(?!\s*\()` spares a dynamic `import (...)` written with whitespace before the
+   paren — both legitimate lazy paths — so only a true static import statement matches. */
+const NESTED_STATIC_IMPORT = /^[ \t]*import(?=\s)(?!\s*\()/m
+
 /* A braced template expression with the absolute source offset of its first
    (post-trim) character, so the type-checking shadow can map a diagnostic back. */
 type Braced = { code: string; loc: number }
@@ -179,6 +185,18 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             const end = close === -1 ? source.length : close
             const code = source.slice(cursor, end)
             cursor = close === -1 ? source.length : end + '</script>'.length
+            /* A static `import` can't live here: a nested script compiles INTO the
+               branch's render-function body, where an import is illegal — and an
+               import nested in a branch falsely implies conditional/lazy loading ES
+               imports can't do (they hoist module-wide and load unconditionally). The
+               leading `<script>` hoists imports to module scope for the whole template,
+               so they belong there. The pattern spares dynamic `import(...)` (with or
+               without whitespace) and `import.meta` — the real lazy paths. */
+            if (NESTED_STATIC_IMPORT.test(code)) {
+                throw new Error(
+                    "import statements must live in the component's leading <script>, not a nested <template> script — they hoist to module scope for the whole template. For lazy loading, use a dynamic import() inside an effect.",
+                )
+            }
             return { kind: 'script', code }
         }
         /* A capitalised tag is a child component; its attributes become props and

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

@@ -1,22 +1,6 @@
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-
-/*
-Parsed-once `<template>` per unique static-skeleton string, reused across every
-mount. A `<template>` (not a detached `<div>`) so table/select content parses by
-the real content model, exactly as the browser parsed the server markup.
-*/
-const TEMPLATES = new Map<string, HTMLTemplateElement>()
-
-function templateFor(html: string): HTMLTemplateElement {
-    let template = TEMPLATES.get(html)
-    if (template === undefined) {
-        template = document.createElement('template')
-        template.innerHTML = html
-        TEMPLATES.set(html, template)
-    }
-    return template
-}
+import { templateFor } from './templateFor.ts'
 
 /*
 Appends a fully-static subtree (one or more top-level nodes) under `parent` — what

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

@@ -0,0 +1,28 @@
+/*
+Parsed-once `<template>` per unique static-skeleton string, reused across every
+mount. A `<template>` (not a detached `<div>`) so table/select content parses by
+the real content model, exactly as the browser parsed the server markup. Backs
+`cloneStatic`'s skeleton-string→template cache.
+
+The cache is keyed by the owning `document`: a template belongs to the document
+that created it, and its clones must land in that same document. In production there
+is one document, so this is one inner map; under the test harness, which installs a
+fresh `document` per file, it keeps each file's templates (and their node class)
+from leaking into the next.
+*/
+const CACHES = new WeakMap<object, Map<string, HTMLTemplateElement>>()
+
+export function templateFor(html: string): HTMLTemplateElement {
+    let cache = CACHES.get(document)
+    if (cache === undefined) {
+        cache = new Map()
+        CACHES.set(document, cache)
+    }
+    let template = cache.get(html)
+    if (template === undefined) {
+        template = document.createElement('template')
+        template.innerHTML = html
+        cache.set(html, template)
+    }
+    return template
+}

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