Support lazy route discovery (fog of war) #11626

brophdawg11 · 2024-06-06T19:40:33Z

Original RFC: #11113

We changed the API to a more granular API that could patch down at the individual route level since we found that for large enough apps, the children() API would require potentially patching way too many routes for a single link click.

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path === "/a") {
        // Load/patch the `a` route as a child of the route with id `root`
        let route = await getARoute(); // { path: 'a', Component: A }
        patch("root", [route]);
      }
    },
  }
);

Closes the RR half of remix-run/remix#8423

changeset-bot · 2024-06-06T19:40:36Z

🦋 Changeset detected

Latest commit: ce23383

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
react-router-dom	Minor
react-router	Minor
@remix-run/router	Minor
react-router-dom-v5-compat	Minor
react-router-native	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This reverts commit 52e9b8e.

brophdawg11 · 2024-06-06T21:26:29Z

packages/router/router.ts

+   * @param routeId The parent route id
+   * @param children The additional children routes
+   */
+  patchRoutes(routeId: string | null, children: AgnosticRouteObject[]): void;


Used by Remix to eagerly/imperatively patch routes in prior to navigations

Why is this considered private? Wouldn't this be an important part of the public API for a feature like this?

Only for advanced pre-fetching use cases - not the common use case where you'll use patch from patchRoutesOnMiss. This is more so just to stay in line with the current public API of router which is that it's all marked private and we prefer you use the React Router APIs in the vast majority of cases. In v7 we won't have a standalone @remix-run/router package but we will want to start documenting the true "public" APIs of the router

brophdawg11 · 2024-06-06T21:26:59Z

packages/router/router.ts

+  /**
+   * Route matches which may have been updated from fog of war discovery
+   */
+  matches?: RouterState["matches"];


We can now return updated matches from fog of war during loader/action execution flows

brophdawg11 · 2024-06-06T21:28:15Z

packages/router/router.ts

+    let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
+    if (fogOfWar.active && fogOfWar.matches) {
+      matches = fogOfWar.matches;
+    }


Detect if this is a fog of war scenario and we should bypass a synchronous 404 and go into our loading/submitting state to perform discovery

brophdawg11 · 2024-06-06T21:29:03Z

packages/router/router.ts

+      let discoverResult = await discoverRoutes(
+        matches,
+        location.pathname,
+        request.signal
+      );


Try to discover a matching route during the submitting phase of an action

brophdawg11 · 2024-06-06T21:29:18Z

packages/router/router.ts

+          ],
+        };
+      } else {
+        matches = discoverResult.matches;


Use the lazily discovered matches for the action execution

brophdawg11 · 2024-06-06T21:29:48Z

packages/router/router.ts

+      let discoverResult = await discoverRoutes(
+        matches,
+        location.pathname,
+        request.signal
+      );


Perform lazy route discovery during the loading phase of a GET navigation

brophdawg11 · 2024-06-06T21:30:30Z

packages/router/router.ts

+        requestMatches,
+        path,
+        fetchRequest.signal
+      );


Fog of war on a fetcher action submission

brophdawg11 · 2024-06-06T21:31:57Z

packages/router/router.ts

+        let fogMatches = matchRoutesImpl<AgnosticDataRouteObject>(
+          routesToUse,
+          pathname,
+          basename,
+          true
+        );


This true matches as far down as we can

brophdawg11 · 2024-06-06T21:32:47Z

packages/router/router.ts

+        let leafRoute = matches[matches.length - 1].route;
+        if (leafRoute.path === "*") {
+          // If we matched a splat, it might only be because we haven't yet fetched
+          // the children that would match with a higher score, so let's fetch
+          // around and find out
+          let partialMatches = matchRoutesImpl<AgnosticDataRouteObject>(
+            routesToUse,
+            pathname,
+            basename,
+            true
+          );
+          return { active: true, matches: partialMatches };


Splats are tricky because they might match as a catch-all but there might be a better match if we run through patchRoutesOnMiss - so we treat them as a miss and if we match then splat again after a patchRouteOnMiss execution then we'll use it.

brophdawg11 · 2024-06-06T21:33:21Z

packages/router/router.ts

+  ): Promise<DiscoverRoutesResult> {
+    let partialMatches: AgnosticDataRouteMatch[] | null = matches;
+    let route = partialMatches[partialMatches.length - 1].route;
+    while (true) {


Loop through potentially many patchRoutesOnMiss calls until we officially 404 or we find a match

brophdawg11 · 2024-06-06T21:34:29Z

packages/router/router.ts

+        // We are no longer partially matching anything new so this was either a
+        // legit splat match above, or it's a 404
+        if (matchedSplat) {
+          return { type: "success", matches: newMatches };


If we gave it another run for a splat match and we end up matching the same exact matches, then the splat is actually the correct match and we can use it

docs/routers/create-browser-router.md

Co-authored-by: Mark Dalgleish <[email protected]>

docs/routers/create-browser-router.md

This reverts commit edf4162.

github-actions · 2024-06-14T18:55:03Z

🤖 Hello there,

We just published version 6.24.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

github-actions · 2024-06-24T18:46:08Z

🤖 Hello there,

We just published version 6.24.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

brophdawg11 added 19 commits May 15, 2024 20:57

POC of Fog of War approach

7a345ec

Remove splat requirement

cdb546c

Supprt depth > 1

8c99860

Refactor for reusability

b8dea1b

Support actions

30b8888

404 and Error handling

881c5d1

Handle thrown errors from route.children()

8627d55

Update children() thrown errors to be a 400 with partial matches

278abda

Updated for pathless and splat routes

9e4ed91

pathless/splat tests

086eb3d

Get experimental releases working

52e9b8e

Merge branch 'dev' into brophdawg11/fog-of-war

e4bca04

Handle route discovery in router.fetch

41f805c

Refactor API from children() -> patchRoutesOnMiss()

50e4a41

Add test for old-style children() API

c4e96c3

Remove invalid tests for index routes

b0c78a7

POC of patchRoutes()

cfd0e7f

Remove lingering children type updates

40105aa

Add patchRoutes to createStaticRouter

abead7a

remix-cla-bot bot added the CLA Signed label Jun 6, 2024

brophdawg11 mentioned this pull request Jun 6, 2024

🗺️ Fog of War remix-run/remix#8423

Closed

brophdawg11 added 7 commits June 6, 2024 15:41

Revert "Get experimental releases working"

822bfcc

This reverts commit 52e9b8e.

Fix false positive when no patchRoutesOnMiss is provided

abedd15

Changeset and export through RR packages

ed5c3d9

update docs

ade9ea9

fix indents in docs

a67fe79

Remove leftover code block

b69830f

Bump bundle

42a5087

brophdawg11 commented Jun 6, 2024

View reviewed changes

packages/router/router.ts

requestMatches,

path,

fetchRequest.signal

);

Copy link

Contributor Author

brophdawg11 Jun 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fog of war on a fetcher action submission

brophdawg11 commented Jun 6, 2024

View reviewed changes

markdalgleish reviewed Jun 6, 2024

View reviewed changes

docs/routers/create-browser-router.md Outdated Show resolved Hide resolved

brophdawg11 and others added 7 commits June 7, 2024 12:19

Support for no partial matches

ba2138a

Get experimental releases working

edf4162

Fix agnostic types and hydration issues

e157216

Fix type

9c60e75

Change arguments to object and remove return shorthand

f370cca

Update docs/routers/create-browser-router.md

c5cae38

Co-authored-by: Mark Dalgleish <[email protected]>

Fix node 16 tests

ecf191a

dchenk reviewed Jun 12, 2024

View reviewed changes

docs/routers/create-browser-router.md Outdated Show resolved Hide resolved

brophdawg11 added 3 commits June 13, 2024 09:35

Fix typo

57f7290

Revert "Get experimental releases working"

7fe07e9

This reverts commit edf4162.

Updates

499ee1b

brophdawg11 mentioned this pull request Jun 13, 2024

Fog of War remix-run/remix#9600

Merged

Merge branch 'dev' into brophdawg11/fog-of-war

ce23383

brophdawg11 merged commit 4e85e98 into dev Jun 14, 2024
3 checks passed

brophdawg11 deleted the brophdawg11/fog-of-war branch June 14, 2024 14:55

github-actions bot mentioned this pull request Jun 14, 2024

chore: Update version for release (pre) #11661

Merged

github-actions bot mentioned this pull request Jun 24, 2024

chore: Update version for release #11717

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support lazy route discovery (fog of war) #11626

Support lazy route discovery (fog of war) #11626

brophdawg11 commented Jun 6, 2024 •

edited

Loading

changeset-bot bot commented Jun 6, 2024 •

edited

Loading

brophdawg11 Jun 6, 2024

markdalgleish Jun 6, 2024

brophdawg11 Jun 13, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

brophdawg11 Jun 6, 2024

github-actions bot commented Jun 14, 2024

github-actions bot commented Jun 24, 2024

Support lazy route discovery (fog of war) #11626

Support lazy route discovery (fog of war) #11626

Conversation

brophdawg11 commented Jun 6, 2024 • edited Loading

changeset-bot bot commented Jun 6, 2024 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jun 14, 2024

github-actions bot commented Jun 24, 2024

brophdawg11 commented Jun 6, 2024 •

edited

Loading

changeset-bot bot commented Jun 6, 2024 •

edited

Loading