@abide/abide 0.41.1 → 0.43.0

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

@@ -1,4 +1,5 @@
 import { assertExhaustive } from '../../shared/assertExhaustive.ts'
+import { escapeRegex } from '../../shared/escapeRegex.ts'
 import { OUTLET_CLOSE, OUTLET_OPEN } from '../runtime/OUTLET_MARKER.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import {
@@ -7,17 +8,22 @@ import {
     RANGE_OPEN as RANGE_OPEN_DATA,
 } from '../runtime/RANGE_MARKER.ts'
 import { asOutlet } from './asOutlet.ts'
+import { awaitPlan } from './awaitPlan.ts'
 import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { ifPlan } from './ifPlan.ts'
 import { isAnchorPositioned } from './isAnchorPositioned.ts'
 import { lowerContext } from './lowerContext.ts'
-import { resolveBranches } from './resolveBranches.ts'
+import { makeVarNamer } from './makeVarNamer.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 { stripEffects } from './stripEffects.ts'
+import { switchPlan } from './switchPlan.ts'
+import { tryPlan } from './tryPlan.ts'
+import type { TemplateAttr } from './types/TemplateAttr.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
@@ -55,10 +61,9 @@ export function generateSSR(
     computedNames: ReadonlySet<string>,
     isLayout = false,
 ): string {
-    /* Compile-time counter for unique temp var names (runtime block ids, child render
-       results) — block ids themselves are allocated at runtime via `$ctx.next++`. */
-    let varCounter = 0
-    const nextVar = (prefix: string): string => `${prefix}${varCounter++}`
+    /* Unique temp var names (child render results); runtime block ids are
+       allocated separately at runtime via `$ctx.next++`. */
+    const nextVar = makeVarNamer()
 
     /* The shared signal→`model` lowering + branch-scoped nested-script deref scope. */
     const {
@@ -90,13 +95,12 @@ export function generateSSR(
        regex metacharacters escaped, or e.g. a trailing `$` would read as an end-anchor and the
        call site would never match — leaving an un-awaited Promise stringified as `[object
        Promise]`. */
-    const escapeRegExp = (text: string): string => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     /* A leading boundary that, unlike `\b`, also fires before a `$`-leading name: `\b$row`
        never matches (`$` is a non-word char, so there is no word boundary before it), which
        would silently miss every `$row(...)` call. A negative lookbehind for word-or-`$`
        matches the same call sites as `\b` for word-leading names while also catching them. */
     const callPattern = (name: string): RegExp =>
-        new RegExp(`(?<![$\\w])${escapeRegExp(name)}\\s*\\(`)
+        new RegExp(`(?<![$\\w])${escapeRegex(name)}\\s*\\(`)
     /* A subtree call to any of `names` from a TEXT interpolation (`name()` / `name(args)`). */
     const subtreeCalls = (children: TemplateNode[], names: ReadonlySet<string>): boolean =>
         children.some((child) => {
@@ -215,12 +219,9 @@ export function generateSSR(
             /* `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)}}`
-            for (const branch of branches) {
+            const plan = ifPlan(node)
+            let code = `if (${lowerExpression(node.condition)}) {\n${branchContent(plan.thenChildren, target)}}`
+            for (const branch of plan.branches) {
                 code +=
                     branch.condition !== undefined
                         ? ` else if (${lowerExpression(branch.condition)}) {\n${branchContent(branch.children, target)}}`
@@ -229,20 +230,17 @@ export function generateSSR(
             return `${anchor}${openRange(target)}${code}\n${closeRange(target)}`
         }
         if (node.kind === 'switch') {
-            const cases = node.children.filter(
-                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
-            )
+            const plan = switchPlan(node)
             let code = `{ const $s = (${lowerExpression(node.subject)});\n`
             let started = false
-            for (const branch of cases) {
+            for (const branch of plan.cases) {
                 if (branch.match !== undefined) {
                     code += `${started ? 'else ' : ''}if ($s === (${lowerExpression(branch.match)})) {\n${branchContent(branch.children, target)}}\n`
                     started = true
                 }
             }
-            const fallback = cases.find((branch) => branch.match === undefined)
-            if (fallback !== undefined) {
-                code += `${started ? 'else ' : ''}{\n${branchContent(fallback.children, target)}}\n`
+            if (plan.fallback !== undefined) {
+                code += `${started ? 'else ' : ''}{\n${branchContent(plan.fallback.children, target)}}\n`
             }
             return `${anchor}${openRange(target)}${code}}\n${closeRange(target)}`
         }
@@ -371,8 +369,25 @@ export function generateSSR(
         for (const scope of node.scopes ?? []) {
             code += push(target, scopeAttr(scope))
         }
+        /* `class:`/`style:` directives collapse with any static `class`/`style` into a SINGLE
+           merged attribute (a duplicate attribute would be invalid and ignored). The client's
+           classList.toggle / style.setProperty effects re-apply the same values on hydrate, so
+           the merged SSR value already matches the post-mount DOM — no flash, no desync. */
+        const classDirectives = node.attrs.filter(
+            (attr): attr is Extract<TemplateAttr, { kind: 'class' }> => attr.kind === 'class',
+        )
+        const styleDirectives = node.attrs.filter(
+            (attr): attr is Extract<TemplateAttr, { kind: 'style' }> => attr.kind === 'style',
+        )
         for (const attr of node.attrs) {
             if (attr.kind === 'static') {
+                /* A static class/style is folded into the merge below when directives exist. */
+                if (
+                    (attr.name === 'class' && classDirectives.length > 0) ||
+                    (attr.name === 'style' && styleDirectives.length > 0)
+                ) {
+                    continue
+                }
                 code += push(target, staticAttr(attr.name, attr.value))
             } else if (attr.kind === 'expression') {
                 /* present/absent semantics matching the client `attr` binding:
@@ -400,6 +415,36 @@ export function generateSSR(
                 code += `${target}.push(${JSON.stringify(` ${attr.property}="`)} + $esc(${bindRead(attr.code)}) + '"');\n`
             }
         }
+        /* Merged class: static value + each directive's name when its expression is truthy. */
+        if (classDirectives.length > 0) {
+            const staticClass = node.attrs.find(
+                (attr): attr is Extract<TemplateAttr, { kind: 'static' }> =>
+                    attr.kind === 'static' && attr.name === 'class',
+            )
+            const parts = [
+                ...(staticClass ? [JSON.stringify(staticClass.value)] : []),
+                ...classDirectives.map(
+                    (dir) => `((${lowerExpression(dir.code)}) ? ${JSON.stringify(dir.name)} : "")`,
+                ),
+            ]
+            code += `${target}.push(' class="' + $esc([${parts.join(', ')}].filter(Boolean).join(' ')) + '"');\n`
+        }
+        /* Merged style: static value + each directive's `prop:value` (String()-coerced, matching
+           the client's style.setProperty). */
+        if (styleDirectives.length > 0) {
+            const staticStyle = node.attrs.find(
+                (attr): attr is Extract<TemplateAttr, { kind: 'static' }> =>
+                    attr.kind === 'static' && attr.name === 'style',
+            )
+            const parts = [
+                ...(staticStyle ? [JSON.stringify(staticStyle.value)] : []),
+                ...styleDirectives.map(
+                    (dir) =>
+                        `(${JSON.stringify(`${dir.property}:`)} + String(${lowerExpression(dir.code)}))`,
+                ),
+            ]
+            code += `${target}.push(' style="' + $esc([${parts.join(', ')}].filter(Boolean).join(';')) + '"');\n`
+        }
         code += push(target, '>')
         if (!VOID_TAGS.has(node.tag)) {
             /* Each child's skeleton position (whether its reactive text interleaves into an
@@ -464,27 +509,23 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        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'
+        const plan = awaitPlan(node)
         const id = nextVar('$aid')
         let code = `const ${id} = $ctx.next++;\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += `try {\n`
-        code += `const ${resolvedAs} = await (${lowerExpression(node.promise)});\n`
-        code += branchContent(resolvedChildren, target)
-        code += branchContent(finallyChildren, target)
-        code += `$resume[${id}] = { ok: true, value: ${resolvedAs} };\n`
-        if (catchBranch === undefined && finallyChildren.length === 0) {
+        code += `const ${plan.resolvedAs} = await (${lowerExpression(node.promise)});\n`
+        code += branchContent(plan.resolvedChildren, target)
+        code += branchContent(plan.finallyChildren, target)
+        code += `$resume[${id}] = { ok: true, value: ${plan.resolvedAs} };\n`
+        if (plan.surfaceRejection) {
             /* No catch/finally → let the rejection surface instead of an empty branch. */
             code += `} catch (_error) { throw _error; }\n`
         } else {
-            code += `} catch (${errorAs}) {\n`
-            code += branchContent(catchBranch?.children ?? [], target)
-            code += branchContent(finallyChildren, target)
-            code += `$resume[${id}] = { ok: false, error: String(${errorAs}) };\n`
+            code += `} catch (${plan.catchAs}) {\n`
+            code += branchContent(plan.catchChildren, target)
+            code += branchContent(plan.finallyChildren, target)
+            code += `$resume[${id}] = { ok: false, error: String(${plan.catchAs}) };\n`
             code += `}\n`
         }
         code += `${target}.push("<!--/abide:await:" + ${id} + "-->");\n`
@@ -502,29 +543,21 @@ export function generateSSR(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,
     ): string {
-        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
-            node,
-            'then',
-            'catch',
-            'finally',
-        )
-        const finallyChildren = finallyBranch?.children ?? []
-        const pending = node.children.filter((child) => child.kind !== 'branch')
+        const plan = awaitPlan(node)
         const id = nextVar('$aid')
         let code = `const ${id} = $ctx.next++;\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
-        code += branchContent(pending, target)
+        code += branchContent(plan.pending, target)
         code += `${target}.push("<!--/abide:await:" + ${id} + "-->");\n`
         const settled = (binding: string, children: TemplateNode[]) =>
-            `async (${binding}) => { const $o = []; ${branchContent(children, '$o')}${branchContent(finallyChildren, '$o')}return $o.join(''); }`
-        const catchProp =
-            catchBranch === undefined && finallyChildren.length === 0
-                ? ''
-                : `catch: ${settled(catchBranch?.as ?? '_error', catchBranch?.children ?? [])} `
+            `async (${binding}) => { const $o = []; ${branchContent(children, '$o')}${branchContent(plan.finallyChildren, '$o')}return $o.join(''); }`
+        const catchProp = plan.surfaceRejection
+            ? ''
+            : `catch: ${settled(plan.catchAs, plan.catchChildren)} `
         code +=
             `$awaits.push({ id: ${id}, ` +
             `promise: () => (${lowerExpression(node.promise)}), ` +
-            `then: ${settled(thenBranch?.as ?? '_value', thenBranch?.children ?? [])}, ` +
+            `then: ${settled(plan.resolvedAs, plan.resolvedChildren)}, ` +
             `${catchProp}});\n`
         return code
     }
@@ -536,24 +569,21 @@ 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, finallyBranch] = resolveBranches(node, 'catch', 'finally')
-        const finallyChildren = finallyBranch?.children ?? []
-        const guarded = node.children.filter((child) => child.kind !== 'branch')
-        const errName = catchBranch?.as ?? '_error'
+        const plan = tryPlan(node)
         const id = nextVar('$tid')
         const mark = nextVar('$trim')
         let code = `const ${id} = $ctx.next++;\n`
         code += `${target}.push("<!--abide:try:" + ${id} + "-->");\n`
         code += `const ${mark} = ${target}.length;\n`
         code += `try {\n`
-        code += branchContent(guarded, target)
-        code += branchContent(finallyChildren, target)
-        code += `} catch (${errName}) {\n${target}.length = ${mark};\n`
-        if (catchBranch !== undefined) {
-            code += branchContent(catchBranch.children, target)
-            code += branchContent(finallyChildren, target)
+        code += branchContent(plan.guarded, target)
+        code += branchContent(plan.finallyChildren, target)
+        code += `} catch (${plan.catchAs}) {\n${target}.length = ${mark};\n`
+        if (plan.hasCatch) {
+            code += branchContent(plan.catchChildren, target)
+            code += branchContent(plan.finallyChildren, target)
         } else {
-            code += `throw ${errName};\n`
+            code += `throw ${plan.catchAs};\n`
         }
         code += `}\n`
         code += `${target}.push("<!--/abide:try:" + ${id} + "-->");\n`

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

@@ -0,0 +1,30 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+type Case = Extract<TemplateNode, { kind: 'case' }>
+
+/* The structural shape of an `if` chain, resolved once so the build and SSR back-ends share
+   one partition of its children and only own emission. Both previously recomputed the
+   then-content / branch split and the elseif/else classification. */
+export type IfPlan = {
+    /* The `then` content — every child that is not an `elseif`/`else` branch. */
+    thenChildren: TemplateNode[]
+    /* The `elseif`/`else` branches in source order (each a `case` node: `condition` set for
+       `elseif`, both unset for `else`). */
+    branches: Case[]
+    /* Any branch carries a condition → a cond-chain (the build lowers it through `switchBlock`);
+       otherwise a binary `if`/`else`. */
+    hasElseif: boolean
+    /* The match-less `else` branch, if present. */
+    elseBranch: Case | undefined
+}
+
+/* Partitions an `if` node's children into the shared structural plan. */
+export function ifPlan(node: Extract<TemplateNode, { kind: 'if' }>): IfPlan {
+    const branches = node.children.filter((child): child is Case => child.kind === 'case')
+    return {
+        thenChildren: node.children.filter((child) => child.kind !== 'case'),
+        branches,
+        hasElseif: branches.some((branch) => branch.condition !== undefined),
+        elseBranch: branches.find((branch) => branch.condition === undefined),
+    }
+}

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

@@ -0,0 +1,10 @@
+/*
+Compile-time generator of unique temp var names: each call appends a fresh
+incrementing suffix to `prefix` (`row` → `row0`, `row1`, …). Shared by the
+generateSSR / generateBuild codegen passes so the two hand-mirrored traversals
+allocate names one way. Runtime block ids stay separate (`$ctx.next++`).
+*/
+export function makeVarNamer(): (prefix: string) => string {
+    let counter = 0
+    return (prefix: string): string => `${prefix}${counter++}`
+}

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

@@ -0,0 +1,9 @@
+/* An absolute offset → LSP `{ line, character }` (0-based, UTF-16 code units). */
+export function offsetToPosition(
+    text: string,
+    offset: number,
+): { line: number; character: number } {
+    const before = text.slice(0, offset)
+    const line = before.split('\n').length - 1
+    return { line, character: offset - (before.lastIndexOf('\n') + 1) }
+}