@abide/abide 0.110.4 → 0.112.0

package/src/ui/Router.ts

@@ -4,12 +4,12 @@ import { ERROR_META } from '#shared/ERROR_META.ts'
 import { firstMatch, type Params, partsOf } from '#shared/matchRoute.ts'
 import { unmounted } from '#shared/mount.ts'
 import { NAVIGATION_HEADER } from '#shared/NAVIGATION_HEADER.ts'
+import { OFFLINE_SAVED } from '#shared/OFFLINE_CACHES.ts'
 import type { ShareScope } from '#shared/reactive/share.ts'
 import { arrive, route } from '#shared/route.ts'
 import { rankRoutes, type Segment } from '#shared/routePattern.ts'
 import { setUpLevels } from '#shared/setUpLevels.ts'
 import { paintedCallsLanded } from '#shared/takeEarlyCall.ts'
-import { withdrawHead } from './applyHead.ts'
 import { LAYER_MOUNT, LAYER_NAVIGATE } from './LAYER_NAMES.ts'
 import { Level } from './Level.ts'
 import { beginLayer, endLayer } from './measureLayer.ts'
@@ -255,6 +255,20 @@ export class Router {
             // whole reason the ticket is checked here rather than after the mount — and
             // `navigating` stays the newer navigation's to clear.
             if (ticket.signal.aborted) return
+            // 30.32 — OFFLINE, THE DOCUMENT LOAD BELOW CAN ONLY PAINT THE BROWSER'S ERROR PAGE over a
+            // page that works. A history step has already moved the bar, so it is left to the
+            // document.
+            if (
+                answer === undefined &&
+                !navigator.onLine &&
+                step.direction === 'push'
+            ) {
+                // 45.12 — UNLESS THE SERVICE WORKER SAVED THE PAGE, which the document load is
+                // then answered with.
+                if ((await savedOffline(target)) && !ticket.signal.aborted)
+                    location.href = target.href
+                return
+            }
             // 30.18 — A REFUSAL, A RESPONSE MIDDLEWARE ANSWERED ITSELF, or no answer at all: the
             // document asks again and paints whatever the server says. A fetch that failed —
             // offline, or a redirect to another origin that CORS will not let it follow — goes to
@@ -454,12 +468,9 @@ export class Router {
             // table written by hand may answer with a fresh record each call. The function a module
             // exports is the same function either way.
             const shared = this.sharedLevels(arriving)
-            // READ BEFORE THE STOP, while the leaving levels' heads read what they read on screen.
-            const leaving = Level.headsOf(
-                this.levels,
-                shared,
-                this.levels.length,
-            )
+            // RECONCILED BEFORE THE STOP, while the leaving levels' heads read what they read on
+            // screen: what the server painted for them is adopted as theirs, so it leaves with them.
+            Level.reconcile(this.levels)
             const left: Scroll = [scrollX, scrollY]
             this.stopFrom(shared)
             // The region the arriving part goes into: the page region where nothing is kept, and
@@ -480,11 +491,8 @@ export class Router {
             // outermost first; a kept layout is not mounted again, so neither is its head.
             this.mountChain(target, found, arriving, shared, into)
             // 39.14 — what the leaving levels keyed and the arriving ones did not goes back to the
-            // nearest kept layout's, else leaves.
-            withdrawHead(leaving, () => [
-                Level.headsOf(this.levels, 0, shared),
-                Level.headsOf(this.levels, shared, this.levels.length),
-            ])
+            // nearest kept layout's, else leaves; their keyless nodes leave with them (39.16).
+            Level.reconcile(this.levels)
             // 30.29 — where the entry was left, on a history step; else the top of the page, or —
             // as the browser does on a load — the fragment's element.
             if (step.scroll !== undefined)
@@ -527,11 +535,13 @@ export class Router {
     private stopFrom(at: number): void {
         for (let index = this.levels.length - 1; index >= at; index -= 1) {
             const level = this.levels[index] as Level
+            // OUT OF THE CHAIN BEFORE IT STOPS, so a slot stop it fires on the way finds it gone
+            // (`release`) and leaves the head to whoever stopped it.
+            this.levels.length = index
             // The level's head leaves whole, so none of its components withdraws its own.
             level.contributed.clear()
             level.scope?.stop()
         }
-        this.levels.length = at
     }
 
     /**
@@ -614,7 +624,11 @@ export class Router {
     private release(level: Level, at: number): void {
         if (this.levels[at] !== level) return
         level.slot = undefined
+        // 39.14, 39.16 — THE LEVELS BELOW LEAVE WITH THE SLOT'S REGION, and their head with them:
+        // reconciled first, so what the server painted for them is adopted as theirs.
+        Level.reconcile(this.levels)
         this.stopFrom(at + 1)
+        Level.reconcile(this.levels)
     }
 
     /**
@@ -696,6 +710,16 @@ function loadOrMiss(route: Compiled): Promise<PageModule[] | undefined> {
     return load(route).catch(() => undefined)
 }
 
+/** Whether a service worker controls the page and saved `target`'s page (45.12). */
+async function savedOffline(target: URL): Promise<boolean> {
+    if (navigator.serviceWorker?.controller == null) return false
+    const saved = await caches.match(target.href, {
+        cacheName: OFFLINE_SAVED,
+        ignoreVary: true,
+    })
+    return saved !== undefined
+}
+
 /**
  * Asks the server's `middleware` about an address; `undefined` where the fetch failed.
  *

package/src/ui/bindGroup.ts

@@ -0,0 +1,41 @@
+import {
+    boundValue,
+    groupHolds,
+    heldValue,
+    writeBound,
+} from '#shared/boundValue.ts'
+import type { Scope } from './Scope.ts'
+
+/**
+ * Keeps a radio or checkbox's `checked` in step with a `bind:group` value, both ways.
+ *
+ * 32.8 — COMPARED AGAINST THE INPUT'S OWN VALUE, read through `own` — the `value` attribute's
+ * expression, or its static text, or `on` where it has none — rather than off the element: a
+ * `value={option.id}` that moves reruns the compare, and a number stays a number in the group
+ * where the element's `value` property would have handed back its text.
+ */
+export function bindGroup(
+    element: Element,
+    operand: unknown,
+    own: () => unknown,
+    scope: Scope,
+): void {
+    const bound = element as HTMLInputElement
+    scope.watch(() => {
+        const checked = groupHolds(boundValue(operand), own())
+        bound.checked = checked
+        bound.toggleAttribute('checked', checked)
+    })
+    bound.addEventListener('change', () => {
+        const value = own()
+        const standing = heldValue(operand)
+        // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
+        if (Array.isArray(standing)) {
+            const next: unknown[] = []
+            for (const member of standing)
+                if (member !== value) next.push(member)
+            if (bound.checked) next.push(value)
+            writeBound(operand, next)
+        } else if (bound.checked) writeBound(operand, value)
+    })
+}

package/src/ui/bindProperty.ts

@@ -8,7 +8,6 @@
 
 import {
     boundValue,
-    groupHolds,
     heldValue,
     selectHolds,
     writeBound,
@@ -20,7 +19,7 @@ type Bound = HTMLInputElement & HTMLDetailsElement
 
 export function bindProperty(
     element: Element,
-    kind: 'value' | 'checked' | 'open' | 'group',
+    kind: 'value' | 'checked' | 'open',
     operand: unknown,
     scope: Scope,
 ): void {
@@ -29,25 +28,6 @@ export function bindProperty(
         bindValue(bound, operand, scope)
         return
     }
-    if (kind === 'group') {
-        scope.watch(() => {
-            const checked = groupHolds(boundValue(operand), bound.value)
-            bound.checked = checked
-            bound.toggleAttribute('checked', checked)
-        })
-        bound.addEventListener('change', () => {
-            const standing = heldValue(operand)
-            // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
-            if (Array.isArray(standing)) {
-                const next: unknown[] = []
-                for (const member of standing)
-                    if (member !== bound.value) next.push(member)
-                if (bound.checked) next.push(bound.value)
-                writeBound(operand, next)
-            } else if (bound.checked) writeBound(operand, bound.value)
-        })
-        return
-    }
     // `checked` on an input, `open` on a `<details>`.
     const property = kind
     scope.watch(() => {

package/src/ui/index.ts

@@ -15,6 +15,8 @@
 // and every `class:name` on an element is merged by the server into the single `style` or `class`
 // attribute beside the author's own, so neither of those two attributes can be written back whole
 // — the CSSOM and `classList` are what touch the one declaration or the one token a binding owns.
+// A `class={expr}` or `style={expr}` beside its directives is the same answer once more
+// (`setClassGroup`, `setStyleGroup`, 32.71): the group writes what it owns, and nothing else.
 // A list is reached through `listAt` and `updateList` alone, so its rows' shape is no caller's.
 // Nothing that finds a node by something added to the document, because a compiler may not invent
 // structure an author's CSS or queries can see.
@@ -37,10 +39,8 @@ export {
     runHere,
     textHere,
 } from './adoptWalk.ts'
-// 39.6 — a module mounted into an empty region applies its own head, from inside its instance
-// (`emitClient`); only a module that carries its own markup and a `<head>` imports it.
-export { applyHead } from './applyHead.ts'
 export { bindElement } from './bindElement.ts'
+export { bindGroup } from './bindGroup.ts'
 export { bindProperty } from './bindProperty.ts'
 export { bindSpread } from './bindSpread.ts'
 export { escapeless } from './escapeless.ts'
@@ -60,7 +60,9 @@ export { itemOf, noUpdate, replaceRow, rowCell } from './rows.ts'
 export { EMPTY_SCOPE, Scope } from './Scope.ts'
 export { setAttribute } from './setAttribute.ts'
 export { setClass } from './setClass.ts'
+export { setClassGroup } from './setClassGroup.ts'
 export { setMarkup } from './setMarkup.ts'
+export { setStyleGroup } from './setStyleGroup.ts'
 export { setStyleProperty } from './setStyleProperty.ts'
 export { setText } from './setText.ts'
 export { TryRegion } from './TryRegion.ts'

package/src/ui/reconcileHead.ts

@@ -0,0 +1,215 @@
+// 39.4–39.6, 39.13–39.17 — THE DOCUMENT HEAD HAS ONE WRITER. Every routed level and every component
+// with a `<head>` is a contributor, and the head is reconciled from all of them at once, in the
+// chain's order — each level's own head, then its components' in the order they mounted — rather
+// than patched by each with what it can learn of the others.
+//
+// A KEY IS WON BY THE LAST CONTRIBUTOR HOLDING IT (39.4), and one nobody holds any more leaves or
+// goes back to whoever still does (39.14) because that is what the chain now says. A KEYLESS NODE
+// IS ITS CONTRIBUTOR'S, held by reference (39.5, 39.15, 39.16): two contributors writing the same
+// `<style>` each own their own, and one leaving takes its own with it — told apart by where they
+// stand, never by being equal.
+//
+// NOTHING IS ADDED TO MARK OWNERSHIP, and nothing a contributor did not write is touched: a node the
+// server painted is ADOPTED the first time its contributor is reconciled, matched in chain order.
+
+import { headKeyOf } from '#shared/headKeyOf.ts'
+import { markupNodes } from './parseMarkup.ts'
+
+/** One contributor's head, parsed once per text it reads. */
+type Parsed = { text: string; keyed: Map<string, Element>; keyless: Node[] }
+
+const parsedBy = new WeakMap<object, Parsed>()
+/** The keyless nodes standing in the head for each contributor, in its order. */
+const ownedBy = new Map<object, Node[]>()
+/**
+ * The element standing for each key the chain held at the last reconcile, so one it drops is
+ * withdrawn — that element, and never another holding the same key that nothing here wrote.
+ */
+const keyedNodes = new Map<string, Element>()
+
+/** Whether `who` has been reconciled — adopted or written — since it joined. */
+export function reconciled(who: object): boolean {
+    return ownedBy.has(who)
+}
+
+/**
+ * Writes the head the chain contributes: `chain` is every contributor and the head it reads now,
+ * outermost first.
+ *
+ * Only what moved is written. A key standing as it is wanted, and a keyless node equal to the one
+ * its contributor wants there, are left standing — a `<link rel=stylesheet>` put back as itself is
+ * refetched and flashes the page unstyled, and a `<script>` would run again.
+ */
+export function reconcileHead(
+    chain: readonly (readonly [who: object, text: string])[],
+): void {
+    const head = document.head
+    const present = new Set<object>()
+    const wanted = new Map<string, Element>()
+    for (const [who, text] of chain) {
+        present.add(who)
+        for (const [key, element] of parsedOf(head, who, text).keyed)
+            wanted.set(key, element)
+    }
+    const standing = standingKeys(head)
+    for (const [key, node] of keyedNodes)
+        if (!wanted.has(key)) {
+            node.remove()
+            keyedNodes.delete(key)
+        }
+    for (const [key, element] of wanted) {
+        let at = standing.get(key)
+        if (at === undefined) {
+            at = element.cloneNode(true) as Element
+            head.appendChild(at)
+        } else if (at.outerHTML !== element.outerHTML) {
+            const next = element.cloneNode(true) as Element
+            head.replaceChild(next, at)
+            at = next
+        }
+        keyedNodes.set(key, at)
+    }
+
+    for (const [who, nodes] of ownedBy)
+        if (!present.has(who)) {
+            for (const node of nodes) node.parentNode?.removeChild(node)
+            ownedBy.delete(who)
+        }
+    const claimed = new Set<Node>()
+    for (const nodes of ownedBy.values())
+        for (const node of nodes) claimed.add(node)
+    let previous: Node | null = null
+    for (let at = 0; at < chain.length; at += 1) {
+        const who = (chain[at] as readonly [object, string])[0]
+        const wants = (parsedBy.get(who) as Parsed).keyless
+        const owned = ownedBy.get(who) ?? adopt(head, wants, claimed)
+        const next: Node[] = []
+        for (let index = 0; index < wants.length; index += 1) {
+            const want = wants[index] as Node
+            const have = owned[index]
+            let node: Node
+            if (have?.isEqualNode(want) === true) node = have as Node
+            else {
+                node = runnable(want.cloneNode(true))
+                if (have !== undefined) head.replaceChild(node, have)
+                else
+                    head.insertBefore(
+                        node,
+                        previous === null
+                            ? firstOwnedAfter(chain, at)
+                            : previous.nextSibling,
+                    )
+            }
+            next.push(node)
+            previous = node
+        }
+        for (let index = wants.length; index < owned.length; index += 1)
+            (owned[index] as Node).parentNode?.removeChild(owned[index] as Node)
+        ownedBy.set(who, next)
+    }
+}
+
+/** `who`'s head parsed, from the cache while it reads the same text. */
+function parsedOf(head: HTMLHeadElement, who: object, text: string): Parsed {
+    const cached = parsedBy.get(who)
+    if (cached !== undefined && cached.text === text) return cached
+    const parsed: Parsed = { text, keyed: new Map(), keyless: [] }
+    for (const node of markupNodes(head, text)) {
+        const key = node.nodeType === 1 ? headKey(node as Element) : undefined
+        if (key === undefined) parsed.keyless.push(node)
+        else parsed.keyed.set(key, node as Element)
+    }
+    parsedBy.set(who, parsed)
+    return parsed
+}
+
+/**
+ * The nodes the server painted for a contributor reconciled for the first time: each one it wants,
+ * the first equal node nobody has claimed, in order. Contributors are adopted in the chain's
+ * order, which is the order the server painted them in, so an earlier one claims the earlier of
+ * two equal nodes.
+ */
+function adopt(
+    head: HTMLHeadElement,
+    wants: Node[],
+    claimed: Set<Node>,
+): Node[] {
+    const adopted: Node[] = []
+    let from = head.firstChild
+    for (const want of wants) {
+        let found: Node | null = null
+        for (let at = from; at !== null; at = at.nextSibling)
+            if (!claimed.has(at) && at.isEqualNode(want)) {
+                found = at
+                break
+            }
+        if (found === null) break
+        claimed.add(found)
+        adopted.push(found)
+        from = found.nextSibling
+    }
+    return adopted
+}
+
+/** The first keyless node a contributor after `at` owns, which a new one goes before. */
+function firstOwnedAfter(
+    chain: readonly (readonly [object, string])[],
+    at: number,
+): Node | null {
+    for (let later = at + 1; later < chain.length; later += 1) {
+        const owned = ownedBy.get(
+            (chain[later] as readonly [object, string])[0],
+        )
+        if (owned !== undefined && owned.length > 0) return owned[0] as Node
+    }
+    return null
+}
+
+/**
+ * `node`, or — for a `<script>` — the same script made by the document rather than the parser.
+ *
+ * 39.17 — A PARSED SCRIPT NEVER RUNS. The fragment parser marks every `<script>` it makes "already
+ * started", and a clone keeps the mark, so a script it made and then moved into the head is inert
+ * where the server's, made by the document's own parser, ran. One made by `createElement` starts
+ * clear and runs on insertion. Keyless always (39.11 keys no `<script>`).
+ */
+function runnable(node: Node): Node {
+    if (node.nodeName !== 'SCRIPT') return node
+    const parsed = node as HTMLScriptElement
+    const script = document.createElement('script')
+    const attributes = parsed.attributes
+    for (let index = 0; index < attributes.length; index += 1) {
+        const attribute = attributes[index] as Attr
+        script.setAttribute(attribute.name, attribute.value)
+    }
+    script.text = parsed.text
+    return script
+}
+
+/**
+ * The head's keyed elements by key, the first holding each — 39.12 within the standing head: the
+ * FIRST element holding a key is the one a contribution replaces.
+ */
+function standingKeys(head: HTMLHeadElement): Map<string, Element> {
+    const standingByKey = new Map<string, Element>()
+    for (
+        let node = head.firstElementChild;
+        node !== null;
+        node = node.nextElementSibling
+    ) {
+        const key = headKey(node)
+        if (key !== undefined && !standingByKey.has(key))
+            standingByKey.set(key, node)
+    }
+    return standingByKey
+}
+
+/**
+ * The key a head element replaces by, or `undefined` for one that appends — 39.11 through the one
+ * grammar (`headKeyOf`), asked with a resolved attribute.
+ */
+function headKey(element: Element): string | undefined {
+    return headKeyOf(element.tagName.toLowerCase(), (name) =>
+        element.getAttribute(name),
+    )
+}

package/src/ui/registerWorker.ts

@@ -0,0 +1,34 @@
+// 45.1 — THE SERVICE WORKER, REGISTERED where the document carries the tag `ABIDE_OFFLINE` has the
+// server write. The route table calls this in every app, so what the server says decides.
+
+import { WORKER_ADDRESS } from '#shared/ADDRESSES.ts'
+import { MOUNT, mounted } from '#shared/mount.ts'
+import { OFFLINE_META } from '#shared/OFFLINE_META.ts'
+import { onPrincipalRotated } from '#shared/principalRotated.ts'
+import { HYDRATE_LOG } from './Mismatch.ts'
+
+/** Registers the app's service worker once the page has loaded, over the mount's whole scope. */
+export function registerWorker(): void {
+    if (document.querySelector(`meta[name="${OFFLINE_META}"]`) === null) return
+    if (!('serviceWorker' in navigator)) return
+    const workers = navigator.serviceWorker
+    const register = (): void => {
+        workers
+            .register(mounted(WORKER_ADDRESS), {
+                scope: `${MOUNT.current()}/`,
+            })
+            // 45.10
+            .catch((error: unknown) =>
+                HYDRATE_LOG.warning(
+                    'the service worker did not register',
+                    error,
+                ),
+            )
+    }
+    // AFTER THE LOAD, so installing it — every file of the bundle fetched — does not compete with
+    // the page it is installing for.
+    if (document.readyState === 'complete') register()
+    else addEventListener('load', register, { once: true })
+    // 45.7 — a sign-in or sign-out in any tab: the pages it saved were another caller's.
+    onPrincipalRotated(() => workers.controller?.postMessage('rotated'), true)
+}

package/src/ui/routing.ts

@@ -15,4 +15,5 @@
 // `ROUTING_SPECIFIER`. An app with no page never resolves this entry.
 
 export { listenForRoutes } from './listenForRoutes.ts'
+export { registerWorker } from './registerWorker.ts'
 export { type PageMount, type Route, Router, startRouter } from './Router.ts'

package/src/ui/setClassGroup.ts

@@ -0,0 +1,79 @@
+import { ASCII_WHITESPACE } from '#shared/ASCII_WHITESPACE.ts'
+import { textOf } from '#shared/Raw.ts'
+import { WORK } from '#shared/WORK.ts'
+
+/**
+ * 32.71 — what a `class={expr}` and the `class:name` directives beside it last wrote, as one
+ * group: the attribute's text and tokens, and the directives' conditions in the order `names`
+ * gives them.
+ *
+ * KEYED BY ELEMENT rather than declared by the mount, because a row's `update` writes the same
+ * element from a function of its own and both have to read one record.
+ */
+const owned = new WeakMap<
+    Element,
+    {
+        text: string | undefined
+        tokens: ReadonlySet<string>
+        conditions: readonly unknown[] | undefined
+        names: string[]
+    }
+>()
+
+// Every record's tokens until its `class` is first written, which replaces the set.
+const NO_TOKENS: ReadonlySet<string> = new Set()
+
+/**
+ * Writes a `class={expr}` and the `class:name` directives beside it as one group, through
+ * `classList`: `plain` is the attribute's value, and `conditions` each directive's, in the order
+ * of `names`, its classes space-separated.
+ *
+ * 32.71 — ONLY ITS OWN CLASSES, and only what moved: the attribute's tokens are re-split only when
+ * its text changed, a token it dropped comes off unless a directive holds it, and a directive is
+ * written only when its condition flipped, kept on while the attribute holds its class. Every
+ * write is guarded by `contains`, so the first run over a served page writes nothing.
+ */
+export function setClassGroup(
+    element: Element,
+    names: string,
+    plain: unknown,
+    conditions: readonly unknown[],
+): void {
+    WORK.bindingRuns += 1
+    let held = owned.get(element)
+    if (held === undefined) {
+        held = {
+            text: undefined,
+            tokens: NO_TOKENS,
+            conditions: undefined,
+            names: names.split(' '),
+        }
+        owned.set(element, held)
+    }
+    const classes = element.classList
+    const text = textOf(plain)
+    const was = held.conditions
+    if (text !== held.text) {
+        const next = new Set<string>()
+        for (const token of text.split(ASCII_WHITESPACE))
+            if (token !== '') next.add(token)
+        for (const token of held.tokens) {
+            if (next.has(token)) continue
+            const at = held.names.indexOf(token)
+            if (at !== -1 && conditions[at]) continue
+            if (classes.contains(token)) classes.remove(token)
+        }
+        for (const token of next)
+            if (!classes.contains(token)) classes.add(token)
+        held.text = text
+        held.tokens = next
+    }
+    for (let at = 0; at < held.names.length; at += 1) {
+        const on = Boolean(conditions[at])
+        if (was !== undefined && Boolean(was[at]) === on) continue
+        const name = held.names[at] as string
+        const wanted = on || held.tokens.has(name)
+        if (classes.contains(name) !== wanted) classes.toggle(name, wanted)
+    }
+    held.conditions = conditions
+}