@abide/abide 0.38.1 → 0.40.0

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

@@ -2,11 +2,15 @@ import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { asOutlet } from './asOutlet.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
+import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
+import { isWhitespaceText } from './isWhitespaceText.ts'
 import { lowerContext } from './lowerContext.ts'
+import { resolveBranches } from './resolveBranches.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
+import { spreadExcludedNames } from './spreadExcludedNames.ts'
 import { staticAttr } from './staticAttr.ts'
 import { staticTextPart } from './staticTextPart.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
@@ -21,6 +25,25 @@ surface (`count` → `model.count`) and then lowered to the doc patch/read API
 `hostVar` and expects the dom bindings, `doc`, `effect`, and the component's
 `model` in scope — the body the component compiler wraps and hoists cells into.
 */
+
+/* A JS-identifier-safe frame name from an authored construct label (an attribute name
+   like `aria-label`, a bound property). Non-identifier chars → `_`; a leading digit gets
+   an `_` prefix; empty falls back to `thunk`. Callers prefix the label (`attr_`/`bind_`),
+   so the result is never a bare reserved word. */
+function thunkName(label: string): string {
+    const safe = label.replace(/[^A-Za-z0-9_$]/g, '_').replace(/^(?=\d)/, '_')
+    return safe === '' ? 'thunk' : safe
+}
+
+/* Names a reactive thunk so a stack frame reads `name@File.abide:line` instead of
+   `(anonymous)` — disambiguating which binding a frame is when several share a line. Emits
+   a named function expression (the only form whose name a debugger displays); the named
+   bodies never reference `this`/`arguments`, so the arrow→function swap is behaviour-safe,
+   and minify strips the name, so it costs nothing in production. */
+function namedThunk(name: string, body: string): string {
+    return `function ${thunkName(name)}() { ${body} }`
+}
+
 export function generateBuild(
     nodes: TemplateNode[],
     hostVar: string,
@@ -76,7 +99,7 @@ export function generateBuild(
         varName: string,
     ): string {
         if (attr.kind === 'expression') {
-            return `attr(${varName}, ${JSON.stringify(attr.name)}, () => (${lowerExpression(attr.code)}));\n`
+            return `attr(${varName}, ${JSON.stringify(attr.name)}, ${namedThunk(`attr_${attr.name}`, `return (${lowerExpression(attr.code)})`)});\n`
         }
         if (attr.kind === 'event') {
             return `on(${varName}, ${JSON.stringify(attr.event)}, (${lowerExpression(attr.code)}));\n`
@@ -95,12 +118,12 @@ export function generateBuild(
             const value = lowerExpression(valueCode)
             if (isRadio) {
                 return (
-                    `effect(() => { ${varName}.checked = (${lowerExpression(attr.code)}) === (${value}); });\n` +
+                    `effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}) === (${value});`)});\n` +
                     `on(${varName}, "change", () => { if (${varName}.checked) { ${lowerStatement(`${attr.code} = ${valueCode}`)} } });\n`
                 )
             }
             return (
-                `effect(() => { ${varName}.checked = (${lowerExpression(attr.code)}).includes(${value}); });\n` +
+                `effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}).includes(${value});`)});\n` +
                 `on(${varName}, "change", () => { const $groupValue = ${value}; if (${varName}.checked) { if (!(${lowerExpression(attr.code)}).includes($groupValue)) { ${lowerStatement(`${attr.code}.push($groupValue)`)} } } else { const $groupIndex = (${lowerExpression(attr.code)}).indexOf($groupValue); if ($groupIndex !== -1) { ${lowerStatement(`delete ${attr.code}[$groupIndex]`)} } } });\n`
             )
         }
@@ -111,7 +134,7 @@ export function generateBuild(
            `.get()` and writes via `.set(v)` — see `bindRead`/`bindWrite`. */
         const event = bindListenEvent(attr.property, node.tag)
         return (
-            `effect(() => { ${varName}.${attr.property} = ${bindRead(attr.code)}; });\n` +
+            `effect(${namedThunk(`bind_${attr.property}`, `${varName}.${attr.property} = ${bindRead(attr.code)};`)});\n` +
             `on(${varName}, ${JSON.stringify(event)}, () => { ${bindWrite(attr.code, `${varName}.${attr.property}`)} });\n`
         )
     }
@@ -146,7 +169,7 @@ export function generateBuild(
                         return staticTextPart(part.value)
                     }
                     binds.push(
-                        `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], () => (${lowerExpression(part.code)}));\n`,
+                        `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], ${namedThunk('text', `return (${lowerExpression(part.code)})`)});\n`,
                     )
                     return '<!--a-->'
                 })
@@ -219,7 +242,14 @@ export function generateBuild(
             binds.push(`const ${elVar} = ${skVar}.el[${holeIndex(elIndex, node)}];\n`)
             openTag += ` ${HOLE_ATTRIBUTE}`
             for (const attr of node.attrs) {
-                if (attr.kind !== 'static') {
+                if (attr.kind === 'spread') {
+                    /* `{...expr}` onto the element: each key binds as a reactive attribute
+                       (or an `on<event>` function as a listener) via `spreadAttrs`, skipping
+                       any key explicitly named on the element (the explicit attr wins). */
+                    binds.push(
+                        `spreadAttrs(${elVar}, ${namedThunk('spread', `return (${lowerExpression(attr.code)})`)}, ${JSON.stringify(spreadExcludedNames(node.attrs))});\n`,
+                    )
+                } else if (attr.kind !== 'static') {
                     binds.push(dynamicAttr(node, attr, elVar))
                 }
             }
@@ -287,7 +317,7 @@ export function generateBuild(
                     const splitAlways = index < consumers.length - 1 ? ', true' : ''
                     return part.kind === 'static'
                         ? `appendStatic(${parentVar}, ${JSON.stringify(part.value)}${splitAlways});\n`
-                        : `appendText(${parentVar}, () => (${lowerExpression(part.code)})${splitAlways});\n`
+                        : `appendText(${parentVar}, ${namedThunk('text', `return (${lowerExpression(part.code)})`)}${splitAlways});\n`
                 })
                 .join('')
         }
@@ -415,17 +445,17 @@ export function generateBuild(
         return `if ($props && $props.$children) { ${invoke}; } else {\n${fallback}}\n`
     }
 
-    /* The prop + slot thunks a child mount receives — its props as value thunks and
-       its slot content as a host-taking builder (`$children`). */
-    function componentParts(node: Extract<TemplateNode, { kind: 'component' }>): string[] {
-        const parts = node.props.map(
-            (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
-        )
+    /* The child's slot content as a host-taking builder (`$children`), or undefined when
+       the component has no slotted children. */
+    function slotPart(node: Extract<TemplateNode, { kind: 'component' }>): string | undefined {
         const slotCode = generateChildren(node.children, '$slot')
-        if (slotCode.trim() !== '') {
-            parts.push(`"$children": ($slot) => {\n${slotCode}}`)
-        }
-        return parts
+        return slotCode.trim() === '' ? undefined : `"$children": ($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))
     }
 
     /* Mounts a child component as a marker-bounded range on `parentVar`, positioned at
@@ -439,7 +469,7 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        return `mountChild(${parentVar}, ${node.name}, { ${componentParts(node).join(', ')} }, ${before}, ${JSON.stringify(node.name)});\n`
+        return `mountChild(${parentVar}, ${node.name}, ${propsArg(node)}, ${before}, ${JSON.stringify(node.name)});\n`
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a
@@ -449,27 +479,25 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const isBranch = (which: 'then' | 'catch' | 'finally') => (child: TemplateNode) =>
-            child.kind === 'branch' && child.branch === which
-        const catchBranch = node.children.find(isBranch('catch'))
-        const finallyChildren = branchChildren(node.children.find(isBranch('finally')))
+        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
+            node,
+            'then',
+            'catch',
+            'finally',
+        )
+        const finallyChildren = finallyBranch?.children ?? []
         /* Blocking: no pending, the children are the resolved branch bound to `node.as`.
            Streaming: pending is the non-branch children, resolved is the `then` child. */
         const pending = node.blocking
             ? []
             : node.children.filter((child) => child.kind !== 'branch')
-        const thenBranch = node.children.find(isBranch('then'))
         const thenThunk = node.blocking
             ? branchThunk(
                   node.children.filter((child) => child.kind !== 'branch'),
                   node.as ?? '_value',
                   finallyChildren,
               )
-            : branchThunk(
-                  branchChildren(thenBranch),
-                  branchVar(thenBranch) ?? '_value',
-                  finallyChildren,
-              )
+            : branchThunk(thenBranch?.children ?? [], thenBranch?.as ?? '_value', finallyChildren)
         /* Neither catch nor finally → pass `undefined` so awaitBlock re-throws the
            rejection (surfacing it) instead of rendering an empty branch. A finally-only
            block keeps a catch thunk that renders just finally. */
@@ -477,8 +505,8 @@ export function generateBuild(
             catchBranch === undefined && finallyChildren.length === 0
                 ? 'undefined'
                 : branchThunk(
-                      branchChildren(catchBranch),
-                      branchVar(catchBranch) ?? '_error',
+                      catchBranch?.children ?? [],
+                      catchBranch?.as ?? '_error',
                       finallyChildren,
                   )
         const pendingThunk = hasRenderableContent(pending) ? branchThunk(pending) : 'undefined'
@@ -490,16 +518,6 @@ export function generateBuild(
         )
     }
 
-    /* Children of a branch node (then/catch), or [] when the branch is absent. */
-    function branchChildren(branch: TemplateNode | undefined): TemplateNode[] {
-        return branch !== undefined && branch.kind === 'branch' ? branch.children : []
-    }
-
-    /* The value/error variable name a branch binds, if any. */
-    function branchVar(branch: TemplateNode | undefined): string | undefined {
-        return branch !== undefined && branch.kind === 'branch' ? branch.as : undefined
-    }
-
     /* A branch's content as a void render thunk `(parent[, value]) => void` that
        builds its children — and an optional trailing `finally` branch — into
        `parent`. The full-range model tracks the built content between markers, so a
@@ -538,17 +556,6 @@ export function generateBuild(
         )
     }
 
-    /* The branch child of a control block matching `which` (then/catch/finally). */
-    function findBranch(
-        children: TemplateNode[],
-        which: 'then' | 'catch' | 'finally',
-    ): Extract<TemplateNode, { kind: 'branch' }> | undefined {
-        return children.find(
-            (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                child.kind === 'branch' && child.branch === which,
-        )
-    }
-
     /* A sync error boundary: build the guarded subtree (++ finally); a throw while
        building swaps to the catch branch (++ finally). No catch → `undefined`, which
        makes the runtime re-throw to the nearest enclosing boundary. */
@@ -557,18 +564,14 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const catchBranch = findBranch(node.children, 'catch')
-        const finallyChildren = branchChildren(findBranch(node.children, 'finally'))
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const tryThunk = branchThunk(guarded, undefined, finallyChildren)
         const catchThunk =
             catchBranch === undefined
                 ? 'undefined'
-                : branchThunk(
-                      branchChildren(catchBranch),
-                      branchVar(catchBranch) ?? '_error',
-                      finallyChildren,
-                  )
+                : branchThunk(catchBranch.children, catchBranch.as ?? '_error', finallyChildren)
         return `tryBlock(${parentVar}, nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
     }
 
@@ -579,13 +582,33 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const elseBranch = node.children.find(
+        /* The `case` children are the chain's `elseif`/`else` branches in source order;
+           the rest are the `then` content. */
+        const branches = node.children.filter(
             (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
         )
         const thenChildren = node.children.filter((child) => child.kind !== 'case')
-        const thenThunk = branchThunk(thenChildren)
-        const elseThunk = elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
-        return `when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
+        const hasElseif = branches.some((branch) => branch.condition !== undefined)
+        /* Fast path: a plain `if` (with optional `else`) is the binary `when` runtime. */
+        if (!hasElseif) {
+            const elseBranch = branches.find((branch) => branch.condition === undefined)
+            const thenThunk = branchThunk(thenChildren)
+            const elseThunk =
+                elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
+            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). */
+        const entries = [
+            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(thenChildren)} }`,
+            ...branches.map((branch) =>
+                branch.condition !== undefined
+                    ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
+                    : `{ match: undefined, render: ${branchThunk(branch.children)} }`,
+            ),
+        ]
+        return `switchBlock(${parentVar}, () => true, [${entries.join(', ')}], ${before});\n`
     }
 
     /* A keyed each. Each row is a content RANGE (any content, tracked between the
@@ -607,11 +630,9 @@ export function generateBuild(
            optional `<template catch>` branch rendered (after the streamed rows) when the
            iterator rejects. Absent → `undefined`, so the rejection surfaces instead. */
         const fn = node.async ? 'eachAsync' : 'each'
-        const catchBranch = node.children.find(
-            (child) => child.kind === 'branch' && child.branch === 'catch',
-        )
+        const [catchBranch] = resolveBranches(node, 'catch')
         const catchArg = node.async
-            ? `, ${catchBranch === undefined ? 'undefined' : branchThunk(branchChildren(catchBranch), branchVar(catchBranch) ?? '_error')}`
+            ? `, ${catchBranch === undefined ? 'undefined' : branchThunk(catchBranch.children, catchBranch.as ?? '_error')}`
             : ''
         return (
             `${fn}(${parentVar}, () => (${lowerExpression(node.items)}), ` +
@@ -622,16 +643,6 @@ export function generateBuild(
     return generateChildren(rootNodes, hostVar)
 }
 
-/* A text node that is purely whitespace (no interpolation, only blank static
-   parts). Both back-ends drop it, so it neither contributes markup nor breaks a
-   static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. */
-function isWhitespaceText(node: TemplateNode): boolean {
-    return (
-        node.kind === 'text' &&
-        node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
-    )
-}
-
 /*
 Whether an element subtree is fully static — no reactive/event/bind attributes,
 no nested `<script>`, and every descendant likewise static (static text, static