@abide/abide 0.100.0 → 0.102.0

package/src/ui/Router.ts

@@ -8,8 +8,9 @@ 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 { applyHead, withdrawHead } from './applyHead.ts'
 import { LAYER_MOUNT, LAYER_NAVIGATE } from './LAYER_NAMES.ts'
+import { MOUNTING_LEVEL } from './MOUNTING_LEVEL.ts'
 import { beginLayer, endLayer } from './measureLayer.ts'
 import { menuBridge } from './menuBridge.ts'
 import { fillRegion, pageRegion, type Region } from './regions.ts'
@@ -73,6 +74,8 @@ type Level = {
      * wrote and the first navigation away from it withdraws that head like any other.
      */
     head: (() => string) | undefined
+    /** The heads of the components mounted in this level, joined to `head` (`contributeHead`). */
+    contributed: (() => string)[] | undefined
     /**
      * 41.19 — this level's markup, left by its mount once its setup has run, for the router to run
      * once every level below has been set up too; `undefined` once it has run, or where the module
@@ -144,20 +147,8 @@ export class Router {
      * Read off the compiled `<style>` blocks. Nothing here looks at the document's stylesheets.
      */
     transitions: boolean
-    /**
-     * The shell's keyed head entries, as the build read them off the shell (`keyedHead`).
-     *
-     * 39.4, 39.14 — THE OUTERMOST CONTRIBUTOR, and the one the document cannot say: the server
-     * merged out every entry of it a level overrode.
-     */
-    shellHead: string
 
-    constructor(
-        region: Region,
-        routes: Compiled[],
-        transitions: boolean,
-        shellHead: string,
-    ) {
+    constructor(region: Region, routes: Compiled[], transitions: boolean) {
         this.region = region
         this.routes = routes
         this.levels = []
@@ -167,7 +158,6 @@ export class Router {
         this.navigation = 0
         this.prefetched = new Set()
         this.transitions = transitions
-        this.shellHead = shellHead
     }
 
     /**
@@ -186,7 +176,7 @@ export class Router {
     /**
      * Loads a route's chunks ahead of a navigation the reader has signaled.
      *
-     * 30.14 — A NAVIGATION THE READER HAS SIGNALLED, LOADED BEFORE IT HAPPENS: the route's chunks
+     * 30.14 — A NAVIGATION THE READER HAS SIGNALED, LOADED BEFORE IT HAPPENS: the route's chunks
      * are asked for on intent, so the click finds them in the module cache and setup — and with it
      * every call the page makes — starts at once. Only the CODE: a call run on a hover would be a
      * call nobody asked for, and for anything but a `GET` one with an effect. A failed load is left
@@ -385,11 +375,9 @@ 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 the shell's, else leaves.
-            withdrawHead(
-                leaving,
-                this.heads(shared, this.levels.length),
-                () => this.shellHead + this.heads(0, shared),
+            // nearest kept layout's, else leaves.
+            withdrawHead(leaving, this.heads(shared, this.levels.length), () =>
+                this.heads(0, shared),
             )
             // The top of the page, or — as the browser does on a load — the fragment's element.
             if (options.keepScroll !== true) scrollToFragment(target.hash)
@@ -480,6 +468,7 @@ export class Router {
             scope: undefined,
             slot: undefined,
             head: undefined,
+            contributed: undefined,
             markup: undefined,
             share: null,
         }
@@ -505,7 +494,9 @@ export class Router {
         // runs; a module mounted by the router leaves its markup rather than using this one.
         // A deferred level answers the scope its setup made, so the watches that setup opened are
         // stopped with the level even where its markup never runs — a slot that never opens.
-        level.scope = module.default(region, props, level)
+        level.scope = mounting(level, () =>
+            module.default(region, props, level),
+        )
         return level.share
     }
 
@@ -515,7 +506,7 @@ export class Router {
         const markup = level.markup
         if (markup === undefined) return
         level.markup = undefined
-        level.scope = markup(region)
+        level.scope = mounting(level, () => markup(region))
     }
 
     /**
@@ -577,7 +568,7 @@ export class Router {
     ): void {
         arrive(target.href, found.route.pattern, found.params)
         this.chain = modules
-        // 38.89 — inside a desktop app, the window shows the menus this chain exports.
+        // 38.88 — inside a desktop app, the window shows the menus this chain exports.
         if (menuBridge() !== undefined)
             void import('./reportMenu.ts').then((loaded) =>
                 loaded.reportMenu(modules as { menu?: unknown }[]),
@@ -685,14 +676,30 @@ export function startRouter(
     routes: Route[],
     host: Element = document.body,
     transitions = false,
-    shellHead = '',
 ): Router {
-    const router = new Router(
-        pageRegion(host),
-        rankRoutes(routes),
-        transitions,
-        shellHead,
-    )
+    const router = new Router(pageRegion(host), rankRoutes(routes), transitions)
     CURRENT_ROUTER.current = router
     return router
 }
+
+/**
+ * `run`, with `level` the one its components add their `<head>` to (39.1) — and what those built on
+ * the client contributed applied once it returns, rather than once a component.
+ */
+function mounting<Result>(level: Level, run: () => Result): Result {
+    const back = MOUNTING_LEVEL.current
+    const backUnapplied = MOUNTING_LEVEL.unapplied
+    MOUNTING_LEVEL.current = level
+    MOUNTING_LEVEL.unapplied = ''
+    let unapplied: string
+    let result: Result
+    try {
+        result = run()
+    } finally {
+        unapplied = MOUNTING_LEVEL.unapplied
+        MOUNTING_LEVEL.current = back
+        MOUNTING_LEVEL.unapplied = backUnapplied
+    }
+    applyHead(unapplied)
+    return result
+}

package/src/ui/Scope.ts

@@ -61,7 +61,7 @@ export class Scope {
             this.stops.push(watchTracked(effect))
             return
         }
-        // UNDER A BOUNDARY, a throw is the boundary's and the scopes a re-run builds are too, and a
+        // UNDER A BOUNDARY, a throw is the boundary's and the scopes a rerun builds are too, and a
         // failed binding is retried by running it again.
         this.stops.push(watchTracked(() => boundary.guard(effect, effect)))
     }

package/src/ui/TryRegion.ts

@@ -46,7 +46,7 @@ export class TryRegion extends ArmRegion {
     /** Only a mount runs the components in a body, so a failed body is retried by mounting it again. */
     private readonly remount: () => void
     private retry: Disposer | undefined
-    /** What the retry re-runs, recorded by `fail` and watched once the catch stands (`startRetry`). */
+    /** What the retry reruns, recorded by `fail` and watched once the catch stands (`startRetry`). */
     private pending: (() => unknown) | undefined
     /** A body a retry mounted, for the swap to take in place of building one. */
     private standing: Stoppable | undefined
@@ -110,7 +110,7 @@ export class TryRegion extends ArmRegion {
      * failure of the body, and is left to the caller that rebuilds; and a value still in flight is
      * not a failure either: it aborts the run as it would anywhere (2.12).
      *
-     * `again` IS WHAT A RETRY RE-RUNS: the binding that threw, or the body mounted again.
+     * `again` IS WHAT A RETRY RERUNS: the binding that threw, or the body mounted again.
      */
     guard<T>(run: () => T, again: () => unknown): T | undefined {
         const previous = BOUNDARY.current

package/src/ui/applyHead.ts

@@ -9,7 +9,9 @@
 // contribution a page makes several of.
 
 import { headKeyOf } from '#shared/headKeyOf.ts'
+import { MOUNTING_LEVEL } from './MOUNTING_LEVEL.ts'
 import { markupNodes } from './parseMarkup.ts'
+import { isEmptyRegion, type Region } from './regions.ts'
 import type { Scope } from './Scope.ts'
 
 export function applyHead(markup: string): void {
@@ -144,3 +146,34 @@ export function liveHead(scope: Scope, markup: () => string): void {
         else applyHead(text)
     })
 }
+
+/**
+ * A component's `<head>`, added to the page or layout the router is mounting it under (39.1).
+ *
+ * Joined to that level's head, so it is withdrawn as the level's is when it leaves (39.14), and
+ * deeper than the level's own, so it wins by key (39.4). Applied where the component builds its own
+ * markup, once the level is mounted (`MOUNTING_LEVEL.unapplied`); a region the server painted
+ * already carries the head the server wrote. Nothing where no level is mounting — a row grown after
+ * the fact titles nothing.
+ *
+ * A LIST, NOT A CLOSURE PER CONTRIBUTION: a `{#for}` of components with a `<head>` contributes once a
+ * row, and a chain of them is read through as deep a stack.
+ */
+export function contributeHead(region: Region, head: () => string): void {
+    const level = MOUNTING_LEVEL.current
+    if (level === undefined) return
+    let contributed = level.contributed
+    if (contributed === undefined) {
+        const own = level.head
+        const joined: (() => string)[] = []
+        contributed = joined
+        level.contributed = joined
+        level.head = () => {
+            let markup = own?.() ?? ''
+            for (const one of joined) markup += one()
+            return markup
+        }
+    }
+    contributed.push(head)
+    if (isEmptyRegion(region)) MOUNTING_LEVEL.unapplied += head()
+}

package/src/ui/index.ts

@@ -39,7 +39,7 @@ export {
 } 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, liveHead } from './applyHead.ts'
+export { applyHead, contributeHead, liveHead } from './applyHead.ts'
 export { bindElement } from './bindElement.ts'
 export { bindProperty } from './bindProperty.ts'
 export { bindSpread } from './bindSpread.ts'

package/src/ui/menuBridge.ts

@@ -2,7 +2,7 @@
  * The channel a desktop app's window opens to the page for its menu, or `undefined` in a browser.
  *
  * ITS OWN MODULE, so the router asks without importing the reporter: `reportMenu` is a chunk only a
- * page inside a desktop app loads. 38.89.
+ * page inside a desktop app loads. 38.88.
  */
 export function menuBridge():
     | { postMessage(message: string): void }

package/src/ui/moveNode.ts

@@ -12,7 +12,7 @@
 // the `load` an iframe fires when it is torn out, n per reorder against 0.
 //
 // PROBED, NOT VERSIONED. Where `moveBefore` is absent this is exactly the call the reconcile made
-// before it existed, so the fallback is today's behaviour rather than a degraded one. happy-dom
+// before it existed, so the fallback is today's behavior rather than a degraded one. happy-dom
 // does not implement it, which is why the gate for this belongs in the browser lane — see
 // `packages/harness/e2e`.
 const CAN_MOVE =

package/src/ui/reconcile.ts

@@ -310,7 +310,7 @@ export function dropRow(row: Row): void {
  *
  * `abide:hydrate` RATHER THAN A CHANNEL OF ITS OWN. A repeated key is not a hydration mismatch —
  * it survives a reconcile that no hydration was anywhere near — but the registry's meaning for
- * that namespace is THE BROWSER LANE, not a mismatch, and it is the only namespace 28.9 gives the
+ * that namespace is THE BROWSER LANE, not a mismatch, and it is the only namespace 28.8 gives the
  * client runtime. A second one buys an app a second name to learn and silence for one warning,
  * where widening the lane's one meaning costs nothing that has to be taught.
  */
@@ -329,7 +329,7 @@ function warnRepeatedKey(list: List): void {
  * of that length ends on, so the binary search finds the run each row extends, and `came` walks the
  * answer back out.
  *
- * WHY A SUBSEQUENCE AND NOT A RUN OF NEIGHBOURS. The rows that can stay put are the ones already
+ * WHY A SUBSEQUENCE AND NOT A RUN OF NEIGHBORS. The rows that can stay put are the ones already
  * in the right order RELATIVE TO EACH OTHER — they need not be adjacent, and demanding they be
  * would move rows that a gap of new or removed rows had merely spread apart.
  *

package/src/ui/reportMenu.ts

@@ -1,4 +1,4 @@
-// 38.89 — A ROUTE'S MENU, TOLD TO THE WINDOW IT IS SHOWN IN. Loaded only inside a desktop app, where
+// 38.88 — A ROUTE'S MENU, TOLD TO THE WINDOW IT IS SHOWN IN. Loaded only inside a desktop app, where
 // the window has opened `abideMenu` to the page; anywhere else the router never imports it.
 
 import { MenuEntry, type MenuItem } from '#shared/menuItem.ts'
@@ -31,7 +31,7 @@ export function reportMenu(chain: { menu?: unknown }[]): void {
             for (const menu of level.menu as MenuItem[]) told.push(tell(menu))
     if (!listening) {
         listening = true
-        // 38.91, 38.92 — the window names the item picked; the page does what it means.
+        // 38.90, 38.91 — the window names the item picked; the page does what it means.
         addEventListener('abide:menu', (event) => {
             const item = numbered[(event as CustomEvent<number>).detail]
             if (item === undefined) return

package/src/ui/routing.ts

@@ -8,11 +8,11 @@
 // `--splitting` so the barrel lands in a SHARED chunk — which is the configuration CLAUDE.md names
 // as where bun stops shaking — came out 7156 bytes with the router off the barrel against 7160
 // with it on, and zero router symbols in the output either way. Bun shook it out. So the argument
-// here is the structural one above, plus not resting a budget on a bundler behaviour the project's
+// here is the structural one above, plus not resting a budget on a bundler behavior the project's
 // own notes say not to rest one on; it is NOT "this saves the router's bytes", because it does not.
 //
 // ONE CALLER: the `routes.ts` the build emits for an app that HAS pages, through
-// `ROUTING_SPECIFIER`. An app with no `page.abide` under `pages/` never resolves this entry.
+// `ROUTING_SPECIFIER`. An app with no page never resolves this entry.
 
 export { listenForRoutes } from './listenForRoutes.ts'
 export { type PageMount, type Route, Router, startRouter } from './Router.ts'

package/src/ui/setAttribute.ts

@@ -18,7 +18,7 @@ import { WORK } from '#shared/WORK.ts'
  * the same call on both sides.
  *
  * THE COMPARE IS THE REST OF THE POINT. `getAttribute` reads a value the element already holds —
- * it is not a layout read and forces nothing — and a binding re-run by a value that landed on the
+ * it is not a layout read and forces nothing — and a binding rerun by a value that landed on the
  * same string is the common case rather than the rare one, so the branch is cheaper than the
  * mutation it skips.
  */

package/src/ui/setText.ts

@@ -12,7 +12,7 @@ import { markupToText, RawRun } from './RawRun.ts'
  * particular emitter remembered to write.
  *
  * The COMPARE is the rest of the point: a write to `data` that does not change it still costs,
- * and a slot re-run by a value that landed on the same string is the common case rather than the
+ * and a slot rerun by a value that landed on the same string is the common case rather than the
  * rare one.
  *
  * THE RUN'S STATE COMES BACK, because a run that held markup is a text node again after this and the

package/src/ui/socketWire.ts

@@ -2,7 +2,8 @@
 // reads is followed (18.3). Each copy is kept in step with the value it was answered from: the value
 // where the version it holds is not the server's, and the writes of each patch over it (18.6, 18.11).
 
-import { ABIDE_ADDRESS, SOCKET_ADDRESS } from '#shared/ADDRESSES.ts'
+import { SOCKET_ADDRESS } from '#shared/ADDRESSES.ts'
+import { mounted } from '#shared/mount.ts'
 import { canonicalKey } from '#shared/reactive/canonicalKey.ts'
 import {
     heldGenerationOf,
@@ -201,15 +202,16 @@ class Mux {
 export const MUXES = new Map<string, Mux>()
 
 /**
- * The mux a socket's or a handler's address is carried over, made on first use.
+ * The mux a handler's address is carried over, made on first use.
  *
- * `SOCKET_ADDRESS` under whatever the address stands below, so an app under a sub-path opens its
- * own.
+ * `SOCKET_ADDRESS` under the app's mount, so an app under a sub-path opens its own — at the
+ * address's own origin where it names one, and the page's where it is a path.
  */
 function muxFor(address: string): Mux {
-    const below = address.indexOf(ABIDE_ADDRESS)
-    const path = `${below === -1 ? '' : address.slice(0, below)}${SOCKET_ADDRESS}`
-    const url = new URL(path, location.href)
+    const url = new URL(
+        mounted(SOCKET_ADDRESS),
+        URL.canParse(address) ? address : location.href,
+    )
     url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
     let mux = MUXES.get(url.href)
     if (mux === undefined) {

package/src/ui/wire.ts

@@ -1,5 +1,5 @@
 // 16.28 — A HANDLER, AS A BROWSER HOLDS IT. What a page imported as `getInvoice` is, in the bundle,
-// `wire('GET', '/__abide/rpc/invoices/getInvoice')`: the same declaration the server made, over a
+// `wire('GET', '/invoices/getInvoice')`: the same declaration the server made, over a
 // body that fetches rather than one that reads the database. So it is the same `Rpc` — the call
 // hands back a `Reactive`, the keyed face narrows by args, a mutation's `ttl` is 0 (16.7), and a
 // refusal narrows through `isError` — because it is built by the one `declare` both seams share.

package/scaffold/src/server/app.ts

@@ -1,6 +0,0 @@
-import { log, onStart } from '@abide/abide/server'
-
-onStart(async (start) => {
-    await start()
-    log('started')
-})

package/scaffold/src/ui/app.html

@@ -1,8 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body></body>
-</html>

package/src/server/componentImports.ts

@@ -1,56 +0,0 @@
-// 35.4 — A `.abide` IMPORTED FROM AN APP'S OWN `.ts`, as the component it compiles to. A component
-// importing a component is pointed at the compiled module by the compile itself (34.14); a handler
-// is not compiled, so its import reached bun as written — and bun loads an extension it has no
-// loader for as a `file`, handing the handler the path. `render(Invoice({ invoice }))` then threw
-// "Invoice is not a function".
-//
-// BOUND, NOT RAW. The compiled module is a function of accessors answering its markup (33.4); what
-// an app calls is a function of plain props answering a `Component` (35.4), which `render` invokes
-// with nothing. The adapter is written into the module the import lands on rather than exported
-// from a seam, so no name joins the surface.
-
-import { realpathSync } from 'node:fs' // bun exposes no realpath of its own
-
-/**
- * The plugin landing a `.abide` under `root` on its compiled server module under `compiled`.
- *
- * One per app root: a runtime plugin's `onLoad` is asked in registration order and the first whose
- * filter matches must answer, so the filter carries the root and another app's plugin is never
- * asked. The same object serves the bundler, where `abide compile` follows a handler's imports.
- */
-export function componentImports(
-    root: string,
-    compiled: string,
-): Bun.BunPlugin {
-    // BOTH SPELLINGS OF THE ROOT, because bun names a file with its symlinks resolved and an app
-    // under `/tmp` is `/private/tmp` to it.
-    const roots = new Set([root, realpathSync(root)])
-    return {
-        name: 'abide-component-imports',
-        setup(build) {
-            for (const at of roots)
-                build.onLoad(
-                    { filter: new RegExp(`^${RegExp.escape(at)}/.*\\.abide$`) },
-                    (args) => ({
-                        contents: boundModule(
-                            `${compiled}/${args.path.slice(at.length + 1, -'.abide'.length)}.ts`,
-                        ),
-                        loader: 'js',
-                    }),
-                )
-        },
-    }
-}
-
-function boundModule(compiledModule: string): string {
-    return `import component from ${JSON.stringify(compiledModule)}
-export default (props = {}) => {
-    const accessors = {}
-    for (const key in props) {
-        const value = props[key]
-        accessors[key] = () => value
-    }
-    return () => component(accessors)
-}
-`
-}