@abide/abide 0.29.0 → 0.30.0

package/AGENTS.md

@@ -178,9 +178,10 @@ Same selector grammar as `cache.invalidate`; also accept a `Subscribable`. See C
 
 ### `.abide` component format (see `src/lib/ui/README.md`)
 Valid HTML with `<script>` + native `<template>` control flow + scoped `<style>`.
-- **Bindings:** `{expr}` text, `name={expr}` attr, `onclick={fn}`, `bind:value={…}` / `bind:checked` / `bind:group`.
+- **Bindings:** `{expr}` text, `name={expr}` attr, `onclick={fn}`, `bind:value={…}` / `bind:checked` / `bind:group`, `attach={fn}` (node-lifetime attachment — the dual of `on`; the `use:`-action / `{@attach}` equivalent, lowered to `ui/dom/attach`).
 - **Control flow (native `<template>`):** `if`/`else`, `each={list} as="x" key="x.id"`, `await={p}`/`then`/`catch`, `switch`/`case`/`default`.
 - **Components:** capitalised tags (`<Layout title=…>`); children fill `<slot/>`; props are reactive (passed as thunks). `prop('name')` reads a typed page param.
+- **Snippets / named slots:** `<template name="x" args={…}>` declares a reusable named builder (the `snippet()` form), rendered like a function — covers named slots / `{@render}`.
 - **Reactivity:** write plain assignment (`count += 1`, `items.push(x)`); the compiler lowers it to patches. Deep-field edits wake only that field.
 - **SSR:** byte-identical HTML string; `renderToStream` ships the shell then streams `<template await>` fragments out of order; `hydrate` adopts static structure in place (control-flow blocks + child components fall back to `mount`/re-render — known gap).
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # abide
 
+## 0.30.0
+
+### Minor Changes
+
+- [`311f3e7`](https://github.com/briancray/abide/commit/311f3e76732eb2b98d2739f2f7eff0fbbb667645) - cross-fade navigations via the View Transition API ([`d3ea6c0`](https://github.com/briancray/abide/commit/d3ea6c001c47748dd2be3ae47dfc3624ae7c65ee))
+
+### Patch Changes
+
+- [`311f3e7`](https://github.com/briancray/abide/commit/311f3e76732eb2b98d2739f2f7eff0fbbb667645) - surface attach= binding and named-template snippets in .abide grammar ([`51a37ee`](https://github.com/briancray/abide/commit/51a37ee0b0cef708d0571de272ace3584d45a8c0))
+
+- [`311f3e7`](https://github.com/briancray/abide/commit/311f3e76732eb2b98d2739f2f7eff0fbbb667645) - hoist component-local types above \_\_Props so prop annotations resolve ([`8d674c5`](https://github.com/briancray/abide/commit/8d674c543be53ae5775124f392ee44fd8731204f))
+
 ## 0.29.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.29.0",
+    "version": "0.30.0",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

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

@@ -46,11 +46,18 @@ export function compileShadow(source: string): CompiledShadow {
     const scriptStart = leadingScript ? source.indexOf('>', leadingScript.index) + 1 : 0
     const templateStart = leadingScript ? (leadingScript.index ?? 0) + leadingScript[0].length : 0
 
-    const { imports, scope, props } = analyzeScript(scriptBody, scriptStart)
+    const { imports, types, scope, props } = analyzeScript(scriptBody, scriptStart)
     builder.raw(SHADOW_PREAMBLE)
     for (const line of imports) {
         builder.flush(line)
     }
+    /* Component-local `type`/`interface` declarations are hoisted to module scope —
+       above `__Props` so prop annotations referencing them resolve, and still visible
+       inside the function body where the rest of the scope and template expressions use
+       them. (Emitting them as in-function scope lines would hide them from `__Props`.) */
+    for (const line of types) {
+        builder.flush(line)
+    }
     builder.raw(`interface __Props {\n${props.join('\n')}\n}\n`)
     /* async so `await` blocks are legal; never executed, so the return is void. */
     builder.raw('export default async function (props: __Props): Promise<void> {\n')
@@ -117,17 +124,24 @@ function createBuilder(): Builder {
     return builder
 }
 
-type ScriptAnalysis = { imports: ScopeLine[]; scope: ScopeLine[]; props: string[] }
+type ScriptAnalysis = {
+    imports: ScopeLine[]
+    types: ScopeLine[]
+    scope: ScopeLine[]
+    props: string[]
+}
 
 /* Walks the leading `<script>` and produces the shadow's module imports, the
-   value-typed scope lines, and the Props interface fields. `scriptStart` is the
-   body's absolute offset in the source, so verbatim spans map back exactly. */
+   module-scope type declarations, the value-typed scope lines, and the Props
+   interface fields. `scriptStart` is the body's absolute offset in the source, so
+   verbatim spans map back exactly. */
 function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis {
     const imports: ScopeLine[] = []
+    const types: ScopeLine[] = []
     const scope: ScopeLine[] = []
     const props: string[] = []
     if (scriptBody.trim() === '') {
-        return { imports, scope, props }
+        return { imports, types, scope, props }
     }
     const file = ts.createSourceFile('script.ts', scriptBody, ts.ScriptTarget.Latest, true)
     /* A verbatim span: original text + the segment mapping it back, relative to the
@@ -145,6 +159,11 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
             imports.push({ text: verbatim(statement), segments: [span(statement, 0)] })
             continue
         }
+        if (ts.isTypeAliasDeclaration(statement) || ts.isInterfaceDeclaration(statement)) {
+            /* Hoist to module scope (verbatim, mapped) so prop annotations resolve them. */
+            types.push({ text: verbatim(statement), segments: [span(statement, 0)] })
+            continue
+        }
         const reactive = reactiveDeclarations(statement)
         if (reactive === undefined) {
             /* Plain statement (function, const, expression) — emit verbatim, mapped. */
@@ -155,7 +174,7 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
             scope.push(scopeLineFor(declaration, props, verbatim, span))
         }
     }
-    return { imports, scope, props }
+    return { imports, types, scope, props }
 }
 
 /* The `state`/`derived`/`prop` declarations in a variable statement, or undefined

package/src/lib/ui/router.ts

@@ -264,12 +264,29 @@ export function router(
                 const hydrating =
                     first && pageView?.hydratable === true && pageView.hydrate !== undefined
                 first = false
-                const base = disposeFrom(divergence)
-                /* A fresh mount clears the torn-down DOM; hydration adopts it in place. */
-                if (!hydrating) {
-                    base.textContent = ''
+                /* The DOM mutation a navigation makes: tear the divergent chain down,
+                   clear its DOM (a fresh mount; hydration adopts in place), rebuild. */
+                const swap = (): void => {
+                    const base = disposeFrom(divergence)
+                    if (!hydrating) {
+                        base.textContent = ''
+                    }
+                    buildFrom(base, divergence, chainKeys, layoutViews, pageView, params, hydrating)
+                }
+                /* Wrap the swap in a View Transition where the browser supports it, so
+                   the page change cross-fades (and shared `view-transition-name` elements
+                   morph) — the synchronous swap is exactly the mutation the API snapshots
+                   around. Skipped while hydrating: the first paint adopts SSR DOM in place,
+                   not animate. CSS owns opting out (e.g. prefers-reduced-motion). */
+                if (
+                    !hydrating &&
+                    typeof document !== 'undefined' &&
+                    'startViewTransition' in document
+                ) {
+                    document.startViewTransition(swap)
+                } else {
+                    swap()
                 }
-                buildFrom(base, divergence, chainKeys, layoutViews, pageView, params, hydrating)
             })
         })
     })