@react-router/dev 7.9.3 → 7.9.4-pre.0

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # `@react-router/dev`
 
+## 7.9.4-pre.0
+
+### Patch Changes
+
+- Update `valibot` dependency to `^1.1.0` ([#14379](https://github.com/remix-run/react-router/pull/14379))
+- New (unstable) `useRoute` hook for accessing data from specific routes ([#14407](https://github.com/remix-run/react-router/pull/14407))
+
+  For example, let's say you have an `admin` route somewhere in your app and you want any child routes of `admin` to all have access to the `loaderData` and `actionData` from `admin.`
+
+  ```tsx
+  // app/routes/admin.tsx
+  import { Outlet } from "react-router";
+
+  export const loader = () => ({ message: "Hello, loader!" });
+
+  export const action = () => ({ count: 1 });
+
+  export default function Component() {
+    return (
+      <div>
+        {/* ... */}
+        <Outlet />
+        {/* ... */}
+      </div>
+    );
+  }
+  ```
+
+  You might even want to create a reusable widget that all of the routes nested under `admin` could use:
+
+  ```tsx
+  import { unstable_useRoute as useRoute } from "react-router";
+
+  export function AdminWidget() {
+    // How to get `message` and `count` from `admin` route?
+  }
+  ```
+
+  In framework mode, `useRoute` knows all your app's routes and gives you TS errors when invalid route IDs are passed in:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/dmin");
+    //                      ^^^^^^^^^^^
+  }
+  ```
+
+  `useRoute` returns `undefined` if the route is not part of the current page:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/admin");
+    if (!admin) {
+      throw new Error(`AdminWidget used outside of "routes/admin"`);
+    }
+  }
+  ```
+
+  Note: the `root` route is the exception since it is guaranteed to be part of the current page.
+  As a result, `useRoute` never returns `undefined` for `root`.
+
+  `loaderData` and `actionData` are marked as optional since they could be accessed before the `action` is triggered or after the `loader` threw an error:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/admin");
+    if (!admin) {
+      throw new Error(`AdminWidget used outside of "routes/admin"`);
+    }
+    const { loaderData, actionData } = admin;
+    console.log(loaderData);
+    //          ^? { message: string } | undefined
+    console.log(actionData);
+    //          ^? { count: number } | undefined
+  }
+  ```
+
+  If instead of a specific route, you wanted access to the _current_ route's `loaderData` and `actionData`, you can call `useRoute` without arguments:
+
+  ```tsx
+  export function AdminWidget() {
+    const currentRoute = useRoute();
+    currentRoute.loaderData;
+    currentRoute.actionData;
+  }
+  ```
+
+  This usage is equivalent to calling `useLoaderData` and `useActionData`, but consolidates all route data access into one hook: `useRoute`.
+
+  Note: when calling `useRoute()` (without a route ID), TS has no way to know which route is the current route.
+  As a result, `loaderData` and `actionData` are typed as `unknown`.
+  If you want more type-safety, you can either narrow the type yourself with something like `zod` or you can refactor your app to pass down typed props to your `AdminWidget`:
+
+  ```tsx
+  export function AdminWidget({
+    message,
+    count,
+  }: {
+    message: string;
+    count: number;
+  }) {
+    /* ... */
+  }
+  ```
+
+- Updated dependencies:
+  - `react-router@7.9.4-pre.0`
+  - `@react-router/node@7.9.4-pre.0`
+  - `@react-router/serve@7.9.4-pre.0`
+
 ## 7.9.3
 
 ### Patch Changes
@@ -45,7 +155,6 @@
 - Stabilize middleware and context APIs. ([#14215](https://github.com/remix-run/react-router/pull/14215))
 
   We have removed the `unstable_` prefix from the following APIs and they are now considered stable and ready for production use:
-
   - [`RouterContextProvider`](https://reactrouter.com/api/utils/RouterContextProvider)
   - [`createContext`](https://reactrouter.com/api/utils/createContext)
   - `createBrowserRouter` [`getContext`](https://reactrouter.com/api/data-routers/createBrowserRouter#optsgetcontext) option
@@ -788,7 +897,6 @@
   ```
 
   This initial implementation targets type inference for:
-
   - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
   - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
   - `ActionData` : Action data from `action` and/or `clientAction` within your route module
@@ -803,7 +911,6 @@
   ```
 
   Check out our docs for more:
-
   - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
   - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
 
@@ -1003,7 +1110,6 @@
 - Vite: Provide `Unstable_ServerBundlesFunction` and `Unstable_VitePluginConfig` types ([#8654](https://github.com/remix-run/remix/pull/8654))
 
 - Vite: add `--sourcemapClient` and `--sourcemapServer` flags to `remix vite:build` ([#8613](https://github.com/remix-run/remix/pull/8613))
-
   - `--sourcemapClient`
 
   - `--sourcemapClient=inline`
@@ -1340,7 +1446,6 @@
 - Add support for `clientLoader`/`clientAction`/`HydrateFallback` route exports ([RFC](https://github.com/remix-run/remix/discussions/7634)) ([#8173](https://github.com/remix-run/remix/pull/8173))
 
   Remix now supports loaders/actions that run on the client (in addition to, or instead of the loader/action that runs on the server). While we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as:
-
   - Leveraging a data source local to the browser (i.e., `localStorage`)
   - Managing a client-side cache of server data (like `IndexedDB`)
   - Bypassing the Remix server in a BFF setup and hitting your API directly from the browser
@@ -1744,7 +1849,6 @@
 - Output esbuild metafiles for bundle analysis ([#6772](https://github.com/remix-run/remix/pull/6772))
 
   Written to server build directory (`build/` by default):
-
   - `metafile.css.json`
   - `metafile.js.json` (browser JS)
   - `metafile.server.json` (server JS)
@@ -1842,7 +1946,6 @@
 - built-in tls support ([#6483](https://github.com/remix-run/remix/pull/6483))
 
   New options:
-
   - `--tls-key` / `tlsKey`: TLS key
   - `--tls-cert` / `tlsCert`: TLS Certificate
 
@@ -2113,7 +2216,6 @@
   ```
 
   The dev server will:
-
   - force `NODE_ENV=development` and warn you if it was previously set to something else
   - rebuild your app whenever your Remix app code changes
   - restart your app server whenever rebuilds succeed

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.9.3
+ * @react-router/dev v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -980,9 +980,10 @@ function generateRoutes(ctx) {
           interface Register {
             pages: Pages
             routeFiles: RouteFiles
+            routeModules: RouteModules
           }
         }
-      ` + "\n\n" + generate(pagesType(allPages)).code + "\n\n" + generate(routeFilesType({ fileToRoutes, routeToPages })).code
+      ` + "\n\n" + generate(pagesType(allPages)).code + "\n\n" + generate(routeFilesType({ fileToRoutes, routeToPages })).code + "\n\n" + generate(routeModulesType(ctx)).code
   };
   const allAnnotations = Array.from(fileToRoutes.entries()).filter(([file]) => isInAppDirectory(ctx, file)).map(
     ([file, routeIds]) => getRouteAnnotations({ ctx, file, routeIds, lineages })
@@ -1051,6 +1052,28 @@ function routeFilesType({
     )
   );
 }
+function routeModulesType(ctx) {
+  return t2.tsTypeAliasDeclaration(
+    t2.identifier("RouteModules"),
+    null,
+    t2.tsTypeLiteral(
+      Object.values(ctx.config.routes).map(
+        (route) => t2.tsPropertySignature(
+          t2.stringLiteral(route.id),
+          t2.tsTypeAnnotation(
+            t2.tsTypeQuery(
+              t2.tsImportType(
+                t2.stringLiteral(
+                  `./${Path3.relative(ctx.rootDirectory, ctx.config.appDirectory)}/${route.file}`
+                )
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
 function isInAppDirectory(ctx, routeFile) {
   const path9 = Path3.resolve(ctx.config.appDirectory, routeFile);
   return path9.startsWith(ctx.config.appDirectory);

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.9.3
+ * @react-router/dev v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.9.3
+ * @react-router/dev v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.9.3
+ * @react-router/dev v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.9.3
+ * @react-router/dev v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -968,9 +968,10 @@ function generateRoutes(ctx) {
           interface Register {
             pages: Pages
             routeFiles: RouteFiles
+            routeModules: RouteModules
           }
         }
-      ` + "\n\n" + generate(pagesType(allPages)).code + "\n\n" + generate(routeFilesType({ fileToRoutes, routeToPages })).code
+      ` + "\n\n" + generate(pagesType(allPages)).code + "\n\n" + generate(routeFilesType({ fileToRoutes, routeToPages })).code + "\n\n" + generate(routeModulesType(ctx)).code
   };
   const allAnnotations = Array.from(fileToRoutes.entries()).filter(([file]) => isInAppDirectory(ctx, file)).map(
     ([file, routeIds]) => getRouteAnnotations({ ctx, file, routeIds, lineages })
@@ -1039,6 +1040,28 @@ function routeFilesType({
     )
   );
 }
+function routeModulesType(ctx) {
+  return t2.tsTypeAliasDeclaration(
+    t2.identifier("RouteModules"),
+    null,
+    t2.tsTypeLiteral(
+      Object.values(ctx.config.routes).map(
+        (route) => t2.tsPropertySignature(
+          t2.stringLiteral(route.id),
+          t2.tsTypeAnnotation(
+            t2.tsTypeQuery(
+              t2.tsImportType(
+                t2.stringLiteral(
+                  `./${Path3.relative(ctx.rootDirectory, ctx.config.appDirectory)}/${route.file}`
+                )
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
 function isInAppDirectory(ctx, routeFile) {
   const path9 = Path3.resolve(ctx.config.appDirectory, routeFile);
   return path9.startsWith(ctx.config.appDirectory);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.9.3",
+  "version": "7.9.4-pre.0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -84,9 +84,9 @@
     "react-refresh": "^0.14.0",
     "semver": "^7.3.7",
     "tinyglobby": "^0.2.14",
-    "valibot": "^0.41.0",
+    "valibot": "^1.1.0",
     "vite-node": "^3.2.2",
-    "@react-router/node": "7.9.3"
+    "@react-router/node": "7.9.4-pre.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -109,16 +109,16 @@
     "vite": "^6.1.0",
     "wireit": "0.14.9",
     "wrangler": "^4.23.0",
-    "@react-router/serve": "7.9.3",
-    "react-router": "^7.9.3"
+    "@react-router/serve": "7.9.4-pre.0",
+    "react-router": "^7.9.4-pre.0"
   },
   "peerDependencies": {
     "@vitejs/plugin-rsc": "*",
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^7.9.3",
-    "react-router": "^7.9.3"
+    "@react-router/serve": "^7.9.4-pre.0",
+    "react-router": "^7.9.4-pre.0"
   },
   "peerDependenciesMeta": {
     "@vitejs/plugin-rsc": {