@abide/abide 0.41.0 → 0.42.0

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

@@ -1,5 +1,6 @@
 import { relative } from 'node:path'
 import type { BunPlugin } from 'bun'
+import { fileName } from '../../shared/fileName.ts'
 import { messageFromError } from '../../shared/messageFromError.ts'
 import { AbideCompileError } from './AbideCompileError.ts'
 import { analyzeComponent } from './analyzeComponent.ts'
@@ -42,7 +43,7 @@ export const abideUiPlugin: BunPlugin = {
         build.onLoad({ filter: /\.abide$/ }, async (args) => {
             const source = await Bun.file(args.path).text()
             const moduleId = relative(nearestProjectRoot(args.path, process.cwd()), args.path)
-            const isLayout = (args.path.split('/').pop() ?? '') === 'layout.abide'
+            const isLayout = fileName(args.path) === 'layout.abide'
             /* Bun frames a plugin throw at `<file>:0` regardless of the real spot, so
                carry the component path + resolved line:col in the message — otherwise a
                control-flow / compile error reads as `:0` and (in deep imports) can look

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

@@ -91,6 +91,10 @@ export function compileShadow(source: string): CompiledShadow {
    pre-assembled scope line carrying its own embedded segments. */
 type Builder = {
     raw: (text: string) => void
+    /* Appends `text` verbatim and maps it back to source, WITHOUT the `expr`
+       parens — for binding names and other spans that must stay bare TS syntax
+       (`for (const NAME of …)`). `text` must equal the source at `sourceLoc`. */
+    mapped: (text: string, sourceLoc: number | undefined) => void
     expr: (code: string, sourceLoc: number | undefined) => void
     stmt: (code: string, sourceLoc: number | undefined) => void
     flush: (line: ScopeLine) => void
@@ -115,6 +119,16 @@ function createBuilder(): Builder {
         raw(text) {
             code += text
         },
+        mapped(text, sourceLoc) {
+            if (sourceLoc !== undefined) {
+                mappings.push({
+                    shadowStart: code.length,
+                    sourceStart: sourceLoc,
+                    length: text.length,
+                })
+            }
+            code += text
+        },
         expr(exprCode, sourceLoc) {
             code += '('
             if (sourceLoc !== undefined) {
@@ -408,14 +422,24 @@ function emitNode(node: TemplateNode, builder: Builder): void {
         }
         case 'each':
             /* `for await` over an async each's AsyncIterable, plain `for…of` otherwise —
-               so the item binds to the element type under either iteration protocol. */
-            builder.raw(
-                node.async ? `for await (const ${node.as} of ` : `for (const ${node.as} of `,
-            )
+               so the item binds to the element type under either iteration protocol. The
+               binding name is `mapped` (not `raw`) so hover/highlighting land on it. */
+            builder.raw(node.async ? 'for await (const ' : 'for (const ')
+            builder.mapped(node.as, node.asLoc)
+            builder.raw(' of ')
             builder.expr(node.items, node.loc)
             builder.raw(') {\n')
             if (node.key !== undefined) {
-                builder.raw(`void (${node.key});\n`)
+                builder.raw('void ')
+                builder.expr(node.key, node.keyLoc)
+                builder.raw(';\n')
+            }
+            /* `index="i"` binds the row's position — always a number (the row ordinal,
+               or an async stream's arrival count). Declare it so body references check. */
+            if (node.index !== undefined) {
+                builder.raw('const ')
+                builder.mapped(node.index, node.indexLoc)
+                builder.raw(': number = 0;\n')
             }
             emitNodes(node.children, builder)
             builder.raw('}\n')
@@ -434,7 +458,9 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             const pending = node.children.filter((child) => child.kind !== 'branch')
             const branches = node.children.filter((child) => child.kind === 'branch')
             if (node.blocking && node.as !== undefined) {
-                builder.raw(`{\nconst ${node.as} = ${resolved};\n`)
+                builder.raw('{\nconst ')
+                builder.mapped(node.as, node.asLoc)
+                builder.raw(` = ${resolved};\n`)
                 emitNodes(pending, builder)
                 builder.raw('}\n')
             } else {
@@ -446,9 +472,13 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                 }
                 builder.raw('{\n')
                 if (branch.branch === 'then' && branch.as !== undefined) {
-                    builder.raw(`const ${branch.as} = ${resolved};\n`)
+                    builder.raw('const ')
+                    builder.mapped(branch.as, branch.asLoc)
+                    builder.raw(` = ${resolved};\n`)
                 } else if (branch.branch === 'catch' && branch.as !== undefined) {
-                    builder.raw(`const ${branch.as} = undefined as any;\n`)
+                    builder.raw('const ')
+                    builder.mapped(branch.as, branch.asLoc)
+                    builder.raw(' = undefined as any;\n')
                 }
                 emitNodes(branch.children, builder)
                 builder.raw('}\n')
@@ -503,7 +533,14 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('}\n')
             return
         case 'snippet':
-            builder.raw(`const ${node.name} = (${node.params ?? ''}) => {\n`)
+            /* `args={…}` is the parameter list; `mapped` (not `raw`) so hover/highlighting
+               land on the binding. `loc` is the `args` expression's offset (see
+               toSnippetOrTemplate). The name is a static attribute with no tracked offset. */
+            builder.raw(`const ${node.name} = (`)
+            if (node.params !== undefined) {
+                builder.mapped(node.params, node.loc)
+            }
+            builder.raw(') => {\n')
             emitNodes(node.children, builder)
             builder.raw('};\n')
             return

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

@@ -1,6 +1,7 @@
 import { resolve } from 'node:path'
 import ts from 'typescript'
 import { messageFromError } from '../../shared/messageFromError.ts'
+import { mapTsClassification } from './ABIDE_SEMANTIC_TOKENS_LEGEND.ts'
 import { assetModulesFile } from './assetModulesFile.ts'
 import { compileShadow } from './compileShadow.ts'
 import { loadShadowTsConfig } from './loadShadowTsConfig.ts'
@@ -10,6 +11,7 @@ import { shadowNaming } from './shadowNaming.ts'
 import { sourceToShadowOffset } from './sourceToShadowOffset.ts'
 import type { AbideDiagnostic } from './types/AbideDiagnostic.ts'
 import type { CompiledShadow } from './types/CompiledShadow.ts'
+import type { SemanticToken } from './types/SemanticToken.ts'
 
 const { suffixed, isShadow, sourceOf } = shadowNaming
 
@@ -27,6 +29,8 @@ export type ShadowLanguageService = {
     /* Hover info at a source offset, or undefined if the offset isn't a checked
        expression (markup, whitespace) or TypeScript has nothing to report. */
     quickInfo: (abidePath: string, sourceOffset: number) => ShadowQuickInfo | undefined
+    /* Type-aware semantic tokens for every checked expression, in source coords. */
+    semanticClassifications: (abidePath: string) => SemanticToken[]
 }
 
 /*
@@ -194,5 +198,49 @@ export function createShadowLanguageService(cwd: string): ShadowLanguageService
                 length: span?.length ?? 1,
             }
         },
+        semanticClassifications(abidePath) {
+            const fileName = suffixed(abidePath)
+            /* Compile first so the mappings cache is current. */
+            shadowText(abidePath)
+            const shadow = shadows.get(abidePath)
+            if (shadow === undefined) {
+                return []
+            }
+            const { spans } = service.getEncodedSemanticClassifications(
+                fileName,
+                { start: 0, length: shadow.code.length },
+                ts.SemanticClassificationFormat.TwentyTwenty,
+            )
+            /* `spans` is flat triples [start, length, classification, …] in shadow
+               coords; keep only those overlapping a mapped expression segment. */
+            const tokens: SemanticToken[] = []
+            for (let index = 0; index + 2 < spans.length; index += 3) {
+                const spanStart = spans[index]
+                const spanLength = spans[index + 1]
+                const classification = spans[index + 2]
+                if (
+                    spanStart === undefined ||
+                    spanLength === undefined ||
+                    classification === undefined
+                ) {
+                    continue
+                }
+                const mapped = mapTsClassification(classification)
+                if (mapped === undefined) {
+                    continue
+                }
+                const located = remapShadowDiagnostic(shadow.mappings, spanStart, spanLength)
+                if (located === undefined) {
+                    continue
+                }
+                tokens.push({
+                    start: located.start,
+                    length: located.length,
+                    type: mapped.type,
+                    modifiers: mapped.modifiers,
+                })
+            }
+            return tokens
+        },
     }
 }

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

@@ -0,0 +1,37 @@
+import { ABIDE_SEMANTIC_TOKENS_LEGEND } from './ABIDE_SEMANTIC_TOKENS_LEGEND.ts'
+import { offsetToPosition } from './offsetToPosition.ts'
+import type { SemanticToken } from './types/SemanticToken.ts'
+
+/*
+Encodes source-coordinate tokens into the LSP semantic-tokens `data` array: five
+integers per token (deltaLine, deltaStartChar, length, tokenTypeIndex,
+modifierBitset), each position relative to the previous token. Tokens are sorted
+by start; tokens with an unknown legend type, and any token overlapping the one
+before it, are dropped — the protocol requires a strictly non-overlapping,
+positionally-ordered stream.
+*/
+export function encodeSemanticTokens(text: string, tokens: SemanticToken[]): number[] {
+    const sorted = [...tokens].sort((a, b) => a.start - b.start || a.length - b.length)
+    const data: number[] = []
+    let previousLine = 0
+    let previousCharacter = 0
+    let previousEnd = -1
+    for (const token of sorted) {
+        const typeIndex = ABIDE_SEMANTIC_TOKENS_LEGEND.tokenTypes.indexOf(token.type)
+        if (typeIndex < 0 || token.start < previousEnd) {
+            continue
+        }
+        const modifierBitset = token.modifiers.reduce((bits, name) => {
+            const bit = ABIDE_SEMANTIC_TOKENS_LEGEND.tokenModifiers.indexOf(name)
+            return bit < 0 ? bits : bits | (1 << bit)
+        }, 0)
+        const { line, character } = offsetToPosition(text, token.start)
+        const deltaLine = line - previousLine
+        const deltaCharacter = deltaLine === 0 ? character - previousCharacter : character
+        data.push(deltaLine, deltaCharacter, token.length, typeIndex, modifierBitset)
+        previousLine = line
+        previousCharacter = character
+        previousEnd = token.start + token.length
+    }
+    return data
+}

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

@@ -1,6 +1,7 @@
 import { assertExhaustive } from '../../shared/assertExhaustive.ts'
 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 { bindListenEvent } from './bindListenEvent.ts'
 import { composeProps } from './composeProps.ts'
@@ -9,6 +10,7 @@ import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { isWhitespaceText } from './isWhitespaceText.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'
@@ -18,6 +20,12 @@ import { staticTextPart } from './staticTextPart.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
+/* The skeleton positioning anchor a control-flow block / component / slot / outlet
+   stamps into its skeleton markup, sourced from the same `ANCHOR` wire-alphabet constant
+   the client's anchor scan (`skeleton`) matches — so the markup the build clones and the
+   markup the scan reads can never drift on a literal. */
+const ANCHOR_COMMENT = `<!--${ANCHOR}-->`
+
 /*
 Generates the build statements for a parsed template: element creation, static
 attributes, reactive `attr`/`text` bindings, `on` listeners, keyed `each`, and
@@ -54,8 +62,7 @@ export function generateBuild(
     computedNames: ReadonlySet<string>,
     isLayout = false,
 ): string {
-    let counter = 0
-    const nextVar = (prefix: string): string => `${prefix}${counter++}`
+    const nextVar = makeVarNamer()
 
     /* In a layout, `<slot/>` outlets are rewritten to `OUTLET_TAG` elements up front
        (`asOutlet`) so the static-clone path carries them as ordinary structure. `asOutlet`
@@ -213,7 +220,7 @@ export function generateBuild(
                     binds.push(
                         `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], ${namedThunk('text', `return (${lowerExpression(part.code)})`)});\n`,
                     )
-                    return '<!--a-->'
+                    return ANCHOR_COMMENT
                 })
                 .join('')
         }
@@ -226,7 +233,7 @@ export function generateBuild(
                element — so its root lays out as a true direct child of `anchor.parentNode`. */
             const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(generateChild(node, `${anchorVar}.parentNode`, `anchorCursor(${anchorVar})`))
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         if (node.kind === 'script') {
             /* A nested `<script>` (scoped reactive block) emits no markup — its lowered body
@@ -251,7 +258,7 @@ export function generateBuild(
                No wrapper element — the filled child lays out as a direct child of the parent. */
             const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(`outlet(${anchorVar}.parentNode, anchorCursor(${anchorVar}));\n`)
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         if (node.tag === 'slot') {
             /* A `<slot>` outlet at its position: an `<!--a-->` anchor, the slot's content
@@ -261,7 +268,7 @@ export function generateBuild(
             binds.push(
                 `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
             )
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         const hasReactiveAttr = node.attrs.some((attr) => attr.kind !== 'static')
         const reactiveTextChild = node.children.find(

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

@@ -1,11 +1,18 @@
 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 {
+    ANCHOR,
+    RANGE_CLOSE as RANGE_CLOSE_DATA,
+    RANGE_OPEN as RANGE_OPEN_DATA,
+} from '../runtime/RANGE_MARKER.ts'
 import { asOutlet } from './asOutlet.ts'
 import { composeProps } from './composeProps.ts'
 import { groupBindParts } from './groupBindParts.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'
@@ -16,12 +23,16 @@ import { stripEffects } from './stripEffects.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
-/* The range boundary comments a control-flow block emits around its content. They
-   serialize exactly as the client's `document.createComment('[' | ']')` markers, so
-   the client claims the same `[ … ]` boundary it builds — the comment-marked range
-   that lets a branch hold any content. */
-const RANGE_OPEN = '<!--[-->'
-const RANGE_CLOSE = '<!--]-->'
+/* The range boundary comments a control-flow block emits around its content. Sourced
+   from the SAME wire-alphabet constants the client's `document.createComment` markers
+   use (`RANGE_MARKER`), wrapped in comment syntax — so a server-emitted boundary and the
+   client `[ … ]` boundary it claims can never drift on a literal. */
+const RANGE_OPEN = `<!--${RANGE_OPEN_DATA}-->`
+const RANGE_CLOSE = `<!--${RANGE_CLOSE_DATA}-->`
+
+/* The skeleton positioning anchor a control-flow block / slot / outlet emits, sourced
+   from the same `ANCHOR` constant the client's anchor scan matches. */
+const ANCHOR_COMMENT = `<!--${ANCHOR}-->`
 
 /*
 Server code generator: turns the parsed template into statements that push HTML
@@ -46,10 +57,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 {
@@ -81,13 +91,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) => {
@@ -172,7 +181,7 @@ export function generateSSR(
        Outside a skeleton (top-level / inside a branch) blocks mount on the host directly,
        so no anchor. */
     const anchorMark = (node: TemplateNode, target: string): string =>
-        inSkeleton.get(node) ? push(target, '<!--a-->') : ''
+        inSkeleton.get(node) ? push(target, ANCHOR_COMMENT) : ''
 
     function generate(node: TemplateNode, target: string): string {
         /* Every kind that mounts as a marker range is positioned by an `<!--a-->` anchor when
@@ -197,7 +206,7 @@ export function generateSSR(
                         ? `$text(await (${lowered}))`
                         : `$text(${lowered})`
                     return markText.get(node)
-                        ? `${target}.push('<!--a-->' + ${value});\n`
+                        ? `${target}.push('${ANCHOR_COMMENT}' + ${value});\n`
                         : `${target}.push(${value});\n`
                 })
                 .join('')

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) }
+}