@nifrajs/web-solid 3.5.0 → 4.0.0

package/dist/route-props.js

@@ -0,0 +1,50 @@
+// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
+// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
+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.
+ */
+export function routeProps(snapshot, searchSchemas, matchChains) {
+    return {
+        get data() {
+            return snapshot().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.
+        get layoutData() {
+            return snapshot().layoutData;
+        },
+        get actionData() {
+            return snapshot().actionData;
+        },
+        get pending() {
+            return snapshot().pending;
+        },
+        // The same `params`/`path` the server render received, so `useMatches` reports the same chain.
+        get params() {
+            return snapshot().params;
+        },
+        get path() {
+            return snapshot().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));
+        },
+        get submission() {
+            return snapshot().submission;
+        },
+        get boundaries() {
+            return snapshot().boundaries;
+        },
+        // The chain `useMatches` reports - the server passed the same one to the SSR render.
+        get matchChain() {
+            return matchChains?.[snapshot().routeId];
+        },
+    };
+}
+//# sourceMappingURL=route-props.js.map

package/dist/route-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-props.js","sourceRoot":"","sources":["../src/route-props.ts"],"names":[],"mappings":"AACA,mGAAmG;AACnG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,QAA2B,EAC3B,aAAkD,EAClD,WAA+C;IAE/C,OAAO;QACL,IAAI,IAAI;YACN,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAA;QACxB,CAAC;QACD,kGAAkG;QAClG,oCAAoC;QACpC,IAAI,UAAU;YACZ,OAAO,QAAQ,EAAE,CAAC,UAAU,CAAA;QAC9B,CAAC;QACD,IAAI,UAAU;YACZ,OAAO,QAAQ,EAAE,CAAC,UAAU,CAAA;QAC9B,CAAC;QACD,IAAI,OAAO;YACT,OAAO,QAAQ,EAAE,CAAC,OAAO,CAAA;QAC3B,CAAC;QACD,+FAA+F;QAC/F,IAAI,MAAM;YACR,OAAO,QAAQ,EAAE,CAAC,MAAM,CAAA;QAC1B,CAAC;QACD,IAAI,IAAI;YACN,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAA;QACxB,CAAC;QACD,IAAI,MAAM;YACR,+FAA+F;YAC/F,wEAAwE;YACxE,MAAM,CAAC,GAAG,QAAQ,EAAE,CAAA;YACpB,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YAC/B,OAAO,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;QAC7F,CAAC;QACD,IAAI,UAAU;YACZ,OAAO,QAAQ,EAAE,CAAC,UAAU,CAAA;QAC9B,CAAC;QACD,IAAI,UAAU;YACZ,OAAO,QAAQ,EAAE,CAAC,UAAU,CAAA;QAC9B,CAAC;QACD,qFAAqF;QACrF,IAAI,UAAU;YACZ,OAAO,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAA;QAC1C,CAAC;KACa,CAAA;AAClB,CAAC"}

package/dist/router.d.ts

@@ -1,5 +1,5 @@
 import type { InferOutput, StandardSchemaV1 } from "@nifrajs/core/server";
-import type { Blocker, BlockerFunction, BlockerState, NavigateFunction } from "@nifrajs/web";
+import type { Blocker, BlockerFunction, BlockerState, NavigateFunction, RenderProps, UIMatch } from "@nifrajs/web";
 /**
  * `@nifrajs/web-solid/router` - Solid routing bindings over the agnostic `@nifrajs/web` history layer:
  * `useNavigate` (programmatic navigation), `useBlocker` (the unsaved-changes guard), and `useSearch`
@@ -8,8 +8,22 @@ import type { Blocker, BlockerFunction, BlockerState, NavigateFunction } from "@
  * reads the accessor `compose` provides on SSR + client mount alike. Imports only `solid-js`. No JSX.
  */
 import { type Accessor, type Context } from "solid-js";
-export type { Blocker, BlockerFunction, BlockerState, NavigateFunction };
+export type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch };
 export declare const SearchContext: Context<Accessor<Record<string, unknown>> | undefined>;
+export declare const RenderPropsContext: Context<RenderProps | undefined>;
+/**
+ * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
+ * one owns, plus its `handle` export, as a reactive accessor. The same list on the server render and
+ * the client mount, so a layout can render breadcrumbs from its children's `handle`s without a
+ * hydration mismatch; it updates in place when a same-route navigation settles.
+ *
+ * ```tsx
+ * export const handle = { crumb: "Settings" }
+ * const matches = useMatches()
+ * const crumbs = () => matches().flatMap((m) => (m.handle as { crumb?: string } | undefined)?.crumb ?? [])
+ * ```
+ */
+export declare function useMatches(): Accessor<readonly UIMatch[]>;
 /**
  * The route's typed, validated search params as a reactive accessor - the SAME value the loader received
  * as `ctx.search`. SSR-correct: `compose` provides it from the URL server-side and from the identical

package/dist/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIzE,OAAO,KAAK,EACV,OAAO,EACP,eAAe,EACf,YAAY,EACZ,gBAAgB,EAGjB,MAAM,cAAc,CAAA;AASrB;;;;;;GAMG;AACH,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,OAAO,EAKb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAiBxE,eAAO,MAAM,aAAa,wDACoE,CAAA;AAG9F;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KAAK,QAAQ,CAC5F,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAChF,CAIA;AAED;;kCAEkC;AAClC,wBAAgB,WAAW,IAAI,gBAAgB,CAO9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,CASpF"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIzE,OAAO,KAAK,EACV,OAAO,EACP,eAAe,EACf,YAAY,EACZ,gBAAgB,EAGhB,WAAW,EACX,OAAO,EACR,MAAM,cAAc,CAAA;AAWrB;;;;;;GAMG;AACH,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,OAAO,EAMb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAA;AAiBjF,eAAO,MAAM,aAAa,wDACoE,CAAA;AAO9F,eAAO,MAAM,kBAAkB,kCACuC,CAAA;AAKtE;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,IAAI,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC,CAIzD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KAAK,QAAQ,CAC5F,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAChF,CAIA;AAED;;kCAEkC;AAClC,wBAAgB,WAAW,IAAI,gBAAgB,CAO9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,CASpF"}

package/dist/router.js

@@ -1,6 +1,8 @@
 // `/client`, not the root - these are DOM values, and the root's graph carries the
 // server, which Vite's dev server evaluates rather than tree-shakes.
 import { getBrowserNavigate, IDLE_BLOCKER, registerBlocker, resolveNavigate, } from "@nifrajs/web/client";
+// Its own subpath, so an app that never calls `useMatches` never bundles it.
+import { chainMatches } from "@nifrajs/web/internal/matches-runtime";
 /**
  * `@nifrajs/web-solid/router` - Solid routing bindings over the agnostic `@nifrajs/web` history layer:
  * `useNavigate` (programmatic navigation), `useBlocker` (the unsaved-changes guard), and `useSearch`
@@ -8,7 +10,7 @@ import { getBrowserNavigate, IDLE_BLOCKER, registerBlocker, resolveNavigate, } f
  * DOM-free bridges (`getBrowserNavigate` / `registerBlocker`, populated by `installHistory`); `useSearch`
  * reads the accessor `compose` provides on SSR + client mount alike. Imports only `solid-js`. No JSX.
  */
-import { createContext, createSignal, onCleanup, useContext, } from "solid-js";
+import { createContext, createMemo, createSignal, onCleanup, useContext, } from "solid-js";
 // Frozen empty search + a stable accessor for a `useSearch` used outside a nifra route tree.
 const EMPTY_SEARCH = Object.freeze({});
 const EMPTY_SEARCH_ACCESSOR = () => EMPTY_SEARCH;
@@ -23,6 +25,31 @@ const SEARCH_CONTEXT_SLOT = Symbol.for("nifra.web-solid.search-context");
 const searchContextSlot = globalThis;
 export const SearchContext = searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext();
 searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext;
+/** The props `compose` rendered the chain with - getters over the router snapshot on the client - which
+ * {@link useMatches} reads. A `globalThis` singleton for the same reason as {@link SearchContext}. */
+const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-solid.props-context");
+const propsContextSlot = globalThis;
+export const RenderPropsContext = propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext();
+propsContextSlot[PROPS_CONTEXT_SLOT] = RenderPropsContext;
+const NO_MATCHES = Object.freeze([]);
+/**
+ * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
+ * one owns, plus its `handle` export, as a reactive accessor. The same list on the server render and
+ * the client mount, so a layout can render breadcrumbs from its children's `handle`s without a
+ * hydration mismatch; it updates in place when a same-route navigation settles.
+ *
+ * ```tsx
+ * export const handle = { crumb: "Settings" }
+ * const matches = useMatches()
+ * const crumbs = () => matches().flatMap((m) => (m.handle as { crumb?: string } | undefined)?.crumb ?? [])
+ * ```
+ */
+export function useMatches() {
+    const props = useContext(RenderPropsContext);
+    if (props === undefined)
+        return () => NO_MATCHES;
+    return createMemo(() => chainMatches(props));
+}
 /**
  * The route's typed, validated search params as a reactive accessor - the SAME value the loader received
  * as `ctx.search`. SSR-correct: `compose` provides it from the URL server-side and from the identical

package/dist/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAYA,mFAAmF;AACnF,qEAAqE;AACrE,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B;;;;;;GAMG;AACH,OAAO,EAGL,aAAa,EACb,YAAY,EACZ,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAA;AAIjB,6FAA6F;AAC7F,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACzE,MAAM,qBAAqB,GAAsC,GAAG,EAAE,CAAC,YAAY,CAAA;AAEnF;;;;;;2BAM2B;AAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAA;AACxE,MAAM,iBAAiB,GAAG,UAEzB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GACxB,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,aAAa,EAAqC,CAAA;AAC9F,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAA;AAEtD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS;IAGvB,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,qBAAqB,CAEzD,CAAA;AACH,CAAC;AAED;;kCAEkC;AAClC,MAAM,UAAU,WAAW;IACzB,OAAO,CAAC,CAAC,EAAyC,EAAE,OAAyB,EAAE,EAAE;QAC/E,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;QACrC,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;QAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACzC,CAAC,CAAqB,CAAA;AACxB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAU,YAAY,CAAC,CAAA;IACjE,SAAS,CACP,eAAe,CACb,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAC/E,UAAU,CACX,CACF,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAcA,mFAAmF;AACnF,qEAAqE;AACrE,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B,6EAA6E;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACpE;;;;;;GAMG;AACH,OAAO,EAGL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAA;AAIjB,6FAA6F;AAC7F,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACzE,MAAM,qBAAqB,GAAsC,GAAG,EAAE,CAAC,YAAY,CAAA;AAEnF;;;;;;2BAM2B;AAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAA;AACxE,MAAM,iBAAiB,GAAG,UAEzB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GACxB,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,aAAa,EAAqC,CAAA;AAC9F,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAA;AAEtD;sGACsG;AACtG,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAA;AACtE,MAAM,gBAAgB,GAAG,UAAyE,CAAA;AAClG,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,aAAa,EAAe,CAAA;AACtE,gBAAgB,CAAC,kBAAkB,CAAC,GAAG,kBAAkB,CAAA;AAEzD,MAAM,UAAU,GAAuB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAExD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,KAAK,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC5C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAA;IAChD,OAAO,UAAU,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS;IAGvB,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,qBAAqB,CAEzD,CAAA;AACH,CAAC;AAED;;kCAEkC;AAClC,MAAM,UAAU,WAAW;IACzB,OAAO,CAAC,CAAC,EAAyC,EAAE,OAAyB,EAAE,EAAE;QAC/E,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;QACrC,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;QAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACzC,CAAC,CAAqB,CAAA;AACxB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAU,YAAY,CAAC,CAAA;IACjE,SAAS,CACP,eAAe,CACb,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAC/E,UAAU,CACX,CACF,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nifrajs/web-solid",
-  "version": "3.5.0",
-  "description": "Solid render adapter for @nifrajs/web - SSR + hydration + the Solid Babel build plugin.",
+  "version": "4.0.0",
+  "description": "Solid render adapter for @nifrajs/web - SSR + hydration, with the Solid Babel build plugin (@nifrajs/web-solid/plugin).",
   "keywords": [
     "bun",
     "typescript",
@@ -14,6 +14,9 @@
     "full-stack"
   ],
   "type": "module",
+  "nifra": {
+    "environment": "library"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,6 +31,11 @@
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"
     },
+    "./plugin": {
+      "bun": "./src/plugin.ts",
+      "types": "./dist/plugin.d.ts",
+      "default": "./dist/plugin.js"
+    },
     "./await": {
       "bun": "./src/await.ts",
       "types": "./dist/await.d.ts",
@@ -99,10 +107,10 @@
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@nifrajs/core": "3.5.0",
-    "@nifrajs/i18n": "3.5.0",
-    "@nifrajs/image": "3.5.0",
-    "@nifrajs/web": "3.5.0",
+    "@nifrajs/core": "4.0.0",
+    "@nifrajs/i18n": "4.0.0",
+    "@nifrajs/image": "4.0.0",
+    "@nifrajs/web": "4.0.0",
     "babel-preset-solid": "^1.9.3",
     "solid-refresh": "^0.7.8"
   },

package/src/client.ts

@@ -1,7 +1,4 @@
 import type { MountRouterOptions, RenderProps } from "@nifrajs/web"
-// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
-// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
-import { searchOfChain } from "@nifrajs/web/client"
 /**
  * @nifrajs/web-solid/client - Solid client runtime. `hydrate` hydrates a single SSR'd route;
  * `mountRouter` hydrates the initial route then drives navigation through a Solid signal - so a
@@ -14,6 +11,7 @@ import { createSignal } from "solid-js"
 import { hydrate as solidHydrate, render as solidRender } from "solid-js/web"
 import { compose } from "./compose.ts"
 import { setMountedRouter } from "./fetcher.ts"
+import { routeProps } from "./route-props.ts"
 
 // The `_error` boundary chain element - defined in its own module, re-exported here so nifra's client
 // codegen resolves it from `@nifrajs/web-solid/client` alongside `mountRouter`.
@@ -37,7 +35,7 @@ export function hydrate(chain: readonly unknown[], props: RenderProps, container
  *   they don't shift Solid's structural hydration keys - unlike a `<Show>`, which would.)
  */
 export function mountRouter(options: MountRouterOptions): void {
-  const { router, routes, searchSchemas, container } = options
+  const { router, routes, searchSchemas, matchChains, container } = options
   setMountedRouter(router) // expose it to createFetcher/useFetchers (same page, client-only)
   const el = container as Element
 
@@ -51,50 +49,26 @@ export function mountRouter(options: MountRouterOptions): void {
     mountedRouteId = initial.routeId
     const renderer = first ? solidHydrate : solidRender
     dispose = renderer(() => {
-      // Signal owned by THIS render root (so it's never ownerless). `props` are getters over it; a
+      // Signal owned by THIS render root (so it's never ownerless). `routeProps` are getters over it; a
       // same-route settle calls `update(snapshot)` and the reading components update in place - no
-      // recompose, so the layout chain + focus + scroll survive. Cast bridges
-      // `exactOptionalPropertyTypes` (a getter is always present, returning `undefined` when idle -
-      // the documented "absent on idle" semantics for `submission`).
+      // recompose, so the layout chain + focus + scroll survive.
       const [snapshot, setSnapshot] = createSignal(initial)
       update = setSnapshot
-      const props = {
-        get data() {
-          return snapshot().data
-        },
-        get actionData() {
-          return snapshot().actionData
-        },
-        get pending() {
-          return snapshot().pending
-        },
-        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),
-          )
-        },
-        get submission() {
-          return snapshot().submission
-        },
-        get boundaries() {
-          return snapshot().boundaries
-        },
-      } as RenderProps
       // The matched chain is fixed for this mount (routeId is constant here); a route *change* disposes
       // and re-mounts below, so the root render fn reads no signal and never re-runs on its own.
-      return compose(routes[initial.routeId] ?? [], props)()
+      return compose(
+        routes[initial.routeId] ?? [],
+        routeProps(snapshot, searchSchemas, matchChains),
+      )()
     }, el)
   }
 
   mount(true)
   router.subscribe(() => {
     const snapshot = router.snapshot()
-    if (snapshot.pending) return // skip the in-flight tick; act once settled
+    // Skip the in-flight tick and act once settled - unless the store names a different chain while
+    // pending, which is a `_loading` page taking the page slot for the navigation in flight.
+    if (snapshot.pending && snapshot.routeId === mountedRouteId) return
     if (snapshot.routeId === mountedRouteId) {
       update?.(snapshot) // same route → reactive in-place update (preserves layout/focus/scroll)
     } else {

package/src/compose.ts

@@ -1,6 +1,6 @@
 import type { RenderProps } from "@nifrajs/web"
 import { type Component, createComponent, type JSX } from "solid-js"
-import { SearchContext } from "./router.ts"
+import { RenderPropsContext, SearchContext } from "./router.ts"
 
 // Frozen empty search so a render with no search context has a stable provider value.
 const EMPTY_SEARCH: Readonly<Record<string, unknown>> = Object.freeze({})
@@ -22,10 +22,13 @@ export function compose(chain: readonly unknown[], props: RenderProps): () => JS
     // Each layout receives its own loader data at its own index. Layouts are the chain's leading
     // prefix, so `layoutData[i]` belongs to `chain[i]`; anything past that end (a client-only `_error`
     // boundary marker, the page) reads `undefined` and is unaffected.
-    const layoutData = props.layoutData?.[i] ?? null
+    // Read through a getter: on the client `props` are getters over the router snapshot, so a
+    // same-route settle that brings new layout data updates the layout in place.
     node = () =>
       createComponent(Layout, {
-        data: layoutData,
+        get data() {
+          return props.layoutData?.[i] ?? null
+        },
         ...(props.boundaries !== undefined ? { boundaries: props.boundaries } : {}),
         children: child(),
       })
@@ -37,7 +40,12 @@ export function compose(chain: readonly unknown[], props: RenderProps): () => JS
     createComponent(SearchContext.Provider, {
       value: () => (props.search ?? EMPTY_SEARCH) as Record<string, unknown>,
       get children() {
-        return inner()
+        return createComponent(RenderPropsContext.Provider, {
+          value: props,
+          get children() {
+            return inner()
+          },
+        })
       },
     })
 }

package/src/i18n.ts

@@ -5,7 +5,15 @@
  * negotiated catalog on the server, and the client rebuilds the same formatter on hydrate (no
  * mismatch). Imports only `solid-js` + `@nifrajs/i18n`; no JSX (`createComponent`).
  */
-import { createFormatter, type Formatter, type Messages } from "@nifrajs/i18n"
+import {
+  createFormatter,
+  type Formatter,
+  type FormatterOptions,
+  type MessageKey,
+  type RegisteredMessages,
+  type Translation,
+} from "@nifrajs/i18n"
+import { type RichChunks, type RichRenderer, renderRich } from "@nifrajs/i18n/rich"
 import {
   type Accessor,
   createComponent,
@@ -14,19 +22,29 @@ import {
   type JSX,
   useContext,
 } from "solid-js"
+import { Dynamic } from "solid-js/web"
 
 const I18nContext = createContext<Accessor<Formatter>>()
 
-export interface I18nProviderProps {
+export interface I18nProviderProps extends FormatterOptions {
   readonly locale: string
-  readonly messages: Messages
+  /** The catalog for `locale`, checked against the registered catalog type when one is declared. */
+  readonly messages: Translation
   readonly children?: JSX.Element
 }
 
-/** Provide a {@link Formatter} (built from `locale` + `messages`) to the subtree. Memoized on
- * `locale`/`messages`, so switching locale rebuilds it. */
+/** Provide a {@link Formatter} (built from `locale` + `messages`, with the optional `fallback`,
+ * `onMissing`, `timeZone` and `numberingSystem` of `createFormatter`) to the subtree. Memoized
+ * on those props, so switching locale rebuilds it. */
 export function I18nProvider(props: I18nProviderProps): JSX.Element {
-  const formatter = createMemo(() => createFormatter(props.locale, props.messages))
+  const formatter = createMemo(() =>
+    createFormatter(props.locale, props.messages, {
+      fallback: props.fallback,
+      onMissing: props.onMissing,
+      timeZone: props.timeZone,
+      numberingSystem: props.numberingSystem,
+    }),
+  )
   return createComponent(I18nContext.Provider, {
     value: formatter,
     get children() {
@@ -35,7 +53,7 @@ export function I18nProvider(props: I18nProviderProps): JSX.Element {
   })
 }
 
-/** Read the current {@link Formatter} (`{ locale, t, n, d }`). Throws if no `<I18nProvider>` is above.
+/** Read the current {@link Formatter} (`{ locale, t, get, n, d }`). Throws if no `<I18nProvider>` is above.
  * nifra switches locale by re-navigating, which re-runs the consuming component with the new catalog. */
 export function useT(): Formatter {
   const formatter = useContext(I18nContext)
@@ -44,3 +62,29 @@ export function useT(): Formatter {
   }
   return formatter()
 }
+
+/** Tag handlers for {@link rich}, by tag name: each receives its tag's content as one node. */
+export type RichTags = Readonly<Record<string, (content: JSX.Element) => JSX.Element>>
+
+const join = (chunks: RichChunks<JSX.Element>): JSX.Element =>
+  chunks.length === 0 ? undefined : chunks.length === 1 ? chunks[0] : [...chunks]
+const SOLID_RICH: RichRenderer<JSX.Element> = {
+  join,
+  lineBreak: () => createComponent(Dynamic, { component: "br" }),
+}
+
+/**
+ * The message at `key` with its tags rendered by `tags`, as Solid nodes - no HTML, no `innerHTML`.
+ * `"Read the <link>terms</link>"` with `{ link: (content) => <a href="/terms">{content}</a> }`
+ * renders the link around "terms"; a tag with no handler renders its content as text, `<br/>` is a
+ * `<br>`, and interpolated values are always text. It runs once: wrap the call in a function
+ * (`{() => rich(t, key, tags, { n: count() })}`) to track signals in `vars`. See `@nifrajs/i18n/rich`.
+ */
+export function rich<M extends object = RegisteredMessages>(
+  formatter: Formatter<M>,
+  key: MessageKey<M>,
+  tags?: RichTags,
+  vars?: Readonly<Record<string, unknown>>,
+): JSX.Element {
+  return renderRich(SOLID_RICH, formatter, key, tags, vars)
+}

package/src/index.ts

@@ -1,24 +1,16 @@
 /**
- * @nifrajs/web-solid - the Solid render adapter for @nifrajs/web (server side) + the Solid Babel
- * Bun-plugin. Streaming SSR via `renderToStream` + `generateHydrationScript`; the layout-chain
- * fold is in `./compose`. Client hydration lives in `@nifrajs/web-solid/client` (Solid's browser
- * build).
+ * @nifrajs/web-solid - the Solid render adapter for @nifrajs/web (server side). Streaming SSR via
+ * `renderToStream` + `generateHydrationScript`; the layout-chain fold is in `./compose`. Client
+ * hydration lives in `@nifrajs/web-solid/client` (Solid's browser build), and the Solid Babel
+ * Bun-plugin in `@nifrajs/web-solid/plugin`.
  */
-import { transformAsync } from "@babel/core"
-// @ts-expect-error - no type declarations published
-import presetTypeScript from "@babel/preset-typescript"
 import type { RenderAdapter } from "@nifrajs/web"
-import { devServerCompile, normalizeFilePath, rewriteSsrImports } from "@nifrajs/web/plugins/kit"
-// @ts-expect-error - no type declarations published
-import presetSolid from "babel-preset-solid"
-import type { BunPlugin } from "bun"
 import {
   generateHydrationScript,
   renderToStream as solidRenderToStream,
   renderToString as solidRenderToString,
 } from "solid-js/web"
 import { compose } from "./compose.ts"
-import solidRefreshBunHot, { SOLID_HOT_MODULE } from "./refresh-babel.ts"
 
 const HYDRATION_HEAD = generateHydrationScript()
 
@@ -32,98 +24,22 @@ export const solidAdapter: RenderAdapter = {
   renderToString(chain, props) {
     return solidRenderToString(compose(chain, props))
   },
-  renderToStream(chain, props) {
+  renderToStream(chain, props, options) {
     // Solid's `renderToStream` streams `Uint8Array` chunks into a Web `WritableStream` via
     // `pipeTo` (fire-and-forget - returns void); pipe into a TransformStream and hand back the
     // readable side. Suspense boundaries stream as they resolve; `generateHydrationScript()` (in
     // <head>) seeds client hydration. A render failure errors `ts.readable`, which `renderPage`
-    // surfaces on the response body.
+    // surfaces on the response body. The nonce reaches the resource and boundary scripts Solid streams.
     const ts = new TransformStream<Uint8Array, Uint8Array>()
-    solidRenderToStream(compose(chain, props)).pipeTo(ts.writable)
+    const app = compose(chain, props)
+    const stream =
+      options?.nonce === undefined
+        ? solidRenderToStream(app)
+        : solidRenderToStream(app, { nonce: options.nonce })
+    stream.pipeTo(ts.writable)
     return ts.readable
   },
   hydrationHead() {
     return HYDRATION_HEAD
   },
 }
-
-/**
- * Bun build/runtime plugin that compiles Solid components with Babel - `generate: "ssr"`
- * for the server, `"dom"` for the client, `hydratable` so SSR and hydrate align. Solid's
- * reactive-JSX compiler ships only as a Babel plugin (no swc/native port); this runs at
- * build time, on `.tsx` files only.
- *
- * Under a dev server the client half additionally runs `solid-refresh`, which is what makes an edit
- * patch the running component tree instead of reloading the page - see {@link setupSolidRefresh}.
- */
-export function solidBunPlugin(generate: "dom" | "ssr"): BunPlugin {
-  return {
-    name: `nifra-solid-${generate}`,
-    setup(build) {
-      const refresh =
-        generate === "dom" && devServerCompile() ? setupSolidRefresh(build) : undefined
-      // Match `.tsx`, tolerating a `?query` suffix (dev servers append one to bust Bun's import
-      // cache); strip it before reading the file off disk.
-      build.onLoad({ filter: /\.tsx(\?|$)/ }, async (args) => {
-        const path = normalizeFilePath(args.path)
-        const source = await Bun.file(path).text()
-        const result = await transformAsync(source, {
-          filename: path,
-          // babel applies presets last→first: strip TS first, then Solid transforms JSX.
-          presets: [
-            [presetSolid, { generate, hydratable: true }],
-            [presetTypeScript, { onlyRemoveTypeImports: true }],
-          ],
-          ...(refresh !== undefined
-            ? { plugins: [[await refresh.babel(), REFRESH_OPTIONS], solidRefreshBunHot] }
-            : {}),
-        })
-        return { contents: rewriteSsrImports(result?.code ?? "", path, generate), loader: "js" }
-      })
-    },
-  }
-}
-
-/**
- * `"esm"` is the closest of `solid-refresh`'s bundler modes to what Bun implements: one
- * `accept(mod => …)` per module, falling back to `invalidate()` when a component's signature changed too
- * much to patch in place. `"vite"` differs only by also calling a bare `accept()` first, which would make
- * every module self-accepting twice over. The call it emits is still Vite-shaped, and
- * `solidRefreshBunHot` translates it.
- *
- * `jsx: false` turns OFF the pass that lifts a component's returned JSX into a second, nested component.
- * That extra component is an extra hydration level on the client and none on the server, so with it on,
- * every hydratable page dies on `Unable to find DOM nodes for hydration key` before a single edit. It buys
- * finer-grained patching of markup-only edits; correct hydration is worth more.
- */
-const REFRESH_OPTIONS = { bundler: "esm", jsx: false } as const
-
-/**
- * Wire `solid-refresh` into a dev-server client compile.
- *
- * Solid components are compiled reactive closures, not functions re-run on render, so a new module
- * version cannot simply replace the old one - `solid-refresh` wraps every component in a registry and, on
- * an update, patches the live instances, keeping signal state. Without it the update finds no accepting
- * module, bubbles up to the generated entry, and Bun reloads the whole page.
- *
- * The Babel half loads lazily: it is dev-only, and this module is the adapter root every Solid SSR
- * server imports.
- *
- * Both runtime specifiers need pinning, because the transform emits them INTO the app's own files, where
- * a bare specifier resolves against the app. `solid-refresh` is only a transitive dependency there and
- * need not be hoisted; `nifra:solid-hot` is this package's own bridge module and has no app-side name at
- * all. Resolving both here is what keeps the emitted imports working without an app depending on either.
- */
-function setupSolidRefresh(build: Parameters<BunPlugin["setup"]>[0]): {
-  babel: () => Promise<unknown>
-} {
-  const runtime = Bun.resolveSync("solid-refresh", import.meta.dir)
-  build.onResolve({ filter: /^solid-refresh$/ }, () => ({ path: runtime }))
-  // `.ts` from source (Bun takes the package's `bun` export condition), `.js` from the published build.
-  const bridge = `${import.meta.dir}/refresh-hot${import.meta.path.endsWith(".ts") ? ".ts" : ".js"}`
-  build.onResolve({ filter: new RegExp(`^${SOLID_HOT_MODULE}$`) }, () => ({ path: bridge }))
-  let babel: Promise<unknown> | undefined
-  return {
-    babel: () => (babel ??= import("solid-refresh/babel").then((m) => m.default)),
-  }
-}

package/src/mdx-runtime.ts

@@ -4,7 +4,7 @@
  * component references, but Solid can't `createComponent("h1")` - its JSX is compile-time. So we map
  * each Markdown-output tag to a Solid component that renders it via `<Dynamic component={tag}>`.
  */
-import { createComponent } from "solid-js"
+import { createComponent, type JSX, mergeProps } from "solid-js"
 import { Dynamic } from "solid-js/web"
 
 // The HTML element set CommonMark + GFM produce. An explicit map (not a Proxy): `@mdx-js` *spreads* the
@@ -42,13 +42,18 @@ const MARKDOWN_TAGS = [
   "ul",
 ] as const
 
-const components: Record<string, (props: Record<string, unknown>) => unknown> = {}
+const components: Record<string, (props: Record<string, unknown>) => JSX.Element> = {}
 for (const tag of MARKDOWN_TAGS) {
-  components[tag] = (props) => createComponent(Dynamic, Object.assign({ component: tag }, props))
+  // The tag merges last, so a `component` prop in the content cannot swap the element, and
+  // `mergeProps` keeps Solid's prop getters live where a plain copy would read them once.
+  components[tag] = (props) => createComponent(Dynamic, mergeProps(props, { component: tag }))
 }
 
 /** Returns the intrinsic-element → Solid-component map MDX content uses. Merge in your own overrides by
  * passing `components` to the MDX content component (they take precedence). */
-export function useMDXComponents(): Record<string, (props: Record<string, unknown>) => unknown> {
+export function useMDXComponents(): Record<
+  string,
+  (props: Record<string, unknown>) => JSX.Element
+> {
   return components
 }