@abide/abide 0.31.0 → 0.32.0

package/AGENTS.md

@@ -174,7 +174,7 @@ Same selector grammar as `cache.invalidate`; also accept a `Subscribable`. See C
 - `abide/ui/router(...)`, `abide/ui/startClient(...)`, `abide/ui/renderToStream(render)` — bootstrap/render runtime (compiler/launcher uses these).
 
 ### DOM + render runtime — `@readme plumbing` (compiler-emitted; you don't hand-write these)
-`abide/ui/dom/{mount,mountChild,hydrate,text,openChild,openRoot,appendText,appendSnippet,appendStatic,cloneStatic,attr,on,attach,each,eachAsync,when,awaitBlock,tryBlock,switchBlock,applyResolved}` and `abide/ui/runtime/{nextBlockId,enterRenderPass,exitRenderPass}`. These are what `analyzeComponent → generateBuild/generateSSR` lower a `.abide` file into. Read them only to understand compiler output.
+`abide/ui/dom/{mount,mountChild,hydrate,text,openChild,appendText,appendSnippet,appendStatic,cloneStatic,attr,on,attach,each,eachAsync,when,awaitBlock,tryBlock,switchBlock,applyResolved}` and `abide/ui/runtime/{nextBlockId,enterRenderPass,exitRenderPass}`. These are what `analyzeComponent → generateBuild/generateSSR` lower a `.abide` file into. Read them only to understand compiler output.
 - `abide/ui/remoteProxy`, `abide/ui/socketProxy` — the browser-side implementations the bundler swaps in for `GET(...)` / `socket(...)`.
 
 ### `.abide` component format (see `src/lib/ui/README.md`)

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # abide
 
+## 0.32.0
+
+### Minor Changes
+
+- [`786a496`](https://github.com/briancray/abide/commit/786a4965fa3c94954ea8d66aa41b0f94e0ec8320) - render control-flow branches into marker-bounded ranges ([`23efa06`](https://github.com/briancray/abide/commit/23efa0606b90b69ff262679673d660a71baf443c))
+
+### Patch Changes
+
+- [`786a496`](https://github.com/briancray/abide/commit/786a4965fa3c94954ea8d66aa41b0f94e0ec8320) - report checked component count on success ([`9ea83bb`](https://github.com/briancray/abide/commit/9ea83bb3c072d72e67486906b191964505e872f2))
+
+## 0.31.1
+
+### Patch Changes
+
+- [`a9f7b3b`](https://github.com/briancray/abide/commit/a9f7b3b09f1db15fa784844a2672b1058dde2b25) - stop the type-check shadow merging a semicolon-less call into the next component ([`7d863d7`](https://github.com/briancray/abide/commit/7d863d7b1f2d4d973a5eafd94cf5002fdeb519c4))
+
 ## 0.31.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.31.0",
+    "version": "0.32.0",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",
@@ -82,7 +82,6 @@
         "./ui/dom/hydrate": "./src/lib/ui/dom/hydrate.ts",
         "./ui/dom/text": "./src/lib/ui/dom/text.ts",
         "./ui/dom/openChild": "./src/lib/ui/dom/openChild.ts",
-        "./ui/dom/openRoot": "./src/lib/ui/dom/openRoot.ts",
         "./ui/dom/appendText": "./src/lib/ui/dom/appendText.ts",
         "./ui/dom/appendSnippet": "./src/lib/ui/dom/appendSnippet.ts",
         "./ui/dom/appendStatic": "./src/lib/ui/dom/appendStatic.ts",

package/src/checkAbide.ts

@@ -14,7 +14,7 @@ the same as each package checked on its own — and the same as the LSP. Returns
 the error count so the CLI can set its exit code.
 */
 export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
-    const diagnostics = collectByProject(cwd)
+    const { diagnostics, checked } = collectByProject(cwd)
     const byFile = new Map<string, AbideDiagnostic[]>()
     for (const diagnostic of diagnostics) {
         const bucket = byFile.get(diagnostic.file) ?? []
@@ -32,11 +32,14 @@ export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
     const errors = diagnostics.filter(
         (diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error,
     ).length
-    const relative = byFile.size
+    /* Success reports components *checked* (the glob count); failure reports the
+       files *with* errors. Reporting `byFile.size` on success printed `0` — it only
+       holds files that had diagnostics. */
+    const fileCount = byFile.size
     console.log(
         errors === 0
-            ? `\n[abide check] no type errors in ${relative} component${relative === 1 ? '' : 's'}`
-            : `\n[abide check] ${errors} error${errors === 1 ? '' : 's'} in ${relative} file${relative === 1 ? '' : 's'}`,
+            ? `\n[abide check] no type errors in ${checked} component${checked === 1 ? '' : 's'}`
+            : `\n[abide check] ${errors} error${errors === 1 ? '' : 's'} in ${fileCount} file${fileCount === 1 ? '' : 's'}`,
     )
     return errors
 }
@@ -45,7 +48,7 @@ export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
    project's components against that project's options, then concatenates the
    diagnostics. Imported components from another project resolve on demand through
    the host, so the per-project root set stays each project's own files. */
-function collectByProject(cwd: string): AbideDiagnostic[] {
+function collectByProject(cwd: string): { diagnostics: AbideDiagnostic[]; checked: number } {
     const byProject = new Map<string, string[]>()
     for (const relative of new Bun.Glob('**/*.abide').scanSync({ cwd, onlyFiles: true })) {
         if (relative.includes('node_modules')) {
@@ -55,9 +58,11 @@ function collectByProject(cwd: string): AbideDiagnostic[] {
         const root = nearestProjectRoot(path, cwd)
         byProject.set(root, [...(byProject.get(root) ?? []), path])
     }
-    return [...byProject].flatMap(([root, paths]) =>
+    const diagnostics = [...byProject].flatMap(([root, paths]) =>
         collectAbideDiagnostics(createShadowProgram(root, paths)),
     )
+    const checked = [...byProject.values()].reduce((total, paths) => total + paths.length, 0)
+    return { diagnostics, checked }
 }
 
 /* Renders one diagnostic as `path:line:col severity message` plus the offending

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

@@ -0,0 +1,16 @@
+/*
+A compile-time `.abide` error carrying the absolute source offset of the
+offending node (when the parser tracked one). The loader catches it, resolves the
+offset to `line:col` against the file, and re-throws with the component path and
+position in the message — so a failed build names the exact file and line, not the
+entry page at offset 0 (Bun frames plugin throws at `<file>:0` regardless).
+*/
+export class AbideCompileError extends Error {
+    readonly offset: number | undefined
+
+    constructor(message: string, offset?: number) {
+        super(message)
+        this.name = 'AbideCompileError'
+        this.offset = offset
+    }
+}

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

@@ -15,7 +15,6 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string }[] = [
     { name: 'effect', specifier: 'ui/effect' },
     { name: 'mount', specifier: 'ui/dom/mount' },
     { name: 'openChild', specifier: 'ui/dom/openChild' },
-    { name: 'openRoot', specifier: 'ui/dom/openRoot' },
     { name: 'appendText', specifier: 'ui/dom/appendText' },
     { name: 'appendSnippet', specifier: 'ui/dom/appendSnippet' },
     { name: 'appendStatic', specifier: 'ui/dom/appendStatic' },

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

@@ -1,8 +1,10 @@
 import { relative } from 'node:path'
 import type { BunPlugin } from 'bun'
+import { AbideCompileError } from './AbideCompileError.ts'
 import { analyzeComponent } from './analyzeComponent.ts'
 import { compileModule } from './compileModule.ts'
 import { nearestProjectRoot } from './nearestProjectRoot.ts'
+import { offsetToLineColumn } from './offsetToLineColumn.ts'
 
 /*
 Bun plugin that loads `.abide` single-file components: compiles each to the ES
@@ -40,11 +42,32 @@ export const abideUiPlugin: BunPlugin = {
             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 code = compileModule(source, { isLayout, moduleId })
+            /* 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
+               like it came from the entry page rather than this component. */
+            const compileAbide = <T>(step: () => T): T => {
+                try {
+                    return step()
+                } catch (error) {
+                    const offset = error instanceof AbideCompileError ? error.offset : undefined
+                    const at =
+                        offset === undefined
+                            ? moduleId
+                            : (({ line, column }) => `${moduleId}:${line}:${column}`)(
+                                  offsetToLineColumn(source, offset),
+                              )
+                    const message = error instanceof Error ? error.message : String(error)
+                    throw new Error(`${message.replace(/^\[abide\]\s*/, `[abide] ${at} — `)}`)
+                }
+            }
+            const code = compileAbide(() => compileModule(source, { isLayout, moduleId }))
             /* Browser build with `<style>`(s): concatenate every scoped block's CSS and
                pull it into the bundle via one virtual import, keyed by `moduleId` so the
                registry id and the CSS id agree. */
-            const styles = toBrowser ? analyzeComponent(source, moduleId).styles : []
+            const styles = compileAbide(() =>
+                toBrowser ? analyzeComponent(source, moduleId).styles : [],
+            )
             if (styles.length === 0) {
                 return { contents: code, loader: 'ts' }
             }

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

@@ -0,0 +1,19 @@
+/*
+The DOM event a generic two-way `bind:<property>` listens on to write the bound
+path back. Most form fields report edits via `input`, but a few properties are
+driven by their own event and never fire `input` — `<details open>` fires
+`toggle`, a checkbox/radio `checked` fires `change`, and a `<select>` settles its
+`value` on `change`. Picking the wrong event silently breaks the write-back.
+*/
+export function bindListenEvent(property: string, tag: string): string {
+    if (property === 'open') {
+        return 'toggle'
+    }
+    if (property === 'checked') {
+        return 'change'
+    }
+    if (property === 'value' && tag === 'select') {
+        return 'change'
+    }
+    return 'input'
+}

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

@@ -229,7 +229,14 @@ function scopeLineFor(
         const annotation = typeNode === undefined ? '' : `: ${verbatim(typeNode)}`
         const init = call.arguments[0]
         if (init === undefined) {
-            return { text: `let ${name}${annotation};`, segments: [] }
+            /* No initial (`state<T>()`): the value is `T | undefined`. A definite-
+               assignment assertion (`!`) gives that union without a use-before-assign
+               false-positive AND without control-flow narrowing it to just `undefined`
+               (an `= undefined` initializer, never reassigned in the shadow, would make
+               a guard like `x !== undefined` collapse to `never`). Unguarded access is
+               then correctly flagged possibly-undefined; a guard narrows cleanly. */
+            const valueType = annotation === '' ? ': unknown' : `${annotation} | undefined`
+            return { text: `let ${name}!${valueType};`, segments: [] }
         }
         const prefix = `let ${name}${annotation} = (`
         return { text: `${prefix}${verbatim(init)});`, segments: [span(init, prefix.length)] }
@@ -332,8 +339,13 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                offending expression (an annotated target reports the error on the RHS,
                unlike an object literal which reports it on the key). */
             for (const prop of node.props) {
+                /* Lead with a defensive `;`: this IIFE is the one shadow emission that
+                   starts with `(`, so without it a preceding scope statement left
+                   unterminated (a script ending in a call with no trailing semicolon,
+                   e.g. `effect(() => …)`) merges across the newline into `effect(…)(…)`
+                   — a spurious "not callable" on the author's last statement. */
                 builder.raw(
-                    `((__prop: Parameters<typeof ${node.name}>[0][${JSON.stringify(prop.name)}]) => {})(`,
+                    `;((__prop: Parameters<typeof ${node.name}>[0][${JSON.stringify(prop.name)}]) => {})(`,
                 )
                 builder.expr(prop.code, prop.loc)
                 builder.raw(');\n')
@@ -452,9 +464,14 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('};\n')
             return
         case 'script':
-            /* A scoped reactive `<script>` block — its body is author TS; emit it so
-               its references check. Not yet position-mapped (rare). */
-            builder.raw(`{\n${node.code}\n}\n`)
+            /* A scoped reactive `<script>`: emit its body INLINE in the current block,
+               not a nested `{…}` — so its bindings are visible to the branch's later
+               siblings (a nested if/each within the same branch), matching runtime
+               scope where a nested script's declarations deref through the rest of the
+               branch. A wrapping block trapped them, surfacing "Cannot find name" on a
+               sibling. Leading `;` guards a preceding semicolon-less call from merging
+               in (see the component case). Not yet position-mapped (rare). */
+            builder.raw(`;\n${node.code}\n`)
             return
         case 'style':
             /* CSS, not TypeScript — nothing for the shadow to type-check. */