@abide/abide 0.39.0 → 0.40.1

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

@@ -1,3 +1,4 @@
+import { assertExhaustive } from '../../shared/assertExhaustive.ts'
 import { OUTLET_CLOSE, OUTLET_OPEN } from '../runtime/OUTLET_MARKER.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { asOutlet } from './asOutlet.ts'
@@ -5,6 +6,7 @@ import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isAnchorPositioned } from './isAnchorPositioned.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'
@@ -21,17 +23,6 @@ import { VOID_TAGS } from './VOID_TAGS.ts'
 const RANGE_OPEN = '<!--[-->'
 const RANGE_CLOSE = '<!--]-->'
 
-/* The `then`/`catch`/`finally` branch child of an await/try block, or undefined. */
-function branchNamed(
-    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,
-    )
-}
-
 /*
 Server code generator: turns the parsed template into statements that push HTML
 fragments onto an output array, reading the document synchronously (no DOM, no
@@ -212,11 +203,19 @@ export function generateSSR(
                 .join('')
         }
         if (node.kind === 'if') {
-            const elseBranch = node.children.find((child) => child.kind === 'case')
+            /* `case` children are the `elseif`/`else` branches in source order; the rest are
+               the `then` content. Each `elseif` becomes an `else if`, the match-less `else`
+               the trailing `else`. */
+            const branches = node.children.filter(
+                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
+            )
             const thenChildren = node.children.filter((child) => child.kind !== 'case')
             let code = `if (${lowerExpression(node.condition)}) {\n${branchContent(thenChildren, target)}}`
-            if (elseBranch !== undefined && elseBranch.kind === 'case') {
-                code += ` else {\n${branchContent(elseBranch.children, target)}}`
+            for (const branch of branches) {
+                code +=
+                    branch.condition !== undefined
+                        ? ` else if (${lowerExpression(branch.condition)}) {\n${branchContent(branch.children, target)}}`
+                        : ` else {\n${branchContent(branch.children, target)}}`
             }
             return `${anchor}${openRange(target)}${code}\n${closeRange(target)}`
         }
@@ -343,6 +342,12 @@ export function generateSSR(
             }
             return generateSlot(node, target, anchor)
         }
+        /* Every non-element kind returned above; a kind reaching the element builder
+           that isn't an element is a compiler gap — fail loud rather than emit it as a
+           bogus `<undefined>` tag. (`node` narrows to `never` in this branch.) */
+        if (node.kind !== 'element') {
+            return assertExhaustive(node, 'template node kind')
+        }
         let code = push(target, `<${node.tag}`)
         /* Every `<style>` active at this element (own siblings + ancestors) — same set
            the client stamps, so server and client markup carry identical attributes. */
@@ -442,8 +447,8 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const resolvedChildren = node.children.filter((child) => child.kind !== 'branch')
         const resolvedAs = node.as ?? '_value'
         const errorAs = catchBranch?.as ?? '_error'
@@ -480,9 +485,13 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
-        const thenBranch = branchNamed(node.children, 'then')
+        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
+            node,
+            'then',
+            'catch',
+            'finally',
+        )
+        const finallyChildren = finallyBranch?.children ?? []
         const pending = node.children.filter((child) => child.kind !== 'branch')
         const id = nextVar('$aid')
         let code = `const ${id} = $ctx.next++;\n`
@@ -510,8 +519,8 @@ export function generateSSR(
        an enclosing boundary / the 500 / the stream). Boundary comments let hydration
        discard the server content if the client adoption fails. */
     function generateTry(node: Extract<TemplateNode, { kind: 'try' }>, target: string): string {
-        const catchBranch = branchNamed(node.children, 'catch')
-        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
+        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+        const finallyChildren = finallyBranch?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const errName = catchBranch?.as ?? '_error'
         const id = nextVar('$tid')

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

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { TS_PRINTER } from './TS_PRINTER.ts'
 
 /*
 The perf pass that follows `lowerDocAccess`. Within a render scope, a static path
@@ -35,8 +36,7 @@ export function hoistCells(code: string, docName: string): string {
     }
 
     const result = ts.transform(source, [hoistTransformer(docName, cellIdForPath)])
-    const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
-    const output = printer.printFile(result.transformed[0] as ts.SourceFile)
+    const output = TS_PRINTER.printFile(result.transformed[0] as ts.SourceFile)
     result.dispose()
     return output
 }

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

@@ -0,0 +1,11 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* 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. */
+export function isWhitespaceText(node: TemplateNode): boolean {
+    return (
+        node.kind === 'text' &&
+        node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
+    )
+}

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

@@ -1,6 +1,8 @@
-import { lowerDocAccess } from './lowerDocAccess.ts'
+import ts from 'typescript'
+import { docAccessTransformer } from './lowerDocAccess.ts'
 import { nestedBindingNames } from './prepareNestedScript.ts'
-import { renameSignalRefs } from './renameSignalRefs.ts'
+import { signalRefsTransformer } from './renameSignalRefs.ts'
+import { TS_PRINTER } from './TS_PRINTER.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { unwrapParens } from './unwrapParens.ts'
 
@@ -27,19 +29,30 @@ export function lowerContext(
     const derefScope = (): ReadonlySet<string> =>
         localDerived.size === 0 ? derivedNames : new Set([...derivedNames, ...localDerived])
 
-    /* Rewrites signal refs, then lowers a single expression (no trailing `;`).
-       Wrapped in parens so a bare object literal (`{ a: 1 }`) parses as an
-       expression, not a block of labeled statements, through both rewrite passes;
-       the wrapper is then peeled back off. */
+    /* Parse `code` once and chain the reference rename and doc-access lowering over the
+       one tree — the two string passes would each parse + reprint. `derefScope()` is read
+       per call so a nested-`<script>` binding pushed mid-compile is honoured. */
+    function lowerOnce(code: string): string {
+        const source = ts.createSourceFile('expr.ts', code, ts.ScriptTarget.Latest, true)
+        const result = ts.transform(source, [
+            signalRefsTransformer(stateNames, derefScope(), computedNames),
+            docAccessTransformer('model'),
+        ])
+        const output = TS_PRINTER.printFile(result.transformed[0] as ts.SourceFile).trim()
+        result.dispose()
+        return output
+    }
+
+    /* Lowers a single expression (no trailing `;`). Wrapped in parens so a bare object
+       literal (`{ a: 1 }`) parses as an expression, not a block of labeled statements,
+       through the rewrite; the wrapper is then peeled back off. */
     function expression(code: string): string {
-        const renamed = renameSignalRefs(`(${code})`, stateNames, derefScope(), computedNames)
-        return unwrapParens(lowerDocAccess(renamed, 'model').trim().replace(/;$/, ''))
+        return unwrapParens(lowerOnce(`(${code})`).replace(/;$/, ''))
     }
 
     /* As above but keeps the trailing `;` for a statement/handler body. */
     function statement(code: string): string {
-        const renamed = renameSignalRefs(code, stateNames, derefScope(), computedNames)
-        return lowerDocAccess(renamed, 'model').trim()
+        return lowerOnce(code)
     }
 
     /* A two-way bind target is either an LVALUE (`count`, `model.lines[i]`) — reads as

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

@@ -1,5 +1,6 @@
 import ts from 'typescript'
 import { escapeKey } from '../runtime/escapeKey.ts'
+import { TS_PRINTER } from './TS_PRINTER.ts'
 
 /*
 The linchpin compiler pass. Rewrites idiomatic data access on a reactive document
@@ -27,8 +28,7 @@ used as an index lowers too.
 export function lowerDocAccess(code: string, docName: string): string {
     const source = ts.createSourceFile('component.ts', code, ts.ScriptTarget.Latest, true)
     const result = ts.transform(source, [docAccessTransformer(docName)])
-    const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
-    const output = printer.printFile(result.transformed[0] as ts.SourceFile)
+    const output = TS_PRINTER.printFile(result.transformed[0] as ts.SourceFile)
     result.dispose()
     return output
 }
@@ -49,7 +49,7 @@ const COMPOUND_OPERATORS = new Map<ts.SyntaxKind, ts.BinaryOperator>([
     [ts.SyntaxKind.QuestionQuestionEqualsToken, ts.SyntaxKind.QuestionQuestionToken],
 ])
 
-function docAccessTransformer(docName: string): ts.TransformerFactory<ts.SourceFile> {
+export function docAccessTransformer(docName: string): ts.TransformerFactory<ts.SourceFile> {
     return (context) => (root) => {
         /* Collects the path of an access chain rooted at `docName`, visiting any
            dynamic index so reads inside it lower too. undefined if not our doc. */
@@ -107,6 +107,32 @@ function docAccessTransformer(docName: string): ts.TransformerFactory<ts.SourceF
                     }
                 }
             }
+            /* `path++` / `++path` / `path--` on a doc path → a replace patch (the same
+               shape as `+= 1`). A bare `++` would otherwise survive onto the lowered read
+               (`model.read("n")++` / `cell.get()++`) — invalid, since a call result is not
+               an lvalue. abide handlers are statements, so the postfix/prefix value is
+               discarded and both lower identically. Only `++`/`--` are handled here; other
+               unary operators (`!path`, `-path`) fall through so their operand lowers as a
+               normal read. */
+            if (
+                (ts.isPostfixUnaryExpression(node) || ts.isPrefixUnaryExpression(node)) &&
+                (node.operator === ts.SyntaxKind.PlusPlusToken ||
+                    node.operator === ts.SyntaxKind.MinusMinusToken)
+            ) {
+                const segments = pathSegments(node.operand)
+                if (segments) {
+                    const step =
+                        node.operator === ts.SyntaxKind.PlusPlusToken
+                            ? ts.SyntaxKind.PlusToken
+                            : ts.SyntaxKind.MinusToken
+                    const next = ts.factory.createBinaryExpression(
+                        docCall(docName, 'read', [buildPath(segments)]),
+                        step,
+                        ts.factory.createNumericLiteral(1),
+                    )
+                    return docCall(docName, 'replace', [buildPath(segments), next])
+                }
+            }
             /* doc array `.push(a, b, …)` → one `add` patch per argument at the array's `-`
                slot, matching native multi-arg push (each lands at the end in order). */
             if (

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

@@ -0,0 +1,64 @@
+import ts from 'typescript'
+import { assertTranspiles } from './assertTranspiles.ts'
+import { desugarSignals } from './desugarSignals.ts'
+import { docAccessTransformer } from './lowerDocAccess.ts'
+import { signalRefsTransformer } from './renameSignalRefs.ts'
+import { stripEffectsTransformer } from './stripEffects.ts'
+import { TS_PRINTER } from './TS_PRINTER.ts'
+
+/*
+The component-script lowering, done in ONE parse. The script is parsed once, then
+`desugarSignals` (signal declarations → `model` slots / `scope().derive`), reference
+renaming (`count` → `model.count`), and doc-access lowering (`model.count` → patch/read)
+run as a chained `ts.transform` over the SAME tree — each as a standalone string pass
+would parse + reprint. desugar returns a transformer rather than rebuilt source text
+precisely so it can chain here; the name sets it collects feed the rename transformer.
+
+Imports are partitioned off the transformed tree structurally (`ts.isImportDeclaration`),
+not by regex, so a multi-line import hoists correctly regardless of formatting. The
+reassembled output is transpiled as a fail-loud guard: if a future un-handled rewrite
+position corrupts the script (the failure mode the syntax fuzz corpus also guards), it
+surfaces here as a located compile error instead of shipping a broken bundle.
+*/
+
+export function lowerScript(scriptBody: string): {
+    body: string
+    imports: string
+    ssrBody: string
+    stateNames: Set<string>
+    derivedNames: Set<string>
+    computedNames: Set<string>
+} {
+    const source = ts.createSourceFile('component.ts', scriptBody, ts.ScriptTarget.Latest, true)
+    const { transformer, stateNames, derivedNames, computedNames } = desugarSignals(source)
+    const result = ts.transform(source, [
+        transformer,
+        signalRefsTransformer(stateNames, derivedNames, computedNames),
+        docAccessTransformer('model'),
+    ])
+    const transformed = result.transformed[0] as ts.SourceFile
+    /* Top-level imports must live at module scope, not inside the mount/render
+       function the script body becomes — hoist them off the tree. */
+    const importStatements = transformed.statements.filter(ts.isImportDeclaration)
+    const bodyStatements = transformed.statements.filter(
+        (statement) => !ts.isImportDeclaration(statement),
+    )
+    const imports = importStatements
+        .map((statement) => TS_PRINTER.printNode(ts.EmitHint.Unspecified, statement, transformed))
+        .join('\n')
+    const bodyFile = ts.factory.updateSourceFile(transformed, bodyStatements)
+    const body = TS_PRINTER.printFile(bodyFile).trim()
+    /* The SSR variant strips client-only `effect(...)` calls — run over the SAME lowered
+       tree (one extra transform + print, no reparse) instead of re-parsing the printed
+       script downstream. */
+    const ssrResult = ts.transform(bodyFile, [stripEffectsTransformer()])
+    const ssrBody = TS_PRINTER.printFile(ssrResult.transformed[0] as ts.SourceFile).trim()
+    ssrResult.dispose()
+    result.dispose()
+
+    assertTranspiles(
+        [imports, body].filter((part) => part !== '').join('\n'),
+        'component script lowering',
+    )
+    return { body, imports, ssrBody, stateNames, derivedNames, computedNames }
+}

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

@@ -1,4 +1,5 @@
 import { decodeHtmlEntities } from './decodeHtmlEntities.ts'
+import { isWhitespaceText } from './isWhitespaceText.ts'
 import type { TemplateAttr } from './types/TemplateAttr.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import type { TextPart } from './types/TextPart.ts'
@@ -303,6 +304,13 @@ function rejectStrayBranches(
                 '[abide] <template else>/<template case> must be nested inside its <template if>/<template switch> — a sibling branch is not supported',
             )
         }
+        /* `elseif` is an `if`-chain branch; inside a `switch` it would silently read as the
+           default (match-less), so reject the cross-construct mix. */
+        if (node.kind === 'case' && node.condition !== undefined && parentKind === 'switch') {
+            throw new Error(
+                '[abide] <template elseif> belongs to a <template if> chain, not a <template switch> — use <template case>',
+            )
+        }
         if (
             node.kind === 'branch' &&
             parentKind !== 'await' &&
@@ -313,12 +321,62 @@ function rejectStrayBranches(
                 '[abide] <template then>/<template catch>/<template finally> must be nested inside its <template await>/<template try>/<template each await>',
             )
         }
+        if (node.kind === 'if' || node.kind === 'switch') {
+            rejectMisplacedBranchContent(node)
+        }
         if ('children' in node) {
             rejectStrayBranches(node.children, node.kind)
         }
     }
 }
 
+/* A `<template if>` chain's `then` content precedes its first branch tag
+   (`elseif`/`else`); a `<template switch>` renders only its branch tags. So rendered
+   content sitting AFTER the first branch in an `if` — or ANYWHERE in a `switch` —
+   belongs to no branch: today it silently folds into `then` / is dropped. Reject it so
+   the misplacement surfaces. Whitespace stays transparent, and `<script>`/`<style>` are
+   directives (scoping, not rendered output), so both remain legal anywhere. */
+function rejectMisplacedBranchContent(
+    node: Extract<TemplateNode, { kind: 'if' | 'switch' }>,
+): void {
+    const firstBranch = node.children.findIndex((child) => child.kind === 'case')
+    node.children.forEach((child, index) => {
+        const isRenderedContent =
+            child.kind !== 'case' &&
+            child.kind !== 'script' &&
+            child.kind !== 'style' &&
+            !isWhitespaceText(child)
+        /* In a switch nothing but branches renders, so every position is illegal; in an if
+           only content past the first branch is (the leading then-content is legal). */
+        const illegalPosition =
+            node.kind === 'switch' || (firstBranch !== -1 && index > firstBranch)
+        if (isRenderedContent && illegalPosition) {
+            throw new Error(
+                node.kind === 'switch'
+                    ? '[abide] a <template switch> renders only its <template case>/<template default> branches — move stray content into a branch'
+                    : '[abide] content after a <template elseif>/<template else> belongs to no branch — the then-content must precede the first branch tag',
+            )
+        }
+    })
+    /* In an `if` chain the match-less `<template else>` is the trailing block, so any
+       branch after it (a second `else`, or an `elseif`) compiles to invalid `} else {…}
+       else if {…}` (SSR/type-shadow) or a silently-shadowed branch (the `switchBlock`
+       default wins). Reject so the misordering surfaces here, not as opaque codegen. */
+    if (node.kind === 'if') {
+        const branches = node.children.filter(
+            (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
+        )
+        const elseIndex = branches.findIndex(
+            (branch) => branch.match === undefined && branch.condition === undefined,
+        )
+        if (elseIndex !== -1 && elseIndex < branches.length - 1) {
+            throw new Error(
+                '[abide] <template else> must be the last branch of its <template if> chain — no <template elseif>/<template else> may follow it',
+            )
+        }
+    }
+}
+
 /* Turns a component's attributes into props. A component has no directives —
    every attribute is a prop under its written name, so `on*`/`bind:`/`attach`
    round-trip to their original names (the kinds the tag-blind attribute parser
@@ -468,6 +526,22 @@ function toControlFlow(attrs: TemplateAttr[], children: TemplateNode[]): Templat
         }
         return { kind: 'case', match: matchCode, children, loc: attrLoc(caseAttr) }
     }
+    /* `<template elseif={c}>` is a match-less case carrying a condition — a branch of the
+       enclosing `<template if>` chain, truthy-tested in source order. */
+    const elseif = find('elseif')
+    if (elseif !== undefined) {
+        const conditionCode = attrText(elseif)
+        if (conditionCode === undefined) {
+            throw new Error('[abide] <template elseif> requires a condition expression')
+        }
+        return {
+            kind: 'case',
+            match: undefined,
+            condition: conditionCode,
+            children,
+            loc: attrLoc(elseif),
+        }
+    }
     if (find('default') !== undefined || find('else') !== undefined) {
         return { kind: 'case', match: undefined, children } // default (switch) / else (if)
     }