@abide/abide 0.101.0 → 0.103.0

package/src/compiler/emitClient.ts

@@ -26,7 +26,7 @@ import { decodeCharacterReferences } from './decodeCharacterReferences.ts'
 import { moduleImports } from './emitComponent.ts'
 import { invocationProps, passedName } from './invocationProps.ts'
 import { isNamedAlone } from './isNamedAlone.ts'
-import { Lowering, PROPS } from './Lowering.ts'
+import { type LoweredChunk, Lowering, PROPS } from './Lowering.ts'
 import type { AbideFile } from './parseAbide.ts'
 import {
     CLIENT_LANE,
@@ -39,7 +39,7 @@ import {
     type ValueRender,
 } from './renderMarkup.ts'
 import { SHARED_NAMES } from './SHARED_NAMES.ts'
-import { RUNTIME_SPECIFIER, SHARED_SPECIFIER } from './SPECIFIERS.ts'
+import { RUNTIME_SPECIFIER, SHARED_SPECIFIER } from '#shared/SPECIFIERS.ts'
 import {
     insideShare,
     resumedShare,
@@ -143,11 +143,11 @@ export function emitClient(
     file: AbideFile,
     answer: CheckerAnswer = UNCHECKED,
     selfFill: SelfFill = 'none',
-    /** Where each specifier this file imports landed in the build (`splitImports`). */
-    landed: ReadonlyMap<string, string> = new Map(),
+    /** 38.97 — where given, every chunk the module is written around (`sourceMapOf`). */
+    chunks?: LoweredChunk[],
 ): string {
     const carriesOwnMarkup = selfFill !== 'none'
-    const lowering = new Lowering(file, answer)
+    const lowering = new Lowering(file, answer, false, chunks)
     // THE TEMPLATE IS PLACED ONCE (`placeTemplate`) and everything this module emits is rendered
     // from what was placed: the mount's walk, a region's build, and the markup a region made once
     // fills from — the same positions the server's markup is rendered from.
@@ -163,11 +163,25 @@ export function emitClient(
         page,
         new RegionEmission(lowering),
     )
+    // 35.17 — THE DOCUMENT'S OWN `<html>` AND `<body>`, bound as any element is: the server wrote
+    // the values standing at render, and these keep writing them. Nothing to find, so no walk.
+    if (file.document !== undefined)
+        for (const [element, node, slot] of [
+            ['document.documentElement', file.document.html, 'html'],
+            ['document.body', file.document.body, 'body'],
+        ] as const) {
+            const classified = classifyAttributes(node, lowering)
+            if (!classified.some(isBound)) continue
+            const units = elementUnits(element, classified, slot, lowering)
+            for (const unit of units.handlers) lines.push(unit)
+            for (const unit of units.attributes) lines.push(unit)
+            for (const unit of units.elements) lines.push(unit)
+        }
 
     // 34.2 — A `<script module>` IS PROCESS-WIDE IN A BROWSER, which is MODULE SCOPE: it is
     // evaluated once when this module is first imported rather than once per `mount`, so a second
     // mount of the same page reads what the first one left.
-    const moduleSetup = splitImports(lowering.modules(), '.client', landed)
+    const moduleSetup = splitImports(lowering.modules())
     // 32.17 — A COMPONENT FILLS ITS OWN REGION where the server wrote none. A row the list grew by
     // is built in the browser, and the child's markup is in the child's SERVER module — which the
     // browser may not reach. So the caller writes the anchor pair alone and the child fills it
@@ -210,14 +224,25 @@ export function emitClient(
         lines.push(
             `if (${ROUTED}) ${lowering.use('liveHead')}(${SCOPE}, ${ROUTED}.head)`,
         )
+    // 39.1, 39.6 — A COMPONENT'S HEAD IS ITS PAGE'S, on a navigation as on the server: added to the
+    // level the router is mounting (`contributeHead`), which a row grown later is not.
+    const ownHead = routed ? undefined : headSink(file)
+    const ownMarkup =
+        ownHead === undefined
+            ? "''"
+            : renderMarkup(ownHead, lowering, CLIENT_LANE)
+    const contributed =
+        ownMarkup === "''"
+            ? ''
+            : `${lowering.use('contributeHead')}(${REGION_ROOT}, () => ${ownMarkup})\n`
     const builds = carriesOwnMarkup && page.positions.length > 0
-    let fills = ''
+    let fills = contributed
     if (applied !== '' || builds) {
         const build = builds
             ? `function __build(__document) {\n    ${emitMaker(page, lowering)}\n}\n`
             : ''
         // THE HEAD GOES BEFORE THE FILL, so the guard is written out where there is one to apply.
-        fills =
+        fills +=
             applied === ''
                 ? `${registered}${build}${lowering.use('fillEmpty')}(${REGION_ROOT}, __build)\n`
                 : `${registered}${build}if (${lowering.use('isEmptyRegion')}(${REGION_ROOT})) { ${applied}${builds ? `${lowering.use('fillRegion')}(${REGION_ROOT}, __build)` : ''} }\n`
@@ -236,12 +261,19 @@ export function emitClient(
     // A FILE MOUNTED AGAINST AN EMPTY REGION SHIPS A MODULE REGARDLESS: the router or the caller's
     // client module imports it by name, so the no-op is what it ships.
     //
-    // 41.6 — BUT A `<script>` IS SOMETHING TO DO: hydration re-runs every setup, and a static
+    // 41.6 — BUT A `<script>` IS SOMETHING TO DO: hydration reruns every setup, and a static
     // component's can still open a watch, write a shared value or listen on the window.
     const live = lines.length > 0
-    const setup = splitImports(lowering.scripts(), '.client', landed)
-    if (!live && fills === '' && setup.body === '')
-        return carriesOwnMarkup ? 'export default () => {}\n' : ''
+    const setup = splitImports(lowering.scripts())
+    if (!live && fills === '' && setup.body === '') {
+        const mount = carriesOwnMarkup ? 'export default () => {}\n' : ''
+        // 34.2 — A `<script module>` RUNS IN THE BROWSER TOO, live markup or none: its module scope
+        // is the browser's as much as the server's.
+        if (moduleSetup.body === '' && moduleSetup.imports === '') return mount
+        return `${moduleImports(lowering, (name) => (SHARED_NAMES.has(name) ? SHARED_SPECIFIER : RUNTIME_SPECIFIER), [moduleSetup])}
+${moduleSetup.body}
+${mount}`
+    }
 
     // A SCOPE IS WHAT THERE IS TO STOP, so a module with nothing live opens none. A static child
     // still ships a module — it fills the anchors of a row the browser grew — and making it
@@ -606,64 +638,15 @@ ${SCOPE}.watch(() => {
             )
             continue
         }
-        const element = `${lowering.use('elementHere')}(${at.name}, ${JSON.stringify(at.tag)})`
-        // 32.3 — THE ATTRIBUTE BINDING. The server wrote the value standing at render; this is
-        // what keeps writing it. ONCE PER ELEMENT, NOT PER ATTRIBUTE: `<a href={u} title={t}>` is
-        // one element and two bindings, and a refusal loses exactly what it should either way,
-        // because every binding in the group needs the element the check refused.
-        const writes: string[] = []
-        const binds: string[] = []
-        const spreads: string[] = []
-        for (const one of bound.get(at) as ClassifiedAttribute[]) {
-            if (!isBound(one)) continue
-            if (one.kind === 'handler')
-                handlers.push(
-                    `${element}.addEventListener(${JSON.stringify(one.event)}, ${lowering.expression(one.attribute)})`,
-                )
-            // 32.5, 32.7, 32.8 — THE PROPERTY AND THE VALUE, IN STEP BOTH WAYS: a watch on this
-            // region's scope writes the property, and a listener writes it back.
-            else if (one.kind === 'bound')
-                binds.push(
-                    `${lowering.use('bindProperty')}(${element}, ${JSON.stringify(one.bind)}, ${lowering.reference(one.attribute)}, ${SCOPE})`,
-                )
-            // 32.11 — THE SPREAD, KEPT WRITTEN: an attribute it stops carrying is removed.
-            else if (one.kind === 'spread')
-                spreads.push(
-                    `${lowering.use('bindSpread')}(${element}, () => (${lowering.expression(one.attribute)}), ${JSON.stringify(one.explicit)}, ${SCOPE})`,
-                )
-            // 32.9 — THE NODE, HANDED OVER, once. Not a watch: what the value takes is the element,
-            // which is the same node on every run a watch would have made — and the callback
-            // form's `Disposer` goes on this region's scope, so a widget it set up is torn down
-            // when the nodes it was set up over leave.
-            else if (one.kind === 'element')
-                elements.push(
-                    `const __r${slot} = ${lowering.use('bindElement')}(${element}, ${lowering.reference(one.attribute)})
-if (__r${slot} !== undefined) ${SCOPE}.stops.push(__r${slot})`,
-                )
-            // 32.20 IS THE INTERPOLATION'S CLAUSE ON THIS SIDE TOO, and 32.37's absence with it:
-            // `setAttribute` answers through `attributeText`, as the server's markup did, so a
-            // `javascript:` the server refused is refused the moment the value moves too.
-            // A WATCH PER ATTRIBUTE, not one over the group: two attributes reading two
-            // different values would otherwise each wake for the other's write.
-            else {
-                const { write, name } =
-                    one.kind === 'merged' && one.toggles !== undefined
-                        ? one.toggles
-                        : {
-                              write: 'attribute' as const,
-                              name: one.attribute.name,
-                          }
-                writes.push(
-                    `${SCOPE}.watch(() => ${lowering.use(WRITES[write])}(__a${slot}, ${JSON.stringify(name)}, ${lowering.expression(one.attribute)}))`,
-                )
-            }
-        }
-        if (writes.length > 0)
-            attributes.push(
-                `const __a${slot} = ${element}\n${writes.join('\n')}`,
-            )
-        for (const unit of binds) attributes.push(unit)
-        for (const unit of spreads) attributes.push(unit)
+        const units = elementUnits(
+            `${lowering.use('elementHere')}(${at.name}, ${JSON.stringify(at.tag)})`,
+            bound.get(at) as ClassifiedAttribute[],
+            slot,
+            lowering,
+        )
+        for (const unit of units.handlers) handlers.push(unit)
+        for (const unit of units.attributes) attributes.push(unit)
+        for (const unit of units.elements) elements.push(unit)
     }
     for (const unit of texts) lines.push(unit)
     for (const unit of handlers) lines.push(unit)
@@ -688,6 +671,81 @@ if (__r${slot} !== undefined) ${SCOPE}.stops.push(__r${slot})`,
     return region
 }
 
+/**
+ * One bound element's units — its listeners, its attribute bindings and the node it hands over —
+ * against the element `element` evaluates to.
+ *
+ * 32.3 — THE ATTRIBUTE BINDING. The server wrote the value standing at render; this is what keeps
+ * writing it. ONCE PER ELEMENT, NOT PER ATTRIBUTE: `<a href={u} title={t}>` is one element and two
+ * bindings, and a refusal loses exactly what it should either way, because every binding in the
+ * group needs the element the check refused. The document's own `<html>` and `<body>` are bound
+ * through here too (35.17), an element being whatever `element` reaches.
+ */
+function elementUnits(
+    element: string,
+    classified: ClassifiedAttribute[],
+    slot: string,
+    lowering: Lowering,
+): { handlers: string[]; attributes: string[]; elements: string[] } {
+    const handlers: string[] = []
+    const attributes: string[] = []
+    const elements: string[] = []
+    const writes: string[] = []
+    const binds: string[] = []
+    const spreads: string[] = []
+    for (const one of classified) {
+        if (!isBound(one)) continue
+        if (one.kind === 'handler')
+            handlers.push(
+                `${element}.addEventListener(${JSON.stringify(one.event)}, ${lowering.expression(one.attribute)})`,
+            )
+        // 32.5, 32.7, 32.8 — THE PROPERTY AND THE VALUE, IN STEP BOTH WAYS: a watch on this
+        // region's scope writes the property, and a listener writes it back.
+        else if (one.kind === 'bound')
+            binds.push(
+                `${lowering.use('bindProperty')}(${element}, ${JSON.stringify(one.bind)}, ${lowering.reference(one.attribute)}, ${SCOPE})`,
+            )
+        // 32.11 — THE SPREAD, KEPT WRITTEN: an attribute it stops carrying is removed.
+        else if (one.kind === 'spread')
+            spreads.push(
+                `${lowering.use('bindSpread')}(${element}, () => (${lowering.expression(one.attribute)}), ${JSON.stringify(one.explicit)}, ${SCOPE})`,
+            )
+        // 32.9 — THE NODE, HANDED OVER, once. Not a watch: what the value takes is the element,
+        // which is the same node on every run a watch would have made — and the callback
+        // form's `Disposer` goes on this region's scope, so a widget it set up is torn down
+        // when the nodes it was set up over leave.
+        else if (one.kind === 'element')
+            elements.push(
+                `const __r${slot} = ${lowering.use('bindElement')}(${element}, ${lowering.reference(one.attribute)})
+if (__r${slot} !== undefined) ${SCOPE}.stops.push(__r${slot})`,
+            )
+        // 32.20 IS THE INTERPOLATION'S CLAUSE ON THIS SIDE TOO, and 32.37's absence with it:
+        // `setAttribute` answers through `attributeText`, as the server's markup did, so a
+        // `javascript:` the server refused is refused the moment the value moves too.
+        // A WATCH PER ATTRIBUTE, not one over the group: two attributes reading two
+        // different values would otherwise each wake for the other's write.
+        else {
+            const { write, name } =
+                one.kind === 'merged' && one.toggles !== undefined
+                    ? one.toggles
+                    : {
+                          write: 'attribute' as const,
+                          name: one.attribute.name,
+                      }
+            writes.push(
+                `${SCOPE}.watch(() => ${lowering.use(WRITES[write])}(__a${slot}, ${JSON.stringify(name)}, ${lowering.expression(one.attribute)}))`,
+            )
+        }
+    }
+    if (writes.length > 0)
+        attributes.push(
+            `const __a${slot} = ${element}\n${writes.join('\n')}`,
+        )
+    for (const unit of binds) attributes.push(unit)
+    for (const unit of spreads) attributes.push(unit)
+    return { handlers, attributes, elements }
+}
+
 // A region's bindings go through its SCOPE, so what replaced the region can stop them (see
 // `Scope`). In the framework's own `__` namespace because a row binds the AUTHOR's item name as a
 // parameter in the same scope.
@@ -934,6 +992,12 @@ function emitFillable(
     name: string,
     sink: Cursor,
     region: RegionEmission,
+    /**
+     * 10.5 — CHILDREN ARE MOUNTED BY THE CHILD, so they are its descendants: the scope current when
+     * it mounts them is the one their components find, as it is the one the server built them in.
+     * The caller's own is the fallback for a mount with none current.
+     */
+    children = false,
 ): void {
     const lowering = region.lowering
     const filled = emitRegion(sink, region.nested())
@@ -948,6 +1012,10 @@ function emitFillable(
             `${lowering.use('fillRegion')}(${REGION_ROOT}, ${name}_build)`,
             lowering,
             sink.defersSetup,
+            false,
+            children
+                ? `(${lowering.use('currentShare')}() ?? ${SHARE_AT})`
+                : SHARE_AT,
         ),
     )
 }
@@ -972,6 +1040,8 @@ function mountFunction(
      * mount binds into it. A refusal stops only what the mount opened, past `__mark`.
      */
     declared = false,
+    /** The share scope a `resumes` mount puts back. */
+    resumed = SHARE_AT,
 ): string {
     // A BODY THAT BINDS NOTHING HAS NOTHING TO STOP AND NOTHING TO REFUSE, so it opens no scope
     // and no `try`: every mount of it answers the one shared empty scope. A static row's two
@@ -995,7 +1065,7 @@ function mountFunction(
     ].join('\n')
     // 10.5 — the instance's own scope, put back for a mount that happens later than its caller's.
     // Only where a component stands below this region: nothing else can read it.
-    return `const ${name}_mount = (${parameters}, __rebuilt) => {\n${resumes ? insideShare(lowering, SHARE_AT, mount) : mount}\n}`
+    return `const ${name}_mount = (${parameters}, __rebuilt) => {\n${resumes ? insideShare(lowering, resumed, mount) : mount}\n}`
 }
 
 /**
@@ -1023,7 +1093,7 @@ function emitInvocation(
     const children = at.inner[0]
     if (children !== undefined) {
         const kids = region.claim('kd')
-        emitFillable(kids, children, region)
+        emitFillable(kids, children, region, true)
         props.push(
             `${JSON.stringify(CHILDREN)}: () => ({ build: ${kids}_build, mount: ${kids}_mount })`,
         )

package/src/compiler/emitComponent.ts

@@ -1,7 +1,9 @@
+import { SERVER_SPECIFIER } from '#shared/SPECIFIERS.ts'
 import { type CheckerAnswer, UNCHECKED } from './CheckerAnswer.ts'
 import { Cursor, placeTemplate } from './Cursor.ts'
-import { Lowering, PROPS } from './Lowering.ts'
+import { type LoweredChunk, Lowering, PROPS } from './Lowering.ts'
 import type { AbideFile } from './parseAbide.ts'
+import { privateExports } from './projectShadow.ts'
 import {
     concat,
     definitions,
@@ -11,9 +13,9 @@ import {
     renderMarkup,
     SERVER_LANE,
 } from './renderMarkup.ts'
-import { SERVER_SPECIFIER } from './SPECIFIERS.ts'
 import { insideShare, SETTLED_AT, shareScope } from './shareScope.ts'
 import { splitImports, withoutProps } from './splitImports.ts'
+import type { TemplateNode } from './TemplateNode.ts'
 
 // The name the body is bound to while a component's head contributions land (`HEADS`).
 const BODY = '__body'
@@ -42,12 +44,14 @@ export function emitComponent(
     file: AbideFile,
     answer: CheckerAnswer = UNCHECKED,
     settles = false,
-    /** Where each specifier this file imports landed in the build (`splitImports`). */
-    landed: ReadonlyMap<string, string> = new Map(),
+    /** The route a `<script server>` files its hooks at (37.1). */
+    route = '/',
+    /** 38.97 — where given, every chunk the module is written around (`sourceMapOf`). */
+    chunks?: LoweredChunk[],
 ): string {
     // Only what the page actually uses. An emitted module carrying an import nothing calls is a
     // name the app's own tooling reports as unused, in a file nobody wrote.
-    const lowering = new Lowering(file, answer)
+    const lowering = new Lowering(file, answer, false, chunks)
 
     const page = new Cursor()
     page.components = file.components
@@ -62,15 +66,31 @@ export function emitComponent(
     // `Lowering.used` (`lowering.use`), so emitting a contribution the merge then drops leaves the
     // module importing a name nothing calls. `headSink` is the client lane's too, which is what keeps the two from drifting.
     const head = renderMarkup(headSink(file), lowering, SERVER_LANE)
+    // 35.15, 35.17 — THE DOCUMENT'S OWN TWO ELEMENTS, rendered as any element is and empty, so
+    // `render` writes their attributes onto the document's and every live one is read per request.
+    const document =
+        file.document === undefined
+            ? 'undefined'
+            : `{ html: ${renderMarkup(placed([file.document.html]), lowering, SERVER_LANE)}, body: ${renderMarkup(placed([file.document.body]), lowering, SERVER_LANE)} }`
 
     // 31.1 and 31.4 hold INSIDE a `.abide` file, not just in its template, so the script block is
     // lowered with the same rewrite the slots get.
     //
-    // 34.2 — A `<script module>` IS MODULE SCOPE, here as in the browser, so what it exports is the
-    // module's (34.17). What must stay per request is a `reactive`, which is by 11.32 wherever it
-    // is declared.
-    const moduleSetup = splitImports(lowering.modules(), '', landed)
-    const setup = splitImports(lowering.scripts(), '', landed)
+    // 34.2 — A `<script module>` IS MODULE SCOPE, here as in the browser. What must stay per request
+    // is a `reactive`, which is by 11.32 wherever it is declared.
+    const moduleSetup = splitImports(lowering.modules())
+    // 34.19 — A `<script server>` IS MODULE SCOPE ON THIS SIDE ALONE, run between two calls that
+    // file every hook it makes at the file's route (37.1). Its body cannot await at its top level
+    // (34.3), so nothing else runs inside the window.
+    const serverSetup = splitImports(lowering.servers(), 'source')
+    const serverBody =
+        serverSetup.body === ''
+            ? ''
+            : `${lowering.use('fileRoute')}(${JSON.stringify(route)})
+${serverSetup.body}
+${lowering.use('fileRoute')}(undefined)
+${privateExports(file.servers.join('\n'))}`
+    const setup = splitImports(lowering.scripts())
     const componentBody = setup.body
 
     // A child invoked inside `<head>` pushes to the same array from the head expression.
@@ -95,6 +115,7 @@ export function emitComponent(
     return {
         head: ${head}${heads ? ` + ${HEADS}.join('')` : ''},
         body: ${BODY},
+        document: ${document},
     }`
     // 41.19 — BUILT ON THE FIRST READ, and ONCE: `render` reads `head` and then `body`, and a
     // child the markup invokes must not be set up twice. The build resumes the share scope the
@@ -112,10 +133,11 @@ export function emitComponent(
         scope: ${SETTLED_AT},
         get head() { return ${BUILD}().head },
         get body() { return ${BUILD}().body },
+        get document() { return ${BUILD}().document },
     }`
         : build
-    return `${moduleImports(lowering, () => SERVER_SPECIFIER, [moduleSetup, setup])}
-${moduleSetup.body === '' ? '' : `${moduleSetup.body}\n`}export default function Component(${lowering.takesProps() ? `${PROPS} = {}` : ''}) {
+    return `${moduleImports(lowering, () => SERVER_SPECIFIER, [moduleSetup, serverSetup, setup])}
+${moduleSetup.body === '' ? '' : `${moduleSetup.body}\n`}${serverBody}export default function Component(${lowering.takesProps() ? `${PROPS} = {}` : ''}) {
 ${opened}${componentBody}
 ${level}${closed}
 }
@@ -160,3 +182,10 @@ function importClause(names: string[]): string {
     for (const name of names) written.push(`${name} as __${name}`)
     return written.join(', ')
 }
+
+// `nodes` placed on a sink of their own, as `headSink` places a head.
+function placed(nodes: TemplateNode[]): Cursor {
+    const sink = new Cursor()
+    placeTemplate(nodes, sink)
+    return sink
+}

package/src/compiler/emitSource.ts

@@ -1,14 +1,18 @@
-import { fileKind } from '#shared/routePattern.ts'
+import { STYLE_QUERY } from '#server/MODULE_QUERIES.ts'
+import { fileKind, scopeOf } from '#shared/routePattern.ts'
 import type { CheckerAnswer } from './CheckerAnswer.ts'
 import { emitClient } from './emitClient.ts'
 import { emitComponent } from './emitComponent.ts'
+import type { LoweredChunk } from './Lowering.ts'
 import type { AbideFile } from './parseAbide.ts'
+import { projectShadow } from './projectShadow.ts'
 import {
     markScoped,
     namesViewTransition,
     scopeCss,
     scopeToken,
 } from './scopeStyles.ts'
+import { sourceMapOf } from './sourceMapOf.ts'
 
 /**
  * One `.abide`'s modules, in the mode the build compiles it in: its server module, its client
@@ -22,18 +26,29 @@ export function emitSource(
     file: AbideFile,
     answer: CheckerAnswer,
     invoked: boolean,
-    landed?: ReadonlyMap<string, string>,
+    /**
+     * 16.28 — what the browser's module binds in place of the server block: the wrapper of each
+     * private handler it declares, under the handler's name (`standInsOf`).
+     */
+    standIns = '',
+    /** 38.97 — the `.abide`'s text, where the build wants each module's source map. */
+    source?: string,
+    /** 23.19 — the path it answers by, where a mount gives it one other than `relative`. */
+    position = relative,
 ): {
     server: string
     client: string
+    /** 38.97 — each module's `mappings` into the `.abide`, where `source` was given. */
+    serverMappings: string | undefined
+    clientMappings: string | undefined
     sheet: string | undefined
     /** 39.8 — whether a `<style>` names a view transition, read here rather than at run time. */
     transitions: boolean
 } {
-    const kind = fileKind(relative)
+    const kind = fileKind(position)
     // 34.4 — A COMPONENT WITH STYLES: its elements carry its token, and the styles, scoped,
     // are a stylesheet its client module imports — which the bundle collects into the
-    // stylesheet the document links (38.24).
+    // stylesheet the document links (38.23).
     // 34.11 — each body's own `<style>`, scoped to the token its elements carry; the
     // component's token is added only where a component-level `<style>` requires it.
     const token = scopeToken(relative)
@@ -66,26 +81,100 @@ export function emitSource(
     // nothing imports it, the router is what invokes it, and a reader who navigated to a
     // page under it may arrive with the layout already standing or with nothing at all.
     // An `error.abide` is never navigated to — only the server holds the error table.
-    const routed = kind === 'page' || kind === 'layout'
+    const selfFilled = kind === 'page' || kind === 'layout'
     // The client module is emitted only where there is something to hydrate, or where something
     // fills or imports it by name (`emitClient` answers which). A static component nothing invokes
     // has no `.client.ts`, so a file shipping no runtime is a fact about the build rather than a
     // claim about the bundler.
+    const serverChunks: LoweredChunk[] | undefined =
+        source === undefined ? undefined : []
+    const clientChunks: LoweredChunk[] | undefined =
+        source === undefined ? undefined : []
     const client = emitClient(
         file,
         answer,
-        invoked ? (routed ? 'both' : 'invoked') : routed ? 'routed' : 'none',
-        landed,
+        invoked
+            ? selfFilled
+                ? 'both'
+                : 'invoked'
+            : selfFilled
+              ? 'routed'
+              : 'none',
+        clientChunks,
+    )
+    // 41.19 — a page and a layout are built a level at a time by `render`.
+    const server = emitComponent(
+        file,
+        answer,
+        kind !== 'component',
+        scopeOf(position),
+        serverChunks,
     )
     const name = relative.slice(relative.lastIndexOf('/') + 1)
+    const browser = withStandIns(
+        client !== '' && sheet !== undefined
+            ? `import './${name}${STYLE_QUERY}'\n${client}`
+            : client,
+        standIns,
+    )
+    let mapped: Mapped | undefined
+    if (source !== undefined) {
+        mapped = MAPPED.get(relative)
+        if (
+            mapped === undefined ||
+            mapped.source !== source ||
+            mapped.server !== server ||
+            mapped.client !== browser
+        ) {
+            const projected = projectShadow(file).origins
+            mapped = {
+                source,
+                server,
+                client: browser,
+                serverMappings: sourceMapOf(
+                    server,
+                    serverChunks ?? [],
+                    projected,
+                    source,
+                ),
+                clientMappings:
+                    browser === ''
+                        ? undefined
+                        : sourceMapOf(
+                              browser,
+                              clientChunks ?? [],
+                              projected,
+                              source,
+                          ),
+            }
+            MAPPED.set(relative, mapped)
+        }
+    }
     return {
-        // 41.19 — a page and a layout are built a level at a time by `render`.
-        server: emitComponent(file, answer, kind !== 'component', landed),
-        client:
-            client !== '' && sheet !== undefined
-                ? `import './${name.replace(/\.abide$/, '.style.css')}'\n${client}`
-                : client,
+        server,
+        client: browser,
+        serverMappings: mapped?.serverMappings,
+        clientMappings: mapped?.clientMappings,
         sheet,
         transitions,
     }
 }
+
+type Mapped = {
+    source: string
+    server: string
+    client: string
+    serverMappings: string
+    clientMappings: string | undefined
+}
+
+// THE LAST MAPS PER FILE, for a process that compiles again (`abide dev`, the language server): a
+// module's maps are a function of its text and the `.abide`'s, and a save changes one file. Reused
+// only where all three texts match, so two apps in one process sharing a path cannot cross.
+const MAPPED = new Map<string, Mapped>()
+
+/** The browser's module with each private handler's wrapper after it. */
+function withStandIns(client: string, standIns: string): string {
+    if (standIns === '') return client
+    return client === '' ? standIns : `${client}\n${standIns}`
+}