diff --git a/.changeset/pre.json b/.changeset/pre.json index 3c0b62de24..16f284cbd8 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -20,5 +20,56 @@ "@playground/compiler-express": "0.0.0", "@playground/compiler-spa": "0.0.0" }, - "changesets": [] + "changesets": [ + "angry-papayas-flow", + "calm-frogs-tie", + "chilled-masks-search", + "collapse-packages", + "create-remix-router", + "curvy-teachers-explain", + "drop-node-16", + "early-beds-obey", + "expose-promises", + "fair-beans-design", + "fair-cheetahs-hope", + "fast-plums-peel", + "fluffy-ducks-try", + "fuzzy-worms-applaud", + "gold-suns-march", + "kind-mirrors-hang", + "kind-timers-refuse", + "late-buckets-turn", + "lemon-files-care", + "link-prefetching", + "moody-kids-count", + "nice-pillows-hunt", + "nine-ravens-work", + "odd-beds-behave", + "prerendering", + "purple-poems-laugh", + "red-feet-shop", + "red-olives-compare", + "remix-scroll-restoration", + "remove-build-end-public-path", + "remove-manifest-option", + "remove-prefetchpagedescriptor", + "route-component-export-props", + "router-provider-hydration", + "silly-papayas-trade", + "stupid-days-heal", + "tall-mangos-add", + "tasty-penguins-live", + "thin-nails-turn", + "tidy-clouds-lay", + "tough-pens-brush", + "twelve-cheetahs-pretend", + "twenty-carrots-yawn", + "two-countries-yell", + "typesafety", + "violet-beds-swim", + "vite-manifest-location", + "warm-melons-shop", + "weak-goats-cross", + "weak-otters-dance" + ] } diff --git a/packages/react-router-architect/CHANGELOG.md b/packages/react-router-architect/CHANGELOG.md new file mode 100644 index 0000000000..284f14bb1c --- /dev/null +++ b/packages/react-router-architect/CHANGELOG.md @@ -0,0 +1,27 @@ +# @react-router/architect + +## 7.0.0-pre.0 + +### Major Changes + +- For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](/~https://github.com/remix-run/react-router/pull/11837)) + + - `createCookie` + - `createCookieSessionStorage` + - `createMemorySessionStorage` + - `createSessionStorage` + + For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html) + + Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed: + + - `createCookieFactory` + - `createSessionStorageFactory` + - `createCookieSessionStorageFactory` + - `createMemorySessionStorageFactory` + +### Patch Changes + +- Updated dependencies: + - `react-router@7.0.0-pre.0` + - `@react-router/node@7.0.0-pre.0` diff --git a/packages/react-router-architect/package.json b/packages/react-router-architect/package.json index a9664a798f..ce0f1d77fd 100644 --- a/packages/react-router-architect/package.json +++ b/packages/react-router-architect/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/architect", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Architect server request handler for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-cloudflare/CHANGELOG.md b/packages/react-router-cloudflare/CHANGELOG.md new file mode 100644 index 0000000000..16e08e99bd --- /dev/null +++ b/packages/react-router-cloudflare/CHANGELOG.md @@ -0,0 +1,31 @@ +# @react-router/cloudflare + +## 7.0.0-pre.0 + +### Major Changes + +- For Remix consumers migrating to React Router, all exports from `@remix-run/cloudflare-pages` are now provided for React Router consumers in the `@react-router/cloudflare` package. There is no longer a separate package for Cloudflare Pages. ([#11801](/~https://github.com/remix-run/react-router/pull/11801)) +- For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](/~https://github.com/remix-run/react-router/pull/11837)) + + - `createCookie` + - `createCookieSessionStorage` + - `createMemorySessionStorage` + - `createSessionStorage` + + For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html) + + Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed: + + - `createCookieFactory` + - `createSessionStorageFactory` + - `createCookieSessionStorageFactory` + - `createMemorySessionStorageFactory` + +### Minor Changes + +- The `@remix-run/cloudflare-workers` package has been deprecated. Remix consumers migrating to React Router should use the `@react-router/cloudflare` package directly. For guidance on how to use `@react-router/cloudflare` within a Cloudflare Workers context, refer to the Cloudflare Workers template. ([#11801](/~https://github.com/remix-run/react-router/pull/11801)) + +### Patch Changes + +- Updated dependencies: + - `react-router@7.0.0-pre.0` diff --git a/packages/react-router-cloudflare/package.json b/packages/react-router-cloudflare/package.json index 472d627722..e4b0cba9af 100644 --- a/packages/react-router-cloudflare/package.json +++ b/packages/react-router-cloudflare/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/cloudflare", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Cloudflare platform abstractions for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-dev/CHANGELOG.md b/packages/react-router-dev/CHANGELOG.md index 527d7f844e..73b99823c8 100644 --- a/packages/react-router-dev/CHANGELOG.md +++ b/packages/react-router-dev/CHANGELOG.md @@ -1,5 +1,232 @@ # `@remix-run/dev` +## 7.0.0-pre.0 + +### Major Changes + +- For Remix consumers migrating to React Router, the `vitePlugin` and `cloudflareDevProxyVitePlugin` exports have been renamed and moved. ([#11904](/~https://github.com/remix-run/react-router/pull/11904)) + + ```diff + -import { + - vitePlugin as remix, + - cloudflareDevProxyVitePlugin, + -} from "@remix/dev"; + + +import { reactRouter } from "@react-router/dev/vite"; + +import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare"; + ``` + +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) +- For Remix consumers migrating to React Router who used the Vite plugin's `buildEnd` hook, the resolved `reactRouterConfig` object no longer contains a `publicPath` property since this belongs to Vite, not React Router. ([#11575](/~https://github.com/remix-run/react-router/pull/11575)) +- For Remix consumers migrating to React Router, the Vite plugin's `manifest` option has been removed. ([#11573](/~https://github.com/remix-run/react-router/pull/11573)) + + The `manifest` option been superseded by the more powerful `buildEnd` hook since it's passed the `buildManifest` argument. You can still write the build manifest to disk if needed, but you'll most likely find it more convenient to write any logic depending on the build manifest within the `buildEnd` hook itself. + + If you were using the `manifest` option, you can replace it with a `buildEnd` hook that writes the manifest to disk like this: + + ```js + import { reactRouter } from "@react-router/dev/vite"; + import { writeFile } from "node:fs/promises"; + + export default { + plugins: [ + reactRouter({ + async buildEnd({ buildManifest }) { + await writeFile( + "build/manifest.json", + JSON.stringify(buildManifest, null, 2), + "utf-8" + ); + }, + }), + ], + }; + ``` + +- Update default `isbot` version to v5 and drop support for `isbot@3` ([#11770](/~https://github.com/remix-run/react-router/pull/11770)) + + - If you have `isbot@4` or `isbot@5` in your `package.json`: + - You do not need to make any changes + - If you have `isbot@3` in your `package.json` and you have your own `entry.server.tsx` file in your repo + - You do not need to make any changes + - You can upgrade to `isbot@5` independent of the React Router v7 upgrade + - If you have `isbot@3` in your `package.json` and you do not have your own `entry.server.tsx` file in your repo + - You are using the internal default entry provided by React Router v7 and you will need to upgrade to `isbot@5` in your `package.json` + +- For Remix consumers migrating to React Router, Vite manifests (i.e. `.vite/manifest.json`) are now written within each build subdirectory, e.g. `build/client/.vite/manifest.json` and `build/server/.vite/manifest.json` instead of `build/.vite/client-manifest.json` and `build/.vite/server-manifest.json`. This means that the build output is now much closer to what you'd expect from a typical Vite project. ([#11573](/~https://github.com/remix-run/react-router/pull/11573)) + + Originally the Remix Vite plugin moved all Vite manifests to a root-level `build/.vite` directory to avoid accidentally serving them in production, particularly from the client build. This was later improved with additional logic that deleted these Vite manifest files at the end of the build process unless Vite's `build.manifest` had been enabled within the app's Vite config. This greatly reduced the risk of accidentally serving the Vite manifests in production since they're only present when explicitly asked for. As a result, we can now assume that consumers will know that they need to manage these additional files themselves, and React Router can safely generate a more standard Vite build output. + +### Minor Changes + +- Params, loader data, and action data as props for route component exports ([#11961](/~https://github.com/remix-run/react-router/pull/11961)) + + ```tsx + export default function Component({ params, loaderData, actionData }) {} + + export function HydrateFallback({ params }) {} + export function ErrorBoundary({ params, loaderData, actionData }) {} + ``` + +- Remove internal entry.server.spa.tsx implementation ([#11681](/~https://github.com/remix-run/react-router/pull/11681)) +- ### Typesafety improvements ([#12019](/~https://github.com/remix-run/react-router/pull/12019)) + + React Router now generates types for each of your route modules. + You can access those types by importing them from `./+types/`. + For example: + + ```ts + // app/routes/product.tsx + import type * as Route from "./+types/product"; + + export function loader({ params }: Route.LoaderArgs) {} + + export default function Component({ loaderData }: Route.ComponentProps) {} + ``` + + 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 + + These types are then used to create types for route export args and props: + + - `LoaderArgs` + - `ClientLoaderArgs` + - `ActionArgs` + - `ClientActionArgs` + - `HydrateFallbackProps` + - `ComponentProps` (for the `default` export) + - `ErrorBoundaryProps` + + In the future, we plan to add types for the rest of the route module exports: `meta`, `links`, `headers`, `shouldRevalidate`, etc. + We also plan to generate types for typesafe `Link`s: + + ```tsx + + // ^^^^^^^^^^^^^ ^^^^^^^^^ + // typesafe `to` and `params` based on the available routes in your app + ``` + + #### Setup + + React Router will generate types into a `.react-router/` directory at the root of your app. + This directory is fully managed by React Router and is derived based on your route config (`routes.ts`). + + 👉 **Add `.react-router/` to `.gitignore`** + + ```txt + .react-router + ``` + + You should also ensure that generated types for routes are always present before running typechecking, + especially for running typechecking in CI. + + 👉 **Add `react-router typegen` to your `typecheck` command in `package.json`** + + ```json + { + "scripts": { + "typecheck": "react-router typegen && tsc" + } + } + ``` + + To get TypeScript to use those generated types, you'll need to add them to `include` in `tsconfig.json`. + And to be able to import them as if they files next to your route modules, you'll also need to configure `rootDirs`. + + 👉 **Configure `tsconfig.json` for generated types** + + ```json + { + "include": [".react-router/types/**/*"], + "compilerOptions": { + "rootDirs": [".", "./.react-router/types"] + } + } + ``` + + #### `typegen` command + + You can manually generate types with the new `typegen` command: + + ```sh + react-router typegen + ``` + + However, manual type generation is tedious and types can get out of sync quickly if you ever forget to run `typegen`. + Instead, we recommend that you setup our new TypeScript plugin which will automatically generate fresh types whenever routes change. + That way, you'll always have up-to-date types. + + #### TypeScript plugin + + To get automatic type generation, you can use our new TypeScript plugin. + + 👉 **Add the TypeScript plugin to `tsconfig.json`** + + ```json + { + "compilerOptions": { + "plugins": [{ "name": "@react-router/dev" }] + } + } + ``` + + We plan to add some other goodies to our TypeScript plugin soon, including: + + - Automatic `jsdoc` for route exports that include links to official docs + - Autocomplete for route exports + - Warnings for non-HMR compliant exports + + ##### VSCode + + TypeScript looks for plugins registered in `tsconfig.json` in the local `node_modules/`, + but VSCode ships with its own copy of TypeScript that is installed outside of your project. + For TypeScript plugins to work, you'll need to tell VSCode to use the local workspace version of TypeScript. + For security reasons, [VSCode won't use the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript) until you manually opt-in. + + Your project should have a `.vscode/settings.json` with the following settings: + + ```json + { + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true + } + ``` + + That way [VSCode will ask you](https://code.visualstudio.com/updates/v1_45#_prompt-users-to-switch-to-the-workspace-version-of-typescript) if you want to use the workspace version of TypeScript the first time you open a TS file in that project. + + > [!IMPORTANT] + > You'll need to install dependencies first so that the workspace version of TypeScript is available. + + 👉 **Select "Allow" when VSCode asks if you want to use the workspace version of TypeScript** + + Otherwise, you can also manually opt-in to the workspace version: + + 1. Open up any TypeScript file in your project + 2. Open up the VSCode Command Palette (Cmd+Shift+P) + 3. Search for `Select TypeScript Version` + 4. Choose `Use Workspace Version` + 5. Quit and reopen VSCode + + ##### Troubleshooting + + In VSCode, open up any TypeScript file in your project and then use CMD+SHIFT+P to select `Open TS Server log`. + There should be a log for `[react-router] setup` that indicates that the plugin was resolved correctly. + Then look for any errors in the log. + +### Patch Changes + +- include root "react-dom" module for optimization ([#12060](/~https://github.com/remix-run/react-router/pull/12060)) +- Updated dependencies: + - `react-router@7.0.0-pre.0` + - `@react-router/serve@7.0.0-pre.0` + - `@react-router/node@7.0.0-pre.0` + ## 2.9.0 ### Minor Changes diff --git a/packages/react-router-dev/package.json b/packages/react-router-dev/package.json index 7acf8e2124..78163c1348 100644 --- a/packages/react-router-dev/package.json +++ b/packages/react-router-dev/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/dev", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Dev tools and CLI for React Router", "homepage": "https://reactrouter.com", "bugs": { diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md new file mode 100644 index 0000000000..96bbd302a3 --- /dev/null +++ b/packages/react-router-dom/CHANGELOG.md @@ -0,0 +1,44 @@ +# react-router-dom + +## 7.0.0-pre.0 + +### Major Changes + +- Remove the original `defer` implementation in favor of using raw promises via single fetch and `turbo-stream`. This removes these exports from React Router: ([#11744](/~https://github.com/remix-run/react-router/pull/11744)) + + - `defer` + - `AbortedDeferredError` + - `type TypedDeferredData` + - `UNSAFE_DeferredData` + - `UNSAFE_DEFERRED_SYMBOL`, + +- Use `createRemixRouter`/`RouterProvider` in `entry.client` instead of `RemixBrowser` ([#11469](/~https://github.com/remix-run/react-router/pull/11469)) +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- Remove `future.v7_startTransition` flag ([#11696](/~https://github.com/remix-run/react-router/pull/11696)) +- Remove `future.v7_normalizeFormMethod` future flag ([#11697](/~https://github.com/remix-run/react-router/pull/11697)) +- Allow returning `undefined` from actions and loaders ([#11680](/~https://github.com/remix-run/react-router/pull/11680)) +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Remove `future.v7_prependBasename` from the ionternalized `@remix-run/router` package ([#11726](/~https://github.com/remix-run/react-router/pull/11726)) +- Remove `future.v7_throwAbortReason` from internalized `@remix-run/router` package ([#11728](/~https://github.com/remix-run/react-router/pull/11728)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) +- updates the minimum React version to 18 ([#11689](/~https://github.com/remix-run/react-router/pull/11689)) +- - Remove the `future.v7_partialHydration` flag ([#11725](/~https://github.com/remix-run/react-router/pull/11725)) + - This also removes the `` prop + - To migrate, move the `fallbackElement` to a `hydrateFallbackElement`/`HydrateFallback` on your root route + - Also worth nothing there is a related breaking changer with this future flag: + - Without `future.v7_partialHydration` (when using `fallbackElement`), `state.navigation` was populated during the initial load + - With `future.v7_partialHydration`, `state.navigation` remains in an `"idle"` state during the initial load +- Remove `future.v7_fetcherPersist` flag ([#11731](/~https://github.com/remix-run/react-router/pull/11731)) + +### Minor Changes + +- Add prefetching support to `Link`/`NavLink` when using Remix SSR ([#11402](/~https://github.com/remix-run/react-router/pull/11402)) +- Enhance `ScrollRestoration` so it can restore properly on an SSR'd document load ([#11401](/~https://github.com/remix-run/react-router/pull/11401)) +- Add built-in Remix-style hydration support to `RouterProvider`. When running from a Remix-SSR'd HTML payload with the proper `window` variables (`__remixContext`, `__remixManifest`, `__remixRouteModules`), you don't need to pass a `router` prop and `RouterProvider` will create the `router` for you internally. ([#11396](/~https://github.com/remix-run/react-router/pull/11396)) ([#11400](/~https://github.com/remix-run/react-router/pull/11400)) + +### Patch Changes + +- Memoize some `RouterProvider` internals to reduce uneccesary re-renders ([#11817](/~https://github.com/remix-run/react-router/pull/11817)) +- Updated dependencies: + - `react-router@7.0.0-pre.0` diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json index dcfa6fcefd..e9c4361a68 100644 --- a/packages/react-router-dom/package.json +++ b/packages/react-router-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-router-dom", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Declarative routing for React web applications", "keywords": [ "react", diff --git a/packages/react-router-express/CHANGELOG.md b/packages/react-router-express/CHANGELOG.md index 241eec2502..50f6bd0c60 100644 --- a/packages/react-router-express/CHANGELOG.md +++ b/packages/react-router-express/CHANGELOG.md @@ -1,5 +1,20 @@ # `@remix-run/express` +## 7.0.0-pre.0 + +### Major Changes + +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) + +### Patch Changes + +- Updated dependencies: + - `react-router@7.0.0-pre.0` + - `@react-router/node@7.0.0-pre.0` + ## 2.9.0 ### Patch Changes diff --git a/packages/react-router-express/package.json b/packages/react-router-express/package.json index d714b261bb..f7e016fffa 100644 --- a/packages/react-router-express/package.json +++ b/packages/react-router-express/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/express", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Express server request handler for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-fs-routes/CHANGELOG.md b/packages/react-router-fs-routes/CHANGELOG.md new file mode 100644 index 0000000000..7be100c03d --- /dev/null +++ b/packages/react-router-fs-routes/CHANGELOG.md @@ -0,0 +1,8 @@ +# @react-router/fs-routes + +## 7.0.0-pre.0 + +### Patch Changes + +- Updated dependencies: + - `@react-router/dev@7.0.0-pre.0` diff --git a/packages/react-router-fs-routes/package.json b/packages/react-router-fs-routes/package.json index 6f1792964c..93227065ab 100644 --- a/packages/react-router-fs-routes/package.json +++ b/packages/react-router-fs-routes/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/fs-routes", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "File system routing conventions for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-node/CHANGELOG.md b/packages/react-router-node/CHANGELOG.md index 7bad0a5271..fef1bdd623 100644 --- a/packages/react-router-node/CHANGELOG.md +++ b/packages/react-router-node/CHANGELOG.md @@ -1,5 +1,36 @@ # `@remix-run/node` +## 7.0.0-pre.0 + +### Major Changes + +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](/~https://github.com/remix-run/react-router/pull/11837)) + + - `createCookie` + - `createCookieSessionStorage` + - `createMemorySessionStorage` + - `createSessionStorage` + + For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html) + + Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed: + + - `createCookieFactory` + - `createSessionStorageFactory` + - `createCookieSessionStorageFactory` + - `createMemorySessionStorageFactory` + +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) + +### Patch Changes + +- Remove unstable upload handler. ([#12015](/~https://github.com/remix-run/react-router/pull/12015)) +- Updated dependencies: + - `react-router@7.0.0-pre.0` + ## 2.9.0 ### Minor Changes diff --git a/packages/react-router-node/package.json b/packages/react-router-node/package.json index c6d5ee06aa..d8d3a67a1a 100644 --- a/packages/react-router-node/package.json +++ b/packages/react-router-node/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/node", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Node.js platform abstractions for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-remix-config-routes-adapter/CHANGELOG.md b/packages/react-router-remix-config-routes-adapter/CHANGELOG.md new file mode 100644 index 0000000000..87468f44d5 --- /dev/null +++ b/packages/react-router-remix-config-routes-adapter/CHANGELOG.md @@ -0,0 +1,8 @@ +# @react-router/remix-config-routes-adapter + +## 7.0.0-pre.0 + +### Patch Changes + +- Updated dependencies: + - `@react-router/dev@7.0.0-pre.0` diff --git a/packages/react-router-remix-config-routes-adapter/package.json b/packages/react-router-remix-config-routes-adapter/package.json index ec6a103d95..989b92b481 100644 --- a/packages/react-router-remix-config-routes-adapter/package.json +++ b/packages/react-router-remix-config-routes-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/remix-config-routes-adapter", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Remix config route support for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router-serve/CHANGELOG.md b/packages/react-router-serve/CHANGELOG.md index 1b739354d1..290776bd6e 100644 --- a/packages/react-router-serve/CHANGELOG.md +++ b/packages/react-router-serve/CHANGELOG.md @@ -1,5 +1,28 @@ # `@remix-run/serve` +## 7.0.0-pre.0 + +### Major Changes + +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) + +### Patch Changes + +- Update `express.static` configurations to support prerendering ([#11547](/~https://github.com/remix-run/react-router/pull/11547)) + + - Assets in the `build/client/assets` folder are served as before, with a 1-year immutable `Cache-Control` header + - Static files outside of assets, such as pre-rendered `.html` and `.data` files are not served with a specific `Cache-Control` header + - `.data` files are served with `Content-Type: text/x-turbo` + - For some reason, when adding this via `express.static`, it seems to also add a `Cache-Control: public, max-age=0` to `.data` files + +- Updated dependencies: + - `react-router@7.0.0-pre.0` + - `@react-router/express@7.0.0-pre.0` + - `@react-router/node@7.0.0-pre.0` + ## 2.9.0 ### Minor Changes diff --git a/packages/react-router-serve/package.json b/packages/react-router-serve/package.json index f2198dbf7f..fec38531e7 100644 --- a/packages/react-router-serve/package.json +++ b/packages/react-router-serve/package.json @@ -1,6 +1,6 @@ { "name": "@react-router/serve", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Production application server for React Router", "bugs": { "url": "/~https://github.com/remix-run/react-router/issues" diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 143cb97239..d4a0680f9f 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -1,5 +1,312 @@ # `react-router` +## 7.0.0-pre.0 + +### Major Changes + +- Remove the original `defer` implementation in favor of using raw promises via single fetch and `turbo-stream`. This removes these exports from React Router: ([#11744](/~https://github.com/remix-run/react-router/pull/11744)) + + - `defer` + - `AbortedDeferredError` + - `type TypedDeferredData` + - `UNSAFE_DeferredData` + - `UNSAFE_DEFERRED_SYMBOL`, + +- - Collapse `@remix-run/router` into `react-router` ([#11505](/~https://github.com/remix-run/react-router/pull/11505)) + - Collapse `react-router-dom` into `react-router` + - Collapse `@remix-run/server-runtime` into `react-router` + - Collapse `@remix-run/testing` into `react-router` +- Remove single_fetch future flag. ([#11522](/~https://github.com/remix-run/react-router/pull/11522)) +- Drop support for Node 16, React Router SSR now requires Node 18 or higher ([#11391](/~https://github.com/remix-run/react-router/pull/11391)) +- Remove `future.v7_startTransition` flag ([#11696](/~https://github.com/remix-run/react-router/pull/11696)) +- - Expose the underlying router promises from the following APIs for compsition in React 19 APIs: ([#11521](/~https://github.com/remix-run/react-router/pull/11521)) + - `useNavigate()` + - `useSubmit` + - `useFetcher().load` + - `useFetcher().submit` + - `useRevalidator.revalidate` +- Remove `future.v7_normalizeFormMethod` future flag ([#11697](/~https://github.com/remix-run/react-router/pull/11697)) +- For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](/~https://github.com/remix-run/react-router/pull/11837)) + + - `createCookie` + - `createCookieSessionStorage` + - `createMemorySessionStorage` + - `createSessionStorage` + + For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html) + + Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed: + + - `createCookieFactory` + - `createSessionStorageFactory` + - `createCookieSessionStorageFactory` + - `createMemorySessionStorageFactory` + +- Imports/Exports cleanup ([#11840](/~https://github.com/remix-run/react-router/pull/11840)) + + - Removed the following exports that were previously public API from `@remix-run/router` + - types + - `AgnosticDataIndexRouteObject` + - `AgnosticDataNonIndexRouteObject` + - `AgnosticDataRouteMatch` + - `AgnosticDataRouteObject` + - `AgnosticIndexRouteObject` + - `AgnosticNonIndexRouteObject` + - `AgnosticRouteMatch` + - `AgnosticRouteObject` + - `TrackedPromise` + - `unstable_AgnosticPatchRoutesOnMissFunction` + - `Action` -> exported as `NavigationType` via `react-router` + - `Router` exported as `DataRouter` to differentiate from RR's `` + - API + - `getToPathname` (`@private`) + - `joinPaths` (`@private`) + - `normalizePathname` (`@private`) + - `resolveTo` (`@private`) + - `stripBasename` (`@private`) + - `createBrowserHistory` -> in favor of `createBrowserRouter` + - `createHashHistory` -> in favor of `createHashRouter` + - `createMemoryHistory` -> in favor of `createMemoryRouter` + - `createRouter` + - `createStaticHandler` -> in favor of wrapper `createStaticHandler` in RR Dom + - `getStaticContextFromError` + - Removed the following exports that were previously public API from `react-router` + - `Hash` + - `Pathname` + - `Search` + +- update minimum node version to 18 ([#11690](/~https://github.com/remix-run/react-router/pull/11690)) +- Remove `future.v7_prependBasename` from the ionternalized `@remix-run/router` package ([#11726](/~https://github.com/remix-run/react-router/pull/11726)) +- Remove `future.v7_throwAbortReason` from internalized `@remix-run/router` package ([#11728](/~https://github.com/remix-run/react-router/pull/11728)) +- Add `exports` field to all packages ([#11675](/~https://github.com/remix-run/react-router/pull/11675)) +- node package no longer re-exports from react-router ([#11702](/~https://github.com/remix-run/react-router/pull/11702)) +- renamed RemixContext to FrameworkContext ([#11705](/~https://github.com/remix-run/react-router/pull/11705)) +- updates the minimum React version to 18 ([#11689](/~https://github.com/remix-run/react-router/pull/11689)) +- PrefetchPageDescriptor replaced by PageLinkDescriptor ([#11960](/~https://github.com/remix-run/react-router/pull/11960)) +- - Remove the `future.v7_partialHydration` flag ([#11725](/~https://github.com/remix-run/react-router/pull/11725)) + - This also removes the `` prop + - To migrate, move the `fallbackElement` to a `hydrateFallbackElement`/`HydrateFallback` on your root route + - Also worth nothing there is a related breaking changer with this future flag: + - Without `future.v7_partialHydration` (when using `fallbackElement`), `state.navigation` was populated during the initial load + - With `future.v7_partialHydration`, `state.navigation` remains in an `"idle"` state during the initial load +- Remove `v7_relativeSplatPath` future flag ([#11695](/~https://github.com/remix-run/react-router/pull/11695)) +- Remove remaining future flags ([#11820](/~https://github.com/remix-run/react-router/pull/11820)) + + - React Router `v7_skipActionErrorRevalidation` + - Remix `v3_fetcherPersist`, `v3_relativeSplatPath`, `v3_throwAbortReason` + +- rename createRemixStub to createRoutesStub ([#11692](/~https://github.com/remix-run/react-router/pull/11692)) +- Remove `@remix-run/router` deprecated `detectErrorBoundary` option in favor of `mapRouteProperties` ([#11751](/~https://github.com/remix-run/react-router/pull/11751)) +- Add `react-router/dom` subpath export to properly enable `react-dom` as an optional `peerDependency` ([#11851](/~https://github.com/remix-run/react-router/pull/11851)) + + - This ensures that we don't blindly `import ReactDOM from "react-dom"` in `` in order to access `ReactDOM.flushSync()`, since that would break `createMemoryRouter` use cases in non-DOM environments + - DOM environments should import from `react-router/dom` to get the proper component that makes `ReactDOM.flushSync()` available: + - If you are using the Vite plugin, use this in your `entry.client.tsx`: + - `import { HydratedRouter } from 'react-router/dom'` + - If you are not using the Vite plugin and are manually calling `createBrowserRouter`/`createHashRouter`: + - `import { RouterProvider } from "react-router/dom"` + +- Remove `future.v7_fetcherPersist` flag ([#11731](/~https://github.com/remix-run/react-router/pull/11731)) + +### Minor Changes + +- - Add support for `prerender` config in the React Router vite plugin, to support existing SSG use-cases ([#11539](/~https://github.com/remix-run/react-router/pull/11539)) + - You can use the `prerender` config to pre-render your `.html` and `.data` files at build time and then serve them statically at runtime (either from a running server or a CDN) + - `prerender` can either be an array of string paths, or a function (sync or async) that returns an array of strings so that you can dynamically generate the paths by talking to your CMS, etc. + + ```ts + export default defineConfig({ + plugins: [ + reactRouter({ + async prerender() { + let slugs = await fakeGetSlugsFromCms(); + // Prerender these paths into `.html` files at build time, and `.data` + // files if they have loaders + return ["/", "/about", ...slugs.map((slug) => `/product/${slug}`)]; + }, + }), + tsconfigPaths(), + ], + }); + + async function fakeGetSlugsFromCms() { + await new Promise((r) => setTimeout(r, 1000)); + return ["shirt", "hat"]; + } + ``` + +- [REMOVE] Allow returning undefined from loaders/actions part 2 ([#12057](/~https://github.com/remix-run/react-router/pull/12057)) + + - This is a follow up to #11680 which missed some of the Remix codepaths + +- Params, loader data, and action data as props for route component exports ([#11961](/~https://github.com/remix-run/react-router/pull/11961)) + + ```tsx + export default function Component({ params, loaderData, actionData }) {} + + export function HydrateFallback({ params }) {} + export function ErrorBoundary({ params, loaderData, actionData }) {} + ``` + +- Remove duplicate `RouterProvider` impliementations ([#11679](/~https://github.com/remix-run/react-router/pull/11679)) +- ### Typesafety improvements ([#12019](/~https://github.com/remix-run/react-router/pull/12019)) + + React Router now generates types for each of your route modules. + You can access those types by importing them from `./+types/`. + For example: + + ```ts + // app/routes/product.tsx + import type * as Route from "./+types/product"; + + export function loader({ params }: Route.LoaderArgs) {} + + export default function Component({ loaderData }: Route.ComponentProps) {} + ``` + + 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 + + These types are then used to create types for route export args and props: + + - `LoaderArgs` + - `ClientLoaderArgs` + - `ActionArgs` + - `ClientActionArgs` + - `HydrateFallbackProps` + - `ComponentProps` (for the `default` export) + - `ErrorBoundaryProps` + + In the future, we plan to add types for the rest of the route module exports: `meta`, `links`, `headers`, `shouldRevalidate`, etc. + We also plan to generate types for typesafe `Link`s: + + ```tsx + + // ^^^^^^^^^^^^^ ^^^^^^^^^ + // typesafe `to` and `params` based on the available routes in your app + ``` + + #### Setup + + React Router will generate types into a `.react-router/` directory at the root of your app. + This directory is fully managed by React Router and is derived based on your route config (`routes.ts`). + + 👉 **Add `.react-router/` to `.gitignore`** + + ```txt + .react-router + ``` + + You should also ensure that generated types for routes are always present before running typechecking, + especially for running typechecking in CI. + + 👉 **Add `react-router typegen` to your `typecheck` command in `package.json`** + + ```json + { + "scripts": { + "typecheck": "react-router typegen && tsc" + } + } + ``` + + To get TypeScript to use those generated types, you'll need to add them to `include` in `tsconfig.json`. + And to be able to import them as if they files next to your route modules, you'll also need to configure `rootDirs`. + + 👉 **Configure `tsconfig.json` for generated types** + + ```json + { + "include": [".react-router/types/**/*"], + "compilerOptions": { + "rootDirs": [".", "./.react-router/types"] + } + } + ``` + + #### `typegen` command + + You can manually generate types with the new `typegen` command: + + ```sh + react-router typegen + ``` + + However, manual type generation is tedious and types can get out of sync quickly if you ever forget to run `typegen`. + Instead, we recommend that you setup our new TypeScript plugin which will automatically generate fresh types whenever routes change. + That way, you'll always have up-to-date types. + + #### TypeScript plugin + + To get automatic type generation, you can use our new TypeScript plugin. + + 👉 **Add the TypeScript plugin to `tsconfig.json`** + + ```json + { + "compilerOptions": { + "plugins": [{ "name": "@react-router/dev" }] + } + } + ``` + + We plan to add some other goodies to our TypeScript plugin soon, including: + + - Automatic `jsdoc` for route exports that include links to official docs + - Autocomplete for route exports + - Warnings for non-HMR compliant exports + + ##### VSCode + + TypeScript looks for plugins registered in `tsconfig.json` in the local `node_modules/`, + but VSCode ships with its own copy of TypeScript that is installed outside of your project. + For TypeScript plugins to work, you'll need to tell VSCode to use the local workspace version of TypeScript. + For security reasons, [VSCode won't use the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript) until you manually opt-in. + + Your project should have a `.vscode/settings.json` with the following settings: + + ```json + { + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true + } + ``` + + That way [VSCode will ask you](https://code.visualstudio.com/updates/v1_45#_prompt-users-to-switch-to-the-workspace-version-of-typescript) if you want to use the workspace version of TypeScript the first time you open a TS file in that project. + + > [!IMPORTANT] + > You'll need to install dependencies first so that the workspace version of TypeScript is available. + + 👉 **Select "Allow" when VSCode asks if you want to use the workspace version of TypeScript** + + Otherwise, you can also manually opt-in to the workspace version: + + 1. Open up any TypeScript file in your project + 2. Open up the VSCode Command Palette (Cmd+Shift+P) + 3. Search for `Select TypeScript Version` + 4. Choose `Use Workspace Version` + 5. Quit and reopen VSCode + + ##### Troubleshooting + + In VSCode, open up any TypeScript file in your project and then use CMD+SHIFT+P to select `Open TS Server log`. + There should be a log for `[react-router] setup` that indicates that the plugin was resolved correctly. + Then look for any errors in the log. + +- Stabilize `unstable_dataStrategy` ([#11969](/~https://github.com/remix-run/react-router/pull/11969)) +- Stabilize `unstable_patchRoutesOnNavigation` ([#11970](/~https://github.com/remix-run/react-router/pull/11970)) + +### Patch Changes + +- Remove unstable upload handler. ([#12015](/~https://github.com/remix-run/react-router/pull/12015)) +- Fix redirects returned from loaders/actions using `data()` ([#12021](/~https://github.com/remix-run/react-router/pull/12021)) +- [REMOVE] Rename RemixRouter->DataRouter ([#12062](/~https://github.com/remix-run/react-router/pull/12062)) +- Updated dependencies: + - `react-router@7.0.0-pre.0` + ## 6.26.2 ### Patch Changes diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 215eb32c85..5d7544f295 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "react-router", - "version": "6.26.2", + "version": "7.0.0-pre.0", "description": "Declarative routing for React", "keywords": [ "react",