@nifrajs/web-solid 5.5.1 → 5.7.0

package/src/query.ts

@@ -1,8 +1,10 @@
-import type { QueryClient, QueryState } from "@nifrajs/web"
+import type { QueryClient, QueryOptions, QueryState } from "@nifrajs/web"
 import {
   createNoClientRefetch,
+  fetchOnMount,
   getQueryClientSingleton,
   IDLE_QUERY_STATE,
+  noop,
 } from "@nifrajs/web/internal/query-runtime"
 /**
  * `@nifrajs/web-solid/query` - Solid bindings for the keyed query-cache. `createQuery(key, fn)` bridges a
@@ -18,7 +20,7 @@ import { type Accessor, createSignal, onCleanup, onMount } from "solid-js"
 
 /** Access the query client to imperatively `invalidateQueries(keyOrPrefix)` (e.g. after a mutation). */
 export function useQueryClient(): Pick<QueryClient, "invalidateQueries"> {
-  return getQueryClientSingleton() ?? { invalidateQueries: () => {} }
+  return getQueryClientSingleton() ?? { invalidateQueries: noop }
 }
 
 /** A query's reactive state accessor plus `refetch`. */
@@ -32,18 +34,21 @@ export interface CreateQueryResult<T> {
 /**
  * Bind the keyed query for `key`, fetched via `fn`. Returns a reactive `state()` accessor + `refetch`.
  * Concurrent `createQuery`s with the same key share one cache entry + one in-flight fetch (dedup).
- * Fetches on mount; SSR-idle. Call inside a component (owns the subscription).
+ * Fetches on mount; SSR-idle. Call inside a component (owns the subscription). `options.live` names
+ * the live keys that refetch it.
  */
-export function createQuery<T>(key: unknown, fn: () => Promise<T>): CreateQueryResult<T> {
-  const handle = getQueryClientSingleton()?.query<T>(key, fn)
+export function createQuery<T>(
+  key: unknown,
+  fn: () => Promise<T>,
+  options?: QueryOptions,
+): CreateQueryResult<T> {
+  const handle = getQueryClientSingleton()?.query<T>(key, fn, options)
   const [state, setState] = createSignal<QueryState<T>>(
     handle ? handle.snapshot() : IDLE_QUERY_STATE,
   )
   if (handle !== undefined) {
     onCleanup(handle.subscribe(() => setState(() => handle.snapshot())))
-    onMount(() => {
-      handle.fetch().catch(() => {})
-    })
+    onMount(fetchOnMount(handle))
     return { state, refetch: handle.refetch }
   }
   return {

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