@abide/abide 0.42.0 → 0.43.1

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

@@ -4,20 +4,56 @@ import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 const factory = ts.factory
 
 /* The reactive primitives that must be reached through a scope. A bare call to one of
-   these is a compile error: reactive state is owned by a scope and the surface must show
-   it (`scope().state(...)`), so a reader always sees the scope interaction. */
-const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed'])
+   these is a compile error: a reactive primitive is owned by a scope and the surface must
+   show it (`scope().state(...)`), so a reader always sees the scope interaction. `effect`
+   is here too — a reaction is scope-owned (it tears down with the scope), so it joins the
+   one surface; unlike the cells it stays a runtime call (`scope().effect(...)` passes
+   through to the `effect` helper), not a doc slot. */
+const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed', 'effect'])
+
+/* The primitive names a top-level `const { state, computed } = scope()` destructure binds.
+   Such a name is scope-bound — its bare call below is the destructured method, not a stray
+   global — so it is exempt from the bare-primitive error. Only a destructure of a `scope()`
+   call counts (receiver-agnostic on the callee name, matching signalCallee); an aliased
+   binding (`{ state: s }`) is not recognised, so the canonical name must be kept. */
+function scopeDestructuredPrimitives(source: ts.SourceFile): Set<string> {
+    const bound = new Set<string>()
+    for (const statement of source.statements) {
+        if (!ts.isVariableStatement(statement)) {
+            continue
+        }
+        for (const declaration of statement.declarationList.declarations) {
+            if (
+                signalCallee(declaration) === 'scope' &&
+                ts.isObjectBindingPattern(declaration.name)
+            ) {
+                for (const element of declaration.name.elements) {
+                    if (
+                        element.propertyName === undefined &&
+                        ts.isIdentifier(element.name) &&
+                        SCOPE_PRIMITIVES.has(element.name.text)
+                    ) {
+                        bound.add(element.name.text)
+                    }
+                }
+            }
+        }
+    }
+    return bound
+}
 
 /* Throws on a bare scope primitive (`state(0)` instead of `scope().state(0)`) or on the
    removed `prop(...)` reader — props are now read by destructuring `props()`. Walks all
-   calls, so a stray one nested in a function is caught too, not just top-level declarations. */
+   calls, so a stray one nested in a function is caught too, not just top-level declarations.
+   A primitive destructured from `scope()` at the top is scope-bound and exempt. */
 function assertScopedPrimitives(source: ts.SourceFile): void {
+    const scopeBound = scopeDestructuredPrimitives(source)
     const visit = (node: ts.Node): void => {
         if (ts.isCallExpression(node) && ts.isIdentifier(node.expression)) {
             const name = node.expression.text
-            if (SCOPE_PRIMITIVES.has(name)) {
+            if (SCOPE_PRIMITIVES.has(name) && !scopeBound.has(name)) {
                 throw new Error(
-                    `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
+                    `abide: bare \`${name}(...)\` is not allowed — a reactive primitive lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
                 )
             }
             if (name === 'prop') {

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

@@ -3,10 +3,12 @@ import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { ANCHOR } from '../runtime/RANGE_MARKER.ts'
 import { asOutlet } from './asOutlet.ts'
+import { awaitPlan } from './awaitPlan.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
 import { composeProps } from './composeProps.ts'
 import { destructureBindingNames } from './destructureBindingNames.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { ifPlan } from './ifPlan.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { isWhitespaceText } from './isWhitespaceText.ts'
 import { lowerContext } from './lowerContext.ts'
@@ -17,6 +19,8 @@ import { skeletonContext } from './skeletonContext.ts'
 import { spreadExcludedNames } from './spreadExcludedNames.ts'
 import { staticAttr } from './staticAttr.ts'
 import { staticTextPart } from './staticTextPart.ts'
+import { switchPlan } from './switchPlan.ts'
+import { tryPlan } from './tryPlan.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
@@ -143,7 +147,7 @@ export function generateBuild(
         node: Extract<TemplateNode, { kind: 'element' }>,
         attr: Extract<
             (typeof node.attrs)[number],
-            { kind: 'expression' | 'event' | 'attach' | 'bind' }
+            { kind: 'expression' | 'event' | 'attach' | 'bind' | 'class' | 'style' }
         >,
         varName: string,
     ): string {
@@ -156,6 +160,15 @@ export function generateBuild(
         if (attr.kind === 'attach') {
             return `attach(${varName}, (${lowerExpression(attr.code)}));\n`
         }
+        /* `class:<name>` — toggle the class by truthiness; surgical, no element re-render.
+           Layers on top of any static `class="…"` in the skeleton (classList is additive). */
+        if (attr.kind === 'class') {
+            return `effect(${namedThunk(`class_${attr.name}`, `${varName}.classList.toggle(${JSON.stringify(attr.name)}, !!(${lowerExpression(attr.code)}));`)});\n`
+        }
+        /* `style:<property>` — write one inline style / custom property reactively. */
+        if (attr.kind === 'style') {
+            return `effect(${namedThunk(`style_${attr.property}`, `${varName}.style.setProperty(${JSON.stringify(attr.property)}, String(${lowerExpression(attr.code)}));`)});\n`
+        }
         if (attr.property === 'group') {
             /* Grouped two-way: radio binds the path to the single checked `value`;
                checkbox treats the path as an array, adding/removing `value` on toggle.
@@ -471,11 +484,8 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const cases = node.children
-            .filter(
-                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
-            )
-            .map((branch) => {
+        const cases = switchPlan(node)
+            .cases.map((branch) => {
                 const match =
                     branch.match === undefined
                         ? 'undefined'
@@ -534,45 +544,26 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        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 plan = awaitPlan(node)
         /* The resolved value is reactive: a re-settle updates it in place rather than
-           rebuilding the branch (see awaitBlock). The branch reads it as a `.value` cell. */
-        const thenThunk = node.blocking
-            ? branchThunk(
-                  node.children.filter((child) => child.kind !== 'branch'),
-                  node.as ?? '_value',
-                  finallyChildren,
-                  true,
-              )
-            : branchThunk(
-                  thenBranch?.children ?? [],
-                  thenBranch?.as ?? '_value',
-                  finallyChildren,
-                  true,
-              )
+           rebuilding the branch (see awaitBlock). The branch reads it as a `.value` cell.
+           Build settles blocking and streaming uniformly through `awaitBlock`, so the plan's
+           resolved content/binding feeds one thunk regardless of mode. */
+        const thenThunk = branchThunk(
+            plan.resolvedChildren,
+            plan.resolvedAs,
+            plan.finallyChildren,
+            true,
+        )
         /* 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. */
-        const catchThunk =
-            catchBranch === undefined && finallyChildren.length === 0
-                ? 'undefined'
-                : branchThunk(
-                      catchBranch?.children ?? [],
-                      catchBranch?.as ?? '_error',
-                      finallyChildren,
-                  )
-        const pendingThunk = hasRenderableContent(pending) ? branchThunk(pending) : 'undefined'
+        const catchThunk = plan.surfaceRejection
+            ? 'undefined'
+            : branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+        const pendingThunk = hasRenderableContent(plan.pending)
+            ? branchThunk(plan.pending)
+            : 'undefined'
         return (
             `awaitBlock(${parentVar}, nextBlockId(), () => (${lowerExpression(node.promise)}), ` +
             `${pendingThunk}, ` +
@@ -638,14 +629,11 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        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(catchBranch.children, catchBranch.as ?? '_error', finallyChildren)
+        const plan = tryPlan(node)
+        const tryThunk = branchThunk(plan.guarded, undefined, plan.finallyChildren)
+        const catchThunk = plan.hasCatch
+            ? branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+            : 'undefined'
         return `tryBlock(${parentVar}, nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
     }
 
@@ -658,25 +646,20 @@ export function generateBuild(
     ): string {
         /* 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 hasElseif = branches.some((branch) => branch.condition !== undefined)
+        const plan = ifPlan(node)
         /* 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)
+        if (!plan.hasElseif) {
+            const thenThunk = branchThunk(plan.thenChildren)
             const elseThunk =
-                elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
+                plan.elseBranch === undefined ? 'undefined' : branchThunk(plan.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) =>
+            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(plan.thenChildren)} }`,
+            ...plan.branches.map((branch) =>
                 branch.condition !== undefined
                     ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
                     : `{ match: undefined, render: ${branchThunk(branch.children)} }`,

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

@@ -8,18 +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 { makeVarNamer } from './makeVarNamer.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 { 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'
 
@@ -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/parseTemplate.ts

@@ -453,6 +453,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 continue
             }
             let name = ''
+            const nameLoc = baseOffset + cursor // absolute offset of the attribute name
             while (cursor < source.length && !/[\s=>/]/.test(source.charAt(cursor))) {
                 name += source.charAt(cursor)
                 cursor += 1
@@ -461,7 +462,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 cursor += 1
             }
             if (source.charAt(cursor) !== '=') {
-                attrs.push({ kind: 'static', name, value: '', bare: true }) // boolean attribute
+                attrs.push({ kind: 'static', name, value: '', bare: true, nameLoc }) // boolean attribute
                 continue
             }
             cursor += 1 // past '='
@@ -474,10 +475,14 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                     attrs.push({ kind: 'event', event: name.slice(2), code, loc })
                 } else if (name.startsWith('bind:')) {
                     attrs.push({ kind: 'bind', property: name.slice(5), code, loc })
+                } else if (name.startsWith('class:')) {
+                    attrs.push({ kind: 'class', name: name.slice(6), code, loc })
+                } else if (name.startsWith('style:')) {
+                    attrs.push({ kind: 'style', property: name.slice(6), code, loc })
                 } else if (name === 'attach') {
                     attrs.push({ kind: 'attach', code, loc })
                 } else {
-                    attrs.push({ kind: 'expression', name, code, loc })
+                    attrs.push({ kind: 'expression', name, code, loc, nameLoc })
                 }
             } else if (source.charAt(cursor) === '"' || source.charAt(cursor) === "'") {
                 const quote = source.charAt(cursor)
@@ -488,7 +493,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                     cursor += 1
                 }
                 cursor += 1 // past closing quote
-                attrs.push({ kind: 'static', name, value })
+                attrs.push({ kind: 'static', name, value, nameLoc })
             } else {
                 /* Unquoted value (`<input type=text>`): runs to the next whitespace or
                    `>`, per the HTML unquoted-attribute rule. No delimiter to consume. */
@@ -512,6 +517,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
     function readElement(): TemplateNode {
         cursor += 1 // past '<'
         let tag = ''
+        const tagStart = cursor // absolute (baseOffset-relative) offset of the tag name
         while (cursor < source.length && !/[\s>/]/.test(source.charAt(cursor))) {
             tag += source.charAt(cursor)
             cursor += 1
@@ -549,7 +555,13 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
            its children become slot content (rendered where the child puts <slot>). */
         if (/^[A-Z]/.test(tag)) {
             const slotted = selfClosing ? [] : readChildren(tag)
-            return { kind: 'component', name: tag, props: toProps(attrs), children: slotted }
+            return {
+                kind: 'component',
+                name: tag,
+                loc: baseOffset + tagStart,
+                props: toProps(attrs),
+                children: slotted,
+            }
         }
         /* `{...expr}` spreads onto a component (its props) or a native element (its
            attributes), but a `<template>` directive has no such bag — reject it there. */
@@ -874,7 +886,7 @@ function rejectMisplacedBranchContent(
    letting a prop hold any value, functions included (e.g. an `onclick` callback). */
 function toProps(
     attrs: TemplateAttr[],
-): { name: string; code: string; loc?: number; spread?: boolean }[] {
+): { name: string; code: string; loc?: number; nameLoc?: number; spread?: boolean }[] {
     return attrs.map((attr) => {
         /* A `{...expr}` spread carries no name — its keys merge in at runtime
            (`mergeProps`/`spreadProps`); `spread: true` marks it for the back-ends. */
@@ -885,19 +897,31 @@ function toProps(
             /* A bare attribute (`<Toggle on />`) is a boolean flag: coerce it to
                `true` so the prop reads as a boolean, not the empty string a native
                element would serialise. An explicit `on=""` stays the empty string. */
-            return { name: attr.name, code: attr.bare ? 'true' : JSON.stringify(attr.value) }
+            return {
+                name: attr.name,
+                code: attr.bare ? 'true' : JSON.stringify(attr.value),
+                nameLoc: attr.nameLoc,
+            }
         }
         /* Every non-static kind keeps its `code`/`loc`; only the prop name differs —
-           a directive (`event`/`bind`/`attach`) round-trips to its written name. */
+           a directive (`event`/`bind`/`class`/`style`/`attach`) round-trips to its written
+           name as a passthrough prop. */
         const name =
             attr.kind === 'event'
                 ? `on${attr.event}`
                 : attr.kind === 'bind'
                   ? `bind:${attr.property}`
-                  : attr.kind === 'attach'
-                    ? 'attach'
-                    : attr.name
-        return { name, code: attr.code, loc: attr.loc }
+                  : attr.kind === 'class'
+                    ? `class:${attr.name}`
+                    : attr.kind === 'style'
+                      ? `style:${attr.property}`
+                      : attr.kind === 'attach'
+                        ? 'attach'
+                        : attr.name
+        /* Only `expression` carries a name offset; event/bind/attach are framework-handled
+           passthrough excluded from the strict prop check, so theirs is unused. */
+        const nameLoc = attr.kind === 'expression' ? attr.nameLoc : undefined
+        return { name, code: attr.code, loc: attr.loc, nameLoc }
     })
 }
 
@@ -930,6 +954,12 @@ function attrName(attr: TemplateAttr): string {
     if (attr.kind === 'attach') {
         return 'attach'
     }
+    if (attr.kind === 'class') {
+        return `class:${attr.name}`
+    }
+    if (attr.kind === 'style') {
+        return `style:${attr.property}`
+    }
     /* A spread has no name. `attrName` only feeds `<template>` directive lookups, and a
        spread on a `<template>` is rejected at parse, so this branch is unreachable in
        practice. (Spread itself IS supported — on components as props and on native