@abide/abide 0.32.1 → 0.33.0

package/src/lib/shared/types/CacheOptions.ts

@@ -18,22 +18,26 @@ for per-request data: the default keeps a per-user response from leaking across
 requests. Write only `global: true`; there is no `false` form. On the client
 there is a single tab store, so the flag is a no-op there.
 
-`invalidate` controls how a `cache.invalidate` hit on this key is applied, in ms.
-`{ throttle: N }` refetches on the leading edge then at most once per N ms while
-invalidations keep arriving; `{ debounce: N }` refetches only after N ms of
-quiet. Both coalesce a burst of invalidations (e.g. a socket spraying
-`cache.invalidate`) into far fewer calls and keep serving the existing (stale)
-value until the refetch resolves — stale-while-revalidate. They affect only the
-refetch-after-invalidate; the first fetch and arg-change fetches stay immediate.
-A policy declares the call safe to re-run unprompted: cache() throws at wrap
-time on both set at once, on ttl: 0 (nothing retained, nothing to revalidate),
-and on a non-replayable remote method (replaying a write is a state change
-disguised as a refresh). Producers are uncheckable — declare a policy only on
-a producer that is a pure read.
+`swr` is stale-while-revalidate: it changes what a `cache.invalidate` hit does
+to this key. Without it, an invalidate drops the entry and the next read shows
+`pending()`. With it, the entry is kept and refetched in the background — the
+existing (stale) value stays visible and `refreshing()` reports the in-flight
+reload — so the reader never blanks. It governs only the refetch-after-invalidate;
+the first fetch and arg-change fetches stay immediate regardless.
+
+`swr: true` refetches immediately on every invalidate. An optional window
+coalesces a burst (e.g. a socket spraying `cache.invalidate`) into far fewer
+calls: `swr: { throttle: N }` refetches on the leading edge then at most once
+per N ms while invalidations keep arriving; `swr: { debounce: N }` refetches
+only after N ms of quiet. `swr` declares the call safe to re-run unprompted:
+cache() throws at wrap time on throttle+debounce set at once, on ttl: 0 (nothing
+retained, nothing to revalidate), and on a non-replayable remote method
+(replaying a write is a state change disguised as a refresh). Producers are
+uncheckable — set `swr` only on a producer that is a pure read.
 */
 export type CacheOptions = {
     ttl?: number
     scope?: string | string[]
     global?: boolean
-    invalidate?: { throttle?: number; debounce?: number }
+    swr?: boolean | { throttle?: number; debounce?: number }
 }

package/src/lib/ui/README.md

@@ -46,8 +46,8 @@ every page, and `.abide` files are the only component format.
   `<template await>`/`then`/`catch`, `<template switch>`/`case`/`default`.
 - **Components** are capitalised tags (`<Layout title="…">`); children fill the
   child's `<slot>`. Props are reactive (passed as thunks).
-- **Scoped styles**: a `<style>` block is scoped per component via a
-  `[data-b-<hash>]` attribute.
+- **Scoped styles**: a `<style>` block is scoped via a `[data-a-<hash>]`
+  attribute — per component, or per control-flow branch when nested in one.
 
 ## Substrate (why it's fast)
 
@@ -70,7 +70,7 @@ write-path microbench this runs ~20× faster than a deep-proxy signal baseline.
 ```
 .abide → analyzeComponent (split script/style/template, desugar signals → doc,
                            lower data access, scope CSS)
-       → generateBuild  (client: openChild/appendText/attr/on/each/when/…)
+       → generateBuild  (client: skeleton/cloneStatic/appendText/attr/on/each/when/…)
        → generateSSR    (server: HTML-string back-end, await markers)
        → hoistCells     (static paths → cells)
        → compileModule  (ES module: default mount + render() for SSR)

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

@@ -0,0 +1,132 @@
+/*
+Every standard HTML element name (lowercase), plus the two foreign-content roots
+`svg`/`math`. A component wrapper tag that collides with one of these is a real
+element with a content model and parser quirks — `<button>`/`<a>` reject interactive
+descendants, table/list/select families foster or auto-close non-conforming children,
+void elements self-close, and `<svg>`/`<math>` switch the parser into SVG/MathML
+namespace so the wrapper's HTML children break out (foster-parent) of it entirely —
+so the parser reparents the component's own markup out of the wrapper and hydration
+claims `null`. `componentWrapperTag` remaps any such name to a transparent custom
+element instead. Pure SVG/MathML descendant names (`circle`, `path`, `mrow`, …) are
+NOT here: in HTML context they are inert unknown elements that hold children fine, so
+a `<Circle>` component stays as-is like any non-element name. Superset of VOID_TAGS
+(which the parser/SSR still use for self-closing); this set is only the
+wrapper-safety check.
+*/
+export const HTML_TAGS: ReadonlySet<string> = new Set([
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'math',
+    'menu',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'search',
+    'section',
+    'select',
+    'slot',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'template',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+])

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

@@ -14,11 +14,13 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string }[] = [
     { name: 'derived', specifier: 'ui/derived' },
     { name: 'effect', specifier: 'ui/effect' },
     { name: 'mount', specifier: 'ui/dom/mount' },
-    { name: 'openChild', specifier: 'ui/dom/openChild' },
     { name: 'appendText', specifier: 'ui/dom/appendText' },
+    { name: 'appendTextAt', specifier: 'ui/dom/appendTextAt' },
     { name: 'appendSnippet', specifier: 'ui/dom/appendSnippet' },
     { name: 'appendStatic', specifier: 'ui/dom/appendStatic' },
     { name: 'cloneStatic', specifier: 'ui/dom/cloneStatic' },
+    { name: 'skeleton', specifier: 'ui/dom/skeleton' },
+    { name: 'anchorCursor', specifier: 'ui/dom/anchorCursor' },
     { name: 'attr', specifier: 'ui/dom/attr' },
     { name: 'on', specifier: 'ui/dom/on' },
     { name: 'attach', specifier: 'ui/dom/attach' },
@@ -28,6 +30,7 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string }[] = [
     { name: 'awaitBlock', specifier: 'ui/dom/awaitBlock' },
     { name: 'tryBlock', specifier: 'ui/dom/tryBlock' },
     { name: 'switchBlock', specifier: 'ui/dom/switchBlock' },
+    { name: 'mountSlot', specifier: 'ui/dom/mountSlot' },
     { name: 'mountChild', specifier: 'ui/dom/mountChild' },
     { name: 'hydrate', specifier: 'ui/dom/hydrate' },
     { name: 'nextBlockId', specifier: 'ui/runtime/nextBlockId' },

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

@@ -1,20 +1,23 @@
-import { VOID_TAGS } from './VOID_TAGS.ts'
+import { HTML_TAGS } from './HTML_TAGS.ts'
 
 /*
 The element tag a component instance mounts into. Normally the component name
 lowercased — readable in devtools, a real box like any abide wrapper. But a name
-that lowercases to a VOID element (`Input`→`input`, `Img`→`img`) would yield a
-wrapper the HTML parser self-closes, reparenting the component's own markup as the
-wrapper's siblings — so on hydration `openChild` finds the wrapper empty, claims
-`null`, and `attr` throws on it. Those names map to a hyphenated custom-element tag
-(a custom element is never void) made layout-transparent with `display:contents`,
-so the component's real root still lays out as a direct child of the parent the way
-the (parse-broken) void wrapper effectively did. Both back-ends call this so the SSR
-string and the client build agree on the wrapper.
+that lowercases to a real HTML element (`Button`→`button`, `Input`→`input`) yields a
+wrapper with a content model the parser enforces: void elements self-close, and
+`<button>`/`<a>`/table/list/select families reject or foster the component's own
+markup as the wrapper's siblings — so on hydration the skeleton locates the wrapper
+empty, claims `null`, and `attr` throws on it. Those names map to a hyphenated
+custom-element tag (a custom element is never void and has no content model) made
+layout-transparent with `display:contents`, so the component's real root still lays
+out as a direct child of the parent the way the (parse-broken) wrapper would have.
+A name that is NOT a known HTML element (the common case — `Card`, `Dropdown`) is an
+inert unknown tag that holds any content untouched, so it stays as-is. Both back-ends
+call this so the SSR string and the client build agree on the wrapper.
 */
 export function componentWrapperTag(name: string): { tag: string; transparent: boolean } {
     const lower = name.toLowerCase()
-    return VOID_TAGS.has(lower)
+    return HTML_TAGS.has(lower)
         ? { tag: `abide-${lower}`, transparent: true }
         : { tag: lower, transparent: false }
 }