@abide/abide 0.41.1 → 0.43.0

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

@@ -90,11 +90,323 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         return { kind: 'style', css }
     }
 
+    /* True when the cursor sits on a block-directive open `{#`. A `{:`/`{/` is only
+       valid INSIDE a block (consumed by readBlockChildren), so at top level it would be
+       a stray-branch error — handled where blocks are read, not here. */
+    function atBlock(): boolean {
+        return source.charAt(cursor) === '{' && source.charAt(cursor + 1) === '#'
+    }
+
+    /* Reads a `{#…}` / `{:…}` / `{/…}` token starting on `{`. Tracks string literals
+       and nested braces (same scan as readBracedExpression) so a brace/quote inside an
+       expression (`{#if obj.has('}')}`) doesn't end the token early. Returns the sigil,
+       the trimmed directive body WITHOUT the sigil, and the absolute loc of the body's
+       first post-trim char. */
+    function readBlockToken(): { sigil: '#' | ':' | '/'; body: string; loc: number } {
+        const sigil = source.charAt(cursor + 1) as '#' | ':' | '/'
+        cursor += 2 // past `{` and the sigil
+        const start = cursor
+        let depth = 1
+        while (cursor < source.length && depth > 0) {
+            const char = source.charAt(cursor)
+            if (char === '"' || char === "'" || char === '`') {
+                cursor += 1
+                while (cursor < source.length && source.charAt(cursor) !== char) {
+                    if (source.charAt(cursor) === '\\') {
+                        cursor += 1
+                    }
+                    cursor += 1
+                }
+            } else if (char === '{') {
+                depth += 1
+            } else if (char === '}') {
+                depth -= 1
+            }
+            cursor += 1
+        }
+        const raw = source.slice(start, cursor - 1)
+        const leading = raw.length - raw.trimStart().length
+        return { sigil, body: raw.trim(), loc: baseOffset + start + leading }
+    }
+
+    /* The leading keyword of a directive body (`if`, `for`, `await`, `switch`, `try`,
+       `else`, `then`, `catch`, `finally`, `case`, `default`). */
+    function headKeyword(body: string): string {
+        const match = body.match(/^\s*(\S+)/)
+        return match?.[1] ?? ''
+    }
+
+    /* Reads a `{#…}` control block: the open token, its children up to a continuation
+       `{:…}` (a branch) or close `{/…}`, recursing. Emits the same nodes toControlFlow
+       does today (if/each/await/switch/try + case/branch children). */
+    function readBlock(): TemplateNode {
+        const open = readBlockToken() // sigil is '#'
+        const keyword = headKeyword(open.body)
+        if (keyword === 'if') {
+            const start = open.body.indexOf('if') + 2
+            const condition = open.body.slice(start).trim()
+            if (condition === '') {
+                throw new Error('[abide] {#if} requires a condition expression')
+            }
+            const children = readBlockChildren('if')
+            return { kind: 'if', condition, children, loc: exprLoc(open.loc, open.body, start) }
+        }
+        if (keyword === 'for') {
+            const head = parseForHead(open.body, open.loc)
+            const children = readBlockChildren('for')
+            return {
+                kind: 'each',
+                items: head.items,
+                as: head.as,
+                index: head.index,
+                key: head.key,
+                async: head.async,
+                children,
+                loc: head.loc,
+                asLoc: head.asLoc,
+                keyLoc: head.keyLoc,
+                indexLoc: head.indexLoc,
+            }
+        }
+        if (keyword === 'await') {
+            const start = open.body.indexOf('await') + 5
+            const afterAwait = open.body.slice(start)
+            const thenAt = keywordAtDepthZero(afterAwait, 'then')
+            const promise = (thenAt === -1 ? afterAwait : afterAwait.slice(0, thenAt)).trim()
+            if (promise === '') {
+                throw new Error('[abide] {#await} requires a promise expression')
+            }
+            const as =
+                thenAt === -1
+                    ? undefined
+                    : afterAwait.slice(thenAt + 'then'.length).trim() || undefined
+            const children = readBlockChildren('await')
+            return {
+                kind: 'await',
+                promise,
+                blocking: thenAt !== -1,
+                as,
+                children,
+                loc: exprLoc(open.loc, open.body, start),
+                asLoc:
+                    as === undefined
+                        ? undefined
+                        : exprLoc(open.loc, open.body, start + thenAt + 'then'.length),
+            }
+        }
+        if (keyword === 'switch') {
+            const start = open.body.indexOf('switch') + 6
+            const subject = open.body.slice(start).trim()
+            if (subject === '') {
+                throw new Error('[abide] {#switch} requires a subject expression')
+            }
+            const children = readBlockChildren('switch')
+            return { kind: 'switch', subject, children, loc: exprLoc(open.loc, open.body, start) }
+        }
+        if (keyword === 'try') {
+            const children = readBlockChildren('try')
+            return { kind: 'try', children }
+        }
+        throw new Error(
+            `[abide] unknown control block {#${keyword}} — expected if/for/await/switch/try`,
+        )
+    }
+
+    /* Shared scan body for block/branch child loops. Reads one node at the current
+       cursor position and pushes it onto `nodes`. Returns false when the caller's
+       terminator fires (caller decides what to do next); returns true while scanning
+       continues. `onBranch` fires when `{:` is seen — block-children consume it as a
+       new branch node; branch-children let the caller exit instead. */
+    function scanNode(nodes: TemplateNode[], onBranch: (() => boolean) | undefined): boolean {
+        /* Branch/close tokens — delegate to the caller's terminator logic. */
+        if (source.startsWith('{/', cursor)) {
+            return false
+        }
+        if (source.startsWith('{:', cursor)) {
+            return onBranch === undefined ? false : onBranch()
+        }
+        if (atBlock()) {
+            nodes.push(readBlock())
+        } else if (source.startsWith('<!--', cursor)) {
+            skipComment()
+        } else if (atStyleTag()) {
+            nodes.push(readStyle())
+        } else if (source.charAt(cursor) === '<') {
+            nodes.push(readElement())
+        } else {
+            nodes.push(readText())
+        }
+        return true
+    }
+
+    /* Reads children of a block until its close `{/<keyword>}`. A continuation token
+       `{:…}` ends the current branch's children and starts a new `case`/`branch` node
+       (per construct). The leading children (before the first `{:…}`) are the block's
+       own children (the `if`/`await`/`try` then-content). Returns the full children list
+       INCLUDING the case/branch nodes, matching toControlFlow's output. */
+    function readBlockChildren(keyword: string): TemplateNode[] {
+        const nodes: TemplateNode[] = []
+        while (cursor < source.length) {
+            const keepGoing = scanNode(nodes, () => {
+                nodes.push(readBranch(keyword))
+                return true
+            })
+            if (!keepGoing) {
+                const close = readBlockToken() // consume the close `{/keyword}`
+                const closeKeyword = headKeyword(close.body)
+                /* The close must name its open block — a mismatch (`{#if}…{/for}`) or
+                   crossed nesting (`{#if}{#for}…{/if}{/for}`) would otherwise silently
+                   mis-parse into a structurally wrong tree. */
+                if (closeKeyword !== keyword) {
+                    throw new Error(
+                        `[abide] {/${closeKeyword}} does not close the open {#${keyword}} — expected {/${keyword}}`,
+                    )
+                }
+                return nodes
+            }
+        }
+        throw new Error(`[abide] unterminated {#${keyword}} block — missing {/${keyword}}`)
+    }
+
+    /* Reads a continuation token `{:…}` and the children up to the NEXT continuation or
+       close, returning the branch node for the parent construct. Handles `if`-chain
+       branches (else / else if) and `for await` catch branches. */
+    function readBranch(parentKeyword: string): TemplateNode {
+        const token = readBlockToken() // sigil ':'
+        const keyword = headKeyword(token.body)
+        const branchChildren = readBranchChildren()
+        if (parentKeyword === 'if') {
+            if (keyword === 'else' && headKeyword(token.body.slice(4).trim()) === 'if') {
+                const start = token.body.indexOf('if') + 2
+                const condition = token.body.slice(start).trim()
+                if (condition === '') {
+                    throw new Error('[abide] {:else if} requires a condition expression')
+                }
+                return {
+                    kind: 'case',
+                    match: undefined,
+                    condition,
+                    children: branchChildren,
+                    loc: exprLoc(token.loc, token.body, start),
+                }
+            }
+            if (keyword === 'else') {
+                return { kind: 'case', match: undefined, children: branchChildren }
+            }
+        }
+        if (parentKeyword === 'for' && keyword === 'catch') {
+            const as = token.body.slice(token.body.indexOf('catch') + 5).trim() || undefined
+            return {
+                kind: 'branch',
+                branch: 'catch',
+                as,
+                children: branchChildren,
+                asLoc:
+                    as === undefined
+                        ? undefined
+                        : exprLoc(token.loc, token.body, token.body.indexOf('catch') + 5),
+            }
+        }
+        if (parentKeyword === 'switch') {
+            if (keyword === 'case') {
+                const start = token.body.indexOf('case') + 4
+                const match = token.body.slice(start).trim()
+                if (match === '') {
+                    throw new Error('[abide] {:case} requires a value expression')
+                }
+                return {
+                    kind: 'case',
+                    match,
+                    children: branchChildren,
+                    loc: exprLoc(token.loc, token.body, start),
+                }
+            }
+            if (keyword === 'default') {
+                return { kind: 'case', match: undefined, children: branchChildren }
+            }
+        }
+        if (parentKeyword === 'await') {
+            if (keyword === 'then') {
+                const as = token.body.slice(token.body.indexOf('then') + 4).trim() || undefined
+                return {
+                    kind: 'branch',
+                    branch: 'then',
+                    as,
+                    children: branchChildren,
+                    asLoc:
+                        as === undefined
+                            ? undefined
+                            : exprLoc(token.loc, token.body, token.body.indexOf('then') + 4),
+                }
+            }
+            if (keyword === 'catch') {
+                const as = token.body.slice(token.body.indexOf('catch') + 5).trim() || undefined
+                return {
+                    kind: 'branch',
+                    branch: 'catch',
+                    as,
+                    children: branchChildren,
+                    asLoc:
+                        as === undefined
+                            ? undefined
+                            : exprLoc(token.loc, token.body, token.body.indexOf('catch') + 5),
+                }
+            }
+            if (keyword === 'finally') {
+                return {
+                    kind: 'branch',
+                    branch: 'finally',
+                    as: undefined,
+                    children: branchChildren,
+                }
+            }
+        }
+        if (parentKeyword === 'try') {
+            if (keyword === 'catch') {
+                const as = token.body.slice(token.body.indexOf('catch') + 5).trim() || undefined
+                return {
+                    kind: 'branch',
+                    branch: 'catch',
+                    as,
+                    children: branchChildren,
+                    asLoc:
+                        as === undefined
+                            ? undefined
+                            : exprLoc(token.loc, token.body, token.body.indexOf('catch') + 5),
+                }
+            }
+            if (keyword === 'finally') {
+                return {
+                    kind: 'branch',
+                    branch: 'finally',
+                    as: undefined,
+                    children: branchChildren,
+                }
+            }
+        }
+        throw new Error(`[abide] {:${keyword}} is not valid inside {#${parentKeyword}}`)
+    }
+
+    /* Children of a branch: read until the next `{:…}` or `{/…}` WITHOUT consuming it
+       (the caller's readBlockChildren loop handles those). */
+    function readBranchChildren(): TemplateNode[] {
+        const nodes: TemplateNode[] = []
+        /* Pass undefined for onBranch so scanNode returns false on `{:`, leaving it unconsumed. */
+        while (cursor < source.length && scanNode(nodes, undefined)) {
+            // continue
+        }
+        return nodes
+    }
+
     function readText(): TemplateNode {
         const parts: TextPart[] = []
         let literal = ''
         while (cursor < source.length && source.charAt(cursor) !== '<') {
             if (source.charAt(cursor) === '{') {
+                const next = source.charAt(cursor + 1)
+                if (next === '#' || next === ':' || next === '/') {
+                    break // a block/continuation/close token — not interpolation
+                }
                 if (literal !== '') {
                     parts.push({ kind: 'static', value: decodeHtmlEntities(literal) })
                     literal = ''
@@ -141,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
@@ -149,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 '='
@@ -162,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)
@@ -176,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. */
@@ -200,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
@@ -237,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. */
@@ -246,11 +570,23 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         }
         const children = selfClosing || VOID_TAGS.has(tag) ? [] : readChildren(tag)
         if (tag === 'template') {
-            return toControlFlow(attrs, children)
+            return toSnippetOrTemplate(attrs, children)
         }
         return { kind: 'element', tag, attrs, children }
     }
 
+    /* A `{:…}`/`{/…}` reached OUTSIDE a block (the root scan or an element's children —
+       not readBlockChildren/readBranchChildren, which consume their own) is a continuation
+       or close with no open `{#…}`. Surface it as an error: readText breaks on `{:`/`{/`
+       without advancing, so falling through would loop forever. */
+    function throwIfStrayBranch(): void {
+        if (source.startsWith('{:', cursor) || source.startsWith('{/', cursor)) {
+            const end = source.indexOf('}', cursor)
+            const token = source.slice(cursor, end === -1 ? source.length : end + 1)
+            throw new Error(`[abide] ${token} has no open {#…} block`)
+        }
+    }
+
     function readChildren(closeTag: string): TemplateNode[] {
         const nodes: TemplateNode[] = []
         while (cursor < source.length) {
@@ -258,10 +594,13 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 cursor = source.indexOf('>', cursor) + 1
                 break
             }
+            throwIfStrayBranch()
             if (source.startsWith('<!--', cursor)) {
                 skipComment()
             } else if (atStyleTag()) {
                 nodes.push(readStyle())
+            } else if (atBlock()) {
+                nodes.push(readBlock())
             } else if (source.charAt(cursor) === '<') {
                 nodes.push(readElement())
             } else {
@@ -273,10 +612,13 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
 
     const roots: TemplateNode[] = []
     while (cursor < source.length) {
+        throwIfStrayBranch()
         if (source.startsWith('<!--', cursor)) {
             skipComment()
         } else if (atStyleTag()) {
             roots.push(readStyle())
+        } else if (atBlock()) {
+            roots.push(readBlock())
         } else if (source.charAt(cursor) === '<') {
             roots.push(readElement())
         } else {
@@ -287,6 +629,165 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
     return { nodes: roots }
 }
 
+/* Finds the index of a ` <token> ` keyword (` of `, ` by `) at brace/paren/bracket
+   depth 0, scanning left to right, skipping string literals. Returns -1 if absent. */
+function indexOfKeywordAtDepthZero(text: string, keyword: string): number {
+    let depth = 0
+    let i = 0
+    while (i < text.length) {
+        const char = text.charAt(i)
+        if (char === '"' || char === "'" || char === '`') {
+            i += 1
+            while (i < text.length && text.charAt(i) !== char) {
+                if (text.charAt(i) === '\\') {
+                    i += 1
+                }
+                i += 1
+            }
+        } else if (char === '{' || char === '(' || char === '[') {
+            depth += 1
+        } else if (char === '}' || char === ')' || char === ']') {
+            depth -= 1
+        } else if (depth === 0 && text.startsWith(keyword, i)) {
+            return i
+        }
+        i += 1
+    }
+    return -1
+}
+
+/* Index of a bare keyword (`then`) at brace/paren/bracket depth 0, requiring whitespace
+   on both sides — so it isn't matched inside an identifier (`q.then(x)`) and MAY sit
+   terminally. Unlike ` of `/` by `, an await `then` can end the head: `{#await p then}`
+   is a blocking await with no value binding, which a trailing-space match would miss
+   (folding `then` into the promise). Skips string literals. -1 if absent. */
+function keywordAtDepthZero(text: string, word: string): number {
+    let depth = 0
+    let i = 0
+    while (i < text.length) {
+        const char = text.charAt(i)
+        if (char === '"' || char === "'" || char === '`') {
+            i += 1
+            while (i < text.length && text.charAt(i) !== char) {
+                if (text.charAt(i) === '\\') {
+                    i += 1
+                }
+                i += 1
+            }
+        } else if (char === '{' || char === '(' || char === '[') {
+            depth += 1
+        } else if (char === '}' || char === ')' || char === ']') {
+            depth -= 1
+        } else if (
+            depth === 0 &&
+            text.startsWith(word, i) &&
+            i > 0 &&
+            /\s/.test(text.charAt(i - 1)) &&
+            (i + word.length === text.length || /\s/.test(text.charAt(i + word.length)))
+        ) {
+            return i
+        }
+        i += 1
+    }
+    return -1
+}
+
+/* The depth-0 comma index in a binding (`{id, title}, i` → the comma after `}`),
+   so a destructuring pattern's inner commas don't split the binding from its index. */
+function bindingCommaAtDepthZero(text: string): number {
+    let depth = 0
+    let i = 0
+    while (i < text.length) {
+        const char = text.charAt(i)
+        if (char === '{' || char === '(' || char === '[') {
+            depth += 1
+        } else if (char === '}' || char === ')' || char === ']') {
+            depth -= 1
+        } else if (char === ',' && depth === 0) {
+            return i
+        }
+        i += 1
+    }
+    return -1
+}
+
+/* Absolute source offset of the trimmed expression beginning at `start` within a
+   directive `body` whose first char is at absolute `bodyLoc` — skips the leading
+   whitespace `.trim()` drops so the offset points at the expression's first real char
+   (the shadow source-map invariant: source text at `loc` equals the emitted code). */
+function exprLoc(bodyLoc: number, body: string, start: number): number {
+    const raw = body.slice(start)
+    return bodyLoc + start + (raw.length - raw.trimStart().length)
+}
+
+/* Parses `for [await] <binding>[, <index>] of <iterable> [by <key>]`. Offsets are
+   tracked against the original `body` (not trimmed slices) so `loc` points at the
+   iterable expression's first char — `bodyLoc` is the absolute offset of `body[0]`. */
+function parseForHead(
+    body: string,
+    bodyLoc: number,
+): {
+    items: string
+    as: string
+    index: string | undefined
+    key: string | undefined
+    async: boolean
+    loc: number
+    asLoc: number | undefined
+    keyLoc: number | undefined
+    indexLoc: number | undefined
+} {
+    const leadingSpace = (text: string): number => text.length - text.trimStart().length
+    const skipSpace = (i: number): number => {
+        let at = i
+        while (at < body.length && /\s/.test(body.charAt(at))) {
+            at += 1
+        }
+        return at
+    }
+    let bindingStart = skipSpace(body.indexOf('for') + 3)
+    const isAsync = /^await\b/.test(body.slice(bindingStart))
+    if (isAsync) {
+        bindingStart = skipSpace(bindingStart + 'await'.length)
+    }
+    const region = body.slice(bindingStart)
+    const ofAt = indexOfKeywordAtDepthZero(region, ' of ')
+    if (ofAt === -1) {
+        throw new Error('[abide] {#for} requires `<binding> of <iterable>`')
+    }
+    const left = region.slice(0, ofAt).trim()
+    const itemsStart = skipSpace(bindingStart + ofAt + ' of '.length)
+    let itemsRegion = body.slice(itemsStart)
+    const byAt = indexOfKeywordAtDepthZero(itemsRegion, ' by ')
+    const keyRaw = byAt === -1 ? '' : itemsRegion.slice(byAt + ' by '.length)
+    const key = byAt === -1 ? undefined : keyRaw.trim()
+    const keyLoc =
+        byAt === -1 ? undefined : bodyLoc + itemsStart + byAt + ' by '.length + leadingSpace(keyRaw)
+    if (byAt !== -1) {
+        itemsRegion = itemsRegion.slice(0, byAt)
+    }
+    const commaAt = bindingCommaAtDepthZero(left)
+    const as = (commaAt === -1 ? left : left.slice(0, commaAt)).trim()
+    const indexRaw = commaAt === -1 ? '' : left.slice(commaAt + 1)
+    const index = commaAt === -1 ? undefined : indexRaw.trim()
+    /* `left` is trimmed and starts at `bindingStart` (skipSpace'd), so the binding
+       name begins exactly there; the index sits past the comma. */
+    return {
+        items: itemsRegion.trim(),
+        as: as === '' ? '_item' : as,
+        index,
+        key,
+        async: isAsync,
+        loc: bodyLoc + itemsStart,
+        asLoc: as === '' ? undefined : bodyLoc + bindingStart,
+        keyLoc,
+        indexLoc:
+            commaAt === -1
+                ? undefined
+                : bodyLoc + bindingStart + commaAt + 1 + leadingSpace(indexRaw),
+    }
+}
+
 /* A `case` node (`<template else>`/`<template case>`/`<template default>`) is valid
    only as a direct child of its `<template if>`/`<template switch>`; a `branch`
    (`then`/`catch`/`finally`) only inside its `<template await>`/`<template try>`.
@@ -385,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. */
@@ -396,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 }
     })
 }
 
@@ -441,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
@@ -452,10 +971,39 @@ function attrName(attr: TemplateAttr): string {
 }
 
 /* Turns a `<template>` directive into a control node (if/each/await + then/catch). */
-function toControlFlow(attrs: TemplateAttr[], children: TemplateNode[]): TemplateNode {
+/* The control-flow attribute names that used to drive `<template>` directives — now
+   moved to `{#…}` blocks. A `<template>` carrying one is a migration error. */
+const CONTROL_DIRECTIVES = new Set([
+    'if',
+    'elseif',
+    'else',
+    'each',
+    'await',
+    'then',
+    'catch',
+    'finally',
+    'switch',
+    'case',
+    'default',
+    'try',
+])
+
+/* A `<template>` is now ONLY a snippet declaration (`name`) or a plain inert
+   `<template>` element. Control flow moved to `{#…}` blocks; a directive attribute
+   (`if`/`each`/`await`/…) is a migration error pointing at the block form. `name`
+   makes the element callable; without it, it stays an inert reusable fragment. */
+function toSnippetOrTemplate(attrs: TemplateAttr[], children: TemplateNode[]): TemplateNode {
     const find = (name: string) => attrs.find((attr) => attrName(attr) === name)
-    /* `<template name="row" args={item}>` declares a snippet — a named builder, not
-       a control branch. `args` (its parameter list) rides the `{…}` expression slot. */
+    const directive = attrs.find((attr) => CONTROL_DIRECTIVES.has(attrName(attr)))
+    if (directive !== undefined) {
+        const name = attrName(directive)
+        const block = name === 'elseif' || name === 'else' ? 'if' : name
+        throw new Error(
+            `[abide] <template ${name}> control flow was removed — use the {#${block}…} block instead`,
+        )
+    }
+    /* `<template name="row" args={item}>` declares a snippet — a named builder. `args`
+       (its parameter list) rides the `{…}` expression slot. */
     const snippet = find('name')
     if (snippet !== undefined) {
         const name = attrText(snippet)
@@ -471,104 +1019,6 @@ function toControlFlow(attrs: TemplateAttr[], children: TemplateNode[]): Templat
             loc: attrLoc(params),
         }
     }
-    /* `<template try>` is a synchronous error boundary: its children are the guarded
-       subtree; `catch`/`finally` branches handle a throw while building them. */
-    if (find('try') !== undefined) {
-        return { kind: 'try', children }
-    }
-    /* `await` alongside `each` is the async-list switch (handled in the each branch
-       below), not an await block. */
-    const promise = find('await')
-    if (promise !== undefined && find('each') === undefined) {
-        const promiseCode = attrText(promise)
-        if (promiseCode === undefined) {
-            throw new Error('[abide] <template await> requires a promise expression')
-        }
-        /* A `then` attribute ON the await tag is the blocking switch: children become
-           the resolved content bound to its value (a `then` *child* is a streaming
-           branch, handled separately below when its own tag is parsed). */
-        const boundThen = find('then')
-        return {
-            kind: 'await',
-            promise: promiseCode,
-            blocking: boundThen !== undefined,
-            as: boundThen === undefined ? undefined : attrText(boundThen) || undefined,
-            children,
-            loc: attrLoc(promise),
-        }
-    }
-    const thenAttr = find('then')
-    if (thenAttr !== undefined) {
-        return { kind: 'branch', branch: 'then', as: attrText(thenAttr) || undefined, children }
-    }
-    const catchAttr = find('catch')
-    if (catchAttr !== undefined) {
-        return { kind: 'branch', branch: 'catch', as: attrText(catchAttr) || undefined, children }
-    }
-    /* `<template finally>` renders after settle on BOTH outcomes — outcome-agnostic,
-       so it binds no value. */
-    if (find('finally') !== undefined) {
-        return { kind: 'branch', branch: 'finally', as: undefined, children }
-    }
-    const subject = find('switch')
-    if (subject !== undefined) {
-        const subjectCode = attrText(subject)
-        if (subjectCode === undefined) {
-            throw new Error('[abide] <template switch> requires a subject expression')
-        }
-        return { kind: 'switch', subject: subjectCode, children, loc: attrLoc(subject) }
-    }
-    const caseAttr = find('case')
-    if (caseAttr !== undefined) {
-        const matchCode = attrText(caseAttr)
-        if (matchCode === undefined) {
-            throw new Error('[abide] <template case> requires a value expression')
-        }
-        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)
-    }
-    const condition = find('if')
-    if (condition !== undefined) {
-        const conditionCode = attrText(condition)
-        if (conditionCode === undefined) {
-            throw new Error('[abide] <template if> requires a condition expression')
-        }
-        return { kind: 'if', condition: conditionCode, children, loc: attrLoc(condition) }
-    }
-    const items = find('each')
-    const itemsCode = items === undefined ? undefined : attrText(items)
-    if (itemsCode === undefined) {
-        throw new Error('[abide] <template> without a supported directive (if/each)')
-    }
-    const as = find('as')
-    const key = find('key')
-    const index = find('index')
-    return {
-        kind: 'each',
-        items: itemsCode,
-        as: (as === undefined ? undefined : attrText(as)) ?? '_item',
-        key: key === undefined ? undefined : attrText(key),
-        index: index === undefined ? undefined : attrText(index),
-        async: find('await') !== undefined, // `<template each await>` over an AsyncIterable
-        children,
-        loc: attrLoc(items),
-    }
+    /* A plain inert `<template>` element (e.g. client-side cloning) — keep as an element. */
+    return { kind: 'element', tag: 'template', attrs, children }
 }