npm - @barefootjs/router - Versions diffs - 0.29.0 → 0.30.0 - Mend

@barefootjs/router 0.29.0 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -64,6 +64,13 @@ setup step.
   state, media playback, scroll, and hydrated scope survive — matched between
   documents by the attribute value (or `id`). A no-op when no element is marked;
   pass `morph: false` for a plain swap.
+- **Swap in flight** (`data-bf-navigating`): set on `<html>` for the duration of
+  a region swap. A swap commits the new markup *before* re-hydrating it, so
+  "present in the DOM" and "interactive" are two moments — until this clears, a
+  swapped-in island may still be server markup with no handlers, and a click on
+  it is lost. Style off it for a loading indicator, or wait for its absence
+  before driving new content. `NAVIGATING_ATTR` is exported so callers need not
+  hard-code the string. Query-only navigations swap nothing and never set it.
 ## `<head>`: metadata is reconciled, resources are not

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { startRouter, navigate } from './router.ts';
+export { startRouter, navigate, NAVIGATING_ATTR } from './router.ts';
 export type { RouterOptions, NavigateOptions, Router } from './types.ts';
 export { BF_REGION } from '@barefootjs/shared';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;~~AACnD~~,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACpE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/index.js CHANGED Viewed

@@ -420,6 +420,7 @@ function ensureAnnouncer() {
 // src/router.ts
 var active = null;
+var NAVIGATING_ATTR = "data-bf-navigating";
 function startRouter(options = {}) {
   if (typeof document === "undefined" || typeof window === "undefined") {
     return { stop() {}, navigate: async () => {}, prefetch() {} };
@@ -564,6 +565,7 @@ async function navigate(url, options = {}) {
   state.inflight?.abort();
   const controller = new AbortController;
   state.inflight = controller;
+  setNavigating(true);
   try {
     const snap = await loadPage(state, target.href);
     if (controller.signal.aborted)
@@ -633,10 +635,21 @@ async function navigate(url, options = {}) {
       announceNavigation(title);
     }
   } finally {
-    if (state.inflight === controller)
+    if (state.inflight === controller) {
       state.inflight = null;
+      setNavigating(false);
+    }
   }
 }
+function setNavigating(on) {
+  const root = typeof document !== "undefined" ? document.documentElement : null;
+  if (!root)
+    return;
+  if (on)
+    root.setAttribute(NAVIGATING_ATTR, "");
+  else
+    root.removeAttribute(NAVIGATING_ATTR);
+}
 function prefetch(url) {
   const state = active;
   if (!state)
@@ -731,5 +744,6 @@ import { BF_REGION as BF_REGION3 } from "@barefootjs/shared";
 export {
   startRouter,
   navigate,
+  NAVIGATING_ATTR,
   BF_REGION3 as BF_REGION
 };

package/dist/router.d.ts CHANGED Viewed

@@ -8,6 +8,12 @@
  * the incoming ones, with last-wins semantics across overlapping navigations.
  */
 import type { NavigateOptions, Router, RouterOptions } from './types.ts';
+/**
+ * Document-root attribute marking a region swap as in flight — see
+ * {@link setNavigating}. Public: a page may style off it (a loading bar), and a
+ * test may wait for its absence to know the swapped-in islands are live.
+ */
+export declare const NAVIGATING_ATTR = "data-bf-navigating";
 export declare function startRouter(options?: RouterOptions): Router;
 export declare function navigate(url: string, options?: NavigateOptions): Promise<void>;
 //# sourceMappingURL=router.d.ts.map

package/dist/router.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAwBH,OAAO,KAAK,EACV,eAAe,EAEf,MAAM,EACN,aAAa,EAEd,MAAM,YAAY,CAAA;AAInB,wBAAgB,WAAW,CAAC,OAAO,GAAE,aAAkB,GAAG,MAAM,CAkE/D;AA4FD,wBAAsB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,~~CAsKxF~~"}
1	+ {"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAwBH,OAAO,KAAK,EACV,eAAe,EAEf,MAAM,EACN,aAAa,EAEd,MAAM,YAAY,CAAA;AAInB;;;;GAIG;AACH,eAAO,MAAM,eAAe,uBAAuB,CAAA;AAEnD,wBAAgB,WAAW,CAAC,OAAO,GAAE,aAAkB,GAAG,MAAM,CAkE/D;AA4FD,wBAAsB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,CA6KxF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/router",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Backend-agnostic partial-navigation client router for BarefootJS — swaps only the page region and re-hydrates the islands inside it",
   "type": "module",
   "main": "./dist/index.js",
@@ -40,7 +40,7 @@
     "directory": "packages/router"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.29.0"
+    "@barefootjs/shared": "0.30.0"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.14.0"
@@ -51,7 +51,7 @@
     }
   },
   "devDependencies": {
-    "@barefootjs/client": "^0.29.0",
+    "@barefootjs/client": "^0.30.0",
     "@happy-dom/global-registrator": "^20.0.11",
     "typescript": "^5.0.0"
   }

package/src/index.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { startRouter, navigate } from './router.ts'
+export { startRouter, navigate, NAVIGATING_ATTR } from './router.ts'
 export type { RouterOptions, NavigateOptions, Router } from './types.ts'
 // Re-exported so server-side helpers can reference the swappable-region marker.

package/src/router.ts CHANGED Viewed

@@ -40,6 +40,13 @@ import type {
 let active: RouterState | null = null
+/**
+ * Document-root attribute marking a region swap as in flight — see
+ * {@link setNavigating}. Public: a page may style off it (a loading bar), and a
+ * test may wait for its absence to know the swapped-in islands are live.
+ */
+export const NAVIGATING_ATTR = 'data-bf-navigating'
 export function startRouter(options: RouterOptions = {}): Router {
   // SSR / non-DOM: a no-op handle, never throws.
   if (typeof document === 'undefined' || typeof window === 'undefined') {
@@ -238,6 +245,7 @@ export async function navigate(url: string, options: NavigateOptions = {}): Prom
   state.inflight?.abort()
   const controller = new AbortController()
   state.inflight = controller
+  setNavigating(true)
   try {
     const snap = await loadPage(state, target.href)
@@ -362,10 +370,42 @@ export async function navigate(url: string, options: NavigateOptions = {}): Prom
       announceNavigation(title)
     }
   } finally {
-    if (state.inflight === controller) state.inflight = null
+    // Only the CURRENT navigation may clear the flag. A superseded one reaches
+    // this block while its successor is still mid-swap, and clearing there
+    // would announce "interactive" over content that is still being rebuilt.
+    if (state.inflight === controller) {
+      state.inflight = null
+      setNavigating(false)
+    }
   }
 }
+/**
+ * Mark a region swap as in flight on the document root
+ * (`data-bf-navigating`), so a caller can tell "the new markup is in the DOM"
+ * from "the new markup is INTERACTIVE".
+ *
+ * Those are two different moments and the gap between them is real: the swap
+ * is committed, and only then does step 5 re-hydrate each region — which
+ * `defaultRehydrate` may reach through a dynamic import of
+ * `@barefootjs/client/runtime` (`seams.ts`). Until that resolves the
+ * swapped-in islands are server markup with no handlers attached, so a click
+ * lands on nothing and is silently lost. Nothing observable distinguished the two states before this,
+ * which made "wait for the element, then click it" look correct and fail only
+ * under load.
+ *
+ * Set where the swap sequence begins and cleared in its `finally`, so it spans
+ * dispose → module load → history → re-hydrate → focus. Query-only
+ * navigations return before that sequence and never set it: they re-render
+ * nothing and swap nothing, so there is no interactivity gap to describe.
+ */
+function setNavigating(on: boolean): void {
+  const root = typeof document !== 'undefined' ? document.documentElement : null
+  if (!root) return
+  if (on) root.setAttribute(NAVIGATING_ATTR, '')
+  else root.removeAttribute(NAVIGATING_ATTR)
+}
 // --- Prefetch -------------------------------------------------------------
 function prefetch(url: string): void {