Merge branch 'dev' into brophdawg11/transitions

Author: brophdawg11

.changeset/long-brooms-shake.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+[UNSTABLE] Add `unstable_pattern` to the parameters for client side `unstable_onError`, refactor how it's called by `RouterProvider` to avoid potential strict mode issues

docs/api/data-routers/createBrowserRouter.md

@@ -329,6 +329,55 @@ const router = createBrowserRouter(
 );
 ```
 
+### opts.unstable_instrumentations
+
+Array of instrumentation objects allowing you to instrument the router and
+individual routes prior to router initialization (and on any subsequently
+added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+mostly useful for observability such as wrapping navigations, fetches,
+as well as route loaders/actions/middlewares with logging and/or performance
+tracing.
+
+```tsx
+let router = createBrowserRouter(routes, {
+  unstable_instrumentations: [logging]
+});
+
+
+let logging = {
+  router({ instrument }) {
+    instrument({
+      navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
+      fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
+    });
+  },
+  route({ instrument, id }) {
+    instrument({
+      middleware: (impl, info) => logExecution(
+        `middleware ${info.request.url} (route ${id})`,
+        impl
+      ),
+      loader: (impl, info) => logExecution(
+        `loader ${info.request.url} (route ${id})`,
+        impl
+      ),
+      action: (impl, info) => logExecution(
+        `action ${info.request.url} (route ${id})`,
+        impl
+      ),
+    })
+  }
+};
+
+async function logExecution(label: string, impl: () => Promise<void>) {
+  let start = performance.now();
+  console.log(`start ${label}`);
+  await impl();
+  let duration = Math.round(performance.now() - start);
+  console.log(`end ${label} (${duration}ms)`);
+}
+```
+
 ### opts.patchRoutesOnNavigation
 
 Lazily define portions of the route tree on navigations.

docs/api/data-routers/createHashRouter.md

@@ -142,6 +142,55 @@ const router = createBrowserRouter(
 );
 ```
 
+### opts.unstable_instrumentations
+
+Array of instrumentation objects allowing you to instrument the router and
+individual routes prior to router initialization (and on any subsequently
+added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+mostly useful for observability such as wrapping navigations, fetches,
+as well as route loaders/actions/middlewares with logging and/or performance
+tracing.
+
+```tsx
+let router = createBrowserRouter(routes, {
+  unstable_instrumentations: [logging]
+});
+
+
+let logging = {
+  router({ instrument }) {
+    instrument({
+      navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
+      fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
+    });
+  },
+  route({ instrument, id }) {
+    instrument({
+      middleware: (impl, info) => logExecution(
+        `middleware ${info.request.url} (route ${id})`,
+        impl
+      ),
+      loader: (impl, info) => logExecution(
+        `loader ${info.request.url} (route ${id})`,
+        impl
+      ),
+      action: (impl, info) => logExecution(
+        `action ${info.request.url} (route ${id})`,
+        impl
+      ),
+    })
+  }
+};
+
+async function logExecution(label: string, impl: () => Promise<void>) {
+  let start = performance.now();
+  console.log(`start ${label}`);
+  await impl();
+  let duration = Math.round(performance.now() - start);
+  console.log(`end ${label} (${duration}ms)`);
+}
+```
+
 ### opts.dataStrategy
 
 Override the default data strategy of running loaders in parallel.

docs/api/data-routers/createMemoryRouter.md

@@ -75,6 +75,55 @@ Initial entries in the in-memory history stack
 
 Index of `initialEntries` the application should initialize to
 
+### opts.unstable_instrumentations
+
+Array of instrumentation objects allowing you to instrument the router and
+individual routes prior to router initialization (and on any subsequently
+added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+mostly useful for observability such as wrapping navigations, fetches,
+as well as route loaders/actions/middlewares with logging and/or performance
+tracing.
+
+```tsx
+let router = createBrowserRouter(routes, {
+  unstable_instrumentations: [logging]
+});
+
+
+let logging = {
+  router({ instrument }) {
+    instrument({
+      navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
+      fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
+    });
+  },
+  route({ instrument, id }) {
+    instrument({
+      middleware: (impl, info) => logExecution(
+        `middleware ${info.request.url} (route ${id})`,
+        impl
+      ),
+      loader: (impl, info) => logExecution(
+        `loader ${info.request.url} (route ${id})`,
+        impl
+      ),
+      action: (impl, info) => logExecution(
+        `action ${info.request.url} (route ${id})`,
+        impl
+      ),
+    })
+  }
+};
+
+async function logExecution(label: string, impl: () => Promise<void>) {
+  let start = performance.now();
+  console.log(`start ${label}`);
+  await impl();
+  let duration = Math.round(performance.now() - start);
+  console.log(`end ${label} (${duration}ms)`);
+}
+```
+
 ### opts.patchRoutesOnNavigation
 
 Lazily define portions of the route tree on navigations.

docs/api/framework-routers/HydratedRouter.md

@@ -33,10 +33,11 @@ function HydratedRouter(props: HydratedRouterProps)
 
 ### getContext
 
-Context object to be passed through to [`createBrowserRouter`](../data-routers/createBrowserRouter) and made
-available to
+Context factory function to be passed through to [`createBrowserRouter`](../data-routers/createBrowserRouter).
+This function will be called to create a fresh `context` instance on each
+navigation/fetch and made available to
 [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-functions
+functions.
 
 ### unstable_onError
 

docs/api/hooks/useNavigate.md

@@ -32,12 +32,14 @@ The returned function signature is `navigate(to, options?)`/`navigate(delta)` wh
 
 * `to` can be a string path, a [`To`](https://api.reactrouter.com/v7/types/react_router.To.html) object, or a number (delta)
 * `options` contains options for modifying the navigation
-  * `flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
-  * `preventScrollReset`: Do not scroll back to the top of the page after navigation
-  * `relative`: `"route"` or `"path"` to control relative routing logic
-  * `replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
-  * `state`: Optional [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to include with the new [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html)
-  * `viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation
+  * These options work in all modes (Framework, Data, and Declarative):
+    * `relative`: `"route"` or `"path"` to control relative routing logic
+    * `replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
+    * `state`: Optional [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to include with the new [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html)
+  * These options only work in Framework and Data modes:
+    * `flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
+    * `preventScrollReset`: Do not scroll back to the top of the page after navigation
+    * `viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation
 
 ```tsx
 import { useNavigate } from "react-router";

docs/api/utils/isRouteErrorResponse.md

@@ -24,7 +24,8 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/ro
 
 Check if the given error is an [`ErrorResponse`](https://api.reactrouter.com/v7/types/react_router.ErrorResponse.html) generated from a 4xx/5xx
 [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
-thrown from an [`action`](../../start/framework/route-module#action)/[`loader`](../../start/framework/route-module#loader)
+thrown from an [`action`](../../start/framework/route-module#action) or
+[`loader`](../../start/framework/route-module#loader) function.
 
 ```tsx
 import { isRouteErrorResponse } from "react-router";

packages/react-router-dev/cli/commands.ts

@@ -1,9 +1,9 @@
 import { existsSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
 import * as path from "node:path";
-import PackageJson from "@npmcli/package-json";
 import exitHook from "exit-hook";
 import colors from "picocolors";
+import { readPackageJSON } from "pkg-types";
 // Workaround for "ERR_REQUIRE_CYCLE_MODULE" in Node 22.10.0+
 import "react-router";
 
@@ -138,8 +138,8 @@ export async function generateEntry(
     return;
   }
 
-  let pkgJson = await PackageJson.load(rootDirectory);
-  let deps = pkgJson.content.dependencies ?? {};
+  let pkgJson = await readPackageJSON(rootDirectory);
+  let deps = pkgJson.dependencies ?? {};
 
   if (!deps["@react-router/node"]) {
     console.error(colors.red(`No default server entry detected.`));

packages/react-router-dev/config/config.ts

@@ -1,6 +1,5 @@
 import fs from "node:fs";
 import { execSync } from "node:child_process";
-import PackageJson from "@npmcli/package-json";
 import * as ViteNode from "../vite/vite-node";
 import type * as Vite from "vite";
 import Path from "pathe";
@@ -9,6 +8,7 @@ import chokidar, {
   type EmitArgs as ChokidarEmitArgs,
 } from "chokidar";
 import colors from "picocolors";
+import { readPackageJSON, sortPackage, updatePackage } from "pkg-types";
 import pick from "lodash/pick";
 import omit from "lodash/omit";
 import cloneDeep from "lodash/cloneDeep";
@@ -921,8 +921,8 @@ export async function resolveEntryFiles({
     }
 
     let packageJsonDirectory = Path.dirname(packageJsonPath);
-    let pkgJson = await PackageJson.load(packageJsonDirectory);
-    let deps = pkgJson.content.dependencies ?? {};
+    let pkgJson = await readPackageJSON(packageJsonDirectory);
+    let deps = pkgJson.dependencies ?? {};
 
     if (!deps["@react-router/node"]) {
       throw new Error(
@@ -935,15 +935,12 @@ export async function resolveEntryFiles({
         "adding `isbot@5` to your package.json, you should commit this change",
       );
 
-      pkgJson.update({
-        dependencies: {
-          ...pkgJson.content.dependencies,
-          isbot: "^5",
-        },
+      await updatePackage(packageJsonPath, (pkg) => {
+        pkg.dependencies ??= {};
+        pkg.dependencies.isbot = "^5";
+        sortPackage(pkg);
       });
 
-      await pkgJson.save();
-
       let packageManager = detectPackageManager() ?? "npm";
 
       execSync(`${packageManager} install`, {

packages/react-router-dev/package.json

@@ -71,7 +71,6 @@
     "@babel/preset-typescript": "^7.27.1",
     "@babel/traverse": "^7.27.7",
     "@babel/types": "^7.27.7",
-    "@npmcli/package-json": "^4.0.1",
     "@react-router/node": "workspace:*",
     "@remix-run/node-fetch-server": "^0.9.0",
     "arg": "^5.0.1",
@@ -86,6 +85,7 @@
     "p-map": "^7.0.3",
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
+    "pkg-types": "^2.3.0",
     "prettier": "^3.6.2",
     "react-refresh": "^0.14.0",
     "semver": "^7.3.7",