@abide/abide 0.41.1 → 0.42.0

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

@@ -0,0 +1,101 @@
+import type { SemanticToken } from './types/SemanticToken.ts'
+
+/*
+Lexical highlighting for `{#…}`/`{:…}`/`{/…}` control-flow framing — the part the
+HTML grammar sees only as text and the shadow program lowers away. A pure scan of
+raw source (independent of a successful parse, so it survives mid-edit), it emits
+an `operator` token for the `{`+sigil opener and a `keyword` token for the block
+word, plus the `of`/`by` connectors inside a `{#for …}` head. Expression interiors
+(and the `{@const}`/`{@html}` tags and bare `{expr}` interpolations) are NOT touched
+here — those are the shadow's job. A keyword allowlist after the sigil prevents
+matching arbitrary `{:foo}` text. Longest phrases first so `for await` beats `for`
+and `else if` beats `else`.
+*/
+const BLOCK_KEYWORDS = [
+    'for await',
+    'else if',
+    'if',
+    'for',
+    'await',
+    'switch',
+    'case',
+    'default',
+    'try',
+    'catch',
+    'finally',
+    'then',
+    'else',
+]
+
+const BLOCK_HEAD = new RegExp(`\\{([#:/])\\s*(${BLOCK_KEYWORDS.join('|')})\\b`, 'g')
+
+export function structuralBlockTokens(source: string): SemanticToken[] {
+    const tokens: SemanticToken[] = []
+    for (const match of source.matchAll(BLOCK_HEAD)) {
+        const braceStart = match.index
+        const sigil = match[1]
+        const keyword = match[2]
+        if (keyword === undefined) {
+            continue
+        }
+        const keywordStart = braceStart + match[0].length - keyword.length
+        tokens.push({ start: braceStart, length: 2, type: 'operator', modifiers: [] })
+        tokens.push({ start: keywordStart, length: keyword.length, type: 'keyword', modifiers: [] })
+        /* A `{#for …}` head carries abide-only connectors `of`/`by` that the shadow
+           lowers away (`of`) or never emits (`by`), so color them here. */
+        if (sigil === '#' && (keyword === 'for' || keyword === 'for await')) {
+            tokens.push(...forHeadConnectors(source, keywordStart + keyword.length))
+        }
+    }
+    return tokens
+}
+
+/*
+Scans a `{#for …}` head from `from` to its closing `}`, emitting `keyword` tokens
+for the `of`/`by` connectors at brace depth 0 — skipping any `of`/`by` nested in a
+destructure, call, or string so an identifier or object key is never miscolored.
+*/
+function forHeadConnectors(source: string, from: number): SemanticToken[] {
+    const tokens: SemanticToken[] = []
+    let depth = 0
+    let cursor = from
+    while (cursor < source.length) {
+        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 === '{' || char === '(' || char === '[') {
+            depth += 1
+        } else if (char === ')' || char === ']') {
+            depth -= 1
+        } else if (char === '}') {
+            if (depth === 0) {
+                break
+            }
+            depth -= 1
+        } else if (depth === 0 && (char === 'o' || char === 'b')) {
+            const word = source.startsWith('of', cursor)
+                ? 'of'
+                : source.startsWith('by', cursor)
+                  ? 'by'
+                  : undefined
+            const isWordBoundary = (offset: number): boolean => /\s/.test(source.charAt(offset))
+            if (
+                word !== undefined &&
+                isWordBoundary(cursor - 1) &&
+                isWordBoundary(cursor + word.length)
+            ) {
+                tokens.push({ start: cursor, length: word.length, type: 'keyword', modifiers: [] })
+                cursor += word.length
+                continue
+            }
+        }
+        cursor += 1
+    }
+    return tokens
+}

package/src/lib/ui/compile/types/SemanticToken.ts

@@ -0,0 +1,11 @@
+/*
+A semantic-highlighting token in original `.abide` source coordinates. `type` and
+`modifiers` are legend names (see ABIDE_SEMANTIC_TOKENS_LEGEND), resolved to wire
+indices only at encode time.
+*/
+export type SemanticToken = {
+    start: number
+    length: number
+    type: string
+    modifiers: string[]
+}

package/src/lib/ui/compile/types/TemplateNode.ts

@@ -40,6 +40,11 @@ export type TemplateNode =
           async: boolean
           children: TemplateNode[]
           loc?: number
+          /* Source offsets of the binding name, `by` key, and index — so the shadow
+             maps hover/highlighting onto them (absent for synthesised/missing parts). */
+          asLoc?: number
+          keyLoc?: number
+          indexLoc?: number
       }
     | { kind: 'if'; condition: string; children: TemplateNode[]; loc?: number }
     | {
@@ -52,6 +57,8 @@ export type TemplateNode =
           as: string | undefined
           children: TemplateNode[]
           loc?: number
+          /* Source offset of an inline blocking `then` binding (`{#await p then v}`). */
+          asLoc?: number
       }
     | { kind: 'try'; children: TemplateNode[] }
     | {
@@ -59,6 +66,8 @@ export type TemplateNode =
           branch: 'then' | 'catch' | 'finally'
           as: string | undefined
           children: TemplateNode[]
+          /* Source offset of the `then`/`catch` binding, so the shadow maps it. */
+          asLoc?: number
       }
     | {
           kind: 'component'

package/src/lib/ui/dom/appendText.ts

@@ -4,6 +4,7 @@ import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { appendSnippet } from './appendSnippet.ts'
+import { isComment } from './isComment.ts'
 import { parseRawNodes } from './parseRawNodes.ts'
 
 const CLOSE = '/abide:html'
@@ -106,8 +107,3 @@ function appendRawHtml(parent: Node, read: () => unknown): void {
         set(markup())
     })
 }
-
-/* A comment node carrying exactly `data`. */
-function isComment(node: Node, data: string): boolean {
-    return (node as { data?: string }).data === data && node.childNodes.length === 0
-}

package/src/lib/ui/dom/applyResolved.ts

@@ -1,4 +1,5 @@
 import { seedResolved } from '../seedResolved.ts'
+import { isComment } from './isComment.ts'
 
 /*
 Bundle-side consumer of an SSR stream chunk, the counterpart of the doc stream's inline
@@ -71,11 +72,6 @@ export function applyResolved(root: Element, frame: string): void {
     }
 }
 
-/* A comment node carrying exactly `data`. */
-function isComment(node: Node, data: string): boolean {
-    return (node as { data?: string }).data === data && node.childNodes.length === 0
-}
-
 /* Depth-first search for the parent + open-marker comment of a boundary. */
 function findBoundary(node: Node, open: string): { parent: Node; start: Node } | undefined {
     for (const child of [...node.childNodes]) {

package/src/lib/ui/dom/isComment.ts

@@ -0,0 +1,6 @@
+/* A comment node carrying exactly `data`. Empty-child check distinguishes the
+   `<!--data-->` marker from an element that happens to expose a `data` property.
+   Shared by the marker-range scanners in appendText/applyResolved. */
+export function isComment(node: Node, data: string): boolean {
+    return (node as { data?: string }).data === data && node.childNodes.length === 0
+}

package/src/lib/ui/runtime/createDoc.ts

@@ -3,13 +3,13 @@ import { batch } from './batch.ts'
 import { createComputedNode } from './createComputedNode.ts'
 import { createSignalNode } from './createSignalNode.ts'
 import { PATCH_BUS } from './PATCH_BUS.ts'
+import { pathSegments } from './pathSegments.ts'
 import { readNode } from './readNode.ts'
 import { trigger } from './trigger.ts'
 import type { Cell } from './types/Cell.ts'
 import type { Doc } from './types/Doc.ts'
 import type { Patch } from './types/Patch.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
-import { unescapeKey } from './unescapeKey.ts'
 import { walkPath } from './walkPath.ts'
 import { writeNode } from './writeNode.ts'
 
@@ -132,7 +132,7 @@ export function createDoc(initial: unknown): Doc {
     function apply(patch: Patch): void {
         /* Segments index the tree, so they carry the REAL keys (unescaped); the path
            strings (parentPath, node-map keys) stay escaped, re-walked through walkPath. */
-        const segments = patch.path === '' ? [] : patch.path.split('/').map(unescapeKey)
+        const segments = patch.path === '' ? [] : pathSegments(patch.path)
         /* Capture the pre-image only when a consumer is listening (the inverse's only
            cost): a replace/remove inverts to the value it overwrote, an add to a
            remove (computed post-apply, below, to resolve an array append's index). */
@@ -220,7 +220,7 @@ export function createDoc(initial: unknown): Doc {
     */
     function cell<T>(path: string): Cell<T> {
         const node = nodeFor(path)
-        const segments = path.split('/').map(unescapeKey)
+        const segments = pathSegments(path)
         const leafKey = segments[segments.length - 1] as string
         /* Auto-vivify missing ancestor objects so binding a nested path on a doc
            booted shallow (e.g. `state({})`) doesn't crash, and a later `set` writes

package/src/lib/ui/runtime/pathSegments.ts

@@ -0,0 +1,10 @@
+import { unescapeKey } from './unescapeKey.ts'
+
+/*
+Splits an escaped JSON-Pointer-style doc path into its REAL key segments
+(each segment unescaped). The path strings (parentPath, node-map keys) stay
+escaped and re-walked through `walkPath`; segments index the live tree.
+*/
+export function pathSegments(path: string): string[] {
+    return path.split('/').map(unescapeKey)
+}

package/template/.zed/settings.json

@@ -0,0 +1,4 @@
+{
+  "auto_install_extensions": { "abide": true },
+  "semantic_tokens": "combined"
+}

package/template/src/ui/pages/page.abide

@@ -3,17 +3,17 @@
 Root page — served at GET /. Every folder under src/ui/pages/ that contains a
 page.abide mounts at that folder's URL; the root layout.abide wraps it.
 
-The blocking await-block below (the `then` attribute sits ON the <template await>)
+The blocking await-block below (the `then` clause sits in the `{#await}` head)
 resolves on the server during SSR and renders inline — no pending placeholder. The
 decoded body is captured into the per-request cache, serialized into the HTML, and
-replayed on the client during hydration with no second fetch. A `then` *child*
+replayed on the client during hydration with no second fetch. A `{:then}` *branch*
 instead would stream the resolution in out of order.
 */
 import { cache } from '@abide/abide/shared/cache'
 import { getHello } from '$server/rpc/getHello.ts'
 </script>
 
-<template await={cache(getHello)()} then="hello">
+{#await cache(getHello)() then hello}
     <h1>{hello.message}</h1>
-</template>
+{/await}
 <p>Edit <code>src/ui/pages/page.abide</code> and the page hot-reloads.</p>