@nifrajs/web-solid 5.5.0 → 5.6.0

package/src/route-props.ts

@@ -5,16 +5,22 @@ import { searchOfChain } from "@nifrajs/web/client"
 
 /**
  * The client half of the server's `RenderProps`, as getters so a settle re-renders only what reads the
- * changed field. Cast: a getter always exists where `exactOptionalPropertyTypes` expects absence.
+ * changed field. `derive` is `createMemo` on the client mount: `data` and `layoutData` then notify only
+ * when they change identity, so a reload that kept them (the router shares what it did not change)
+ * re-runs nothing that reads them - a `<For>` keeps its rows. Cast: a getter always exists where
+ * `exactOptionalPropertyTypes` expects absence.
  */
 export function routeProps(
   snapshot: () => RouterState,
   searchSchemas: MountRouterOptions["searchSchemas"],
   matchChains?: MountRouterOptions["matchChains"],
+  derive: <T>(read: () => T) => () => T = (read) => read,
 ): RenderProps {
+  const data = derive(() => snapshot().data)
+  const layoutData = derive(() => snapshot().layoutData)
   return {
     get data() {
-      return snapshot().data
+      return data()
     },
     // Each layout's own loader data. Without it a layout renders `data: null` on the client while the
     // server rendered it with its data.
@@ -22,7 +28,7 @@ export function routeProps(
       return snapshot().serverComponents
     },
     get layoutData() {
-      return snapshot().layoutData
+      return layoutData()
     },
     get actionData() {
       return snapshot().actionData
@@ -34,15 +40,19 @@ export function routeProps(
     get params() {
       return snapshot().params
     },
+    // While an intercept boundary holds a target the URL is the target's; the route's props describe
+    // the page underneath, so they read the page's own path.
     get path() {
-      return snapshot().path
+      const s = snapshot()
+      return s.intercepted?.pagePath ?? s.path
     },
     get search() {
       // The SAME searchOfChain the server ran, over this snapshot's URL - a same-route search change
       // updates in place (fine-grained), matching the SSR value on hydration.
       const s = snapshot()
-      const idx = s.path.indexOf("?")
-      return searchOfChain(searchSchemas?.[s.routeId] ?? [], idx === -1 ? "" : s.path.slice(idx))
+      const path = s.intercepted?.pagePath ?? s.path
+      const idx = path.indexOf("?")
+      return searchOfChain(searchSchemas?.[s.routeId] ?? [], idx === -1 ? "" : path.slice(idx))
     },
     get submission() {
       return snapshot().submission

package/src/router.ts

@@ -38,7 +38,9 @@ import {
   onCleanup,
   useContext,
 } from "solid-js"
+import { PageContext } from "./page-visibility.ts"
 
+export { onPageHide, onPageShow, usePageVisibility } from "./page-visibility.ts"
 export type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch }
 
 // Frozen empty search + a stable accessor for a `useSearch` used outside a nifra route tree.
@@ -126,17 +128,20 @@ export function useNavigate(): NavigateFunction {
  * predicate, and get back a reactive {@link Blocker} accessor. When a navigation (an anchor click,
  * `useNavigate`, or a browser back/forward) is intercepted, `blocker().state` becomes `"blocked"` and
  * `proceed`/`reset` go live - show a dialog and call `proceed()` to continue or `reset()` to stay put.
- * It also arms the browser's native "Leave site?" prompt on tab close / reload. Idle on the server and
- * before hydration.
+ * It also arms the browser's native "Leave site?" prompt on tab close / reload. Idle on the server,
+ * before hydration, and while a `keepAlive` page is hidden.
  *
  * The component body runs once, so to track a CHANGING flag pass a function -
  * `useBlocker(() => isDirty())` - not a bare signal accessor's current value. A constant boolean is fine.
  */
 export function useBlocker(shouldBlock: boolean | BlockerFunction): Accessor<Blocker> {
   const [blocker, setBlocker] = createSignal<Blocker>(IDLE_BLOCKER)
+  const slot = useContext(PageContext)
   onCleanup(
     registerBlocker(
-      (args) => (typeof shouldBlock === "function" ? shouldBlock(args) : shouldBlock),
+      (args) =>
+        slot?.hidden() !== true &&
+        (typeof shouldBlock === "function" ? shouldBlock(args) : shouldBlock),
       setBlocker,
     ),
   )

package/src/server-components/Outlet.tsx

@@ -61,7 +61,7 @@ function Range(props: {
     if (controller !== undefined)
       void (props.controller === undefined
         ? controller.dispose()
-        : controller.unmount(record.instance))
+        : controller.unmount(record.instance, host))
   })
   createEffect(() => {
     const state = props.state