Skip to content

Commit

Permalink
Patch in 6.26.1 changes from v6 branch
Browse files Browse the repository at this point in the history
brophdawg11 committed Aug 15, 2024
1 parent 4b1f73f commit e3b796a
Showing 22 changed files with 522 additions and 136 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -203,6 +203,18 @@ Date: YYYY-MM-DD
**Full Changelog**: [`v6.X.Y...v6.X.Y`](https://github.com/remix-run/react-router/compare/react-router@6.X.Y...react-router@6.X.Y)
-->

## v6.26.1

Date: 2024-08-15

### Patch Changes

- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
- Update `unstable_patchRoutesOnNavigation` logic so that we call the method when we match routes with dynamic param or splat segments in case there exists a higher-scoring static route that we've not yet discovered ([#11883](https://github.com/remix-run/react-router/pull/11883))
- We also now leverage an internal FIFO queue of previous paths we've already called `unstable_patchRoutesOnNavigation` against so that we don't re-call on subsequent navigations to the same path

**Full Changelog**: [`v6.26.0...v6.26.1`](https://github.com/remix-run/react-router/compare/react-router@6.26.0...react-router@6.26.1)

## v6.26.0

Date: 2024-08-01
34 changes: 23 additions & 11 deletions docs/routers/create-browser-router.md
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ function createBrowserRouter(
future?: FutureConfig;
hydrationData?: HydrationState;
unstable_dataStrategy?: unstable_DataStrategyFunction;
unstable_patchRoutesOnMiss?: unstable_PatchRoutesOnMissFunction;
unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
window?: Window;
}
): RemixRouter;
@@ -384,7 +384,7 @@ let router = createBrowserRouter(routes, {
});
```

## `opts.unstable_patchRoutesOnMiss`
## `opts.unstable_patchRoutesOnNavigation`

<docs-warning>This API is marked "unstable" so it is subject to breaking API changes in minor releases</docs-warning>

@@ -394,12 +394,12 @@ To combat this, we introduced [`route.lazy`][route-lazy] in [v6.9.0][6-9-0] whic

In some cases, even this doesn't go far enough. For very large applications, providing all route definitions up front can be prohibitively expensive. Additionally, it might not even be possible to provide all route definitions up front in certain Micro-Frontend or Module-Federation architectures.

This is where `unstable_patchRoutesOnMiss` comes in ([RFC][fog-of-war-rfc]). This API is for advanced use-cases where you are unable to provide the full route tree up-front and need a way to lazily "discover" portions of the route tree at runtime. This feature is often referred to as ["Fog of War"][fog-of-war] because similar to how video games expand the "world" as you move around - the router would be expanding its routing tree as the user navigated around the app - but would only ever end up loading portions of the tree that the user visited.
This is where `unstable_patchRoutesOnNavigation` comes in ([RFC][fog-of-war-rfc]). This API is for advanced use-cases where you are unable to provide the full route tree up-front and need a way to lazily "discover" portions of the route tree at runtime. This feature is often referred to as ["Fog of War"][fog-of-war] because similar to how video games expand the "world" as you move around - the router would be expanding its routing tree as the user navigated around the app - but would only ever end up loading portions of the tree that the user visited.

### Type Declaration

```ts
export interface unstable_PatchRoutesOnMissFunction {
export interface unstable_PatchRoutesOnNavigationFunction {
(opts: {
path: string;
matches: RouteMatch[];
@@ -413,7 +413,7 @@ export interface unstable_PatchRoutesOnMissFunction {

### Overview

`unstable_patchRoutesOnMiss` will be called anytime React Router is unable to match a `path`. The arguments include the `path`, any partial `matches`, and a `patch` function you can call to patch new routes into the tree at a specific location. This method is executed during the `loading` portion of the navigation for `GET` requests and during the `submitting` portion of the navigation for non-`GET` requests.
`unstable_patchRoutesOnNavigation` will be called anytime React Router is unable to match a `path`. The arguments include the `path`, any partial `matches`, and a `patch` function you can call to patch new routes into the tree at a specific location. This method is executed during the `loading` portion of the navigation for `GET` requests and during the `submitting` portion of the navigation for non-`GET` requests.

**Patching children into an existing route**

@@ -427,7 +427,10 @@ const router = createBrowserRouter(
},
],
{
async unstable_patchRoutesOnMiss({ path, patch }) {
async unstable_patchRoutesOnNavigation({
path,
patch,
}) {
if (path === "/a") {
// Load/patch the `a` route as a child of the route with id `root`
let route = await getARoute();
@@ -439,7 +442,7 @@ const router = createBrowserRouter(
);
```

In the above example, if the user clicks a link to `/a`, React Router won't be able to match it initially and will call `patchRoutesOnMiss` with `/a` and a `matches` array containing the root route match. By calling `patch`, the `a` route will be added to the route tree and React Router will perform matching again. This time it will successfully match the `/a` path and the navigation will complete successfully.
In the above example, if the user clicks a link to `/a`, React Router won't be able to match it initially and will call `patchRoutesOnNavigation` with `/a` and a `matches` array containing the root route match. By calling `patch`, the `a` route will be added to the route tree and React Router will perform matching again. This time it will successfully match the `/a` path and the navigation will complete successfully.

**Patching new root-level routes**

@@ -455,7 +458,10 @@ const router = createBrowserRouter(
},
],
{
async unstable_patchRoutesOnMiss({ path, patch }) {
async unstable_patchRoutesOnNavigation({
path,
patch,
}) {
if (path === "/root-sibling") {
// Load/patch the `/root-sibling` route as a sibling of the root route
let route = await getRootSiblingRoute();
@@ -480,7 +486,10 @@ let router = createBrowserRouter(
},
],
{
async unstable_patchRoutesOnMiss({ path, patch }) {
async unstable_patchRoutesOnNavigation({
path,
patch,
}) {
if (path.startsWith("/dashboard")) {
let children = await import("./dashboard");
patch(null, children);
@@ -510,7 +519,7 @@ let router = createBrowserRouter(
children: [
{
// If we want to include /dashboard in the critical routes, we need to
// also include it's index route since patchRoutesOnMiss will not be
// also include it's index route since patchRoutesOnNavigation will not be
// called on a navigation to `/dashboard` because it will have successfully
// matched the `/dashboard` parent route
index: true,
@@ -535,7 +544,10 @@ let router = createBrowserRouter(
},
],
{
async unstable_patchRoutesOnMiss({ matches, patch }) {
async unstable_patchRoutesOnNavigation({
matches,
patch,
}) {
let leafRoute = matches[matches.length - 1]?.route;
if (leafRoute?.handle?.lazyChildren) {
let children =
2 changes: 1 addition & 1 deletion docs/start/tutorial.md
Original file line number Diff line number Diff line change
@@ -1364,7 +1364,7 @@ If we review the search form, it looks like this:
</form>
```
As we've seen before, browsers can serialize forms by the `name` attribute of its input elements. The name of this input is `q`, that's why the URL has `?q=`. If we named it `search` the URL would be `?search=`.
As we've seen before, browsers can serialize forms by the `name` attribute of it's input elements. The name of this input is `q`, that's why the URL has `?q=`. If we named it `search` the URL would be `?search=`.
Note that this form is different from the others we've used, it does not have `<form method="post">`. The default `method` is `"get"`. That means when the browser creates the request for the next document, it doesn't put the form data into the request POST body, but into the [`URLSearchParams`][urlsearchparams] of a GET request.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@
"none": "17.3 kB"
},
"packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
"none": "23.7 kB"
"none": "23.8 kB"
}
},
"pnpm": {
9 changes: 9 additions & 0 deletions packages/react-router-dom-v5-compat/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# `react-router-dom-v5-compat`

## 6.26.1

### Patch Changes

- Updated dependencies:
- `@remix-run/router@1.19.1`
- `react-router-dom@6.26.1`
- `react-router@6.26.1`

## 6.26.0

### Patch Changes
2 changes: 1 addition & 1 deletion packages/react-router-dom-v5-compat/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-router-dom-v5-compat",
"version": "6.26.0",
"version": "6.26.1",
"description": "Migration path to React Router v6 from v4/5",
"keywords": [
"react",
9 changes: 9 additions & 0 deletions packages/react-router-dom/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# `react-router-dom`

## 6.26.1

### Patch Changes

- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
- Updated dependencies:
- `@remix-run/router@1.19.1`
- `react-router@6.26.1`

## 6.26.0

### Minor Changes
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ describe("v7_partialHydration", () => {
testPartialHydration(createMemoryRouter, ReactRouter_RouterProvider);

// these tests only run for memory since we just need to set initialEntries
it("supports partial hydration w/patchRoutesOnMiss (leaf fallback)", async () => {
it("supports partial hydration w/patchRoutesOnNavigation (leaf fallback)", async () => {
let parentDfd = createDeferred();
let childDfd = createDeferred();
let router = createMemoryRouter(
@@ -69,7 +69,7 @@ describe("v7_partialHydration", () => {
future: {
v7_partialHydration: true,
},
unstable_patchRoutesOnMiss({ path, patch }) {
unstable_patchRoutesOnNavigation({ path, patch }) {
if (path === "/parent/child") {
patch("parent", [
{
@@ -119,7 +119,7 @@ describe("v7_partialHydration", () => {
`);
});

it("supports partial hydration w/patchRoutesOnMiss (root fallback)", async () => {
it("supports partial hydration w/patchRoutesOnNavigation (root fallback)", async () => {
let parentDfd = createDeferred();
let childDfd = createDeferred();
let router = createMemoryRouter(
@@ -157,7 +157,7 @@ describe("v7_partialHydration", () => {
future: {
v7_partialHydration: true,
},
unstable_patchRoutesOnMiss({ path, patch }) {
unstable_patchRoutesOnNavigation({ path, patch }) {
if (path === "/parent/child") {
patch("parent", [
{
10 changes: 5 additions & 5 deletions packages/react-router-dom/index.tsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ import type {
RouterProps,
RouterProviderProps,
To,
unstable_PatchRoutesOnMissFunction,
unstable_PatchRoutesOnNavigationFunction,
} from "react-router";
import {
Router,
@@ -153,7 +153,7 @@ export type {
To,
UIMatch,
unstable_HandlerResult,
unstable_PatchRoutesOnMissFunction,
unstable_PatchRoutesOnNavigationFunction,
} from "react-router";
export {
AbortedDeferredError,
@@ -261,7 +261,7 @@ interface DOMRouterOpts {
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
hydrationData?: HydrationState;
unstable_dataStrategy?: unstable_DataStrategyFunction;
unstable_patchRoutesOnMiss?: unstable_PatchRoutesOnMissFunction;
unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
window?: Window;
}

@@ -280,7 +280,7 @@ export function createBrowserRouter(
routes,
mapRouteProperties,
unstable_dataStrategy: opts?.unstable_dataStrategy,
unstable_patchRoutesOnMiss: opts?.unstable_patchRoutesOnMiss,
unstable_patchRoutesOnNavigation: opts?.unstable_patchRoutesOnNavigation,
window: opts?.window,
}).initialize();
}
@@ -300,7 +300,7 @@ export function createHashRouter(
routes,
mapRouteProperties,
unstable_dataStrategy: opts?.unstable_dataStrategy,
unstable_patchRoutesOnMiss: opts?.unstable_patchRoutesOnMiss,
unstable_patchRoutesOnNavigation: opts?.unstable_patchRoutesOnNavigation,
window: opts?.window,
}).initialize();
}
2 changes: 1 addition & 1 deletion packages/react-router-dom/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-router-dom",
"version": "6.26.0",
"version": "6.26.1",
"description": "Declarative routing for React web applications",
"keywords": [
"react",
7 changes: 7 additions & 0 deletions packages/react-router-native/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# `react-router-native`

## 6.26.1

### Patch Changes

- Updated dependencies:
- `react-router@6.26.1`

## 6.26.0

### Patch Changes
2 changes: 1 addition & 1 deletion packages/react-router-native/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-router-native",
"version": "6.26.0",
"version": "6.26.1",
"description": "Declarative routing for React Native applications",
"keywords": [
"react",
8 changes: 8 additions & 0 deletions packages/react-router/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# `react-router`

## 6.26.1

### Patch Changes

- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
- Updated dependencies:
- `@remix-run/router@1.19.1`

## 6.26.0

### Minor Changes
10 changes: 5 additions & 5 deletions packages/react-router/index.ts
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ import type {
To,
UIMatch,
unstable_HandlerResult,
unstable_AgnosticPatchRoutesOnMissFunction,
unstable_AgnosticPatchRoutesOnNavigationFunction,
} from "@remix-run/router";
import {
AbortedDeferredError,
@@ -291,8 +291,8 @@ function mapRouteProperties(route: RouteObject) {
return updates;
}

export interface unstable_PatchRoutesOnMissFunction
extends unstable_AgnosticPatchRoutesOnMissFunction<RouteMatch> {}
export interface unstable_PatchRoutesOnNavigationFunction
extends unstable_AgnosticPatchRoutesOnNavigationFunction<RouteMatch> {}

export function createMemoryRouter(
routes: RouteObject[],
@@ -303,7 +303,7 @@ export function createMemoryRouter(
initialEntries?: InitialEntry[];
initialIndex?: number;
unstable_dataStrategy?: unstable_DataStrategyFunction;
unstable_patchRoutesOnMiss?: unstable_PatchRoutesOnMissFunction;
unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
}
): RemixRouter {
return createRouter({
@@ -320,7 +320,7 @@ export function createMemoryRouter(
routes,
mapRouteProperties,
unstable_dataStrategy: opts?.unstable_dataStrategy,
unstable_patchRoutesOnMiss: opts?.unstable_patchRoutesOnMiss,
unstable_patchRoutesOnNavigation: opts?.unstable_patchRoutesOnNavigation,
}).initialize();
}

2 changes: 1 addition & 1 deletion packages/react-router/lib/hooks.tsx
Original file line number Diff line number Diff line change
@@ -698,7 +698,7 @@ export function _renderMatches(
dataRouterState.matches.length > 0
) {
// Don't bail if we're initializing with partial hydration and we have
// router matches. That means we're actively running `patchRoutesOnMiss`
// router matches. That means we're actively running `patchRoutesOnNavigation`
// so we should render down the partial matches to the appropriate
// `HydrateFallback`. We only do this if `parentMatches` is empty so it
// only impacts the root matches for `RouterProvider` and no descendant
2 changes: 1 addition & 1 deletion packages/react-router/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-router",
"version": "6.26.0",
"version": "6.26.1",
"description": "Declarative routing for React",
"keywords": [
"react",
10 changes: 10 additions & 0 deletions packages/router/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
# `@remix-run/router`

## 1.19.1

### Patch Changes

- Fog of War: Update `unstable_patchRoutesOnMiss` logic so that we call the method when we match routes with dynamic param or splat segments in case there exists a higher-scoring static route that we've not yet discovered. ([#11883](https://github.com/remix-run/react-router/pull/11883))

- We also now leverage an internal FIFO queue of previous paths we've already called `unstable_patchRouteOnMiss` against so that we don't re-call on subsequent navigations to the same path

- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))

## 1.19.0

### Minor Changes
Loading

0 comments on commit e3b796a

Please sign in to comment.