@abide/abide 0.38.0 → 0.39.0

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

@@ -2,12 +2,13 @@ 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 { componentWrapperTag } from './componentWrapperTag.ts'
+import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { lowerContext } from './lowerContext.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'
@@ -22,6 +23,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,
@@ -77,7 +97,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`
@@ -96,12 +116,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`
             )
         }
@@ -112,7 +132,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`
         )
     }
@@ -125,6 +145,16 @@ export function generateBuild(
        block or slot drops an `<!--a-->` anchor at its position and mounts there (see
        `anchorCursor`), so it can sit ANYWHERE among static siblings. Static descendants are
        plain markup. */
+    /* The skeleton anchor var for an anchor-positioned node: declares `an<n> = sk.an[i]` as
+       a bind and returns the var name. The three anchored kinds (control-flow/component,
+       outlet, slot) all mount at this `<!--a-->` anchor, so they number through this ONE
+       site (`anIndex`) — no per-branch copy of the lookup to drift from the runtime scan. */
+    function anchorVarAt(node: TemplateNode, skVar: string, binds: string[]): string {
+        const anchorVar = nextVar('an')
+        binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+        return anchorVar
+    }
+
     function skeletonMarkup(node: TemplateNode, skVar: string, binds: string[]): string {
         if (node.kind === 'text') {
             /* Reactive text reached here is INTERLEAVED with element siblings (a text-leaf
@@ -137,31 +167,23 @@ 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-->'
                 })
                 .join('')
         }
-        if (isControlFlow(node)) {
-            /* A control-flow block at its position: an `<!--a-->` anchor in the clone, the
-               block mounted at it. `anchorCursor` parks the hydrate cursor past the anchor
-               and returns the create insertion reference; the block's parent is the located
-               element the anchor was cloned into (`anchor.parentNode`). */
-            const anchorVar = nextVar('an')
-            binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+        if (isControlFlow(node) || node.kind === 'component') {
+            /* A control-flow block OR a child component at its position: an `<!--a-->` anchor
+               in the clone, its content mounted as a marker-bounded range at it. `anchorCursor`
+               parks the hydrate cursor past the anchor and returns the create insertion
+               reference; the parent is the located element the anchor was cloned into
+               (`anchor.parentNode`). A component takes an anchor like a block — no wrapper
+               element — so its root lays out as a true direct child of `anchor.parentNode`. */
+            const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(generateChild(node, `${anchorVar}.parentNode`, `anchorCursor(${anchorVar})`))
             return '<!--a-->'
         }
-        if (node.kind === 'component') {
-            /* The wrapper element is a positioned hole in the skeleton; the child mounts
-               into the located node. display:contents (idempotent, static so it lives in
-               the markup) keeps the wrapper out of layout — a pure mount host. */
-            const tag = componentWrapperTag(node.name)
-            const { code } = mountComponent(node, `${skVar}.el[${holeIndex(elIndex, node)}]`)
-            binds.push(code)
-            return `<${tag} ${HOLE_ATTRIBUTE} style="display:contents"></${tag}>`
-        }
         if (node.kind === 'script') {
             /* A nested `<script>` (scoped reactive block) emits no markup — its lowered body
                runs as a bind, in document order, so its signals are declared before the later
@@ -179,11 +201,18 @@ export function generateBuild(
         if (node.kind !== 'element') {
             return '' // <style> emits no markup
         }
+        if (node.tag === OUTLET_TAG) {
+            /* A layout's router fill point at its position: an `<!--a-->` anchor, an empty
+               `outlet` boundary the router fills with the next chain layer (`fillBoundary`).
+               No wrapper element — the filled child lays out as a direct child of the parent. */
+            const anchorVar = anchorVarAt(node, skVar, binds)
+            binds.push(`outlet(${anchorVar}.parentNode, anchorCursor(${anchorVar}));\n`)
+            return '<!--a-->'
+        }
         if (node.tag === 'slot') {
             /* A `<slot>` outlet at its position: an `<!--a-->` anchor, the slot's content
                mounted as a marker-bounded range (`mountSlot`) so it positions like a block. */
-            const anchorVar = nextVar('an')
-            binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+            const anchorVar = anchorVarAt(node, skVar, binds)
             const hostVar = nextVar('host')
             binds.push(
                 `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
@@ -211,7 +240,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))
                 }
             }
@@ -246,7 +282,7 @@ export function generateBuild(
        skeleton string (parsed once, cloned per mount) plus each hole's wiring against
        its located node. */
     function generateSkeleton(
-        node: Extract<TemplateNode, { kind: 'element' | 'component' }>,
+        node: Extract<TemplateNode, { kind: 'element' }>,
         parentVar: string,
     ): string {
         const skVar = nextVar('sk')
@@ -279,18 +315,23 @@ 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('')
         }
+        if (node.kind === 'element' && node.tag === OUTLET_TAG) {
+            /* A standalone layout outlet (a top-level/element-nested `<slot/>` rewritten by
+               `asOutlet`, reached outside any skeleton): an empty `outlet` boundary at
+               `before`, no anchor — the router fills it with the next chain layer. */
+            return `outlet(${parentVar}, ${before});\n`
+        }
         if (node.kind === 'element' && node.tag === 'slot') {
-            /* In a layout, `<slot/>` is the router's page outlet: a bare empty `OUTLET_TAG`
-               element the router mounts the next chain layer into, cloned (create) / claimed
-               (hydrate) so it matches the SSR placeholder. (Top-level/nested-in-element layout
-               slots are rewritten to `OUTLET_TAG` up front by `asOutlet`; this covers a slot
-               reached inside a control-flow branch.) */
+            /* In a layout, `<slot/>` is the router's page outlet (`outlet` boundary the
+               router fills with the next chain layer). Top-level/element-nested layout slots
+               are rewritten to `OUTLET_TAG` up front by `asOutlet` and handled above; this
+               covers a layout slot reached inside a control-flow branch. */
             if (isLayout) {
-                return `cloneStatic(${parentVar}, ${JSON.stringify(`<${OUTLET_TAG}></${OUTLET_TAG}>`)});\n`
+                return `outlet(${parentVar}, ${before});\n`
             }
             return generateSlot(node, parentVar)
         }
@@ -314,10 +355,10 @@ export function generateBuild(
             return '' // branches are consumed by their await block, never standalone
         }
         if (node.kind === 'component') {
-            /* A standalone component builds through the skeleton too — its wrapper element
-               is a located hole, the child mounts into it (same as a component nested in a
-               skeletonable element). */
-            return generateSkeleton(node, parentVar)
+            /* A standalone component (top-level, or a bare child of a branch/row/slot) mounts
+               directly as a marker range on `parentVar` at `before` — no anchor, no wrapper,
+               same as a standalone control-flow block routes through `generateIf`/etc. */
+            return generateChildComponent(node, parentVar, before)
         }
         if (node.kind === 'switch') {
             return generateSwitch(node, parentVar, before)
@@ -402,33 +443,31 @@ export function generateBuild(
         return `if ($props && $props.$children) { ${invoke}; } else {\n${fallback}}\n`
     }
 
-    /* Mounts a child component into a wrapper element, passing each prop as a
-       reactive thunk so the child re-reads when the parent expression changes. */
-    /* 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}}`
     }
 
-    /* Mounts a child into a wrapper obtained via `varExpr` (a skeleton-located node).
-       Hydration stays active, so the child adopts its server markup inside the wrapper.
-       Returns the wrapper var. */
-    function mountComponent(
+    /* 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
+       `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). */
+    function generateChildComponent(
         node: Extract<TemplateNode, { kind: 'component' }>,
-        varExpr: string,
-    ): { code: string; varName: string } {
-        const wrapper = nextVar('cmp')
-        const code =
-            `const ${wrapper} = ${varExpr};\n` +
-            `mountChild(${wrapper}, ${node.name}, { ${componentParts(node).join(', ')} });\n`
-        return { code, varName: wrapper }
+        parentVar: string,
+        before: string,
+    ): string {
+        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
@@ -633,7 +672,7 @@ imperative. Static text and elements nested INSIDE a qualifying element are fine
 enclosed by its tags.
 */
 function isStaticCloneableElement(node: TemplateNode): boolean {
-    if (node.kind !== 'element' || node.tag === 'slot') {
+    if (node.kind !== 'element' || node.tag === 'slot' || node.tag === OUTLET_TAG) {
         return false
     }
     if (node.attrs.some((attr) => attr.kind !== 'static')) {