@abide/abide 0.48.0 → 0.50.0

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

@@ -9,6 +9,7 @@ import { composeProps } from './composeProps.ts'
 import { eachPlan } from './eachPlan.ts'
 import { elementPlan } from './elementPlan.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { hoistableChildRenders } from './hoistableChildRenders.ts'
 import { ifPlan } from './ifPlan.ts'
 import { interpolatedTemplateLiteral } from './interpolatedTemplateLiteral.ts'
 import { isControlFlow } from './isControlFlow.ts'
@@ -74,8 +75,19 @@ export function generateBuild(
     derivedNames: ReadonlySet<string>,
     computedNames: ReadonlySet<string>,
     isLayout = false,
+    /* `linked` / async `computed` names, lowered to `$$readCell(name)` in template exprs. */
+    cellReadNames: ReadonlySet<string> = new Set(),
 ): string {
     const nextVar = makeVarNamer()
+    /* A per-body source-order ordinal for each `<Child/>` mount site, so two same-type siblings
+       get distinct render-path segments. Combined with the ambient branch/row path a control-flow
+       ancestor pushes, this makes every mounted instance's id unique and stable (ADR render-path
+       identity). Drawn in document-order walk, matching the SSR back-end's identical walk. */
+    let childOrdinal = 0
+    /* ADR-0039: the SAME hoistable-child set the SSR back-end computes (identical inputs → identical
+       node identities), so the client emits the dual-mode `$$mountStreamedChild` for exactly the
+       children the server may stream. A non-hoistable child keeps the plain `$$mountChild`. */
+    const streamCapable = hoistableChildRenders(nodes, cellReadNames)
 
     /* In a layout, `<slot/>` outlets are rewritten to `OUTLET_TAG` elements up front
        (`asOutlet`) so the static-clone path carries them as ordinary structure. `asOutlet`
@@ -109,7 +121,7 @@ export function generateBuild(
         withShadow,
         bindRead,
         bindWrite,
-    } = lowerContext(stateNames, derivedNames, computedNames)
+    } = lowerContext(stateNames, derivedNames, computedNames, cellReadNames)
 
     /* Maps a plan `Binding`'s classification to the client `ShadowKind`: a `reactive` value
        derefs as a `.value` cell (`derived`), a `plain` value as the bare local (`plain`). The
@@ -200,7 +212,7 @@ export function generateBuild(
            (`type="number"`/`"range"`) reports its edit as a string on `el.value`, which
            would corrupt number-typed state; source the write-back from `valueAsNumber`
            instead (empty field → `undefined`), gated on a statically-known type. */
-        const event = bindListenEvent(attr.property, node.tag)
+        const event = bindListenEvent(attr.property)
         const staticType = staticAttrValue(node, 'type')
         const isNumericInput =
             attr.property === 'value' &&
@@ -544,44 +556,67 @@ export function generateBuild(
                 return `{ match: ${match}, render: ${branchThunk(branch.children)} }`
             })
             .join(', ')
+        /* A bare async subject holds the whole switch while the cell is pending — no case, not
+           even the default — then matches on the settled value's peek. */
+        if (node.asyncSubject === true) {
+            const cell = node.subject.trim()
+            return `$$switchBlock(${parentVar}, () => $$readCell(${cell}), [${cases}], ${before}, () => $$cellPending(${cell}));\n`
+        }
         return `$$switchBlock(${parentVar}, () => (${lowerExpression(node.subject)}), [${cases}], ${before});\n`
     }
 
-    /* A `{children()}` slot fill point: render the parent-provided content (`$children`).
-       A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot node never
-       carries children — the invoke is unconditional but guarded against a propless mount. */
+    /* A component `{children()}` fill point: mount the `children` prop (a `Snippet`) by
+       calling it and mounting the resulting value through the snippet interpolation path,
+       exactly as any `{snippet(args)}`. `lowerExpression('children()')` reads the destructured
+       `children` computed and calls it → a `SnippetValue`, which `appendText` routes to
+       `appendSnippet`. A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot
+       node carries no children. Layouts never reach here — their slots are rewritten to `outlet`
+       elements by `asOutlet`. */
     function generateSlot(
         _node: Extract<TemplateNode, { kind: 'element' }>,
         parentVar: string,
     ): string {
-        return `if ($props && $props.$children) { $props.$children(${parentVar}); }\n`
+        return `$$appendText(${parentVar}, () => (${lowerExpression('children()')}));\n`
     }
 
-    /* The child's slot content as a host-taking builder (`$children`), or undefined when
-       the component has no slotted children. */
+    /* Slot content as a zero-arg `Snippet` under the `children` key — a callable returning a
+       `$$snippet`-branded builder, so it unifies with a passed `children={snippet}` and mounts
+       through the standard snippet interpolation path. `composeProps` wraps it in the prop-bag
+       thunk, so the final bag value is `() => (Snippet callable)`. */
     function slotPart(node: Extract<TemplateNode, { kind: 'component' }>): string | undefined {
         const slotCode = generateChildren(node.children, '$slot')
-        return slotCode.trim() === '' ? undefined : `"$children": ($slot) => {\n${slotCode}}`
+        return slotCode.trim() === ''
+            ? undefined
+            : `"children": () => (() => $$snippet(($slot) => {\n${slotCode}}))`
     }
 
     /* The props bag a child mount receives — composed by the shared `composeProps` so the
        build and SSR back-ends emit the same last-wins layering. */
     function propsArg(node: Extract<TemplateNode, { kind: 'component' }>): string {
-        return composeProps(node.props, lowerExpression, slotPart(node))
+        return composeProps(node.props, lowerExpression, slotPart(node), bindRead, bindWrite)
     }
 
     /* Mounts a child component as a marker-bounded range on `parentVar`, positioned at
        `before` (a skeleton anchor's `anchorCursor`, or `null` for a standalone child).
        `mountRange` opens the `[`/`]` markers and builds the child between them — no
        wrapper element — so the child's root is a true direct child of `parentVar`.
-       Hydration stays ambient, so the child claims its server range in place. The
-       component name passes as the scope label (the inspector's `<Counter>` name). */
+       Hydration stays ambient, so the child claims its server range in place. */
     function generateChildComponent(
         node: Extract<TemplateNode, { kind: 'component' }>,
         parentVar: string,
         before: string,
     ): string {
-        return `$$mountChild(${parentVar}, ${node.name}, ${propsArg(node)}, ${before}, ${JSON.stringify(node.name)});\n`
+        /* The tag lowers through `lowerExpression` like any other reference: a static
+           module import (`Button`) is left bare, but a reactive binding — a `{#for}`
+           item, an `await` `then` value, a component signal — derefs to its `.value`
+           cell, so `<Icon>` from `{#for {icon: Icon} of …}` mounts the component the cell
+           holds, not the cell object (whose `.build` is undefined → `build is not a
+           function`). SSR emits the same lowering for congruence. */
+        /* A hoistable child may have STREAMED (server chose per-render): emit the dual-mode adopter,
+           which probes the cursor to adopt an inlined `[ … ]` range OR a streamed `abide:await`
+           boundary (ADR-0039). Same args as mountChild. */
+        const mountFn = streamCapable.has(node) ? '$$mountStreamedChild' : '$$mountChild'
+        return `${mountFn}(${parentVar}, ${lowerExpression(node.name)}, ${propsArg(node)}, ${before}, ${childOrdinal++});\n`
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a
@@ -703,16 +738,35 @@ export function generateBuild(
             const thenThunk = branchThunk(plan.thenChildren)
             const elseThunk =
                 plan.elseBranch === undefined ? 'undefined' : branchThunk(plan.elseBranch.children)
+            /* A bare async subject (`{#if getX()}`) passes `when` a pending probe so a
+               still-loading cell renders NO branch; the condition itself is the plain peek read
+               (`$$readCell`), evaluated only once no longer pending. */
+            if (node.asyncSubject === true) {
+                const cell = node.condition.trim()
+                return `$$when(${parentVar}, () => $$readCell(${cell}), ${thenThunk}, ${elseThunk}, ${before}, () => $$cellPending(${cell}));\n`
+            }
             return `$$when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
         }
         /* if/elseif/else is a cond-chain — reuse `switchBlock` over a constant `true`
            subject with `Boolean`-coerced match thunks, so the first truthy branch wins
-           (`else` is the match-less default). */
+           (`else` is the match-less default). A branch whose own condition is a bare async
+           subject carries a `pending` probe: `switchBlock` holds the chain there while it loads,
+           so sync and async branches interleave and each resolves at render time — a pending
+           async branch never lets a later branch render on its not-yet-known condition. */
+        const condEntry = (
+            condition: string,
+            asyncSubject: boolean | undefined,
+            children: TemplateNode[],
+        ): string => {
+            const pending =
+                asyncSubject === true ? `, pending: () => $$cellPending(${condition.trim()})` : ''
+            return `{ match: () => Boolean(${lowerExpression(condition)}), render: ${branchThunk(children)}${pending} }`
+        }
         const entries = [
-            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(plan.thenChildren)} }`,
+            condEntry(node.condition, node.asyncSubject, plan.thenChildren),
             ...plan.branches.map((branch) =>
                 branch.condition !== undefined
-                    ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
+                    ? condEntry(branch.condition, branch.asyncSubject, branch.children)
                     : `{ match: undefined, render: ${branchThunk(branch.children)} }`,
             ),
         ]
@@ -773,9 +827,12 @@ export function generateBuild(
         const catchArg = plan.async
             ? `, ${plan.hasCatch ? branchThunk(plan.catchChildren, plan.catchBindings) : 'undefined'}`
             : ''
+        /* Whether the each has an explicit `by` key — the row then keys its render-path segment
+           on the stable key rather than its position (see `each`/`eachAsync`). */
+        const keyed = plan.key !== undefined
         return (
             `${fn}(${parentVar}, () => (${lowerExpression(plan.items)}), ` +
-            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${itemWiring.param}${indexParam}) => {\n${itemWiring.prefix}${rowBody}}${catchArg}, ${before});\n`
+            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${itemWiring.param}${indexParam}) => {\n${itemWiring.prefix}${rowBody}}${catchArg}, ${before}, ${keyed});\n`
         )
     }