@abide/abide 0.43.0 → 0.43.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # abide
 
+## 0.43.1
+
+### Patch Changes
+
+- 943402b: restore reload scroll flash-free via native restoration ([`876b99c`](https://github.com/briancray/abide/commit/876b99cd6e285b6a41afe87ca053cf0631099c03))
+- ed96096: abide check: quote hyphenated component prop keys (`aria-label`, `data-*`) so the props shim parses, and treat `on*` callbacks as ordinary declared props (not DOM passthrough) so a passed required `onsave`/`oncancel` no longer reads as missing while an undeclared handler is still caught
+
 ## 0.43.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.43.0",
+    "version": "0.43.1",
     "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

@@ -372,12 +372,15 @@ function emitNode(node: TemplateNode, builder: Builder): void {
         case 'component': {
             /* The imported tag resolves (via the shadow host) to the child's
                `(props: Props) => …` default, so `Parameters<typeof Child>[0]` is its prop
-               shape. `on*` / `bind:` / `attach` props are framework-handled passthrough
-               (not part of the declared shape), so they are checked leniently — each value
-               against its own declared key type — never flagged as excess. */
+               shape. `bind:` / `class:` / `style:` / `attach` and `{...spread}` are
+               framework directives (not part of the declared shape), so they are checked
+               leniently — each value against its own declared key type — never flagged as
+               excess. `on*` callbacks ARE ordinary declared props on a component (abide does
+               not auto-forward events to the DOM), so they go through the completeness check
+               with the rest — otherwise a required `onsave`/`oncancel` reads as missing even
+               when passed, and an undeclared handler slips by unflagged. */
             const handled = (prop: { name: string; spread?: boolean }): boolean =>
                 prop.spread === true ||
-                prop.name.startsWith('on') ||
                 prop.name.startsWith('bind:') ||
                 prop.name.startsWith('class:') ||
                 prop.name.startsWith('style:') ||
@@ -427,12 +430,23 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                 builder.raw('\n')
                 for (const prop of dataProps) {
                     /* The key mapped to its source name (excess-prop errors land on the key);
-                       the value verbatim-mapped (wrong-type errors land on the value). */
+                       the value verbatim-mapped (wrong-type errors land on the value).
+                       Hyphenated names (`aria-label`, `data-*`) aren't valid identifiers, so
+                       they're wrapped in raw quotes — a string-literal key the parser accepts.
+                       The quotes are unmapped; an excess-prop error on the literal starts at the
+                       opening quote and overlaps the mapped name, clamping back onto it. */
+                    const needsQuoting = !/^[A-Za-z_$][\w$]*$/.test(prop.name)
+                    if (needsQuoting) {
+                        builder.raw('"')
+                    }
                     if (prop.nameLoc !== undefined) {
                         builder.mapped(prop.name, prop.nameLoc)
                     } else {
                         builder.raw(prop.name)
                     }
+                    if (needsQuoting) {
+                        builder.raw('"')
+                    }
                     builder.raw(': ')
                     builder.expr(prop.code, prop.loc)
                     builder.raw(',\n')

package/src/lib/ui/router.ts

@@ -253,9 +253,16 @@ export function router(
     }
     const onPageHide = (): void => {
         /* Mirror the live scroll into the active entry's state before it unloads, so a
-           reload can recover it — the in-memory bucket is gone and `manual` keeps the
-           browser from restoring. */
+           non-hydratable reload (which tears the SSR DOM down) can recover it from the
+           manual bucket. */
         historyEntries.persist()
+        /* Re-enable native scroll restoration for the NEXT document load (a reload): the
+           browser restores the SSR DOM's offset before paint, flash-free — where the
+           manual bucket, gated behind the async chunk import, would re-apply post-paint
+           (a visible scroll). The first paint flips back to `manual` for in-session nav. */
+        if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'auto'
+        }
     }
     const onClick = (event: MouseEvent): void => {
         /* Let the browser own anything that isn't a plain primary-button click:
@@ -297,12 +304,18 @@ export function router(
         navigatePath(destination.pathname + destination.search + destination.hash)
     }
     if (typeof window !== 'undefined') {
-        /* Own scroll restoration: the browser would restore against the pre-teardown
-           DOM. Adopt the initial entry's id (survives a reload) and stamp it onto the
-           landing entry — merging so any `scroll` a prior unload persisted into this
-           entry's state stays put for the first-paint `restore` to recover. */
+        /* Scroll restoration is the browser's job on a document load (reload / first
+           paint): native restoration runs BEFORE paint, so a hydrating in-place adopt
+           returns to the reload offset flash-free (`auto` here also self-heals an entry a
+           prior session left `manual`). The first paint then flips to `manual` (below) so
+           an in-session back/forward — which tears the page down and rebuilds — restores
+           against the new DOM instead of letting the browser restore against the
+           torn-down one; `onPageHide` flips back to `auto` for the next load. Still adopt
+           the initial entry's id (survives a reload) and stamp it onto the landing entry —
+           merging so any `scroll` a prior unload persisted stays put for a non-hydratable
+           first paint's manual `restore` to recover. */
         if ('scrollRestoration' in history) {
-            history.scrollRestoration = 'manual'
+            history.scrollRestoration = 'auto'
         }
         historyEntries.adopt(entryOf())
         const landingState = (history.state as AbideHistoryState | null) ?? {}
@@ -421,6 +434,7 @@ export function router(
                     ) {
                         divergence += 1
                     }
+                    const firstPaint = first
                     const hydrating = first && pageView?.hydratable === true
                     first = false
                     /* Same page, same layout chain — only params/url differ (e.g. stepping
@@ -483,11 +497,27 @@ export function router(
                         )
                         /* Reapply the destination entry's scroll once its DOM exists — a
                        back/forward restores its offset, a fresh nav scrolls to the `#hash`
-                       anchor (now built) or the top. Runs on the initial paint too: with
-                       `scrollRestoration='manual'` the browser does NOT restore a reload's
-                       offset, so first paint recovers it from the persisted `history.state`
-                       (a fresh load with no persisted offset falls through to hash/top). */
-                        historyEntries.restore(url.hash)
+                       anchor (now built) or the top. SKIPPED on a hydrating first paint:
+                       the SSR DOM is adopted in place, so the browser's native restoration
+                       already returned the entry to its reload offset before paint — the
+                       manual bucket, gated behind the async chunk import above, would only
+                       re-apply post-paint (a visible scroll = the flash). A non-hydratable
+                       first paint tore the SSR DOM down and rebuilt, so it still needs the
+                       manual restore (recovered from the persisted `history.state`). */
+                        if (!hydrating) {
+                            historyEntries.restore(url.hash)
+                        }
+                        /* Take over scroll restoration once abide owns the DOM: a later
+                       same-document back/forward must restore against the rebuilt page, so
+                       the browser must not. `onPageHide` flips back to `auto` so the next
+                       document load restores natively (flash-free) again. */
+                        if (
+                            firstPaint &&
+                            typeof history !== 'undefined' &&
+                            'scrollRestoration' in history
+                        ) {
+                            history.scrollRestoration = 'manual'
+                        }
                     }
                     /* Build / hydrate is the deterministic surface — a codegen defect or a
                        throw in user render code fails the SAME way every load, so reloading