@abide/abide 0.48.0 → 0.50.0

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

@@ -1,100 +0,0 @@
-import type { SemanticToken } from './types/SemanticToken.ts'
-
-/*
-Lexical highlighting for `{#…}`/`{:…}`/`{/…}` control-flow framing — the part the
-HTML grammar sees only as text and the shadow program lowers away. A pure scan of
-raw source (independent of a successful parse, so it survives mid-edit), it emits
-an `operator` token for the `{`+sigil opener and a `keyword` token for the block
-word, plus the `of`/`by` connectors inside a `{#for …}` head. Expression interiors
-and bare `{expr}` interpolations are NOT touched here — those are the shadow's job.
-A keyword allowlist after the sigil prevents matching arbitrary `{:foo}` text.
-Longest phrases first so `for await` beats `for` and `else if` beats `else`.
-*/
-const BLOCK_KEYWORDS = [
-    'for await',
-    'else if',
-    'if',
-    'for',
-    'await',
-    'switch',
-    'case',
-    'default',
-    'try',
-    'catch',
-    'finally',
-    'then',
-    'else',
-]
-
-const BLOCK_HEAD = new RegExp(`\\{([#:/])\\s*(${BLOCK_KEYWORDS.join('|')})\\b`, 'g')
-
-export function structuralBlockTokens(source: string): SemanticToken[] {
-    const tokens: SemanticToken[] = []
-    for (const match of source.matchAll(BLOCK_HEAD)) {
-        const braceStart = match.index
-        const sigil = match[1]
-        const keyword = match[2]
-        if (keyword === undefined) {
-            continue
-        }
-        const keywordStart = braceStart + match[0].length - keyword.length
-        tokens.push({ start: braceStart, length: 2, type: 'operator', modifiers: [] })
-        tokens.push({ start: keywordStart, length: keyword.length, type: 'keyword', modifiers: [] })
-        /* A `{#for …}` head carries abide-only connectors `of`/`by` that the shadow
-           lowers away (`of`) or never emits (`by`), so color them here. */
-        if (sigil === '#' && (keyword === 'for' || keyword === 'for await')) {
-            tokens.push(...forHeadConnectors(source, keywordStart + keyword.length))
-        }
-    }
-    return tokens
-}
-
-/*
-Scans a `{#for …}` head from `from` to its closing `}`, emitting `keyword` tokens
-for the `of`/`by` connectors at brace depth 0 — skipping any `of`/`by` nested in a
-destructure, call, or string so an identifier or object key is never miscolored.
-*/
-function forHeadConnectors(source: string, from: number): SemanticToken[] {
-    const tokens: SemanticToken[] = []
-    let depth = 0
-    let cursor = from
-    while (cursor < source.length) {
-        const char = source.charAt(cursor)
-        if (char === '"' || char === "'" || char === '`') {
-            cursor += 1
-            while (cursor < source.length && source.charAt(cursor) !== char) {
-                if (source.charAt(cursor) === '\\') {
-                    cursor += 1
-                }
-                cursor += 1
-            }
-        } else if (char === '{' || char === '(' || char === '[') {
-            depth += 1
-        } else if (char === ')' || char === ']') {
-            depth -= 1
-        } else if (char === '}') {
-            if (depth === 0) {
-                break
-            }
-            depth -= 1
-        } else if (depth === 0 && (char === 'o' || char === 'b')) {
-            const word = source.startsWith('of', cursor)
-                ? 'of'
-                : source.startsWith('by', cursor)
-                  ? 'by'
-                  : undefined
-            const isWordBoundary = (offset: number): boolean => /\s/.test(source.charAt(offset))
-            if (
-                word !== undefined &&
-                isWordBoundary(cursor - 1) &&
-                isWordBoundary(cursor + word.length)
-            ) {
-                tokens.push({ start: cursor, length: word.length, type: 'keyword', modifiers: [] })
-                cursor += word.length
-                continue
-            }
-        }
-        cursor += 1
-    }
-    return tokens
-}

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

@@ -1,87 +0,0 @@
-import { seedResolved } from '../seedResolved.ts'
-import { isComment } from './isComment.ts'
-
-/*
-Bundle-side consumer of an SSR stream chunk, the counterpart of the doc stream's inline
-vanilla scripts (`SSR_SWAP_SCRIPT`'s `__abideSwap` and `CACHE_RESOLVE_SCRIPT`'s `__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 {
-    const holder = document.createElement('div')
-    holder.innerHTML = frame
-    const resolved = holder.firstChild as Element | null
-    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 {
-            seedResolved({ kind: 'cache', resolution: 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
-    }
-    /* The resolved value rides in a leading <script type=application/json> as ref-json
-       text; store it raw and remove the node so only the resolved markup moves into the
-       boundary. Decoding is deferred to the read in `awaitBlock` (which has the codec);
-       recording it lets a later hydrate adopt this branch (no re-fetch). */
-    const payload = resolved.firstChild as Element | null
-    if (payload !== null && payload.nodeName === 'SCRIPT') {
-        seedResolved({ kind: 'resume', id: Number(id), resume: payload.textContent ?? '' })
-        payload.remove()
-    }
-    const open = `abide:await:${id}`
-    const close = `/abide:await:${id}`
-    const boundary = findBoundary(root, open)
-    if (boundary === undefined) {
-        return
-    }
-    const { parent, start } = boundary
-    /* Remove the pending nodes between the markers (exclusive of the markers). */
-    let node = start.nextSibling
-    while (node !== null && !isComment(node, close)) {
-        const next = node.nextSibling
-        parent.removeChild(node)
-        node = next
-    }
-    /* Insert resolved content after the open marker. */
-    let anchor = start.nextSibling
-    for (const child of [...resolved.childNodes]) {
-        parent.insertBefore(child, anchor)
-        anchor = child.nextSibling
-    }
-}
-
-/* Depth-first search for the parent + open-marker comment of a boundary. */
-function findBoundary(node: Node, open: string): { parent: Node; start: Node } | undefined {
-    for (const child of [...node.childNodes]) {
-        if (isComment(child, open)) {
-            return { parent: node, start: child }
-        }
-        const nested = findBoundary(child, open)
-        if (nested !== undefined) {
-            return nested
-        }
-    }
-    return undefined
-}

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

@@ -1,21 +0,0 @@
-/*
-The human-readable name for the scope the direct-mount entry (`mount`/`hydrate`)
-establishes, derived from its host element's tag. The router instead fills layers into
-marker boundaries with no host element, so it passes each layer's route key as an
-explicit label (`fillBoundary`); a nested child likewise passes its component name (see
-`mountRange`). The `abide-` prefix strip turns a framework host tag like `abide-resolve`
-into `resolve`; any other host yields its lowercased tag. Feeds the inspector's
-Reactive tab a readable scope name; computed and stored in all builds (only the
-inspector surface is dev-only). Returns undefined when there's no element to name from.
-*/
-import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
-
-export function scopeLabel(host: Element): string | undefined {
-    const tag = host.tagName?.toLowerCase()
-    if (tag === undefined) {
-        return undefined
-    }
-    return tag.startsWith(COMPONENT_WRAPPER_PREFIX)
-        ? tag.slice(COMPONENT_WRAPPER_PREFIX.length)
-        : tag
-}

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

@@ -1,20 +0,0 @@
-import { effect } from '../effect.ts'
-
-/*
-A text node whose content tracks `read()`. The effect captures whatever reactive
-cells `read` touches, so the node — and only this node — re-renders when they
-change: one text node, one effect — fine-grained granularity.
-
-Plain-text only — `read()` is coerced with String(). For a `{expr}` interpolation
-that may yield an `html\`…\`` or snippet value the compiler emits `appendText`,
-which branches on the branded value and inserts raw markup; `text` cannot host
-multiple nodes and would stringify such a value to `[object Object]`.
-*/
-// @documentation plumbing
-export function text(read: () => unknown): Text {
-    const node = document.createTextNode('')
-    effect(() => {
-        node.data = String(read())
-    })
-    return node
-}

package/src/lib/ui/history.ts

@@ -1,101 +0,0 @@
-import { PATCH_BUS } from './runtime/PATCH_BUS.ts'
-import type { Doc } from './runtime/types/Doc.ts'
-import type { Patch } from './runtime/types/Patch.ts'
-import type { History } from './types/History.ts'
-
-/*
-Undo/redo for a document. Subscribes the `PATCH_BUS`, filters to this `doc`, and
-journals each applied patch's `inverse` into a bounded stack — O(size of the
-change) per step, never a tree snapshot. `undo`/`redo` replay inverses through
-`doc.apply`; the patches that replay itself emits are routed into a `sink` so a
-replay never opens a fresh entry nor clears the opposite stack (it instead fills
-it, keeping the move reversible). A genuine new edit clears the redo stack.
-`transaction(fn)` groups every patch `fn` emits into one entry. `limit` caps
-depth — the oldest entry drops. Inert (but harmless) on the server.
-*/
-// @documentation plumbing
-export function history(doc: Doc, { limit = 100 }: { limit?: number } = {}): History {
-    const undoStack: Patch[][] = []
-    const redoStack: Patch[][] = []
-    /* When set, captured inverses accumulate here instead of opening a new undo entry
-       — held by an in-progress transaction and by an undo/redo replay. */
-    let sink: Patch[] | undefined
-
-    /* Push one finished entry, evicting the oldest past `limit`. */
-    const push = (stack: Patch[][], entry: Patch[]): void => {
-        stack.push(entry)
-        if (stack.length > limit) {
-            stack.shift()
-        }
-    }
-
-    const unsubscribe = PATCH_BUS.subscribe((event) => {
-        if (event.doc !== doc || event.inverse === undefined) {
-            return
-        }
-        if (sink !== undefined) {
-            sink.push(event.inverse)
-            return
-        }
-        push(undoStack, [event.inverse])
-        redoStack.length = 0
-    })
-
-    /* Apply an entry's inverses in reverse application order (LIFO), capturing the
-       inverses they emit — the original forward patches — onto `target`, so the move
-       is itself reversible and lands on the opposite stack. */
-    const replay = (entry: Patch[], target: Patch[][]): void => {
-        const captured: Patch[] = []
-        sink = captured
-        try {
-            for (let index = entry.length - 1; index >= 0; index -= 1) {
-                doc.apply(entry[index] as Patch)
-            }
-        } finally {
-            sink = undefined
-        }
-        if (captured.length > 0) {
-            push(target, captured)
-        }
-    }
-
-    return {
-        undo: () => {
-            const entry = undoStack.pop()
-            if (entry !== undefined) {
-                replay(entry, redoStack)
-            }
-        },
-        redo: () => {
-            const entry = redoStack.pop()
-            if (entry !== undefined) {
-                replay(entry, undoStack)
-            }
-        },
-        canUndo: () => undoStack.length > 0,
-        canRedo: () => redoStack.length > 0,
-        transaction: (run: () => void) => {
-            /* A nested transaction folds into the one already collecting. */
-            if (sink !== undefined) {
-                run()
-                return
-            }
-            const entry: Patch[] = []
-            sink = entry
-            try {
-                run()
-            } finally {
-                sink = undefined
-            }
-            if (entry.length > 0) {
-                push(undoStack, entry)
-                redoStack.length = 0
-            }
-        },
-        dispose: () => {
-            unsubscribe()
-            undoStack.length = 0
-            redoStack.length = 0
-        },
-    }
-}

package/src/lib/ui/installHotBridge.ts

@@ -1,93 +0,0 @@
-import { snippet } from '../shared/snippet.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'
-import { bindSelectValue } from './dom/bindSelectValue.ts'
-import { cloneStatic } from './dom/cloneStatic.ts'
-import { each } from './dom/each.ts'
-import { eachAsync } from './dom/eachAsync.ts'
-import { hydrate } from './dom/hydrate.ts'
-import { mergeProps } from './dom/mergeProps.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 { outlet } from './dom/outlet.ts'
-import { readCall } from './dom/readCall.ts'
-import { restProps } from './dom/restProps.ts'
-import { skeleton } from './dom/skeleton.ts'
-import { spreadAttrs } from './dom/spreadAttrs.ts'
-import { spreadProps } from './dom/spreadProps.ts'
-import { switchBlock } from './dom/switchBlock.ts'
-import { tryBlock } from './dom/tryBlock.ts'
-import { when } from './dom/when.ts'
-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'
-import { nextBlockId } from './runtime/nextBlockId.ts'
-import { scope } from './scope.ts'
-import { watch } from './watch.ts'
-
-/*
-Dev-only: exposes the abide-ui runtime plus `hotReplace` on `window.__abide`, and
-flips on `hotReloadEnabled` so `mountChild` records every instance it mounts. A
-hot module (the dev server's standalone recompile of one edited `.abide`) reads
-its runtime from this object instead of importing fresh copies — so it shares the
-one reactive graph and instance registry — then calls `hotReplace` to swap every
-live instance in place. The keys mirror `UI_RUNTIME_IMPORTS` (+ `hotReplace`); a
-test guards that pairing. `startClient` calls this when the server marks the page
-dev (the live-reload script sets `window.__abideDev`).
-*/
-export function installHotBridge(): void {
-    ;(globalThis as { __abide?: Record<string, unknown> }).__abide = {
-        snippet,
-        scope,
-        enterScope,
-        exitScope,
-        effect,
-        watch,
-        mount,
-        appendText,
-        appendTextAt,
-        appendSnippet,
-        appendStatic,
-        cloneStatic,
-        skeleton,
-        anchorCursor,
-        attr,
-        on,
-        attach,
-        bindSelectValue,
-        each,
-        eachAsync,
-        when,
-        awaitBlock,
-        tryBlock,
-        switchBlock,
-        mountSlot,
-        outlet,
-        mountChild,
-        mergeProps,
-        spreadProps,
-        restProps,
-        spreadAttrs,
-        readCall,
-        hydrate,
-        escapeKey,
-        nextBlockId,
-        enterRenderPass,
-        exitRenderPass,
-        hotReplace,
-    }
-    hotReloadEnabled.current = true
-}

package/src/lib/ui/installInspectorBridge.ts

@@ -1,140 +0,0 @@
-import { effect } from './effect.ts'
-import { clientPage } from './runtime/clientPage.ts'
-import { historyEntries } from './runtime/historyEntries.ts'
-import { liveScopes } from './runtime/liveScopes.ts'
-import { PATCH_BUS } from './runtime/PATCH_BUS.ts'
-import { runtimePath } from './runtime/runtimePath.ts'
-
-/* Same-origin cross-tab channel the inspector page listens on. The app tab
-   publishes scope + router state; the inspector subscribes. Web-standard, so no
-   server route or buffer is involved — core publishes, the package consumes. */
-const CHANNEL = 'abide:inspector'
-
-/* Coalesce a burst of patches into one snapshot — the post is the cost, the read is cheap. */
-const SNAPSHOT_DEBOUNCE_MS = 60
-
-/* JSON round-trip to strip anything structured-clone can't carry (functions,
-   class instances, DOM nodes) before postMessage, degrading to undefined rather
-   than throwing into the channel. */
-function cloneable(value: unknown): unknown {
-    try {
-        return JSON.parse(JSON.stringify(value))
-    } catch {
-        return undefined
-    }
-}
-
-/* The live scope forest as a flat list — the inspector rebuilds the tree from
-   each node's `parent` id (the Scope surface exposes no children accessor). */
-function scopeNodes(): Array<{
-    id: string
-    label: string | undefined
-    parent: string | undefined
-    state: unknown
-    recorded: boolean
-}> {
-    return Array.from(liveScopes.scopes, (scope) => ({
-        id: scope.id,
-        label: scope.label,
-        parent: scope.parent?.id,
-        state: cloneable(scope.snapshot()),
-        recorded: scope.canUndo() || scope.canRedo(),
-    }))
-}
-
-/* Router state off the existing reactive holders — read, not subscribed, here;
-   the nav effect drives re-reads. */
-function routerState() {
-    const page = clientPage.value
-    return {
-        path: runtimePath.value,
-        route: page.route,
-        /* `page.params` is a reactive Proxy — structuredClone (postMessage) can't carry
-           a Proxy and throws, dropping every router frame. Spread to a plain object. */
-        params: { ...page.params },
-        navigating: page.navigating,
-        url: page.url.href,
-        entry: historyEntries.current,
-    }
-}
-
-/*
-Installs the client→inspector bridge: a BroadcastChannel the inspector page reads
-to render its Reactive + Router tabs. Gated by `__abideInspect` (server-injected
-only when the inspector is enabled) and called from startClient before the router
-builds any scope — so registration is armed before the first scope exists. A
-no-op where BroadcastChannel is absent (SSR, old runtimes). Mirrors
-installHotBridge: dev instrumentation, not public surface.
-*/
-export function installInspectorBridge(): void {
-    /* No BroadcastChannel means no consumer for the scope registry — bail before
-       arming `liveScopes.enabled`, so createScope never pays scope tracking for a
-       set nothing reads. */
-    if (typeof BroadcastChannel === 'undefined') {
-        return
-    }
-    liveScopes.enabled = true
-    const channel = new BroadcastChannel(CHANNEL)
-    const tab = typeof crypto !== 'undefined' ? crypto.randomUUID() : String(performance.now())
-    const post = (message: object) => {
-        try {
-            channel.postMessage({ tab, ...message })
-        } catch {
-            /* A non-cloneable slipped through despite the JSON pass — drop the frame
-               rather than throw into a patch/nav handler. */
-        }
-    }
-
-    const announce = () =>
-        post({
-            kind: 'announce',
-            url: typeof location !== 'undefined' ? location.href : '',
-            app: typeof document !== 'undefined' ? document.title : '',
-        })
-    const sendSnapshot = () =>
-        post({ kind: 'snapshot', scopes: scopeNodes(), router: routerState() })
-
-    let snapshotTimer: ReturnType<typeof setTimeout> | undefined
-    const scheduleSnapshot = () => {
-        clearTimeout(snapshotTimer)
-        snapshotTimer = setTimeout(sendSnapshot, SNAPSHOT_DEBOUNCE_MS)
-    }
-
-    /* Inspector handshakes: `hello` (it just opened — everyone re-announce + push)
-       and `request` (it wants a fresh snapshot of this tab). */
-    channel.onmessage = (event) => {
-        const message = event.data as { kind?: string; tab?: string }
-        if (message.kind === 'hello') {
-            announce()
-            sendSnapshot()
-        } else if (message.kind === 'request' && message.tab === tab) {
-            sendSnapshot()
-        }
-    }
-
-    /* Every doc mutation flows through PATCH_BUS; forward the patch as a live
-       mutation event and re-snapshot (debounced) so values stay current. */
-    PATCH_BUS.subscribe((patchEvent) => {
-        post({ kind: 'patch', op: patchEvent.patch.op, path: patchEvent.patch.path })
-        scheduleSnapshot()
-    })
-
-    /* Reading the page + path States tracks them, so this re-runs on navigation. */
-    effect(() => {
-        clientPage.value
-        runtimePath.value
-        post({ kind: 'nav', router: routerState() })
-    })
-
-    if (typeof addEventListener === 'function') {
-        addEventListener('pagehide', () => {
-            post({ kind: 'bye' })
-            channel.close()
-        })
-    }
-
-    announce()
-    /* First snapshot once the router has built the initial scope tree (this runs
-       before router()). */
-    setTimeout(sendSnapshot, 0)
-}

package/src/lib/ui/outbox.ts

@@ -1,35 +0,0 @@
-import type { OutboxEntry } from '../shared/types/OutboxEntry.ts'
-import type { RemoteFunction } from '../shared/types/RemoteFunction.ts'
-import { outboxRegistry } from './rpcOutbox/outboxRegistry.ts'
-
-/* One entry in the global outbox, tagged with the RPC it belongs to. */
-export type GlobalOutboxEntry = OutboxEntry<unknown> & { rpc: RemoteFunction<unknown, unknown> }
-
-/* The global outbox: callable for the flat entry list, awaitable `retry()` to drain every
-   queue (resolves when every replay settles). */
-export type GlobalOutbox = (() => GlobalOutboxEntry[]) & { retry: () => Promise<void> }
-
-function list(): GlobalOutboxEntry[] {
-    return outboxRegistry.all().flatMap(({ rpc, queue }) =>
-        queue.entries().map((entry) => ({
-            ...entry,
-            rpc: rpc as RemoteFunction<unknown, unknown>,
-        })),
-    )
-}
-
-/*
-The global, reactive view of every durable RPC's outbox — a flat list of undelivered
-entries across all `outbox` rpcs, each tagged with its `rpc`. Reactive: reading it in a
-template/effect subscribes to each registered queue, so it updates as writes park, drain,
-fail, or cancel. Use it for an app-wide "N unsynced" badge or a sync panel; cancel a
-pending write through `entry.controller.abort()`, retry one through `entry.retry()`, or
-drain everything through `outbox.retry()`. A single rpc's slice is `rpc.outbox`. Server-
-side there are no client queues, so it returns an empty list.
-*/
-// @documentation ui
-export const outbox: GlobalOutbox = Object.assign(list, {
-    async retry(): Promise<void> {
-        await Promise.all(outboxRegistry.all().map(({ queue }) => queue.retry()))
-    },
-})