landvex: Fixar och tester klara för alla komponenter
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
This commit is contained in:
Bernt
+907
@@ -0,0 +1,907 @@
|
||||
# `@remix-run/router`
|
||||
|
||||
## v1.23.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Lift `decodePath` call out of hot path during route matching ([#15119](https://github.com/remix-run/react-router/pull/15119))
|
||||
- Normalize double slashes in redirect paths ([#15118](https://github.com/remix-run/react-router/pull/15118))
|
||||
|
||||
## 1.23.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Validate redirect locations ([#14707](https://github.com/remix-run/react-router/pull/14707))
|
||||
|
||||
## 1.23.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Normalize double-slashes in `resolvePath` ([#14537](https://github.com/remix-run/react-router/pull/14537))
|
||||
|
||||
## 1.23.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add `fetcherKey` as a parameter to `patchRoutesOnNavigation` ([#13109](https://github.com/remix-run/react-router/pull/13109))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix regression introduced in `6.29.0` via [#12169](https://github.com/remix-run/react-router/pull/12169) that caused issues navigating to hash routes inside splat routes for applications using Lazy Route Discovery (`patchRoutesOnNavigation`) ([#13108](https://github.com/remix-run/react-router/pull/13108))
|
||||
|
||||
## 1.22.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Provide the request `signal` as a parameter to `patchRoutesOnNavigation` ([#12900](https://github.com/remix-run/react-router/pull/12900))
|
||||
|
||||
- This can be used to abort any manifest fetches if the in-flight navigation/fetcher is aborted
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Do not log v7 deprecation warnings in production builds ([#12794](https://github.com/remix-run/react-router/pull/12794))
|
||||
- Strip search parameters from `patchRoutesOnNavigation` `path` param for fetcher calls ([#12899](https://github.com/remix-run/react-router/pull/12899))
|
||||
- Properly bubble headers when throwing a `data()` result ([#12845](https://github.com/remix-run/react-router/pull/12845))
|
||||
- Optimize route matching by skipping redundant `matchRoutes` calls when possible ([#12169](https://github.com/remix-run/react-router/pull/12169))
|
||||
|
||||
## 1.21.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- - Fix issue with fetcher data cleanup in the data layer on fetcher unmount ([#12674](https://github.com/remix-run/react-router/pull/12674))
|
||||
- Fix behavior of manual fetcher keys when not opted into `future.v7_fetcherPersist`
|
||||
|
||||
## 1.21.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- - Log deprecation warnings for v7 flags ([#11750](https://github.com/remix-run/react-router/pull/11750))
|
||||
- Add deprecation warnings to `json`/`defer` in favor of returning raw objects
|
||||
- These methods will be removed in React Router v7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Update JSDoc URLs for new website structure (add /v6/ segment) ([#12141](https://github.com/remix-run/react-router/pull/12141))
|
||||
|
||||
## 1.20.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Stabilize `unstable_patchRoutesOnNavigation` ([#11973](https://github.com/remix-run/react-router/pull/11973))
|
||||
- Add new `PatchRoutesOnNavigationFunctionArgs` type for convenience ([#11967](https://github.com/remix-run/react-router/pull/11967))
|
||||
- Stabilize `unstable_dataStrategy` ([#11974](https://github.com/remix-run/react-router/pull/11974))
|
||||
- Stabilize the `unstable_flushSync` option for navigations and fetchers ([#11989](https://github.com/remix-run/react-router/pull/11989))
|
||||
- Stabilize the `unstable_viewTransition` option for navigations and the corresponding `unstable_useViewTransitionState` hook ([#11989](https://github.com/remix-run/react-router/pull/11989))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix bug when submitting to the current contextual route (parent route with an index child) when an `?index` param already exists from a prior submission ([#12003](https://github.com/remix-run/react-router/pull/12003))
|
||||
- Fix `useFormAction` bug - when removing `?index` param it would not keep other non-Remix `index` params ([#12003](https://github.com/remix-run/react-router/pull/12003))
|
||||
- Fix bug with fetchers not persisting `preventScrollReset` through redirects during concurrent fetches ([#11999](https://github.com/remix-run/react-router/pull/11999))
|
||||
- Remove internal cache to fix issues with interrupted `patchRoutesOnNavigation` calls ([#12055](https://github.com/remix-run/react-router/pull/12055))
|
||||
- We used to cache in-progress calls to `patchRoutesOnNavigation` internally so that multiple navigations with the same start/end would only execute the function once and use the same promise
|
||||
- However, this approach was at odds with `patch` short circuiting if a navigation was interrupted (and the `request.signal` aborted) since the first invocation's `patch` would no-op
|
||||
- This cache also made some assumptions as to what a valid cache key might be - and is oblivious to any other application-state changes that may have occurred
|
||||
- So, the cache has been removed because in _most_ cases, repeated calls to something like `import()` for async routes will already be cached automatically - and if not it's easy enough for users to implement this cache in userland
|
||||
- Avoid unnecessary `console.error` on fetcher abort due to back-to-back revalidation calls ([#12050](https://github.com/remix-run/react-router/pull/12050))
|
||||
- Expose errors thrown from `patchRoutesOnNavigation` directly to `useRouteError` instead of wrapping them in a 400 `ErrorResponse` instance ([#12111](https://github.com/remix-run/react-router/pull/12111))
|
||||
- Fix types for `RouteObject` within `PatchRoutesOnNavigationFunction`'s `patch` method so it doesn't expect agnostic route objects passed to `patch` ([#11967](https://github.com/remix-run/react-router/pull/11967))
|
||||
- Fix bugs with `partialHydration` when hydrating with errors ([#12070](https://github.com/remix-run/react-router/pull/12070))
|
||||
- Remove internal `discoveredRoutes` FIFO queue from `unstable_patchRoutesOnNavigation` ([#11977](https://github.com/remix-run/react-router/pull/11977))
|
||||
|
||||
## 1.19.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Update the `unstable_dataStrategy` API to allow for more advanced implementations ([#11943](https://github.com/remix-run/react-router/pull/11943))
|
||||
- Rename `unstable_HandlerResult` to `unstable_DataStrategyResult`
|
||||
- The return signature has changed from a parallel array of `unstable_DataStrategyResult[]` (parallel to `matches`) to a key/value object of `routeId => unstable_DataStrategyResult`
|
||||
- This allows you to more easily decide to opt-into or out-of revalidating data that may not have been revalidated by default (via `match.shouldLoad`)
|
||||
- ⚠️ This is a breaking change if you've currently adopted `unstable_dataStrategy`
|
||||
- Added a new `fetcherKey` parameter to `unstable_dataStrategy` to allow differentiation from navigational and fetcher calls
|
||||
- You should now return/throw a result from your `handlerOverride` instead of returning a `DataStrategyResult`
|
||||
- If you are aggregating the results of `match.resolve()` into a final results object you should not need to think about the `DataStrategyResult` type
|
||||
- If you are manually filling your results object from within your `handlerOverride`, then you will need to assign a `DataStrategyResult` as the value so React Router knows if it's a successful execution or an error.
|
||||
- Preserve view transition through redirects ([#11925](https://github.com/remix-run/react-router/pull/11925))
|
||||
- Fix blocker usage when `blocker.proceed` is called quickly/synchronously ([#11930](https://github.com/remix-run/react-router/pull/11930))
|
||||
- Preserve pending view transitions through a router revalidation call ([#11917](https://github.com/remix-run/react-router/pull/11917))
|
||||
|
||||
## 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
|
||||
|
||||
- Add a new `replace(url, init?)` alternative to `redirect(url, init?)` that performs a `history.replaceState` instead of a `history.pushState` on client-side navigation redirects ([#11811](https://github.com/remix-run/react-router/pull/11811))
|
||||
- Add a new `unstable_data()` API for usage with Remix Single Fetch ([#11836](https://github.com/remix-run/react-router/pull/11836))
|
||||
- This API is not intended for direct usage in React Router SPA applications
|
||||
- It is primarily intended for usage with `createStaticHandler.query()` to allow loaders/actions to return arbitrary data + `status`/`headers` without forcing the serialization of data into a `Response` instance
|
||||
- This allows for more advanced serialization tactics via `unstable_dataStrategy` such as serializing via `turbo-stream` in Remix Single Fetch
|
||||
- ⚠️ This removes the `status` field from `HandlerResult`
|
||||
- If you need to return a specific `status` from `unstable_dataStrategy` you should instead do so via `unstable_data()`
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix internal cleanup of interrupted fetchers to avoid invalid revalidations on navigations ([#11839](https://github.com/remix-run/react-router/pull/11839))
|
||||
- When a `fetcher.load` is interrupted by an `action` submission, we track it internally and force revalidation once the `action` completes
|
||||
- We previously only cleared out this internal tracking info on a successful _navigation_ submission
|
||||
- Therefore, if the `fetcher.load` was interrupted by a `fetcher.submit`, then we wouldn't remove it from this internal tracking info on successful load (incorrectly)
|
||||
- And then on the next navigation it's presence in the internal tracking would automatically trigger execution of the `fetcher.load` again, ignoring any `shouldRevalidate` logic
|
||||
- This fix cleans up the internal tracking so it applies to both navigation submission and fetcher submissions
|
||||
- Fix initial hydration behavior when using `future.v7_partialHydration` along with `unstable_patchRoutesOnMiss` ([#11838](https://github.com/remix-run/react-router/pull/11838))
|
||||
- During initial hydration, `router.state.matches` will now include any partial matches so that we can render ancestor `HydrateFallback` components
|
||||
|
||||
## 1.18.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Stabilize `future.unstable_skipActionErrorRevalidation` as `future.v7_skipActionErrorRevalidation` ([#11769](https://github.com/remix-run/react-router/pull/11769))
|
||||
- When this flag is enabled, actions will not automatically trigger a revalidation if they return/throw a `Response` with a `4xx`/`5xx` status code
|
||||
- You may still opt-into revalidation via `shouldRevalidate`
|
||||
- This also changes `shouldRevalidate`'s `unstable_actionStatus` parameter to `actionStatus`
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix bubbling of errors thrown from `unstable_patchRoutesOnMiss` ([#11786](https://github.com/remix-run/react-router/pull/11786))
|
||||
- Fix hydration in SSR apps using `unstable_patchRoutesOnMiss` that matched a splat route on the server ([#11790](https://github.com/remix-run/react-router/pull/11790))
|
||||
|
||||
## 1.17.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fog of War (unstable): Trigger a new `router.routes` identity/reflow during route patching ([#11740](https://github.com/remix-run/react-router/pull/11740))
|
||||
- Fog of War (unstable): Fix initial matching when a splat route matches ([#11759](https://github.com/remix-run/react-router/pull/11759))
|
||||
|
||||
## 1.17.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add support for Lazy Route Discovery (a.k.a. Fog of War) ([#11626](https://github.com/remix-run/react-router/pull/11626))
|
||||
|
||||
- RFC: <https://github.com/remix-run/react-router/discussions/11113>
|
||||
- `unstable_patchRoutesOnMiss` docs: <https://reactrouter.com/v6/routers/create-browser-router>
|
||||
|
||||
## 1.16.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Support `unstable_dataStrategy` on `staticHandler.queryRoute` ([#11515](https://github.com/remix-run/react-router/pull/11515))
|
||||
|
||||
## 1.16.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add a new `unstable_dataStrategy` configuration option ([#11098](https://github.com/remix-run/react-router/pull/11098))
|
||||
- This option allows Data Router applications to take control over the approach for executing route loaders and actions
|
||||
- The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix single-fetch, middleware/context APIs, automatic loader caching, and more
|
||||
- Move `unstable_dataStrategy` from `createStaticHandler` to `staticHandler.query` so it can be request-specific for use with the `ResponseStub` approach in Remix. It's not really applicable to `queryRoute` for now since that's a singular handler call anyway so any pre-processing/post/processing could be done there manually. ([#11377](https://github.com/remix-run/react-router/pull/11377))
|
||||
- Add a new `future.unstable_skipActionRevalidation` future flag ([#11098](https://github.com/remix-run/react-router/pull/11098))
|
||||
- Currently, active loaders revalidate after any action, regardless of the result
|
||||
- With this flag enabled, actions that return/throw a 4xx/5xx response status will no longer automatically revalidate
|
||||
- This should reduce load on your server since it's rare that a 4xx/5xx should actually mutate any data
|
||||
- If you need to revalidate after a 4xx/5xx result with this flag enabled, you can still do that via returning `true` from `shouldRevalidate`
|
||||
- `shouldRevalidate` now also receives a new `unstable_actionStatus` argument alongside `actionResult` so you can make decision based on the status of the `action` response without having to encode it into the action data
|
||||
- Added a `skipLoaderErrorBubbling` flag to `staticHandler.query` to disable error bubbling on loader executions for single-fetch scenarios where the client-side router will handle the bubbling ([#11098](https://github.com/remix-run/react-router/pull/11098))
|
||||
|
||||
## 1.15.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix a `future.v7_partialHydration` bug that would re-run loaders below the boundary on hydration if SSR loader errors bubbled to a parent boundary ([#11324](https://github.com/remix-run/react-router/pull/11324))
|
||||
- Fix a `future.v7_partialHydration` bug that would consider the router uninitialized if a route did not have a loader ([#11325](https://github.com/remix-run/react-router/pull/11325))
|
||||
|
||||
## 1.15.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Preserve hydrated errors during partial hydration runs ([#11305](https://github.com/remix-run/react-router/pull/11305))
|
||||
|
||||
## 1.15.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix encoding/decoding issues with pre-encoded dynamic parameter values ([#11199](https://github.com/remix-run/react-router/pull/11199))
|
||||
|
||||
## 1.15.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add a `createStaticHandler` `future.v7_throwAbortReason` flag to throw `request.signal.reason` (defaults to a `DOMException`) when a request is aborted instead of an `Error` such as `new Error("query() call aborted: GET /path")` ([#11104](https://github.com/remix-run/react-router/pull/11104))
|
||||
|
||||
- Please note that `DOMException` was added in Node v17 so you will not get a `DOMException` on Node 16 and below.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Respect the `ErrorResponse` status code if passed to `getStaticContextFormError` ([#11213](https://github.com/remix-run/react-router/pull/11213))
|
||||
|
||||
## 1.14.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix bug where dashes were not picked up in dynamic parameter names ([#11160](https://github.com/remix-run/react-router/pull/11160))
|
||||
- Do not attempt to deserialize empty JSON responses ([#11164](https://github.com/remix-run/react-router/pull/11164))
|
||||
|
||||
## 1.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix bug with `route.lazy` not working correctly on initial SPA load when `v7_partialHydration` is specified ([#11121](https://github.com/remix-run/react-router/pull/11121))
|
||||
- Fix bug preventing revalidation from occurring for persisted fetchers unmounted during the `submitting` phase ([#11102](https://github.com/remix-run/react-router/pull/11102))
|
||||
- De-dup relative path logic in `resolveTo` ([#11097](https://github.com/remix-run/react-router/pull/11097))
|
||||
|
||||
## 1.14.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Added a new `future.v7_partialHydration` future flag that enables partial hydration of a data router when Server-Side Rendering. This allows you to provide `hydrationData.loaderData` that has values for _some_ initially matched route loaders, but not all. When this flag is enabled, the router will call `loader` functions for routes that do not have hydration loader data during `router.initialize()`, and it will render down to the deepest provided `HydrateFallback` (up to the first route without hydration data) while it executes the unhydrated routes. ([#11033](https://github.com/remix-run/react-router/pull/11033))
|
||||
|
||||
For example, the following router has a `root` and `index` route, but only provided `hydrationData.loaderData` for the `root` route. Because the `index` route has a `loader`, we need to run that during initialization. With `future.v7_partialHydration` specified, `<RouterProvider>` will render the `RootComponent` (because it has data) and then the `IndexFallback` (since it does not have data). Once `indexLoader` finishes, application will update and display `IndexComponent`.
|
||||
|
||||
```jsx
|
||||
let router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
id: "root",
|
||||
path: "/",
|
||||
loader: rootLoader,
|
||||
Component: RootComponent,
|
||||
Fallback: RootFallback,
|
||||
children: [
|
||||
{
|
||||
id: "index",
|
||||
index: true,
|
||||
loader: indexLoader,
|
||||
Component: IndexComponent,
|
||||
HydrateFallback: IndexFallback,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
{
|
||||
future: {
|
||||
v7_partialHydration: true,
|
||||
},
|
||||
hydrationData: {
|
||||
loaderData: {
|
||||
root: { message: "Hydrated from Root!" },
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
If the above example did not have an `IndexFallback`, then `RouterProvider` would instead render the `RootFallback` while it executed the `indexLoader`.
|
||||
|
||||
**Note:** When `future.v7_partialHydration` is provided, the `<RouterProvider fallbackElement>` prop is ignored since you can move it to a `Fallback` on your top-most route. The `fallbackElement` prop will be removed in React Router v7 when `v7_partialHydration` behavior becomes the standard behavior.
|
||||
|
||||
- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087))
|
||||
|
||||
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
|
||||
|
||||
**The Bug**
|
||||
The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path.
|
||||
|
||||
**The Background**
|
||||
This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat:
|
||||
|
||||
```jsx
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="dashboard/*" element={<Dashboard />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
```
|
||||
|
||||
Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
|
||||
|
||||
```jsx
|
||||
function Dashboard() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Dashboard</h2>
|
||||
<nav>
|
||||
<Link to="/">Dashboard Home</Link>
|
||||
<Link to="team">Team</Link>
|
||||
<Link to="projects">Projects</Link>
|
||||
</nav>
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<DashboardHome />} />
|
||||
<Route path="team" element={<DashboardTeam />} />
|
||||
<Route path="projects" element={<DashboardProjects />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it.
|
||||
|
||||
**The Problem**
|
||||
|
||||
The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`:
|
||||
|
||||
```jsx
|
||||
// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
|
||||
function DashboardTeam() {
|
||||
// ❌ This is broken and results in <a href="/dashboard">
|
||||
return <Link to=".">A broken link to the Current URL</Link>;
|
||||
|
||||
// ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
|
||||
return <Link to="./team">A broken link to the Current URL</Link>;
|
||||
}
|
||||
```
|
||||
|
||||
We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route.
|
||||
|
||||
Even worse, consider a nested splat route configuration:
|
||||
|
||||
```jsx
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="dashboard">
|
||||
<Route path="*" element={<Dashboard />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
```
|
||||
|
||||
Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
|
||||
|
||||
Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action:
|
||||
|
||||
```jsx
|
||||
let router = createBrowserRouter({
|
||||
path: "/dashboard",
|
||||
children: [
|
||||
{
|
||||
path: "*",
|
||||
action: dashboardAction,
|
||||
Component() {
|
||||
// ❌ This form is broken! It throws a 405 error when it submits because
|
||||
// it tries to submit to /dashboard (without the splat value) and the parent
|
||||
// `/dashboard` route doesn't have an action
|
||||
return <Form method="post">...</Form>;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route.
|
||||
|
||||
**The Solution**
|
||||
If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages:
|
||||
|
||||
```jsx
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="dashboard">
|
||||
<Route index path="*" element={<Dashboard />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
function Dashboard() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Dashboard</h2>
|
||||
<nav>
|
||||
<Link to="..">Dashboard Home</Link>
|
||||
<Link to="../team">Team</Link>
|
||||
<Link to="../projects">Projects</Link>
|
||||
</nav>
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<DashboardHome />} />
|
||||
<Route path="team" element={<DashboardTeam />} />
|
||||
<Route path="projects" element={<DashboardProjects />} />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname".
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Catch and bubble errors thrown when trying to unwrap responses from `loader`/`action` functions ([#11061](https://github.com/remix-run/react-router/pull/11061))
|
||||
- Fix `relative="path"` issue when rendering `Link`/`NavLink` outside of matched routes ([#11062](https://github.com/remix-run/react-router/pull/11062))
|
||||
|
||||
## 1.13.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see <https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329>). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078))
|
||||
|
||||
## 1.13.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix bug with `resolveTo` in splat routes ([#11045](https://github.com/remix-run/react-router/pull/11045))
|
||||
- This is a follow up to [#10983](https://github.com/remix-run/react-router/pull/10983) to handle the few other code paths using `getPathContributingMatches`
|
||||
- This removes the `UNSAFE_getPathContributingMatches` export from `@remix-run/router` since we no longer need this in the `react-router`/`react-router-dom` layers
|
||||
- Do not revalidate unmounted fetchers when `v7_fetcherPersist` is enabled ([#11044](https://github.com/remix-run/react-router/pull/11044))
|
||||
|
||||
## 1.12.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add `unstable_flushSync` option to `router.navigate` and `router.fetch` to tell the React Router layer to opt-out of `React.startTransition` and into `ReactDOM.flushSync` for state updates ([#11005](https://github.com/remix-run/react-router/pull/11005))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix `relative="path"` bug where relative path calculations started from the full location pathname, instead of from the current contextual route pathname. ([#11006](https://github.com/remix-run/react-router/pull/11006))
|
||||
|
||||
```jsx
|
||||
<Route path="/a">
|
||||
<Route path="/b" element={<Component />}>
|
||||
<Route path="/c" />
|
||||
</Route>
|
||||
</Route>;
|
||||
|
||||
function Component() {
|
||||
return (
|
||||
<>
|
||||
{/* This is now correctly relative to /a/b, not /a/b/c */}
|
||||
<Link to=".." relative="path" />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 1.11.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add a new `future.v7_fetcherPersist` flag to the `@remix-run/router` to change the persistence behavior of fetchers when `router.deleteFetcher` is called. Instead of being immediately cleaned up, fetchers will persist until they return to an `idle` state ([RFC](https://github.com/remix-run/remix/discussions/7698)) ([#10962](https://github.com/remix-run/react-router/pull/10962))
|
||||
|
||||
- This is sort of a long-standing bug fix as the `useFetchers()` API was always supposed to only reflect **in-flight** fetcher information for pending/optimistic UI -- it was not intended to reflect fetcher data or hang onto fetchers after they returned to an `idle` state
|
||||
- Keep an eye out for the following specific behavioral changes when opting into this flag and check your app for compatibility:
|
||||
- Fetchers that complete _while still mounted_ will no longer appear in `useFetchers()`. They served effectively no purpose in there since you can access the data via `useFetcher().data`).
|
||||
- Fetchers that previously unmounted _while in-flight_ will not be immediately aborted and will instead be cleaned up once they return to an `idle` state. They will remain exposed via `useFetchers` while in-flight so you can still access pending/optimistic data after unmount.
|
||||
|
||||
- When `v7_fetcherPersist` is enabled, the router now performs ref-counting on fetcher keys via `getFetcher`/`deleteFetcher` so it knows when a given fetcher is totally unmounted from the UI ([#10977](https://github.com/remix-run/react-router/pull/10977))
|
||||
|
||||
- Once a fetcher has been totally unmounted, we can ignore post-processing of a persisted fetcher result such as a redirect or an error
|
||||
- The router will also pass a new `deletedFetchers` array to the subscriber callbacks so that the UI layer can remove associated fetcher data
|
||||
|
||||
- Add support for optional path segments in `matchPath` ([#10768](https://github.com/remix-run/react-router/pull/10768))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix `router.getFetcher`/`router.deleteFetcher` type definitions which incorrectly specified `key` as an optional parameter ([#10960](https://github.com/remix-run/react-router/pull/10960))
|
||||
|
||||
## 1.10.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) by allowing users to opt-into view transitions on navigations via the new `unstable_viewTransition` option to `router.navigate` ([#10916](https://github.com/remix-run/react-router/pull/10916))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Allow 404 detection to leverage root route error boundary if path contains a URL segment ([#10852](https://github.com/remix-run/react-router/pull/10852))
|
||||
- Fix `ErrorResponse` type to avoid leaking internal field ([#10876](https://github.com/remix-run/react-router/pull/10876))
|
||||
|
||||
## 1.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- In order to move towards stricter TypeScript support in the future, we're aiming to replace current usages of `any` with `unknown` on exposed typings for user-provided data. To do this in Remix v2 without introducing breaking changes in React Router v6, we have added generics to a number of shared types. These continue to default to `any` in React Router and are overridden with `unknown` in Remix. In React Router v7 we plan to move these to `unknown` as a breaking change. ([#10843](https://github.com/remix-run/react-router/pull/10843))
|
||||
- `Location` now accepts a generic for the `location.state` value
|
||||
- `ActionFunctionArgs`/`ActionFunction`/`LoaderFunctionArgs`/`LoaderFunction` now accept a generic for the `context` parameter (only used in SSR usages via `createStaticHandler`)
|
||||
- The return type of `useMatches` (now exported as `UIMatch`) accepts generics for `match.data` and `match.handle` - both of which were already set to `unknown`
|
||||
- Move the `@private` class export `ErrorResponse` to an `UNSAFE_ErrorResponseImpl` export since it is an implementation detail and there should be no construction of `ErrorResponse` instances in userland. This frees us up to export a `type ErrorResponse` which correlates to an instance of the class via `InstanceType`. Userland code should only ever be using `ErrorResponse` as a type and should be type-narrowing via `isRouteErrorResponse`. ([#10811](https://github.com/remix-run/react-router/pull/10811))
|
||||
- Export `ShouldRevalidateFunctionArgs` interface ([#10797](https://github.com/remix-run/react-router/pull/10797))
|
||||
- Removed private/internal APIs only required for the Remix v1 backwards compatibility layer and no longer needed in Remix v2 (`_isFetchActionRedirect`, `_hasFetcherDoneAnything`) ([#10715](https://github.com/remix-run/react-router/pull/10715))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Add method/url to error message on aborted `query`/`queryRoute` calls ([#10793](https://github.com/remix-run/react-router/pull/10793))
|
||||
- Fix a race-condition with loader/action-thrown errors on `route.lazy` routes ([#10778](https://github.com/remix-run/react-router/pull/10778))
|
||||
- Fix type for `actionResult` on the arguments object passed to `shouldRevalidate` ([#10779](https://github.com/remix-run/react-router/pull/10779))
|
||||
|
||||
## 1.8.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add's a new `redirectDocument()` function which allows users to specify that a redirect from a `loader`/`action` should trigger a document reload (via `window.location`) instead of attempting to navigate to the redirected location via React Router ([#10705](https://github.com/remix-run/react-router/pull/10705))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix an issue in `queryRoute` that was not always identifying thrown `Response` instances ([#10717](https://github.com/remix-run/react-router/pull/10717))
|
||||
- Ensure hash history always includes a leading slash on hash pathnames ([#10753](https://github.com/remix-run/react-router/pull/10753))
|
||||
|
||||
## 1.7.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Trigger an error if a `defer` promise resolves/rejects with `undefined` in order to match the behavior of loaders and actions which must return a value or `null` ([#10690](https://github.com/remix-run/react-router/pull/10690))
|
||||
- Properly handle fetcher redirects interrupted by normal navigations ([#10674](https://github.com/remix-run/react-router/pull/10674), [#10709](https://github.com/remix-run/react-router/pull/10709))
|
||||
- Initial-load fetchers should not automatically revalidate on GET navigations ([#10688](https://github.com/remix-run/react-router/pull/10688))
|
||||
- Enhance the return type of `Route.lazy` to prohibit returning an empty object ([#10634](https://github.com/remix-run/react-router/pull/10634))
|
||||
|
||||
## 1.7.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix issues with reused blockers on subsequent navigations ([#10656](https://github.com/remix-run/react-router/pull/10656))
|
||||
|
||||
## 1.7.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Add support for `application/json` and `text/plain` encodings for `router.navigate`/`router.fetch` submissions. To leverage these encodings, pass your data in a `body` parameter and specify the desired `formEncType`: ([#10413](https://github.com/remix-run/react-router/pull/10413))
|
||||
|
||||
```js
|
||||
// By default, the encoding is "application/x-www-form-urlencoded"
|
||||
router.navigate("/", {
|
||||
formMethod: "post",
|
||||
body: { key: "value" },
|
||||
});
|
||||
|
||||
async function action({ request }) {
|
||||
// await request.formData() => FormData instance with entry [key=value]
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Pass `formEncType` to opt-into a different encoding (json)
|
||||
router.navigate("/", {
|
||||
formMethod: "post",
|
||||
formEncType: "application/json",
|
||||
body: { key: "value" },
|
||||
});
|
||||
|
||||
async function action({ request }) {
|
||||
// await request.json() => { key: "value" }
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Pass `formEncType` to opt-into a different encoding (text)
|
||||
router.navigate("/", {
|
||||
formMethod: "post",
|
||||
formEncType: "text/plain",
|
||||
body: "Text submission",
|
||||
});
|
||||
|
||||
async function action({ request }) {
|
||||
// await request.text() => "Text submission"
|
||||
}
|
||||
```
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Call `window.history.pushState/replaceState` before updating React Router state (instead of after) so that `window.location` matches `useLocation` during synchronous React 17 rendering ([#10448](https://github.com/remix-run/react-router/pull/10448))
|
||||
- ⚠️ However, generally apps should not be relying on `window.location` and should always reference `useLocation` when possible, as `window.location` will not be in sync 100% of the time (due to `popstate` events, concurrent mode, etc.)
|
||||
- Strip `basename` from the `location` provided to `<ScrollRestoration getKey>` to match the `useLocation` behavior ([#10550](https://github.com/remix-run/react-router/pull/10550))
|
||||
- Avoid calling `shouldRevalidate` for fetchers that have not yet completed a data load ([#10623](https://github.com/remix-run/react-router/pull/10623))
|
||||
- Fix `unstable_useBlocker` key issues in `StrictMode` ([#10573](https://github.com/remix-run/react-router/pull/10573))
|
||||
- Upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
|
||||
|
||||
## 1.6.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Allow fetcher revalidations to complete if submitting fetcher is deleted ([#10535](https://github.com/remix-run/react-router/pull/10535))
|
||||
- Re-throw `DOMException` (`DataCloneError`) when attempting to perform a `PUSH` navigation with non-serializable state. ([#10427](https://github.com/remix-run/react-router/pull/10427))
|
||||
- Ensure revalidations happen when hash is present ([#10516](https://github.com/remix-run/react-router/pull/10516))
|
||||
- upgrade jest and jsdom ([#10453](https://github.com/remix-run/react-router/pull/10453))
|
||||
|
||||
## 1.6.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix HMR-driven error boundaries by properly reconstructing new routes and `manifest` in `\_internalSetRoutes` ([#10437](https://github.com/remix-run/react-router/pull/10437))
|
||||
- Fix bug where initial data load would not kick off when hash is present ([#10493](https://github.com/remix-run/react-router/pull/10493))
|
||||
|
||||
## 1.6.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix `basename` handling when navigating without a path ([#10433](https://github.com/remix-run/react-router/pull/10433))
|
||||
- "Same hash" navigations no longer re-run loaders to match browser behavior (i.e. `/path#hash -> /path#hash`) ([#10408](https://github.com/remix-run/react-router/pull/10408))
|
||||
|
||||
## 1.6.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Enable relative routing in the `@remix-run/router` when providing a source route ID from which the path is relative to: ([#10336](https://github.com/remix-run/react-router/pull/10336))
|
||||
|
||||
- Example: `router.navigate("../path", { fromRouteId: "some-route" })`.
|
||||
- This also applies to `router.fetch` which already receives a source route ID
|
||||
|
||||
- Introduce a new `@remix-run/router` `future.v7_prependBasename` flag to enable `basename` prefixing to all paths coming into `router.navigate` and `router.fetch`.
|
||||
|
||||
- Previously the `basename` was prepended in the React Router layer, but now that relative routing is being handled by the router we need prepend the `basename` _after_ resolving any relative paths
|
||||
- This also enables `basename` support in `useFetcher` as well
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Enhance `LoaderFunction`/`ActionFunction` return type to prevent `undefined` from being a valid return value ([#10267](https://github.com/remix-run/react-router/pull/10267))
|
||||
- Ensure proper 404 error on `fetcher.load` call to a route without a `loader` ([#10345](https://github.com/remix-run/react-router/pull/10345))
|
||||
- Deprecate the `createRouter` `detectErrorBoundary` option in favor of the new `mapRouteProperties` option for converting a framework-agnostic route to a framework-aware route. This allows us to set more than just the `hasErrorBoundary` property during route pre-processing, and is now used for mapping `Component -> element` and `ErrorBoundary -> errorElement` in `react-router`. ([#10287](https://github.com/remix-run/react-router/pull/10287))
|
||||
- Fixed a bug where fetchers were incorrectly attempting to revalidate on search params changes or routing to the same URL (using the same logic for route `loader` revalidations). However, since fetchers have a static href, they should only revalidate on `action` submissions or `router.revalidate` calls. ([#10344](https://github.com/remix-run/react-router/pull/10344))
|
||||
- Decouple `AbortController` usage between revalidating fetchers and the thing that triggered them such that the unmount/deletion of a revalidating fetcher doesn't impact the ongoing triggering navigation/revalidation ([#10271](https://github.com/remix-run/react-router/pull/10271))
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Added support for [**Future Flags**](https://reactrouter.com/v6/guides/api-development-strategy) in React Router. The first flag being introduced is `future.v7_normalizeFormMethod` which will normalize the exposed `useNavigation()/useFetcher()` `formMethod` fields as uppercase HTTP methods to align with the `fetch()` behavior. ([#10207](https://github.com/remix-run/react-router/pull/10207))
|
||||
|
||||
- When `future.v7_normalizeFormMethod === false` (default v6 behavior),
|
||||
- `useNavigation().formMethod` is lowercase
|
||||
- `useFetcher().formMethod` is lowercase
|
||||
- When `future.v7_normalizeFormMethod === true`:
|
||||
- `useNavigation().formMethod` is uppercase
|
||||
- `useFetcher().formMethod` is uppercase
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Provide fetcher submission to `shouldRevalidate` if the fetcher action redirects ([#10208](https://github.com/remix-run/react-router/pull/10208))
|
||||
- Properly handle `lazy()` errors during router initialization ([#10201](https://github.com/remix-run/react-router/pull/10201))
|
||||
- Remove `instanceof` check for `DeferredData` to be resilient to ESM/CJS boundaries in SSR bundling scenarios ([#10247](https://github.com/remix-run/react-router/pull/10247))
|
||||
- Update to latest `@remix-run/web-fetch@4.3.3` ([#10216](https://github.com/remix-run/react-router/pull/10216))
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045))
|
||||
|
||||
In order to keep your application bundles small and support code-splitting of your routes, we've introduced a new `lazy()` route property. This is an async function that resolves the non-route-matching portions of your route definition (`loader`, `action`, `element`/`Component`, `errorElement`/`ErrorBoundary`, `shouldRevalidate`, `handle`).
|
||||
|
||||
Lazy routes are resolved on initial load and during the `loading` or `submitting` phase of a navigation or fetcher call. You cannot lazily define route-matching properties (`path`, `index`, `children`) since we only execute your lazy route functions after we've matched known routes.
|
||||
|
||||
Your `lazy` functions will typically return the result of a dynamic import.
|
||||
|
||||
```jsx
|
||||
// In this example, we assume most folks land on the homepage so we include that
|
||||
// in our critical-path bundle, but then we lazily load modules for /a and /b so
|
||||
// they don't load until the user navigates to those routes
|
||||
let routes = createRoutesFromElements(
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="a" lazy={() => import("./a")} />
|
||||
<Route path="b" lazy={() => import("./b")} />
|
||||
</Route>
|
||||
);
|
||||
```
|
||||
|
||||
Then in your lazy route modules, export the properties you want defined for the route:
|
||||
|
||||
```jsx
|
||||
export async function loader({ request }) {
|
||||
let data = await fetchData(request);
|
||||
return json(data);
|
||||
}
|
||||
|
||||
// Export a `Component` directly instead of needing to create a React Element from it
|
||||
export function Component() {
|
||||
let data = useLoaderData();
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>You made it!</h1>
|
||||
<p>{data}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Export an `ErrorBoundary` directly instead of needing to create a React Element from it
|
||||
export function ErrorBoundary() {
|
||||
let error = useRouteError();
|
||||
return isRouteErrorResponse(error) ? (
|
||||
<h1>
|
||||
{error.status} {error.statusText}
|
||||
</h1>
|
||||
) : (
|
||||
<h1>{error.message || error}</h1>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://github.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
|
||||
|
||||
🙌 Huge thanks to @rossipedia for the [Initial Proposal](https://github.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://github.com/remix-run/react-router/pull/9830).
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix `generatePath` incorrectly applying parameters in some cases ([#10078](https://github.com/remix-run/react-router/pull/10078))
|
||||
|
||||
## 1.3.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Correctly perform a hard redirect for same-origin absolute URLs outside of the router `basename` ([#10076](https://github.com/remix-run/react-router/pull/10076))
|
||||
- Ensure status code and headers are maintained for `defer` loader responses in `createStaticHandler`'s `query()` method ([#10077](https://github.com/remix-run/react-router/pull/10077))
|
||||
- Change `invariant` to an `UNSAFE_invariant` export since it's only intended for internal use ([#10066](https://github.com/remix-run/react-router/pull/10066))
|
||||
- Add internal API for custom HMR implementations ([#9996](https://github.com/remix-run/react-router/pull/9996))
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Remove inaccurate console warning for POP navigations and update active blocker logic ([#10030](https://github.com/remix-run/react-router/pull/10030))
|
||||
- Only check for differing origin on absolute URL redirects ([#10033](https://github.com/remix-run/react-router/pull/10033))
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fixes 2 separate issues for revalidating fetcher `shouldRevalidate` calls ([#9948](https://github.com/remix-run/react-router/pull/9948))
|
||||
- The `shouldRevalidate` function was only being called for _explicit_ revalidation scenarios (after a mutation, manual `useRevalidator` call, or an `X-Remix-Revalidate` header used for cookie setting in Remix). It was not properly being called on _implicit_ revalidation scenarios that also apply to navigation `loader` revalidation, such as a change in search params or clicking a link for the page we're already on. It's now correctly called in those additional scenarios.
|
||||
- The parameters being passed were incorrect and inconsistent with one another since the `current*`/`next*` parameters reflected the static `fetcher.load` URL (and thus were identical). Instead, they should have reflected the the navigation that triggered the revalidation (as the `form*` parameters did). These parameters now correctly reflect the triggering navigation.
|
||||
- Respect `preventScrollReset` on `<fetcher.Form>` ([#9963](https://github.com/remix-run/react-router/pull/9963))
|
||||
- Do not short circuit on hash change only mutation submissions ([#9944](https://github.com/remix-run/react-router/pull/9944))
|
||||
- Remove `instanceof` check from `isRouteErrorResponse` to avoid bundling issues on the server ([#9930](https://github.com/remix-run/react-router/pull/9930))
|
||||
- Fix navigation for hash routers on manual URL changes ([#9980](https://github.com/remix-run/react-router/pull/9980))
|
||||
- Detect when a `defer` call only contains critical data and remove the `AbortController` ([#9965](https://github.com/remix-run/react-router/pull/9965))
|
||||
- Send the name as the value when url-encoding `File` `FormData` entries ([#9867](https://github.com/remix-run/react-router/pull/9867))
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Added support for navigation blocking APIs ([#9709](https://github.com/remix-run/react-router/pull/9709))
|
||||
- Expose deferred information from `createStaticHandler` ([#9760](https://github.com/remix-run/react-router/pull/9760))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Improved absolute redirect url detection in actions/loaders ([#9829](https://github.com/remix-run/react-router/pull/9829))
|
||||
- Fix URL creation with memory histories ([#9814](https://github.com/remix-run/react-router/pull/9814))
|
||||
- Fix `generatePath` when optional params are present ([#9764](https://github.com/remix-run/react-router/pull/9764))
|
||||
- Fix scroll reset if a submission redirects ([#9886](https://github.com/remix-run/react-router/pull/9886))
|
||||
- Fix 404 bug with same-origin absolute redirects ([#9913](https://github.com/remix-run/react-router/pull/9913))
|
||||
- Support `OPTIONS` requests in `staticHandler.queryRoute` ([#9914](https://github.com/remix-run/react-router/pull/9914))
|
||||
|
||||
## 1.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Include submission info in `shouldRevalidate` on action redirects ([#9777](https://github.com/remix-run/react-router/pull/9777), [#9782](https://github.com/remix-run/react-router/pull/9782))
|
||||
- Reset `actionData` on action redirect to current location ([#9772](https://github.com/remix-run/react-router/pull/9772))
|
||||
|
||||
## 1.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Remove `unstable_` prefix from `createStaticHandler`/`createStaticRouter`/`StaticRouterProvider` ([#9738](https://github.com/remix-run/react-router/pull/9738))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix explicit `replace` on submissions and `PUSH` on submission to new paths ([#9734](https://github.com/remix-run/react-router/pull/9734))
|
||||
- Fix a few bugs where loader/action data wasn't properly cleared on errors ([#9735](https://github.com/remix-run/react-router/pull/9735))
|
||||
- Prevent `useLoaderData` usage in `errorElement` ([#9735](https://github.com/remix-run/react-router/pull/9735))
|
||||
- Skip initial scroll restoration for SSR apps with `hydrationData` ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
||||
|
||||
## 1.1.0
|
||||
|
||||
This release introduces support for [Optional Route Segments](https://github.com/remix-run/react-router/issues/9546). Now, adding a `?` to the end of any path segment will make that entire segment optional. This works for both static segments and dynamic parameters.
|
||||
|
||||
**Optional Params Examples**
|
||||
|
||||
- Path `lang?/about` will match:
|
||||
- `/:lang/about`
|
||||
- `/about`
|
||||
- Path `/multistep/:widget1?/widget2?/widget3?` will match:
|
||||
- `/multistep`
|
||||
- `/multistep/:widget1`
|
||||
- `/multistep/:widget1/:widget2`
|
||||
- `/multistep/:widget1/:widget2/:widget3`
|
||||
|
||||
**Optional Static Segment Example**
|
||||
|
||||
- Path `/home?` will match:
|
||||
- `/`
|
||||
- `/home`
|
||||
- Path `/fr?/about` will match:
|
||||
- `/about`
|
||||
- `/fr/about`
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Allows optional routes and optional static segments ([#9650](https://github.com/remix-run/react-router/pull/9650))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Stop incorrectly matching on partial named parameters, i.e. `<Route path="prefix-:param">`, to align with how splat parameters work. If you were previously relying on this behavior then it's recommended to extract the static portion of the path at the `useParams` call site: ([#9506](https://github.com/remix-run/react-router/pull/9506))
|
||||
|
||||
```jsx
|
||||
// Old behavior at URL /prefix-123
|
||||
<Route path="prefix-:id" element={<Comp /> }>
|
||||
|
||||
function Comp() {
|
||||
let params = useParams(); // { id: '123' }
|
||||
let id = params.id; // "123"
|
||||
...
|
||||
}
|
||||
|
||||
// New behavior at URL /prefix-123
|
||||
<Route path=":id" element={<Comp /> }>
|
||||
|
||||
function Comp() {
|
||||
let params = useParams(); // { id: 'prefix-123' }
|
||||
let id = params.id.replace(/^prefix-/, ''); // "123"
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
- Persist `headers` on `loader` `request`'s after SSR document `action` request ([#9721](https://github.com/remix-run/react-router/pull/9721))
|
||||
- Fix requests sent to revalidating loaders so they reflect a GET request ([#9660](https://github.com/remix-run/react-router/pull/9660))
|
||||
- Fix issue with deeply nested optional segments ([#9727](https://github.com/remix-run/react-router/pull/9727))
|
||||
- GET forms now expose a submission on the loading navigation ([#9695](https://github.com/remix-run/react-router/pull/9695))
|
||||
- Fix error boundary tracking for multiple errors bubbling to the same boundary ([#9702](https://github.com/remix-run/react-router/pull/9702))
|
||||
|
||||
## 1.0.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix requests sent to revalidating loaders so they reflect a `GET` request ([#9680](https://github.com/remix-run/react-router/pull/9680))
|
||||
- Remove `instanceof Response` checks in favor of `isResponse` ([#9690](https://github.com/remix-run/react-router/pull/9690))
|
||||
- Fix `URL` creation in Cloudflare Pages or other non-browser-environments ([#9682](https://github.com/remix-run/react-router/pull/9682), [#9689](https://github.com/remix-run/react-router/pull/9689))
|
||||
- Add `requestContext` support to static handler `query`/`queryRoute` ([#9696](https://github.com/remix-run/react-router/pull/9696))
|
||||
- Note that the unstable API of `queryRoute(path, routeId)` has been changed to `queryRoute(path, { routeId, requestContext })`
|
||||
|
||||
## 1.0.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Throw an error if an `action`/`loader` function returns `undefined` as revalidations need to know whether the loader has previously been executed. `undefined` also causes issues during SSR stringification for hydration. You should always ensure you `loader`/`action` returns a value, and you may return `null` if you don't wish to return anything. ([#9511](https://github.com/remix-run/react-router/pull/9511))
|
||||
- Properly handle redirects to external domains ([#9590](https://github.com/remix-run/react-router/pull/9590), [#9654](https://github.com/remix-run/react-router/pull/9654))
|
||||
- Preserve the HTTP method on 307/308 redirects ([#9597](https://github.com/remix-run/react-router/pull/9597))
|
||||
- Support `basename` in static data routers ([#9591](https://github.com/remix-run/react-router/pull/9591))
|
||||
- Enhanced `ErrorResponse` bodies to contain more descriptive text in internal 403/404/405 scenarios
|
||||
|
||||
## 1.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix hrefs generated when using `createHashRouter` ([#9409](https://github.com/remix-run/react-router/pull/9409))
|
||||
- fix encoding/matching issues with special chars ([#9477](https://github.com/remix-run/react-router/pull/9477), [#9496](https://github.com/remix-run/react-router/pull/9496))
|
||||
- Support `basename` and relative routing in `loader`/`action` redirects ([#9447](https://github.com/remix-run/react-router/pull/9447))
|
||||
- Ignore pathless layout routes when looking for proper submission `action` function ([#9455](https://github.com/remix-run/react-router/pull/9455))
|
||||
- properly support `index` routes with a `path` in `useResolvedPath` ([#9486](https://github.com/remix-run/react-router/pull/9486))
|
||||
- Add UMD build for `@remix-run/router` ([#9446](https://github.com/remix-run/react-router/pull/9446))
|
||||
- fix `createURL` in local file execution in Firefox ([#9464](https://github.com/remix-run/react-router/pull/9464))
|
||||
- Updates to `unstable_createStaticHandler` for incorporating into Remix ([#9482](https://github.com/remix-run/react-router/pull/9482), [#9465](https://github.com/remix-run/react-router/pull/9465))
|
||||
|
||||
## 1.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Reset `actionData` after a successful action redirect ([#9334](https://github.com/remix-run/react-router/pull/9334))
|
||||
- Update `matchPath` to avoid false positives on dash-separated segments ([#9300](https://github.com/remix-run/react-router/pull/9300))
|
||||
- If an index route has children, it will result in a runtime error. We have strengthened our `RouteObject`/`RouteProps` types to surface the error in TypeScript. ([#9366](https://github.com/remix-run/react-router/pull/9366))
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Preserve state from `initialEntries` ([#9288](https://github.com/remix-run/react-router/pull/9288))
|
||||
- Preserve `?index` for fetcher get submissions to index routes ([#9312](https://github.com/remix-run/react-router/pull/9312))
|
||||
|
||||
## 1.0.0
|
||||
|
||||
This is the first stable release of `@remix-run/router`, which provides all the underlying routing and data loading/mutation logic for `react-router`. You should _not_ be using this package directly unless you are authoring a routing library similar to `react-router`.
|
||||
|
||||
For an overview of the features provided by `react-router`, we recommend you go check out the [docs](https://reactrouter.com), especially the [feature overview](https://reactrouter.com/en/6.4.0/start/overview) and the [tutorial](https://reactrouter.com/en/6.4.0/start/tutorial).
|
||||
|
||||
For an overview of the features provided by `@remix-run/router`, please check out the [`README`](./README.md).
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) React Training LLC 2015-2019
|
||||
Copyright (c) Remix Software Inc. 2020-2021
|
||||
Copyright (c) Shopify Inc. 2022-2023
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
# Remix Router
|
||||
|
||||
The `@remix-run/router` package is a framework-agnostic routing package (sometimes referred to as a browser-emulator) that serves as the heart of [React Router][react-router] and [Remix][remix] and provides all the core functionality for routing coupled with data loading and data mutations. It comes with built-in handling of errors, race-conditions, interruptions, cancellations, lazy-loading data, and much, much more.
|
||||
|
||||
If you're using React Router, you should never `import` anything directly from the `@remix-run/router` - you should have everything you need in `react-router-dom` (or `react-router`/`react-router-native` if you're not rendering in the browser). All of those packages should re-export everything you would otherwise need from `@remix-run/router`.
|
||||
|
||||
> [!WARNING]
|
||||
>
|
||||
> This router is a low-level package intended to be consumed by UI layer routing libraries. You should very likely not be using this package directly unless you are authoring a routing library such as [`react-router-dom`][react-router-repo] or one of it's other [UI ports][remix-routers-repo].
|
||||
|
||||
## API
|
||||
|
||||
A Router instance can be created using `createRouter`:
|
||||
|
||||
```js
|
||||
// Create and initialize a router. "initialize" contains all side effects
|
||||
// including history listeners and kicking off the initial data fetch
|
||||
let router = createRouter({
|
||||
// Required properties
|
||||
routes: [{
|
||||
path: '/',
|
||||
loader: ({ request, params }) => { /* ... */ },
|
||||
children: [{
|
||||
path: 'home',
|
||||
loader: ({ request, params }) => { /* ... */ },
|
||||
}]
|
||||
},
|
||||
history: createBrowserHistory(),
|
||||
|
||||
// Optional properties
|
||||
basename, // Base path
|
||||
mapRouteProperties, // Map framework-agnostic routes to framework-aware routes
|
||||
future, // Future flags
|
||||
hydrationData, // Hydration data if using server-side-rendering
|
||||
}).initialize();
|
||||
```
|
||||
|
||||
Internally, the Router represents the state in an object of the following format, which is available through `router.state`. You can also register a subscriber of the signature `(state: RouterState) => void` to execute when the state updates via `router.subscribe()`;
|
||||
|
||||
```ts
|
||||
interface RouterState {
|
||||
// False during the initial data load, true once we have our initial data
|
||||
initialized: boolean;
|
||||
// The `history` action of the most recently completed navigation
|
||||
historyAction: Action;
|
||||
// The current location of the router. During a navigation this reflects
|
||||
// the "old" location and is updated upon completion of the navigation
|
||||
location: Location;
|
||||
// The current set of route matches
|
||||
matches: DataRouteMatch[];
|
||||
// The state of the current navigation
|
||||
navigation: Navigation;
|
||||
// The state of any in-progress router.revalidate() calls
|
||||
revalidation: RevalidationState;
|
||||
// Data from the loaders for the current matches
|
||||
loaderData: RouteData;
|
||||
// Data from the action for the current matches
|
||||
actionData: RouteData | null;
|
||||
// Errors thrown from loaders/actions for the current matches
|
||||
errors: RouteData | null;
|
||||
// Map of all active fetchers
|
||||
fetchers: Map<string, Fetcher>;
|
||||
// Scroll position to restore to for the active Location, false if we
|
||||
// should not restore, or null if we don't have a saved position
|
||||
// Note: must be enabled via router.enableScrollRestoration()
|
||||
restoreScrollPosition: number | false | null;
|
||||
// Proxied `preventScrollReset` value passed to router.navigate()
|
||||
preventScrollReset: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
### Navigations
|
||||
|
||||
All navigations are done through the `router.navigate` API which is overloaded to support different types of navigations:
|
||||
|
||||
```js
|
||||
// Link navigation (pushes onto the history stack by default)
|
||||
router.navigate("/page");
|
||||
|
||||
// Link navigation (replacing the history stack)
|
||||
router.navigate("/page", { replace: true });
|
||||
|
||||
// Pop navigation (moving backward/forward in the history stack)
|
||||
router.navigate(-1);
|
||||
|
||||
// Form submission navigation
|
||||
let formData = new FormData();
|
||||
formData.append(key, value);
|
||||
router.navigate("/page", {
|
||||
formMethod: "post",
|
||||
formData,
|
||||
});
|
||||
|
||||
// Relative routing from a source routeId
|
||||
router.navigate("../../somewhere", {
|
||||
fromRouteId: "active-route-id",
|
||||
});
|
||||
```
|
||||
|
||||
### Fetchers
|
||||
|
||||
Fetchers are a mechanism to call loaders/actions without triggering a navigation, and are done through the `router.fetch()` API. All fetch calls require a unique key to identify the fetcher.
|
||||
|
||||
```js
|
||||
// Execute the loader for /page
|
||||
router.fetch("key", "/page");
|
||||
|
||||
// Submit to the action for /page
|
||||
let formData = new FormData();
|
||||
formData.append(key, value);
|
||||
router.fetch("key", "/page", {
|
||||
formMethod: "post",
|
||||
formData,
|
||||
});
|
||||
```
|
||||
|
||||
### Revalidation
|
||||
|
||||
By default, active loaders will revalidate after any navigation or fetcher mutation. If you need to kick off a revalidation for other use-cases, you can use `router.revalidate()` to re-execute all active loaders.
|
||||
|
||||
### Future Flags
|
||||
|
||||
We use _Future Flags_ in the router to help us introduce breaking changes in an opt-in fashion ahead of major releases. Please check out the [blog post][future-flags-post] and [React Router Docs][api-development-strategy] for more information on this process. The currently available future flags in `@remix-run/router` are:
|
||||
|
||||
| Flag | Description |
|
||||
| ------------------------ | ------------------------------------------------------------------------- |
|
||||
| `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
|
||||
| `v7_prependBasename` | Prepend the `basename` to incoming `router.navigate`/`router.fetch` paths |
|
||||
|
||||
[react-router]: https://reactrouter.com
|
||||
[remix]: https://remix.run
|
||||
[react-router-repo]: https://github.com/remix-run/react-router
|
||||
[remix-routers-repo]: https://github.com/brophdawg11/remix-routers
|
||||
[api-development-strategy]: https://reactrouter.com/v6/guides/api-development-strategy
|
||||
[future-flags-post]: https://remix.run/blog/future-flags
|
||||
+250
@@ -0,0 +1,250 @@
|
||||
/**
|
||||
* Actions represent the type of change to a location value.
|
||||
*/
|
||||
export declare enum Action {
|
||||
/**
|
||||
* A POP indicates a change to an arbitrary index in the history stack, such
|
||||
* as a back or forward navigation. It does not describe the direction of the
|
||||
* navigation, only that the current index changed.
|
||||
*
|
||||
* Note: This is the default action for newly created history objects.
|
||||
*/
|
||||
Pop = "POP",
|
||||
/**
|
||||
* A PUSH indicates a new entry being added to the history stack, such as when
|
||||
* a link is clicked and a new page loads. When this happens, all subsequent
|
||||
* entries in the stack are lost.
|
||||
*/
|
||||
Push = "PUSH",
|
||||
/**
|
||||
* A REPLACE indicates the entry at the current index in the history stack
|
||||
* being replaced by a new one.
|
||||
*/
|
||||
Replace = "REPLACE"
|
||||
}
|
||||
/**
|
||||
* The pathname, search, and hash values of a URL.
|
||||
*/
|
||||
export interface Path {
|
||||
/**
|
||||
* A URL pathname, beginning with a /.
|
||||
*/
|
||||
pathname: string;
|
||||
/**
|
||||
* A URL search string, beginning with a ?.
|
||||
*/
|
||||
search: string;
|
||||
/**
|
||||
* A URL fragment identifier, beginning with a #.
|
||||
*/
|
||||
hash: string;
|
||||
}
|
||||
/**
|
||||
* An entry in a history stack. A location contains information about the
|
||||
* URL path, as well as possibly some arbitrary state and a key.
|
||||
*/
|
||||
export interface Location<State = any> extends Path {
|
||||
/**
|
||||
* A value of arbitrary data associated with this location.
|
||||
*/
|
||||
state: State;
|
||||
/**
|
||||
* A unique string associated with this location. May be used to safely store
|
||||
* and retrieve data in some other storage API, like `localStorage`.
|
||||
*
|
||||
* Note: This value is always "default" on the initial location.
|
||||
*/
|
||||
key: string;
|
||||
}
|
||||
/**
|
||||
* A change to the current location.
|
||||
*/
|
||||
export interface Update {
|
||||
/**
|
||||
* The action that triggered the change.
|
||||
*/
|
||||
action: Action;
|
||||
/**
|
||||
* The new location.
|
||||
*/
|
||||
location: Location;
|
||||
/**
|
||||
* The delta between this location and the former location in the history stack
|
||||
*/
|
||||
delta: number | null;
|
||||
}
|
||||
/**
|
||||
* A function that receives notifications about location changes.
|
||||
*/
|
||||
export interface Listener {
|
||||
(update: Update): void;
|
||||
}
|
||||
/**
|
||||
* Describes a location that is the destination of some navigation, either via
|
||||
* `history.push` or `history.replace`. This may be either a URL or the pieces
|
||||
* of a URL path.
|
||||
*/
|
||||
export type To = string | Partial<Path>;
|
||||
/**
|
||||
* A history is an interface to the navigation stack. The history serves as the
|
||||
* source of truth for the current location, as well as provides a set of
|
||||
* methods that may be used to change it.
|
||||
*
|
||||
* It is similar to the DOM's `window.history` object, but with a smaller, more
|
||||
* focused API.
|
||||
*/
|
||||
export interface History {
|
||||
/**
|
||||
* The last action that modified the current location. This will always be
|
||||
* Action.Pop when a history instance is first created. This value is mutable.
|
||||
*/
|
||||
readonly action: Action;
|
||||
/**
|
||||
* The current location. This value is mutable.
|
||||
*/
|
||||
readonly location: Location;
|
||||
/**
|
||||
* Returns a valid href for the given `to` value that may be used as
|
||||
* the value of an <a href> attribute.
|
||||
*
|
||||
* @param to - The destination URL
|
||||
*/
|
||||
createHref(to: To): string;
|
||||
/**
|
||||
* Returns a URL for the given `to` value
|
||||
*
|
||||
* @param to - The destination URL
|
||||
*/
|
||||
createURL(to: To): URL;
|
||||
/**
|
||||
* Encode a location the same way window.history would do (no-op for memory
|
||||
* history) so we ensure our PUSH/REPLACE navigations for data routers
|
||||
* behave the same as POP
|
||||
*
|
||||
* @param to Unencoded path
|
||||
*/
|
||||
encodeLocation(to: To): Path;
|
||||
/**
|
||||
* Pushes a new location onto the history stack, increasing its length by one.
|
||||
* If there were any entries in the stack after the current one, they are
|
||||
* lost.
|
||||
*
|
||||
* @param to - The new URL
|
||||
* @param state - Data to associate with the new location
|
||||
*/
|
||||
push(to: To, state?: any): void;
|
||||
/**
|
||||
* Replaces the current location in the history stack with a new one. The
|
||||
* location that was replaced will no longer be available.
|
||||
*
|
||||
* @param to - The new URL
|
||||
* @param state - Data to associate with the new location
|
||||
*/
|
||||
replace(to: To, state?: any): void;
|
||||
/**
|
||||
* Navigates `n` entries backward/forward in the history stack relative to the
|
||||
* current index. For example, a "back" navigation would use go(-1).
|
||||
*
|
||||
* @param delta - The delta in the stack index
|
||||
*/
|
||||
go(delta: number): void;
|
||||
/**
|
||||
* Sets up a listener that will be called whenever the current location
|
||||
* changes.
|
||||
*
|
||||
* @param listener - A function that will be called when the location changes
|
||||
* @returns unlisten - A function that may be used to stop listening
|
||||
*/
|
||||
listen(listener: Listener): () => void;
|
||||
}
|
||||
/**
|
||||
* A user-supplied object that describes a location. Used when providing
|
||||
* entries to `createMemoryHistory` via its `initialEntries` option.
|
||||
*/
|
||||
export type InitialEntry = string | Partial<Location>;
|
||||
export type MemoryHistoryOptions = {
|
||||
initialEntries?: InitialEntry[];
|
||||
initialIndex?: number;
|
||||
v5Compat?: boolean;
|
||||
};
|
||||
/**
|
||||
* A memory history stores locations in memory. This is useful in stateful
|
||||
* environments where there is no web browser, such as node tests or React
|
||||
* Native.
|
||||
*/
|
||||
export interface MemoryHistory extends History {
|
||||
/**
|
||||
* The current index in the history stack.
|
||||
*/
|
||||
readonly index: number;
|
||||
}
|
||||
/**
|
||||
* Memory history stores the current location in memory. It is designed for use
|
||||
* in stateful non-browser environments like tests and React Native.
|
||||
*/
|
||||
export declare function createMemoryHistory(options?: MemoryHistoryOptions): MemoryHistory;
|
||||
/**
|
||||
* A browser history stores the current location in regular URLs in a web
|
||||
* browser environment. This is the standard for most web apps and provides the
|
||||
* cleanest URLs the browser's address bar.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory
|
||||
*/
|
||||
export interface BrowserHistory extends UrlHistory {
|
||||
}
|
||||
export type BrowserHistoryOptions = UrlHistoryOptions;
|
||||
/**
|
||||
* Browser history stores the location in regular URLs. This is the standard for
|
||||
* most web apps, but it requires some configuration on the server to ensure you
|
||||
* serve the same app at multiple URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
||||
*/
|
||||
export declare function createBrowserHistory(options?: BrowserHistoryOptions): BrowserHistory;
|
||||
/**
|
||||
* A hash history stores the current location in the fragment identifier portion
|
||||
* of the URL in a web browser environment.
|
||||
*
|
||||
* This is ideal for apps that do not control the server for some reason
|
||||
* (because the fragment identifier is never sent to the server), including some
|
||||
* shared hosting environments that do not provide fine-grained controls over
|
||||
* which pages are served at which URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory
|
||||
*/
|
||||
export interface HashHistory extends UrlHistory {
|
||||
}
|
||||
export type HashHistoryOptions = UrlHistoryOptions;
|
||||
/**
|
||||
* Hash history stores the location in window.location.hash. This makes it ideal
|
||||
* for situations where you don't want to send the location to the server for
|
||||
* some reason, either because you do cannot configure it or the URL space is
|
||||
* reserved for something else.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
||||
*/
|
||||
export declare function createHashHistory(options?: HashHistoryOptions): HashHistory;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare function invariant(value: boolean, message?: string): asserts value;
|
||||
export declare function invariant<T>(value: T | null | undefined, message?: string): asserts value is T;
|
||||
export declare function warning(cond: any, message: string): void;
|
||||
/**
|
||||
* Creates a Location object with a unique key from the given Path
|
||||
*/
|
||||
export declare function createLocation(current: string | Location, to: To, state?: any, key?: string): Readonly<Location>;
|
||||
/**
|
||||
* Creates a string URL path from the given pathname, search, and hash components.
|
||||
*/
|
||||
export declare function createPath({ pathname, search, hash, }: Partial<Path>): string;
|
||||
/**
|
||||
* Parses a string URL path into its separate pathname, search, and hash components.
|
||||
*/
|
||||
export declare function parsePath(path: string): Partial<Path>;
|
||||
export interface UrlHistory extends History {
|
||||
}
|
||||
export type UrlHistoryOptions = {
|
||||
window?: Window;
|
||||
v5Compat?: boolean;
|
||||
};
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticPatchRoutesOnNavigationFunction, AgnosticPatchRoutesOnNavigationFunctionArgs, AgnosticRouteMatch, AgnosticRouteObject, DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyMatch, DataStrategyResult, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathParam, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, DataWithResponseInit as UNSAFE_DataWithResponseInit, } from "./utils";
|
||||
export { AbortedDeferredError, data, defer, generatePath, getToPathname, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, redirect, redirectDocument, replace, resolvePath, resolveTo, stripBasename, } from "./utils";
|
||||
export type { BrowserHistory, BrowserHistoryOptions, HashHistory, HashHistoryOptions, History, InitialEntry, Location, MemoryHistory, MemoryHistoryOptions, Path, To, } from "./history";
|
||||
export { Action, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, parsePath, } from "./history";
|
||||
export * from "./router";
|
||||
/** @internal */
|
||||
export type { RouteManifest as UNSAFE_RouteManifest } from "./utils";
|
||||
export { DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, decodePath as UNSAFE_decodePath, getResolveToMatches as UNSAFE_getResolveToMatches, } from "./utils";
|
||||
export { invariant as UNSAFE_invariant, warning as UNSAFE_warning, } from "./history";
|
||||
+5702
@@ -0,0 +1,5702 @@
|
||||
/**
|
||||
* @remix-run/router v1.23.3
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
function _extends() {
|
||||
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
||||
for (var e = 1; e < arguments.length; e++) {
|
||||
var t = arguments[e];
|
||||
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
||||
}
|
||||
return n;
|
||||
}, _extends.apply(null, arguments);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Actions represent the type of change to a location value.
|
||||
*/
|
||||
let Action = /*#__PURE__*/function (Action) {
|
||||
/**
|
||||
* A POP indicates a change to an arbitrary index in the history stack, such
|
||||
* as a back or forward navigation. It does not describe the direction of the
|
||||
* navigation, only that the current index changed.
|
||||
*
|
||||
* Note: This is the default action for newly created history objects.
|
||||
*/
|
||||
Action["Pop"] = "POP";
|
||||
/**
|
||||
* A PUSH indicates a new entry being added to the history stack, such as when
|
||||
* a link is clicked and a new page loads. When this happens, all subsequent
|
||||
* entries in the stack are lost.
|
||||
*/
|
||||
Action["Push"] = "PUSH";
|
||||
/**
|
||||
* A REPLACE indicates the entry at the current index in the history stack
|
||||
* being replaced by a new one.
|
||||
*/
|
||||
Action["Replace"] = "REPLACE";
|
||||
return Action;
|
||||
}({});
|
||||
|
||||
/**
|
||||
* The pathname, search, and hash values of a URL.
|
||||
*/
|
||||
|
||||
// TODO: (v7) Change the Location generic default from `any` to `unknown` and
|
||||
// remove Remix `useLocation` wrapper.
|
||||
|
||||
/**
|
||||
* An entry in a history stack. A location contains information about the
|
||||
* URL path, as well as possibly some arbitrary state and a key.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A change to the current location.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A function that receives notifications about location changes.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Describes a location that is the destination of some navigation, either via
|
||||
* `history.push` or `history.replace`. This may be either a URL or the pieces
|
||||
* of a URL path.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A history is an interface to the navigation stack. The history serves as the
|
||||
* source of truth for the current location, as well as provides a set of
|
||||
* methods that may be used to change it.
|
||||
*
|
||||
* It is similar to the DOM's `window.history` object, but with a smaller, more
|
||||
* focused API.
|
||||
*/
|
||||
|
||||
const PopStateEventType = "popstate";
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Memory History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A user-supplied object that describes a location. Used when providing
|
||||
* entries to `createMemoryHistory` via its `initialEntries` option.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A memory history stores locations in memory. This is useful in stateful
|
||||
* environments where there is no web browser, such as node tests or React
|
||||
* Native.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Memory history stores the current location in memory. It is designed for use
|
||||
* in stateful non-browser environments like tests and React Native.
|
||||
*/
|
||||
function createMemoryHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
initialEntries = ["/"],
|
||||
initialIndex,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let entries; // Declare so we can access from createMemoryLocation
|
||||
entries = initialEntries.map((entry, index) => createMemoryLocation(entry, typeof entry === "string" ? null : entry.state, index === 0 ? "default" : undefined));
|
||||
let index = clampIndex(initialIndex == null ? entries.length - 1 : initialIndex);
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
function clampIndex(n) {
|
||||
return Math.min(Math.max(n, 0), entries.length - 1);
|
||||
}
|
||||
function getCurrentLocation() {
|
||||
return entries[index];
|
||||
}
|
||||
function createMemoryLocation(to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = createLocation(entries ? getCurrentLocation().pathname : "/", to, state, key);
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in memory history: " + JSON.stringify(to));
|
||||
return location;
|
||||
}
|
||||
function createHref(to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
let history = {
|
||||
get index() {
|
||||
return index;
|
||||
},
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getCurrentLocation();
|
||||
},
|
||||
createHref,
|
||||
createURL(to) {
|
||||
return new URL(createHref(to), "http://localhost");
|
||||
},
|
||||
encodeLocation(to) {
|
||||
let path = typeof to === "string" ? parsePath(to) : to;
|
||||
return {
|
||||
pathname: path.pathname || "",
|
||||
search: path.search || "",
|
||||
hash: path.hash || ""
|
||||
};
|
||||
},
|
||||
push(to, state) {
|
||||
action = Action.Push;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
index += 1;
|
||||
entries.splice(index, entries.length, nextLocation);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
entries[index] = nextLocation;
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
go(delta) {
|
||||
action = Action.Pop;
|
||||
let nextIndex = clampIndex(index + delta);
|
||||
let nextLocation = entries[nextIndex];
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta
|
||||
});
|
||||
}
|
||||
},
|
||||
listen(fn) {
|
||||
listener = fn;
|
||||
return () => {
|
||||
listener = null;
|
||||
};
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Browser History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A browser history stores the current location in regular URLs in a web
|
||||
* browser environment. This is the standard for most web apps and provides the
|
||||
* cleanest URLs the browser's address bar.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory
|
||||
*/
|
||||
|
||||
/**
|
||||
* Browser history stores the location in regular URLs. This is the standard for
|
||||
* most web apps, but it requires some configuration on the server to ensure you
|
||||
* serve the same app at multiple URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
||||
*/
|
||||
function createBrowserHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createBrowserLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
} = window.location;
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createBrowserHref(window, to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
return getUrlBasedHistory(createBrowserLocation, createBrowserHref, null, options);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Hash History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A hash history stores the current location in the fragment identifier portion
|
||||
* of the URL in a web browser environment.
|
||||
*
|
||||
* This is ideal for apps that do not control the server for some reason
|
||||
* (because the fragment identifier is never sent to the server), including some
|
||||
* shared hosting environments that do not provide fine-grained controls over
|
||||
* which pages are served at which URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory
|
||||
*/
|
||||
|
||||
/**
|
||||
* Hash history stores the location in window.location.hash. This makes it ideal
|
||||
* for situations where you don't want to send the location to the server for
|
||||
* some reason, either because you do cannot configure it or the URL space is
|
||||
* reserved for something else.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
||||
*/
|
||||
function createHashHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createHashLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = parsePath(window.location.hash.substr(1));
|
||||
|
||||
// Hash URL should always have a leading / just like window.location.pathname
|
||||
// does, so if an app ends up at a route like /#something then we add a
|
||||
// leading slash so all of our path-matching behaves the same as if it would
|
||||
// in a browser router. This is particularly important when there exists a
|
||||
// root splat route (<Route path="*">) since that matches internally against
|
||||
// "/*" and we'd expect /#something to 404 in a hash router app.
|
||||
if (!pathname.startsWith("/") && !pathname.startsWith(".")) {
|
||||
pathname = "/" + pathname;
|
||||
}
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createHashHref(window, to) {
|
||||
let base = window.document.querySelector("base");
|
||||
let href = "";
|
||||
if (base && base.getAttribute("href")) {
|
||||
let url = window.location.href;
|
||||
let hashIndex = url.indexOf("#");
|
||||
href = hashIndex === -1 ? url : url.slice(0, hashIndex);
|
||||
}
|
||||
return href + "#" + (typeof to === "string" ? to : createPath(to));
|
||||
}
|
||||
function validateHashLocation(location, to) {
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")");
|
||||
}
|
||||
return getUrlBasedHistory(createHashLocation, createHashHref, validateHashLocation, options);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region UTILS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
|
||||
function invariant(value, message) {
|
||||
if (value === false || value === null || typeof value === "undefined") {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
function warning(cond, message) {
|
||||
if (!cond) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== "undefined") console.warn(message);
|
||||
try {
|
||||
// Welcome to debugging history!
|
||||
//
|
||||
// This error is thrown as a convenience, so you can more easily
|
||||
// find the source for a warning that appears in the console by
|
||||
// enabling "pause on exceptions" in your JavaScript debugger.
|
||||
throw new Error(message);
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
function createKey() {
|
||||
return Math.random().toString(36).substr(2, 8);
|
||||
}
|
||||
|
||||
/**
|
||||
* For browser-based histories, we combine the state and key into an object
|
||||
*/
|
||||
function getHistoryState(location, index) {
|
||||
return {
|
||||
usr: location.state,
|
||||
key: location.key,
|
||||
idx: index
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Location object with a unique key from the given Path
|
||||
*/
|
||||
function createLocation(current, to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = _extends({
|
||||
pathname: typeof current === "string" ? current : current.pathname,
|
||||
search: "",
|
||||
hash: ""
|
||||
}, typeof to === "string" ? parsePath(to) : to, {
|
||||
state,
|
||||
// TODO: This could be cleaned up. push/replace should probably just take
|
||||
// full Locations now and avoid the need to run through this flow at all
|
||||
// But that's a pretty big refactor to the current test suite so going to
|
||||
// keep as is for the time being and just let any incoming keys take precedence
|
||||
key: to && to.key || key || createKey()
|
||||
});
|
||||
return location;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a string URL path from the given pathname, search, and hash components.
|
||||
*/
|
||||
function createPath(_ref) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = _ref;
|
||||
if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
|
||||
if (hash && hash !== "#") pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
|
||||
return pathname;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a string URL path into its separate pathname, search, and hash components.
|
||||
*/
|
||||
function parsePath(path) {
|
||||
let parsedPath = {};
|
||||
if (path) {
|
||||
let hashIndex = path.indexOf("#");
|
||||
if (hashIndex >= 0) {
|
||||
parsedPath.hash = path.substr(hashIndex);
|
||||
path = path.substr(0, hashIndex);
|
||||
}
|
||||
let searchIndex = path.indexOf("?");
|
||||
if (searchIndex >= 0) {
|
||||
parsedPath.search = path.substr(searchIndex);
|
||||
path = path.substr(0, searchIndex);
|
||||
}
|
||||
if (path) {
|
||||
parsedPath.pathname = path;
|
||||
}
|
||||
}
|
||||
return parsedPath;
|
||||
}
|
||||
function getUrlBasedHistory(getLocation, createHref, validateLocation, options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
window = document.defaultView,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let globalHistory = window.history;
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
let index = getIndex();
|
||||
// Index should only be null when we initialize. If not, it's because the
|
||||
// user called history.pushState or history.replaceState directly, in which
|
||||
// case we should log a warning as it will result in bugs.
|
||||
if (index == null) {
|
||||
index = 0;
|
||||
globalHistory.replaceState(_extends({}, globalHistory.state, {
|
||||
idx: index
|
||||
}), "");
|
||||
}
|
||||
function getIndex() {
|
||||
let state = globalHistory.state || {
|
||||
idx: null
|
||||
};
|
||||
return state.idx;
|
||||
}
|
||||
function handlePop() {
|
||||
action = Action.Pop;
|
||||
let nextIndex = getIndex();
|
||||
let delta = nextIndex == null ? null : nextIndex - index;
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta
|
||||
});
|
||||
}
|
||||
}
|
||||
function push(to, state) {
|
||||
action = Action.Push;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex() + 1;
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
|
||||
// try...catch because iOS limits us to 100 pushState calls :/
|
||||
try {
|
||||
globalHistory.pushState(historyState, "", url);
|
||||
} catch (error) {
|
||||
// If the exception is because `state` can't be serialized, let that throw
|
||||
// outwards just like a replace call would so the dev knows the cause
|
||||
// https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps
|
||||
// https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal
|
||||
if (error instanceof DOMException && error.name === "DataCloneError") {
|
||||
throw error;
|
||||
}
|
||||
// They are going to lose state here, but there is no real
|
||||
// way to warn them about it since the page will refresh...
|
||||
window.location.assign(url);
|
||||
}
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
function replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex();
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
globalHistory.replaceState(historyState, "", url);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
function createURL(to) {
|
||||
// window.location.origin is "null" (the literal string value) in Firefox
|
||||
// under certain conditions, notably when serving from a local HTML file
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
|
||||
let base = window.location.origin !== "null" ? window.location.origin : window.location.href;
|
||||
let href = typeof to === "string" ? to : createPath(to);
|
||||
// Treating this as a full URL will strip any trailing spaces so we need to
|
||||
// pre-encode them since they might be part of a matching splat param from
|
||||
// an ancestor route
|
||||
href = href.replace(/ $/, "%20");
|
||||
invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
|
||||
return new URL(href, base);
|
||||
}
|
||||
let history = {
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getLocation(window, globalHistory);
|
||||
},
|
||||
listen(fn) {
|
||||
if (listener) {
|
||||
throw new Error("A history only accepts one active listener");
|
||||
}
|
||||
window.addEventListener(PopStateEventType, handlePop);
|
||||
listener = fn;
|
||||
return () => {
|
||||
window.removeEventListener(PopStateEventType, handlePop);
|
||||
listener = null;
|
||||
};
|
||||
},
|
||||
createHref(to) {
|
||||
return createHref(window, to);
|
||||
},
|
||||
createURL,
|
||||
encodeLocation(to) {
|
||||
// Encode a Location the same way window.location would
|
||||
let url = createURL(to);
|
||||
return {
|
||||
pathname: url.pathname,
|
||||
search: url.search,
|
||||
hash: url.hash
|
||||
};
|
||||
},
|
||||
push,
|
||||
replace,
|
||||
go(n) {
|
||||
return globalHistory.go(n);
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
/**
|
||||
* Map of routeId -> data returned from a loader/action/error
|
||||
*/
|
||||
|
||||
let ResultType = /*#__PURE__*/function (ResultType) {
|
||||
ResultType["data"] = "data";
|
||||
ResultType["deferred"] = "deferred";
|
||||
ResultType["redirect"] = "redirect";
|
||||
ResultType["error"] = "error";
|
||||
return ResultType;
|
||||
}({});
|
||||
|
||||
/**
|
||||
* Successful result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Successful defer() result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Redirect result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Unsuccessful result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Result from a loader or action - potentially successful or unsuccessful
|
||||
*/
|
||||
|
||||
/**
|
||||
* Users can specify either lowercase or uppercase form methods on `<Form>`,
|
||||
* useSubmit(), `<fetcher.Form>`, etc.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active navigation/fetcher form methods are exposed in lowercase on the
|
||||
* RouterState
|
||||
*/
|
||||
|
||||
/**
|
||||
* In v7, active navigation/fetcher form methods are exposed in uppercase on the
|
||||
* RouterState. This is to align with the normalization done via fetch().
|
||||
*/
|
||||
|
||||
// Thanks https://github.com/sindresorhus/type-fest!
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Internal interface to pass around for action submissions, not intended for
|
||||
* external consumption
|
||||
*/
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Arguments passed to route loader/action functions. Same for now but we keep
|
||||
* this as a private implementation detail in case they diverge in the future.
|
||||
*/
|
||||
|
||||
// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
|
||||
// ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
|
||||
// Also, make them a type alias instead of an interface
|
||||
|
||||
/**
|
||||
* Arguments passed to loader functions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Arguments passed to action functions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Loaders and actions can return anything except `undefined` (`null` is a
|
||||
* valid return value if there is no data to return). Responses are preferred
|
||||
* and will ease any future migration to Remix
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route loader function signature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route action function signature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Arguments passed to shouldRevalidate function
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route shouldRevalidate function signature. This runs after any submission
|
||||
* (navigation or fetcher), so we flatten the navigation/fetcher submission
|
||||
* onto the arguments. It shouldn't matter whether it came from a navigation
|
||||
* or a fetcher, what really matters is the URLs and the formData since loaders
|
||||
* have to re-run based on the data models that were potentially mutated.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set `hasErrorBoundary`
|
||||
* from the framework-aware `errorElement` prop
|
||||
*
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
|
||||
/**
|
||||
* Result from a loader or action called via dataStrategy
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set any framework-specific
|
||||
* properties from framework-agnostic properties
|
||||
*/
|
||||
|
||||
/**
|
||||
* Keys we cannot change from within a lazy() function. We spread all other keys
|
||||
* onto the route. Either they're meaningful to the router, or they'll get
|
||||
* ignored.
|
||||
*/
|
||||
|
||||
const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "index", "children"]);
|
||||
|
||||
/**
|
||||
* lazy() function to load a route definition, which can add non-matching
|
||||
* related properties to a route
|
||||
*/
|
||||
|
||||
/**
|
||||
* Base RouteObject with common props shared by all types of routes
|
||||
*/
|
||||
|
||||
/**
|
||||
* Index routes must not have children
|
||||
*/
|
||||
|
||||
/**
|
||||
* Non-index routes may have children, but cannot have index
|
||||
*/
|
||||
|
||||
/**
|
||||
* A route object represents a logical route, with (optionally) its child
|
||||
* routes organized in a tree-like structure.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A data route object, which is just a RouteObject with a required unique ID
|
||||
*/
|
||||
|
||||
// Recursive helper for finding path parameters in the absence of wildcards
|
||||
|
||||
/**
|
||||
* Examples:
|
||||
* "/a/b/*" -> "*"
|
||||
* ":a" -> "a"
|
||||
* "/a/:b" -> "b"
|
||||
* "/a/blahblahblah:b" -> "b"
|
||||
* "/:a/:b" -> "a" | "b"
|
||||
* "/:a/b/:c/*" -> "a" | "c" | "*"
|
||||
*/
|
||||
|
||||
// Attempt to parse the given string segment. If it fails, then just return the
|
||||
// plain string type as a default fallback. Otherwise, return the union of the
|
||||
// parsed string literals that were referenced as dynamic segments in the route.
|
||||
|
||||
/**
|
||||
* The parameters that were parsed from the URL path.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A RouteMatch contains info about how a route matched a URL.
|
||||
*/
|
||||
|
||||
function isIndexRoute(route) {
|
||||
return route.index === true;
|
||||
}
|
||||
|
||||
// Walk the route tree generating unique IDs where necessary, so we are working
|
||||
// solely with AgnosticDataRouteObject's within the Router
|
||||
function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath, manifest) {
|
||||
if (parentPath === void 0) {
|
||||
parentPath = [];
|
||||
}
|
||||
if (manifest === void 0) {
|
||||
manifest = {};
|
||||
}
|
||||
return routes.map((route, index) => {
|
||||
let treePath = [...parentPath, String(index)];
|
||||
let id = typeof route.id === "string" ? route.id : treePath.join("-");
|
||||
invariant(route.index !== true || !route.children, "Cannot specify children on an index route");
|
||||
invariant(!manifest[id], "Found a route id collision on id \"" + id + "\". Route " + "id's must be globally unique within Data Router usages");
|
||||
if (isIndexRoute(route)) {
|
||||
let indexRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id
|
||||
});
|
||||
manifest[id] = indexRoute;
|
||||
return indexRoute;
|
||||
} else {
|
||||
let pathOrLayoutRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id,
|
||||
children: undefined
|
||||
});
|
||||
manifest[id] = pathOrLayoutRoute;
|
||||
if (route.children) {
|
||||
pathOrLayoutRoute.children = convertRoutesToDataRoutes(route.children, mapRouteProperties, treePath, manifest);
|
||||
}
|
||||
return pathOrLayoutRoute;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches the given routes to a location and returns the match data.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-routes
|
||||
*/
|
||||
function matchRoutes(routes, locationArg, basename) {
|
||||
if (basename === void 0) {
|
||||
basename = "/";
|
||||
}
|
||||
return matchRoutesImpl(routes, locationArg, basename, false);
|
||||
}
|
||||
function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
|
||||
let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
|
||||
let pathname = stripBasename(location.pathname || "/", basename);
|
||||
if (pathname == null) {
|
||||
return null;
|
||||
}
|
||||
let branches = flattenRoutes(routes);
|
||||
rankRouteBranches(branches);
|
||||
let matches = null;
|
||||
let decoded = decodePath(pathname);
|
||||
for (let i = 0; matches == null && i < branches.length; ++i) {
|
||||
// Incoming pathnames are generally encoded from either window.location
|
||||
// or from router.navigate, but we want to match against the unencoded
|
||||
// paths in the route definitions. Memory router locations won't be
|
||||
// encoded here but there also shouldn't be anything to decode so this
|
||||
// should be a safe operation. This avoids needing matchRoutes to be
|
||||
// history-aware.
|
||||
matches = matchRouteBranch(branches[i], decoded, allowPartial);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function convertRouteMatchToUiMatch(match, loaderData) {
|
||||
let {
|
||||
route,
|
||||
pathname,
|
||||
params
|
||||
} = match;
|
||||
return {
|
||||
id: route.id,
|
||||
pathname,
|
||||
params,
|
||||
data: loaderData[route.id],
|
||||
handle: route.handle
|
||||
};
|
||||
}
|
||||
function flattenRoutes(routes, branches, parentsMeta, parentPath) {
|
||||
if (branches === void 0) {
|
||||
branches = [];
|
||||
}
|
||||
if (parentsMeta === void 0) {
|
||||
parentsMeta = [];
|
||||
}
|
||||
if (parentPath === void 0) {
|
||||
parentPath = "";
|
||||
}
|
||||
let flattenRoute = (route, index, relativePath) => {
|
||||
let meta = {
|
||||
relativePath: relativePath === undefined ? route.path || "" : relativePath,
|
||||
caseSensitive: route.caseSensitive === true,
|
||||
childrenIndex: index,
|
||||
route
|
||||
};
|
||||
if (meta.relativePath.startsWith("/")) {
|
||||
invariant(meta.relativePath.startsWith(parentPath), "Absolute route path \"" + meta.relativePath + "\" nested under path " + ("\"" + parentPath + "\" is not valid. An absolute child route path ") + "must start with the combined path of all its parent routes.");
|
||||
meta.relativePath = meta.relativePath.slice(parentPath.length);
|
||||
}
|
||||
let path = joinPaths([parentPath, meta.relativePath]);
|
||||
let routesMeta = parentsMeta.concat(meta);
|
||||
|
||||
// Add the children before adding this route to the array, so we traverse the
|
||||
// route tree depth-first and child routes appear before their parents in
|
||||
// the "flattened" version.
|
||||
if (route.children && route.children.length > 0) {
|
||||
invariant(
|
||||
// Our types know better, but runtime JS may not!
|
||||
// @ts-expect-error
|
||||
route.index !== true, "Index routes must not have child routes. Please remove " + ("all child routes from route path \"" + path + "\"."));
|
||||
flattenRoutes(route.children, branches, routesMeta, path);
|
||||
}
|
||||
|
||||
// Routes without a path shouldn't ever match by themselves unless they are
|
||||
// index routes, so don't add them to the list of possible branches.
|
||||
if (route.path == null && !route.index) {
|
||||
return;
|
||||
}
|
||||
branches.push({
|
||||
path,
|
||||
score: computeScore(path, route.index),
|
||||
routesMeta
|
||||
});
|
||||
};
|
||||
routes.forEach((route, index) => {
|
||||
var _route$path;
|
||||
// coarse-grain check for optional params
|
||||
if (route.path === "" || !((_route$path = route.path) != null && _route$path.includes("?"))) {
|
||||
flattenRoute(route, index);
|
||||
} else {
|
||||
for (let exploded of explodeOptionalSegments(route.path)) {
|
||||
flattenRoute(route, index, exploded);
|
||||
}
|
||||
}
|
||||
});
|
||||
return branches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes all combinations of optional path segments for a given path,
|
||||
* excluding combinations that are ambiguous and of lower priority.
|
||||
*
|
||||
* For example, `/one/:two?/three/:four?/:five?` explodes to:
|
||||
* - `/one/three`
|
||||
* - `/one/:two/three`
|
||||
* - `/one/three/:four`
|
||||
* - `/one/three/:five`
|
||||
* - `/one/:two/three/:four`
|
||||
* - `/one/:two/three/:five`
|
||||
* - `/one/three/:four/:five`
|
||||
* - `/one/:two/three/:four/:five`
|
||||
*/
|
||||
function explodeOptionalSegments(path) {
|
||||
let segments = path.split("/");
|
||||
if (segments.length === 0) return [];
|
||||
let [first, ...rest] = segments;
|
||||
|
||||
// Optional path segments are denoted by a trailing `?`
|
||||
let isOptional = first.endsWith("?");
|
||||
// Compute the corresponding required segment: `foo?` -> `foo`
|
||||
let required = first.replace(/\?$/, "");
|
||||
if (rest.length === 0) {
|
||||
// Intepret empty string as omitting an optional segment
|
||||
// `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three`
|
||||
return isOptional ? [required, ""] : [required];
|
||||
}
|
||||
let restExploded = explodeOptionalSegments(rest.join("/"));
|
||||
let result = [];
|
||||
|
||||
// All child paths with the prefix. Do this for all children before the
|
||||
// optional version for all children, so we get consistent ordering where the
|
||||
// parent optional aspect is preferred as required. Otherwise, we can get
|
||||
// child sections interspersed where deeper optional segments are higher than
|
||||
// parent optional segments, where for example, /:two would explode _earlier_
|
||||
// then /:one. By always including the parent as required _for all children_
|
||||
// first, we avoid this issue
|
||||
result.push(...restExploded.map(subpath => subpath === "" ? required : [required, subpath].join("/")));
|
||||
|
||||
// Then, if this is an optional value, add all child versions without
|
||||
if (isOptional) {
|
||||
result.push(...restExploded);
|
||||
}
|
||||
|
||||
// for absolute paths, ensure `/` instead of empty segment
|
||||
return result.map(exploded => path.startsWith("/") && exploded === "" ? "/" : exploded);
|
||||
}
|
||||
function rankRouteBranches(branches) {
|
||||
branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first
|
||||
: compareIndexes(a.routesMeta.map(meta => meta.childrenIndex), b.routesMeta.map(meta => meta.childrenIndex)));
|
||||
}
|
||||
const paramRe = /^:[\w-]+$/;
|
||||
const dynamicSegmentValue = 3;
|
||||
const indexRouteValue = 2;
|
||||
const emptySegmentValue = 1;
|
||||
const staticSegmentValue = 10;
|
||||
const splatPenalty = -2;
|
||||
const isSplat = s => s === "*";
|
||||
function computeScore(path, index) {
|
||||
let segments = path.split("/");
|
||||
let initialScore = segments.length;
|
||||
if (segments.some(isSplat)) {
|
||||
initialScore += splatPenalty;
|
||||
}
|
||||
if (index) {
|
||||
initialScore += indexRouteValue;
|
||||
}
|
||||
return segments.filter(s => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
|
||||
}
|
||||
function compareIndexes(a, b) {
|
||||
let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
|
||||
return siblings ?
|
||||
// If two routes are siblings, we should try to match the earlier sibling
|
||||
// first. This allows people to have fine-grained control over the matching
|
||||
// behavior by simply putting routes with identical paths in the order they
|
||||
// want them tried.
|
||||
a[a.length - 1] - b[b.length - 1] :
|
||||
// Otherwise, it doesn't really make sense to rank non-siblings by index,
|
||||
// so they sort equally.
|
||||
0;
|
||||
}
|
||||
function matchRouteBranch(branch, pathname, allowPartial) {
|
||||
if (allowPartial === void 0) {
|
||||
allowPartial = false;
|
||||
}
|
||||
let {
|
||||
routesMeta
|
||||
} = branch;
|
||||
let matchedParams = {};
|
||||
let matchedPathname = "/";
|
||||
let matches = [];
|
||||
for (let i = 0; i < routesMeta.length; ++i) {
|
||||
let meta = routesMeta[i];
|
||||
let end = i === routesMeta.length - 1;
|
||||
let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
|
||||
let match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end
|
||||
}, remainingPathname);
|
||||
let route = meta.route;
|
||||
if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
|
||||
match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end: false
|
||||
}, remainingPathname);
|
||||
}
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
Object.assign(matchedParams, match.params);
|
||||
matches.push({
|
||||
// TODO: Can this as be avoided?
|
||||
params: matchedParams,
|
||||
pathname: joinPaths([matchedPathname, match.pathname]),
|
||||
pathnameBase: normalizePathname(joinPaths([matchedPathname, match.pathnameBase])),
|
||||
route
|
||||
});
|
||||
if (match.pathnameBase !== "/") {
|
||||
matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
|
||||
}
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a path with params interpolated.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/generate-path
|
||||
*/
|
||||
function generatePath(originalPath, params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
let path = originalPath;
|
||||
if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
|
||||
warning(false, "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
path = path.replace(/\*$/, "/*");
|
||||
}
|
||||
|
||||
// ensure `/` is added at the beginning if the path is absolute
|
||||
const prefix = path.startsWith("/") ? "/" : "";
|
||||
const stringify = p => p == null ? "" : typeof p === "string" ? p : String(p);
|
||||
const segments = path.split(/\/+/).map((segment, index, array) => {
|
||||
const isLastSegment = index === array.length - 1;
|
||||
|
||||
// only apply the splat if it's the last segment
|
||||
if (isLastSegment && segment === "*") {
|
||||
const star = "*";
|
||||
// Apply the splat
|
||||
return stringify(params[star]);
|
||||
}
|
||||
const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
|
||||
if (keyMatch) {
|
||||
const [, key, optional] = keyMatch;
|
||||
let param = params[key];
|
||||
invariant(optional === "?" || param != null, "Missing \":" + key + "\" param");
|
||||
return stringify(param);
|
||||
}
|
||||
|
||||
// Remove any optional markers from optional static segments
|
||||
return segment.replace(/\?$/g, "");
|
||||
})
|
||||
// Remove empty segments
|
||||
.filter(segment => !!segment);
|
||||
return prefix + segments.join("/");
|
||||
}
|
||||
|
||||
/**
|
||||
* A PathPattern is used to match on some portion of a URL pathname.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A PathMatch contains info about how a PathPattern matched on a URL pathname.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Performs pattern matching on a URL pathname and returns information about
|
||||
* the match.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-path
|
||||
*/
|
||||
function matchPath(pattern, pathname) {
|
||||
if (typeof pattern === "string") {
|
||||
pattern = {
|
||||
path: pattern,
|
||||
caseSensitive: false,
|
||||
end: true
|
||||
};
|
||||
}
|
||||
let [matcher, compiledParams] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
|
||||
let match = pathname.match(matcher);
|
||||
if (!match) return null;
|
||||
let matchedPathname = match[0];
|
||||
let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
|
||||
let captureGroups = match.slice(1);
|
||||
let params = compiledParams.reduce((memo, _ref, index) => {
|
||||
let {
|
||||
paramName,
|
||||
isOptional
|
||||
} = _ref;
|
||||
// We need to compute the pathnameBase here using the raw splat value
|
||||
// instead of using params["*"] later because it will be decoded then
|
||||
if (paramName === "*") {
|
||||
let splatValue = captureGroups[index] || "";
|
||||
pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
|
||||
}
|
||||
const value = captureGroups[index];
|
||||
if (isOptional && !value) {
|
||||
memo[paramName] = undefined;
|
||||
} else {
|
||||
memo[paramName] = (value || "").replace(/%2F/g, "/");
|
||||
}
|
||||
return memo;
|
||||
}, {});
|
||||
return {
|
||||
params,
|
||||
pathname: matchedPathname,
|
||||
pathnameBase,
|
||||
pattern
|
||||
};
|
||||
}
|
||||
function compilePath(path, caseSensitive, end) {
|
||||
if (caseSensitive === void 0) {
|
||||
caseSensitive = false;
|
||||
}
|
||||
if (end === void 0) {
|
||||
end = true;
|
||||
}
|
||||
warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
let params = [];
|
||||
let regexpSource = "^" + path.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
|
||||
.replace(/^\/*/, "/") // Make sure it has a leading /
|
||||
.replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
|
||||
.replace(/\/:([\w-]+)(\?)?/g, (_, paramName, isOptional) => {
|
||||
params.push({
|
||||
paramName,
|
||||
isOptional: isOptional != null
|
||||
});
|
||||
return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
|
||||
});
|
||||
if (path.endsWith("*")) {
|
||||
params.push({
|
||||
paramName: "*"
|
||||
});
|
||||
regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
|
||||
: "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
|
||||
} else if (end) {
|
||||
// When matching to the end, ignore trailing slashes
|
||||
regexpSource += "\\/*$";
|
||||
} else if (path !== "" && path !== "/") {
|
||||
// If our path is non-empty and contains anything beyond an initial slash,
|
||||
// then we have _some_ form of path in our regex, so we should expect to
|
||||
// match only if we find the end of this path segment. Look for an optional
|
||||
// non-captured trailing slash (to match a portion of the URL) or the end
|
||||
// of the path (if we've matched to the end). We used to do this with a
|
||||
// word boundary but that gives false positives on routes like
|
||||
// /user-preferences since `-` counts as a word boundary.
|
||||
regexpSource += "(?:(?=\\/|$))";
|
||||
} else ;
|
||||
let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
|
||||
return [matcher, params];
|
||||
}
|
||||
function decodePath(value) {
|
||||
try {
|
||||
return value.split("/").map(v => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
|
||||
} catch (error) {
|
||||
warning(false, "The URL path \"" + value + "\" could not be decoded because it is is a " + "malformed URL segment. This is probably due to a bad percent " + ("encoding (" + error + ")."));
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function stripBasename(pathname, basename) {
|
||||
if (basename === "/") return pathname;
|
||||
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// We want to leave trailing slash behavior in the user's control, so if they
|
||||
// specify a basename with a trailing slash, we should support it
|
||||
let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
|
||||
let nextChar = pathname.charAt(startIndex);
|
||||
if (nextChar && nextChar !== "/") {
|
||||
// pathname does not start with basename/
|
||||
return null;
|
||||
}
|
||||
return pathname.slice(startIndex) || "/";
|
||||
}
|
||||
const ABSOLUTE_URL_REGEX$1 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const isAbsoluteUrl = url => ABSOLUTE_URL_REGEX$1.test(url);
|
||||
|
||||
/**
|
||||
* Returns a resolved path object relative to the given pathname.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/resolve-path
|
||||
*/
|
||||
function resolvePath(to, fromPathname) {
|
||||
if (fromPathname === void 0) {
|
||||
fromPathname = "/";
|
||||
}
|
||||
let {
|
||||
pathname: toPathname,
|
||||
search = "",
|
||||
hash = ""
|
||||
} = typeof to === "string" ? parsePath(to) : to;
|
||||
let pathname;
|
||||
if (toPathname) {
|
||||
if (isAbsoluteUrl(toPathname)) {
|
||||
pathname = toPathname;
|
||||
} else {
|
||||
if (toPathname.includes("//")) {
|
||||
let oldPathname = toPathname;
|
||||
toPathname = removeDoubleSlashes(toPathname);
|
||||
warning(false, "Pathnames cannot have embedded double slashes - normalizing " + (oldPathname + " -> " + toPathname));
|
||||
}
|
||||
if (toPathname.startsWith("/")) {
|
||||
pathname = resolvePathname(toPathname.substring(1), "/");
|
||||
} else {
|
||||
pathname = resolvePathname(toPathname, fromPathname);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
pathname = fromPathname;
|
||||
}
|
||||
return {
|
||||
pathname,
|
||||
search: normalizeSearch(search),
|
||||
hash: normalizeHash(hash)
|
||||
};
|
||||
}
|
||||
function resolvePathname(relativePath, fromPathname) {
|
||||
let segments = fromPathname.replace(/\/+$/, "").split("/");
|
||||
let relativeSegments = relativePath.split("/");
|
||||
relativeSegments.forEach(segment => {
|
||||
if (segment === "..") {
|
||||
// Keep the root "" segment so the pathname starts at /
|
||||
if (segments.length > 1) segments.pop();
|
||||
} else if (segment !== ".") {
|
||||
segments.push(segment);
|
||||
}
|
||||
});
|
||||
return segments.length > 1 ? segments.join("/") : "/";
|
||||
}
|
||||
function getInvalidPathError(char, field, dest, path) {
|
||||
return "Cannot include a '" + char + "' character in a manually specified " + ("`to." + field + "` field [" + JSON.stringify(path) + "]. Please separate it out to the ") + ("`to." + dest + "` field. Alternatively you may provide the full path as ") + "a string in <Link to=\"...\"> and the router will parse it for you.";
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* When processing relative navigation we want to ignore ancestor routes that
|
||||
* do not contribute to the path, such that index/pathless layout routes don't
|
||||
* interfere.
|
||||
*
|
||||
* For example, when moving a route element into an index route and/or a
|
||||
* pathless layout route, relative link behavior contained within should stay
|
||||
* the same. Both of the following examples should link back to the root:
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts" element={<Link to=".."}>
|
||||
* </Route>
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts">
|
||||
* <Route element={<AccountsLayout />}> // <-- Does not contribute
|
||||
* <Route index element={<Link to=".."} /> // <-- Does not contribute
|
||||
* </Route
|
||||
* </Route>
|
||||
* </Route>
|
||||
*/
|
||||
function getPathContributingMatches(matches) {
|
||||
return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
|
||||
}
|
||||
|
||||
// Return the array of pathnames for the current route matches - used to
|
||||
// generate the routePathnames input for resolveTo()
|
||||
function getResolveToMatches(matches, v7_relativeSplatPath) {
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
|
||||
// When v7_relativeSplatPath is enabled, use the full pathname for the leaf
|
||||
// match so we include splat values for "." links. See:
|
||||
// https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
|
||||
if (v7_relativeSplatPath) {
|
||||
return pathMatches.map((match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase);
|
||||
}
|
||||
return pathMatches.map(match => match.pathnameBase);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
|
||||
if (isPathRelative === void 0) {
|
||||
isPathRelative = false;
|
||||
}
|
||||
let to;
|
||||
if (typeof toArg === "string") {
|
||||
to = parsePath(toArg);
|
||||
} else {
|
||||
to = _extends({}, toArg);
|
||||
invariant(!to.pathname || !to.pathname.includes("?"), getInvalidPathError("?", "pathname", "search", to));
|
||||
invariant(!to.pathname || !to.pathname.includes("#"), getInvalidPathError("#", "pathname", "hash", to));
|
||||
invariant(!to.search || !to.search.includes("#"), getInvalidPathError("#", "search", "hash", to));
|
||||
}
|
||||
let isEmptyPath = toArg === "" || to.pathname === "";
|
||||
let toPathname = isEmptyPath ? "/" : to.pathname;
|
||||
let from;
|
||||
|
||||
// Routing is relative to the current pathname if explicitly requested.
|
||||
//
|
||||
// If a pathname is explicitly provided in `to`, it should be relative to the
|
||||
// route context. This is explained in `Note on `<Link to>` values` in our
|
||||
// migration guide from v5 as a means of disambiguation between `to` values
|
||||
// that begin with `/` and those that do not. However, this is problematic for
|
||||
// `to` values that do not provide a pathname. `to` can simply be a search or
|
||||
// hash string, in which case we should assume that the navigation is relative
|
||||
// to the current location's pathname and *not* the route pathname.
|
||||
if (toPathname == null) {
|
||||
from = locationPathname;
|
||||
} else {
|
||||
let routePathnameIndex = routePathnames.length - 1;
|
||||
|
||||
// With relative="route" (the default), each leading .. segment means
|
||||
// "go up one route" instead of "go up one URL segment". This is a key
|
||||
// difference from how <a href> works and a major reason we call this a
|
||||
// "to" value instead of a "href".
|
||||
if (!isPathRelative && toPathname.startsWith("..")) {
|
||||
let toSegments = toPathname.split("/");
|
||||
while (toSegments[0] === "..") {
|
||||
toSegments.shift();
|
||||
routePathnameIndex -= 1;
|
||||
}
|
||||
to.pathname = toSegments.join("/");
|
||||
}
|
||||
from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
|
||||
}
|
||||
let path = resolvePath(to, from);
|
||||
|
||||
// Ensure the pathname has a trailing slash if the original "to" had one
|
||||
let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
|
||||
// Or if this was a link to the current path which has a trailing slash
|
||||
let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
|
||||
if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
|
||||
path.pathname += "/";
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function getToPathname(to) {
|
||||
// Empty strings should be treated the same as / paths
|
||||
return to === "" || to.pathname === "" ? "/" : typeof to === "string" ? parsePath(to).pathname : to.pathname;
|
||||
}
|
||||
const removeDoubleSlashes = path => path.replace(/\/\/+/g, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const joinPaths = paths => removeDoubleSlashes(paths.join("/"));
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizePathname = pathname => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeSearch = search => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeHash = hash => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
|
||||
/**
|
||||
* This is a shortcut for creating `application/json` responses. Converts `data`
|
||||
* to JSON and sets the `Content-Type` header.
|
||||
*
|
||||
* @deprecated The `json` method is deprecated in favor of returning raw objects.
|
||||
* This method will be removed in v7.
|
||||
*/
|
||||
const json = function json(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
let headers = new Headers(responseInit.headers);
|
||||
if (!headers.has("Content-Type")) {
|
||||
headers.set("Content-Type", "application/json; charset=utf-8");
|
||||
}
|
||||
return new Response(JSON.stringify(data), _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
class DataWithResponseInit {
|
||||
constructor(data, init) {
|
||||
this.type = "DataWithResponseInit";
|
||||
this.data = data;
|
||||
this.init = init || null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create "responses" that contain `status`/`headers` without forcing
|
||||
* serialization into an actual `Response` - used by Remix single fetch
|
||||
*/
|
||||
function data(data, init) {
|
||||
return new DataWithResponseInit(data, typeof init === "number" ? {
|
||||
status: init
|
||||
} : init);
|
||||
}
|
||||
class AbortedDeferredError extends Error {}
|
||||
class DeferredData {
|
||||
constructor(data, responseInit) {
|
||||
this.pendingKeysSet = new Set();
|
||||
this.subscribers = new Set();
|
||||
this.deferredKeys = [];
|
||||
invariant(data && typeof data === "object" && !Array.isArray(data), "defer() only accepts plain objects");
|
||||
|
||||
// Set up an AbortController + Promise we can race against to exit early
|
||||
// cancellation
|
||||
let reject;
|
||||
this.abortPromise = new Promise((_, r) => reject = r);
|
||||
this.controller = new AbortController();
|
||||
let onAbort = () => reject(new AbortedDeferredError("Deferred data aborted"));
|
||||
this.unlistenAbortSignal = () => this.controller.signal.removeEventListener("abort", onAbort);
|
||||
this.controller.signal.addEventListener("abort", onAbort);
|
||||
this.data = Object.entries(data).reduce((acc, _ref2) => {
|
||||
let [key, value] = _ref2;
|
||||
return Object.assign(acc, {
|
||||
[key]: this.trackPromise(key, value)
|
||||
});
|
||||
}, {});
|
||||
if (this.done) {
|
||||
// All incoming values were resolved
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
this.init = responseInit;
|
||||
}
|
||||
trackPromise(key, value) {
|
||||
if (!(value instanceof Promise)) {
|
||||
return value;
|
||||
}
|
||||
this.deferredKeys.push(key);
|
||||
this.pendingKeysSet.add(key);
|
||||
|
||||
// We store a little wrapper promise that will be extended with
|
||||
// _data/_error props upon resolve/reject
|
||||
let promise = Promise.race([value, this.abortPromise]).then(data => this.onSettle(promise, key, undefined, data), error => this.onSettle(promise, key, error));
|
||||
|
||||
// Register rejection listeners to avoid uncaught promise rejections on
|
||||
// errors or aborted deferred values
|
||||
promise.catch(() => {});
|
||||
Object.defineProperty(promise, "_tracked", {
|
||||
get: () => true
|
||||
});
|
||||
return promise;
|
||||
}
|
||||
onSettle(promise, key, error, data) {
|
||||
if (this.controller.signal.aborted && error instanceof AbortedDeferredError) {
|
||||
this.unlistenAbortSignal();
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
return Promise.reject(error);
|
||||
}
|
||||
this.pendingKeysSet.delete(key);
|
||||
if (this.done) {
|
||||
// Nothing left to abort!
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
|
||||
// If the promise was resolved/rejected with undefined, we'll throw an error as you
|
||||
// should always resolve with a value or null
|
||||
if (error === undefined && data === undefined) {
|
||||
let undefinedError = new Error("Deferred data for key \"" + key + "\" resolved/rejected with `undefined`, " + "you must resolve/reject with a value or `null`.");
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => undefinedError
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(undefinedError);
|
||||
}
|
||||
if (data === undefined) {
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
Object.defineProperty(promise, "_data", {
|
||||
get: () => data
|
||||
});
|
||||
this.emit(false, key);
|
||||
return data;
|
||||
}
|
||||
emit(aborted, settledKey) {
|
||||
this.subscribers.forEach(subscriber => subscriber(aborted, settledKey));
|
||||
}
|
||||
subscribe(fn) {
|
||||
this.subscribers.add(fn);
|
||||
return () => this.subscribers.delete(fn);
|
||||
}
|
||||
cancel() {
|
||||
this.controller.abort();
|
||||
this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k));
|
||||
this.emit(true);
|
||||
}
|
||||
async resolveData(signal) {
|
||||
let aborted = false;
|
||||
if (!this.done) {
|
||||
let onAbort = () => this.cancel();
|
||||
signal.addEventListener("abort", onAbort);
|
||||
aborted = await new Promise(resolve => {
|
||||
this.subscribe(aborted => {
|
||||
signal.removeEventListener("abort", onAbort);
|
||||
if (aborted || this.done) {
|
||||
resolve(aborted);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return aborted;
|
||||
}
|
||||
get done() {
|
||||
return this.pendingKeysSet.size === 0;
|
||||
}
|
||||
get unwrappedData() {
|
||||
invariant(this.data !== null && this.done, "Can only unwrap data on initialized and settled deferreds");
|
||||
return Object.entries(this.data).reduce((acc, _ref3) => {
|
||||
let [key, value] = _ref3;
|
||||
return Object.assign(acc, {
|
||||
[key]: unwrapTrackedPromise(value)
|
||||
});
|
||||
}, {});
|
||||
}
|
||||
get pendingKeys() {
|
||||
return Array.from(this.pendingKeysSet);
|
||||
}
|
||||
}
|
||||
function isTrackedPromise(value) {
|
||||
return value instanceof Promise && value._tracked === true;
|
||||
}
|
||||
function unwrapTrackedPromise(value) {
|
||||
if (!isTrackedPromise(value)) {
|
||||
return value;
|
||||
}
|
||||
if (value._error) {
|
||||
throw value._error;
|
||||
}
|
||||
return value._data;
|
||||
}
|
||||
/**
|
||||
* @deprecated The `defer` method is deprecated in favor of returning raw
|
||||
* objects. This method will be removed in v7.
|
||||
*/
|
||||
const defer = function defer(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
return new DeferredData(data, responseInit);
|
||||
};
|
||||
/**
|
||||
* A redirect response. Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirect = function redirect(url, init) {
|
||||
if (init === void 0) {
|
||||
init = 302;
|
||||
}
|
||||
let responseInit = init;
|
||||
if (typeof responseInit === "number") {
|
||||
responseInit = {
|
||||
status: responseInit
|
||||
};
|
||||
} else if (typeof responseInit.status === "undefined") {
|
||||
responseInit.status = 302;
|
||||
}
|
||||
let headers = new Headers(responseInit.headers);
|
||||
headers.set("Location", url);
|
||||
return new Response(null, _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will force a document reload to the new location.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirectDocument = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Reload-Document", "true");
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will perform a `history.replaceState` instead of a
|
||||
* `history.pushState` for client-side navigation redirects.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const replace = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Replace", "true");
|
||||
return response;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
|
||||
*
|
||||
* We don't export the class for public use since it's an implementation
|
||||
* detail, but we export the interface above so folks can build their own
|
||||
* abstractions around instances via isRouteErrorResponse()
|
||||
*/
|
||||
class ErrorResponseImpl {
|
||||
constructor(status, statusText, data, internal) {
|
||||
if (internal === void 0) {
|
||||
internal = false;
|
||||
}
|
||||
this.status = status;
|
||||
this.statusText = statusText || "";
|
||||
this.internal = internal;
|
||||
if (data instanceof Error) {
|
||||
this.data = data.toString();
|
||||
this.error = data;
|
||||
} else {
|
||||
this.data = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given error is an ErrorResponse generated from a 4xx/5xx
|
||||
* Response thrown from an action/loader
|
||||
*/
|
||||
function isRouteErrorResponse(error) {
|
||||
return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A Router instance manages all navigation and data loading/mutations
|
||||
*/
|
||||
|
||||
/**
|
||||
* State maintained internally by the router. During a navigation, all states
|
||||
* reflect the the "old" location unless otherwise noted.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Data that can be passed into hydrate a Router from SSR
|
||||
*/
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialization options for createRouter
|
||||
*/
|
||||
|
||||
/**
|
||||
* State returned from a server-side query() call
|
||||
*/
|
||||
|
||||
/**
|
||||
* A StaticHandler instance manages a singular SSR navigation/fetch event
|
||||
*/
|
||||
|
||||
/**
|
||||
* Subscriber function signature for changes to router state
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function signature for determining the key to be used in scroll restoration
|
||||
* for a given location
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function signature for determining the current scroll position
|
||||
*/
|
||||
|
||||
// Allowed for any navigation or fetch
|
||||
|
||||
// Only allowed for navigations
|
||||
|
||||
// Only allowed for submission navigations
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a normal (non-submission) navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a submission navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options to pass to navigate() for a navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a fetch() load
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a fetch() submission
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options to pass to fetch()
|
||||
*/
|
||||
|
||||
/**
|
||||
* Potential states for state.navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Potential states for fetchers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Cached info for active fetcher.load() instances so they can participate
|
||||
* in revalidation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Identified fetcher.load() calls that need to be revalidated
|
||||
*/
|
||||
|
||||
const validMutationMethodsArr = ["post", "put", "patch", "delete"];
|
||||
const validMutationMethods = new Set(validMutationMethodsArr);
|
||||
const validRequestMethodsArr = ["get", ...validMutationMethodsArr];
|
||||
const validRequestMethods = new Set(validRequestMethodsArr);
|
||||
const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
|
||||
const redirectPreserveMethodStatusCodes = new Set([307, 308]);
|
||||
const IDLE_NAVIGATION = {
|
||||
state: "idle",
|
||||
location: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_FETCHER = {
|
||||
state: "idle",
|
||||
data: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_BLOCKER = {
|
||||
state: "unblocked",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: undefined
|
||||
};
|
||||
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const defaultMapRouteProperties = route => ({
|
||||
hasErrorBoundary: Boolean(route.hasErrorBoundary)
|
||||
});
|
||||
const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createRouter
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Create a router and listen to history POP navigations
|
||||
*/
|
||||
function createRouter(init) {
|
||||
const routerWindow = init.window ? init.window : typeof window !== "undefined" ? window : undefined;
|
||||
const isBrowser = typeof routerWindow !== "undefined" && typeof routerWindow.document !== "undefined" && typeof routerWindow.document.createElement !== "undefined";
|
||||
const isServer = !isBrowser;
|
||||
invariant(init.routes.length > 0, "You must provide a non-empty routes array to createRouter");
|
||||
let mapRouteProperties;
|
||||
if (init.mapRouteProperties) {
|
||||
mapRouteProperties = init.mapRouteProperties;
|
||||
} else if (init.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = init.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
|
||||
// Routes keyed by ID
|
||||
let manifest = {};
|
||||
// Routes in tree format for matching
|
||||
let dataRoutes = convertRoutesToDataRoutes(init.routes, mapRouteProperties, undefined, manifest);
|
||||
let inFlightDataRoutes;
|
||||
let basename = init.basename || "/";
|
||||
let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
|
||||
let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
|
||||
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_fetcherPersist: false,
|
||||
v7_normalizeFormMethod: false,
|
||||
v7_partialHydration: false,
|
||||
v7_prependBasename: false,
|
||||
v7_relativeSplatPath: false,
|
||||
v7_skipActionErrorRevalidation: false
|
||||
}, init.future);
|
||||
// Cleanup function for history
|
||||
let unlistenHistory = null;
|
||||
// Externally-provided functions to call on all state changes
|
||||
let subscribers = new Set();
|
||||
// Externally-provided object to hold scroll restoration locations during routing
|
||||
let savedScrollPositions = null;
|
||||
// Externally-provided function to get scroll restoration keys
|
||||
let getScrollRestorationKey = null;
|
||||
// Externally-provided function to get current scroll position
|
||||
let getScrollPosition = null;
|
||||
// One-time flag to control the initial hydration scroll restoration. Because
|
||||
// we don't get the saved positions from <ScrollRestoration /> until _after_
|
||||
// the initial render, we need to manually trigger a separate updateState to
|
||||
// send along the restoreScrollPosition
|
||||
// Set to true if we have `hydrationData` since we assume we were SSR'd and that
|
||||
// SSR did the initial scroll restoration.
|
||||
let initialScrollRestored = init.hydrationData != null;
|
||||
let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
|
||||
let initialMatchesIsFOW = false;
|
||||
let initialErrors = null;
|
||||
if (initialMatches == null && !patchRoutesOnNavigationImpl) {
|
||||
// If we do not match a user-provided-route, fall back to the root
|
||||
// to allow the error boundary to take over
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: init.history.location.pathname
|
||||
});
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
initialMatches = matches;
|
||||
initialErrors = {
|
||||
[route.id]: error
|
||||
};
|
||||
}
|
||||
|
||||
// In SPA apps, if the user provided a patchRoutesOnNavigation implementation and
|
||||
// our initial match is a splat route, clear them out so we run through lazy
|
||||
// discovery on hydration in case there's a more accurate lazy route match.
|
||||
// In SSR apps (with `hydrationData`), we expect that the server will send
|
||||
// up the proper matched routes so we don't want to run lazy discovery on
|
||||
// initial hydration and want to hydrate into the splat route.
|
||||
if (initialMatches && !init.hydrationData) {
|
||||
let fogOfWar = checkFogOfWar(initialMatches, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active) {
|
||||
initialMatches = null;
|
||||
}
|
||||
}
|
||||
let initialized;
|
||||
if (!initialMatches) {
|
||||
initialized = false;
|
||||
initialMatches = [];
|
||||
|
||||
// If partial hydration and fog of war is enabled, we will be running
|
||||
// `patchRoutesOnNavigation` during hydration so include any partial matches as
|
||||
// the initial matches so we can properly render `HydrateFallback`'s
|
||||
if (future.v7_partialHydration) {
|
||||
let fogOfWar = checkFogOfWar(null, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
initialMatchesIsFOW = true;
|
||||
initialMatches = fogOfWar.matches;
|
||||
}
|
||||
}
|
||||
} else if (initialMatches.some(m => m.route.lazy)) {
|
||||
// All initialMatches need to be loaded before we're ready. If we have lazy
|
||||
// functions around still then we'll need to run them in initialize()
|
||||
initialized = false;
|
||||
} else if (!initialMatches.some(m => m.route.loader)) {
|
||||
// If we've got no loaders to run, then we're good to go
|
||||
initialized = true;
|
||||
} else if (future.v7_partialHydration) {
|
||||
// If partial hydration is enabled, we're initialized so long as we were
|
||||
// provided with hydrationData for every route with a loader, and no loaders
|
||||
// were marked for explicit hydration
|
||||
let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
|
||||
let errors = init.hydrationData ? init.hydrationData.errors : null;
|
||||
// If errors exist, don't consider routes below the boundary
|
||||
if (errors) {
|
||||
let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
|
||||
initialized = initialMatches.slice(0, idx + 1).every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
} else {
|
||||
initialized = initialMatches.every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
}
|
||||
} else {
|
||||
// Without partial hydration - we're initialized if we were provided any
|
||||
// hydrationData - which is expected to be complete
|
||||
initialized = init.hydrationData != null;
|
||||
}
|
||||
let router;
|
||||
let state = {
|
||||
historyAction: init.history.action,
|
||||
location: init.history.location,
|
||||
matches: initialMatches,
|
||||
initialized,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
// Don't restore on initial updateState() if we were SSR'd
|
||||
restoreScrollPosition: init.hydrationData != null ? false : null,
|
||||
preventScrollReset: false,
|
||||
revalidation: "idle",
|
||||
loaderData: init.hydrationData && init.hydrationData.loaderData || {},
|
||||
actionData: init.hydrationData && init.hydrationData.actionData || null,
|
||||
errors: init.hydrationData && init.hydrationData.errors || initialErrors,
|
||||
fetchers: new Map(),
|
||||
blockers: new Map()
|
||||
};
|
||||
|
||||
// -- Stateful internal variables to manage navigations --
|
||||
// Current navigation in progress (to be committed in completeNavigation)
|
||||
let pendingAction = Action.Pop;
|
||||
|
||||
// Should the current navigation prevent the scroll reset if scroll cannot
|
||||
// be restored?
|
||||
let pendingPreventScrollReset = false;
|
||||
|
||||
// AbortController for the active navigation
|
||||
let pendingNavigationController;
|
||||
|
||||
// Should the current navigation enable document.startViewTransition?
|
||||
let pendingViewTransitionEnabled = false;
|
||||
|
||||
// Store applied view transitions so we can apply them on POP
|
||||
let appliedViewTransitions = new Map();
|
||||
|
||||
// Cleanup function for persisting applied transitions to sessionStorage
|
||||
let removePageHideEventListener = null;
|
||||
|
||||
// We use this to avoid touching history in completeNavigation if a
|
||||
// revalidation is entirely uninterrupted
|
||||
let isUninterruptedRevalidation = false;
|
||||
|
||||
// Use this internal flag to force revalidation of all loaders:
|
||||
// - submissions (completed or interrupted)
|
||||
// - useRevalidator()
|
||||
// - X-Remix-Revalidate (from redirect)
|
||||
let isRevalidationRequired = false;
|
||||
|
||||
// Use this internal array to capture routes that require revalidation due
|
||||
// to a cancelled deferred on action submission
|
||||
let cancelledDeferredRoutes = [];
|
||||
|
||||
// Use this internal array to capture fetcher loads that were cancelled by an
|
||||
// action navigation and require revalidation
|
||||
let cancelledFetcherLoads = new Set();
|
||||
|
||||
// AbortControllers for any in-flight fetchers
|
||||
let fetchControllers = new Map();
|
||||
|
||||
// Track loads based on the order in which they started
|
||||
let incrementingLoadId = 0;
|
||||
|
||||
// Track the outstanding pending navigation data load to be compared against
|
||||
// the globally incrementing load when a fetcher load lands after a completed
|
||||
// navigation
|
||||
let pendingNavigationLoadId = -1;
|
||||
|
||||
// Fetchers that triggered data reloads as a result of their actions
|
||||
let fetchReloadIds = new Map();
|
||||
|
||||
// Fetchers that triggered redirect navigations
|
||||
let fetchRedirectIds = new Set();
|
||||
|
||||
// Most recent href/match for fetcher.load calls for fetchers
|
||||
let fetchLoadMatches = new Map();
|
||||
|
||||
// Ref-count mounted fetchers so we know when it's ok to clean them up
|
||||
let activeFetchers = new Map();
|
||||
|
||||
// Fetchers that have requested a delete when using v7_fetcherPersist,
|
||||
// they'll be officially removed after they return to idle
|
||||
let deletedFetchers = new Set();
|
||||
|
||||
// Store DeferredData instances for active route matches. When a
|
||||
// route loader returns defer() we stick one in here. Then, when a nested
|
||||
// promise resolves we update loaderData. If a new navigation starts we
|
||||
// cancel active deferreds for eliminated routes.
|
||||
let activeDeferreds = new Map();
|
||||
|
||||
// Store blocker functions in a separate Map outside of router state since
|
||||
// we don't need to update UI state if they change
|
||||
let blockerFunctions = new Map();
|
||||
|
||||
// Flag to ignore the next history update, so we can revert the URL change on
|
||||
// a POP navigation that was blocked by the user without touching router state
|
||||
let unblockBlockerHistoryUpdate = undefined;
|
||||
|
||||
// Initialize the router, all side effects should be kicked off from here.
|
||||
// Implemented as a Fluent API for ease of:
|
||||
// let router = createRouter(init).initialize();
|
||||
function initialize() {
|
||||
// If history informs us of a POP navigation, start the navigation but do not update
|
||||
// state. We'll update our own state once the navigation completes
|
||||
unlistenHistory = init.history.listen(_ref => {
|
||||
let {
|
||||
action: historyAction,
|
||||
location,
|
||||
delta
|
||||
} = _ref;
|
||||
// Ignore this event if it was just us resetting the URL from a
|
||||
// blocked POP navigation
|
||||
if (unblockBlockerHistoryUpdate) {
|
||||
unblockBlockerHistoryUpdate();
|
||||
unblockBlockerHistoryUpdate = undefined;
|
||||
return;
|
||||
}
|
||||
warning(blockerFunctions.size === 0 || delta != null, "You are trying to use a blocker on a POP navigation to a location " + "that was not created by @remix-run/router. This will fail silently in " + "production. This can happen if you are navigating outside the router " + "via `window.history.pushState`/`window.location.hash` instead of using " + "router navigation APIs. This can also happen if you are using " + "createHashRouter and the user manually changes the URL.");
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey && delta != null) {
|
||||
// Restore the URL to match the current UI, but don't update router state
|
||||
let nextHistoryUpdatePromise = new Promise(resolve => {
|
||||
unblockBlockerHistoryUpdate = resolve;
|
||||
});
|
||||
init.history.go(delta * -1);
|
||||
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location
|
||||
});
|
||||
// Re-do the same POP navigation we just blocked, after the url
|
||||
// restoration is also complete. See:
|
||||
// https://github.com/remix-run/react-router/issues/11613
|
||||
nextHistoryUpdatePromise.then(() => init.history.go(delta));
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return startNavigation(historyAction, location);
|
||||
});
|
||||
if (isBrowser) {
|
||||
// FIXME: This feels gross. How can we cleanup the lines between
|
||||
// scrollRestoration/appliedTransitions persistance?
|
||||
restoreAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
let _saveAppliedTransitions = () => persistAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
routerWindow.addEventListener("pagehide", _saveAppliedTransitions);
|
||||
removePageHideEventListener = () => routerWindow.removeEventListener("pagehide", _saveAppliedTransitions);
|
||||
}
|
||||
|
||||
// Kick off initial data load if needed. Use Pop to avoid modifying history
|
||||
// Note we don't do any handling of lazy here. For SPA's it'll get handled
|
||||
// in the normal navigation flow. For SSR it's expected that lazy modules are
|
||||
// resolved prior to router creation since we can't go into a fallbackElement
|
||||
// UI for SSR'd apps
|
||||
if (!state.initialized) {
|
||||
startNavigation(Action.Pop, state.location, {
|
||||
initialHydration: true
|
||||
});
|
||||
}
|
||||
return router;
|
||||
}
|
||||
|
||||
// Clean up a router and it's side effects
|
||||
function dispose() {
|
||||
if (unlistenHistory) {
|
||||
unlistenHistory();
|
||||
}
|
||||
if (removePageHideEventListener) {
|
||||
removePageHideEventListener();
|
||||
}
|
||||
subscribers.clear();
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
state.fetchers.forEach((_, key) => deleteFetcher(key));
|
||||
state.blockers.forEach((_, key) => deleteBlocker(key));
|
||||
}
|
||||
|
||||
// Subscribe to state updates for the router
|
||||
function subscribe(fn) {
|
||||
subscribers.add(fn);
|
||||
return () => subscribers.delete(fn);
|
||||
}
|
||||
|
||||
// Update our state and notify the calling context of the change
|
||||
function updateState(newState, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state = _extends({}, state, newState);
|
||||
|
||||
// Prep fetcher cleanup so we can tell the UI which fetcher data entries
|
||||
// can be removed
|
||||
let completedFetchers = [];
|
||||
let deletedFetchersKeys = [];
|
||||
if (future.v7_fetcherPersist) {
|
||||
state.fetchers.forEach((fetcher, key) => {
|
||||
if (fetcher.state === "idle") {
|
||||
if (deletedFetchers.has(key)) {
|
||||
// Unmounted from the UI and can be totally removed
|
||||
deletedFetchersKeys.push(key);
|
||||
} else {
|
||||
// Returned to idle but still mounted in the UI, so semi-remains for
|
||||
// revalidations and such
|
||||
completedFetchers.push(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Remove any lingering deleted fetchers that have already been removed
|
||||
// from state.fetchers
|
||||
deletedFetchers.forEach(key => {
|
||||
if (!state.fetchers.has(key) && !fetchControllers.has(key)) {
|
||||
deletedFetchersKeys.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
// Iterate over a local copy so that if flushSync is used and we end up
|
||||
// removing and adding a new subscriber due to the useCallback dependencies,
|
||||
// we don't get ourselves into a loop calling the new subscriber immediately
|
||||
[...subscribers].forEach(subscriber => subscriber(state, {
|
||||
deletedFetchers: deletedFetchersKeys,
|
||||
viewTransitionOpts: opts.viewTransitionOpts,
|
||||
flushSync: opts.flushSync === true
|
||||
}));
|
||||
|
||||
// Remove idle fetchers from state since we only care about in-flight fetchers.
|
||||
if (future.v7_fetcherPersist) {
|
||||
completedFetchers.forEach(key => state.fetchers.delete(key));
|
||||
deletedFetchersKeys.forEach(key => deleteFetcher(key));
|
||||
} else {
|
||||
// We already called deleteFetcher() on these, can remove them from this
|
||||
// Set now that we've handed the keys off to the data layer
|
||||
deletedFetchersKeys.forEach(key => deletedFetchers.delete(key));
|
||||
}
|
||||
}
|
||||
|
||||
// Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
|
||||
// and setting state.[historyAction/location/matches] to the new route.
|
||||
// - Location is a required param
|
||||
// - Navigation will always be set to IDLE_NAVIGATION
|
||||
// - Can pass any other state in newState
|
||||
function completeNavigation(location, newState, _temp) {
|
||||
var _location$state, _location$state2;
|
||||
let {
|
||||
flushSync
|
||||
} = _temp === void 0 ? {} : _temp;
|
||||
// Deduce if we're in a loading/actionReload state:
|
||||
// - We have committed actionData in the store
|
||||
// - The current navigation was a mutation submission
|
||||
// - We're past the submitting state and into the loading state
|
||||
// - The location being loaded is not the result of a redirect
|
||||
let isActionReload = state.actionData != null && state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && state.navigation.state === "loading" && ((_location$state = location.state) == null ? void 0 : _location$state._isRedirect) !== true;
|
||||
let actionData;
|
||||
if (newState.actionData) {
|
||||
if (Object.keys(newState.actionData).length > 0) {
|
||||
actionData = newState.actionData;
|
||||
} else {
|
||||
// Empty actionData -> clear prior actionData due to an action error
|
||||
actionData = null;
|
||||
}
|
||||
} else if (isActionReload) {
|
||||
// Keep the current data if we're wrapping up the action reload
|
||||
actionData = state.actionData;
|
||||
} else {
|
||||
// Clear actionData on any other completed navigations
|
||||
actionData = null;
|
||||
}
|
||||
|
||||
// Always preserve any existing loaderData from re-used routes
|
||||
let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
|
||||
|
||||
// On a successful navigation we can assume we got through all blockers
|
||||
// so we can start fresh
|
||||
let blockers = state.blockers;
|
||||
if (blockers.size > 0) {
|
||||
blockers = new Map(blockers);
|
||||
blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
|
||||
}
|
||||
|
||||
// Always respect the user flag. Otherwise don't reset on mutation
|
||||
// submission navigations unless they redirect
|
||||
let preventScrollReset = pendingPreventScrollReset === true || state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && ((_location$state2 = location.state) == null ? void 0 : _location$state2._isRedirect) !== true;
|
||||
|
||||
// Commit any in-flight routes at the end of the HMR revalidation "navigation"
|
||||
if (inFlightDataRoutes) {
|
||||
dataRoutes = inFlightDataRoutes;
|
||||
inFlightDataRoutes = undefined;
|
||||
}
|
||||
if (isUninterruptedRevalidation) ; else if (pendingAction === Action.Pop) ; else if (pendingAction === Action.Push) {
|
||||
init.history.push(location, location.state);
|
||||
} else if (pendingAction === Action.Replace) {
|
||||
init.history.replace(location, location.state);
|
||||
}
|
||||
let viewTransitionOpts;
|
||||
|
||||
// On POP, enable transitions if they were enabled on the original navigation
|
||||
if (pendingAction === Action.Pop) {
|
||||
// Forward takes precedence so they behave like the original navigation
|
||||
let priorPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (priorPaths && priorPaths.has(location.pathname)) {
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
} else if (appliedViewTransitions.has(location.pathname)) {
|
||||
// If we don't have a previous forward nav, assume we're popping back to
|
||||
// the new location and enable if that location previously enabled
|
||||
viewTransitionOpts = {
|
||||
currentLocation: location,
|
||||
nextLocation: state.location
|
||||
};
|
||||
}
|
||||
} else if (pendingViewTransitionEnabled) {
|
||||
// Store the applied transition on PUSH/REPLACE
|
||||
let toPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (toPaths) {
|
||||
toPaths.add(location.pathname);
|
||||
} else {
|
||||
toPaths = new Set([location.pathname]);
|
||||
appliedViewTransitions.set(state.location.pathname, toPaths);
|
||||
}
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
}
|
||||
updateState(_extends({}, newState, {
|
||||
// matches, errors, fetchers go through as-is
|
||||
actionData,
|
||||
loaderData,
|
||||
historyAction: pendingAction,
|
||||
location,
|
||||
initialized: true,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
revalidation: "idle",
|
||||
restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
|
||||
preventScrollReset,
|
||||
blockers
|
||||
}), {
|
||||
viewTransitionOpts,
|
||||
flushSync: flushSync === true
|
||||
});
|
||||
|
||||
// Reset stateful navigation vars
|
||||
pendingAction = Action.Pop;
|
||||
pendingPreventScrollReset = false;
|
||||
pendingViewTransitionEnabled = false;
|
||||
isUninterruptedRevalidation = false;
|
||||
isRevalidationRequired = false;
|
||||
cancelledDeferredRoutes = [];
|
||||
}
|
||||
|
||||
// Trigger a navigation event, which can either be a numerical POP or a PUSH
|
||||
// replace with an optional submission
|
||||
async function navigate(to, opts) {
|
||||
if (typeof to === "number") {
|
||||
init.history.go(to);
|
||||
return;
|
||||
}
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, to, future.v7_relativeSplatPath, opts == null ? void 0 : opts.fromRouteId, opts == null ? void 0 : opts.relative);
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, false, normalizedPath, opts);
|
||||
let currentLocation = state.location;
|
||||
let nextLocation = createLocation(state.location, path, opts && opts.state);
|
||||
|
||||
// When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
|
||||
// URL from window.location, so we need to encode it here so the behavior
|
||||
// remains the same as POP and non-data-router usages. new URL() does all
|
||||
// the same encoding we'd get from a history.pushState/window.location read
|
||||
// without having to touch history
|
||||
nextLocation = _extends({}, nextLocation, init.history.encodeLocation(nextLocation));
|
||||
let userReplace = opts && opts.replace != null ? opts.replace : undefined;
|
||||
let historyAction = Action.Push;
|
||||
if (userReplace === true) {
|
||||
historyAction = Action.Replace;
|
||||
} else if (userReplace === false) ; else if (submission != null && isMutationMethod(submission.formMethod) && submission.formAction === state.location.pathname + state.location.search) {
|
||||
// By default on submissions to the current location we REPLACE so that
|
||||
// users don't have to double-click the back button to get to the prior
|
||||
// location. If the user redirects to a different location from the
|
||||
// action/loader this will be ignored and the redirect will be a PUSH
|
||||
historyAction = Action.Replace;
|
||||
}
|
||||
let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey) {
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location: nextLocation,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: nextLocation
|
||||
});
|
||||
// Send the same navigation through
|
||||
navigate(to, opts);
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return await startNavigation(historyAction, nextLocation, {
|
||||
submission,
|
||||
// Send through the formData serialization error if we have one so we can
|
||||
// render at the right error boundary after we match routes
|
||||
pendingError: error,
|
||||
preventScrollReset,
|
||||
replace: opts && opts.replace,
|
||||
enableViewTransition: opts && opts.viewTransition,
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
|
||||
// Revalidate all current loaders. If a navigation is in progress or if this
|
||||
// is interrupted by a navigation, allow this to "succeed" by calling all
|
||||
// loaders during the next loader round
|
||||
function revalidate() {
|
||||
interruptActiveLoads();
|
||||
updateState({
|
||||
revalidation: "loading"
|
||||
});
|
||||
|
||||
// If we're currently submitting an action, we don't need to start a new
|
||||
// navigation, we'll just let the follow up loader execution call all loaders
|
||||
if (state.navigation.state === "submitting") {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we're currently in an idle state, start a new navigation for the current
|
||||
// action/location and mark it as uninterrupted, which will skip the history
|
||||
// update in completeNavigation
|
||||
if (state.navigation.state === "idle") {
|
||||
startNavigation(state.historyAction, state.location, {
|
||||
startUninterruptedRevalidation: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, if we're currently in a loading state, just start a new
|
||||
// navigation to the navigation.location but do not trigger an uninterrupted
|
||||
// revalidation so that history correctly updates once the navigation completes
|
||||
startNavigation(pendingAction || state.historyAction, state.navigation.location, {
|
||||
overrideNavigation: state.navigation,
|
||||
// Proxy through any rending view transition
|
||||
enableViewTransition: pendingViewTransitionEnabled === true
|
||||
});
|
||||
}
|
||||
|
||||
// Start a navigation to the given action/location. Can optionally provide a
|
||||
// overrideNavigation which will override the normalLoad in the case of a redirect
|
||||
// navigation
|
||||
async function startNavigation(historyAction, location, opts) {
|
||||
// Abort any in-progress navigations and start a new one. Unset any ongoing
|
||||
// uninterrupted revalidations unless told otherwise, since we want this
|
||||
// new navigation to update history normally
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
pendingNavigationController = null;
|
||||
pendingAction = historyAction;
|
||||
isUninterruptedRevalidation = (opts && opts.startUninterruptedRevalidation) === true;
|
||||
|
||||
// Save the current scroll position every time we start a new navigation,
|
||||
// and track whether we should reset scroll on completion
|
||||
saveScrollPosition(state.location, state.matches);
|
||||
pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let loadingNavigation = opts && opts.overrideNavigation;
|
||||
let matches = opts != null && opts.initialHydration && state.matches && state.matches.length > 0 && !initialMatchesIsFOW ?
|
||||
// `matchRoutes()` has already been called if we're in here via `router.initialize()`
|
||||
state.matches : matchRoutes(routesToUse, location, basename);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
|
||||
// Short circuit if it's only a hash change and not a revalidation or
|
||||
// mutation submission.
|
||||
//
|
||||
// Ignore on initial page loads because since the initial hydration will always
|
||||
// be "same hash". For example, on /page#hash and submit a <Form method="post">
|
||||
// which will default to a navigation to /page
|
||||
if (matches && state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
|
||||
completeNavigation(location, {
|
||||
matches
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
|
||||
// Short circuit with a 404 on the root error boundary if we match nothing
|
||||
if (!matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
completeNavigation(location, {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a controller/Request for this navigation
|
||||
pendingNavigationController = new AbortController();
|
||||
let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
|
||||
let pendingActionResult;
|
||||
if (opts && opts.pendingError) {
|
||||
// If we have a pendingError, it means the user attempted a GET submission
|
||||
// with binary FormData so assign here and skip to handleLoaders. That
|
||||
// way we handle calling loaders above the boundary etc. It's not really
|
||||
// different from an actionError in that sense.
|
||||
pendingActionResult = [findNearestBoundary(matches).route.id, {
|
||||
type: ResultType.error,
|
||||
error: opts.pendingError
|
||||
}];
|
||||
} else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {
|
||||
// Call action if we received an action submission
|
||||
let actionResult = await handleAction(request, location, opts.submission, matches, fogOfWar.active, {
|
||||
replace: opts.replace,
|
||||
flushSync
|
||||
});
|
||||
if (actionResult.shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we received a 404 from handleAction, it's because we couldn't lazily
|
||||
// discover the destination route so we don't want to call loaders
|
||||
if (actionResult.pendingActionResult) {
|
||||
let [routeId, result] = actionResult.pendingActionResult;
|
||||
if (isErrorResult(result) && isRouteErrorResponse(result.error) && result.error.status === 404) {
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, {
|
||||
matches: actionResult.matches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[routeId]: result.error
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
matches = actionResult.matches || matches;
|
||||
pendingActionResult = actionResult.pendingActionResult;
|
||||
loadingNavigation = getLoadingNavigation(location, opts.submission);
|
||||
flushSync = false;
|
||||
// No need to do fog of war matching again on loader execution
|
||||
fogOfWar.active = false;
|
||||
|
||||
// Create a GET request for the loaders
|
||||
request = createClientSideRequest(init.history, request.url, request.signal);
|
||||
}
|
||||
|
||||
// Call loaders
|
||||
let {
|
||||
shortCircuited,
|
||||
matches: updatedMatches,
|
||||
loaderData,
|
||||
errors
|
||||
} = await handleLoaders(request, location, matches, fogOfWar.active, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, opts && opts.initialHydration === true, flushSync, pendingActionResult);
|
||||
if (shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clean up now that the action/loaders have completed. Don't clean up if
|
||||
// we short circuited because pendingNavigationController will have already
|
||||
// been assigned to a new controller for the next navigation
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, _extends({
|
||||
matches: updatedMatches || matches
|
||||
}, getActionDataForCommit(pendingActionResult), {
|
||||
loaderData,
|
||||
errors
|
||||
}));
|
||||
}
|
||||
|
||||
// Call the action matched by the leaf route for this navigation and handle
|
||||
// redirects/errors
|
||||
async function handleAction(request, location, submission, matches, isFogOfWar, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
interruptActiveLoads();
|
||||
|
||||
// Put us in a submitting state
|
||||
let navigation = getSubmittingNavigation(location, submission);
|
||||
updateState({
|
||||
navigation
|
||||
}, {
|
||||
flushSync: opts.flushSync === true
|
||||
});
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
pendingActionResult: [boundaryId, {
|
||||
type: ResultType.error,
|
||||
error: discoverResult.error
|
||||
}]
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
notFoundMatches,
|
||||
error,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
pendingActionResult: [route.id, {
|
||||
type: ResultType.error,
|
||||
error
|
||||
}]
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
|
||||
// Call our action and get the result
|
||||
let result;
|
||||
let actionMatch = getTargetMatch(matches, location);
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: location.pathname,
|
||||
routeId: actionMatch.route.id
|
||||
})
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", state, request, [actionMatch], matches, null);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
let replace;
|
||||
if (opts && opts.replace != null) {
|
||||
replace = opts.replace;
|
||||
} else {
|
||||
// If the user didn't explicity indicate replace behavior, replace if
|
||||
// we redirected to the exact same location we're currently at to avoid
|
||||
// double back-buttons
|
||||
let location = normalizeRedirectLocation(result.response.headers.get("Location"), new URL(request.url), basename, init.history);
|
||||
replace = location === state.location.pathname + state.location.search;
|
||||
}
|
||||
await startRedirectNavigation(request, result, true, {
|
||||
submission,
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
|
||||
|
||||
// By default, all submissions to the current location are REPLACE
|
||||
// navigations, but if the action threw an error that'll be rendered in
|
||||
// an errorElement, we fall back to PUSH so that the user can use the
|
||||
// back button to get back to the pre-submission form location to try
|
||||
// again
|
||||
if ((opts && opts.replace) !== true) {
|
||||
pendingAction = Action.Push;
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [boundaryMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [actionMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
|
||||
// Call all applicable loaders for the given matches, handling redirects,
|
||||
// errors, etc.
|
||||
async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace, initialHydration, flushSync, pendingActionResult) {
|
||||
// Figure out the right navigation we want to use for data loading
|
||||
let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
|
||||
|
||||
// If this was a redirect from an action we don't have a "submission" but
|
||||
// we have it on the loading navigation so use that if available
|
||||
let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
|
||||
|
||||
// If this is an uninterrupted revalidation, we remain in our current idle
|
||||
// state. If not, we need to switch to our loading state and load data,
|
||||
// preserving any new action data or existing action data (in the case of
|
||||
// a revalidation interrupting an actionReload)
|
||||
// If we have partialHydration enabled, then don't update the state for the
|
||||
// initial data load since it's not a "navigation"
|
||||
let shouldUpdateNavigationState = !isUninterruptedRevalidation && (!future.v7_partialHydration || !initialHydration);
|
||||
|
||||
// When fog of war is enabled, we enter our `loading` state earlier so we
|
||||
// can discover new routes during the `loading` state. We skip this if
|
||||
// we've already run actions since we would have done our matching already.
|
||||
// If the children() function threw then, we want to proceed with the
|
||||
// partial matches it discovered.
|
||||
if (isFogOfWar) {
|
||||
if (shouldUpdateNavigationState) {
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
updateState(_extends({
|
||||
navigation: loadingNavigation
|
||||
}, actionData !== undefined ? {
|
||||
actionData
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[boundaryId]: discoverResult.error
|
||||
}
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, future.v7_partialHydration && initialHydration === true, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult);
|
||||
|
||||
// Cancel pending deferreds for no-longer-matched routes or routes we're
|
||||
// about to reload. Note that if this is an action reload we would have
|
||||
// already cancelled all pending deferreds so this would be a no-op
|
||||
cancelActiveDeferreds(routeId => !(matches && matches.some(m => m.route.id === routeId)) || matchesToLoad && matchesToLoad.some(m => m.route.id === routeId));
|
||||
pendingNavigationLoadId = ++incrementingLoadId;
|
||||
|
||||
// Short circuit if we have no loaders to run
|
||||
if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
completeNavigation(location, _extends({
|
||||
matches,
|
||||
loaderData: {},
|
||||
// Commit pending error if we're short circuiting
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null
|
||||
}, getActionDataForCommit(pendingActionResult), updatedFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (shouldUpdateNavigationState) {
|
||||
let updates = {};
|
||||
if (!isFogOfWar) {
|
||||
// Only update navigation/actionNData if we didn't already do it above
|
||||
updates.navigation = loadingNavigation;
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
if (actionData !== undefined) {
|
||||
updates.actionData = actionData;
|
||||
}
|
||||
}
|
||||
if (revalidatingFetchers.length > 0) {
|
||||
updates.fetchers = getUpdatedRevalidatingFetchers(revalidatingFetchers);
|
||||
}
|
||||
updateState(updates, {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
abortFetcher(rf.key);
|
||||
if (rf.controller) {
|
||||
// Fetchers use an independent AbortController so that aborting a fetcher
|
||||
// (via deleteFetcher) does not abort the triggering navigation that
|
||||
// triggered the revalidation
|
||||
fetchControllers.set(rf.key, rf.controller);
|
||||
}
|
||||
});
|
||||
|
||||
// Proxy navigation abort through to revalidation fetchers
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(f => abortFetcher(f.key));
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, request);
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
|
||||
// Clean up _after_ loaders have completed. Don't clean up if we short
|
||||
// circuited because fetchControllers would have been aborted and
|
||||
// reassigned to new controllers for the next navigation
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => fetchControllers.delete(rf.key));
|
||||
|
||||
// If any loaders returned a redirect Response, start a new REPLACE navigation
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
|
||||
// Wire up subscribers to update loaderData as promises settle
|
||||
activeDeferreds.forEach((deferredData, routeId) => {
|
||||
deferredData.subscribe(aborted => {
|
||||
// Note: No need to updateState here since the TrackedPromise on
|
||||
// loaderData is stable across resolve/reject
|
||||
// Remove this instance if we were aborted or if promises have settled
|
||||
if (aborted || deferredData.done) {
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Preserve SSR errors during partial hydration
|
||||
if (future.v7_partialHydration && initialHydration && state.errors) {
|
||||
errors = _extends({}, state.errors, errors);
|
||||
}
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
|
||||
let shouldUpdateFetchers = updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;
|
||||
return _extends({
|
||||
matches,
|
||||
loaderData,
|
||||
errors
|
||||
}, shouldUpdateFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {});
|
||||
}
|
||||
function getUpdatedActionData(pendingActionResult) {
|
||||
if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {
|
||||
// This is cast to `any` currently because `RouteData`uses any and it
|
||||
// would be a breaking change to use any.
|
||||
// TODO: v7 - change `RouteData` to use `unknown` instead of `any`
|
||||
return {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
};
|
||||
} else if (state.actionData) {
|
||||
if (Object.keys(state.actionData).length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return state.actionData;
|
||||
}
|
||||
}
|
||||
}
|
||||
function getUpdatedRevalidatingFetchers(revalidatingFetchers) {
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let fetcher = state.fetchers.get(rf.key);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, fetcher ? fetcher.data : undefined);
|
||||
state.fetchers.set(rf.key, revalidatingFetcher);
|
||||
});
|
||||
return new Map(state.fetchers);
|
||||
}
|
||||
|
||||
// Trigger a fetcher load/submit for the given fetcher key
|
||||
function fetch(key, routeId, href, opts) {
|
||||
if (isServer) {
|
||||
throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
|
||||
}
|
||||
abortFetcher(key);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, future.v7_relativeSplatPath, routeId, opts == null ? void 0 : opts.relative);
|
||||
let matches = matchRoutes(routesToUse, normalizedPath, basename);
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, normalizedPath);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
if (!matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: normalizedPath
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
|
||||
if (error) {
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let match = getTargetMatch(matches, path);
|
||||
let preventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
handleFetcherAction(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
return;
|
||||
}
|
||||
|
||||
// Store off the match so we can call it's shouldRevalidate on subsequent
|
||||
// revalidations
|
||||
fetchLoadMatches.set(key, {
|
||||
routeId,
|
||||
path
|
||||
});
|
||||
handleFetcherLoader(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
}
|
||||
|
||||
// Call the action for the matched fetcher.submit(), and then handle redirects,
|
||||
// errors, and revalidation
|
||||
async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
interruptActiveLoads();
|
||||
fetchLoadMatches.delete(key);
|
||||
function detectAndHandle405Error(m) {
|
||||
if (!m.route.action && !m.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: submission.formMethod,
|
||||
pathname: path,
|
||||
routeId: routeId
|
||||
});
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if (!isFogOfWar && detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Put this fetcher into it's submitting state
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(requestMatches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
requestMatches = discoverResult.matches;
|
||||
match = getTargetMatch(requestMatches, path);
|
||||
if (detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Call the action for the fetcher
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let actionResults = await callDataStrategy("action", state, fetchRequest, [match], requestMatches, key);
|
||||
let actionResult = actionResults[match.route.id];
|
||||
if (fetchRequest.signal.aborted) {
|
||||
// We can delete this so long as we weren't aborted by our own fetcher
|
||||
// re-submit which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// When using v7_fetcherPersist, we don't want errors bubbling up to the UI
|
||||
// or redirects processed for unmounted fetchers so we just revert them to
|
||||
// idle
|
||||
if (future.v7_fetcherPersist && deletedFetchers.has(key)) {
|
||||
if (isRedirectResult(actionResult) || isErrorResult(actionResult)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
// Let SuccessResult's fall through for revalidation
|
||||
} else {
|
||||
if (isRedirectResult(actionResult)) {
|
||||
fetchControllers.delete(key);
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our action started, so that
|
||||
// should take precedence over this redirect navigation. We already
|
||||
// set isRevalidationRequired so all loaders for the new route should
|
||||
// fire unless opted out via shouldRevalidate
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission));
|
||||
return startRedirectNavigation(fetchRequest, actionResult, false, {
|
||||
fetcherSubmission: submission,
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(actionResult)) {
|
||||
setFetcherError(key, routeId, actionResult.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (isDeferredResult(actionResult)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
|
||||
// Start the data load for current matches, or the next location if we're
|
||||
// in the middle of a navigation
|
||||
let nextLocation = state.navigation.location || state.location;
|
||||
let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let matches = state.navigation.state !== "idle" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;
|
||||
invariant(matches, "Didn't find any matches after fetcher action");
|
||||
let loadId = ++incrementingLoadId;
|
||||
fetchReloadIds.set(key, loadId);
|
||||
let loadFetcher = getLoadingFetcher(submission, actionResult.data);
|
||||
state.fetchers.set(key, loadFetcher);
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, false, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, [match.route.id, actionResult]);
|
||||
|
||||
// Put all revalidating fetchers into the loading state, except for the
|
||||
// current fetcher which we want to keep in it's current loading state which
|
||||
// contains it's action submission info + action data
|
||||
revalidatingFetchers.filter(rf => rf.key !== key).forEach(rf => {
|
||||
let staleKey = rf.key;
|
||||
let existingFetcher = state.fetchers.get(staleKey);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, existingFetcher ? existingFetcher.data : undefined);
|
||||
state.fetchers.set(staleKey, revalidatingFetcher);
|
||||
abortFetcher(staleKey);
|
||||
if (rf.controller) {
|
||||
fetchControllers.set(staleKey, rf.controller);
|
||||
}
|
||||
});
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
|
||||
abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, revalidationRequest);
|
||||
if (abortController.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
abortController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchControllers.delete(key);
|
||||
revalidatingFetchers.forEach(r => fetchControllers.delete(r.key));
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, undefined, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
|
||||
// Since we let revalidations complete even if the submitting fetcher was
|
||||
// deleted, only put it back to idle if it hasn't been deleted
|
||||
if (state.fetchers.has(key)) {
|
||||
let doneFetcher = getDoneFetcher(actionResult.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
abortStaleFetchLoads(loadId);
|
||||
|
||||
// If we are currently in a navigation loading state and this fetcher is
|
||||
// more recent than the navigation, we want the newer data so abort the
|
||||
// navigation and complete it with the fetcher data
|
||||
if (state.navigation.state === "loading" && loadId > pendingNavigationLoadId) {
|
||||
invariant(pendingAction, "Expected pending action");
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
completeNavigation(state.navigation.location, {
|
||||
matches,
|
||||
loaderData,
|
||||
errors,
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
} else {
|
||||
// otherwise just update with the fetcher data, preserving any existing
|
||||
// loaderData for loaders that did not need to reload. We have to
|
||||
// manually merge here since we aren't going through completeNavigation
|
||||
updateState({
|
||||
errors,
|
||||
loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
isRevalidationRequired = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Call the matched loader for fetcher.load(), handling redirects, errors, etc.
|
||||
async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
match = getTargetMatch(matches, path);
|
||||
}
|
||||
}
|
||||
|
||||
// Call the loader for this fetcher route match
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let results = await callDataStrategy("loader", state, fetchRequest, [match], matches, key);
|
||||
let result = results[match.route.id];
|
||||
|
||||
// Deferred isn't supported for fetcher loads, await everything and treat it
|
||||
// as a normal load. resolveDeferredData will return undefined if this
|
||||
// fetcher gets aborted, so we just leave result untouched and short circuit
|
||||
// below if that happens
|
||||
if (isDeferredResult(result)) {
|
||||
result = (await resolveDeferredData(result, fetchRequest.signal, true)) || result;
|
||||
}
|
||||
|
||||
// We can delete this so long as we weren't aborted by our our own fetcher
|
||||
// re-load which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
if (fetchRequest.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We don't want errors bubbling up or redirects followed for unmounted
|
||||
// fetchers, so short circuit here if it was removed from the UI
|
||||
if (deletedFetchers.has(key)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
|
||||
// If the loader threw a redirect Response, start a new REPLACE navigation
|
||||
if (isRedirectResult(result)) {
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our loader started, so that
|
||||
// should take precedence over this redirect navigation
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
await startRedirectNavigation(fetchRequest, result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(result)) {
|
||||
setFetcherError(key, routeId, result.error);
|
||||
return;
|
||||
}
|
||||
invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
|
||||
|
||||
// Put the fetcher back into an idle state
|
||||
updateFetcherState(key, getDoneFetcher(result.data));
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function to handle redirects returned from an action or loader.
|
||||
* Normally, a redirect "replaces" the navigation that triggered it. So, for
|
||||
* example:
|
||||
*
|
||||
* - user is on /a
|
||||
* - user clicks a link to /b
|
||||
* - loader for /b redirects to /c
|
||||
*
|
||||
* In a non-JS app the browser would track the in-flight navigation to /b and
|
||||
* then replace it with /c when it encountered the redirect response. In
|
||||
* the end it would only ever update the URL bar with /c.
|
||||
*
|
||||
* In client-side routing using pushState/replaceState, we aim to emulate
|
||||
* this behavior and we also do not update history until the end of the
|
||||
* navigation (including processed redirects). This means that we never
|
||||
* actually touch history until we've processed redirects, so we just use
|
||||
* the history action from the original navigation (PUSH or REPLACE).
|
||||
*/
|
||||
async function startRedirectNavigation(request, redirect, isNavigation, _temp2) {
|
||||
let {
|
||||
submission,
|
||||
fetcherSubmission,
|
||||
preventScrollReset,
|
||||
replace
|
||||
} = _temp2 === void 0 ? {} : _temp2;
|
||||
if (redirect.response.headers.has("X-Remix-Revalidate")) {
|
||||
isRevalidationRequired = true;
|
||||
}
|
||||
let location = redirect.response.headers.get("Location");
|
||||
invariant(location, "Expected a Location header on the redirect Response");
|
||||
location = normalizeRedirectLocation(location, new URL(request.url), basename, init.history);
|
||||
let redirectLocation = createLocation(state.location, location, {
|
||||
_isRedirect: true
|
||||
});
|
||||
if (isBrowser) {
|
||||
let isDocumentReload = false;
|
||||
if (redirect.response.headers.has("X-Remix-Reload-Document")) {
|
||||
// Hard reload if the response contained X-Remix-Reload-Document
|
||||
isDocumentReload = true;
|
||||
} else if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
const url = init.history.createURL(location);
|
||||
isDocumentReload =
|
||||
// Hard reload if it's an absolute URL to a new origin
|
||||
url.origin !== routerWindow.location.origin ||
|
||||
// Hard reload if it's an absolute URL that does not match our basename
|
||||
stripBasename(url.pathname, basename) == null;
|
||||
}
|
||||
if (isDocumentReload) {
|
||||
if (replace) {
|
||||
routerWindow.location.replace(location);
|
||||
} else {
|
||||
routerWindow.location.assign(location);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// There's no need to abort on redirects, since we don't detect the
|
||||
// redirect until the action/loaders have settled
|
||||
pendingNavigationController = null;
|
||||
let redirectHistoryAction = replace === true || redirect.response.headers.has("X-Remix-Replace") ? Action.Replace : Action.Push;
|
||||
|
||||
// Use the incoming submission if provided, fallback on the active one in
|
||||
// state.navigation
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType
|
||||
} = state.navigation;
|
||||
if (!submission && !fetcherSubmission && formMethod && formAction && formEncType) {
|
||||
submission = getSubmissionFromNavigation(state.navigation);
|
||||
}
|
||||
|
||||
// If this was a 307/308 submission we want to preserve the HTTP method and
|
||||
// re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
|
||||
// redirected location
|
||||
let activeSubmission = submission || fetcherSubmission;
|
||||
if (redirectPreserveMethodStatusCodes.has(redirect.response.status) && activeSubmission && isMutationMethod(activeSubmission.formMethod)) {
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
submission: _extends({}, activeSubmission, {
|
||||
formAction: location
|
||||
}),
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
} else {
|
||||
// If we have a navigation submission, we will preserve it through the
|
||||
// redirect navigation
|
||||
let overrideNavigation = getLoadingNavigation(redirectLocation, submission);
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
overrideNavigation,
|
||||
// Send fetcher submissions through for shouldRevalidate
|
||||
fetcherSubmission,
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy client-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, state, request, matchesToLoad, matches, fetcherKey) {
|
||||
let results;
|
||||
let dataResults = {};
|
||||
try {
|
||||
results = await callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties);
|
||||
} catch (e) {
|
||||
// If the outer dataStrategy method throws, just return the error for all
|
||||
// matches - and it'll naturally bubble to the root
|
||||
matchesToLoad.forEach(m => {
|
||||
dataResults[m.route.id] = {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
});
|
||||
return dataResults;
|
||||
}
|
||||
for (let [routeId, result] of Object.entries(results)) {
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
dataResults[routeId] = {
|
||||
type: ResultType.redirect,
|
||||
response: normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, future.v7_relativeSplatPath)
|
||||
};
|
||||
} else {
|
||||
dataResults[routeId] = await convertDataStrategyResultToDataResult(result);
|
||||
}
|
||||
}
|
||||
return dataResults;
|
||||
}
|
||||
async function callLoadersAndMaybeResolveData(state, matches, matchesToLoad, fetchersToLoad, request) {
|
||||
let currentMatches = state.matches;
|
||||
|
||||
// Kick off loaders and fetchers in parallel
|
||||
let loaderResultsPromise = callDataStrategy("loader", state, request, matchesToLoad, matches, null);
|
||||
let fetcherResultsPromise = Promise.all(fetchersToLoad.map(async f => {
|
||||
if (f.matches && f.match && f.controller) {
|
||||
let results = await callDataStrategy("loader", state, createClientSideRequest(init.history, f.path, f.controller.signal), [f.match], f.matches, f.key);
|
||||
let result = results[f.match.route.id];
|
||||
// Fetcher results are keyed by fetcher key from here on out, not routeId
|
||||
return {
|
||||
[f.key]: result
|
||||
};
|
||||
} else {
|
||||
return Promise.resolve({
|
||||
[f.key]: {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(404, {
|
||||
pathname: f.path
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}));
|
||||
let loaderResults = await loaderResultsPromise;
|
||||
let fetcherResults = (await fetcherResultsPromise).reduce((acc, r) => Object.assign(acc, r), {});
|
||||
await Promise.all([resolveNavigationDeferredResults(matches, loaderResults, request.signal, currentMatches, state.loaderData), resolveFetcherDeferredResults(matches, fetcherResults, fetchersToLoad)]);
|
||||
return {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
};
|
||||
}
|
||||
function interruptActiveLoads() {
|
||||
// Every interruption triggers a revalidation
|
||||
isRevalidationRequired = true;
|
||||
|
||||
// Cancel pending route-level deferreds and mark cancelled routes for
|
||||
// revalidation
|
||||
cancelledDeferredRoutes.push(...cancelActiveDeferreds());
|
||||
|
||||
// Abort in-flight fetcher loads
|
||||
fetchLoadMatches.forEach((_, key) => {
|
||||
if (fetchControllers.has(key)) {
|
||||
cancelledFetcherLoads.add(key);
|
||||
}
|
||||
abortFetcher(key);
|
||||
});
|
||||
}
|
||||
function updateFetcherState(key, fetcher, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state.fetchers.set(key, fetcher);
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function setFetcherError(key, routeId, error, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
let boundaryMatch = findNearestBoundary(state.matches, routeId);
|
||||
deleteFetcher(key);
|
||||
updateState({
|
||||
errors: {
|
||||
[boundaryMatch.route.id]: error
|
||||
},
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function getFetcher(key) {
|
||||
activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
|
||||
// If this fetcher was previously marked for deletion, unmark it since we
|
||||
// have a new instance
|
||||
if (deletedFetchers.has(key)) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
return state.fetchers.get(key) || IDLE_FETCHER;
|
||||
}
|
||||
function deleteFetcher(key) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
// Don't abort the controller if this is a deletion of a fetcher.submit()
|
||||
// in it's loading phase since - we don't want to abort the corresponding
|
||||
// revalidation and want them to complete and land
|
||||
if (fetchControllers.has(key) && !(fetcher && fetcher.state === "loading" && fetchReloadIds.has(key))) {
|
||||
abortFetcher(key);
|
||||
}
|
||||
fetchLoadMatches.delete(key);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchRedirectIds.delete(key);
|
||||
|
||||
// If we opted into the flag we can clear this now since we're calling
|
||||
// deleteFetcher() at the end of updateState() and we've already handed the
|
||||
// deleted fetcher keys off to the data layer.
|
||||
// If not, we're eagerly calling deleteFetcher() and we need to keep this
|
||||
// Set populated until the next updateState call, and we'll clear
|
||||
// `deletedFetchers` then
|
||||
if (future.v7_fetcherPersist) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
cancelledFetcherLoads.delete(key);
|
||||
state.fetchers.delete(key);
|
||||
}
|
||||
function deleteFetcherAndUpdateState(key) {
|
||||
let count = (activeFetchers.get(key) || 0) - 1;
|
||||
if (count <= 0) {
|
||||
activeFetchers.delete(key);
|
||||
deletedFetchers.add(key);
|
||||
if (!future.v7_fetcherPersist) {
|
||||
deleteFetcher(key);
|
||||
}
|
||||
} else {
|
||||
activeFetchers.set(key, count);
|
||||
}
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
}
|
||||
function abortFetcher(key) {
|
||||
let controller = fetchControllers.get(key);
|
||||
if (controller) {
|
||||
controller.abort();
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
}
|
||||
function markFetchersDone(keys) {
|
||||
for (let key of keys) {
|
||||
let fetcher = getFetcher(key);
|
||||
let doneFetcher = getDoneFetcher(fetcher.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
}
|
||||
function markFetchRedirectsDone() {
|
||||
let doneKeys = [];
|
||||
let updatedFetchers = false;
|
||||
for (let key of fetchRedirectIds) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
fetchRedirectIds.delete(key);
|
||||
doneKeys.push(key);
|
||||
updatedFetchers = true;
|
||||
}
|
||||
}
|
||||
markFetchersDone(doneKeys);
|
||||
return updatedFetchers;
|
||||
}
|
||||
function abortStaleFetchLoads(landedId) {
|
||||
let yeetedKeys = [];
|
||||
for (let [key, id] of fetchReloadIds) {
|
||||
if (id < landedId) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
abortFetcher(key);
|
||||
fetchReloadIds.delete(key);
|
||||
yeetedKeys.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
markFetchersDone(yeetedKeys);
|
||||
return yeetedKeys.length > 0;
|
||||
}
|
||||
function getBlocker(key, fn) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
if (blockerFunctions.get(key) !== fn) {
|
||||
blockerFunctions.set(key, fn);
|
||||
}
|
||||
return blocker;
|
||||
}
|
||||
function deleteBlocker(key) {
|
||||
state.blockers.delete(key);
|
||||
blockerFunctions.delete(key);
|
||||
}
|
||||
|
||||
// Utility function to update blockers, ensuring valid state transitions
|
||||
function updateBlocker(key, newBlocker) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
|
||||
// Poor mans state machine :)
|
||||
// https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
|
||||
invariant(blocker.state === "unblocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "proceeding" || blocker.state === "blocked" && newBlocker.state === "unblocked" || blocker.state === "proceeding" && newBlocker.state === "unblocked", "Invalid blocker state transition: " + blocker.state + " -> " + newBlocker.state);
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(key, newBlocker);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
function shouldBlockNavigation(_ref2) {
|
||||
let {
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
} = _ref2;
|
||||
if (blockerFunctions.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We ony support a single active blocker at the moment since we don't have
|
||||
// any compelling use cases for multi-blocker yet
|
||||
if (blockerFunctions.size > 1) {
|
||||
warning(false, "A router only supports one blocker at a time");
|
||||
}
|
||||
let entries = Array.from(blockerFunctions.entries());
|
||||
let [blockerKey, blockerFunction] = entries[entries.length - 1];
|
||||
let blocker = state.blockers.get(blockerKey);
|
||||
if (blocker && blocker.state === "proceeding") {
|
||||
// If the blocker is currently proceeding, we don't need to re-check
|
||||
// it and can let this navigation continue
|
||||
return;
|
||||
}
|
||||
|
||||
// At this point, we know we're unblocked/blocked so we need to check the
|
||||
// user-provided blocker function
|
||||
if (blockerFunction({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
})) {
|
||||
return blockerKey;
|
||||
}
|
||||
}
|
||||
function handleNavigational404(pathname) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(routesToUse);
|
||||
|
||||
// Cancel all pending deferred on 404s since we don't keep any routes
|
||||
cancelActiveDeferreds();
|
||||
return {
|
||||
notFoundMatches: matches,
|
||||
route,
|
||||
error
|
||||
};
|
||||
}
|
||||
function cancelActiveDeferreds(predicate) {
|
||||
let cancelledRouteIds = [];
|
||||
activeDeferreds.forEach((dfd, routeId) => {
|
||||
if (!predicate || predicate(routeId)) {
|
||||
// Cancel the deferred - but do not remove from activeDeferreds here -
|
||||
// we rely on the subscribers to do that so our tests can assert proper
|
||||
// cleanup via _internalActiveDeferreds
|
||||
dfd.cancel();
|
||||
cancelledRouteIds.push(routeId);
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
return cancelledRouteIds;
|
||||
}
|
||||
|
||||
// Opt in to capturing and reporting scroll positions during navigations,
|
||||
// used by the <ScrollRestoration> component
|
||||
function enableScrollRestoration(positions, getPosition, getKey) {
|
||||
savedScrollPositions = positions;
|
||||
getScrollPosition = getPosition;
|
||||
getScrollRestorationKey = getKey || null;
|
||||
|
||||
// Perform initial hydration scroll restoration, since we miss the boat on
|
||||
// the initial updateState() because we've not yet rendered <ScrollRestoration/>
|
||||
// and therefore have no savedScrollPositions available
|
||||
if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {
|
||||
initialScrollRestored = true;
|
||||
let y = getSavedScrollPosition(state.location, state.matches);
|
||||
if (y != null) {
|
||||
updateState({
|
||||
restoreScrollPosition: y
|
||||
});
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
savedScrollPositions = null;
|
||||
getScrollPosition = null;
|
||||
getScrollRestorationKey = null;
|
||||
};
|
||||
}
|
||||
function getScrollKey(location, matches) {
|
||||
if (getScrollRestorationKey) {
|
||||
let key = getScrollRestorationKey(location, matches.map(m => convertRouteMatchToUiMatch(m, state.loaderData)));
|
||||
return key || location.key;
|
||||
}
|
||||
return location.key;
|
||||
}
|
||||
function saveScrollPosition(location, matches) {
|
||||
if (savedScrollPositions && getScrollPosition) {
|
||||
let key = getScrollKey(location, matches);
|
||||
savedScrollPositions[key] = getScrollPosition();
|
||||
}
|
||||
}
|
||||
function getSavedScrollPosition(location, matches) {
|
||||
if (savedScrollPositions) {
|
||||
let key = getScrollKey(location, matches);
|
||||
let y = savedScrollPositions[key];
|
||||
if (typeof y === "number") {
|
||||
return y;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function checkFogOfWar(matches, routesToUse, pathname) {
|
||||
if (patchRoutesOnNavigationImpl) {
|
||||
if (!matches) {
|
||||
let fogMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: fogMatches || []
|
||||
};
|
||||
} else {
|
||||
if (Object.keys(matches[0].params).length > 0) {
|
||||
// If we matched a dynamic param or a splat, it might only be because
|
||||
// we haven't yet discovered other routes that would match with a
|
||||
// higher score. Call patchRoutesOnNavigation just to be sure
|
||||
let partialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: partialMatches
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
active: false,
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
async function discoverRoutes(matches, pathname, signal, fetcherKey) {
|
||||
if (!patchRoutesOnNavigationImpl) {
|
||||
return {
|
||||
type: "success",
|
||||
matches
|
||||
};
|
||||
}
|
||||
let partialMatches = matches;
|
||||
while (true) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let localManifest = manifest;
|
||||
try {
|
||||
await patchRoutesOnNavigationImpl({
|
||||
signal,
|
||||
path: pathname,
|
||||
matches: partialMatches,
|
||||
fetcherKey,
|
||||
patch: (routeId, children) => {
|
||||
if (signal.aborted) return;
|
||||
patchRoutesImpl(routeId, children, routesToUse, localManifest, mapRouteProperties);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
error: e,
|
||||
partialMatches
|
||||
};
|
||||
} finally {
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity so when we `updateState` at the end of
|
||||
// this navigation/fetch `router.routes` will be a new identity and
|
||||
// trigger a re-run of memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR && !signal.aborted) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
}
|
||||
}
|
||||
if (signal.aborted) {
|
||||
return {
|
||||
type: "aborted"
|
||||
};
|
||||
}
|
||||
let newMatches = matchRoutes(routesToUse, pathname, basename);
|
||||
if (newMatches) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: newMatches
|
||||
};
|
||||
}
|
||||
let newPartialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
|
||||
// Avoid loops if the second pass results in the same partial matches
|
||||
if (!newPartialMatches || partialMatches.length === newPartialMatches.length && partialMatches.every((m, i) => m.route.id === newPartialMatches[i].route.id)) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
partialMatches = newPartialMatches;
|
||||
}
|
||||
}
|
||||
function _internalSetRoutes(newRoutes) {
|
||||
manifest = {};
|
||||
inFlightDataRoutes = convertRoutesToDataRoutes(newRoutes, mapRouteProperties, undefined, manifest);
|
||||
}
|
||||
function patchRoutes(routeId, children) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties);
|
||||
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity and trigger a reflow via `updateState`
|
||||
// to re-run memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
updateState({});
|
||||
}
|
||||
}
|
||||
router = {
|
||||
get basename() {
|
||||
return basename;
|
||||
},
|
||||
get future() {
|
||||
return future;
|
||||
},
|
||||
get state() {
|
||||
return state;
|
||||
},
|
||||
get routes() {
|
||||
return dataRoutes;
|
||||
},
|
||||
get window() {
|
||||
return routerWindow;
|
||||
},
|
||||
initialize,
|
||||
subscribe,
|
||||
enableScrollRestoration,
|
||||
navigate,
|
||||
fetch,
|
||||
revalidate,
|
||||
// Passthrough to history-aware createHref used by useHref so we get proper
|
||||
// hash-aware URLs in DOM paths
|
||||
createHref: to => init.history.createHref(to),
|
||||
encodeLocation: to => init.history.encodeLocation(to),
|
||||
getFetcher,
|
||||
deleteFetcher: deleteFetcherAndUpdateState,
|
||||
dispose,
|
||||
getBlocker,
|
||||
deleteBlocker,
|
||||
patchRoutes,
|
||||
_internalFetchControllers: fetchControllers,
|
||||
_internalActiveDeferreds: activeDeferreds,
|
||||
// TODO: Remove setRoutes, it's temporary to avoid dealing with
|
||||
// updating the tree while validating the update algorithm.
|
||||
_internalSetRoutes
|
||||
};
|
||||
return router;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createStaticHandler
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
|
||||
function createStaticHandler(routes, opts) {
|
||||
invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
|
||||
let manifest = {};
|
||||
let basename = (opts ? opts.basename : null) || "/";
|
||||
let mapRouteProperties;
|
||||
if (opts != null && opts.mapRouteProperties) {
|
||||
mapRouteProperties = opts.mapRouteProperties;
|
||||
} else if (opts != null && opts.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = opts.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_relativeSplatPath: false,
|
||||
v7_throwAbortReason: false
|
||||
}, opts ? opts.future : null);
|
||||
let dataRoutes = convertRoutesToDataRoutes(routes, mapRouteProperties, undefined, manifest);
|
||||
|
||||
/**
|
||||
* The query() method is intended for document requests, in which we want to
|
||||
* call an optional action and potentially multiple loaders for all nested
|
||||
* routes. It returns a StaticHandlerContext object, which is very similar
|
||||
* to the router state (location, loaderData, actionData, errors, etc.) and
|
||||
* also adds SSR-specific information such as the statusCode and headers
|
||||
* from action/loaders Responses.
|
||||
*
|
||||
* It _should_ never throw and should report all errors through the
|
||||
* returned context.errors object, properly associating errors to their error
|
||||
* boundary. Additionally, it tracks _deepestRenderedBoundaryId which can be
|
||||
* used to emulate React error boundaries during SSr by performing a second
|
||||
* pass only down to the boundaryId.
|
||||
*
|
||||
* The one exception where we do not return a StaticHandlerContext is when a
|
||||
* redirect response is returned or thrown from any action/loader. We
|
||||
* propagate that out and return the raw Response so the HTTP server can
|
||||
* return it directly.
|
||||
*
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
* - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
|
||||
* the bubbling of errors which allows single-fetch-type implementations
|
||||
* where the client will handle the bubbling and we may need to return data
|
||||
* for the handling route
|
||||
*/
|
||||
async function query(request, _temp3) {
|
||||
let {
|
||||
requestContext,
|
||||
skipLoaderErrorBubbling,
|
||||
dataStrategy
|
||||
} = _temp3 === void 0 ? {} : _temp3;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD") {
|
||||
let error = getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
let {
|
||||
matches: methodNotAllowedMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: methodNotAllowedMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
} else if (!matches) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
let {
|
||||
matches: notFoundMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, skipLoaderErrorBubbling === true, null);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// When returning StaticHandlerContext, we patch back in the location here
|
||||
// since we need it for React Context. But this helps keep our submit and
|
||||
// loadRouteData operating on a Request instead of a Location
|
||||
return _extends({
|
||||
location,
|
||||
basename
|
||||
}, result);
|
||||
}
|
||||
|
||||
/**
|
||||
* The queryRoute() method is intended for targeted route requests, either
|
||||
* for fetch ?_data requests or resource route requests. In this case, we
|
||||
* are only ever calling a single action or loader, and we are returning the
|
||||
* returned value directly. In most cases, this will be a Response returned
|
||||
* from the action/loader, but it may be a primitive or other value as well -
|
||||
* and in such cases the calling context should handle that accordingly.
|
||||
*
|
||||
* We do respect the throw/return differentiation, so if an action/loader
|
||||
* throws, then this method will throw the value. This is important so we
|
||||
* can do proper boundary identification in Remix where a thrown Response
|
||||
* must go to the Catch Boundary but a returned Response is happy-path.
|
||||
*
|
||||
* One thing to note is that any Router-initiated Errors that make sense
|
||||
* to associate with a status code will be thrown as an ErrorResponse
|
||||
* instance which include the raw Error, such that the calling context can
|
||||
* serialize the error as they see fit while including the proper response
|
||||
* code. Examples here are 404 and 405 errors that occur prior to reaching
|
||||
* any user-defined loaders.
|
||||
*
|
||||
* - `opts.routeId` allows you to specify the specific route handler to call.
|
||||
* If not provided the handler will determine the proper route by matching
|
||||
* against `request.url`
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
*/
|
||||
async function queryRoute(request, _temp4) {
|
||||
let {
|
||||
routeId,
|
||||
requestContext,
|
||||
dataStrategy
|
||||
} = _temp4 === void 0 ? {} : _temp4;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD" && method !== "OPTIONS") {
|
||||
throw getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
} else if (!matches) {
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let match = routeId ? matches.find(m => m.route.id === routeId) : getTargetMatch(matches, location);
|
||||
if (routeId && !match) {
|
||||
throw getInternalRouterError(403, {
|
||||
pathname: location.pathname,
|
||||
routeId
|
||||
});
|
||||
} else if (!match) {
|
||||
// This should never hit I don't think?
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, false, match);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
let error = result.errors ? Object.values(result.errors)[0] : undefined;
|
||||
if (error !== undefined) {
|
||||
// If we got back result.errors, that means the loader/action threw
|
||||
// _something_ that wasn't a Response, but it's not guaranteed/required
|
||||
// to be an `instanceof Error` either, so we have to use throw here to
|
||||
// preserve the "error" state outside of queryImpl.
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Pick off the right state value to return
|
||||
if (result.actionData) {
|
||||
return Object.values(result.actionData)[0];
|
||||
}
|
||||
if (result.loaderData) {
|
||||
var _result$activeDeferre;
|
||||
let data = Object.values(result.loaderData)[0];
|
||||
if ((_result$activeDeferre = result.activeDeferreds) != null && _result$activeDeferre[match.route.id]) {
|
||||
data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
|
||||
}
|
||||
return data;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
async function queryImpl(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {
|
||||
invariant(request.signal, "query()/queryRoute() requests must contain an AbortController signal");
|
||||
try {
|
||||
if (isMutationMethod(request.method.toLowerCase())) {
|
||||
let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch != null);
|
||||
return result;
|
||||
}
|
||||
let result = await loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch);
|
||||
return isResponse(result) ? result : _extends({}, result, {
|
||||
actionData: null,
|
||||
actionHeaders: {}
|
||||
});
|
||||
} catch (e) {
|
||||
// If the user threw/returned a Response in callLoaderOrAction for a
|
||||
// `queryRoute` call, we throw the `DataStrategyResult` to bail out early
|
||||
// and then return or throw the raw Response here accordingly
|
||||
if (isDataStrategyResult(e) && isResponse(e.result)) {
|
||||
if (e.type === ResultType.error) {
|
||||
throw e.result;
|
||||
}
|
||||
return e.result;
|
||||
}
|
||||
// Redirects are always returned since they don't propagate to catch
|
||||
// boundaries
|
||||
if (isRedirectResponse(e)) {
|
||||
return e;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
async function submit(request, matches, actionMatch, requestContext, dataStrategy, skipLoaderErrorBubbling, isRouteRequest) {
|
||||
let result;
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: actionMatch.route.id
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", request, [actionMatch], matches, isRouteRequest, requestContext, dataStrategy);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
// Uhhhh - this should never happen, we should always throw these from
|
||||
// callLoaderOrAction, but the type narrowing here keeps TS happy and we
|
||||
// can get back on the "throw all redirect responses" train here should
|
||||
// this ever happen :/
|
||||
throw new Response(null, {
|
||||
status: result.response.status,
|
||||
headers: {
|
||||
Location: result.response.headers.get("Location")
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
let error = getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
}
|
||||
if (isRouteRequest) {
|
||||
// Note: This should only be non-Response values if we get here, since
|
||||
// isRouteRequest should throw any Response received in callLoaderOrAction
|
||||
if (isErrorResult(result)) {
|
||||
throw result.error;
|
||||
}
|
||||
return {
|
||||
matches: [actionMatch],
|
||||
loaderData: {},
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
},
|
||||
errors: null,
|
||||
// Note: statusCode + headers are unused here since queryRoute will
|
||||
// return the raw Response or value
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
|
||||
// Create a GET request for the loaders
|
||||
let loaderRequest = new Request(request.url, {
|
||||
headers: request.headers,
|
||||
redirect: request.redirect,
|
||||
signal: request.signal
|
||||
});
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = skipLoaderErrorBubbling ? actionMatch : findNearestBoundary(matches, actionMatch.route.id);
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null, [boundaryMatch.route.id, result]);
|
||||
|
||||
// action status codes take precedence over loader status codes
|
||||
return _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(result.error) ? result.error.status : result.statusCode != null ? result.statusCode : 500,
|
||||
actionData: null,
|
||||
actionHeaders: _extends({}, result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {})
|
||||
});
|
||||
}
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null);
|
||||
return _extends({}, context, {
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
}
|
||||
}, result.statusCode ? {
|
||||
statusCode: result.statusCode
|
||||
} : {}, {
|
||||
actionHeaders: result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {}
|
||||
});
|
||||
}
|
||||
async function loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch, pendingActionResult) {
|
||||
let isRouteRequest = routeMatch != null;
|
||||
|
||||
// Short circuit if we have no loaders to run (queryRoute())
|
||||
if (isRouteRequest && !(routeMatch != null && routeMatch.route.loader) && !(routeMatch != null && routeMatch.route.lazy)) {
|
||||
throw getInternalRouterError(400, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: routeMatch == null ? void 0 : routeMatch.route.id
|
||||
});
|
||||
}
|
||||
let requestMatches = routeMatch ? [routeMatch] : pendingActionResult && isErrorResult(pendingActionResult[1]) ? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]) : matches;
|
||||
let matchesToLoad = requestMatches.filter(m => m.route.loader || m.route.lazy);
|
||||
|
||||
// Short circuit if we have no loaders to run (query())
|
||||
if (matchesToLoad.length === 0) {
|
||||
return {
|
||||
matches,
|
||||
// Add a null for all matched routes for proper revalidation on the client
|
||||
loaderData: matches.reduce((acc, m) => Object.assign(acc, {
|
||||
[m.route.id]: null
|
||||
}), {}),
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null,
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let results = await callDataStrategy("loader", request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy);
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let activeDeferreds = new Map();
|
||||
let context = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling);
|
||||
|
||||
// Add a null for any non-loader matches for proper revalidation on the client
|
||||
let executedLoaders = new Set(matchesToLoad.map(match => match.route.id));
|
||||
matches.forEach(match => {
|
||||
if (!executedLoaders.has(match.route.id)) {
|
||||
context.loaderData[match.route.id] = null;
|
||||
}
|
||||
});
|
||||
return _extends({}, context, {
|
||||
matches,
|
||||
activeDeferreds: activeDeferreds.size > 0 ? Object.fromEntries(activeDeferreds.entries()) : null
|
||||
});
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy server-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy) {
|
||||
let results = await callDataStrategyImpl(dataStrategy || defaultDataStrategy, type, null, request, matchesToLoad, matches, null, manifest, mapRouteProperties, requestContext);
|
||||
let dataResults = {};
|
||||
await Promise.all(matches.map(async match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let result = results[match.route.id];
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
// Throw redirects and let the server handle them with an HTTP redirect
|
||||
throw normalizeRelativeRoutingRedirectResponse(response, request, match.route.id, matches, basename, future.v7_relativeSplatPath);
|
||||
}
|
||||
if (isResponse(result.result) && isRouteRequest) {
|
||||
// For SSR single-route requests, we want to hand Responses back
|
||||
// directly without unwrapping
|
||||
throw result;
|
||||
}
|
||||
dataResults[match.route.id] = await convertDataStrategyResultToDataResult(result);
|
||||
}));
|
||||
return dataResults;
|
||||
}
|
||||
return {
|
||||
dataRoutes,
|
||||
query,
|
||||
queryRoute
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Helpers
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Given an existing StaticHandlerContext and an error thrown at render time,
|
||||
* provide an updated StaticHandlerContext suitable for a second SSR render
|
||||
*/
|
||||
function getStaticContextFromError(routes, context, error) {
|
||||
let newContext = _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(error) ? error.status : 500,
|
||||
errors: {
|
||||
[context._deepestRenderedBoundaryId || routes[0].id]: error
|
||||
}
|
||||
});
|
||||
return newContext;
|
||||
}
|
||||
function throwStaticHandlerAbortedError(request, isRouteRequest, future) {
|
||||
if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
|
||||
throw request.signal.reason;
|
||||
}
|
||||
let method = isRouteRequest ? "queryRoute" : "query";
|
||||
throw new Error(method + "() call aborted: " + request.method + " " + request.url);
|
||||
}
|
||||
function isSubmissionNavigation(opts) {
|
||||
return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
|
||||
}
|
||||
function normalizeTo(location, matches, basename, prependBasename, to, v7_relativeSplatPath, fromRouteId, relative) {
|
||||
let contextualMatches;
|
||||
let activeRouteMatch;
|
||||
if (fromRouteId) {
|
||||
// Grab matches up to the calling route so our route-relative logic is
|
||||
// relative to the correct source route
|
||||
contextualMatches = [];
|
||||
for (let match of matches) {
|
||||
contextualMatches.push(match);
|
||||
if (match.route.id === fromRouteId) {
|
||||
activeRouteMatch = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
contextualMatches = matches;
|
||||
activeRouteMatch = matches[matches.length - 1];
|
||||
}
|
||||
|
||||
// Resolve the relative path
|
||||
let path = resolveTo(to ? to : ".", getResolveToMatches(contextualMatches, v7_relativeSplatPath), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
|
||||
|
||||
// When `to` is not specified we inherit search/hash from the current
|
||||
// location, unlike when to="." and we just inherit the path.
|
||||
// See https://github.com/remix-run/remix/issues/927
|
||||
if (to == null) {
|
||||
path.search = location.search;
|
||||
path.hash = location.hash;
|
||||
}
|
||||
|
||||
// Account for `?index` params when routing to the current location
|
||||
if ((to == null || to === "" || to === ".") && activeRouteMatch) {
|
||||
let nakedIndex = hasNakedIndexQuery(path.search);
|
||||
if (activeRouteMatch.route.index && !nakedIndex) {
|
||||
// Add one when we're targeting an index route
|
||||
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
|
||||
} else if (!activeRouteMatch.route.index && nakedIndex) {
|
||||
// Remove existing ones when we're not
|
||||
let params = new URLSearchParams(path.search);
|
||||
let indexValues = params.getAll("index");
|
||||
params.delete("index");
|
||||
indexValues.filter(v => v).forEach(v => params.append("index", v));
|
||||
let qs = params.toString();
|
||||
path.search = qs ? "?" + qs : "";
|
||||
}
|
||||
}
|
||||
|
||||
// If we're operating within a basename, prepend it to the pathname. If
|
||||
// this is a root navigation, then just use the raw basename which allows
|
||||
// the basename to have full control over the presence of a trailing slash
|
||||
// on root actions
|
||||
if (prependBasename && basename !== "/") {
|
||||
path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
|
||||
}
|
||||
return createPath(path);
|
||||
}
|
||||
|
||||
// Normalize navigation options by converting formMethod=GET formData objects to
|
||||
// URLSearchParams so they behave identically to links with query params
|
||||
function normalizeNavigateOptions(normalizeFormMethod, isFetcher, path, opts) {
|
||||
// Return location verbatim on non-submission navigations
|
||||
if (!opts || !isSubmissionNavigation(opts)) {
|
||||
return {
|
||||
path
|
||||
};
|
||||
}
|
||||
if (opts.formMethod && !isValidMethod(opts.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
error: getInternalRouterError(405, {
|
||||
method: opts.formMethod
|
||||
})
|
||||
};
|
||||
}
|
||||
let getInvalidBodyError = () => ({
|
||||
path,
|
||||
error: getInternalRouterError(400, {
|
||||
type: "invalid-body"
|
||||
})
|
||||
});
|
||||
|
||||
// Create a Submission on non-GET navigations
|
||||
let rawFormMethod = opts.formMethod || "get";
|
||||
let formMethod = normalizeFormMethod ? rawFormMethod.toUpperCase() : rawFormMethod.toLowerCase();
|
||||
let formAction = stripHashFromPath(path);
|
||||
if (opts.body !== undefined) {
|
||||
if (opts.formEncType === "text/plain") {
|
||||
// text only support POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
|
||||
Array.from(opts.body.entries()).reduce((acc, _ref3) => {
|
||||
let [name, value] = _ref3;
|
||||
return "" + acc + name + "=" + value + "\n";
|
||||
}, "") : String(opts.body);
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
}
|
||||
};
|
||||
} else if (opts.formEncType === "application/json") {
|
||||
// json only supports POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
try {
|
||||
let json = typeof opts.body === "string" ? JSON.parse(opts.body) : opts.body;
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
}
|
||||
invariant(typeof FormData === "function", "FormData is not available in this environment");
|
||||
let searchParams;
|
||||
let formData;
|
||||
if (opts.formData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.formData);
|
||||
formData = opts.formData;
|
||||
} else if (opts.body instanceof FormData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.body);
|
||||
formData = opts.body;
|
||||
} else if (opts.body instanceof URLSearchParams) {
|
||||
searchParams = opts.body;
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} else if (opts.body == null) {
|
||||
searchParams = new URLSearchParams();
|
||||
formData = new FormData();
|
||||
} else {
|
||||
try {
|
||||
searchParams = new URLSearchParams(opts.body);
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
let submission = {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
if (isMutationMethod(submission.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
submission
|
||||
};
|
||||
}
|
||||
|
||||
// Flatten submission onto URLSearchParams for GET submissions
|
||||
let parsedPath = parsePath(path);
|
||||
// On GET navigation submissions we can drop the ?index param from the
|
||||
// resulting location since all loaders will run. But fetcher GET submissions
|
||||
// only run a single loader so we need to preserve any incoming ?index params
|
||||
if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
|
||||
searchParams.append("index", "");
|
||||
}
|
||||
parsedPath.search = "?" + searchParams;
|
||||
return {
|
||||
path: createPath(parsedPath),
|
||||
submission
|
||||
};
|
||||
}
|
||||
|
||||
// Filter out all routes at/below any caught error as they aren't going to
|
||||
// render so we don't need to load them
|
||||
function getLoaderMatchesUntilBoundary(matches, boundaryId, includeBoundary) {
|
||||
if (includeBoundary === void 0) {
|
||||
includeBoundary = false;
|
||||
}
|
||||
let index = matches.findIndex(m => m.route.id === boundaryId);
|
||||
if (index >= 0) {
|
||||
return matches.slice(0, includeBoundary ? index + 1 : index);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function getMatchesToLoad(history, state, matches, submission, location, initialHydration, skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {
|
||||
let actionResult = pendingActionResult ? isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : pendingActionResult[1].data : undefined;
|
||||
let currentUrl = history.createURL(state.location);
|
||||
let nextUrl = history.createURL(location);
|
||||
|
||||
// Pick navigation matches that are net-new or qualify for revalidation
|
||||
let boundaryMatches = matches;
|
||||
if (initialHydration && state.errors) {
|
||||
// On initial hydration, only consider matches up to _and including_ the boundary.
|
||||
// This is inclusive to handle cases where a server loader ran successfully,
|
||||
// a child server loader bubbled up to this route, but this route has
|
||||
// `clientLoader.hydrate` so we want to still run the `clientLoader` so that
|
||||
// we have a complete version of `loaderData`
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, Object.keys(state.errors)[0], true);
|
||||
} else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
|
||||
// If an action threw an error, we call loaders up to, but not including the
|
||||
// boundary
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]);
|
||||
}
|
||||
|
||||
// Don't revalidate loaders by default after action 4xx/5xx responses
|
||||
// when the flag is enabled. They can still opt-into revalidation via
|
||||
// `shouldRevalidate` via `actionResult`
|
||||
let actionStatus = pendingActionResult ? pendingActionResult[1].statusCode : undefined;
|
||||
let shouldSkipRevalidation = skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
|
||||
let navigationMatches = boundaryMatches.filter((match, index) => {
|
||||
let {
|
||||
route
|
||||
} = match;
|
||||
if (route.lazy) {
|
||||
// We haven't loaded this route yet so we don't know if it's got a loader!
|
||||
return true;
|
||||
}
|
||||
if (route.loader == null) {
|
||||
return false;
|
||||
}
|
||||
if (initialHydration) {
|
||||
return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
|
||||
}
|
||||
|
||||
// Always call the loader on new route instances and pending defer cancellations
|
||||
if (isNewLoader(state.loaderData, state.matches[index], match) || cancelledDeferredRoutes.some(id => id === match.route.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// This is the default implementation for when we revalidate. If the route
|
||||
// provides it's own implementation, then we give them full control but
|
||||
// provide this value so they can leverage it if needed after they check
|
||||
// their own specific use cases
|
||||
let currentRouteMatch = state.matches[index];
|
||||
let nextRouteMatch = match;
|
||||
return shouldRevalidateLoader(match, _extends({
|
||||
currentUrl,
|
||||
currentParams: currentRouteMatch.params,
|
||||
nextUrl,
|
||||
nextParams: nextRouteMatch.params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false :
|
||||
// Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
|
||||
isRevalidationRequired || currentUrl.pathname + currentUrl.search === nextUrl.pathname + nextUrl.search ||
|
||||
// Search params affect all loaders
|
||||
currentUrl.search !== nextUrl.search || isNewRouteInstance(currentRouteMatch, nextRouteMatch)
|
||||
}));
|
||||
});
|
||||
|
||||
// Pick fetcher.loads that need to be revalidated
|
||||
let revalidatingFetchers = [];
|
||||
fetchLoadMatches.forEach((f, key) => {
|
||||
// Don't revalidate:
|
||||
// - on initial hydration (shouldn't be any fetchers then anyway)
|
||||
// - if fetcher won't be present in the subsequent render
|
||||
// - no longer matches the URL (v7_fetcherPersist=false)
|
||||
// - was unmounted but persisted due to v7_fetcherPersist=true
|
||||
if (initialHydration || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
|
||||
return;
|
||||
}
|
||||
let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
|
||||
|
||||
// If the fetcher path no longer matches, push it in with null matches so
|
||||
// we can trigger a 404 in callLoadersAndMaybeResolveData. Note this is
|
||||
// currently only a use-case for Remix HMR where the route tree can change
|
||||
// at runtime and remove a route previously loaded via a fetcher
|
||||
if (!fetcherMatches) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: null,
|
||||
match: null,
|
||||
controller: null
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Revalidating fetchers are decoupled from the route matches since they
|
||||
// load from a static href. They revalidate based on explicit revalidation
|
||||
// (submission, useRevalidator, or X-Remix-Revalidate)
|
||||
let fetcher = state.fetchers.get(key);
|
||||
let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
|
||||
let shouldRevalidate = false;
|
||||
if (fetchRedirectIds.has(key)) {
|
||||
// Never trigger a revalidation of an actively redirecting fetcher
|
||||
shouldRevalidate = false;
|
||||
} else if (cancelledFetcherLoads.has(key)) {
|
||||
// Always mark for revalidation if the fetcher was cancelled
|
||||
cancelledFetcherLoads.delete(key);
|
||||
shouldRevalidate = true;
|
||||
} else if (fetcher && fetcher.state !== "idle" && fetcher.data === undefined) {
|
||||
// If the fetcher hasn't ever completed loading yet, then this isn't a
|
||||
// revalidation, it would just be a brand new load if an explicit
|
||||
// revalidation is required
|
||||
shouldRevalidate = isRevalidationRequired;
|
||||
} else {
|
||||
// Otherwise fall back on any user-defined shouldRevalidate, defaulting
|
||||
// to explicit revalidations only
|
||||
shouldRevalidate = shouldRevalidateLoader(fetcherMatch, _extends({
|
||||
currentUrl,
|
||||
currentParams: state.matches[state.matches.length - 1].params,
|
||||
nextUrl,
|
||||
nextParams: matches[matches.length - 1].params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false : isRevalidationRequired
|
||||
}));
|
||||
}
|
||||
if (shouldRevalidate) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: fetcherMatches,
|
||||
match: fetcherMatch,
|
||||
controller: new AbortController()
|
||||
});
|
||||
}
|
||||
});
|
||||
return [navigationMatches, revalidatingFetchers];
|
||||
}
|
||||
function shouldLoadRouteOnHydration(route, loaderData, errors) {
|
||||
// We dunno if we have a loader - gotta find out!
|
||||
if (route.lazy) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// No loader, nothing to initialize
|
||||
if (!route.loader) {
|
||||
return false;
|
||||
}
|
||||
let hasData = loaderData != null && loaderData[route.id] !== undefined;
|
||||
let hasError = errors != null && errors[route.id] !== undefined;
|
||||
|
||||
// Don't run if we error'd during SSR
|
||||
if (!hasData && hasError) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Explicitly opting-in to running on hydration
|
||||
if (typeof route.loader === "function" && route.loader.hydrate === true) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, run if we're not yet initialized with anything
|
||||
return !hasData && !hasError;
|
||||
}
|
||||
function isNewLoader(currentLoaderData, currentMatch, match) {
|
||||
let isNew =
|
||||
// [a] -> [a, b]
|
||||
!currentMatch ||
|
||||
// [a, b] -> [a, c]
|
||||
match.route.id !== currentMatch.route.id;
|
||||
|
||||
// Handle the case that we don't have data for a re-used route, potentially
|
||||
// from a prior error or from a cancelled pending deferred
|
||||
let isMissingData = currentLoaderData[match.route.id] === undefined;
|
||||
|
||||
// Always load if this is a net-new route or we don't yet have data
|
||||
return isNew || isMissingData;
|
||||
}
|
||||
function isNewRouteInstance(currentMatch, match) {
|
||||
let currentPath = currentMatch.route.path;
|
||||
return (
|
||||
// param change for this match, /users/123 -> /users/456
|
||||
currentMatch.pathname !== match.pathname ||
|
||||
// splat param changed, which is not present in match.path
|
||||
// e.g. /files/images/avatar.jpg -> files/finances.xls
|
||||
currentPath != null && currentPath.endsWith("*") && currentMatch.params["*"] !== match.params["*"]
|
||||
);
|
||||
}
|
||||
function shouldRevalidateLoader(loaderMatch, arg) {
|
||||
if (loaderMatch.route.shouldRevalidate) {
|
||||
let routeChoice = loaderMatch.route.shouldRevalidate(arg);
|
||||
if (typeof routeChoice === "boolean") {
|
||||
return routeChoice;
|
||||
}
|
||||
}
|
||||
return arg.defaultShouldRevalidate;
|
||||
}
|
||||
function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties) {
|
||||
var _childrenToPatch;
|
||||
let childrenToPatch;
|
||||
if (routeId) {
|
||||
let route = manifest[routeId];
|
||||
invariant(route, "No route found to patch children into: routeId = " + routeId);
|
||||
if (!route.children) {
|
||||
route.children = [];
|
||||
}
|
||||
childrenToPatch = route.children;
|
||||
} else {
|
||||
childrenToPatch = routesToUse;
|
||||
}
|
||||
|
||||
// Don't patch in routes we already know about so that `patch` is idempotent
|
||||
// to simplify user-land code. This is useful because we re-call the
|
||||
// `patchRoutesOnNavigation` function for matched routes with params.
|
||||
let uniqueChildren = children.filter(newRoute => !childrenToPatch.some(existingRoute => isSameRoute(newRoute, existingRoute)));
|
||||
let newRoutes = convertRoutesToDataRoutes(uniqueChildren, mapRouteProperties, [routeId || "_", "patch", String(((_childrenToPatch = childrenToPatch) == null ? void 0 : _childrenToPatch.length) || "0")], manifest);
|
||||
childrenToPatch.push(...newRoutes);
|
||||
}
|
||||
function isSameRoute(newRoute, existingRoute) {
|
||||
// Most optimal check is by id
|
||||
if ("id" in newRoute && "id" in existingRoute && newRoute.id === existingRoute.id) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Second is by pathing differences
|
||||
if (!(newRoute.index === existingRoute.index && newRoute.path === existingRoute.path && newRoute.caseSensitive === existingRoute.caseSensitive)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Pathless layout routes are trickier since we need to check children.
|
||||
// If they have no children then they're the same as far as we can tell
|
||||
if ((!newRoute.children || newRoute.children.length === 0) && (!existingRoute.children || existingRoute.children.length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, we look to see if every child in the new route is already
|
||||
// represented in the existing route's children
|
||||
return newRoute.children.every((aChild, i) => {
|
||||
var _existingRoute$childr;
|
||||
return (_existingRoute$childr = existingRoute.children) == null ? void 0 : _existingRoute$childr.some(bChild => isSameRoute(aChild, bChild));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute route.lazy() methods to lazily load route modules (loader, action,
|
||||
* shouldRevalidate) and update the routeManifest in place which shares objects
|
||||
* with dataRoutes so those get updated as well.
|
||||
*/
|
||||
async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let lazyRoute = await route.lazy();
|
||||
|
||||
// If the lazy route function was executed and removed by another parallel
|
||||
// call then we can return - first lazy() to finish wins because the return
|
||||
// value of lazy is expected to be static
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let routeToUpdate = manifest[route.id];
|
||||
invariant(routeToUpdate, "No route found in manifest");
|
||||
|
||||
// Update the route in place. This should be safe because there's no way
|
||||
// we could yet be sitting on this route as we can't get there without
|
||||
// resolving lazy() first.
|
||||
//
|
||||
// This is different than the HMR "update" use-case where we may actively be
|
||||
// on the route being updated. The main concern boils down to "does this
|
||||
// mutation affect any ongoing navigations or any current state.matches
|
||||
// values?". If not, it should be safe to update in place.
|
||||
let routeUpdates = {};
|
||||
for (let lazyRouteProperty in lazyRoute) {
|
||||
let staticRouteValue = routeToUpdate[lazyRouteProperty];
|
||||
let isPropertyStaticallyDefined = staticRouteValue !== undefined &&
|
||||
// This property isn't static since it should always be updated based
|
||||
// on the route updates
|
||||
lazyRouteProperty !== "hasErrorBoundary";
|
||||
warning(!isPropertyStaticallyDefined, "Route \"" + routeToUpdate.id + "\" has a static property \"" + lazyRouteProperty + "\" " + "defined but its lazy function is also returning a value for this property. " + ("The lazy route property \"" + lazyRouteProperty + "\" will be ignored."));
|
||||
if (!isPropertyStaticallyDefined && !immutableRouteKeys.has(lazyRouteProperty)) {
|
||||
routeUpdates[lazyRouteProperty] = lazyRoute[lazyRouteProperty];
|
||||
}
|
||||
}
|
||||
|
||||
// Mutate the route with the provided updates. Do this first so we pass
|
||||
// the updated version to mapRouteProperties
|
||||
Object.assign(routeToUpdate, routeUpdates);
|
||||
|
||||
// Mutate the `hasErrorBoundary` property on the route based on the route
|
||||
// updates and remove the `lazy` function so we don't resolve the lazy
|
||||
// route again.
|
||||
Object.assign(routeToUpdate, _extends({}, mapRouteProperties(routeToUpdate), {
|
||||
lazy: undefined
|
||||
}));
|
||||
}
|
||||
|
||||
// Default implementation of `dataStrategy` which fetches all loaders in parallel
|
||||
async function defaultDataStrategy(_ref4) {
|
||||
let {
|
||||
matches
|
||||
} = _ref4;
|
||||
let matchesToLoad = matches.filter(m => m.shouldLoad);
|
||||
let results = await Promise.all(matchesToLoad.map(m => m.resolve()));
|
||||
return results.reduce((acc, result, i) => Object.assign(acc, {
|
||||
[matchesToLoad[i].route.id]: result
|
||||
}), {});
|
||||
}
|
||||
async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties, requestContext) {
|
||||
let loadRouteDefinitionsPromises = matches.map(m => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties, manifest) : undefined);
|
||||
let dsMatches = matches.map((match, i) => {
|
||||
let loadRoutePromise = loadRouteDefinitionsPromises[i];
|
||||
let shouldLoad = matchesToLoad.some(m => m.route.id === match.route.id);
|
||||
// `resolve` encapsulates route.lazy(), executing the loader/action,
|
||||
// and mapping return values/thrown errors to a `DataStrategyResult`. Users
|
||||
// can pass a callback to take fine-grained control over the execution
|
||||
// of the loader/action
|
||||
let resolve = async handlerOverride => {
|
||||
if (handlerOverride && request.method === "GET" && (match.route.lazy || match.route.loader)) {
|
||||
shouldLoad = true;
|
||||
}
|
||||
return shouldLoad ? callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, requestContext) : Promise.resolve({
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
});
|
||||
};
|
||||
return _extends({}, match, {
|
||||
shouldLoad,
|
||||
resolve
|
||||
});
|
||||
});
|
||||
|
||||
// Send all matches here to allow for a middleware-type implementation.
|
||||
// handler will be a no-op for unneeded routes and we filter those results
|
||||
// back out below.
|
||||
let results = await dataStrategyImpl({
|
||||
matches: dsMatches,
|
||||
request,
|
||||
params: matches[0].params,
|
||||
fetcherKey,
|
||||
context: requestContext
|
||||
});
|
||||
|
||||
// Wait for all routes to load here but 'swallow the error since we want
|
||||
// it to bubble up from the `await loadRoutePromise` in `callLoaderOrAction` -
|
||||
// called from `match.resolve()`
|
||||
try {
|
||||
await Promise.all(loadRouteDefinitionsPromises);
|
||||
} catch (e) {
|
||||
// No-op
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
// Default logic for calling a loader/action is the user has no specified a dataStrategy
|
||||
async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
|
||||
let result;
|
||||
let onReject;
|
||||
let runHandler = handler => {
|
||||
// Setup a promise we can race against so that abort signals short circuit
|
||||
let reject;
|
||||
// This will never resolve so safe to type it as Promise<DataStrategyResult> to
|
||||
// satisfy the function return value
|
||||
let abortPromise = new Promise((_, r) => reject = r);
|
||||
onReject = () => reject();
|
||||
request.signal.addEventListener("abort", onReject);
|
||||
let actualHandler = ctx => {
|
||||
if (typeof handler !== "function") {
|
||||
return Promise.reject(new Error("You cannot call the handler for a route which defines a boolean " + ("\"" + type + "\" [routeId: " + match.route.id + "]")));
|
||||
}
|
||||
return handler({
|
||||
request,
|
||||
params: match.params,
|
||||
context: staticContext
|
||||
}, ...(ctx !== undefined ? [ctx] : []));
|
||||
};
|
||||
let handlerPromise = (async () => {
|
||||
try {
|
||||
let val = await (handlerOverride ? handlerOverride(ctx => actualHandler(ctx)) : actualHandler());
|
||||
return {
|
||||
type: "data",
|
||||
result: val
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
result: e
|
||||
};
|
||||
}
|
||||
})();
|
||||
return Promise.race([handlerPromise, abortPromise]);
|
||||
};
|
||||
try {
|
||||
let handler = match.route[type];
|
||||
|
||||
// If we have a route.lazy promise, await that first
|
||||
if (loadRoutePromise) {
|
||||
if (handler) {
|
||||
// Run statically defined handler in parallel with lazy()
|
||||
let handlerError;
|
||||
let [value] = await Promise.all([
|
||||
// If the handler throws, don't let it immediately bubble out,
|
||||
// since we need to let the lazy() execution finish so we know if this
|
||||
// route has a boundary that can handle the error
|
||||
runHandler(handler).catch(e => {
|
||||
handlerError = e;
|
||||
}), loadRoutePromise]);
|
||||
if (handlerError !== undefined) {
|
||||
throw handlerError;
|
||||
}
|
||||
result = value;
|
||||
} else {
|
||||
// Load lazy route module, then run any returned handler
|
||||
await loadRoutePromise;
|
||||
handler = match.route[type];
|
||||
if (handler) {
|
||||
// Handler still runs even if we got interrupted to maintain consistency
|
||||
// with un-abortable behavior of handler execution on non-lazy or
|
||||
// previously-lazy-loaded routes
|
||||
result = await runHandler(handler);
|
||||
} else if (type === "action") {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname,
|
||||
routeId: match.route.id
|
||||
});
|
||||
} else {
|
||||
// lazy() route has no loader to run. Short circuit here so we don't
|
||||
// hit the invariant below that errors on returning undefined.
|
||||
return {
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
} else if (!handler) {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
} else {
|
||||
result = await runHandler(handler);
|
||||
}
|
||||
invariant(result.result !== undefined, "You defined " + (type === "action" ? "an action" : "a loader") + " for route " + ("\"" + match.route.id + "\" but didn't return anything from your `" + type + "` ") + "function. Please return a value or `null`.");
|
||||
} catch (e) {
|
||||
// We should already be catching and converting normal handler executions to
|
||||
// DataStrategyResults and returning them, so anything that throws here is an
|
||||
// unexpected error we still need to wrap
|
||||
return {
|
||||
type: ResultType.error,
|
||||
result: e
|
||||
};
|
||||
} finally {
|
||||
if (onReject) {
|
||||
request.signal.removeEventListener("abort", onReject);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
async function convertDataStrategyResultToDataResult(dataStrategyResult) {
|
||||
let {
|
||||
result,
|
||||
type
|
||||
} = dataStrategyResult;
|
||||
if (isResponse(result)) {
|
||||
let data;
|
||||
try {
|
||||
let contentType = result.headers.get("Content-Type");
|
||||
// Check between word boundaries instead of startsWith() due to the last
|
||||
// paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
|
||||
if (contentType && /\bapplication\/json\b/.test(contentType)) {
|
||||
if (result.body == null) {
|
||||
data = null;
|
||||
} else {
|
||||
data = await result.json();
|
||||
}
|
||||
} else {
|
||||
data = await result.text();
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(result.status, result.statusText, data),
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data,
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init3, _result$init4;
|
||||
if (result.data instanceof Error) {
|
||||
var _result$init, _result$init2;
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result.data,
|
||||
statusCode: (_result$init = result.init) == null ? void 0 : _result$init.status,
|
||||
headers: (_result$init2 = result.init) != null && _result$init2.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
|
||||
// Convert thrown data() to ErrorResponse instances
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(((_result$init3 = result.init) == null ? void 0 : _result$init3.status) || 500, undefined, result.data),
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined,
|
||||
headers: (_result$init4 = result.init) != null && _result$init4.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result,
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined
|
||||
};
|
||||
}
|
||||
if (isDeferredData(result)) {
|
||||
var _result$init5, _result$init6;
|
||||
return {
|
||||
type: ResultType.deferred,
|
||||
deferredData: result,
|
||||
statusCode: (_result$init5 = result.init) == null ? void 0 : _result$init5.status,
|
||||
headers: ((_result$init6 = result.init) == null ? void 0 : _result$init6.headers) && new Headers(result.init.headers)
|
||||
};
|
||||
}
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init7, _result$init8;
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.data,
|
||||
statusCode: (_result$init7 = result.init) == null ? void 0 : _result$init7.status,
|
||||
headers: (_result$init8 = result.init) != null && _result$init8.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result
|
||||
};
|
||||
}
|
||||
|
||||
// Support relative routing in internal redirects
|
||||
function normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, v7_relativeSplatPath) {
|
||||
let location = response.headers.get("Location");
|
||||
invariant(location, "Redirects returned/thrown from loaders/actions must have a Location header");
|
||||
if (!ABSOLUTE_URL_REGEX.test(location)) {
|
||||
let trimmedMatches = matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1);
|
||||
location = normalizeTo(new URL(request.url), trimmedMatches, basename, true, location, v7_relativeSplatPath);
|
||||
response.headers.set("Location", location);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
function normalizeRedirectLocation(location, currentUrl, basename, historyInstance) {
|
||||
// Match Chrome's behavior:
|
||||
// https://github.com/chromium/chromium/blob/216dbeb61db0c667e62082e5f5400a32d6983df3/content/public/common/url_utils.cc#L82
|
||||
let invalidProtocols = ["about:", "blob:", "chrome:", "chrome-untrusted:", "content:", "data:", "devtools:", "file:", "filesystem:",
|
||||
// eslint-disable-next-line no-script-url
|
||||
"javascript:"];
|
||||
if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
// Strip off the protocol+origin for same-origin + same-basename absolute redirects
|
||||
let normalizedLocation = location;
|
||||
let url = normalizedLocation.startsWith("//") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
let isSameBasename = stripBasename(url.pathname, basename) != null;
|
||||
if (url.origin === currentUrl.origin && isSameBasename) {
|
||||
return removeDoubleSlashes(url.pathname) + url.search + url.hash;
|
||||
}
|
||||
}
|
||||
try {
|
||||
let url = historyInstance.createURL(location);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
} catch (e) {}
|
||||
return location;
|
||||
}
|
||||
|
||||
// Utility method for creating the Request instances for loaders/actions during
|
||||
// client-side navigations and fetches. During SSR we will always have a
|
||||
// Request instance from the static handler (query/queryRoute)
|
||||
function createClientSideRequest(history, location, signal, submission) {
|
||||
let url = history.createURL(stripHashFromPath(location)).toString();
|
||||
let init = {
|
||||
signal
|
||||
};
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
let {
|
||||
formMethod,
|
||||
formEncType
|
||||
} = submission;
|
||||
// Didn't think we needed this but it turns out unlike other methods, patch
|
||||
// won't be properly normalized to uppercase and results in a 405 error.
|
||||
// See: https://fetch.spec.whatwg.org/#concept-method
|
||||
init.method = formMethod.toUpperCase();
|
||||
if (formEncType === "application/json") {
|
||||
init.headers = new Headers({
|
||||
"Content-Type": formEncType
|
||||
});
|
||||
init.body = JSON.stringify(submission.json);
|
||||
} else if (formEncType === "text/plain") {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.text;
|
||||
} else if (formEncType === "application/x-www-form-urlencoded" && submission.formData) {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = convertFormDataToSearchParams(submission.formData);
|
||||
} else {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.formData;
|
||||
}
|
||||
}
|
||||
return new Request(url, init);
|
||||
}
|
||||
function convertFormDataToSearchParams(formData) {
|
||||
let searchParams = new URLSearchParams();
|
||||
for (let [key, value] of formData.entries()) {
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
|
||||
searchParams.append(key, typeof value === "string" ? value : value.name);
|
||||
}
|
||||
return searchParams;
|
||||
}
|
||||
function convertSearchParamsToFormData(searchParams) {
|
||||
let formData = new FormData();
|
||||
for (let [key, value] of searchParams.entries()) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
function processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling) {
|
||||
// Fill in loaderData/errors from our loaders
|
||||
let loaderData = {};
|
||||
let errors = null;
|
||||
let statusCode;
|
||||
let foundError = false;
|
||||
let loaderHeaders = {};
|
||||
let pendingError = pendingActionResult && isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : undefined;
|
||||
|
||||
// Process loader results into state.loaderData/state.errors
|
||||
matches.forEach(match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let id = match.route.id;
|
||||
let result = results[id];
|
||||
invariant(!isRedirectResult(result), "Cannot handle redirect results in processLoaderData");
|
||||
if (isErrorResult(result)) {
|
||||
let error = result.error;
|
||||
// If we have a pending action error, we report it at the highest-route
|
||||
// that throws a loader error, and then clear it out to indicate that
|
||||
// it was consumed
|
||||
if (pendingError !== undefined) {
|
||||
error = pendingError;
|
||||
pendingError = undefined;
|
||||
}
|
||||
errors = errors || {};
|
||||
if (skipLoaderErrorBubbling) {
|
||||
errors[id] = error;
|
||||
} else {
|
||||
// Look upwards from the matched route for the closest ancestor error
|
||||
// boundary, defaulting to the root match. Prefer higher error values
|
||||
// if lower errors bubble to the same boundary
|
||||
let boundaryMatch = findNearestBoundary(matches, id);
|
||||
if (errors[boundaryMatch.route.id] == null) {
|
||||
errors[boundaryMatch.route.id] = error;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear our any prior loaderData for the throwing route
|
||||
loaderData[id] = undefined;
|
||||
|
||||
// Once we find our first (highest) error, we set the status code and
|
||||
// prevent deeper status codes from overriding
|
||||
if (!foundError) {
|
||||
foundError = true;
|
||||
statusCode = isRouteErrorResponse(result.error) ? result.error.status : 500;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
if (isDeferredResult(result)) {
|
||||
activeDeferreds.set(id, result.deferredData);
|
||||
loaderData[id] = result.deferredData.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode != null && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
loaderData[id] = result.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we didn't consume the pending action error (i.e., all loaders
|
||||
// resolved), then consume it here. Also clear out any loaderData for the
|
||||
// throwing route
|
||||
if (pendingError !== undefined && pendingActionResult) {
|
||||
errors = {
|
||||
[pendingActionResult[0]]: pendingError
|
||||
};
|
||||
loaderData[pendingActionResult[0]] = undefined;
|
||||
}
|
||||
return {
|
||||
loaderData,
|
||||
errors,
|
||||
statusCode: statusCode || 200,
|
||||
loaderHeaders
|
||||
};
|
||||
}
|
||||
function processLoaderData(state, matches, results, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds) {
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, false // This method is only called client side so we always want to bubble
|
||||
);
|
||||
|
||||
// Process results from our revalidating fetchers
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let {
|
||||
key,
|
||||
match,
|
||||
controller
|
||||
} = rf;
|
||||
let result = fetcherResults[key];
|
||||
invariant(result, "Did not find corresponding fetcher result");
|
||||
|
||||
// Process fetcher non-redirect errors
|
||||
if (controller && controller.signal.aborted) {
|
||||
// Nothing to do for aborted fetchers
|
||||
return;
|
||||
} else if (isErrorResult(result)) {
|
||||
let boundaryMatch = findNearestBoundary(state.matches, match == null ? void 0 : match.route.id);
|
||||
if (!(errors && errors[boundaryMatch.route.id])) {
|
||||
errors = _extends({}, errors, {
|
||||
[boundaryMatch.route.id]: result.error
|
||||
});
|
||||
}
|
||||
state.fetchers.delete(key);
|
||||
} else if (isRedirectResult(result)) {
|
||||
// Should never get here, redirects should get processed above, but we
|
||||
// keep this to type narrow to a success result in the else
|
||||
invariant(false, "Unhandled fetcher revalidation redirect");
|
||||
} else if (isDeferredResult(result)) {
|
||||
// Should never get here, deferred data should be awaited for fetchers
|
||||
// in resolveDeferredResults
|
||||
invariant(false, "Unhandled fetcher deferred data");
|
||||
} else {
|
||||
let doneFetcher = getDoneFetcher(result.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
});
|
||||
return {
|
||||
loaderData,
|
||||
errors
|
||||
};
|
||||
}
|
||||
function mergeLoaderData(loaderData, newLoaderData, matches, errors) {
|
||||
let mergedLoaderData = _extends({}, newLoaderData);
|
||||
for (let match of matches) {
|
||||
let id = match.route.id;
|
||||
if (newLoaderData.hasOwnProperty(id)) {
|
||||
if (newLoaderData[id] !== undefined) {
|
||||
mergedLoaderData[id] = newLoaderData[id];
|
||||
}
|
||||
} else if (loaderData[id] !== undefined && match.route.loader) {
|
||||
// Preserve existing keys not included in newLoaderData and where a loader
|
||||
// wasn't removed by HMR
|
||||
mergedLoaderData[id] = loaderData[id];
|
||||
}
|
||||
if (errors && errors.hasOwnProperty(id)) {
|
||||
// Don't keep any loader data below the boundary
|
||||
break;
|
||||
}
|
||||
}
|
||||
return mergedLoaderData;
|
||||
}
|
||||
function getActionDataForCommit(pendingActionResult) {
|
||||
if (!pendingActionResult) {
|
||||
return {};
|
||||
}
|
||||
return isErrorResult(pendingActionResult[1]) ? {
|
||||
// Clear out prior actionData on errors
|
||||
actionData: {}
|
||||
} : {
|
||||
actionData: {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Find the nearest error boundary, looking upwards from the leaf route (or the
|
||||
// route specified by routeId) for the closest ancestor error boundary,
|
||||
// defaulting to the root match
|
||||
function findNearestBoundary(matches, routeId) {
|
||||
let eligibleMatches = routeId ? matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1) : [...matches];
|
||||
return eligibleMatches.reverse().find(m => m.route.hasErrorBoundary === true) || matches[0];
|
||||
}
|
||||
function getShortCircuitMatches(routes) {
|
||||
// Prefer a root layout route if present, otherwise shim in a route object
|
||||
let route = routes.length === 1 ? routes[0] : routes.find(r => r.index || !r.path || r.path === "/") || {
|
||||
id: "__shim-error-route__"
|
||||
};
|
||||
return {
|
||||
matches: [{
|
||||
params: {},
|
||||
pathname: "",
|
||||
pathnameBase: "",
|
||||
route
|
||||
}],
|
||||
route
|
||||
};
|
||||
}
|
||||
function getInternalRouterError(status, _temp5) {
|
||||
let {
|
||||
pathname,
|
||||
routeId,
|
||||
method,
|
||||
type,
|
||||
message
|
||||
} = _temp5 === void 0 ? {} : _temp5;
|
||||
let statusText = "Unknown Server Error";
|
||||
let errorMessage = "Unknown @remix-run/router error";
|
||||
if (status === 400) {
|
||||
statusText = "Bad Request";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method + " request to \"" + pathname + "\" but " + ("did not provide a `loader` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (type === "defer-action") {
|
||||
errorMessage = "defer() is not supported in actions";
|
||||
} else if (type === "invalid-body") {
|
||||
errorMessage = "Unable to encode submission body";
|
||||
}
|
||||
} else if (status === 403) {
|
||||
statusText = "Forbidden";
|
||||
errorMessage = "Route \"" + routeId + "\" does not match URL \"" + pathname + "\"";
|
||||
} else if (status === 404) {
|
||||
statusText = "Not Found";
|
||||
errorMessage = "No route matches URL \"" + pathname + "\"";
|
||||
} else if (status === 405) {
|
||||
statusText = "Method Not Allowed";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method.toUpperCase() + " request to \"" + pathname + "\" but " + ("did not provide an `action` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (method) {
|
||||
errorMessage = "Invalid request method \"" + method.toUpperCase() + "\"";
|
||||
}
|
||||
}
|
||||
return new ErrorResponseImpl(status || 500, statusText, new Error(errorMessage), true);
|
||||
}
|
||||
|
||||
// Find any returned redirect errors, starting from the lowest match
|
||||
function findRedirect(results) {
|
||||
let entries = Object.entries(results);
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
let [key, result] = entries[i];
|
||||
if (isRedirectResult(result)) {
|
||||
return {
|
||||
key,
|
||||
result
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
function stripHashFromPath(path) {
|
||||
let parsedPath = typeof path === "string" ? parsePath(path) : path;
|
||||
return createPath(_extends({}, parsedPath, {
|
||||
hash: ""
|
||||
}));
|
||||
}
|
||||
function isHashChangeOnly(a, b) {
|
||||
if (a.pathname !== b.pathname || a.search !== b.search) {
|
||||
return false;
|
||||
}
|
||||
if (a.hash === "") {
|
||||
// /page -> /page#hash
|
||||
return b.hash !== "";
|
||||
} else if (a.hash === b.hash) {
|
||||
// /page#hash -> /page#hash
|
||||
return true;
|
||||
} else if (b.hash !== "") {
|
||||
// /page#hash -> /page#other
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the hash is removed the browser will re-perform a request to the server
|
||||
// /page#hash -> /page
|
||||
return false;
|
||||
}
|
||||
function isDataStrategyResult(result) {
|
||||
return result != null && typeof result === "object" && "type" in result && "result" in result && (result.type === ResultType.data || result.type === ResultType.error);
|
||||
}
|
||||
function isRedirectDataStrategyResultResult(result) {
|
||||
return isResponse(result.result) && redirectStatusCodes.has(result.result.status);
|
||||
}
|
||||
function isDeferredResult(result) {
|
||||
return result.type === ResultType.deferred;
|
||||
}
|
||||
function isErrorResult(result) {
|
||||
return result.type === ResultType.error;
|
||||
}
|
||||
function isRedirectResult(result) {
|
||||
return (result && result.type) === ResultType.redirect;
|
||||
}
|
||||
function isDataWithResponseInit(value) {
|
||||
return typeof value === "object" && value != null && "type" in value && "data" in value && "init" in value && value.type === "DataWithResponseInit";
|
||||
}
|
||||
function isDeferredData(value) {
|
||||
let deferred = value;
|
||||
return deferred && typeof deferred === "object" && typeof deferred.data === "object" && typeof deferred.subscribe === "function" && typeof deferred.cancel === "function" && typeof deferred.resolveData === "function";
|
||||
}
|
||||
function isResponse(value) {
|
||||
return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
|
||||
}
|
||||
function isRedirectResponse(result) {
|
||||
if (!isResponse(result)) {
|
||||
return false;
|
||||
}
|
||||
let status = result.status;
|
||||
let location = result.headers.get("Location");
|
||||
return status >= 300 && status <= 399 && location != null;
|
||||
}
|
||||
function isValidMethod(method) {
|
||||
return validRequestMethods.has(method.toLowerCase());
|
||||
}
|
||||
function isMutationMethod(method) {
|
||||
return validMutationMethods.has(method.toLowerCase());
|
||||
}
|
||||
async function resolveNavigationDeferredResults(matches, results, signal, currentMatches, currentLoaderData) {
|
||||
let entries = Object.entries(results);
|
||||
for (let index = 0; index < entries.length; index++) {
|
||||
let [routeId, result] = entries[index];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
let currentMatch = currentMatches.find(m => m.route.id === match.route.id);
|
||||
let isRevalidatingLoader = currentMatch != null && !isNewRouteInstance(currentMatch, match) && (currentLoaderData && currentLoaderData[match.route.id]) !== undefined;
|
||||
if (isDeferredResult(result) && isRevalidatingLoader) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
await resolveDeferredData(result, signal, false).then(result => {
|
||||
if (result) {
|
||||
results[routeId] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveFetcherDeferredResults(matches, results, revalidatingFetchers) {
|
||||
for (let index = 0; index < revalidatingFetchers.length; index++) {
|
||||
let {
|
||||
key,
|
||||
routeId,
|
||||
controller
|
||||
} = revalidatingFetchers[index];
|
||||
let result = results[key];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
invariant(controller, "Expected an AbortController for revalidating fetcher deferred result");
|
||||
await resolveDeferredData(result, controller.signal, true).then(result => {
|
||||
if (result) {
|
||||
results[key] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveDeferredData(result, signal, unwrap) {
|
||||
if (unwrap === void 0) {
|
||||
unwrap = false;
|
||||
}
|
||||
let aborted = await result.deferredData.resolveData(signal);
|
||||
if (aborted) {
|
||||
return;
|
||||
}
|
||||
if (unwrap) {
|
||||
try {
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.unwrappedData
|
||||
};
|
||||
} catch (e) {
|
||||
// Handle any TrackedPromise._error values encountered while unwrapping
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.data
|
||||
};
|
||||
}
|
||||
function hasNakedIndexQuery(search) {
|
||||
return new URLSearchParams(search).getAll("index").some(v => v === "");
|
||||
}
|
||||
function getTargetMatch(matches, location) {
|
||||
let search = typeof location === "string" ? parsePath(location).search : location.search;
|
||||
if (matches[matches.length - 1].route.index && hasNakedIndexQuery(search || "")) {
|
||||
// Return the leaf index route when index is present
|
||||
return matches[matches.length - 1];
|
||||
}
|
||||
// Otherwise grab the deepest "path contributing" match (ignoring index and
|
||||
// pathless layout routes)
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
return pathMatches[pathMatches.length - 1];
|
||||
}
|
||||
function getSubmissionFromNavigation(navigation) {
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
text,
|
||||
formData,
|
||||
json
|
||||
} = navigation;
|
||||
if (!formMethod || !formAction || !formEncType) {
|
||||
return;
|
||||
}
|
||||
if (text != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
};
|
||||
} else if (formData != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
} else if (json !== undefined) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
function getLoadingNavigation(location, submission) {
|
||||
if (submission) {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
} else {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
}
|
||||
function getSubmittingNavigation(location, submission) {
|
||||
let navigation = {
|
||||
state: "submitting",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
function getLoadingFetcher(submission, data) {
|
||||
if (submission) {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
} else {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
}
|
||||
function getSubmittingFetcher(submission, existingFetcher) {
|
||||
let fetcher = {
|
||||
state: "submitting",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data: existingFetcher ? existingFetcher.data : undefined
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function getDoneFetcher(data) {
|
||||
let fetcher = {
|
||||
state: "idle",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function restoreAppliedTransitions(_window, transitions) {
|
||||
try {
|
||||
let sessionPositions = _window.sessionStorage.getItem(TRANSITIONS_STORAGE_KEY);
|
||||
if (sessionPositions) {
|
||||
let json = JSON.parse(sessionPositions);
|
||||
for (let [k, v] of Object.entries(json || {})) {
|
||||
if (v && Array.isArray(v)) {
|
||||
transitions.set(k, new Set(v || []));
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// no-op, use default empty object
|
||||
}
|
||||
}
|
||||
function persistAppliedTransitions(_window, transitions) {
|
||||
if (transitions.size > 0) {
|
||||
let json = {};
|
||||
for (let [k, v] of transitions) {
|
||||
json[k] = [...v];
|
||||
}
|
||||
try {
|
||||
_window.sessionStorage.setItem(TRANSITIONS_STORAGE_KEY, JSON.stringify(json));
|
||||
} catch (error) {
|
||||
warning(false, "Failed to save applied view transitions in sessionStorage (" + error + ").");
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
exports.AbortedDeferredError = AbortedDeferredError;
|
||||
exports.Action = Action;
|
||||
exports.IDLE_BLOCKER = IDLE_BLOCKER;
|
||||
exports.IDLE_FETCHER = IDLE_FETCHER;
|
||||
exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
|
||||
exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;
|
||||
exports.UNSAFE_DeferredData = DeferredData;
|
||||
exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;
|
||||
exports.UNSAFE_convertRouteMatchToUiMatch = convertRouteMatchToUiMatch;
|
||||
exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
|
||||
exports.UNSAFE_decodePath = decodePath;
|
||||
exports.UNSAFE_getResolveToMatches = getResolveToMatches;
|
||||
exports.UNSAFE_invariant = invariant;
|
||||
exports.UNSAFE_warning = warning;
|
||||
exports.createBrowserHistory = createBrowserHistory;
|
||||
exports.createHashHistory = createHashHistory;
|
||||
exports.createMemoryHistory = createMemoryHistory;
|
||||
exports.createPath = createPath;
|
||||
exports.createRouter = createRouter;
|
||||
exports.createStaticHandler = createStaticHandler;
|
||||
exports.data = data;
|
||||
exports.defer = defer;
|
||||
exports.generatePath = generatePath;
|
||||
exports.getStaticContextFromError = getStaticContextFromError;
|
||||
exports.getToPathname = getToPathname;
|
||||
exports.isDataWithResponseInit = isDataWithResponseInit;
|
||||
exports.isDeferredData = isDeferredData;
|
||||
exports.isRouteErrorResponse = isRouteErrorResponse;
|
||||
exports.joinPaths = joinPaths;
|
||||
exports.json = json;
|
||||
exports.matchPath = matchPath;
|
||||
exports.matchRoutes = matchRoutes;
|
||||
exports.normalizePathname = normalizePathname;
|
||||
exports.parsePath = parsePath;
|
||||
exports.redirect = redirect;
|
||||
exports.redirectDocument = redirectDocument;
|
||||
exports.replace = replace;
|
||||
exports.resolvePath = resolvePath;
|
||||
exports.resolveTo = resolveTo;
|
||||
exports.stripBasename = stripBasename;
|
||||
//# sourceMappingURL=router.cjs.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+525
@@ -0,0 +1,525 @@
|
||||
import type { History, Location, Path, To } from "./history";
|
||||
import { Action as HistoryAction } from "./history";
|
||||
import type { AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticRouteObject, DataStrategyFunction, DeferredData, DetectErrorBoundaryFunction, FormEncType, HTMLFormMethod, MapRoutePropertiesFunction, RouteData, Submission, UIMatch, AgnosticPatchRoutesOnNavigationFunction, DataWithResponseInit } from "./utils";
|
||||
/**
|
||||
* A Router instance manages all navigation and data loading/mutations
|
||||
*/
|
||||
export interface Router {
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the basename for the router
|
||||
*/
|
||||
get basename(): RouterInit["basename"];
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the future config for the router
|
||||
*/
|
||||
get future(): FutureConfig;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the current state of the router
|
||||
*/
|
||||
get state(): RouterState;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the routes for this router instance
|
||||
*/
|
||||
get routes(): AgnosticDataRouteObject[];
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the window associated with the router
|
||||
*/
|
||||
get window(): RouterInit["window"];
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Initialize the router, including adding history listeners and kicking off
|
||||
* initial data fetches. Returns a function to cleanup listeners and abort
|
||||
* any in-progress loads
|
||||
*/
|
||||
initialize(): Router;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Subscribe to router.state updates
|
||||
*
|
||||
* @param fn function to call with the new state
|
||||
*/
|
||||
subscribe(fn: RouterSubscriber): () => void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Enable scroll restoration behavior in the router
|
||||
*
|
||||
* @param savedScrollPositions Object that will manage positions, in case
|
||||
* it's being restored from sessionStorage
|
||||
* @param getScrollPosition Function to get the active Y scroll position
|
||||
* @param getKey Function to get the key to use for restoration
|
||||
*/
|
||||
enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Navigate forward/backward in the history stack
|
||||
* @param to Delta to move in the history stack
|
||||
*/
|
||||
navigate(to: number): Promise<void>;
|
||||
/**
|
||||
* Navigate to the given path
|
||||
* @param to Path to navigate to
|
||||
* @param opts Navigation options (method, submission, etc.)
|
||||
*/
|
||||
navigate(to: To | null, opts?: RouterNavigateOptions): Promise<void>;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Trigger a fetcher load/submission
|
||||
*
|
||||
* @param key Fetcher key
|
||||
* @param routeId Route that owns the fetcher
|
||||
* @param href href to fetch
|
||||
* @param opts Fetcher options, (method, submission, etc.)
|
||||
*/
|
||||
fetch(key: string, routeId: string, href: string | null, opts?: RouterFetchOptions): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Trigger a revalidation of all current route loaders and fetcher loads
|
||||
*/
|
||||
revalidate(): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Utility function to create an href for the given location
|
||||
* @param location
|
||||
*/
|
||||
createHref(location: Location | URL): string;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Utility function to URL encode a destination path according to the internal
|
||||
* history implementation
|
||||
* @param to
|
||||
*/
|
||||
encodeLocation(to: To): Path;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Get/create a fetcher for the given key
|
||||
* @param key
|
||||
*/
|
||||
getFetcher<TData = any>(key: string): Fetcher<TData>;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Delete the fetcher for a given key
|
||||
* @param key
|
||||
*/
|
||||
deleteFetcher(key: string): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Cleanup listeners and abort any in-progress loads
|
||||
*/
|
||||
dispose(): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Get a navigation blocker
|
||||
* @param key The identifier for the blocker
|
||||
* @param fn The blocker function implementation
|
||||
*/
|
||||
getBlocker(key: string, fn: BlockerFunction): Blocker;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Delete a navigation blocker
|
||||
* @param key The identifier for the blocker
|
||||
*/
|
||||
deleteBlocker(key: string): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE DO NOT USE
|
||||
*
|
||||
* Patch additional children routes into an existing parent route
|
||||
* @param routeId The parent route id or a callback function accepting `patch`
|
||||
* to perform batch patching
|
||||
* @param children The additional children routes
|
||||
*/
|
||||
patchRoutes(routeId: string | null, children: AgnosticRouteObject[]): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* HMR needs to pass in-flight route updates to React Router
|
||||
* TODO: Replace this with granular route update APIs (addRoute, updateRoute, deleteRoute)
|
||||
*/
|
||||
_internalSetRoutes(routes: AgnosticRouteObject[]): void;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Internal fetch AbortControllers accessed by unit tests
|
||||
*/
|
||||
_internalFetchControllers: Map<string, AbortController>;
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Internal pending DeferredData instances accessed by unit tests
|
||||
*/
|
||||
_internalActiveDeferreds: Map<string, DeferredData>;
|
||||
}
|
||||
/**
|
||||
* State maintained internally by the router. During a navigation, all states
|
||||
* reflect the the "old" location unless otherwise noted.
|
||||
*/
|
||||
export interface RouterState {
|
||||
/**
|
||||
* The action of the most recent navigation
|
||||
*/
|
||||
historyAction: HistoryAction;
|
||||
/**
|
||||
* The current location reflected by the router
|
||||
*/
|
||||
location: Location;
|
||||
/**
|
||||
* The current set of route matches
|
||||
*/
|
||||
matches: AgnosticDataRouteMatch[];
|
||||
/**
|
||||
* Tracks whether we've completed our initial data load
|
||||
*/
|
||||
initialized: boolean;
|
||||
/**
|
||||
* Current scroll position we should start at for a new view
|
||||
* - number -> scroll position to restore to
|
||||
* - false -> do not restore scroll at all (used during submissions)
|
||||
* - null -> don't have a saved position, scroll to hash or top of page
|
||||
*/
|
||||
restoreScrollPosition: number | false | null;
|
||||
/**
|
||||
* Indicate whether this navigation should skip resetting the scroll position
|
||||
* if we are unable to restore the scroll position
|
||||
*/
|
||||
preventScrollReset: boolean;
|
||||
/**
|
||||
* Tracks the state of the current navigation
|
||||
*/
|
||||
navigation: Navigation;
|
||||
/**
|
||||
* Tracks any in-progress revalidations
|
||||
*/
|
||||
revalidation: RevalidationState;
|
||||
/**
|
||||
* Data from the loaders for the current matches
|
||||
*/
|
||||
loaderData: RouteData;
|
||||
/**
|
||||
* Data from the action for the current matches
|
||||
*/
|
||||
actionData: RouteData | null;
|
||||
/**
|
||||
* Errors caught from loaders for the current matches
|
||||
*/
|
||||
errors: RouteData | null;
|
||||
/**
|
||||
* Map of current fetchers
|
||||
*/
|
||||
fetchers: Map<string, Fetcher>;
|
||||
/**
|
||||
* Map of current blockers
|
||||
*/
|
||||
blockers: Map<string, Blocker>;
|
||||
}
|
||||
/**
|
||||
* Data that can be passed into hydrate a Router from SSR
|
||||
*/
|
||||
export type HydrationState = Partial<Pick<RouterState, "loaderData" | "actionData" | "errors">>;
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
export interface FutureConfig {
|
||||
v7_fetcherPersist: boolean;
|
||||
v7_normalizeFormMethod: boolean;
|
||||
v7_partialHydration: boolean;
|
||||
v7_prependBasename: boolean;
|
||||
v7_relativeSplatPath: boolean;
|
||||
v7_skipActionErrorRevalidation: boolean;
|
||||
}
|
||||
/**
|
||||
* Initialization options for createRouter
|
||||
*/
|
||||
export interface RouterInit {
|
||||
routes: AgnosticRouteObject[];
|
||||
history: History;
|
||||
basename?: string;
|
||||
/**
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
detectErrorBoundary?: DetectErrorBoundaryFunction;
|
||||
mapRouteProperties?: MapRoutePropertiesFunction;
|
||||
future?: Partial<FutureConfig>;
|
||||
hydrationData?: HydrationState;
|
||||
window?: Window;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
patchRoutesOnNavigation?: AgnosticPatchRoutesOnNavigationFunction;
|
||||
}
|
||||
/**
|
||||
* State returned from a server-side query() call
|
||||
*/
|
||||
export interface StaticHandlerContext {
|
||||
basename: Router["basename"];
|
||||
location: RouterState["location"];
|
||||
matches: RouterState["matches"];
|
||||
loaderData: RouterState["loaderData"];
|
||||
actionData: RouterState["actionData"];
|
||||
errors: RouterState["errors"];
|
||||
statusCode: number;
|
||||
loaderHeaders: Record<string, Headers>;
|
||||
actionHeaders: Record<string, Headers>;
|
||||
activeDeferreds: Record<string, DeferredData> | null;
|
||||
_deepestRenderedBoundaryId?: string | null;
|
||||
}
|
||||
/**
|
||||
* A StaticHandler instance manages a singular SSR navigation/fetch event
|
||||
*/
|
||||
export interface StaticHandler {
|
||||
dataRoutes: AgnosticDataRouteObject[];
|
||||
query(request: Request, opts?: {
|
||||
requestContext?: unknown;
|
||||
skipLoaderErrorBubbling?: boolean;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
}): Promise<StaticHandlerContext | Response>;
|
||||
queryRoute(request: Request, opts?: {
|
||||
routeId?: string;
|
||||
requestContext?: unknown;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
}): Promise<any>;
|
||||
}
|
||||
type ViewTransitionOpts = {
|
||||
currentLocation: Location;
|
||||
nextLocation: Location;
|
||||
};
|
||||
/**
|
||||
* Subscriber function signature for changes to router state
|
||||
*/
|
||||
export interface RouterSubscriber {
|
||||
(state: RouterState, opts: {
|
||||
deletedFetchers: string[];
|
||||
viewTransitionOpts?: ViewTransitionOpts;
|
||||
flushSync: boolean;
|
||||
}): void;
|
||||
}
|
||||
/**
|
||||
* Function signature for determining the key to be used in scroll restoration
|
||||
* for a given location
|
||||
*/
|
||||
export interface GetScrollRestorationKeyFunction {
|
||||
(location: Location, matches: UIMatch[]): string | null;
|
||||
}
|
||||
/**
|
||||
* Function signature for determining the current scroll position
|
||||
*/
|
||||
export interface GetScrollPositionFunction {
|
||||
(): number;
|
||||
}
|
||||
export type RelativeRoutingType = "route" | "path";
|
||||
type BaseNavigateOrFetchOptions = {
|
||||
preventScrollReset?: boolean;
|
||||
relative?: RelativeRoutingType;
|
||||
flushSync?: boolean;
|
||||
};
|
||||
type BaseNavigateOptions = BaseNavigateOrFetchOptions & {
|
||||
replace?: boolean;
|
||||
state?: any;
|
||||
fromRouteId?: string;
|
||||
viewTransition?: boolean;
|
||||
};
|
||||
type BaseSubmissionOptions = {
|
||||
formMethod?: HTMLFormMethod;
|
||||
formEncType?: FormEncType;
|
||||
} & ({
|
||||
formData: FormData;
|
||||
body?: undefined;
|
||||
} | {
|
||||
formData?: undefined;
|
||||
body: any;
|
||||
});
|
||||
/**
|
||||
* Options for a navigate() call for a normal (non-submission) navigation
|
||||
*/
|
||||
type LinkNavigateOptions = BaseNavigateOptions;
|
||||
/**
|
||||
* Options for a navigate() call for a submission navigation
|
||||
*/
|
||||
type SubmissionNavigateOptions = BaseNavigateOptions & BaseSubmissionOptions;
|
||||
/**
|
||||
* Options to pass to navigate() for a navigation
|
||||
*/
|
||||
export type RouterNavigateOptions = LinkNavigateOptions | SubmissionNavigateOptions;
|
||||
/**
|
||||
* Options for a fetch() load
|
||||
*/
|
||||
type LoadFetchOptions = BaseNavigateOrFetchOptions;
|
||||
/**
|
||||
* Options for a fetch() submission
|
||||
*/
|
||||
type SubmitFetchOptions = BaseNavigateOrFetchOptions & BaseSubmissionOptions;
|
||||
/**
|
||||
* Options to pass to fetch()
|
||||
*/
|
||||
export type RouterFetchOptions = LoadFetchOptions | SubmitFetchOptions;
|
||||
/**
|
||||
* Potential states for state.navigation
|
||||
*/
|
||||
export type NavigationStates = {
|
||||
Idle: {
|
||||
state: "idle";
|
||||
location: undefined;
|
||||
formMethod: undefined;
|
||||
formAction: undefined;
|
||||
formEncType: undefined;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
text: undefined;
|
||||
};
|
||||
Loading: {
|
||||
state: "loading";
|
||||
location: Location;
|
||||
formMethod: Submission["formMethod"] | undefined;
|
||||
formAction: Submission["formAction"] | undefined;
|
||||
formEncType: Submission["formEncType"] | undefined;
|
||||
formData: Submission["formData"] | undefined;
|
||||
json: Submission["json"] | undefined;
|
||||
text: Submission["text"] | undefined;
|
||||
};
|
||||
Submitting: {
|
||||
state: "submitting";
|
||||
location: Location;
|
||||
formMethod: Submission["formMethod"];
|
||||
formAction: Submission["formAction"];
|
||||
formEncType: Submission["formEncType"];
|
||||
formData: Submission["formData"];
|
||||
json: Submission["json"];
|
||||
text: Submission["text"];
|
||||
};
|
||||
};
|
||||
export type Navigation = NavigationStates[keyof NavigationStates];
|
||||
export type RevalidationState = "idle" | "loading";
|
||||
/**
|
||||
* Potential states for fetchers
|
||||
*/
|
||||
type FetcherStates<TData = any> = {
|
||||
Idle: {
|
||||
state: "idle";
|
||||
formMethod: undefined;
|
||||
formAction: undefined;
|
||||
formEncType: undefined;
|
||||
text: undefined;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
data: TData | undefined;
|
||||
};
|
||||
Loading: {
|
||||
state: "loading";
|
||||
formMethod: Submission["formMethod"] | undefined;
|
||||
formAction: Submission["formAction"] | undefined;
|
||||
formEncType: Submission["formEncType"] | undefined;
|
||||
text: Submission["text"] | undefined;
|
||||
formData: Submission["formData"] | undefined;
|
||||
json: Submission["json"] | undefined;
|
||||
data: TData | undefined;
|
||||
};
|
||||
Submitting: {
|
||||
state: "submitting";
|
||||
formMethod: Submission["formMethod"];
|
||||
formAction: Submission["formAction"];
|
||||
formEncType: Submission["formEncType"];
|
||||
text: Submission["text"];
|
||||
formData: Submission["formData"];
|
||||
json: Submission["json"];
|
||||
data: TData | undefined;
|
||||
};
|
||||
};
|
||||
export type Fetcher<TData = any> = FetcherStates<TData>[keyof FetcherStates<TData>];
|
||||
interface BlockerBlocked {
|
||||
state: "blocked";
|
||||
reset(): void;
|
||||
proceed(): void;
|
||||
location: Location;
|
||||
}
|
||||
interface BlockerUnblocked {
|
||||
state: "unblocked";
|
||||
reset: undefined;
|
||||
proceed: undefined;
|
||||
location: undefined;
|
||||
}
|
||||
interface BlockerProceeding {
|
||||
state: "proceeding";
|
||||
reset: undefined;
|
||||
proceed: undefined;
|
||||
location: Location;
|
||||
}
|
||||
export type Blocker = BlockerUnblocked | BlockerBlocked | BlockerProceeding;
|
||||
export type BlockerFunction = (args: {
|
||||
currentLocation: Location;
|
||||
nextLocation: Location;
|
||||
historyAction: HistoryAction;
|
||||
}) => boolean;
|
||||
export declare const IDLE_NAVIGATION: NavigationStates["Idle"];
|
||||
export declare const IDLE_FETCHER: FetcherStates["Idle"];
|
||||
export declare const IDLE_BLOCKER: BlockerUnblocked;
|
||||
/**
|
||||
* Create a router and listen to history POP navigations
|
||||
*/
|
||||
export declare function createRouter(init: RouterInit): Router;
|
||||
export declare const UNSAFE_DEFERRED_SYMBOL: unique symbol;
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
export interface StaticHandlerFutureConfig {
|
||||
v7_relativeSplatPath: boolean;
|
||||
v7_throwAbortReason: boolean;
|
||||
}
|
||||
export interface CreateStaticHandlerOptions {
|
||||
basename?: string;
|
||||
/**
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
detectErrorBoundary?: DetectErrorBoundaryFunction;
|
||||
mapRouteProperties?: MapRoutePropertiesFunction;
|
||||
future?: Partial<StaticHandlerFutureConfig>;
|
||||
}
|
||||
export declare function createStaticHandler(routes: AgnosticRouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
|
||||
/**
|
||||
* Given an existing StaticHandlerContext and an error thrown at render time,
|
||||
* provide an updated StaticHandlerContext suitable for a second SSR render
|
||||
*/
|
||||
export declare function getStaticContextFromError(routes: AgnosticDataRouteObject[], context: StaticHandlerContext, error: any): StaticHandlerContext;
|
||||
export declare function isDataWithResponseInit(value: any): value is DataWithResponseInit<unknown>;
|
||||
export declare function isDeferredData(value: any): value is DeferredData;
|
||||
export {};
|
||||
+5068
@@ -0,0 +1,5068 @@
|
||||
/**
|
||||
* @remix-run/router v1.23.3
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
function _extends() {
|
||||
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
||||
for (var e = 1; e < arguments.length; e++) {
|
||||
var t = arguments[e];
|
||||
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
||||
}
|
||||
return n;
|
||||
}, _extends.apply(null, arguments);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
/**
|
||||
* Actions represent the type of change to a location value.
|
||||
*/
|
||||
var Action;
|
||||
(function (Action) {
|
||||
/**
|
||||
* A POP indicates a change to an arbitrary index in the history stack, such
|
||||
* as a back or forward navigation. It does not describe the direction of the
|
||||
* navigation, only that the current index changed.
|
||||
*
|
||||
* Note: This is the default action for newly created history objects.
|
||||
*/
|
||||
Action["Pop"] = "POP";
|
||||
/**
|
||||
* A PUSH indicates a new entry being added to the history stack, such as when
|
||||
* a link is clicked and a new page loads. When this happens, all subsequent
|
||||
* entries in the stack are lost.
|
||||
*/
|
||||
Action["Push"] = "PUSH";
|
||||
/**
|
||||
* A REPLACE indicates the entry at the current index in the history stack
|
||||
* being replaced by a new one.
|
||||
*/
|
||||
Action["Replace"] = "REPLACE";
|
||||
})(Action || (Action = {}));
|
||||
const PopStateEventType = "popstate";
|
||||
/**
|
||||
* Memory history stores the current location in memory. It is designed for use
|
||||
* in stateful non-browser environments like tests and React Native.
|
||||
*/
|
||||
function createMemoryHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
initialEntries = ["/"],
|
||||
initialIndex,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let entries; // Declare so we can access from createMemoryLocation
|
||||
entries = initialEntries.map((entry, index) => createMemoryLocation(entry, typeof entry === "string" ? null : entry.state, index === 0 ? "default" : undefined));
|
||||
let index = clampIndex(initialIndex == null ? entries.length - 1 : initialIndex);
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
function clampIndex(n) {
|
||||
return Math.min(Math.max(n, 0), entries.length - 1);
|
||||
}
|
||||
function getCurrentLocation() {
|
||||
return entries[index];
|
||||
}
|
||||
function createMemoryLocation(to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = createLocation(entries ? getCurrentLocation().pathname : "/", to, state, key);
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in memory history: " + JSON.stringify(to));
|
||||
return location;
|
||||
}
|
||||
function createHref(to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
let history = {
|
||||
get index() {
|
||||
return index;
|
||||
},
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getCurrentLocation();
|
||||
},
|
||||
createHref,
|
||||
createURL(to) {
|
||||
return new URL(createHref(to), "http://localhost");
|
||||
},
|
||||
encodeLocation(to) {
|
||||
let path = typeof to === "string" ? parsePath(to) : to;
|
||||
return {
|
||||
pathname: path.pathname || "",
|
||||
search: path.search || "",
|
||||
hash: path.hash || ""
|
||||
};
|
||||
},
|
||||
push(to, state) {
|
||||
action = Action.Push;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
index += 1;
|
||||
entries.splice(index, entries.length, nextLocation);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
entries[index] = nextLocation;
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
go(delta) {
|
||||
action = Action.Pop;
|
||||
let nextIndex = clampIndex(index + delta);
|
||||
let nextLocation = entries[nextIndex];
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta
|
||||
});
|
||||
}
|
||||
},
|
||||
listen(fn) {
|
||||
listener = fn;
|
||||
return () => {
|
||||
listener = null;
|
||||
};
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
/**
|
||||
* Browser history stores the location in regular URLs. This is the standard for
|
||||
* most web apps, but it requires some configuration on the server to ensure you
|
||||
* serve the same app at multiple URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
||||
*/
|
||||
function createBrowserHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createBrowserLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
} = window.location;
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createBrowserHref(window, to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
return getUrlBasedHistory(createBrowserLocation, createBrowserHref, null, options);
|
||||
}
|
||||
/**
|
||||
* Hash history stores the location in window.location.hash. This makes it ideal
|
||||
* for situations where you don't want to send the location to the server for
|
||||
* some reason, either because you do cannot configure it or the URL space is
|
||||
* reserved for something else.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
||||
*/
|
||||
function createHashHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createHashLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = parsePath(window.location.hash.substr(1));
|
||||
// Hash URL should always have a leading / just like window.location.pathname
|
||||
// does, so if an app ends up at a route like /#something then we add a
|
||||
// leading slash so all of our path-matching behaves the same as if it would
|
||||
// in a browser router. This is particularly important when there exists a
|
||||
// root splat route (<Route path="*">) since that matches internally against
|
||||
// "/*" and we'd expect /#something to 404 in a hash router app.
|
||||
if (!pathname.startsWith("/") && !pathname.startsWith(".")) {
|
||||
pathname = "/" + pathname;
|
||||
}
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createHashHref(window, to) {
|
||||
let base = window.document.querySelector("base");
|
||||
let href = "";
|
||||
if (base && base.getAttribute("href")) {
|
||||
let url = window.location.href;
|
||||
let hashIndex = url.indexOf("#");
|
||||
href = hashIndex === -1 ? url : url.slice(0, hashIndex);
|
||||
}
|
||||
return href + "#" + (typeof to === "string" ? to : createPath(to));
|
||||
}
|
||||
function validateHashLocation(location, to) {
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")");
|
||||
}
|
||||
return getUrlBasedHistory(createHashLocation, createHashHref, validateHashLocation, options);
|
||||
}
|
||||
function invariant(value, message) {
|
||||
if (value === false || value === null || typeof value === "undefined") {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
function warning(cond, message) {
|
||||
if (!cond) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== "undefined") console.warn(message);
|
||||
try {
|
||||
// Welcome to debugging history!
|
||||
//
|
||||
// This error is thrown as a convenience, so you can more easily
|
||||
// find the source for a warning that appears in the console by
|
||||
// enabling "pause on exceptions" in your JavaScript debugger.
|
||||
throw new Error(message);
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
function createKey() {
|
||||
return Math.random().toString(36).substr(2, 8);
|
||||
}
|
||||
/**
|
||||
* For browser-based histories, we combine the state and key into an object
|
||||
*/
|
||||
function getHistoryState(location, index) {
|
||||
return {
|
||||
usr: location.state,
|
||||
key: location.key,
|
||||
idx: index
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Creates a Location object with a unique key from the given Path
|
||||
*/
|
||||
function createLocation(current, to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = _extends({
|
||||
pathname: typeof current === "string" ? current : current.pathname,
|
||||
search: "",
|
||||
hash: ""
|
||||
}, typeof to === "string" ? parsePath(to) : to, {
|
||||
state,
|
||||
// TODO: This could be cleaned up. push/replace should probably just take
|
||||
// full Locations now and avoid the need to run through this flow at all
|
||||
// But that's a pretty big refactor to the current test suite so going to
|
||||
// keep as is for the time being and just let any incoming keys take precedence
|
||||
key: to && to.key || key || createKey()
|
||||
});
|
||||
return location;
|
||||
}
|
||||
/**
|
||||
* Creates a string URL path from the given pathname, search, and hash components.
|
||||
*/
|
||||
function createPath(_ref) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = _ref;
|
||||
if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
|
||||
if (hash && hash !== "#") pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
|
||||
return pathname;
|
||||
}
|
||||
/**
|
||||
* Parses a string URL path into its separate pathname, search, and hash components.
|
||||
*/
|
||||
function parsePath(path) {
|
||||
let parsedPath = {};
|
||||
if (path) {
|
||||
let hashIndex = path.indexOf("#");
|
||||
if (hashIndex >= 0) {
|
||||
parsedPath.hash = path.substr(hashIndex);
|
||||
path = path.substr(0, hashIndex);
|
||||
}
|
||||
let searchIndex = path.indexOf("?");
|
||||
if (searchIndex >= 0) {
|
||||
parsedPath.search = path.substr(searchIndex);
|
||||
path = path.substr(0, searchIndex);
|
||||
}
|
||||
if (path) {
|
||||
parsedPath.pathname = path;
|
||||
}
|
||||
}
|
||||
return parsedPath;
|
||||
}
|
||||
function getUrlBasedHistory(getLocation, createHref, validateLocation, options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
window = document.defaultView,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let globalHistory = window.history;
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
let index = getIndex();
|
||||
// Index should only be null when we initialize. If not, it's because the
|
||||
// user called history.pushState or history.replaceState directly, in which
|
||||
// case we should log a warning as it will result in bugs.
|
||||
if (index == null) {
|
||||
index = 0;
|
||||
globalHistory.replaceState(_extends({}, globalHistory.state, {
|
||||
idx: index
|
||||
}), "");
|
||||
}
|
||||
function getIndex() {
|
||||
let state = globalHistory.state || {
|
||||
idx: null
|
||||
};
|
||||
return state.idx;
|
||||
}
|
||||
function handlePop() {
|
||||
action = Action.Pop;
|
||||
let nextIndex = getIndex();
|
||||
let delta = nextIndex == null ? null : nextIndex - index;
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta
|
||||
});
|
||||
}
|
||||
}
|
||||
function push(to, state) {
|
||||
action = Action.Push;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex() + 1;
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
// try...catch because iOS limits us to 100 pushState calls :/
|
||||
try {
|
||||
globalHistory.pushState(historyState, "", url);
|
||||
} catch (error) {
|
||||
// If the exception is because `state` can't be serialized, let that throw
|
||||
// outwards just like a replace call would so the dev knows the cause
|
||||
// https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps
|
||||
// https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal
|
||||
if (error instanceof DOMException && error.name === "DataCloneError") {
|
||||
throw error;
|
||||
}
|
||||
// They are going to lose state here, but there is no real
|
||||
// way to warn them about it since the page will refresh...
|
||||
window.location.assign(url);
|
||||
}
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
function replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex();
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
globalHistory.replaceState(historyState, "", url);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
function createURL(to) {
|
||||
// window.location.origin is "null" (the literal string value) in Firefox
|
||||
// under certain conditions, notably when serving from a local HTML file
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
|
||||
let base = window.location.origin !== "null" ? window.location.origin : window.location.href;
|
||||
let href = typeof to === "string" ? to : createPath(to);
|
||||
// Treating this as a full URL will strip any trailing spaces so we need to
|
||||
// pre-encode them since they might be part of a matching splat param from
|
||||
// an ancestor route
|
||||
href = href.replace(/ $/, "%20");
|
||||
invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
|
||||
return new URL(href, base);
|
||||
}
|
||||
let history = {
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getLocation(window, globalHistory);
|
||||
},
|
||||
listen(fn) {
|
||||
if (listener) {
|
||||
throw new Error("A history only accepts one active listener");
|
||||
}
|
||||
window.addEventListener(PopStateEventType, handlePop);
|
||||
listener = fn;
|
||||
return () => {
|
||||
window.removeEventListener(PopStateEventType, handlePop);
|
||||
listener = null;
|
||||
};
|
||||
},
|
||||
createHref(to) {
|
||||
return createHref(window, to);
|
||||
},
|
||||
createURL,
|
||||
encodeLocation(to) {
|
||||
// Encode a Location the same way window.location would
|
||||
let url = createURL(to);
|
||||
return {
|
||||
pathname: url.pathname,
|
||||
search: url.search,
|
||||
hash: url.hash
|
||||
};
|
||||
},
|
||||
push,
|
||||
replace,
|
||||
go(n) {
|
||||
return globalHistory.go(n);
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
var ResultType;
|
||||
(function (ResultType) {
|
||||
ResultType["data"] = "data";
|
||||
ResultType["deferred"] = "deferred";
|
||||
ResultType["redirect"] = "redirect";
|
||||
ResultType["error"] = "error";
|
||||
})(ResultType || (ResultType = {}));
|
||||
const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "index", "children"]);
|
||||
function isIndexRoute(route) {
|
||||
return route.index === true;
|
||||
}
|
||||
// Walk the route tree generating unique IDs where necessary, so we are working
|
||||
// solely with AgnosticDataRouteObject's within the Router
|
||||
function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath, manifest) {
|
||||
if (parentPath === void 0) {
|
||||
parentPath = [];
|
||||
}
|
||||
if (manifest === void 0) {
|
||||
manifest = {};
|
||||
}
|
||||
return routes.map((route, index) => {
|
||||
let treePath = [...parentPath, String(index)];
|
||||
let id = typeof route.id === "string" ? route.id : treePath.join("-");
|
||||
invariant(route.index !== true || !route.children, "Cannot specify children on an index route");
|
||||
invariant(!manifest[id], "Found a route id collision on id \"" + id + "\". Route " + "id's must be globally unique within Data Router usages");
|
||||
if (isIndexRoute(route)) {
|
||||
let indexRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id
|
||||
});
|
||||
manifest[id] = indexRoute;
|
||||
return indexRoute;
|
||||
} else {
|
||||
let pathOrLayoutRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id,
|
||||
children: undefined
|
||||
});
|
||||
manifest[id] = pathOrLayoutRoute;
|
||||
if (route.children) {
|
||||
pathOrLayoutRoute.children = convertRoutesToDataRoutes(route.children, mapRouteProperties, treePath, manifest);
|
||||
}
|
||||
return pathOrLayoutRoute;
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Matches the given routes to a location and returns the match data.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-routes
|
||||
*/
|
||||
function matchRoutes(routes, locationArg, basename) {
|
||||
if (basename === void 0) {
|
||||
basename = "/";
|
||||
}
|
||||
return matchRoutesImpl(routes, locationArg, basename, false);
|
||||
}
|
||||
function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
|
||||
let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
|
||||
let pathname = stripBasename(location.pathname || "/", basename);
|
||||
if (pathname == null) {
|
||||
return null;
|
||||
}
|
||||
let branches = flattenRoutes(routes);
|
||||
rankRouteBranches(branches);
|
||||
let matches = null;
|
||||
let decoded = decodePath(pathname);
|
||||
for (let i = 0; matches == null && i < branches.length; ++i) {
|
||||
// Incoming pathnames are generally encoded from either window.location
|
||||
// or from router.navigate, but we want to match against the unencoded
|
||||
// paths in the route definitions. Memory router locations won't be
|
||||
// encoded here but there also shouldn't be anything to decode so this
|
||||
// should be a safe operation. This avoids needing matchRoutes to be
|
||||
// history-aware.
|
||||
matches = matchRouteBranch(branches[i], decoded, allowPartial);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function convertRouteMatchToUiMatch(match, loaderData) {
|
||||
let {
|
||||
route,
|
||||
pathname,
|
||||
params
|
||||
} = match;
|
||||
return {
|
||||
id: route.id,
|
||||
pathname,
|
||||
params,
|
||||
data: loaderData[route.id],
|
||||
handle: route.handle
|
||||
};
|
||||
}
|
||||
function flattenRoutes(routes, branches, parentsMeta, parentPath) {
|
||||
if (branches === void 0) {
|
||||
branches = [];
|
||||
}
|
||||
if (parentsMeta === void 0) {
|
||||
parentsMeta = [];
|
||||
}
|
||||
if (parentPath === void 0) {
|
||||
parentPath = "";
|
||||
}
|
||||
let flattenRoute = (route, index, relativePath) => {
|
||||
let meta = {
|
||||
relativePath: relativePath === undefined ? route.path || "" : relativePath,
|
||||
caseSensitive: route.caseSensitive === true,
|
||||
childrenIndex: index,
|
||||
route
|
||||
};
|
||||
if (meta.relativePath.startsWith("/")) {
|
||||
invariant(meta.relativePath.startsWith(parentPath), "Absolute route path \"" + meta.relativePath + "\" nested under path " + ("\"" + parentPath + "\" is not valid. An absolute child route path ") + "must start with the combined path of all its parent routes.");
|
||||
meta.relativePath = meta.relativePath.slice(parentPath.length);
|
||||
}
|
||||
let path = joinPaths([parentPath, meta.relativePath]);
|
||||
let routesMeta = parentsMeta.concat(meta);
|
||||
// Add the children before adding this route to the array, so we traverse the
|
||||
// route tree depth-first and child routes appear before their parents in
|
||||
// the "flattened" version.
|
||||
if (route.children && route.children.length > 0) {
|
||||
invariant(
|
||||
// Our types know better, but runtime JS may not!
|
||||
// @ts-expect-error
|
||||
route.index !== true, "Index routes must not have child routes. Please remove " + ("all child routes from route path \"" + path + "\"."));
|
||||
flattenRoutes(route.children, branches, routesMeta, path);
|
||||
}
|
||||
// Routes without a path shouldn't ever match by themselves unless they are
|
||||
// index routes, so don't add them to the list of possible branches.
|
||||
if (route.path == null && !route.index) {
|
||||
return;
|
||||
}
|
||||
branches.push({
|
||||
path,
|
||||
score: computeScore(path, route.index),
|
||||
routesMeta
|
||||
});
|
||||
};
|
||||
routes.forEach((route, index) => {
|
||||
var _route$path;
|
||||
// coarse-grain check for optional params
|
||||
if (route.path === "" || !((_route$path = route.path) != null && _route$path.includes("?"))) {
|
||||
flattenRoute(route, index);
|
||||
} else {
|
||||
for (let exploded of explodeOptionalSegments(route.path)) {
|
||||
flattenRoute(route, index, exploded);
|
||||
}
|
||||
}
|
||||
});
|
||||
return branches;
|
||||
}
|
||||
/**
|
||||
* Computes all combinations of optional path segments for a given path,
|
||||
* excluding combinations that are ambiguous and of lower priority.
|
||||
*
|
||||
* For example, `/one/:two?/three/:four?/:five?` explodes to:
|
||||
* - `/one/three`
|
||||
* - `/one/:two/three`
|
||||
* - `/one/three/:four`
|
||||
* - `/one/three/:five`
|
||||
* - `/one/:two/three/:four`
|
||||
* - `/one/:two/three/:five`
|
||||
* - `/one/three/:four/:five`
|
||||
* - `/one/:two/three/:four/:five`
|
||||
*/
|
||||
function explodeOptionalSegments(path) {
|
||||
let segments = path.split("/");
|
||||
if (segments.length === 0) return [];
|
||||
let [first, ...rest] = segments;
|
||||
// Optional path segments are denoted by a trailing `?`
|
||||
let isOptional = first.endsWith("?");
|
||||
// Compute the corresponding required segment: `foo?` -> `foo`
|
||||
let required = first.replace(/\?$/, "");
|
||||
if (rest.length === 0) {
|
||||
// Intepret empty string as omitting an optional segment
|
||||
// `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three`
|
||||
return isOptional ? [required, ""] : [required];
|
||||
}
|
||||
let restExploded = explodeOptionalSegments(rest.join("/"));
|
||||
let result = [];
|
||||
// All child paths with the prefix. Do this for all children before the
|
||||
// optional version for all children, so we get consistent ordering where the
|
||||
// parent optional aspect is preferred as required. Otherwise, we can get
|
||||
// child sections interspersed where deeper optional segments are higher than
|
||||
// parent optional segments, where for example, /:two would explode _earlier_
|
||||
// then /:one. By always including the parent as required _for all children_
|
||||
// first, we avoid this issue
|
||||
result.push(...restExploded.map(subpath => subpath === "" ? required : [required, subpath].join("/")));
|
||||
// Then, if this is an optional value, add all child versions without
|
||||
if (isOptional) {
|
||||
result.push(...restExploded);
|
||||
}
|
||||
// for absolute paths, ensure `/` instead of empty segment
|
||||
return result.map(exploded => path.startsWith("/") && exploded === "" ? "/" : exploded);
|
||||
}
|
||||
function rankRouteBranches(branches) {
|
||||
branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first
|
||||
: compareIndexes(a.routesMeta.map(meta => meta.childrenIndex), b.routesMeta.map(meta => meta.childrenIndex)));
|
||||
}
|
||||
const paramRe = /^:[\w-]+$/;
|
||||
const dynamicSegmentValue = 3;
|
||||
const indexRouteValue = 2;
|
||||
const emptySegmentValue = 1;
|
||||
const staticSegmentValue = 10;
|
||||
const splatPenalty = -2;
|
||||
const isSplat = s => s === "*";
|
||||
function computeScore(path, index) {
|
||||
let segments = path.split("/");
|
||||
let initialScore = segments.length;
|
||||
if (segments.some(isSplat)) {
|
||||
initialScore += splatPenalty;
|
||||
}
|
||||
if (index) {
|
||||
initialScore += indexRouteValue;
|
||||
}
|
||||
return segments.filter(s => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
|
||||
}
|
||||
function compareIndexes(a, b) {
|
||||
let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
|
||||
return siblings ?
|
||||
// If two routes are siblings, we should try to match the earlier sibling
|
||||
// first. This allows people to have fine-grained control over the matching
|
||||
// behavior by simply putting routes with identical paths in the order they
|
||||
// want them tried.
|
||||
a[a.length - 1] - b[b.length - 1] :
|
||||
// Otherwise, it doesn't really make sense to rank non-siblings by index,
|
||||
// so they sort equally.
|
||||
0;
|
||||
}
|
||||
function matchRouteBranch(branch, pathname, allowPartial) {
|
||||
if (allowPartial === void 0) {
|
||||
allowPartial = false;
|
||||
}
|
||||
let {
|
||||
routesMeta
|
||||
} = branch;
|
||||
let matchedParams = {};
|
||||
let matchedPathname = "/";
|
||||
let matches = [];
|
||||
for (let i = 0; i < routesMeta.length; ++i) {
|
||||
let meta = routesMeta[i];
|
||||
let end = i === routesMeta.length - 1;
|
||||
let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
|
||||
let match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end
|
||||
}, remainingPathname);
|
||||
let route = meta.route;
|
||||
if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
|
||||
match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end: false
|
||||
}, remainingPathname);
|
||||
}
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
Object.assign(matchedParams, match.params);
|
||||
matches.push({
|
||||
// TODO: Can this as be avoided?
|
||||
params: matchedParams,
|
||||
pathname: joinPaths([matchedPathname, match.pathname]),
|
||||
pathnameBase: normalizePathname(joinPaths([matchedPathname, match.pathnameBase])),
|
||||
route
|
||||
});
|
||||
if (match.pathnameBase !== "/") {
|
||||
matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
|
||||
}
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
/**
|
||||
* Returns a path with params interpolated.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/generate-path
|
||||
*/
|
||||
function generatePath(originalPath, params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
let path = originalPath;
|
||||
if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
|
||||
warning(false, "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
path = path.replace(/\*$/, "/*");
|
||||
}
|
||||
// ensure `/` is added at the beginning if the path is absolute
|
||||
const prefix = path.startsWith("/") ? "/" : "";
|
||||
const stringify = p => p == null ? "" : typeof p === "string" ? p : String(p);
|
||||
const segments = path.split(/\/+/).map((segment, index, array) => {
|
||||
const isLastSegment = index === array.length - 1;
|
||||
// only apply the splat if it's the last segment
|
||||
if (isLastSegment && segment === "*") {
|
||||
const star = "*";
|
||||
// Apply the splat
|
||||
return stringify(params[star]);
|
||||
}
|
||||
const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
|
||||
if (keyMatch) {
|
||||
const [, key, optional] = keyMatch;
|
||||
let param = params[key];
|
||||
invariant(optional === "?" || param != null, "Missing \":" + key + "\" param");
|
||||
return stringify(param);
|
||||
}
|
||||
// Remove any optional markers from optional static segments
|
||||
return segment.replace(/\?$/g, "");
|
||||
})
|
||||
// Remove empty segments
|
||||
.filter(segment => !!segment);
|
||||
return prefix + segments.join("/");
|
||||
}
|
||||
/**
|
||||
* Performs pattern matching on a URL pathname and returns information about
|
||||
* the match.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-path
|
||||
*/
|
||||
function matchPath(pattern, pathname) {
|
||||
if (typeof pattern === "string") {
|
||||
pattern = {
|
||||
path: pattern,
|
||||
caseSensitive: false,
|
||||
end: true
|
||||
};
|
||||
}
|
||||
let [matcher, compiledParams] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
|
||||
let match = pathname.match(matcher);
|
||||
if (!match) return null;
|
||||
let matchedPathname = match[0];
|
||||
let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
|
||||
let captureGroups = match.slice(1);
|
||||
let params = compiledParams.reduce((memo, _ref, index) => {
|
||||
let {
|
||||
paramName,
|
||||
isOptional
|
||||
} = _ref;
|
||||
// We need to compute the pathnameBase here using the raw splat value
|
||||
// instead of using params["*"] later because it will be decoded then
|
||||
if (paramName === "*") {
|
||||
let splatValue = captureGroups[index] || "";
|
||||
pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
|
||||
}
|
||||
const value = captureGroups[index];
|
||||
if (isOptional && !value) {
|
||||
memo[paramName] = undefined;
|
||||
} else {
|
||||
memo[paramName] = (value || "").replace(/%2F/g, "/");
|
||||
}
|
||||
return memo;
|
||||
}, {});
|
||||
return {
|
||||
params,
|
||||
pathname: matchedPathname,
|
||||
pathnameBase,
|
||||
pattern
|
||||
};
|
||||
}
|
||||
function compilePath(path, caseSensitive, end) {
|
||||
if (caseSensitive === void 0) {
|
||||
caseSensitive = false;
|
||||
}
|
||||
if (end === void 0) {
|
||||
end = true;
|
||||
}
|
||||
warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
let params = [];
|
||||
let regexpSource = "^" + path.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
|
||||
.replace(/^\/*/, "/") // Make sure it has a leading /
|
||||
.replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
|
||||
.replace(/\/:([\w-]+)(\?)?/g, (_, paramName, isOptional) => {
|
||||
params.push({
|
||||
paramName,
|
||||
isOptional: isOptional != null
|
||||
});
|
||||
return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
|
||||
});
|
||||
if (path.endsWith("*")) {
|
||||
params.push({
|
||||
paramName: "*"
|
||||
});
|
||||
regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
|
||||
: "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
|
||||
} else if (end) {
|
||||
// When matching to the end, ignore trailing slashes
|
||||
regexpSource += "\\/*$";
|
||||
} else if (path !== "" && path !== "/") {
|
||||
// If our path is non-empty and contains anything beyond an initial slash,
|
||||
// then we have _some_ form of path in our regex, so we should expect to
|
||||
// match only if we find the end of this path segment. Look for an optional
|
||||
// non-captured trailing slash (to match a portion of the URL) or the end
|
||||
// of the path (if we've matched to the end). We used to do this with a
|
||||
// word boundary but that gives false positives on routes like
|
||||
// /user-preferences since `-` counts as a word boundary.
|
||||
regexpSource += "(?:(?=\\/|$))";
|
||||
} else ;
|
||||
let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
|
||||
return [matcher, params];
|
||||
}
|
||||
function decodePath(value) {
|
||||
try {
|
||||
return value.split("/").map(v => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
|
||||
} catch (error) {
|
||||
warning(false, "The URL path \"" + value + "\" could not be decoded because it is is a " + "malformed URL segment. This is probably due to a bad percent " + ("encoding (" + error + ")."));
|
||||
return value;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function stripBasename(pathname, basename) {
|
||||
if (basename === "/") return pathname;
|
||||
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
|
||||
return null;
|
||||
}
|
||||
// We want to leave trailing slash behavior in the user's control, so if they
|
||||
// specify a basename with a trailing slash, we should support it
|
||||
let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
|
||||
let nextChar = pathname.charAt(startIndex);
|
||||
if (nextChar && nextChar !== "/") {
|
||||
// pathname does not start with basename/
|
||||
return null;
|
||||
}
|
||||
return pathname.slice(startIndex) || "/";
|
||||
}
|
||||
const ABSOLUTE_URL_REGEX$1 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const isAbsoluteUrl = url => ABSOLUTE_URL_REGEX$1.test(url);
|
||||
/**
|
||||
* Returns a resolved path object relative to the given pathname.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/resolve-path
|
||||
*/
|
||||
function resolvePath(to, fromPathname) {
|
||||
if (fromPathname === void 0) {
|
||||
fromPathname = "/";
|
||||
}
|
||||
let {
|
||||
pathname: toPathname,
|
||||
search = "",
|
||||
hash = ""
|
||||
} = typeof to === "string" ? parsePath(to) : to;
|
||||
let pathname;
|
||||
if (toPathname) {
|
||||
if (isAbsoluteUrl(toPathname)) {
|
||||
pathname = toPathname;
|
||||
} else {
|
||||
if (toPathname.includes("//")) {
|
||||
let oldPathname = toPathname;
|
||||
toPathname = removeDoubleSlashes(toPathname);
|
||||
warning(false, "Pathnames cannot have embedded double slashes - normalizing " + (oldPathname + " -> " + toPathname));
|
||||
}
|
||||
if (toPathname.startsWith("/")) {
|
||||
pathname = resolvePathname(toPathname.substring(1), "/");
|
||||
} else {
|
||||
pathname = resolvePathname(toPathname, fromPathname);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
pathname = fromPathname;
|
||||
}
|
||||
return {
|
||||
pathname,
|
||||
search: normalizeSearch(search),
|
||||
hash: normalizeHash(hash)
|
||||
};
|
||||
}
|
||||
function resolvePathname(relativePath, fromPathname) {
|
||||
let segments = fromPathname.replace(/\/+$/, "").split("/");
|
||||
let relativeSegments = relativePath.split("/");
|
||||
relativeSegments.forEach(segment => {
|
||||
if (segment === "..") {
|
||||
// Keep the root "" segment so the pathname starts at /
|
||||
if (segments.length > 1) segments.pop();
|
||||
} else if (segment !== ".") {
|
||||
segments.push(segment);
|
||||
}
|
||||
});
|
||||
return segments.length > 1 ? segments.join("/") : "/";
|
||||
}
|
||||
function getInvalidPathError(char, field, dest, path) {
|
||||
return "Cannot include a '" + char + "' character in a manually specified " + ("`to." + field + "` field [" + JSON.stringify(path) + "]. Please separate it out to the ") + ("`to." + dest + "` field. Alternatively you may provide the full path as ") + "a string in <Link to=\"...\"> and the router will parse it for you.";
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* When processing relative navigation we want to ignore ancestor routes that
|
||||
* do not contribute to the path, such that index/pathless layout routes don't
|
||||
* interfere.
|
||||
*
|
||||
* For example, when moving a route element into an index route and/or a
|
||||
* pathless layout route, relative link behavior contained within should stay
|
||||
* the same. Both of the following examples should link back to the root:
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts" element={<Link to=".."}>
|
||||
* </Route>
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts">
|
||||
* <Route element={<AccountsLayout />}> // <-- Does not contribute
|
||||
* <Route index element={<Link to=".."} /> // <-- Does not contribute
|
||||
* </Route
|
||||
* </Route>
|
||||
* </Route>
|
||||
*/
|
||||
function getPathContributingMatches(matches) {
|
||||
return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
|
||||
}
|
||||
// Return the array of pathnames for the current route matches - used to
|
||||
// generate the routePathnames input for resolveTo()
|
||||
function getResolveToMatches(matches, v7_relativeSplatPath) {
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
// When v7_relativeSplatPath is enabled, use the full pathname for the leaf
|
||||
// match so we include splat values for "." links. See:
|
||||
// https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
|
||||
if (v7_relativeSplatPath) {
|
||||
return pathMatches.map((match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase);
|
||||
}
|
||||
return pathMatches.map(match => match.pathnameBase);
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
|
||||
if (isPathRelative === void 0) {
|
||||
isPathRelative = false;
|
||||
}
|
||||
let to;
|
||||
if (typeof toArg === "string") {
|
||||
to = parsePath(toArg);
|
||||
} else {
|
||||
to = _extends({}, toArg);
|
||||
invariant(!to.pathname || !to.pathname.includes("?"), getInvalidPathError("?", "pathname", "search", to));
|
||||
invariant(!to.pathname || !to.pathname.includes("#"), getInvalidPathError("#", "pathname", "hash", to));
|
||||
invariant(!to.search || !to.search.includes("#"), getInvalidPathError("#", "search", "hash", to));
|
||||
}
|
||||
let isEmptyPath = toArg === "" || to.pathname === "";
|
||||
let toPathname = isEmptyPath ? "/" : to.pathname;
|
||||
let from;
|
||||
// Routing is relative to the current pathname if explicitly requested.
|
||||
//
|
||||
// If a pathname is explicitly provided in `to`, it should be relative to the
|
||||
// route context. This is explained in `Note on `<Link to>` values` in our
|
||||
// migration guide from v5 as a means of disambiguation between `to` values
|
||||
// that begin with `/` and those that do not. However, this is problematic for
|
||||
// `to` values that do not provide a pathname. `to` can simply be a search or
|
||||
// hash string, in which case we should assume that the navigation is relative
|
||||
// to the current location's pathname and *not* the route pathname.
|
||||
if (toPathname == null) {
|
||||
from = locationPathname;
|
||||
} else {
|
||||
let routePathnameIndex = routePathnames.length - 1;
|
||||
// With relative="route" (the default), each leading .. segment means
|
||||
// "go up one route" instead of "go up one URL segment". This is a key
|
||||
// difference from how <a href> works and a major reason we call this a
|
||||
// "to" value instead of a "href".
|
||||
if (!isPathRelative && toPathname.startsWith("..")) {
|
||||
let toSegments = toPathname.split("/");
|
||||
while (toSegments[0] === "..") {
|
||||
toSegments.shift();
|
||||
routePathnameIndex -= 1;
|
||||
}
|
||||
to.pathname = toSegments.join("/");
|
||||
}
|
||||
from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
|
||||
}
|
||||
let path = resolvePath(to, from);
|
||||
// Ensure the pathname has a trailing slash if the original "to" had one
|
||||
let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
|
||||
// Or if this was a link to the current path which has a trailing slash
|
||||
let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
|
||||
if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
|
||||
path.pathname += "/";
|
||||
}
|
||||
return path;
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function getToPathname(to) {
|
||||
// Empty strings should be treated the same as / paths
|
||||
return to === "" || to.pathname === "" ? "/" : typeof to === "string" ? parsePath(to).pathname : to.pathname;
|
||||
}
|
||||
const removeDoubleSlashes = path => path.replace(/\/\/+/g, "/");
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const joinPaths = paths => removeDoubleSlashes(paths.join("/"));
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizePathname = pathname => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeSearch = search => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeHash = hash => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
|
||||
/**
|
||||
* This is a shortcut for creating `application/json` responses. Converts `data`
|
||||
* to JSON and sets the `Content-Type` header.
|
||||
*
|
||||
* @deprecated The `json` method is deprecated in favor of returning raw objects.
|
||||
* This method will be removed in v7.
|
||||
*/
|
||||
const json = function json(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
let headers = new Headers(responseInit.headers);
|
||||
if (!headers.has("Content-Type")) {
|
||||
headers.set("Content-Type", "application/json; charset=utf-8");
|
||||
}
|
||||
return new Response(JSON.stringify(data), _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
class DataWithResponseInit {
|
||||
constructor(data, init) {
|
||||
this.type = "DataWithResponseInit";
|
||||
this.data = data;
|
||||
this.init = init || null;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Create "responses" that contain `status`/`headers` without forcing
|
||||
* serialization into an actual `Response` - used by Remix single fetch
|
||||
*/
|
||||
function data(data, init) {
|
||||
return new DataWithResponseInit(data, typeof init === "number" ? {
|
||||
status: init
|
||||
} : init);
|
||||
}
|
||||
class AbortedDeferredError extends Error {}
|
||||
class DeferredData {
|
||||
constructor(data, responseInit) {
|
||||
this.pendingKeysSet = new Set();
|
||||
this.subscribers = new Set();
|
||||
this.deferredKeys = [];
|
||||
invariant(data && typeof data === "object" && !Array.isArray(data), "defer() only accepts plain objects");
|
||||
// Set up an AbortController + Promise we can race against to exit early
|
||||
// cancellation
|
||||
let reject;
|
||||
this.abortPromise = new Promise((_, r) => reject = r);
|
||||
this.controller = new AbortController();
|
||||
let onAbort = () => reject(new AbortedDeferredError("Deferred data aborted"));
|
||||
this.unlistenAbortSignal = () => this.controller.signal.removeEventListener("abort", onAbort);
|
||||
this.controller.signal.addEventListener("abort", onAbort);
|
||||
this.data = Object.entries(data).reduce((acc, _ref2) => {
|
||||
let [key, value] = _ref2;
|
||||
return Object.assign(acc, {
|
||||
[key]: this.trackPromise(key, value)
|
||||
});
|
||||
}, {});
|
||||
if (this.done) {
|
||||
// All incoming values were resolved
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
this.init = responseInit;
|
||||
}
|
||||
trackPromise(key, value) {
|
||||
if (!(value instanceof Promise)) {
|
||||
return value;
|
||||
}
|
||||
this.deferredKeys.push(key);
|
||||
this.pendingKeysSet.add(key);
|
||||
// We store a little wrapper promise that will be extended with
|
||||
// _data/_error props upon resolve/reject
|
||||
let promise = Promise.race([value, this.abortPromise]).then(data => this.onSettle(promise, key, undefined, data), error => this.onSettle(promise, key, error));
|
||||
// Register rejection listeners to avoid uncaught promise rejections on
|
||||
// errors or aborted deferred values
|
||||
promise.catch(() => {});
|
||||
Object.defineProperty(promise, "_tracked", {
|
||||
get: () => true
|
||||
});
|
||||
return promise;
|
||||
}
|
||||
onSettle(promise, key, error, data) {
|
||||
if (this.controller.signal.aborted && error instanceof AbortedDeferredError) {
|
||||
this.unlistenAbortSignal();
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
return Promise.reject(error);
|
||||
}
|
||||
this.pendingKeysSet.delete(key);
|
||||
if (this.done) {
|
||||
// Nothing left to abort!
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
// If the promise was resolved/rejected with undefined, we'll throw an error as you
|
||||
// should always resolve with a value or null
|
||||
if (error === undefined && data === undefined) {
|
||||
let undefinedError = new Error("Deferred data for key \"" + key + "\" resolved/rejected with `undefined`, " + "you must resolve/reject with a value or `null`.");
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => undefinedError
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(undefinedError);
|
||||
}
|
||||
if (data === undefined) {
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
Object.defineProperty(promise, "_data", {
|
||||
get: () => data
|
||||
});
|
||||
this.emit(false, key);
|
||||
return data;
|
||||
}
|
||||
emit(aborted, settledKey) {
|
||||
this.subscribers.forEach(subscriber => subscriber(aborted, settledKey));
|
||||
}
|
||||
subscribe(fn) {
|
||||
this.subscribers.add(fn);
|
||||
return () => this.subscribers.delete(fn);
|
||||
}
|
||||
cancel() {
|
||||
this.controller.abort();
|
||||
this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k));
|
||||
this.emit(true);
|
||||
}
|
||||
async resolveData(signal) {
|
||||
let aborted = false;
|
||||
if (!this.done) {
|
||||
let onAbort = () => this.cancel();
|
||||
signal.addEventListener("abort", onAbort);
|
||||
aborted = await new Promise(resolve => {
|
||||
this.subscribe(aborted => {
|
||||
signal.removeEventListener("abort", onAbort);
|
||||
if (aborted || this.done) {
|
||||
resolve(aborted);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return aborted;
|
||||
}
|
||||
get done() {
|
||||
return this.pendingKeysSet.size === 0;
|
||||
}
|
||||
get unwrappedData() {
|
||||
invariant(this.data !== null && this.done, "Can only unwrap data on initialized and settled deferreds");
|
||||
return Object.entries(this.data).reduce((acc, _ref3) => {
|
||||
let [key, value] = _ref3;
|
||||
return Object.assign(acc, {
|
||||
[key]: unwrapTrackedPromise(value)
|
||||
});
|
||||
}, {});
|
||||
}
|
||||
get pendingKeys() {
|
||||
return Array.from(this.pendingKeysSet);
|
||||
}
|
||||
}
|
||||
function isTrackedPromise(value) {
|
||||
return value instanceof Promise && value._tracked === true;
|
||||
}
|
||||
function unwrapTrackedPromise(value) {
|
||||
if (!isTrackedPromise(value)) {
|
||||
return value;
|
||||
}
|
||||
if (value._error) {
|
||||
throw value._error;
|
||||
}
|
||||
return value._data;
|
||||
}
|
||||
/**
|
||||
* @deprecated The `defer` method is deprecated in favor of returning raw
|
||||
* objects. This method will be removed in v7.
|
||||
*/
|
||||
const defer = function defer(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
return new DeferredData(data, responseInit);
|
||||
};
|
||||
/**
|
||||
* A redirect response. Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirect = function redirect(url, init) {
|
||||
if (init === void 0) {
|
||||
init = 302;
|
||||
}
|
||||
let responseInit = init;
|
||||
if (typeof responseInit === "number") {
|
||||
responseInit = {
|
||||
status: responseInit
|
||||
};
|
||||
} else if (typeof responseInit.status === "undefined") {
|
||||
responseInit.status = 302;
|
||||
}
|
||||
let headers = new Headers(responseInit.headers);
|
||||
headers.set("Location", url);
|
||||
return new Response(null, _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
/**
|
||||
* A redirect response that will force a document reload to the new location.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirectDocument = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Reload-Document", "true");
|
||||
return response;
|
||||
};
|
||||
/**
|
||||
* A redirect response that will perform a `history.replaceState` instead of a
|
||||
* `history.pushState` for client-side navigation redirects.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const replace = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Replace", "true");
|
||||
return response;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
|
||||
*
|
||||
* We don't export the class for public use since it's an implementation
|
||||
* detail, but we export the interface above so folks can build their own
|
||||
* abstractions around instances via isRouteErrorResponse()
|
||||
*/
|
||||
class ErrorResponseImpl {
|
||||
constructor(status, statusText, data, internal) {
|
||||
if (internal === void 0) {
|
||||
internal = false;
|
||||
}
|
||||
this.status = status;
|
||||
this.statusText = statusText || "";
|
||||
this.internal = internal;
|
||||
if (data instanceof Error) {
|
||||
this.data = data.toString();
|
||||
this.error = data;
|
||||
} else {
|
||||
this.data = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Check if the given error is an ErrorResponse generated from a 4xx/5xx
|
||||
* Response thrown from an action/loader
|
||||
*/
|
||||
function isRouteErrorResponse(error) {
|
||||
return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
|
||||
}
|
||||
|
||||
const validMutationMethodsArr = ["post", "put", "patch", "delete"];
|
||||
const validMutationMethods = new Set(validMutationMethodsArr);
|
||||
const validRequestMethodsArr = ["get", ...validMutationMethodsArr];
|
||||
const validRequestMethods = new Set(validRequestMethodsArr);
|
||||
const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
|
||||
const redirectPreserveMethodStatusCodes = new Set([307, 308]);
|
||||
const IDLE_NAVIGATION = {
|
||||
state: "idle",
|
||||
location: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_FETCHER = {
|
||||
state: "idle",
|
||||
data: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_BLOCKER = {
|
||||
state: "unblocked",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: undefined
|
||||
};
|
||||
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const defaultMapRouteProperties = route => ({
|
||||
hasErrorBoundary: Boolean(route.hasErrorBoundary)
|
||||
});
|
||||
const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
|
||||
//#endregion
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createRouter
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
/**
|
||||
* Create a router and listen to history POP navigations
|
||||
*/
|
||||
function createRouter(init) {
|
||||
const routerWindow = init.window ? init.window : typeof window !== "undefined" ? window : undefined;
|
||||
const isBrowser = typeof routerWindow !== "undefined" && typeof routerWindow.document !== "undefined" && typeof routerWindow.document.createElement !== "undefined";
|
||||
const isServer = !isBrowser;
|
||||
invariant(init.routes.length > 0, "You must provide a non-empty routes array to createRouter");
|
||||
let mapRouteProperties;
|
||||
if (init.mapRouteProperties) {
|
||||
mapRouteProperties = init.mapRouteProperties;
|
||||
} else if (init.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = init.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
// Routes keyed by ID
|
||||
let manifest = {};
|
||||
// Routes in tree format for matching
|
||||
let dataRoutes = convertRoutesToDataRoutes(init.routes, mapRouteProperties, undefined, manifest);
|
||||
let inFlightDataRoutes;
|
||||
let basename = init.basename || "/";
|
||||
let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
|
||||
let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_fetcherPersist: false,
|
||||
v7_normalizeFormMethod: false,
|
||||
v7_partialHydration: false,
|
||||
v7_prependBasename: false,
|
||||
v7_relativeSplatPath: false,
|
||||
v7_skipActionErrorRevalidation: false
|
||||
}, init.future);
|
||||
// Cleanup function for history
|
||||
let unlistenHistory = null;
|
||||
// Externally-provided functions to call on all state changes
|
||||
let subscribers = new Set();
|
||||
// Externally-provided object to hold scroll restoration locations during routing
|
||||
let savedScrollPositions = null;
|
||||
// Externally-provided function to get scroll restoration keys
|
||||
let getScrollRestorationKey = null;
|
||||
// Externally-provided function to get current scroll position
|
||||
let getScrollPosition = null;
|
||||
// One-time flag to control the initial hydration scroll restoration. Because
|
||||
// we don't get the saved positions from <ScrollRestoration /> until _after_
|
||||
// the initial render, we need to manually trigger a separate updateState to
|
||||
// send along the restoreScrollPosition
|
||||
// Set to true if we have `hydrationData` since we assume we were SSR'd and that
|
||||
// SSR did the initial scroll restoration.
|
||||
let initialScrollRestored = init.hydrationData != null;
|
||||
let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
|
||||
let initialMatchesIsFOW = false;
|
||||
let initialErrors = null;
|
||||
if (initialMatches == null && !patchRoutesOnNavigationImpl) {
|
||||
// If we do not match a user-provided-route, fall back to the root
|
||||
// to allow the error boundary to take over
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: init.history.location.pathname
|
||||
});
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
initialMatches = matches;
|
||||
initialErrors = {
|
||||
[route.id]: error
|
||||
};
|
||||
}
|
||||
// In SPA apps, if the user provided a patchRoutesOnNavigation implementation and
|
||||
// our initial match is a splat route, clear them out so we run through lazy
|
||||
// discovery on hydration in case there's a more accurate lazy route match.
|
||||
// In SSR apps (with `hydrationData`), we expect that the server will send
|
||||
// up the proper matched routes so we don't want to run lazy discovery on
|
||||
// initial hydration and want to hydrate into the splat route.
|
||||
if (initialMatches && !init.hydrationData) {
|
||||
let fogOfWar = checkFogOfWar(initialMatches, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active) {
|
||||
initialMatches = null;
|
||||
}
|
||||
}
|
||||
let initialized;
|
||||
if (!initialMatches) {
|
||||
initialized = false;
|
||||
initialMatches = [];
|
||||
// If partial hydration and fog of war is enabled, we will be running
|
||||
// `patchRoutesOnNavigation` during hydration so include any partial matches as
|
||||
// the initial matches so we can properly render `HydrateFallback`'s
|
||||
if (future.v7_partialHydration) {
|
||||
let fogOfWar = checkFogOfWar(null, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
initialMatchesIsFOW = true;
|
||||
initialMatches = fogOfWar.matches;
|
||||
}
|
||||
}
|
||||
} else if (initialMatches.some(m => m.route.lazy)) {
|
||||
// All initialMatches need to be loaded before we're ready. If we have lazy
|
||||
// functions around still then we'll need to run them in initialize()
|
||||
initialized = false;
|
||||
} else if (!initialMatches.some(m => m.route.loader)) {
|
||||
// If we've got no loaders to run, then we're good to go
|
||||
initialized = true;
|
||||
} else if (future.v7_partialHydration) {
|
||||
// If partial hydration is enabled, we're initialized so long as we were
|
||||
// provided with hydrationData for every route with a loader, and no loaders
|
||||
// were marked for explicit hydration
|
||||
let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
|
||||
let errors = init.hydrationData ? init.hydrationData.errors : null;
|
||||
// If errors exist, don't consider routes below the boundary
|
||||
if (errors) {
|
||||
let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
|
||||
initialized = initialMatches.slice(0, idx + 1).every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
} else {
|
||||
initialized = initialMatches.every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
}
|
||||
} else {
|
||||
// Without partial hydration - we're initialized if we were provided any
|
||||
// hydrationData - which is expected to be complete
|
||||
initialized = init.hydrationData != null;
|
||||
}
|
||||
let router;
|
||||
let state = {
|
||||
historyAction: init.history.action,
|
||||
location: init.history.location,
|
||||
matches: initialMatches,
|
||||
initialized,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
// Don't restore on initial updateState() if we were SSR'd
|
||||
restoreScrollPosition: init.hydrationData != null ? false : null,
|
||||
preventScrollReset: false,
|
||||
revalidation: "idle",
|
||||
loaderData: init.hydrationData && init.hydrationData.loaderData || {},
|
||||
actionData: init.hydrationData && init.hydrationData.actionData || null,
|
||||
errors: init.hydrationData && init.hydrationData.errors || initialErrors,
|
||||
fetchers: new Map(),
|
||||
blockers: new Map()
|
||||
};
|
||||
// -- Stateful internal variables to manage navigations --
|
||||
// Current navigation in progress (to be committed in completeNavigation)
|
||||
let pendingAction = Action.Pop;
|
||||
// Should the current navigation prevent the scroll reset if scroll cannot
|
||||
// be restored?
|
||||
let pendingPreventScrollReset = false;
|
||||
// AbortController for the active navigation
|
||||
let pendingNavigationController;
|
||||
// Should the current navigation enable document.startViewTransition?
|
||||
let pendingViewTransitionEnabled = false;
|
||||
// Store applied view transitions so we can apply them on POP
|
||||
let appliedViewTransitions = new Map();
|
||||
// Cleanup function for persisting applied transitions to sessionStorage
|
||||
let removePageHideEventListener = null;
|
||||
// We use this to avoid touching history in completeNavigation if a
|
||||
// revalidation is entirely uninterrupted
|
||||
let isUninterruptedRevalidation = false;
|
||||
// Use this internal flag to force revalidation of all loaders:
|
||||
// - submissions (completed or interrupted)
|
||||
// - useRevalidator()
|
||||
// - X-Remix-Revalidate (from redirect)
|
||||
let isRevalidationRequired = false;
|
||||
// Use this internal array to capture routes that require revalidation due
|
||||
// to a cancelled deferred on action submission
|
||||
let cancelledDeferredRoutes = [];
|
||||
// Use this internal array to capture fetcher loads that were cancelled by an
|
||||
// action navigation and require revalidation
|
||||
let cancelledFetcherLoads = new Set();
|
||||
// AbortControllers for any in-flight fetchers
|
||||
let fetchControllers = new Map();
|
||||
// Track loads based on the order in which they started
|
||||
let incrementingLoadId = 0;
|
||||
// Track the outstanding pending navigation data load to be compared against
|
||||
// the globally incrementing load when a fetcher load lands after a completed
|
||||
// navigation
|
||||
let pendingNavigationLoadId = -1;
|
||||
// Fetchers that triggered data reloads as a result of their actions
|
||||
let fetchReloadIds = new Map();
|
||||
// Fetchers that triggered redirect navigations
|
||||
let fetchRedirectIds = new Set();
|
||||
// Most recent href/match for fetcher.load calls for fetchers
|
||||
let fetchLoadMatches = new Map();
|
||||
// Ref-count mounted fetchers so we know when it's ok to clean them up
|
||||
let activeFetchers = new Map();
|
||||
// Fetchers that have requested a delete when using v7_fetcherPersist,
|
||||
// they'll be officially removed after they return to idle
|
||||
let deletedFetchers = new Set();
|
||||
// Store DeferredData instances for active route matches. When a
|
||||
// route loader returns defer() we stick one in here. Then, when a nested
|
||||
// promise resolves we update loaderData. If a new navigation starts we
|
||||
// cancel active deferreds for eliminated routes.
|
||||
let activeDeferreds = new Map();
|
||||
// Store blocker functions in a separate Map outside of router state since
|
||||
// we don't need to update UI state if they change
|
||||
let blockerFunctions = new Map();
|
||||
// Flag to ignore the next history update, so we can revert the URL change on
|
||||
// a POP navigation that was blocked by the user without touching router state
|
||||
let unblockBlockerHistoryUpdate = undefined;
|
||||
// Initialize the router, all side effects should be kicked off from here.
|
||||
// Implemented as a Fluent API for ease of:
|
||||
// let router = createRouter(init).initialize();
|
||||
function initialize() {
|
||||
// If history informs us of a POP navigation, start the navigation but do not update
|
||||
// state. We'll update our own state once the navigation completes
|
||||
unlistenHistory = init.history.listen(_ref => {
|
||||
let {
|
||||
action: historyAction,
|
||||
location,
|
||||
delta
|
||||
} = _ref;
|
||||
// Ignore this event if it was just us resetting the URL from a
|
||||
// blocked POP navigation
|
||||
if (unblockBlockerHistoryUpdate) {
|
||||
unblockBlockerHistoryUpdate();
|
||||
unblockBlockerHistoryUpdate = undefined;
|
||||
return;
|
||||
}
|
||||
warning(blockerFunctions.size === 0 || delta != null, "You are trying to use a blocker on a POP navigation to a location " + "that was not created by @remix-run/router. This will fail silently in " + "production. This can happen if you are navigating outside the router " + "via `window.history.pushState`/`window.location.hash` instead of using " + "router navigation APIs. This can also happen if you are using " + "createHashRouter and the user manually changes the URL.");
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey && delta != null) {
|
||||
// Restore the URL to match the current UI, but don't update router state
|
||||
let nextHistoryUpdatePromise = new Promise(resolve => {
|
||||
unblockBlockerHistoryUpdate = resolve;
|
||||
});
|
||||
init.history.go(delta * -1);
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location
|
||||
});
|
||||
// Re-do the same POP navigation we just blocked, after the url
|
||||
// restoration is also complete. See:
|
||||
// https://github.com/remix-run/react-router/issues/11613
|
||||
nextHistoryUpdatePromise.then(() => init.history.go(delta));
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return startNavigation(historyAction, location);
|
||||
});
|
||||
if (isBrowser) {
|
||||
// FIXME: This feels gross. How can we cleanup the lines between
|
||||
// scrollRestoration/appliedTransitions persistance?
|
||||
restoreAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
let _saveAppliedTransitions = () => persistAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
routerWindow.addEventListener("pagehide", _saveAppliedTransitions);
|
||||
removePageHideEventListener = () => routerWindow.removeEventListener("pagehide", _saveAppliedTransitions);
|
||||
}
|
||||
// Kick off initial data load if needed. Use Pop to avoid modifying history
|
||||
// Note we don't do any handling of lazy here. For SPA's it'll get handled
|
||||
// in the normal navigation flow. For SSR it's expected that lazy modules are
|
||||
// resolved prior to router creation since we can't go into a fallbackElement
|
||||
// UI for SSR'd apps
|
||||
if (!state.initialized) {
|
||||
startNavigation(Action.Pop, state.location, {
|
||||
initialHydration: true
|
||||
});
|
||||
}
|
||||
return router;
|
||||
}
|
||||
// Clean up a router and it's side effects
|
||||
function dispose() {
|
||||
if (unlistenHistory) {
|
||||
unlistenHistory();
|
||||
}
|
||||
if (removePageHideEventListener) {
|
||||
removePageHideEventListener();
|
||||
}
|
||||
subscribers.clear();
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
state.fetchers.forEach((_, key) => deleteFetcher(key));
|
||||
state.blockers.forEach((_, key) => deleteBlocker(key));
|
||||
}
|
||||
// Subscribe to state updates for the router
|
||||
function subscribe(fn) {
|
||||
subscribers.add(fn);
|
||||
return () => subscribers.delete(fn);
|
||||
}
|
||||
// Update our state and notify the calling context of the change
|
||||
function updateState(newState, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state = _extends({}, state, newState);
|
||||
// Prep fetcher cleanup so we can tell the UI which fetcher data entries
|
||||
// can be removed
|
||||
let completedFetchers = [];
|
||||
let deletedFetchersKeys = [];
|
||||
if (future.v7_fetcherPersist) {
|
||||
state.fetchers.forEach((fetcher, key) => {
|
||||
if (fetcher.state === "idle") {
|
||||
if (deletedFetchers.has(key)) {
|
||||
// Unmounted from the UI and can be totally removed
|
||||
deletedFetchersKeys.push(key);
|
||||
} else {
|
||||
// Returned to idle but still mounted in the UI, so semi-remains for
|
||||
// revalidations and such
|
||||
completedFetchers.push(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// Remove any lingering deleted fetchers that have already been removed
|
||||
// from state.fetchers
|
||||
deletedFetchers.forEach(key => {
|
||||
if (!state.fetchers.has(key) && !fetchControllers.has(key)) {
|
||||
deletedFetchersKeys.push(key);
|
||||
}
|
||||
});
|
||||
// Iterate over a local copy so that if flushSync is used and we end up
|
||||
// removing and adding a new subscriber due to the useCallback dependencies,
|
||||
// we don't get ourselves into a loop calling the new subscriber immediately
|
||||
[...subscribers].forEach(subscriber => subscriber(state, {
|
||||
deletedFetchers: deletedFetchersKeys,
|
||||
viewTransitionOpts: opts.viewTransitionOpts,
|
||||
flushSync: opts.flushSync === true
|
||||
}));
|
||||
// Remove idle fetchers from state since we only care about in-flight fetchers.
|
||||
if (future.v7_fetcherPersist) {
|
||||
completedFetchers.forEach(key => state.fetchers.delete(key));
|
||||
deletedFetchersKeys.forEach(key => deleteFetcher(key));
|
||||
} else {
|
||||
// We already called deleteFetcher() on these, can remove them from this
|
||||
// Set now that we've handed the keys off to the data layer
|
||||
deletedFetchersKeys.forEach(key => deletedFetchers.delete(key));
|
||||
}
|
||||
}
|
||||
// Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
|
||||
// and setting state.[historyAction/location/matches] to the new route.
|
||||
// - Location is a required param
|
||||
// - Navigation will always be set to IDLE_NAVIGATION
|
||||
// - Can pass any other state in newState
|
||||
function completeNavigation(location, newState, _temp) {
|
||||
var _location$state, _location$state2;
|
||||
let {
|
||||
flushSync
|
||||
} = _temp === void 0 ? {} : _temp;
|
||||
// Deduce if we're in a loading/actionReload state:
|
||||
// - We have committed actionData in the store
|
||||
// - The current navigation was a mutation submission
|
||||
// - We're past the submitting state and into the loading state
|
||||
// - The location being loaded is not the result of a redirect
|
||||
let isActionReload = state.actionData != null && state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && state.navigation.state === "loading" && ((_location$state = location.state) == null ? void 0 : _location$state._isRedirect) !== true;
|
||||
let actionData;
|
||||
if (newState.actionData) {
|
||||
if (Object.keys(newState.actionData).length > 0) {
|
||||
actionData = newState.actionData;
|
||||
} else {
|
||||
// Empty actionData -> clear prior actionData due to an action error
|
||||
actionData = null;
|
||||
}
|
||||
} else if (isActionReload) {
|
||||
// Keep the current data if we're wrapping up the action reload
|
||||
actionData = state.actionData;
|
||||
} else {
|
||||
// Clear actionData on any other completed navigations
|
||||
actionData = null;
|
||||
}
|
||||
// Always preserve any existing loaderData from re-used routes
|
||||
let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
|
||||
// On a successful navigation we can assume we got through all blockers
|
||||
// so we can start fresh
|
||||
let blockers = state.blockers;
|
||||
if (blockers.size > 0) {
|
||||
blockers = new Map(blockers);
|
||||
blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
|
||||
}
|
||||
// Always respect the user flag. Otherwise don't reset on mutation
|
||||
// submission navigations unless they redirect
|
||||
let preventScrollReset = pendingPreventScrollReset === true || state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && ((_location$state2 = location.state) == null ? void 0 : _location$state2._isRedirect) !== true;
|
||||
// Commit any in-flight routes at the end of the HMR revalidation "navigation"
|
||||
if (inFlightDataRoutes) {
|
||||
dataRoutes = inFlightDataRoutes;
|
||||
inFlightDataRoutes = undefined;
|
||||
}
|
||||
if (isUninterruptedRevalidation) ; else if (pendingAction === Action.Pop) ; else if (pendingAction === Action.Push) {
|
||||
init.history.push(location, location.state);
|
||||
} else if (pendingAction === Action.Replace) {
|
||||
init.history.replace(location, location.state);
|
||||
}
|
||||
let viewTransitionOpts;
|
||||
// On POP, enable transitions if they were enabled on the original navigation
|
||||
if (pendingAction === Action.Pop) {
|
||||
// Forward takes precedence so they behave like the original navigation
|
||||
let priorPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (priorPaths && priorPaths.has(location.pathname)) {
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
} else if (appliedViewTransitions.has(location.pathname)) {
|
||||
// If we don't have a previous forward nav, assume we're popping back to
|
||||
// the new location and enable if that location previously enabled
|
||||
viewTransitionOpts = {
|
||||
currentLocation: location,
|
||||
nextLocation: state.location
|
||||
};
|
||||
}
|
||||
} else if (pendingViewTransitionEnabled) {
|
||||
// Store the applied transition on PUSH/REPLACE
|
||||
let toPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (toPaths) {
|
||||
toPaths.add(location.pathname);
|
||||
} else {
|
||||
toPaths = new Set([location.pathname]);
|
||||
appliedViewTransitions.set(state.location.pathname, toPaths);
|
||||
}
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
}
|
||||
updateState(_extends({}, newState, {
|
||||
actionData,
|
||||
loaderData,
|
||||
historyAction: pendingAction,
|
||||
location,
|
||||
initialized: true,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
revalidation: "idle",
|
||||
restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
|
||||
preventScrollReset,
|
||||
blockers
|
||||
}), {
|
||||
viewTransitionOpts,
|
||||
flushSync: flushSync === true
|
||||
});
|
||||
// Reset stateful navigation vars
|
||||
pendingAction = Action.Pop;
|
||||
pendingPreventScrollReset = false;
|
||||
pendingViewTransitionEnabled = false;
|
||||
isUninterruptedRevalidation = false;
|
||||
isRevalidationRequired = false;
|
||||
cancelledDeferredRoutes = [];
|
||||
}
|
||||
// Trigger a navigation event, which can either be a numerical POP or a PUSH
|
||||
// replace with an optional submission
|
||||
async function navigate(to, opts) {
|
||||
if (typeof to === "number") {
|
||||
init.history.go(to);
|
||||
return;
|
||||
}
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, to, future.v7_relativeSplatPath, opts == null ? void 0 : opts.fromRouteId, opts == null ? void 0 : opts.relative);
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, false, normalizedPath, opts);
|
||||
let currentLocation = state.location;
|
||||
let nextLocation = createLocation(state.location, path, opts && opts.state);
|
||||
// When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
|
||||
// URL from window.location, so we need to encode it here so the behavior
|
||||
// remains the same as POP and non-data-router usages. new URL() does all
|
||||
// the same encoding we'd get from a history.pushState/window.location read
|
||||
// without having to touch history
|
||||
nextLocation = _extends({}, nextLocation, init.history.encodeLocation(nextLocation));
|
||||
let userReplace = opts && opts.replace != null ? opts.replace : undefined;
|
||||
let historyAction = Action.Push;
|
||||
if (userReplace === true) {
|
||||
historyAction = Action.Replace;
|
||||
} else if (userReplace === false) ; else if (submission != null && isMutationMethod(submission.formMethod) && submission.formAction === state.location.pathname + state.location.search) {
|
||||
// By default on submissions to the current location we REPLACE so that
|
||||
// users don't have to double-click the back button to get to the prior
|
||||
// location. If the user redirects to a different location from the
|
||||
// action/loader this will be ignored and the redirect will be a PUSH
|
||||
historyAction = Action.Replace;
|
||||
}
|
||||
let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey) {
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location: nextLocation,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: nextLocation
|
||||
});
|
||||
// Send the same navigation through
|
||||
navigate(to, opts);
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return await startNavigation(historyAction, nextLocation, {
|
||||
submission,
|
||||
// Send through the formData serialization error if we have one so we can
|
||||
// render at the right error boundary after we match routes
|
||||
pendingError: error,
|
||||
preventScrollReset,
|
||||
replace: opts && opts.replace,
|
||||
enableViewTransition: opts && opts.viewTransition,
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
// Revalidate all current loaders. If a navigation is in progress or if this
|
||||
// is interrupted by a navigation, allow this to "succeed" by calling all
|
||||
// loaders during the next loader round
|
||||
function revalidate() {
|
||||
interruptActiveLoads();
|
||||
updateState({
|
||||
revalidation: "loading"
|
||||
});
|
||||
// If we're currently submitting an action, we don't need to start a new
|
||||
// navigation, we'll just let the follow up loader execution call all loaders
|
||||
if (state.navigation.state === "submitting") {
|
||||
return;
|
||||
}
|
||||
// If we're currently in an idle state, start a new navigation for the current
|
||||
// action/location and mark it as uninterrupted, which will skip the history
|
||||
// update in completeNavigation
|
||||
if (state.navigation.state === "idle") {
|
||||
startNavigation(state.historyAction, state.location, {
|
||||
startUninterruptedRevalidation: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Otherwise, if we're currently in a loading state, just start a new
|
||||
// navigation to the navigation.location but do not trigger an uninterrupted
|
||||
// revalidation so that history correctly updates once the navigation completes
|
||||
startNavigation(pendingAction || state.historyAction, state.navigation.location, {
|
||||
overrideNavigation: state.navigation,
|
||||
// Proxy through any rending view transition
|
||||
enableViewTransition: pendingViewTransitionEnabled === true
|
||||
});
|
||||
}
|
||||
// Start a navigation to the given action/location. Can optionally provide a
|
||||
// overrideNavigation which will override the normalLoad in the case of a redirect
|
||||
// navigation
|
||||
async function startNavigation(historyAction, location, opts) {
|
||||
// Abort any in-progress navigations and start a new one. Unset any ongoing
|
||||
// uninterrupted revalidations unless told otherwise, since we want this
|
||||
// new navigation to update history normally
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
pendingNavigationController = null;
|
||||
pendingAction = historyAction;
|
||||
isUninterruptedRevalidation = (opts && opts.startUninterruptedRevalidation) === true;
|
||||
// Save the current scroll position every time we start a new navigation,
|
||||
// and track whether we should reset scroll on completion
|
||||
saveScrollPosition(state.location, state.matches);
|
||||
pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let loadingNavigation = opts && opts.overrideNavigation;
|
||||
let matches = opts != null && opts.initialHydration && state.matches && state.matches.length > 0 && !initialMatchesIsFOW ?
|
||||
// `matchRoutes()` has already been called if we're in here via `router.initialize()`
|
||||
state.matches : matchRoutes(routesToUse, location, basename);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
// Short circuit if it's only a hash change and not a revalidation or
|
||||
// mutation submission.
|
||||
//
|
||||
// Ignore on initial page loads because since the initial hydration will always
|
||||
// be "same hash". For example, on /page#hash and submit a <Form method="post">
|
||||
// which will default to a navigation to /page
|
||||
if (matches && state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
|
||||
completeNavigation(location, {
|
||||
matches
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
// Short circuit with a 404 on the root error boundary if we match nothing
|
||||
if (!matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
completeNavigation(location, {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Create a controller/Request for this navigation
|
||||
pendingNavigationController = new AbortController();
|
||||
let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
|
||||
let pendingActionResult;
|
||||
if (opts && opts.pendingError) {
|
||||
// If we have a pendingError, it means the user attempted a GET submission
|
||||
// with binary FormData so assign here and skip to handleLoaders. That
|
||||
// way we handle calling loaders above the boundary etc. It's not really
|
||||
// different from an actionError in that sense.
|
||||
pendingActionResult = [findNearestBoundary(matches).route.id, {
|
||||
type: ResultType.error,
|
||||
error: opts.pendingError
|
||||
}];
|
||||
} else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {
|
||||
// Call action if we received an action submission
|
||||
let actionResult = await handleAction(request, location, opts.submission, matches, fogOfWar.active, {
|
||||
replace: opts.replace,
|
||||
flushSync
|
||||
});
|
||||
if (actionResult.shortCircuited) {
|
||||
return;
|
||||
}
|
||||
// If we received a 404 from handleAction, it's because we couldn't lazily
|
||||
// discover the destination route so we don't want to call loaders
|
||||
if (actionResult.pendingActionResult) {
|
||||
let [routeId, result] = actionResult.pendingActionResult;
|
||||
if (isErrorResult(result) && isRouteErrorResponse(result.error) && result.error.status === 404) {
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, {
|
||||
matches: actionResult.matches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[routeId]: result.error
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
matches = actionResult.matches || matches;
|
||||
pendingActionResult = actionResult.pendingActionResult;
|
||||
loadingNavigation = getLoadingNavigation(location, opts.submission);
|
||||
flushSync = false;
|
||||
// No need to do fog of war matching again on loader execution
|
||||
fogOfWar.active = false;
|
||||
// Create a GET request for the loaders
|
||||
request = createClientSideRequest(init.history, request.url, request.signal);
|
||||
}
|
||||
// Call loaders
|
||||
let {
|
||||
shortCircuited,
|
||||
matches: updatedMatches,
|
||||
loaderData,
|
||||
errors
|
||||
} = await handleLoaders(request, location, matches, fogOfWar.active, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, opts && opts.initialHydration === true, flushSync, pendingActionResult);
|
||||
if (shortCircuited) {
|
||||
return;
|
||||
}
|
||||
// Clean up now that the action/loaders have completed. Don't clean up if
|
||||
// we short circuited because pendingNavigationController will have already
|
||||
// been assigned to a new controller for the next navigation
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, _extends({
|
||||
matches: updatedMatches || matches
|
||||
}, getActionDataForCommit(pendingActionResult), {
|
||||
loaderData,
|
||||
errors
|
||||
}));
|
||||
}
|
||||
// Call the action matched by the leaf route for this navigation and handle
|
||||
// redirects/errors
|
||||
async function handleAction(request, location, submission, matches, isFogOfWar, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
interruptActiveLoads();
|
||||
// Put us in a submitting state
|
||||
let navigation = getSubmittingNavigation(location, submission);
|
||||
updateState({
|
||||
navigation
|
||||
}, {
|
||||
flushSync: opts.flushSync === true
|
||||
});
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
pendingActionResult: [boundaryId, {
|
||||
type: ResultType.error,
|
||||
error: discoverResult.error
|
||||
}]
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
notFoundMatches,
|
||||
error,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
pendingActionResult: [route.id, {
|
||||
type: ResultType.error,
|
||||
error
|
||||
}]
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
// Call our action and get the result
|
||||
let result;
|
||||
let actionMatch = getTargetMatch(matches, location);
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: location.pathname,
|
||||
routeId: actionMatch.route.id
|
||||
})
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", state, request, [actionMatch], matches, null);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
let replace;
|
||||
if (opts && opts.replace != null) {
|
||||
replace = opts.replace;
|
||||
} else {
|
||||
// If the user didn't explicity indicate replace behavior, replace if
|
||||
// we redirected to the exact same location we're currently at to avoid
|
||||
// double back-buttons
|
||||
let location = normalizeRedirectLocation(result.response.headers.get("Location"), new URL(request.url), basename, init.history);
|
||||
replace = location === state.location.pathname + state.location.search;
|
||||
}
|
||||
await startRedirectNavigation(request, result, true, {
|
||||
submission,
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
|
||||
// By default, all submissions to the current location are REPLACE
|
||||
// navigations, but if the action threw an error that'll be rendered in
|
||||
// an errorElement, we fall back to PUSH so that the user can use the
|
||||
// back button to get back to the pre-submission form location to try
|
||||
// again
|
||||
if ((opts && opts.replace) !== true) {
|
||||
pendingAction = Action.Push;
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [boundaryMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [actionMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
// Call all applicable loaders for the given matches, handling redirects,
|
||||
// errors, etc.
|
||||
async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace, initialHydration, flushSync, pendingActionResult) {
|
||||
// Figure out the right navigation we want to use for data loading
|
||||
let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
|
||||
// If this was a redirect from an action we don't have a "submission" but
|
||||
// we have it on the loading navigation so use that if available
|
||||
let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
|
||||
// If this is an uninterrupted revalidation, we remain in our current idle
|
||||
// state. If not, we need to switch to our loading state and load data,
|
||||
// preserving any new action data or existing action data (in the case of
|
||||
// a revalidation interrupting an actionReload)
|
||||
// If we have partialHydration enabled, then don't update the state for the
|
||||
// initial data load since it's not a "navigation"
|
||||
let shouldUpdateNavigationState = !isUninterruptedRevalidation && (!future.v7_partialHydration || !initialHydration);
|
||||
// When fog of war is enabled, we enter our `loading` state earlier so we
|
||||
// can discover new routes during the `loading` state. We skip this if
|
||||
// we've already run actions since we would have done our matching already.
|
||||
// If the children() function threw then, we want to proceed with the
|
||||
// partial matches it discovered.
|
||||
if (isFogOfWar) {
|
||||
if (shouldUpdateNavigationState) {
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
updateState(_extends({
|
||||
navigation: loadingNavigation
|
||||
}, actionData !== undefined ? {
|
||||
actionData
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[boundaryId]: discoverResult.error
|
||||
}
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, future.v7_partialHydration && initialHydration === true, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult);
|
||||
// Cancel pending deferreds for no-longer-matched routes or routes we're
|
||||
// about to reload. Note that if this is an action reload we would have
|
||||
// already cancelled all pending deferreds so this would be a no-op
|
||||
cancelActiveDeferreds(routeId => !(matches && matches.some(m => m.route.id === routeId)) || matchesToLoad && matchesToLoad.some(m => m.route.id === routeId));
|
||||
pendingNavigationLoadId = ++incrementingLoadId;
|
||||
// Short circuit if we have no loaders to run
|
||||
if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
completeNavigation(location, _extends({
|
||||
matches,
|
||||
loaderData: {},
|
||||
// Commit pending error if we're short circuiting
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null
|
||||
}, getActionDataForCommit(pendingActionResult), updatedFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (shouldUpdateNavigationState) {
|
||||
let updates = {};
|
||||
if (!isFogOfWar) {
|
||||
// Only update navigation/actionNData if we didn't already do it above
|
||||
updates.navigation = loadingNavigation;
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
if (actionData !== undefined) {
|
||||
updates.actionData = actionData;
|
||||
}
|
||||
}
|
||||
if (revalidatingFetchers.length > 0) {
|
||||
updates.fetchers = getUpdatedRevalidatingFetchers(revalidatingFetchers);
|
||||
}
|
||||
updateState(updates, {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
abortFetcher(rf.key);
|
||||
if (rf.controller) {
|
||||
// Fetchers use an independent AbortController so that aborting a fetcher
|
||||
// (via deleteFetcher) does not abort the triggering navigation that
|
||||
// triggered the revalidation
|
||||
fetchControllers.set(rf.key, rf.controller);
|
||||
}
|
||||
});
|
||||
// Proxy navigation abort through to revalidation fetchers
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(f => abortFetcher(f.key));
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, request);
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
// Clean up _after_ loaders have completed. Don't clean up if we short
|
||||
// circuited because fetchControllers would have been aborted and
|
||||
// reassigned to new controllers for the next navigation
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => fetchControllers.delete(rf.key));
|
||||
// If any loaders returned a redirect Response, start a new REPLACE navigation
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
// Wire up subscribers to update loaderData as promises settle
|
||||
activeDeferreds.forEach((deferredData, routeId) => {
|
||||
deferredData.subscribe(aborted => {
|
||||
// Note: No need to updateState here since the TrackedPromise on
|
||||
// loaderData is stable across resolve/reject
|
||||
// Remove this instance if we were aborted or if promises have settled
|
||||
if (aborted || deferredData.done) {
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Preserve SSR errors during partial hydration
|
||||
if (future.v7_partialHydration && initialHydration && state.errors) {
|
||||
errors = _extends({}, state.errors, errors);
|
||||
}
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
|
||||
let shouldUpdateFetchers = updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;
|
||||
return _extends({
|
||||
matches,
|
||||
loaderData,
|
||||
errors
|
||||
}, shouldUpdateFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {});
|
||||
}
|
||||
function getUpdatedActionData(pendingActionResult) {
|
||||
if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {
|
||||
// This is cast to `any` currently because `RouteData`uses any and it
|
||||
// would be a breaking change to use any.
|
||||
// TODO: v7 - change `RouteData` to use `unknown` instead of `any`
|
||||
return {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
};
|
||||
} else if (state.actionData) {
|
||||
if (Object.keys(state.actionData).length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return state.actionData;
|
||||
}
|
||||
}
|
||||
}
|
||||
function getUpdatedRevalidatingFetchers(revalidatingFetchers) {
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let fetcher = state.fetchers.get(rf.key);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, fetcher ? fetcher.data : undefined);
|
||||
state.fetchers.set(rf.key, revalidatingFetcher);
|
||||
});
|
||||
return new Map(state.fetchers);
|
||||
}
|
||||
// Trigger a fetcher load/submit for the given fetcher key
|
||||
function fetch(key, routeId, href, opts) {
|
||||
if (isServer) {
|
||||
throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
|
||||
}
|
||||
abortFetcher(key);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, future.v7_relativeSplatPath, routeId, opts == null ? void 0 : opts.relative);
|
||||
let matches = matchRoutes(routesToUse, normalizedPath, basename);
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, normalizedPath);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
if (!matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: normalizedPath
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
|
||||
if (error) {
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let match = getTargetMatch(matches, path);
|
||||
let preventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
handleFetcherAction(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
return;
|
||||
}
|
||||
// Store off the match so we can call it's shouldRevalidate on subsequent
|
||||
// revalidations
|
||||
fetchLoadMatches.set(key, {
|
||||
routeId,
|
||||
path
|
||||
});
|
||||
handleFetcherLoader(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
}
|
||||
// Call the action for the matched fetcher.submit(), and then handle redirects,
|
||||
// errors, and revalidation
|
||||
async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
interruptActiveLoads();
|
||||
fetchLoadMatches.delete(key);
|
||||
function detectAndHandle405Error(m) {
|
||||
if (!m.route.action && !m.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: submission.formMethod,
|
||||
pathname: path,
|
||||
routeId: routeId
|
||||
});
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if (!isFogOfWar && detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
// Put this fetcher into it's submitting state
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(requestMatches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
requestMatches = discoverResult.matches;
|
||||
match = getTargetMatch(requestMatches, path);
|
||||
if (detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Call the action for the fetcher
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let actionResults = await callDataStrategy("action", state, fetchRequest, [match], requestMatches, key);
|
||||
let actionResult = actionResults[match.route.id];
|
||||
if (fetchRequest.signal.aborted) {
|
||||
// We can delete this so long as we weren't aborted by our own fetcher
|
||||
// re-submit which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
return;
|
||||
}
|
||||
// When using v7_fetcherPersist, we don't want errors bubbling up to the UI
|
||||
// or redirects processed for unmounted fetchers so we just revert them to
|
||||
// idle
|
||||
if (future.v7_fetcherPersist && deletedFetchers.has(key)) {
|
||||
if (isRedirectResult(actionResult) || isErrorResult(actionResult)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
// Let SuccessResult's fall through for revalidation
|
||||
} else {
|
||||
if (isRedirectResult(actionResult)) {
|
||||
fetchControllers.delete(key);
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our action started, so that
|
||||
// should take precedence over this redirect navigation. We already
|
||||
// set isRevalidationRequired so all loaders for the new route should
|
||||
// fire unless opted out via shouldRevalidate
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission));
|
||||
return startRedirectNavigation(fetchRequest, actionResult, false, {
|
||||
fetcherSubmission: submission,
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
}
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(actionResult)) {
|
||||
setFetcherError(key, routeId, actionResult.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (isDeferredResult(actionResult)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
// Start the data load for current matches, or the next location if we're
|
||||
// in the middle of a navigation
|
||||
let nextLocation = state.navigation.location || state.location;
|
||||
let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let matches = state.navigation.state !== "idle" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;
|
||||
invariant(matches, "Didn't find any matches after fetcher action");
|
||||
let loadId = ++incrementingLoadId;
|
||||
fetchReloadIds.set(key, loadId);
|
||||
let loadFetcher = getLoadingFetcher(submission, actionResult.data);
|
||||
state.fetchers.set(key, loadFetcher);
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, false, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, [match.route.id, actionResult]);
|
||||
// Put all revalidating fetchers into the loading state, except for the
|
||||
// current fetcher which we want to keep in it's current loading state which
|
||||
// contains it's action submission info + action data
|
||||
revalidatingFetchers.filter(rf => rf.key !== key).forEach(rf => {
|
||||
let staleKey = rf.key;
|
||||
let existingFetcher = state.fetchers.get(staleKey);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, existingFetcher ? existingFetcher.data : undefined);
|
||||
state.fetchers.set(staleKey, revalidatingFetcher);
|
||||
abortFetcher(staleKey);
|
||||
if (rf.controller) {
|
||||
fetchControllers.set(staleKey, rf.controller);
|
||||
}
|
||||
});
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
|
||||
abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, revalidationRequest);
|
||||
if (abortController.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
abortController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchControllers.delete(key);
|
||||
revalidatingFetchers.forEach(r => fetchControllers.delete(r.key));
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, undefined, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
// Since we let revalidations complete even if the submitting fetcher was
|
||||
// deleted, only put it back to idle if it hasn't been deleted
|
||||
if (state.fetchers.has(key)) {
|
||||
let doneFetcher = getDoneFetcher(actionResult.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
abortStaleFetchLoads(loadId);
|
||||
// If we are currently in a navigation loading state and this fetcher is
|
||||
// more recent than the navigation, we want the newer data so abort the
|
||||
// navigation and complete it with the fetcher data
|
||||
if (state.navigation.state === "loading" && loadId > pendingNavigationLoadId) {
|
||||
invariant(pendingAction, "Expected pending action");
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
completeNavigation(state.navigation.location, {
|
||||
matches,
|
||||
loaderData,
|
||||
errors,
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
} else {
|
||||
// otherwise just update with the fetcher data, preserving any existing
|
||||
// loaderData for loaders that did not need to reload. We have to
|
||||
// manually merge here since we aren't going through completeNavigation
|
||||
updateState({
|
||||
errors,
|
||||
loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
isRevalidationRequired = false;
|
||||
}
|
||||
}
|
||||
// Call the matched loader for fetcher.load(), handling redirects, errors, etc.
|
||||
async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
match = getTargetMatch(matches, path);
|
||||
}
|
||||
}
|
||||
// Call the loader for this fetcher route match
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let results = await callDataStrategy("loader", state, fetchRequest, [match], matches, key);
|
||||
let result = results[match.route.id];
|
||||
// Deferred isn't supported for fetcher loads, await everything and treat it
|
||||
// as a normal load. resolveDeferredData will return undefined if this
|
||||
// fetcher gets aborted, so we just leave result untouched and short circuit
|
||||
// below if that happens
|
||||
if (isDeferredResult(result)) {
|
||||
result = (await resolveDeferredData(result, fetchRequest.signal, true)) || result;
|
||||
}
|
||||
// We can delete this so long as we weren't aborted by our our own fetcher
|
||||
// re-load which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
if (fetchRequest.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
// We don't want errors bubbling up or redirects followed for unmounted
|
||||
// fetchers, so short circuit here if it was removed from the UI
|
||||
if (deletedFetchers.has(key)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
// If the loader threw a redirect Response, start a new REPLACE navigation
|
||||
if (isRedirectResult(result)) {
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our loader started, so that
|
||||
// should take precedence over this redirect navigation
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
await startRedirectNavigation(fetchRequest, result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(result)) {
|
||||
setFetcherError(key, routeId, result.error);
|
||||
return;
|
||||
}
|
||||
invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
|
||||
// Put the fetcher back into an idle state
|
||||
updateFetcherState(key, getDoneFetcher(result.data));
|
||||
}
|
||||
/**
|
||||
* Utility function to handle redirects returned from an action or loader.
|
||||
* Normally, a redirect "replaces" the navigation that triggered it. So, for
|
||||
* example:
|
||||
*
|
||||
* - user is on /a
|
||||
* - user clicks a link to /b
|
||||
* - loader for /b redirects to /c
|
||||
*
|
||||
* In a non-JS app the browser would track the in-flight navigation to /b and
|
||||
* then replace it with /c when it encountered the redirect response. In
|
||||
* the end it would only ever update the URL bar with /c.
|
||||
*
|
||||
* In client-side routing using pushState/replaceState, we aim to emulate
|
||||
* this behavior and we also do not update history until the end of the
|
||||
* navigation (including processed redirects). This means that we never
|
||||
* actually touch history until we've processed redirects, so we just use
|
||||
* the history action from the original navigation (PUSH or REPLACE).
|
||||
*/
|
||||
async function startRedirectNavigation(request, redirect, isNavigation, _temp2) {
|
||||
let {
|
||||
submission,
|
||||
fetcherSubmission,
|
||||
preventScrollReset,
|
||||
replace
|
||||
} = _temp2 === void 0 ? {} : _temp2;
|
||||
if (redirect.response.headers.has("X-Remix-Revalidate")) {
|
||||
isRevalidationRequired = true;
|
||||
}
|
||||
let location = redirect.response.headers.get("Location");
|
||||
invariant(location, "Expected a Location header on the redirect Response");
|
||||
location = normalizeRedirectLocation(location, new URL(request.url), basename, init.history);
|
||||
let redirectLocation = createLocation(state.location, location, {
|
||||
_isRedirect: true
|
||||
});
|
||||
if (isBrowser) {
|
||||
let isDocumentReload = false;
|
||||
if (redirect.response.headers.has("X-Remix-Reload-Document")) {
|
||||
// Hard reload if the response contained X-Remix-Reload-Document
|
||||
isDocumentReload = true;
|
||||
} else if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
const url = init.history.createURL(location);
|
||||
isDocumentReload =
|
||||
// Hard reload if it's an absolute URL to a new origin
|
||||
url.origin !== routerWindow.location.origin ||
|
||||
// Hard reload if it's an absolute URL that does not match our basename
|
||||
stripBasename(url.pathname, basename) == null;
|
||||
}
|
||||
if (isDocumentReload) {
|
||||
if (replace) {
|
||||
routerWindow.location.replace(location);
|
||||
} else {
|
||||
routerWindow.location.assign(location);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
// There's no need to abort on redirects, since we don't detect the
|
||||
// redirect until the action/loaders have settled
|
||||
pendingNavigationController = null;
|
||||
let redirectHistoryAction = replace === true || redirect.response.headers.has("X-Remix-Replace") ? Action.Replace : Action.Push;
|
||||
// Use the incoming submission if provided, fallback on the active one in
|
||||
// state.navigation
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType
|
||||
} = state.navigation;
|
||||
if (!submission && !fetcherSubmission && formMethod && formAction && formEncType) {
|
||||
submission = getSubmissionFromNavigation(state.navigation);
|
||||
}
|
||||
// If this was a 307/308 submission we want to preserve the HTTP method and
|
||||
// re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
|
||||
// redirected location
|
||||
let activeSubmission = submission || fetcherSubmission;
|
||||
if (redirectPreserveMethodStatusCodes.has(redirect.response.status) && activeSubmission && isMutationMethod(activeSubmission.formMethod)) {
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
submission: _extends({}, activeSubmission, {
|
||||
formAction: location
|
||||
}),
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
} else {
|
||||
// If we have a navigation submission, we will preserve it through the
|
||||
// redirect navigation
|
||||
let overrideNavigation = getLoadingNavigation(redirectLocation, submission);
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
overrideNavigation,
|
||||
// Send fetcher submissions through for shouldRevalidate
|
||||
fetcherSubmission,
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
// Utility wrapper for calling dataStrategy client-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, state, request, matchesToLoad, matches, fetcherKey) {
|
||||
let results;
|
||||
let dataResults = {};
|
||||
try {
|
||||
results = await callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties);
|
||||
} catch (e) {
|
||||
// If the outer dataStrategy method throws, just return the error for all
|
||||
// matches - and it'll naturally bubble to the root
|
||||
matchesToLoad.forEach(m => {
|
||||
dataResults[m.route.id] = {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
});
|
||||
return dataResults;
|
||||
}
|
||||
for (let [routeId, result] of Object.entries(results)) {
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
dataResults[routeId] = {
|
||||
type: ResultType.redirect,
|
||||
response: normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, future.v7_relativeSplatPath)
|
||||
};
|
||||
} else {
|
||||
dataResults[routeId] = await convertDataStrategyResultToDataResult(result);
|
||||
}
|
||||
}
|
||||
return dataResults;
|
||||
}
|
||||
async function callLoadersAndMaybeResolveData(state, matches, matchesToLoad, fetchersToLoad, request) {
|
||||
let currentMatches = state.matches;
|
||||
// Kick off loaders and fetchers in parallel
|
||||
let loaderResultsPromise = callDataStrategy("loader", state, request, matchesToLoad, matches, null);
|
||||
let fetcherResultsPromise = Promise.all(fetchersToLoad.map(async f => {
|
||||
if (f.matches && f.match && f.controller) {
|
||||
let results = await callDataStrategy("loader", state, createClientSideRequest(init.history, f.path, f.controller.signal), [f.match], f.matches, f.key);
|
||||
let result = results[f.match.route.id];
|
||||
// Fetcher results are keyed by fetcher key from here on out, not routeId
|
||||
return {
|
||||
[f.key]: result
|
||||
};
|
||||
} else {
|
||||
return Promise.resolve({
|
||||
[f.key]: {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(404, {
|
||||
pathname: f.path
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}));
|
||||
let loaderResults = await loaderResultsPromise;
|
||||
let fetcherResults = (await fetcherResultsPromise).reduce((acc, r) => Object.assign(acc, r), {});
|
||||
await Promise.all([resolveNavigationDeferredResults(matches, loaderResults, request.signal, currentMatches, state.loaderData), resolveFetcherDeferredResults(matches, fetcherResults, fetchersToLoad)]);
|
||||
return {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
};
|
||||
}
|
||||
function interruptActiveLoads() {
|
||||
// Every interruption triggers a revalidation
|
||||
isRevalidationRequired = true;
|
||||
// Cancel pending route-level deferreds and mark cancelled routes for
|
||||
// revalidation
|
||||
cancelledDeferredRoutes.push(...cancelActiveDeferreds());
|
||||
// Abort in-flight fetcher loads
|
||||
fetchLoadMatches.forEach((_, key) => {
|
||||
if (fetchControllers.has(key)) {
|
||||
cancelledFetcherLoads.add(key);
|
||||
}
|
||||
abortFetcher(key);
|
||||
});
|
||||
}
|
||||
function updateFetcherState(key, fetcher, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state.fetchers.set(key, fetcher);
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function setFetcherError(key, routeId, error, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
let boundaryMatch = findNearestBoundary(state.matches, routeId);
|
||||
deleteFetcher(key);
|
||||
updateState({
|
||||
errors: {
|
||||
[boundaryMatch.route.id]: error
|
||||
},
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function getFetcher(key) {
|
||||
activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
|
||||
// If this fetcher was previously marked for deletion, unmark it since we
|
||||
// have a new instance
|
||||
if (deletedFetchers.has(key)) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
return state.fetchers.get(key) || IDLE_FETCHER;
|
||||
}
|
||||
function deleteFetcher(key) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
// Don't abort the controller if this is a deletion of a fetcher.submit()
|
||||
// in it's loading phase since - we don't want to abort the corresponding
|
||||
// revalidation and want them to complete and land
|
||||
if (fetchControllers.has(key) && !(fetcher && fetcher.state === "loading" && fetchReloadIds.has(key))) {
|
||||
abortFetcher(key);
|
||||
}
|
||||
fetchLoadMatches.delete(key);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchRedirectIds.delete(key);
|
||||
// If we opted into the flag we can clear this now since we're calling
|
||||
// deleteFetcher() at the end of updateState() and we've already handed the
|
||||
// deleted fetcher keys off to the data layer.
|
||||
// If not, we're eagerly calling deleteFetcher() and we need to keep this
|
||||
// Set populated until the next updateState call, and we'll clear
|
||||
// `deletedFetchers` then
|
||||
if (future.v7_fetcherPersist) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
cancelledFetcherLoads.delete(key);
|
||||
state.fetchers.delete(key);
|
||||
}
|
||||
function deleteFetcherAndUpdateState(key) {
|
||||
let count = (activeFetchers.get(key) || 0) - 1;
|
||||
if (count <= 0) {
|
||||
activeFetchers.delete(key);
|
||||
deletedFetchers.add(key);
|
||||
if (!future.v7_fetcherPersist) {
|
||||
deleteFetcher(key);
|
||||
}
|
||||
} else {
|
||||
activeFetchers.set(key, count);
|
||||
}
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
}
|
||||
function abortFetcher(key) {
|
||||
let controller = fetchControllers.get(key);
|
||||
if (controller) {
|
||||
controller.abort();
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
}
|
||||
function markFetchersDone(keys) {
|
||||
for (let key of keys) {
|
||||
let fetcher = getFetcher(key);
|
||||
let doneFetcher = getDoneFetcher(fetcher.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
}
|
||||
function markFetchRedirectsDone() {
|
||||
let doneKeys = [];
|
||||
let updatedFetchers = false;
|
||||
for (let key of fetchRedirectIds) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
fetchRedirectIds.delete(key);
|
||||
doneKeys.push(key);
|
||||
updatedFetchers = true;
|
||||
}
|
||||
}
|
||||
markFetchersDone(doneKeys);
|
||||
return updatedFetchers;
|
||||
}
|
||||
function abortStaleFetchLoads(landedId) {
|
||||
let yeetedKeys = [];
|
||||
for (let [key, id] of fetchReloadIds) {
|
||||
if (id < landedId) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
abortFetcher(key);
|
||||
fetchReloadIds.delete(key);
|
||||
yeetedKeys.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
markFetchersDone(yeetedKeys);
|
||||
return yeetedKeys.length > 0;
|
||||
}
|
||||
function getBlocker(key, fn) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
if (blockerFunctions.get(key) !== fn) {
|
||||
blockerFunctions.set(key, fn);
|
||||
}
|
||||
return blocker;
|
||||
}
|
||||
function deleteBlocker(key) {
|
||||
state.blockers.delete(key);
|
||||
blockerFunctions.delete(key);
|
||||
}
|
||||
// Utility function to update blockers, ensuring valid state transitions
|
||||
function updateBlocker(key, newBlocker) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
// Poor mans state machine :)
|
||||
// https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
|
||||
invariant(blocker.state === "unblocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "proceeding" || blocker.state === "blocked" && newBlocker.state === "unblocked" || blocker.state === "proceeding" && newBlocker.state === "unblocked", "Invalid blocker state transition: " + blocker.state + " -> " + newBlocker.state);
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(key, newBlocker);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
function shouldBlockNavigation(_ref2) {
|
||||
let {
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
} = _ref2;
|
||||
if (blockerFunctions.size === 0) {
|
||||
return;
|
||||
}
|
||||
// We ony support a single active blocker at the moment since we don't have
|
||||
// any compelling use cases for multi-blocker yet
|
||||
if (blockerFunctions.size > 1) {
|
||||
warning(false, "A router only supports one blocker at a time");
|
||||
}
|
||||
let entries = Array.from(blockerFunctions.entries());
|
||||
let [blockerKey, blockerFunction] = entries[entries.length - 1];
|
||||
let blocker = state.blockers.get(blockerKey);
|
||||
if (blocker && blocker.state === "proceeding") {
|
||||
// If the blocker is currently proceeding, we don't need to re-check
|
||||
// it and can let this navigation continue
|
||||
return;
|
||||
}
|
||||
// At this point, we know we're unblocked/blocked so we need to check the
|
||||
// user-provided blocker function
|
||||
if (blockerFunction({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
})) {
|
||||
return blockerKey;
|
||||
}
|
||||
}
|
||||
function handleNavigational404(pathname) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(routesToUse);
|
||||
// Cancel all pending deferred on 404s since we don't keep any routes
|
||||
cancelActiveDeferreds();
|
||||
return {
|
||||
notFoundMatches: matches,
|
||||
route,
|
||||
error
|
||||
};
|
||||
}
|
||||
function cancelActiveDeferreds(predicate) {
|
||||
let cancelledRouteIds = [];
|
||||
activeDeferreds.forEach((dfd, routeId) => {
|
||||
if (!predicate || predicate(routeId)) {
|
||||
// Cancel the deferred - but do not remove from activeDeferreds here -
|
||||
// we rely on the subscribers to do that so our tests can assert proper
|
||||
// cleanup via _internalActiveDeferreds
|
||||
dfd.cancel();
|
||||
cancelledRouteIds.push(routeId);
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
return cancelledRouteIds;
|
||||
}
|
||||
// Opt in to capturing and reporting scroll positions during navigations,
|
||||
// used by the <ScrollRestoration> component
|
||||
function enableScrollRestoration(positions, getPosition, getKey) {
|
||||
savedScrollPositions = positions;
|
||||
getScrollPosition = getPosition;
|
||||
getScrollRestorationKey = getKey || null;
|
||||
// Perform initial hydration scroll restoration, since we miss the boat on
|
||||
// the initial updateState() because we've not yet rendered <ScrollRestoration/>
|
||||
// and therefore have no savedScrollPositions available
|
||||
if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {
|
||||
initialScrollRestored = true;
|
||||
let y = getSavedScrollPosition(state.location, state.matches);
|
||||
if (y != null) {
|
||||
updateState({
|
||||
restoreScrollPosition: y
|
||||
});
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
savedScrollPositions = null;
|
||||
getScrollPosition = null;
|
||||
getScrollRestorationKey = null;
|
||||
};
|
||||
}
|
||||
function getScrollKey(location, matches) {
|
||||
if (getScrollRestorationKey) {
|
||||
let key = getScrollRestorationKey(location, matches.map(m => convertRouteMatchToUiMatch(m, state.loaderData)));
|
||||
return key || location.key;
|
||||
}
|
||||
return location.key;
|
||||
}
|
||||
function saveScrollPosition(location, matches) {
|
||||
if (savedScrollPositions && getScrollPosition) {
|
||||
let key = getScrollKey(location, matches);
|
||||
savedScrollPositions[key] = getScrollPosition();
|
||||
}
|
||||
}
|
||||
function getSavedScrollPosition(location, matches) {
|
||||
if (savedScrollPositions) {
|
||||
let key = getScrollKey(location, matches);
|
||||
let y = savedScrollPositions[key];
|
||||
if (typeof y === "number") {
|
||||
return y;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function checkFogOfWar(matches, routesToUse, pathname) {
|
||||
if (patchRoutesOnNavigationImpl) {
|
||||
if (!matches) {
|
||||
let fogMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: fogMatches || []
|
||||
};
|
||||
} else {
|
||||
if (Object.keys(matches[0].params).length > 0) {
|
||||
// If we matched a dynamic param or a splat, it might only be because
|
||||
// we haven't yet discovered other routes that would match with a
|
||||
// higher score. Call patchRoutesOnNavigation just to be sure
|
||||
let partialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: partialMatches
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
active: false,
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
async function discoverRoutes(matches, pathname, signal, fetcherKey) {
|
||||
if (!patchRoutesOnNavigationImpl) {
|
||||
return {
|
||||
type: "success",
|
||||
matches
|
||||
};
|
||||
}
|
||||
let partialMatches = matches;
|
||||
while (true) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let localManifest = manifest;
|
||||
try {
|
||||
await patchRoutesOnNavigationImpl({
|
||||
signal,
|
||||
path: pathname,
|
||||
matches: partialMatches,
|
||||
fetcherKey,
|
||||
patch: (routeId, children) => {
|
||||
if (signal.aborted) return;
|
||||
patchRoutesImpl(routeId, children, routesToUse, localManifest, mapRouteProperties);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
error: e,
|
||||
partialMatches
|
||||
};
|
||||
} finally {
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity so when we `updateState` at the end of
|
||||
// this navigation/fetch `router.routes` will be a new identity and
|
||||
// trigger a re-run of memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR && !signal.aborted) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
}
|
||||
}
|
||||
if (signal.aborted) {
|
||||
return {
|
||||
type: "aborted"
|
||||
};
|
||||
}
|
||||
let newMatches = matchRoutes(routesToUse, pathname, basename);
|
||||
if (newMatches) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: newMatches
|
||||
};
|
||||
}
|
||||
let newPartialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
// Avoid loops if the second pass results in the same partial matches
|
||||
if (!newPartialMatches || partialMatches.length === newPartialMatches.length && partialMatches.every((m, i) => m.route.id === newPartialMatches[i].route.id)) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
partialMatches = newPartialMatches;
|
||||
}
|
||||
}
|
||||
function _internalSetRoutes(newRoutes) {
|
||||
manifest = {};
|
||||
inFlightDataRoutes = convertRoutesToDataRoutes(newRoutes, mapRouteProperties, undefined, manifest);
|
||||
}
|
||||
function patchRoutes(routeId, children) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties);
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity and trigger a reflow via `updateState`
|
||||
// to re-run memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
updateState({});
|
||||
}
|
||||
}
|
||||
router = {
|
||||
get basename() {
|
||||
return basename;
|
||||
},
|
||||
get future() {
|
||||
return future;
|
||||
},
|
||||
get state() {
|
||||
return state;
|
||||
},
|
||||
get routes() {
|
||||
return dataRoutes;
|
||||
},
|
||||
get window() {
|
||||
return routerWindow;
|
||||
},
|
||||
initialize,
|
||||
subscribe,
|
||||
enableScrollRestoration,
|
||||
navigate,
|
||||
fetch,
|
||||
revalidate,
|
||||
// Passthrough to history-aware createHref used by useHref so we get proper
|
||||
// hash-aware URLs in DOM paths
|
||||
createHref: to => init.history.createHref(to),
|
||||
encodeLocation: to => init.history.encodeLocation(to),
|
||||
getFetcher,
|
||||
deleteFetcher: deleteFetcherAndUpdateState,
|
||||
dispose,
|
||||
getBlocker,
|
||||
deleteBlocker,
|
||||
patchRoutes,
|
||||
_internalFetchControllers: fetchControllers,
|
||||
_internalActiveDeferreds: activeDeferreds,
|
||||
// TODO: Remove setRoutes, it's temporary to avoid dealing with
|
||||
// updating the tree while validating the update algorithm.
|
||||
_internalSetRoutes
|
||||
};
|
||||
return router;
|
||||
}
|
||||
//#endregion
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createStaticHandler
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
|
||||
function createStaticHandler(routes, opts) {
|
||||
invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
|
||||
let manifest = {};
|
||||
let basename = (opts ? opts.basename : null) || "/";
|
||||
let mapRouteProperties;
|
||||
if (opts != null && opts.mapRouteProperties) {
|
||||
mapRouteProperties = opts.mapRouteProperties;
|
||||
} else if (opts != null && opts.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = opts.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_relativeSplatPath: false,
|
||||
v7_throwAbortReason: false
|
||||
}, opts ? opts.future : null);
|
||||
let dataRoutes = convertRoutesToDataRoutes(routes, mapRouteProperties, undefined, manifest);
|
||||
/**
|
||||
* The query() method is intended for document requests, in which we want to
|
||||
* call an optional action and potentially multiple loaders for all nested
|
||||
* routes. It returns a StaticHandlerContext object, which is very similar
|
||||
* to the router state (location, loaderData, actionData, errors, etc.) and
|
||||
* also adds SSR-specific information such as the statusCode and headers
|
||||
* from action/loaders Responses.
|
||||
*
|
||||
* It _should_ never throw and should report all errors through the
|
||||
* returned context.errors object, properly associating errors to their error
|
||||
* boundary. Additionally, it tracks _deepestRenderedBoundaryId which can be
|
||||
* used to emulate React error boundaries during SSr by performing a second
|
||||
* pass only down to the boundaryId.
|
||||
*
|
||||
* The one exception where we do not return a StaticHandlerContext is when a
|
||||
* redirect response is returned or thrown from any action/loader. We
|
||||
* propagate that out and return the raw Response so the HTTP server can
|
||||
* return it directly.
|
||||
*
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
* - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
|
||||
* the bubbling of errors which allows single-fetch-type implementations
|
||||
* where the client will handle the bubbling and we may need to return data
|
||||
* for the handling route
|
||||
*/
|
||||
async function query(request, _temp3) {
|
||||
let {
|
||||
requestContext,
|
||||
skipLoaderErrorBubbling,
|
||||
dataStrategy
|
||||
} = _temp3 === void 0 ? {} : _temp3;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD") {
|
||||
let error = getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
let {
|
||||
matches: methodNotAllowedMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: methodNotAllowedMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
} else if (!matches) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
let {
|
||||
matches: notFoundMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, skipLoaderErrorBubbling === true, null);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
// When returning StaticHandlerContext, we patch back in the location here
|
||||
// since we need it for React Context. But this helps keep our submit and
|
||||
// loadRouteData operating on a Request instead of a Location
|
||||
return _extends({
|
||||
location,
|
||||
basename
|
||||
}, result);
|
||||
}
|
||||
/**
|
||||
* The queryRoute() method is intended for targeted route requests, either
|
||||
* for fetch ?_data requests or resource route requests. In this case, we
|
||||
* are only ever calling a single action or loader, and we are returning the
|
||||
* returned value directly. In most cases, this will be a Response returned
|
||||
* from the action/loader, but it may be a primitive or other value as well -
|
||||
* and in such cases the calling context should handle that accordingly.
|
||||
*
|
||||
* We do respect the throw/return differentiation, so if an action/loader
|
||||
* throws, then this method will throw the value. This is important so we
|
||||
* can do proper boundary identification in Remix where a thrown Response
|
||||
* must go to the Catch Boundary but a returned Response is happy-path.
|
||||
*
|
||||
* One thing to note is that any Router-initiated Errors that make sense
|
||||
* to associate with a status code will be thrown as an ErrorResponse
|
||||
* instance which include the raw Error, such that the calling context can
|
||||
* serialize the error as they see fit while including the proper response
|
||||
* code. Examples here are 404 and 405 errors that occur prior to reaching
|
||||
* any user-defined loaders.
|
||||
*
|
||||
* - `opts.routeId` allows you to specify the specific route handler to call.
|
||||
* If not provided the handler will determine the proper route by matching
|
||||
* against `request.url`
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
*/
|
||||
async function queryRoute(request, _temp4) {
|
||||
let {
|
||||
routeId,
|
||||
requestContext,
|
||||
dataStrategy
|
||||
} = _temp4 === void 0 ? {} : _temp4;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD" && method !== "OPTIONS") {
|
||||
throw getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
} else if (!matches) {
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let match = routeId ? matches.find(m => m.route.id === routeId) : getTargetMatch(matches, location);
|
||||
if (routeId && !match) {
|
||||
throw getInternalRouterError(403, {
|
||||
pathname: location.pathname,
|
||||
routeId
|
||||
});
|
||||
} else if (!match) {
|
||||
// This should never hit I don't think?
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, false, match);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
let error = result.errors ? Object.values(result.errors)[0] : undefined;
|
||||
if (error !== undefined) {
|
||||
// If we got back result.errors, that means the loader/action threw
|
||||
// _something_ that wasn't a Response, but it's not guaranteed/required
|
||||
// to be an `instanceof Error` either, so we have to use throw here to
|
||||
// preserve the "error" state outside of queryImpl.
|
||||
throw error;
|
||||
}
|
||||
// Pick off the right state value to return
|
||||
if (result.actionData) {
|
||||
return Object.values(result.actionData)[0];
|
||||
}
|
||||
if (result.loaderData) {
|
||||
var _result$activeDeferre;
|
||||
let data = Object.values(result.loaderData)[0];
|
||||
if ((_result$activeDeferre = result.activeDeferreds) != null && _result$activeDeferre[match.route.id]) {
|
||||
data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
|
||||
}
|
||||
return data;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
async function queryImpl(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {
|
||||
invariant(request.signal, "query()/queryRoute() requests must contain an AbortController signal");
|
||||
try {
|
||||
if (isMutationMethod(request.method.toLowerCase())) {
|
||||
let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch != null);
|
||||
return result;
|
||||
}
|
||||
let result = await loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch);
|
||||
return isResponse(result) ? result : _extends({}, result, {
|
||||
actionData: null,
|
||||
actionHeaders: {}
|
||||
});
|
||||
} catch (e) {
|
||||
// If the user threw/returned a Response in callLoaderOrAction for a
|
||||
// `queryRoute` call, we throw the `DataStrategyResult` to bail out early
|
||||
// and then return or throw the raw Response here accordingly
|
||||
if (isDataStrategyResult(e) && isResponse(e.result)) {
|
||||
if (e.type === ResultType.error) {
|
||||
throw e.result;
|
||||
}
|
||||
return e.result;
|
||||
}
|
||||
// Redirects are always returned since they don't propagate to catch
|
||||
// boundaries
|
||||
if (isRedirectResponse(e)) {
|
||||
return e;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
async function submit(request, matches, actionMatch, requestContext, dataStrategy, skipLoaderErrorBubbling, isRouteRequest) {
|
||||
let result;
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: actionMatch.route.id
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", request, [actionMatch], matches, isRouteRequest, requestContext, dataStrategy);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
// Uhhhh - this should never happen, we should always throw these from
|
||||
// callLoaderOrAction, but the type narrowing here keeps TS happy and we
|
||||
// can get back on the "throw all redirect responses" train here should
|
||||
// this ever happen :/
|
||||
throw new Response(null, {
|
||||
status: result.response.status,
|
||||
headers: {
|
||||
Location: result.response.headers.get("Location")
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
let error = getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
}
|
||||
if (isRouteRequest) {
|
||||
// Note: This should only be non-Response values if we get here, since
|
||||
// isRouteRequest should throw any Response received in callLoaderOrAction
|
||||
if (isErrorResult(result)) {
|
||||
throw result.error;
|
||||
}
|
||||
return {
|
||||
matches: [actionMatch],
|
||||
loaderData: {},
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
},
|
||||
errors: null,
|
||||
// Note: statusCode + headers are unused here since queryRoute will
|
||||
// return the raw Response or value
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
// Create a GET request for the loaders
|
||||
let loaderRequest = new Request(request.url, {
|
||||
headers: request.headers,
|
||||
redirect: request.redirect,
|
||||
signal: request.signal
|
||||
});
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = skipLoaderErrorBubbling ? actionMatch : findNearestBoundary(matches, actionMatch.route.id);
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null, [boundaryMatch.route.id, result]);
|
||||
// action status codes take precedence over loader status codes
|
||||
return _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(result.error) ? result.error.status : result.statusCode != null ? result.statusCode : 500,
|
||||
actionData: null,
|
||||
actionHeaders: _extends({}, result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {})
|
||||
});
|
||||
}
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null);
|
||||
return _extends({}, context, {
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
}
|
||||
}, result.statusCode ? {
|
||||
statusCode: result.statusCode
|
||||
} : {}, {
|
||||
actionHeaders: result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {}
|
||||
});
|
||||
}
|
||||
async function loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch, pendingActionResult) {
|
||||
let isRouteRequest = routeMatch != null;
|
||||
// Short circuit if we have no loaders to run (queryRoute())
|
||||
if (isRouteRequest && !(routeMatch != null && routeMatch.route.loader) && !(routeMatch != null && routeMatch.route.lazy)) {
|
||||
throw getInternalRouterError(400, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: routeMatch == null ? void 0 : routeMatch.route.id
|
||||
});
|
||||
}
|
||||
let requestMatches = routeMatch ? [routeMatch] : pendingActionResult && isErrorResult(pendingActionResult[1]) ? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]) : matches;
|
||||
let matchesToLoad = requestMatches.filter(m => m.route.loader || m.route.lazy);
|
||||
// Short circuit if we have no loaders to run (query())
|
||||
if (matchesToLoad.length === 0) {
|
||||
return {
|
||||
matches,
|
||||
// Add a null for all matched routes for proper revalidation on the client
|
||||
loaderData: matches.reduce((acc, m) => Object.assign(acc, {
|
||||
[m.route.id]: null
|
||||
}), {}),
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null,
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let results = await callDataStrategy("loader", request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy);
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
// Process and commit output from loaders
|
||||
let activeDeferreds = new Map();
|
||||
let context = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling);
|
||||
// Add a null for any non-loader matches for proper revalidation on the client
|
||||
let executedLoaders = new Set(matchesToLoad.map(match => match.route.id));
|
||||
matches.forEach(match => {
|
||||
if (!executedLoaders.has(match.route.id)) {
|
||||
context.loaderData[match.route.id] = null;
|
||||
}
|
||||
});
|
||||
return _extends({}, context, {
|
||||
matches,
|
||||
activeDeferreds: activeDeferreds.size > 0 ? Object.fromEntries(activeDeferreds.entries()) : null
|
||||
});
|
||||
}
|
||||
// Utility wrapper for calling dataStrategy server-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy) {
|
||||
let results = await callDataStrategyImpl(dataStrategy || defaultDataStrategy, type, null, request, matchesToLoad, matches, null, manifest, mapRouteProperties, requestContext);
|
||||
let dataResults = {};
|
||||
await Promise.all(matches.map(async match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let result = results[match.route.id];
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
// Throw redirects and let the server handle them with an HTTP redirect
|
||||
throw normalizeRelativeRoutingRedirectResponse(response, request, match.route.id, matches, basename, future.v7_relativeSplatPath);
|
||||
}
|
||||
if (isResponse(result.result) && isRouteRequest) {
|
||||
// For SSR single-route requests, we want to hand Responses back
|
||||
// directly without unwrapping
|
||||
throw result;
|
||||
}
|
||||
dataResults[match.route.id] = await convertDataStrategyResultToDataResult(result);
|
||||
}));
|
||||
return dataResults;
|
||||
}
|
||||
return {
|
||||
dataRoutes,
|
||||
query,
|
||||
queryRoute
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Helpers
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
/**
|
||||
* Given an existing StaticHandlerContext and an error thrown at render time,
|
||||
* provide an updated StaticHandlerContext suitable for a second SSR render
|
||||
*/
|
||||
function getStaticContextFromError(routes, context, error) {
|
||||
let newContext = _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(error) ? error.status : 500,
|
||||
errors: {
|
||||
[context._deepestRenderedBoundaryId || routes[0].id]: error
|
||||
}
|
||||
});
|
||||
return newContext;
|
||||
}
|
||||
function throwStaticHandlerAbortedError(request, isRouteRequest, future) {
|
||||
if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
|
||||
throw request.signal.reason;
|
||||
}
|
||||
let method = isRouteRequest ? "queryRoute" : "query";
|
||||
throw new Error(method + "() call aborted: " + request.method + " " + request.url);
|
||||
}
|
||||
function isSubmissionNavigation(opts) {
|
||||
return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
|
||||
}
|
||||
function normalizeTo(location, matches, basename, prependBasename, to, v7_relativeSplatPath, fromRouteId, relative) {
|
||||
let contextualMatches;
|
||||
let activeRouteMatch;
|
||||
if (fromRouteId) {
|
||||
// Grab matches up to the calling route so our route-relative logic is
|
||||
// relative to the correct source route
|
||||
contextualMatches = [];
|
||||
for (let match of matches) {
|
||||
contextualMatches.push(match);
|
||||
if (match.route.id === fromRouteId) {
|
||||
activeRouteMatch = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
contextualMatches = matches;
|
||||
activeRouteMatch = matches[matches.length - 1];
|
||||
}
|
||||
// Resolve the relative path
|
||||
let path = resolveTo(to ? to : ".", getResolveToMatches(contextualMatches, v7_relativeSplatPath), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
|
||||
// When `to` is not specified we inherit search/hash from the current
|
||||
// location, unlike when to="." and we just inherit the path.
|
||||
// See https://github.com/remix-run/remix/issues/927
|
||||
if (to == null) {
|
||||
path.search = location.search;
|
||||
path.hash = location.hash;
|
||||
}
|
||||
// Account for `?index` params when routing to the current location
|
||||
if ((to == null || to === "" || to === ".") && activeRouteMatch) {
|
||||
let nakedIndex = hasNakedIndexQuery(path.search);
|
||||
if (activeRouteMatch.route.index && !nakedIndex) {
|
||||
// Add one when we're targeting an index route
|
||||
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
|
||||
} else if (!activeRouteMatch.route.index && nakedIndex) {
|
||||
// Remove existing ones when we're not
|
||||
let params = new URLSearchParams(path.search);
|
||||
let indexValues = params.getAll("index");
|
||||
params.delete("index");
|
||||
indexValues.filter(v => v).forEach(v => params.append("index", v));
|
||||
let qs = params.toString();
|
||||
path.search = qs ? "?" + qs : "";
|
||||
}
|
||||
}
|
||||
// If we're operating within a basename, prepend it to the pathname. If
|
||||
// this is a root navigation, then just use the raw basename which allows
|
||||
// the basename to have full control over the presence of a trailing slash
|
||||
// on root actions
|
||||
if (prependBasename && basename !== "/") {
|
||||
path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
|
||||
}
|
||||
return createPath(path);
|
||||
}
|
||||
// Normalize navigation options by converting formMethod=GET formData objects to
|
||||
// URLSearchParams so they behave identically to links with query params
|
||||
function normalizeNavigateOptions(normalizeFormMethod, isFetcher, path, opts) {
|
||||
// Return location verbatim on non-submission navigations
|
||||
if (!opts || !isSubmissionNavigation(opts)) {
|
||||
return {
|
||||
path
|
||||
};
|
||||
}
|
||||
if (opts.formMethod && !isValidMethod(opts.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
error: getInternalRouterError(405, {
|
||||
method: opts.formMethod
|
||||
})
|
||||
};
|
||||
}
|
||||
let getInvalidBodyError = () => ({
|
||||
path,
|
||||
error: getInternalRouterError(400, {
|
||||
type: "invalid-body"
|
||||
})
|
||||
});
|
||||
// Create a Submission on non-GET navigations
|
||||
let rawFormMethod = opts.formMethod || "get";
|
||||
let formMethod = normalizeFormMethod ? rawFormMethod.toUpperCase() : rawFormMethod.toLowerCase();
|
||||
let formAction = stripHashFromPath(path);
|
||||
if (opts.body !== undefined) {
|
||||
if (opts.formEncType === "text/plain") {
|
||||
// text only support POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
|
||||
Array.from(opts.body.entries()).reduce((acc, _ref3) => {
|
||||
let [name, value] = _ref3;
|
||||
return "" + acc + name + "=" + value + "\n";
|
||||
}, "") : String(opts.body);
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
}
|
||||
};
|
||||
} else if (opts.formEncType === "application/json") {
|
||||
// json only supports POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
try {
|
||||
let json = typeof opts.body === "string" ? JSON.parse(opts.body) : opts.body;
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
}
|
||||
invariant(typeof FormData === "function", "FormData is not available in this environment");
|
||||
let searchParams;
|
||||
let formData;
|
||||
if (opts.formData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.formData);
|
||||
formData = opts.formData;
|
||||
} else if (opts.body instanceof FormData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.body);
|
||||
formData = opts.body;
|
||||
} else if (opts.body instanceof URLSearchParams) {
|
||||
searchParams = opts.body;
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} else if (opts.body == null) {
|
||||
searchParams = new URLSearchParams();
|
||||
formData = new FormData();
|
||||
} else {
|
||||
try {
|
||||
searchParams = new URLSearchParams(opts.body);
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
let submission = {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
if (isMutationMethod(submission.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
submission
|
||||
};
|
||||
}
|
||||
// Flatten submission onto URLSearchParams for GET submissions
|
||||
let parsedPath = parsePath(path);
|
||||
// On GET navigation submissions we can drop the ?index param from the
|
||||
// resulting location since all loaders will run. But fetcher GET submissions
|
||||
// only run a single loader so we need to preserve any incoming ?index params
|
||||
if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
|
||||
searchParams.append("index", "");
|
||||
}
|
||||
parsedPath.search = "?" + searchParams;
|
||||
return {
|
||||
path: createPath(parsedPath),
|
||||
submission
|
||||
};
|
||||
}
|
||||
// Filter out all routes at/below any caught error as they aren't going to
|
||||
// render so we don't need to load them
|
||||
function getLoaderMatchesUntilBoundary(matches, boundaryId, includeBoundary) {
|
||||
if (includeBoundary === void 0) {
|
||||
includeBoundary = false;
|
||||
}
|
||||
let index = matches.findIndex(m => m.route.id === boundaryId);
|
||||
if (index >= 0) {
|
||||
return matches.slice(0, includeBoundary ? index + 1 : index);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function getMatchesToLoad(history, state, matches, submission, location, initialHydration, skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {
|
||||
let actionResult = pendingActionResult ? isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : pendingActionResult[1].data : undefined;
|
||||
let currentUrl = history.createURL(state.location);
|
||||
let nextUrl = history.createURL(location);
|
||||
// Pick navigation matches that are net-new or qualify for revalidation
|
||||
let boundaryMatches = matches;
|
||||
if (initialHydration && state.errors) {
|
||||
// On initial hydration, only consider matches up to _and including_ the boundary.
|
||||
// This is inclusive to handle cases where a server loader ran successfully,
|
||||
// a child server loader bubbled up to this route, but this route has
|
||||
// `clientLoader.hydrate` so we want to still run the `clientLoader` so that
|
||||
// we have a complete version of `loaderData`
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, Object.keys(state.errors)[0], true);
|
||||
} else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
|
||||
// If an action threw an error, we call loaders up to, but not including the
|
||||
// boundary
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]);
|
||||
}
|
||||
// Don't revalidate loaders by default after action 4xx/5xx responses
|
||||
// when the flag is enabled. They can still opt-into revalidation via
|
||||
// `shouldRevalidate` via `actionResult`
|
||||
let actionStatus = pendingActionResult ? pendingActionResult[1].statusCode : undefined;
|
||||
let shouldSkipRevalidation = skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
|
||||
let navigationMatches = boundaryMatches.filter((match, index) => {
|
||||
let {
|
||||
route
|
||||
} = match;
|
||||
if (route.lazy) {
|
||||
// We haven't loaded this route yet so we don't know if it's got a loader!
|
||||
return true;
|
||||
}
|
||||
if (route.loader == null) {
|
||||
return false;
|
||||
}
|
||||
if (initialHydration) {
|
||||
return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
|
||||
}
|
||||
// Always call the loader on new route instances and pending defer cancellations
|
||||
if (isNewLoader(state.loaderData, state.matches[index], match) || cancelledDeferredRoutes.some(id => id === match.route.id)) {
|
||||
return true;
|
||||
}
|
||||
// This is the default implementation for when we revalidate. If the route
|
||||
// provides it's own implementation, then we give them full control but
|
||||
// provide this value so they can leverage it if needed after they check
|
||||
// their own specific use cases
|
||||
let currentRouteMatch = state.matches[index];
|
||||
let nextRouteMatch = match;
|
||||
return shouldRevalidateLoader(match, _extends({
|
||||
currentUrl,
|
||||
currentParams: currentRouteMatch.params,
|
||||
nextUrl,
|
||||
nextParams: nextRouteMatch.params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false :
|
||||
// Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
|
||||
isRevalidationRequired || currentUrl.pathname + currentUrl.search === nextUrl.pathname + nextUrl.search ||
|
||||
// Search params affect all loaders
|
||||
currentUrl.search !== nextUrl.search || isNewRouteInstance(currentRouteMatch, nextRouteMatch)
|
||||
}));
|
||||
});
|
||||
// Pick fetcher.loads that need to be revalidated
|
||||
let revalidatingFetchers = [];
|
||||
fetchLoadMatches.forEach((f, key) => {
|
||||
// Don't revalidate:
|
||||
// - on initial hydration (shouldn't be any fetchers then anyway)
|
||||
// - if fetcher won't be present in the subsequent render
|
||||
// - no longer matches the URL (v7_fetcherPersist=false)
|
||||
// - was unmounted but persisted due to v7_fetcherPersist=true
|
||||
if (initialHydration || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
|
||||
return;
|
||||
}
|
||||
let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
|
||||
// If the fetcher path no longer matches, push it in with null matches so
|
||||
// we can trigger a 404 in callLoadersAndMaybeResolveData. Note this is
|
||||
// currently only a use-case for Remix HMR where the route tree can change
|
||||
// at runtime and remove a route previously loaded via a fetcher
|
||||
if (!fetcherMatches) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: null,
|
||||
match: null,
|
||||
controller: null
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Revalidating fetchers are decoupled from the route matches since they
|
||||
// load from a static href. They revalidate based on explicit revalidation
|
||||
// (submission, useRevalidator, or X-Remix-Revalidate)
|
||||
let fetcher = state.fetchers.get(key);
|
||||
let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
|
||||
let shouldRevalidate = false;
|
||||
if (fetchRedirectIds.has(key)) {
|
||||
// Never trigger a revalidation of an actively redirecting fetcher
|
||||
shouldRevalidate = false;
|
||||
} else if (cancelledFetcherLoads.has(key)) {
|
||||
// Always mark for revalidation if the fetcher was cancelled
|
||||
cancelledFetcherLoads.delete(key);
|
||||
shouldRevalidate = true;
|
||||
} else if (fetcher && fetcher.state !== "idle" && fetcher.data === undefined) {
|
||||
// If the fetcher hasn't ever completed loading yet, then this isn't a
|
||||
// revalidation, it would just be a brand new load if an explicit
|
||||
// revalidation is required
|
||||
shouldRevalidate = isRevalidationRequired;
|
||||
} else {
|
||||
// Otherwise fall back on any user-defined shouldRevalidate, defaulting
|
||||
// to explicit revalidations only
|
||||
shouldRevalidate = shouldRevalidateLoader(fetcherMatch, _extends({
|
||||
currentUrl,
|
||||
currentParams: state.matches[state.matches.length - 1].params,
|
||||
nextUrl,
|
||||
nextParams: matches[matches.length - 1].params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false : isRevalidationRequired
|
||||
}));
|
||||
}
|
||||
if (shouldRevalidate) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: fetcherMatches,
|
||||
match: fetcherMatch,
|
||||
controller: new AbortController()
|
||||
});
|
||||
}
|
||||
});
|
||||
return [navigationMatches, revalidatingFetchers];
|
||||
}
|
||||
function shouldLoadRouteOnHydration(route, loaderData, errors) {
|
||||
// We dunno if we have a loader - gotta find out!
|
||||
if (route.lazy) {
|
||||
return true;
|
||||
}
|
||||
// No loader, nothing to initialize
|
||||
if (!route.loader) {
|
||||
return false;
|
||||
}
|
||||
let hasData = loaderData != null && loaderData[route.id] !== undefined;
|
||||
let hasError = errors != null && errors[route.id] !== undefined;
|
||||
// Don't run if we error'd during SSR
|
||||
if (!hasData && hasError) {
|
||||
return false;
|
||||
}
|
||||
// Explicitly opting-in to running on hydration
|
||||
if (typeof route.loader === "function" && route.loader.hydrate === true) {
|
||||
return true;
|
||||
}
|
||||
// Otherwise, run if we're not yet initialized with anything
|
||||
return !hasData && !hasError;
|
||||
}
|
||||
function isNewLoader(currentLoaderData, currentMatch, match) {
|
||||
let isNew =
|
||||
// [a] -> [a, b]
|
||||
!currentMatch ||
|
||||
// [a, b] -> [a, c]
|
||||
match.route.id !== currentMatch.route.id;
|
||||
// Handle the case that we don't have data for a re-used route, potentially
|
||||
// from a prior error or from a cancelled pending deferred
|
||||
let isMissingData = currentLoaderData[match.route.id] === undefined;
|
||||
// Always load if this is a net-new route or we don't yet have data
|
||||
return isNew || isMissingData;
|
||||
}
|
||||
function isNewRouteInstance(currentMatch, match) {
|
||||
let currentPath = currentMatch.route.path;
|
||||
return (
|
||||
// param change for this match, /users/123 -> /users/456
|
||||
currentMatch.pathname !== match.pathname ||
|
||||
// splat param changed, which is not present in match.path
|
||||
// e.g. /files/images/avatar.jpg -> files/finances.xls
|
||||
currentPath != null && currentPath.endsWith("*") && currentMatch.params["*"] !== match.params["*"]
|
||||
);
|
||||
}
|
||||
function shouldRevalidateLoader(loaderMatch, arg) {
|
||||
if (loaderMatch.route.shouldRevalidate) {
|
||||
let routeChoice = loaderMatch.route.shouldRevalidate(arg);
|
||||
if (typeof routeChoice === "boolean") {
|
||||
return routeChoice;
|
||||
}
|
||||
}
|
||||
return arg.defaultShouldRevalidate;
|
||||
}
|
||||
function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties) {
|
||||
var _childrenToPatch;
|
||||
let childrenToPatch;
|
||||
if (routeId) {
|
||||
let route = manifest[routeId];
|
||||
invariant(route, "No route found to patch children into: routeId = " + routeId);
|
||||
if (!route.children) {
|
||||
route.children = [];
|
||||
}
|
||||
childrenToPatch = route.children;
|
||||
} else {
|
||||
childrenToPatch = routesToUse;
|
||||
}
|
||||
// Don't patch in routes we already know about so that `patch` is idempotent
|
||||
// to simplify user-land code. This is useful because we re-call the
|
||||
// `patchRoutesOnNavigation` function for matched routes with params.
|
||||
let uniqueChildren = children.filter(newRoute => !childrenToPatch.some(existingRoute => isSameRoute(newRoute, existingRoute)));
|
||||
let newRoutes = convertRoutesToDataRoutes(uniqueChildren, mapRouteProperties, [routeId || "_", "patch", String(((_childrenToPatch = childrenToPatch) == null ? void 0 : _childrenToPatch.length) || "0")], manifest);
|
||||
childrenToPatch.push(...newRoutes);
|
||||
}
|
||||
function isSameRoute(newRoute, existingRoute) {
|
||||
// Most optimal check is by id
|
||||
if ("id" in newRoute && "id" in existingRoute && newRoute.id === existingRoute.id) {
|
||||
return true;
|
||||
}
|
||||
// Second is by pathing differences
|
||||
if (!(newRoute.index === existingRoute.index && newRoute.path === existingRoute.path && newRoute.caseSensitive === existingRoute.caseSensitive)) {
|
||||
return false;
|
||||
}
|
||||
// Pathless layout routes are trickier since we need to check children.
|
||||
// If they have no children then they're the same as far as we can tell
|
||||
if ((!newRoute.children || newRoute.children.length === 0) && (!existingRoute.children || existingRoute.children.length === 0)) {
|
||||
return true;
|
||||
}
|
||||
// Otherwise, we look to see if every child in the new route is already
|
||||
// represented in the existing route's children
|
||||
return newRoute.children.every((aChild, i) => {
|
||||
var _existingRoute$childr;
|
||||
return (_existingRoute$childr = existingRoute.children) == null ? void 0 : _existingRoute$childr.some(bChild => isSameRoute(aChild, bChild));
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Execute route.lazy() methods to lazily load route modules (loader, action,
|
||||
* shouldRevalidate) and update the routeManifest in place which shares objects
|
||||
* with dataRoutes so those get updated as well.
|
||||
*/
|
||||
async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let lazyRoute = await route.lazy();
|
||||
// If the lazy route function was executed and removed by another parallel
|
||||
// call then we can return - first lazy() to finish wins because the return
|
||||
// value of lazy is expected to be static
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let routeToUpdate = manifest[route.id];
|
||||
invariant(routeToUpdate, "No route found in manifest");
|
||||
// Update the route in place. This should be safe because there's no way
|
||||
// we could yet be sitting on this route as we can't get there without
|
||||
// resolving lazy() first.
|
||||
//
|
||||
// This is different than the HMR "update" use-case where we may actively be
|
||||
// on the route being updated. The main concern boils down to "does this
|
||||
// mutation affect any ongoing navigations or any current state.matches
|
||||
// values?". If not, it should be safe to update in place.
|
||||
let routeUpdates = {};
|
||||
for (let lazyRouteProperty in lazyRoute) {
|
||||
let staticRouteValue = routeToUpdate[lazyRouteProperty];
|
||||
let isPropertyStaticallyDefined = staticRouteValue !== undefined &&
|
||||
// This property isn't static since it should always be updated based
|
||||
// on the route updates
|
||||
lazyRouteProperty !== "hasErrorBoundary";
|
||||
warning(!isPropertyStaticallyDefined, "Route \"" + routeToUpdate.id + "\" has a static property \"" + lazyRouteProperty + "\" " + "defined but its lazy function is also returning a value for this property. " + ("The lazy route property \"" + lazyRouteProperty + "\" will be ignored."));
|
||||
if (!isPropertyStaticallyDefined && !immutableRouteKeys.has(lazyRouteProperty)) {
|
||||
routeUpdates[lazyRouteProperty] = lazyRoute[lazyRouteProperty];
|
||||
}
|
||||
}
|
||||
// Mutate the route with the provided updates. Do this first so we pass
|
||||
// the updated version to mapRouteProperties
|
||||
Object.assign(routeToUpdate, routeUpdates);
|
||||
// Mutate the `hasErrorBoundary` property on the route based on the route
|
||||
// updates and remove the `lazy` function so we don't resolve the lazy
|
||||
// route again.
|
||||
Object.assign(routeToUpdate, _extends({}, mapRouteProperties(routeToUpdate), {
|
||||
lazy: undefined
|
||||
}));
|
||||
}
|
||||
// Default implementation of `dataStrategy` which fetches all loaders in parallel
|
||||
async function defaultDataStrategy(_ref4) {
|
||||
let {
|
||||
matches
|
||||
} = _ref4;
|
||||
let matchesToLoad = matches.filter(m => m.shouldLoad);
|
||||
let results = await Promise.all(matchesToLoad.map(m => m.resolve()));
|
||||
return results.reduce((acc, result, i) => Object.assign(acc, {
|
||||
[matchesToLoad[i].route.id]: result
|
||||
}), {});
|
||||
}
|
||||
async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties, requestContext) {
|
||||
let loadRouteDefinitionsPromises = matches.map(m => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties, manifest) : undefined);
|
||||
let dsMatches = matches.map((match, i) => {
|
||||
let loadRoutePromise = loadRouteDefinitionsPromises[i];
|
||||
let shouldLoad = matchesToLoad.some(m => m.route.id === match.route.id);
|
||||
// `resolve` encapsulates route.lazy(), executing the loader/action,
|
||||
// and mapping return values/thrown errors to a `DataStrategyResult`. Users
|
||||
// can pass a callback to take fine-grained control over the execution
|
||||
// of the loader/action
|
||||
let resolve = async handlerOverride => {
|
||||
if (handlerOverride && request.method === "GET" && (match.route.lazy || match.route.loader)) {
|
||||
shouldLoad = true;
|
||||
}
|
||||
return shouldLoad ? callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, requestContext) : Promise.resolve({
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
});
|
||||
};
|
||||
return _extends({}, match, {
|
||||
shouldLoad,
|
||||
resolve
|
||||
});
|
||||
});
|
||||
// Send all matches here to allow for a middleware-type implementation.
|
||||
// handler will be a no-op for unneeded routes and we filter those results
|
||||
// back out below.
|
||||
let results = await dataStrategyImpl({
|
||||
matches: dsMatches,
|
||||
request,
|
||||
params: matches[0].params,
|
||||
fetcherKey,
|
||||
context: requestContext
|
||||
});
|
||||
// Wait for all routes to load here but 'swallow the error since we want
|
||||
// it to bubble up from the `await loadRoutePromise` in `callLoaderOrAction` -
|
||||
// called from `match.resolve()`
|
||||
try {
|
||||
await Promise.all(loadRouteDefinitionsPromises);
|
||||
} catch (e) {
|
||||
// No-op
|
||||
}
|
||||
return results;
|
||||
}
|
||||
// Default logic for calling a loader/action is the user has no specified a dataStrategy
|
||||
async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
|
||||
let result;
|
||||
let onReject;
|
||||
let runHandler = handler => {
|
||||
// Setup a promise we can race against so that abort signals short circuit
|
||||
let reject;
|
||||
// This will never resolve so safe to type it as Promise<DataStrategyResult> to
|
||||
// satisfy the function return value
|
||||
let abortPromise = new Promise((_, r) => reject = r);
|
||||
onReject = () => reject();
|
||||
request.signal.addEventListener("abort", onReject);
|
||||
let actualHandler = ctx => {
|
||||
if (typeof handler !== "function") {
|
||||
return Promise.reject(new Error("You cannot call the handler for a route which defines a boolean " + ("\"" + type + "\" [routeId: " + match.route.id + "]")));
|
||||
}
|
||||
return handler({
|
||||
request,
|
||||
params: match.params,
|
||||
context: staticContext
|
||||
}, ...(ctx !== undefined ? [ctx] : []));
|
||||
};
|
||||
let handlerPromise = (async () => {
|
||||
try {
|
||||
let val = await (handlerOverride ? handlerOverride(ctx => actualHandler(ctx)) : actualHandler());
|
||||
return {
|
||||
type: "data",
|
||||
result: val
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
result: e
|
||||
};
|
||||
}
|
||||
})();
|
||||
return Promise.race([handlerPromise, abortPromise]);
|
||||
};
|
||||
try {
|
||||
let handler = match.route[type];
|
||||
// If we have a route.lazy promise, await that first
|
||||
if (loadRoutePromise) {
|
||||
if (handler) {
|
||||
// Run statically defined handler in parallel with lazy()
|
||||
let handlerError;
|
||||
let [value] = await Promise.all([
|
||||
// If the handler throws, don't let it immediately bubble out,
|
||||
// since we need to let the lazy() execution finish so we know if this
|
||||
// route has a boundary that can handle the error
|
||||
runHandler(handler).catch(e => {
|
||||
handlerError = e;
|
||||
}), loadRoutePromise]);
|
||||
if (handlerError !== undefined) {
|
||||
throw handlerError;
|
||||
}
|
||||
result = value;
|
||||
} else {
|
||||
// Load lazy route module, then run any returned handler
|
||||
await loadRoutePromise;
|
||||
handler = match.route[type];
|
||||
if (handler) {
|
||||
// Handler still runs even if we got interrupted to maintain consistency
|
||||
// with un-abortable behavior of handler execution on non-lazy or
|
||||
// previously-lazy-loaded routes
|
||||
result = await runHandler(handler);
|
||||
} else if (type === "action") {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname,
|
||||
routeId: match.route.id
|
||||
});
|
||||
} else {
|
||||
// lazy() route has no loader to run. Short circuit here so we don't
|
||||
// hit the invariant below that errors on returning undefined.
|
||||
return {
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
} else if (!handler) {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
} else {
|
||||
result = await runHandler(handler);
|
||||
}
|
||||
invariant(result.result !== undefined, "You defined " + (type === "action" ? "an action" : "a loader") + " for route " + ("\"" + match.route.id + "\" but didn't return anything from your `" + type + "` ") + "function. Please return a value or `null`.");
|
||||
} catch (e) {
|
||||
// We should already be catching and converting normal handler executions to
|
||||
// DataStrategyResults and returning them, so anything that throws here is an
|
||||
// unexpected error we still need to wrap
|
||||
return {
|
||||
type: ResultType.error,
|
||||
result: e
|
||||
};
|
||||
} finally {
|
||||
if (onReject) {
|
||||
request.signal.removeEventListener("abort", onReject);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
async function convertDataStrategyResultToDataResult(dataStrategyResult) {
|
||||
let {
|
||||
result,
|
||||
type
|
||||
} = dataStrategyResult;
|
||||
if (isResponse(result)) {
|
||||
let data;
|
||||
try {
|
||||
let contentType = result.headers.get("Content-Type");
|
||||
// Check between word boundaries instead of startsWith() due to the last
|
||||
// paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
|
||||
if (contentType && /\bapplication\/json\b/.test(contentType)) {
|
||||
if (result.body == null) {
|
||||
data = null;
|
||||
} else {
|
||||
data = await result.json();
|
||||
}
|
||||
} else {
|
||||
data = await result.text();
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(result.status, result.statusText, data),
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data,
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init3, _result$init4;
|
||||
if (result.data instanceof Error) {
|
||||
var _result$init, _result$init2;
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result.data,
|
||||
statusCode: (_result$init = result.init) == null ? void 0 : _result$init.status,
|
||||
headers: (_result$init2 = result.init) != null && _result$init2.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
// Convert thrown data() to ErrorResponse instances
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(((_result$init3 = result.init) == null ? void 0 : _result$init3.status) || 500, undefined, result.data),
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined,
|
||||
headers: (_result$init4 = result.init) != null && _result$init4.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result,
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined
|
||||
};
|
||||
}
|
||||
if (isDeferredData(result)) {
|
||||
var _result$init5, _result$init6;
|
||||
return {
|
||||
type: ResultType.deferred,
|
||||
deferredData: result,
|
||||
statusCode: (_result$init5 = result.init) == null ? void 0 : _result$init5.status,
|
||||
headers: ((_result$init6 = result.init) == null ? void 0 : _result$init6.headers) && new Headers(result.init.headers)
|
||||
};
|
||||
}
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init7, _result$init8;
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.data,
|
||||
statusCode: (_result$init7 = result.init) == null ? void 0 : _result$init7.status,
|
||||
headers: (_result$init8 = result.init) != null && _result$init8.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result
|
||||
};
|
||||
}
|
||||
// Support relative routing in internal redirects
|
||||
function normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, v7_relativeSplatPath) {
|
||||
let location = response.headers.get("Location");
|
||||
invariant(location, "Redirects returned/thrown from loaders/actions must have a Location header");
|
||||
if (!ABSOLUTE_URL_REGEX.test(location)) {
|
||||
let trimmedMatches = matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1);
|
||||
location = normalizeTo(new URL(request.url), trimmedMatches, basename, true, location, v7_relativeSplatPath);
|
||||
response.headers.set("Location", location);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
function normalizeRedirectLocation(location, currentUrl, basename, historyInstance) {
|
||||
// Match Chrome's behavior:
|
||||
// https://github.com/chromium/chromium/blob/216dbeb61db0c667e62082e5f5400a32d6983df3/content/public/common/url_utils.cc#L82
|
||||
let invalidProtocols = ["about:", "blob:", "chrome:", "chrome-untrusted:", "content:", "data:", "devtools:", "file:", "filesystem:",
|
||||
// eslint-disable-next-line no-script-url
|
||||
"javascript:"];
|
||||
if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
// Strip off the protocol+origin for same-origin + same-basename absolute redirects
|
||||
let normalizedLocation = location;
|
||||
let url = normalizedLocation.startsWith("//") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
let isSameBasename = stripBasename(url.pathname, basename) != null;
|
||||
if (url.origin === currentUrl.origin && isSameBasename) {
|
||||
return removeDoubleSlashes(url.pathname) + url.search + url.hash;
|
||||
}
|
||||
}
|
||||
try {
|
||||
let url = historyInstance.createURL(location);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
} catch (e) {}
|
||||
return location;
|
||||
}
|
||||
// Utility method for creating the Request instances for loaders/actions during
|
||||
// client-side navigations and fetches. During SSR we will always have a
|
||||
// Request instance from the static handler (query/queryRoute)
|
||||
function createClientSideRequest(history, location, signal, submission) {
|
||||
let url = history.createURL(stripHashFromPath(location)).toString();
|
||||
let init = {
|
||||
signal
|
||||
};
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
let {
|
||||
formMethod,
|
||||
formEncType
|
||||
} = submission;
|
||||
// Didn't think we needed this but it turns out unlike other methods, patch
|
||||
// won't be properly normalized to uppercase and results in a 405 error.
|
||||
// See: https://fetch.spec.whatwg.org/#concept-method
|
||||
init.method = formMethod.toUpperCase();
|
||||
if (formEncType === "application/json") {
|
||||
init.headers = new Headers({
|
||||
"Content-Type": formEncType
|
||||
});
|
||||
init.body = JSON.stringify(submission.json);
|
||||
} else if (formEncType === "text/plain") {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.text;
|
||||
} else if (formEncType === "application/x-www-form-urlencoded" && submission.formData) {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = convertFormDataToSearchParams(submission.formData);
|
||||
} else {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.formData;
|
||||
}
|
||||
}
|
||||
return new Request(url, init);
|
||||
}
|
||||
function convertFormDataToSearchParams(formData) {
|
||||
let searchParams = new URLSearchParams();
|
||||
for (let [key, value] of formData.entries()) {
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
|
||||
searchParams.append(key, typeof value === "string" ? value : value.name);
|
||||
}
|
||||
return searchParams;
|
||||
}
|
||||
function convertSearchParamsToFormData(searchParams) {
|
||||
let formData = new FormData();
|
||||
for (let [key, value] of searchParams.entries()) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
function processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling) {
|
||||
// Fill in loaderData/errors from our loaders
|
||||
let loaderData = {};
|
||||
let errors = null;
|
||||
let statusCode;
|
||||
let foundError = false;
|
||||
let loaderHeaders = {};
|
||||
let pendingError = pendingActionResult && isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : undefined;
|
||||
// Process loader results into state.loaderData/state.errors
|
||||
matches.forEach(match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let id = match.route.id;
|
||||
let result = results[id];
|
||||
invariant(!isRedirectResult(result), "Cannot handle redirect results in processLoaderData");
|
||||
if (isErrorResult(result)) {
|
||||
let error = result.error;
|
||||
// If we have a pending action error, we report it at the highest-route
|
||||
// that throws a loader error, and then clear it out to indicate that
|
||||
// it was consumed
|
||||
if (pendingError !== undefined) {
|
||||
error = pendingError;
|
||||
pendingError = undefined;
|
||||
}
|
||||
errors = errors || {};
|
||||
if (skipLoaderErrorBubbling) {
|
||||
errors[id] = error;
|
||||
} else {
|
||||
// Look upwards from the matched route for the closest ancestor error
|
||||
// boundary, defaulting to the root match. Prefer higher error values
|
||||
// if lower errors bubble to the same boundary
|
||||
let boundaryMatch = findNearestBoundary(matches, id);
|
||||
if (errors[boundaryMatch.route.id] == null) {
|
||||
errors[boundaryMatch.route.id] = error;
|
||||
}
|
||||
}
|
||||
// Clear our any prior loaderData for the throwing route
|
||||
loaderData[id] = undefined;
|
||||
// Once we find our first (highest) error, we set the status code and
|
||||
// prevent deeper status codes from overriding
|
||||
if (!foundError) {
|
||||
foundError = true;
|
||||
statusCode = isRouteErrorResponse(result.error) ? result.error.status : 500;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
if (isDeferredResult(result)) {
|
||||
activeDeferreds.set(id, result.deferredData);
|
||||
loaderData[id] = result.deferredData.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode != null && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
loaderData[id] = result.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// If we didn't consume the pending action error (i.e., all loaders
|
||||
// resolved), then consume it here. Also clear out any loaderData for the
|
||||
// throwing route
|
||||
if (pendingError !== undefined && pendingActionResult) {
|
||||
errors = {
|
||||
[pendingActionResult[0]]: pendingError
|
||||
};
|
||||
loaderData[pendingActionResult[0]] = undefined;
|
||||
}
|
||||
return {
|
||||
loaderData,
|
||||
errors,
|
||||
statusCode: statusCode || 200,
|
||||
loaderHeaders
|
||||
};
|
||||
}
|
||||
function processLoaderData(state, matches, results, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds) {
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, false // This method is only called client side so we always want to bubble
|
||||
);
|
||||
// Process results from our revalidating fetchers
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let {
|
||||
key,
|
||||
match,
|
||||
controller
|
||||
} = rf;
|
||||
let result = fetcherResults[key];
|
||||
invariant(result, "Did not find corresponding fetcher result");
|
||||
// Process fetcher non-redirect errors
|
||||
if (controller && controller.signal.aborted) {
|
||||
// Nothing to do for aborted fetchers
|
||||
return;
|
||||
} else if (isErrorResult(result)) {
|
||||
let boundaryMatch = findNearestBoundary(state.matches, match == null ? void 0 : match.route.id);
|
||||
if (!(errors && errors[boundaryMatch.route.id])) {
|
||||
errors = _extends({}, errors, {
|
||||
[boundaryMatch.route.id]: result.error
|
||||
});
|
||||
}
|
||||
state.fetchers.delete(key);
|
||||
} else if (isRedirectResult(result)) {
|
||||
// Should never get here, redirects should get processed above, but we
|
||||
// keep this to type narrow to a success result in the else
|
||||
invariant(false, "Unhandled fetcher revalidation redirect");
|
||||
} else if (isDeferredResult(result)) {
|
||||
// Should never get here, deferred data should be awaited for fetchers
|
||||
// in resolveDeferredResults
|
||||
invariant(false, "Unhandled fetcher deferred data");
|
||||
} else {
|
||||
let doneFetcher = getDoneFetcher(result.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
});
|
||||
return {
|
||||
loaderData,
|
||||
errors
|
||||
};
|
||||
}
|
||||
function mergeLoaderData(loaderData, newLoaderData, matches, errors) {
|
||||
let mergedLoaderData = _extends({}, newLoaderData);
|
||||
for (let match of matches) {
|
||||
let id = match.route.id;
|
||||
if (newLoaderData.hasOwnProperty(id)) {
|
||||
if (newLoaderData[id] !== undefined) {
|
||||
mergedLoaderData[id] = newLoaderData[id];
|
||||
}
|
||||
} else if (loaderData[id] !== undefined && match.route.loader) {
|
||||
// Preserve existing keys not included in newLoaderData and where a loader
|
||||
// wasn't removed by HMR
|
||||
mergedLoaderData[id] = loaderData[id];
|
||||
}
|
||||
if (errors && errors.hasOwnProperty(id)) {
|
||||
// Don't keep any loader data below the boundary
|
||||
break;
|
||||
}
|
||||
}
|
||||
return mergedLoaderData;
|
||||
}
|
||||
function getActionDataForCommit(pendingActionResult) {
|
||||
if (!pendingActionResult) {
|
||||
return {};
|
||||
}
|
||||
return isErrorResult(pendingActionResult[1]) ? {
|
||||
// Clear out prior actionData on errors
|
||||
actionData: {}
|
||||
} : {
|
||||
actionData: {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
}
|
||||
};
|
||||
}
|
||||
// Find the nearest error boundary, looking upwards from the leaf route (or the
|
||||
// route specified by routeId) for the closest ancestor error boundary,
|
||||
// defaulting to the root match
|
||||
function findNearestBoundary(matches, routeId) {
|
||||
let eligibleMatches = routeId ? matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1) : [...matches];
|
||||
return eligibleMatches.reverse().find(m => m.route.hasErrorBoundary === true) || matches[0];
|
||||
}
|
||||
function getShortCircuitMatches(routes) {
|
||||
// Prefer a root layout route if present, otherwise shim in a route object
|
||||
let route = routes.length === 1 ? routes[0] : routes.find(r => r.index || !r.path || r.path === "/") || {
|
||||
id: "__shim-error-route__"
|
||||
};
|
||||
return {
|
||||
matches: [{
|
||||
params: {},
|
||||
pathname: "",
|
||||
pathnameBase: "",
|
||||
route
|
||||
}],
|
||||
route
|
||||
};
|
||||
}
|
||||
function getInternalRouterError(status, _temp5) {
|
||||
let {
|
||||
pathname,
|
||||
routeId,
|
||||
method,
|
||||
type,
|
||||
message
|
||||
} = _temp5 === void 0 ? {} : _temp5;
|
||||
let statusText = "Unknown Server Error";
|
||||
let errorMessage = "Unknown @remix-run/router error";
|
||||
if (status === 400) {
|
||||
statusText = "Bad Request";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method + " request to \"" + pathname + "\" but " + ("did not provide a `loader` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (type === "defer-action") {
|
||||
errorMessage = "defer() is not supported in actions";
|
||||
} else if (type === "invalid-body") {
|
||||
errorMessage = "Unable to encode submission body";
|
||||
}
|
||||
} else if (status === 403) {
|
||||
statusText = "Forbidden";
|
||||
errorMessage = "Route \"" + routeId + "\" does not match URL \"" + pathname + "\"";
|
||||
} else if (status === 404) {
|
||||
statusText = "Not Found";
|
||||
errorMessage = "No route matches URL \"" + pathname + "\"";
|
||||
} else if (status === 405) {
|
||||
statusText = "Method Not Allowed";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method.toUpperCase() + " request to \"" + pathname + "\" but " + ("did not provide an `action` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (method) {
|
||||
errorMessage = "Invalid request method \"" + method.toUpperCase() + "\"";
|
||||
}
|
||||
}
|
||||
return new ErrorResponseImpl(status || 500, statusText, new Error(errorMessage), true);
|
||||
}
|
||||
// Find any returned redirect errors, starting from the lowest match
|
||||
function findRedirect(results) {
|
||||
let entries = Object.entries(results);
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
let [key, result] = entries[i];
|
||||
if (isRedirectResult(result)) {
|
||||
return {
|
||||
key,
|
||||
result
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
function stripHashFromPath(path) {
|
||||
let parsedPath = typeof path === "string" ? parsePath(path) : path;
|
||||
return createPath(_extends({}, parsedPath, {
|
||||
hash: ""
|
||||
}));
|
||||
}
|
||||
function isHashChangeOnly(a, b) {
|
||||
if (a.pathname !== b.pathname || a.search !== b.search) {
|
||||
return false;
|
||||
}
|
||||
if (a.hash === "") {
|
||||
// /page -> /page#hash
|
||||
return b.hash !== "";
|
||||
} else if (a.hash === b.hash) {
|
||||
// /page#hash -> /page#hash
|
||||
return true;
|
||||
} else if (b.hash !== "") {
|
||||
// /page#hash -> /page#other
|
||||
return true;
|
||||
}
|
||||
// If the hash is removed the browser will re-perform a request to the server
|
||||
// /page#hash -> /page
|
||||
return false;
|
||||
}
|
||||
function isDataStrategyResult(result) {
|
||||
return result != null && typeof result === "object" && "type" in result && "result" in result && (result.type === ResultType.data || result.type === ResultType.error);
|
||||
}
|
||||
function isRedirectDataStrategyResultResult(result) {
|
||||
return isResponse(result.result) && redirectStatusCodes.has(result.result.status);
|
||||
}
|
||||
function isDeferredResult(result) {
|
||||
return result.type === ResultType.deferred;
|
||||
}
|
||||
function isErrorResult(result) {
|
||||
return result.type === ResultType.error;
|
||||
}
|
||||
function isRedirectResult(result) {
|
||||
return (result && result.type) === ResultType.redirect;
|
||||
}
|
||||
function isDataWithResponseInit(value) {
|
||||
return typeof value === "object" && value != null && "type" in value && "data" in value && "init" in value && value.type === "DataWithResponseInit";
|
||||
}
|
||||
function isDeferredData(value) {
|
||||
let deferred = value;
|
||||
return deferred && typeof deferred === "object" && typeof deferred.data === "object" && typeof deferred.subscribe === "function" && typeof deferred.cancel === "function" && typeof deferred.resolveData === "function";
|
||||
}
|
||||
function isResponse(value) {
|
||||
return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
|
||||
}
|
||||
function isRedirectResponse(result) {
|
||||
if (!isResponse(result)) {
|
||||
return false;
|
||||
}
|
||||
let status = result.status;
|
||||
let location = result.headers.get("Location");
|
||||
return status >= 300 && status <= 399 && location != null;
|
||||
}
|
||||
function isValidMethod(method) {
|
||||
return validRequestMethods.has(method.toLowerCase());
|
||||
}
|
||||
function isMutationMethod(method) {
|
||||
return validMutationMethods.has(method.toLowerCase());
|
||||
}
|
||||
async function resolveNavigationDeferredResults(matches, results, signal, currentMatches, currentLoaderData) {
|
||||
let entries = Object.entries(results);
|
||||
for (let index = 0; index < entries.length; index++) {
|
||||
let [routeId, result] = entries[index];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
let currentMatch = currentMatches.find(m => m.route.id === match.route.id);
|
||||
let isRevalidatingLoader = currentMatch != null && !isNewRouteInstance(currentMatch, match) && (currentLoaderData && currentLoaderData[match.route.id]) !== undefined;
|
||||
if (isDeferredResult(result) && isRevalidatingLoader) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
await resolveDeferredData(result, signal, false).then(result => {
|
||||
if (result) {
|
||||
results[routeId] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveFetcherDeferredResults(matches, results, revalidatingFetchers) {
|
||||
for (let index = 0; index < revalidatingFetchers.length; index++) {
|
||||
let {
|
||||
key,
|
||||
routeId,
|
||||
controller
|
||||
} = revalidatingFetchers[index];
|
||||
let result = results[key];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
invariant(controller, "Expected an AbortController for revalidating fetcher deferred result");
|
||||
await resolveDeferredData(result, controller.signal, true).then(result => {
|
||||
if (result) {
|
||||
results[key] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveDeferredData(result, signal, unwrap) {
|
||||
if (unwrap === void 0) {
|
||||
unwrap = false;
|
||||
}
|
||||
let aborted = await result.deferredData.resolveData(signal);
|
||||
if (aborted) {
|
||||
return;
|
||||
}
|
||||
if (unwrap) {
|
||||
try {
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.unwrappedData
|
||||
};
|
||||
} catch (e) {
|
||||
// Handle any TrackedPromise._error values encountered while unwrapping
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.data
|
||||
};
|
||||
}
|
||||
function hasNakedIndexQuery(search) {
|
||||
return new URLSearchParams(search).getAll("index").some(v => v === "");
|
||||
}
|
||||
function getTargetMatch(matches, location) {
|
||||
let search = typeof location === "string" ? parsePath(location).search : location.search;
|
||||
if (matches[matches.length - 1].route.index && hasNakedIndexQuery(search || "")) {
|
||||
// Return the leaf index route when index is present
|
||||
return matches[matches.length - 1];
|
||||
}
|
||||
// Otherwise grab the deepest "path contributing" match (ignoring index and
|
||||
// pathless layout routes)
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
return pathMatches[pathMatches.length - 1];
|
||||
}
|
||||
function getSubmissionFromNavigation(navigation) {
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
text,
|
||||
formData,
|
||||
json
|
||||
} = navigation;
|
||||
if (!formMethod || !formAction || !formEncType) {
|
||||
return;
|
||||
}
|
||||
if (text != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
};
|
||||
} else if (formData != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
} else if (json !== undefined) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
function getLoadingNavigation(location, submission) {
|
||||
if (submission) {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
} else {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
}
|
||||
function getSubmittingNavigation(location, submission) {
|
||||
let navigation = {
|
||||
state: "submitting",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
function getLoadingFetcher(submission, data) {
|
||||
if (submission) {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
} else {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
}
|
||||
function getSubmittingFetcher(submission, existingFetcher) {
|
||||
let fetcher = {
|
||||
state: "submitting",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data: existingFetcher ? existingFetcher.data : undefined
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function getDoneFetcher(data) {
|
||||
let fetcher = {
|
||||
state: "idle",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function restoreAppliedTransitions(_window, transitions) {
|
||||
try {
|
||||
let sessionPositions = _window.sessionStorage.getItem(TRANSITIONS_STORAGE_KEY);
|
||||
if (sessionPositions) {
|
||||
let json = JSON.parse(sessionPositions);
|
||||
for (let [k, v] of Object.entries(json || {})) {
|
||||
if (v && Array.isArray(v)) {
|
||||
transitions.set(k, new Set(v || []));
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// no-op, use default empty object
|
||||
}
|
||||
}
|
||||
function persistAppliedTransitions(_window, transitions) {
|
||||
if (transitions.size > 0) {
|
||||
let json = {};
|
||||
for (let [k, v] of transitions) {
|
||||
json[k] = [...v];
|
||||
}
|
||||
try {
|
||||
_window.sessionStorage.setItem(TRANSITIONS_STORAGE_KEY, JSON.stringify(json));
|
||||
} catch (error) {
|
||||
warning(false, "Failed to save applied view transitions in sessionStorage (" + error + ").");
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
export { AbortedDeferredError, Action, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, decodePath as UNSAFE_decodePath, getResolveToMatches as UNSAFE_getResolveToMatches, invariant as UNSAFE_invariant, warning as UNSAFE_warning, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, data, defer, generatePath, getStaticContextFromError, getToPathname, isDataWithResponseInit, isDeferredData, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, redirectDocument, replace, resolvePath, resolveTo, stripBasename };
|
||||
//# sourceMappingURL=router.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+5708
@@ -0,0 +1,5708 @@
|
||||
/**
|
||||
* @remix-run/router v1.23.3
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.RemixRouter = {}));
|
||||
})(this, (function (exports) { 'use strict';
|
||||
|
||||
function _extends() {
|
||||
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
||||
for (var e = 1; e < arguments.length; e++) {
|
||||
var t = arguments[e];
|
||||
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
||||
}
|
||||
return n;
|
||||
}, _extends.apply(null, arguments);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Actions represent the type of change to a location value.
|
||||
*/
|
||||
let Action = /*#__PURE__*/function (Action) {
|
||||
/**
|
||||
* A POP indicates a change to an arbitrary index in the history stack, such
|
||||
* as a back or forward navigation. It does not describe the direction of the
|
||||
* navigation, only that the current index changed.
|
||||
*
|
||||
* Note: This is the default action for newly created history objects.
|
||||
*/
|
||||
Action["Pop"] = "POP";
|
||||
/**
|
||||
* A PUSH indicates a new entry being added to the history stack, such as when
|
||||
* a link is clicked and a new page loads. When this happens, all subsequent
|
||||
* entries in the stack are lost.
|
||||
*/
|
||||
Action["Push"] = "PUSH";
|
||||
/**
|
||||
* A REPLACE indicates the entry at the current index in the history stack
|
||||
* being replaced by a new one.
|
||||
*/
|
||||
Action["Replace"] = "REPLACE";
|
||||
return Action;
|
||||
}({});
|
||||
|
||||
/**
|
||||
* The pathname, search, and hash values of a URL.
|
||||
*/
|
||||
|
||||
// TODO: (v7) Change the Location generic default from `any` to `unknown` and
|
||||
// remove Remix `useLocation` wrapper.
|
||||
|
||||
/**
|
||||
* An entry in a history stack. A location contains information about the
|
||||
* URL path, as well as possibly some arbitrary state and a key.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A change to the current location.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A function that receives notifications about location changes.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Describes a location that is the destination of some navigation, either via
|
||||
* `history.push` or `history.replace`. This may be either a URL or the pieces
|
||||
* of a URL path.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A history is an interface to the navigation stack. The history serves as the
|
||||
* source of truth for the current location, as well as provides a set of
|
||||
* methods that may be used to change it.
|
||||
*
|
||||
* It is similar to the DOM's `window.history` object, but with a smaller, more
|
||||
* focused API.
|
||||
*/
|
||||
|
||||
const PopStateEventType = "popstate";
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Memory History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A user-supplied object that describes a location. Used when providing
|
||||
* entries to `createMemoryHistory` via its `initialEntries` option.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A memory history stores locations in memory. This is useful in stateful
|
||||
* environments where there is no web browser, such as node tests or React
|
||||
* Native.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Memory history stores the current location in memory. It is designed for use
|
||||
* in stateful non-browser environments like tests and React Native.
|
||||
*/
|
||||
function createMemoryHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
initialEntries = ["/"],
|
||||
initialIndex,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let entries; // Declare so we can access from createMemoryLocation
|
||||
entries = initialEntries.map((entry, index) => createMemoryLocation(entry, typeof entry === "string" ? null : entry.state, index === 0 ? "default" : undefined));
|
||||
let index = clampIndex(initialIndex == null ? entries.length - 1 : initialIndex);
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
function clampIndex(n) {
|
||||
return Math.min(Math.max(n, 0), entries.length - 1);
|
||||
}
|
||||
function getCurrentLocation() {
|
||||
return entries[index];
|
||||
}
|
||||
function createMemoryLocation(to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = createLocation(entries ? getCurrentLocation().pathname : "/", to, state, key);
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in memory history: " + JSON.stringify(to));
|
||||
return location;
|
||||
}
|
||||
function createHref(to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
let history = {
|
||||
get index() {
|
||||
return index;
|
||||
},
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getCurrentLocation();
|
||||
},
|
||||
createHref,
|
||||
createURL(to) {
|
||||
return new URL(createHref(to), "http://localhost");
|
||||
},
|
||||
encodeLocation(to) {
|
||||
let path = typeof to === "string" ? parsePath(to) : to;
|
||||
return {
|
||||
pathname: path.pathname || "",
|
||||
search: path.search || "",
|
||||
hash: path.hash || ""
|
||||
};
|
||||
},
|
||||
push(to, state) {
|
||||
action = Action.Push;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
index += 1;
|
||||
entries.splice(index, entries.length, nextLocation);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
entries[index] = nextLocation;
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
go(delta) {
|
||||
action = Action.Pop;
|
||||
let nextIndex = clampIndex(index + delta);
|
||||
let nextLocation = entries[nextIndex];
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: nextLocation,
|
||||
delta
|
||||
});
|
||||
}
|
||||
},
|
||||
listen(fn) {
|
||||
listener = fn;
|
||||
return () => {
|
||||
listener = null;
|
||||
};
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Browser History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A browser history stores the current location in regular URLs in a web
|
||||
* browser environment. This is the standard for most web apps and provides the
|
||||
* cleanest URLs the browser's address bar.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory
|
||||
*/
|
||||
|
||||
/**
|
||||
* Browser history stores the location in regular URLs. This is the standard for
|
||||
* most web apps, but it requires some configuration on the server to ensure you
|
||||
* serve the same app at multiple URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
||||
*/
|
||||
function createBrowserHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createBrowserLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
} = window.location;
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createBrowserHref(window, to) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
return getUrlBasedHistory(createBrowserLocation, createBrowserHref, null, options);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Hash History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A hash history stores the current location in the fragment identifier portion
|
||||
* of the URL in a web browser environment.
|
||||
*
|
||||
* This is ideal for apps that do not control the server for some reason
|
||||
* (because the fragment identifier is never sent to the server), including some
|
||||
* shared hosting environments that do not provide fine-grained controls over
|
||||
* which pages are served at which URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory
|
||||
*/
|
||||
|
||||
/**
|
||||
* Hash history stores the location in window.location.hash. This makes it ideal
|
||||
* for situations where you don't want to send the location to the server for
|
||||
* some reason, either because you do cannot configure it or the URL space is
|
||||
* reserved for something else.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
||||
*/
|
||||
function createHashHistory(options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
function createHashLocation(window, globalHistory) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = parsePath(window.location.hash.substr(1));
|
||||
|
||||
// Hash URL should always have a leading / just like window.location.pathname
|
||||
// does, so if an app ends up at a route like /#something then we add a
|
||||
// leading slash so all of our path-matching behaves the same as if it would
|
||||
// in a browser router. This is particularly important when there exists a
|
||||
// root splat route (<Route path="*">) since that matches internally against
|
||||
// "/*" and we'd expect /#something to 404 in a hash router app.
|
||||
if (!pathname.startsWith("/") && !pathname.startsWith(".")) {
|
||||
pathname = "/" + pathname;
|
||||
}
|
||||
return createLocation("", {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
},
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
globalHistory.state && globalHistory.state.usr || null, globalHistory.state && globalHistory.state.key || "default");
|
||||
}
|
||||
function createHashHref(window, to) {
|
||||
let base = window.document.querySelector("base");
|
||||
let href = "";
|
||||
if (base && base.getAttribute("href")) {
|
||||
let url = window.location.href;
|
||||
let hashIndex = url.indexOf("#");
|
||||
href = hashIndex === -1 ? url : url.slice(0, hashIndex);
|
||||
}
|
||||
return href + "#" + (typeof to === "string" ? to : createPath(to));
|
||||
}
|
||||
function validateHashLocation(location, to) {
|
||||
warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")");
|
||||
}
|
||||
return getUrlBasedHistory(createHashLocation, createHashHref, validateHashLocation, options);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region UTILS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
|
||||
function invariant(value, message) {
|
||||
if (value === false || value === null || typeof value === "undefined") {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
function warning(cond, message) {
|
||||
if (!cond) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== "undefined") console.warn(message);
|
||||
try {
|
||||
// Welcome to debugging history!
|
||||
//
|
||||
// This error is thrown as a convenience, so you can more easily
|
||||
// find the source for a warning that appears in the console by
|
||||
// enabling "pause on exceptions" in your JavaScript debugger.
|
||||
throw new Error(message);
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
function createKey() {
|
||||
return Math.random().toString(36).substr(2, 8);
|
||||
}
|
||||
|
||||
/**
|
||||
* For browser-based histories, we combine the state and key into an object
|
||||
*/
|
||||
function getHistoryState(location, index) {
|
||||
return {
|
||||
usr: location.state,
|
||||
key: location.key,
|
||||
idx: index
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Location object with a unique key from the given Path
|
||||
*/
|
||||
function createLocation(current, to, state, key) {
|
||||
if (state === void 0) {
|
||||
state = null;
|
||||
}
|
||||
let location = _extends({
|
||||
pathname: typeof current === "string" ? current : current.pathname,
|
||||
search: "",
|
||||
hash: ""
|
||||
}, typeof to === "string" ? parsePath(to) : to, {
|
||||
state,
|
||||
// TODO: This could be cleaned up. push/replace should probably just take
|
||||
// full Locations now and avoid the need to run through this flow at all
|
||||
// But that's a pretty big refactor to the current test suite so going to
|
||||
// keep as is for the time being and just let any incoming keys take precedence
|
||||
key: to && to.key || key || createKey()
|
||||
});
|
||||
return location;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a string URL path from the given pathname, search, and hash components.
|
||||
*/
|
||||
function createPath(_ref) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = ""
|
||||
} = _ref;
|
||||
if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
|
||||
if (hash && hash !== "#") pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
|
||||
return pathname;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a string URL path into its separate pathname, search, and hash components.
|
||||
*/
|
||||
function parsePath(path) {
|
||||
let parsedPath = {};
|
||||
if (path) {
|
||||
let hashIndex = path.indexOf("#");
|
||||
if (hashIndex >= 0) {
|
||||
parsedPath.hash = path.substr(hashIndex);
|
||||
path = path.substr(0, hashIndex);
|
||||
}
|
||||
let searchIndex = path.indexOf("?");
|
||||
if (searchIndex >= 0) {
|
||||
parsedPath.search = path.substr(searchIndex);
|
||||
path = path.substr(0, searchIndex);
|
||||
}
|
||||
if (path) {
|
||||
parsedPath.pathname = path;
|
||||
}
|
||||
}
|
||||
return parsedPath;
|
||||
}
|
||||
function getUrlBasedHistory(getLocation, createHref, validateLocation, options) {
|
||||
if (options === void 0) {
|
||||
options = {};
|
||||
}
|
||||
let {
|
||||
window = document.defaultView,
|
||||
v5Compat = false
|
||||
} = options;
|
||||
let globalHistory = window.history;
|
||||
let action = Action.Pop;
|
||||
let listener = null;
|
||||
let index = getIndex();
|
||||
// Index should only be null when we initialize. If not, it's because the
|
||||
// user called history.pushState or history.replaceState directly, in which
|
||||
// case we should log a warning as it will result in bugs.
|
||||
if (index == null) {
|
||||
index = 0;
|
||||
globalHistory.replaceState(_extends({}, globalHistory.state, {
|
||||
idx: index
|
||||
}), "");
|
||||
}
|
||||
function getIndex() {
|
||||
let state = globalHistory.state || {
|
||||
idx: null
|
||||
};
|
||||
return state.idx;
|
||||
}
|
||||
function handlePop() {
|
||||
action = Action.Pop;
|
||||
let nextIndex = getIndex();
|
||||
let delta = nextIndex == null ? null : nextIndex - index;
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta
|
||||
});
|
||||
}
|
||||
}
|
||||
function push(to, state) {
|
||||
action = Action.Push;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex() + 1;
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
|
||||
// try...catch because iOS limits us to 100 pushState calls :/
|
||||
try {
|
||||
globalHistory.pushState(historyState, "", url);
|
||||
} catch (error) {
|
||||
// If the exception is because `state` can't be serialized, let that throw
|
||||
// outwards just like a replace call would so the dev knows the cause
|
||||
// https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps
|
||||
// https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal
|
||||
if (error instanceof DOMException && error.name === "DataCloneError") {
|
||||
throw error;
|
||||
}
|
||||
// They are going to lose state here, but there is no real
|
||||
// way to warn them about it since the page will refresh...
|
||||
window.location.assign(url);
|
||||
}
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
function replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
index = getIndex();
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
globalHistory.replaceState(historyState, "", url);
|
||||
if (v5Compat && listener) {
|
||||
listener({
|
||||
action,
|
||||
location: history.location,
|
||||
delta: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
function createURL(to) {
|
||||
// window.location.origin is "null" (the literal string value) in Firefox
|
||||
// under certain conditions, notably when serving from a local HTML file
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
|
||||
let base = window.location.origin !== "null" ? window.location.origin : window.location.href;
|
||||
let href = typeof to === "string" ? to : createPath(to);
|
||||
// Treating this as a full URL will strip any trailing spaces so we need to
|
||||
// pre-encode them since they might be part of a matching splat param from
|
||||
// an ancestor route
|
||||
href = href.replace(/ $/, "%20");
|
||||
invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
|
||||
return new URL(href, base);
|
||||
}
|
||||
let history = {
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getLocation(window, globalHistory);
|
||||
},
|
||||
listen(fn) {
|
||||
if (listener) {
|
||||
throw new Error("A history only accepts one active listener");
|
||||
}
|
||||
window.addEventListener(PopStateEventType, handlePop);
|
||||
listener = fn;
|
||||
return () => {
|
||||
window.removeEventListener(PopStateEventType, handlePop);
|
||||
listener = null;
|
||||
};
|
||||
},
|
||||
createHref(to) {
|
||||
return createHref(window, to);
|
||||
},
|
||||
createURL,
|
||||
encodeLocation(to) {
|
||||
// Encode a Location the same way window.location would
|
||||
let url = createURL(to);
|
||||
return {
|
||||
pathname: url.pathname,
|
||||
search: url.search,
|
||||
hash: url.hash
|
||||
};
|
||||
},
|
||||
push,
|
||||
replace,
|
||||
go(n) {
|
||||
return globalHistory.go(n);
|
||||
}
|
||||
};
|
||||
return history;
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
/**
|
||||
* Map of routeId -> data returned from a loader/action/error
|
||||
*/
|
||||
|
||||
let ResultType = /*#__PURE__*/function (ResultType) {
|
||||
ResultType["data"] = "data";
|
||||
ResultType["deferred"] = "deferred";
|
||||
ResultType["redirect"] = "redirect";
|
||||
ResultType["error"] = "error";
|
||||
return ResultType;
|
||||
}({});
|
||||
|
||||
/**
|
||||
* Successful result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Successful defer() result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Redirect result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Unsuccessful result from a loader or action
|
||||
*/
|
||||
|
||||
/**
|
||||
* Result from a loader or action - potentially successful or unsuccessful
|
||||
*/
|
||||
|
||||
/**
|
||||
* Users can specify either lowercase or uppercase form methods on `<Form>`,
|
||||
* useSubmit(), `<fetcher.Form>`, etc.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Active navigation/fetcher form methods are exposed in lowercase on the
|
||||
* RouterState
|
||||
*/
|
||||
|
||||
/**
|
||||
* In v7, active navigation/fetcher form methods are exposed in uppercase on the
|
||||
* RouterState. This is to align with the normalization done via fetch().
|
||||
*/
|
||||
|
||||
// Thanks https://github.com/sindresorhus/type-fest!
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Internal interface to pass around for action submissions, not intended for
|
||||
* external consumption
|
||||
*/
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Arguments passed to route loader/action functions. Same for now but we keep
|
||||
* this as a private implementation detail in case they diverge in the future.
|
||||
*/
|
||||
|
||||
// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
|
||||
// ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
|
||||
// Also, make them a type alias instead of an interface
|
||||
|
||||
/**
|
||||
* Arguments passed to loader functions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Arguments passed to action functions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Loaders and actions can return anything except `undefined` (`null` is a
|
||||
* valid return value if there is no data to return). Responses are preferred
|
||||
* and will ease any future migration to Remix
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route loader function signature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route action function signature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Arguments passed to shouldRevalidate function
|
||||
*/
|
||||
|
||||
/**
|
||||
* Route shouldRevalidate function signature. This runs after any submission
|
||||
* (navigation or fetcher), so we flatten the navigation/fetcher submission
|
||||
* onto the arguments. It shouldn't matter whether it came from a navigation
|
||||
* or a fetcher, what really matters is the URLs and the formData since loaders
|
||||
* have to re-run based on the data models that were potentially mutated.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set `hasErrorBoundary`
|
||||
* from the framework-aware `errorElement` prop
|
||||
*
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
|
||||
/**
|
||||
* Result from a loader or action called via dataStrategy
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set any framework-specific
|
||||
* properties from framework-agnostic properties
|
||||
*/
|
||||
|
||||
/**
|
||||
* Keys we cannot change from within a lazy() function. We spread all other keys
|
||||
* onto the route. Either they're meaningful to the router, or they'll get
|
||||
* ignored.
|
||||
*/
|
||||
|
||||
const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "index", "children"]);
|
||||
|
||||
/**
|
||||
* lazy() function to load a route definition, which can add non-matching
|
||||
* related properties to a route
|
||||
*/
|
||||
|
||||
/**
|
||||
* Base RouteObject with common props shared by all types of routes
|
||||
*/
|
||||
|
||||
/**
|
||||
* Index routes must not have children
|
||||
*/
|
||||
|
||||
/**
|
||||
* Non-index routes may have children, but cannot have index
|
||||
*/
|
||||
|
||||
/**
|
||||
* A route object represents a logical route, with (optionally) its child
|
||||
* routes organized in a tree-like structure.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A data route object, which is just a RouteObject with a required unique ID
|
||||
*/
|
||||
|
||||
// Recursive helper for finding path parameters in the absence of wildcards
|
||||
|
||||
/**
|
||||
* Examples:
|
||||
* "/a/b/*" -> "*"
|
||||
* ":a" -> "a"
|
||||
* "/a/:b" -> "b"
|
||||
* "/a/blahblahblah:b" -> "b"
|
||||
* "/:a/:b" -> "a" | "b"
|
||||
* "/:a/b/:c/*" -> "a" | "c" | "*"
|
||||
*/
|
||||
|
||||
// Attempt to parse the given string segment. If it fails, then just return the
|
||||
// plain string type as a default fallback. Otherwise, return the union of the
|
||||
// parsed string literals that were referenced as dynamic segments in the route.
|
||||
|
||||
/**
|
||||
* The parameters that were parsed from the URL path.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A RouteMatch contains info about how a route matched a URL.
|
||||
*/
|
||||
|
||||
function isIndexRoute(route) {
|
||||
return route.index === true;
|
||||
}
|
||||
|
||||
// Walk the route tree generating unique IDs where necessary, so we are working
|
||||
// solely with AgnosticDataRouteObject's within the Router
|
||||
function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath, manifest) {
|
||||
if (parentPath === void 0) {
|
||||
parentPath = [];
|
||||
}
|
||||
if (manifest === void 0) {
|
||||
manifest = {};
|
||||
}
|
||||
return routes.map((route, index) => {
|
||||
let treePath = [...parentPath, String(index)];
|
||||
let id = typeof route.id === "string" ? route.id : treePath.join("-");
|
||||
invariant(route.index !== true || !route.children, "Cannot specify children on an index route");
|
||||
invariant(!manifest[id], "Found a route id collision on id \"" + id + "\". Route " + "id's must be globally unique within Data Router usages");
|
||||
if (isIndexRoute(route)) {
|
||||
let indexRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id
|
||||
});
|
||||
manifest[id] = indexRoute;
|
||||
return indexRoute;
|
||||
} else {
|
||||
let pathOrLayoutRoute = _extends({}, route, mapRouteProperties(route), {
|
||||
id,
|
||||
children: undefined
|
||||
});
|
||||
manifest[id] = pathOrLayoutRoute;
|
||||
if (route.children) {
|
||||
pathOrLayoutRoute.children = convertRoutesToDataRoutes(route.children, mapRouteProperties, treePath, manifest);
|
||||
}
|
||||
return pathOrLayoutRoute;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches the given routes to a location and returns the match data.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-routes
|
||||
*/
|
||||
function matchRoutes(routes, locationArg, basename) {
|
||||
if (basename === void 0) {
|
||||
basename = "/";
|
||||
}
|
||||
return matchRoutesImpl(routes, locationArg, basename, false);
|
||||
}
|
||||
function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
|
||||
let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
|
||||
let pathname = stripBasename(location.pathname || "/", basename);
|
||||
if (pathname == null) {
|
||||
return null;
|
||||
}
|
||||
let branches = flattenRoutes(routes);
|
||||
rankRouteBranches(branches);
|
||||
let matches = null;
|
||||
let decoded = decodePath(pathname);
|
||||
for (let i = 0; matches == null && i < branches.length; ++i) {
|
||||
// Incoming pathnames are generally encoded from either window.location
|
||||
// or from router.navigate, but we want to match against the unencoded
|
||||
// paths in the route definitions. Memory router locations won't be
|
||||
// encoded here but there also shouldn't be anything to decode so this
|
||||
// should be a safe operation. This avoids needing matchRoutes to be
|
||||
// history-aware.
|
||||
matches = matchRouteBranch(branches[i], decoded, allowPartial);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function convertRouteMatchToUiMatch(match, loaderData) {
|
||||
let {
|
||||
route,
|
||||
pathname,
|
||||
params
|
||||
} = match;
|
||||
return {
|
||||
id: route.id,
|
||||
pathname,
|
||||
params,
|
||||
data: loaderData[route.id],
|
||||
handle: route.handle
|
||||
};
|
||||
}
|
||||
function flattenRoutes(routes, branches, parentsMeta, parentPath) {
|
||||
if (branches === void 0) {
|
||||
branches = [];
|
||||
}
|
||||
if (parentsMeta === void 0) {
|
||||
parentsMeta = [];
|
||||
}
|
||||
if (parentPath === void 0) {
|
||||
parentPath = "";
|
||||
}
|
||||
let flattenRoute = (route, index, relativePath) => {
|
||||
let meta = {
|
||||
relativePath: relativePath === undefined ? route.path || "" : relativePath,
|
||||
caseSensitive: route.caseSensitive === true,
|
||||
childrenIndex: index,
|
||||
route
|
||||
};
|
||||
if (meta.relativePath.startsWith("/")) {
|
||||
invariant(meta.relativePath.startsWith(parentPath), "Absolute route path \"" + meta.relativePath + "\" nested under path " + ("\"" + parentPath + "\" is not valid. An absolute child route path ") + "must start with the combined path of all its parent routes.");
|
||||
meta.relativePath = meta.relativePath.slice(parentPath.length);
|
||||
}
|
||||
let path = joinPaths([parentPath, meta.relativePath]);
|
||||
let routesMeta = parentsMeta.concat(meta);
|
||||
|
||||
// Add the children before adding this route to the array, so we traverse the
|
||||
// route tree depth-first and child routes appear before their parents in
|
||||
// the "flattened" version.
|
||||
if (route.children && route.children.length > 0) {
|
||||
invariant(
|
||||
// Our types know better, but runtime JS may not!
|
||||
// @ts-expect-error
|
||||
route.index !== true, "Index routes must not have child routes. Please remove " + ("all child routes from route path \"" + path + "\"."));
|
||||
flattenRoutes(route.children, branches, routesMeta, path);
|
||||
}
|
||||
|
||||
// Routes without a path shouldn't ever match by themselves unless they are
|
||||
// index routes, so don't add them to the list of possible branches.
|
||||
if (route.path == null && !route.index) {
|
||||
return;
|
||||
}
|
||||
branches.push({
|
||||
path,
|
||||
score: computeScore(path, route.index),
|
||||
routesMeta
|
||||
});
|
||||
};
|
||||
routes.forEach((route, index) => {
|
||||
var _route$path;
|
||||
// coarse-grain check for optional params
|
||||
if (route.path === "" || !((_route$path = route.path) != null && _route$path.includes("?"))) {
|
||||
flattenRoute(route, index);
|
||||
} else {
|
||||
for (let exploded of explodeOptionalSegments(route.path)) {
|
||||
flattenRoute(route, index, exploded);
|
||||
}
|
||||
}
|
||||
});
|
||||
return branches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes all combinations of optional path segments for a given path,
|
||||
* excluding combinations that are ambiguous and of lower priority.
|
||||
*
|
||||
* For example, `/one/:two?/three/:four?/:five?` explodes to:
|
||||
* - `/one/three`
|
||||
* - `/one/:two/three`
|
||||
* - `/one/three/:four`
|
||||
* - `/one/three/:five`
|
||||
* - `/one/:two/three/:four`
|
||||
* - `/one/:two/three/:five`
|
||||
* - `/one/three/:four/:five`
|
||||
* - `/one/:two/three/:four/:five`
|
||||
*/
|
||||
function explodeOptionalSegments(path) {
|
||||
let segments = path.split("/");
|
||||
if (segments.length === 0) return [];
|
||||
let [first, ...rest] = segments;
|
||||
|
||||
// Optional path segments are denoted by a trailing `?`
|
||||
let isOptional = first.endsWith("?");
|
||||
// Compute the corresponding required segment: `foo?` -> `foo`
|
||||
let required = first.replace(/\?$/, "");
|
||||
if (rest.length === 0) {
|
||||
// Intepret empty string as omitting an optional segment
|
||||
// `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three`
|
||||
return isOptional ? [required, ""] : [required];
|
||||
}
|
||||
let restExploded = explodeOptionalSegments(rest.join("/"));
|
||||
let result = [];
|
||||
|
||||
// All child paths with the prefix. Do this for all children before the
|
||||
// optional version for all children, so we get consistent ordering where the
|
||||
// parent optional aspect is preferred as required. Otherwise, we can get
|
||||
// child sections interspersed where deeper optional segments are higher than
|
||||
// parent optional segments, where for example, /:two would explode _earlier_
|
||||
// then /:one. By always including the parent as required _for all children_
|
||||
// first, we avoid this issue
|
||||
result.push(...restExploded.map(subpath => subpath === "" ? required : [required, subpath].join("/")));
|
||||
|
||||
// Then, if this is an optional value, add all child versions without
|
||||
if (isOptional) {
|
||||
result.push(...restExploded);
|
||||
}
|
||||
|
||||
// for absolute paths, ensure `/` instead of empty segment
|
||||
return result.map(exploded => path.startsWith("/") && exploded === "" ? "/" : exploded);
|
||||
}
|
||||
function rankRouteBranches(branches) {
|
||||
branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first
|
||||
: compareIndexes(a.routesMeta.map(meta => meta.childrenIndex), b.routesMeta.map(meta => meta.childrenIndex)));
|
||||
}
|
||||
const paramRe = /^:[\w-]+$/;
|
||||
const dynamicSegmentValue = 3;
|
||||
const indexRouteValue = 2;
|
||||
const emptySegmentValue = 1;
|
||||
const staticSegmentValue = 10;
|
||||
const splatPenalty = -2;
|
||||
const isSplat = s => s === "*";
|
||||
function computeScore(path, index) {
|
||||
let segments = path.split("/");
|
||||
let initialScore = segments.length;
|
||||
if (segments.some(isSplat)) {
|
||||
initialScore += splatPenalty;
|
||||
}
|
||||
if (index) {
|
||||
initialScore += indexRouteValue;
|
||||
}
|
||||
return segments.filter(s => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
|
||||
}
|
||||
function compareIndexes(a, b) {
|
||||
let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
|
||||
return siblings ?
|
||||
// If two routes are siblings, we should try to match the earlier sibling
|
||||
// first. This allows people to have fine-grained control over the matching
|
||||
// behavior by simply putting routes with identical paths in the order they
|
||||
// want them tried.
|
||||
a[a.length - 1] - b[b.length - 1] :
|
||||
// Otherwise, it doesn't really make sense to rank non-siblings by index,
|
||||
// so they sort equally.
|
||||
0;
|
||||
}
|
||||
function matchRouteBranch(branch, pathname, allowPartial) {
|
||||
if (allowPartial === void 0) {
|
||||
allowPartial = false;
|
||||
}
|
||||
let {
|
||||
routesMeta
|
||||
} = branch;
|
||||
let matchedParams = {};
|
||||
let matchedPathname = "/";
|
||||
let matches = [];
|
||||
for (let i = 0; i < routesMeta.length; ++i) {
|
||||
let meta = routesMeta[i];
|
||||
let end = i === routesMeta.length - 1;
|
||||
let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
|
||||
let match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end
|
||||
}, remainingPathname);
|
||||
let route = meta.route;
|
||||
if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
|
||||
match = matchPath({
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end: false
|
||||
}, remainingPathname);
|
||||
}
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
Object.assign(matchedParams, match.params);
|
||||
matches.push({
|
||||
// TODO: Can this as be avoided?
|
||||
params: matchedParams,
|
||||
pathname: joinPaths([matchedPathname, match.pathname]),
|
||||
pathnameBase: normalizePathname(joinPaths([matchedPathname, match.pathnameBase])),
|
||||
route
|
||||
});
|
||||
if (match.pathnameBase !== "/") {
|
||||
matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
|
||||
}
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a path with params interpolated.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/generate-path
|
||||
*/
|
||||
function generatePath(originalPath, params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
let path = originalPath;
|
||||
if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
|
||||
warning(false, "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
path = path.replace(/\*$/, "/*");
|
||||
}
|
||||
|
||||
// ensure `/` is added at the beginning if the path is absolute
|
||||
const prefix = path.startsWith("/") ? "/" : "";
|
||||
const stringify = p => p == null ? "" : typeof p === "string" ? p : String(p);
|
||||
const segments = path.split(/\/+/).map((segment, index, array) => {
|
||||
const isLastSegment = index === array.length - 1;
|
||||
|
||||
// only apply the splat if it's the last segment
|
||||
if (isLastSegment && segment === "*") {
|
||||
const star = "*";
|
||||
// Apply the splat
|
||||
return stringify(params[star]);
|
||||
}
|
||||
const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
|
||||
if (keyMatch) {
|
||||
const [, key, optional] = keyMatch;
|
||||
let param = params[key];
|
||||
invariant(optional === "?" || param != null, "Missing \":" + key + "\" param");
|
||||
return stringify(param);
|
||||
}
|
||||
|
||||
// Remove any optional markers from optional static segments
|
||||
return segment.replace(/\?$/g, "");
|
||||
})
|
||||
// Remove empty segments
|
||||
.filter(segment => !!segment);
|
||||
return prefix + segments.join("/");
|
||||
}
|
||||
|
||||
/**
|
||||
* A PathPattern is used to match on some portion of a URL pathname.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A PathMatch contains info about how a PathPattern matched on a URL pathname.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Performs pattern matching on a URL pathname and returns information about
|
||||
* the match.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-path
|
||||
*/
|
||||
function matchPath(pattern, pathname) {
|
||||
if (typeof pattern === "string") {
|
||||
pattern = {
|
||||
path: pattern,
|
||||
caseSensitive: false,
|
||||
end: true
|
||||
};
|
||||
}
|
||||
let [matcher, compiledParams] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
|
||||
let match = pathname.match(matcher);
|
||||
if (!match) return null;
|
||||
let matchedPathname = match[0];
|
||||
let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
|
||||
let captureGroups = match.slice(1);
|
||||
let params = compiledParams.reduce((memo, _ref, index) => {
|
||||
let {
|
||||
paramName,
|
||||
isOptional
|
||||
} = _ref;
|
||||
// We need to compute the pathnameBase here using the raw splat value
|
||||
// instead of using params["*"] later because it will be decoded then
|
||||
if (paramName === "*") {
|
||||
let splatValue = captureGroups[index] || "";
|
||||
pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
|
||||
}
|
||||
const value = captureGroups[index];
|
||||
if (isOptional && !value) {
|
||||
memo[paramName] = undefined;
|
||||
} else {
|
||||
memo[paramName] = (value || "").replace(/%2F/g, "/");
|
||||
}
|
||||
return memo;
|
||||
}, {});
|
||||
return {
|
||||
params,
|
||||
pathname: matchedPathname,
|
||||
pathnameBase,
|
||||
pattern
|
||||
};
|
||||
}
|
||||
function compilePath(path, caseSensitive, end) {
|
||||
if (caseSensitive === void 0) {
|
||||
caseSensitive = false;
|
||||
}
|
||||
if (end === void 0) {
|
||||
end = true;
|
||||
}
|
||||
warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
|
||||
let params = [];
|
||||
let regexpSource = "^" + path.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
|
||||
.replace(/^\/*/, "/") // Make sure it has a leading /
|
||||
.replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
|
||||
.replace(/\/:([\w-]+)(\?)?/g, (_, paramName, isOptional) => {
|
||||
params.push({
|
||||
paramName,
|
||||
isOptional: isOptional != null
|
||||
});
|
||||
return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
|
||||
});
|
||||
if (path.endsWith("*")) {
|
||||
params.push({
|
||||
paramName: "*"
|
||||
});
|
||||
regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
|
||||
: "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
|
||||
} else if (end) {
|
||||
// When matching to the end, ignore trailing slashes
|
||||
regexpSource += "\\/*$";
|
||||
} else if (path !== "" && path !== "/") {
|
||||
// If our path is non-empty and contains anything beyond an initial slash,
|
||||
// then we have _some_ form of path in our regex, so we should expect to
|
||||
// match only if we find the end of this path segment. Look for an optional
|
||||
// non-captured trailing slash (to match a portion of the URL) or the end
|
||||
// of the path (if we've matched to the end). We used to do this with a
|
||||
// word boundary but that gives false positives on routes like
|
||||
// /user-preferences since `-` counts as a word boundary.
|
||||
regexpSource += "(?:(?=\\/|$))";
|
||||
} else ;
|
||||
let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
|
||||
return [matcher, params];
|
||||
}
|
||||
function decodePath(value) {
|
||||
try {
|
||||
return value.split("/").map(v => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
|
||||
} catch (error) {
|
||||
warning(false, "The URL path \"" + value + "\" could not be decoded because it is is a " + "malformed URL segment. This is probably due to a bad percent " + ("encoding (" + error + ")."));
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function stripBasename(pathname, basename) {
|
||||
if (basename === "/") return pathname;
|
||||
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// We want to leave trailing slash behavior in the user's control, so if they
|
||||
// specify a basename with a trailing slash, we should support it
|
||||
let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
|
||||
let nextChar = pathname.charAt(startIndex);
|
||||
if (nextChar && nextChar !== "/") {
|
||||
// pathname does not start with basename/
|
||||
return null;
|
||||
}
|
||||
return pathname.slice(startIndex) || "/";
|
||||
}
|
||||
const ABSOLUTE_URL_REGEX$1 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const isAbsoluteUrl = url => ABSOLUTE_URL_REGEX$1.test(url);
|
||||
|
||||
/**
|
||||
* Returns a resolved path object relative to the given pathname.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/resolve-path
|
||||
*/
|
||||
function resolvePath(to, fromPathname) {
|
||||
if (fromPathname === void 0) {
|
||||
fromPathname = "/";
|
||||
}
|
||||
let {
|
||||
pathname: toPathname,
|
||||
search = "",
|
||||
hash = ""
|
||||
} = typeof to === "string" ? parsePath(to) : to;
|
||||
let pathname;
|
||||
if (toPathname) {
|
||||
if (isAbsoluteUrl(toPathname)) {
|
||||
pathname = toPathname;
|
||||
} else {
|
||||
if (toPathname.includes("//")) {
|
||||
let oldPathname = toPathname;
|
||||
toPathname = removeDoubleSlashes(toPathname);
|
||||
warning(false, "Pathnames cannot have embedded double slashes - normalizing " + (oldPathname + " -> " + toPathname));
|
||||
}
|
||||
if (toPathname.startsWith("/")) {
|
||||
pathname = resolvePathname(toPathname.substring(1), "/");
|
||||
} else {
|
||||
pathname = resolvePathname(toPathname, fromPathname);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
pathname = fromPathname;
|
||||
}
|
||||
return {
|
||||
pathname,
|
||||
search: normalizeSearch(search),
|
||||
hash: normalizeHash(hash)
|
||||
};
|
||||
}
|
||||
function resolvePathname(relativePath, fromPathname) {
|
||||
let segments = fromPathname.replace(/\/+$/, "").split("/");
|
||||
let relativeSegments = relativePath.split("/");
|
||||
relativeSegments.forEach(segment => {
|
||||
if (segment === "..") {
|
||||
// Keep the root "" segment so the pathname starts at /
|
||||
if (segments.length > 1) segments.pop();
|
||||
} else if (segment !== ".") {
|
||||
segments.push(segment);
|
||||
}
|
||||
});
|
||||
return segments.length > 1 ? segments.join("/") : "/";
|
||||
}
|
||||
function getInvalidPathError(char, field, dest, path) {
|
||||
return "Cannot include a '" + char + "' character in a manually specified " + ("`to." + field + "` field [" + JSON.stringify(path) + "]. Please separate it out to the ") + ("`to." + dest + "` field. Alternatively you may provide the full path as ") + "a string in <Link to=\"...\"> and the router will parse it for you.";
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* When processing relative navigation we want to ignore ancestor routes that
|
||||
* do not contribute to the path, such that index/pathless layout routes don't
|
||||
* interfere.
|
||||
*
|
||||
* For example, when moving a route element into an index route and/or a
|
||||
* pathless layout route, relative link behavior contained within should stay
|
||||
* the same. Both of the following examples should link back to the root:
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts" element={<Link to=".."}>
|
||||
* </Route>
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts">
|
||||
* <Route element={<AccountsLayout />}> // <-- Does not contribute
|
||||
* <Route index element={<Link to=".."} /> // <-- Does not contribute
|
||||
* </Route
|
||||
* </Route>
|
||||
* </Route>
|
||||
*/
|
||||
function getPathContributingMatches(matches) {
|
||||
return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
|
||||
}
|
||||
|
||||
// Return the array of pathnames for the current route matches - used to
|
||||
// generate the routePathnames input for resolveTo()
|
||||
function getResolveToMatches(matches, v7_relativeSplatPath) {
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
|
||||
// When v7_relativeSplatPath is enabled, use the full pathname for the leaf
|
||||
// match so we include splat values for "." links. See:
|
||||
// https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
|
||||
if (v7_relativeSplatPath) {
|
||||
return pathMatches.map((match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase);
|
||||
}
|
||||
return pathMatches.map(match => match.pathnameBase);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
|
||||
if (isPathRelative === void 0) {
|
||||
isPathRelative = false;
|
||||
}
|
||||
let to;
|
||||
if (typeof toArg === "string") {
|
||||
to = parsePath(toArg);
|
||||
} else {
|
||||
to = _extends({}, toArg);
|
||||
invariant(!to.pathname || !to.pathname.includes("?"), getInvalidPathError("?", "pathname", "search", to));
|
||||
invariant(!to.pathname || !to.pathname.includes("#"), getInvalidPathError("#", "pathname", "hash", to));
|
||||
invariant(!to.search || !to.search.includes("#"), getInvalidPathError("#", "search", "hash", to));
|
||||
}
|
||||
let isEmptyPath = toArg === "" || to.pathname === "";
|
||||
let toPathname = isEmptyPath ? "/" : to.pathname;
|
||||
let from;
|
||||
|
||||
// Routing is relative to the current pathname if explicitly requested.
|
||||
//
|
||||
// If a pathname is explicitly provided in `to`, it should be relative to the
|
||||
// route context. This is explained in `Note on `<Link to>` values` in our
|
||||
// migration guide from v5 as a means of disambiguation between `to` values
|
||||
// that begin with `/` and those that do not. However, this is problematic for
|
||||
// `to` values that do not provide a pathname. `to` can simply be a search or
|
||||
// hash string, in which case we should assume that the navigation is relative
|
||||
// to the current location's pathname and *not* the route pathname.
|
||||
if (toPathname == null) {
|
||||
from = locationPathname;
|
||||
} else {
|
||||
let routePathnameIndex = routePathnames.length - 1;
|
||||
|
||||
// With relative="route" (the default), each leading .. segment means
|
||||
// "go up one route" instead of "go up one URL segment". This is a key
|
||||
// difference from how <a href> works and a major reason we call this a
|
||||
// "to" value instead of a "href".
|
||||
if (!isPathRelative && toPathname.startsWith("..")) {
|
||||
let toSegments = toPathname.split("/");
|
||||
while (toSegments[0] === "..") {
|
||||
toSegments.shift();
|
||||
routePathnameIndex -= 1;
|
||||
}
|
||||
to.pathname = toSegments.join("/");
|
||||
}
|
||||
from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
|
||||
}
|
||||
let path = resolvePath(to, from);
|
||||
|
||||
// Ensure the pathname has a trailing slash if the original "to" had one
|
||||
let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
|
||||
// Or if this was a link to the current path which has a trailing slash
|
||||
let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
|
||||
if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
|
||||
path.pathname += "/";
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function getToPathname(to) {
|
||||
// Empty strings should be treated the same as / paths
|
||||
return to === "" || to.pathname === "" ? "/" : typeof to === "string" ? parsePath(to).pathname : to.pathname;
|
||||
}
|
||||
const removeDoubleSlashes = path => path.replace(/\/\/+/g, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const joinPaths = paths => removeDoubleSlashes(paths.join("/"));
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizePathname = pathname => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeSearch = search => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const normalizeHash = hash => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
|
||||
/**
|
||||
* This is a shortcut for creating `application/json` responses. Converts `data`
|
||||
* to JSON and sets the `Content-Type` header.
|
||||
*
|
||||
* @deprecated The `json` method is deprecated in favor of returning raw objects.
|
||||
* This method will be removed in v7.
|
||||
*/
|
||||
const json = function json(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
let headers = new Headers(responseInit.headers);
|
||||
if (!headers.has("Content-Type")) {
|
||||
headers.set("Content-Type", "application/json; charset=utf-8");
|
||||
}
|
||||
return new Response(JSON.stringify(data), _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
class DataWithResponseInit {
|
||||
constructor(data, init) {
|
||||
this.type = "DataWithResponseInit";
|
||||
this.data = data;
|
||||
this.init = init || null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create "responses" that contain `status`/`headers` without forcing
|
||||
* serialization into an actual `Response` - used by Remix single fetch
|
||||
*/
|
||||
function data(data, init) {
|
||||
return new DataWithResponseInit(data, typeof init === "number" ? {
|
||||
status: init
|
||||
} : init);
|
||||
}
|
||||
class AbortedDeferredError extends Error {}
|
||||
class DeferredData {
|
||||
constructor(data, responseInit) {
|
||||
this.pendingKeysSet = new Set();
|
||||
this.subscribers = new Set();
|
||||
this.deferredKeys = [];
|
||||
invariant(data && typeof data === "object" && !Array.isArray(data), "defer() only accepts plain objects");
|
||||
|
||||
// Set up an AbortController + Promise we can race against to exit early
|
||||
// cancellation
|
||||
let reject;
|
||||
this.abortPromise = new Promise((_, r) => reject = r);
|
||||
this.controller = new AbortController();
|
||||
let onAbort = () => reject(new AbortedDeferredError("Deferred data aborted"));
|
||||
this.unlistenAbortSignal = () => this.controller.signal.removeEventListener("abort", onAbort);
|
||||
this.controller.signal.addEventListener("abort", onAbort);
|
||||
this.data = Object.entries(data).reduce((acc, _ref2) => {
|
||||
let [key, value] = _ref2;
|
||||
return Object.assign(acc, {
|
||||
[key]: this.trackPromise(key, value)
|
||||
});
|
||||
}, {});
|
||||
if (this.done) {
|
||||
// All incoming values were resolved
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
this.init = responseInit;
|
||||
}
|
||||
trackPromise(key, value) {
|
||||
if (!(value instanceof Promise)) {
|
||||
return value;
|
||||
}
|
||||
this.deferredKeys.push(key);
|
||||
this.pendingKeysSet.add(key);
|
||||
|
||||
// We store a little wrapper promise that will be extended with
|
||||
// _data/_error props upon resolve/reject
|
||||
let promise = Promise.race([value, this.abortPromise]).then(data => this.onSettle(promise, key, undefined, data), error => this.onSettle(promise, key, error));
|
||||
|
||||
// Register rejection listeners to avoid uncaught promise rejections on
|
||||
// errors or aborted deferred values
|
||||
promise.catch(() => {});
|
||||
Object.defineProperty(promise, "_tracked", {
|
||||
get: () => true
|
||||
});
|
||||
return promise;
|
||||
}
|
||||
onSettle(promise, key, error, data) {
|
||||
if (this.controller.signal.aborted && error instanceof AbortedDeferredError) {
|
||||
this.unlistenAbortSignal();
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
return Promise.reject(error);
|
||||
}
|
||||
this.pendingKeysSet.delete(key);
|
||||
if (this.done) {
|
||||
// Nothing left to abort!
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
|
||||
// If the promise was resolved/rejected with undefined, we'll throw an error as you
|
||||
// should always resolve with a value or null
|
||||
if (error === undefined && data === undefined) {
|
||||
let undefinedError = new Error("Deferred data for key \"" + key + "\" resolved/rejected with `undefined`, " + "you must resolve/reject with a value or `null`.");
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => undefinedError
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(undefinedError);
|
||||
}
|
||||
if (data === undefined) {
|
||||
Object.defineProperty(promise, "_error", {
|
||||
get: () => error
|
||||
});
|
||||
this.emit(false, key);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
Object.defineProperty(promise, "_data", {
|
||||
get: () => data
|
||||
});
|
||||
this.emit(false, key);
|
||||
return data;
|
||||
}
|
||||
emit(aborted, settledKey) {
|
||||
this.subscribers.forEach(subscriber => subscriber(aborted, settledKey));
|
||||
}
|
||||
subscribe(fn) {
|
||||
this.subscribers.add(fn);
|
||||
return () => this.subscribers.delete(fn);
|
||||
}
|
||||
cancel() {
|
||||
this.controller.abort();
|
||||
this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k));
|
||||
this.emit(true);
|
||||
}
|
||||
async resolveData(signal) {
|
||||
let aborted = false;
|
||||
if (!this.done) {
|
||||
let onAbort = () => this.cancel();
|
||||
signal.addEventListener("abort", onAbort);
|
||||
aborted = await new Promise(resolve => {
|
||||
this.subscribe(aborted => {
|
||||
signal.removeEventListener("abort", onAbort);
|
||||
if (aborted || this.done) {
|
||||
resolve(aborted);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return aborted;
|
||||
}
|
||||
get done() {
|
||||
return this.pendingKeysSet.size === 0;
|
||||
}
|
||||
get unwrappedData() {
|
||||
invariant(this.data !== null && this.done, "Can only unwrap data on initialized and settled deferreds");
|
||||
return Object.entries(this.data).reduce((acc, _ref3) => {
|
||||
let [key, value] = _ref3;
|
||||
return Object.assign(acc, {
|
||||
[key]: unwrapTrackedPromise(value)
|
||||
});
|
||||
}, {});
|
||||
}
|
||||
get pendingKeys() {
|
||||
return Array.from(this.pendingKeysSet);
|
||||
}
|
||||
}
|
||||
function isTrackedPromise(value) {
|
||||
return value instanceof Promise && value._tracked === true;
|
||||
}
|
||||
function unwrapTrackedPromise(value) {
|
||||
if (!isTrackedPromise(value)) {
|
||||
return value;
|
||||
}
|
||||
if (value._error) {
|
||||
throw value._error;
|
||||
}
|
||||
return value._data;
|
||||
}
|
||||
/**
|
||||
* @deprecated The `defer` method is deprecated in favor of returning raw
|
||||
* objects. This method will be removed in v7.
|
||||
*/
|
||||
const defer = function defer(data, init) {
|
||||
if (init === void 0) {
|
||||
init = {};
|
||||
}
|
||||
let responseInit = typeof init === "number" ? {
|
||||
status: init
|
||||
} : init;
|
||||
return new DeferredData(data, responseInit);
|
||||
};
|
||||
/**
|
||||
* A redirect response. Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirect = function redirect(url, init) {
|
||||
if (init === void 0) {
|
||||
init = 302;
|
||||
}
|
||||
let responseInit = init;
|
||||
if (typeof responseInit === "number") {
|
||||
responseInit = {
|
||||
status: responseInit
|
||||
};
|
||||
} else if (typeof responseInit.status === "undefined") {
|
||||
responseInit.status = 302;
|
||||
}
|
||||
let headers = new Headers(responseInit.headers);
|
||||
headers.set("Location", url);
|
||||
return new Response(null, _extends({}, responseInit, {
|
||||
headers
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will force a document reload to the new location.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const redirectDocument = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Reload-Document", "true");
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will perform a `history.replaceState` instead of a
|
||||
* `history.pushState` for client-side navigation redirects.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
const replace = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Replace", "true");
|
||||
return response;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
|
||||
*
|
||||
* We don't export the class for public use since it's an implementation
|
||||
* detail, but we export the interface above so folks can build their own
|
||||
* abstractions around instances via isRouteErrorResponse()
|
||||
*/
|
||||
class ErrorResponseImpl {
|
||||
constructor(status, statusText, data, internal) {
|
||||
if (internal === void 0) {
|
||||
internal = false;
|
||||
}
|
||||
this.status = status;
|
||||
this.statusText = statusText || "";
|
||||
this.internal = internal;
|
||||
if (data instanceof Error) {
|
||||
this.data = data.toString();
|
||||
this.error = data;
|
||||
} else {
|
||||
this.data = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given error is an ErrorResponse generated from a 4xx/5xx
|
||||
* Response thrown from an action/loader
|
||||
*/
|
||||
function isRouteErrorResponse(error) {
|
||||
return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A Router instance manages all navigation and data loading/mutations
|
||||
*/
|
||||
|
||||
/**
|
||||
* State maintained internally by the router. During a navigation, all states
|
||||
* reflect the the "old" location unless otherwise noted.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Data that can be passed into hydrate a Router from SSR
|
||||
*/
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialization options for createRouter
|
||||
*/
|
||||
|
||||
/**
|
||||
* State returned from a server-side query() call
|
||||
*/
|
||||
|
||||
/**
|
||||
* A StaticHandler instance manages a singular SSR navigation/fetch event
|
||||
*/
|
||||
|
||||
/**
|
||||
* Subscriber function signature for changes to router state
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function signature for determining the key to be used in scroll restoration
|
||||
* for a given location
|
||||
*/
|
||||
|
||||
/**
|
||||
* Function signature for determining the current scroll position
|
||||
*/
|
||||
|
||||
// Allowed for any navigation or fetch
|
||||
|
||||
// Only allowed for navigations
|
||||
|
||||
// Only allowed for submission navigations
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a normal (non-submission) navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a submission navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options to pass to navigate() for a navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a fetch() load
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options for a fetch() submission
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options to pass to fetch()
|
||||
*/
|
||||
|
||||
/**
|
||||
* Potential states for state.navigation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Potential states for fetchers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Cached info for active fetcher.load() instances so they can participate
|
||||
* in revalidation
|
||||
*/
|
||||
|
||||
/**
|
||||
* Identified fetcher.load() calls that need to be revalidated
|
||||
*/
|
||||
|
||||
const validMutationMethodsArr = ["post", "put", "patch", "delete"];
|
||||
const validMutationMethods = new Set(validMutationMethodsArr);
|
||||
const validRequestMethodsArr = ["get", ...validMutationMethodsArr];
|
||||
const validRequestMethods = new Set(validRequestMethodsArr);
|
||||
const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
|
||||
const redirectPreserveMethodStatusCodes = new Set([307, 308]);
|
||||
const IDLE_NAVIGATION = {
|
||||
state: "idle",
|
||||
location: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_FETCHER = {
|
||||
state: "idle",
|
||||
data: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
const IDLE_BLOCKER = {
|
||||
state: "unblocked",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: undefined
|
||||
};
|
||||
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
const defaultMapRouteProperties = route => ({
|
||||
hasErrorBoundary: Boolean(route.hasErrorBoundary)
|
||||
});
|
||||
const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createRouter
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Create a router and listen to history POP navigations
|
||||
*/
|
||||
function createRouter(init) {
|
||||
const routerWindow = init.window ? init.window : typeof window !== "undefined" ? window : undefined;
|
||||
const isBrowser = typeof routerWindow !== "undefined" && typeof routerWindow.document !== "undefined" && typeof routerWindow.document.createElement !== "undefined";
|
||||
const isServer = !isBrowser;
|
||||
invariant(init.routes.length > 0, "You must provide a non-empty routes array to createRouter");
|
||||
let mapRouteProperties;
|
||||
if (init.mapRouteProperties) {
|
||||
mapRouteProperties = init.mapRouteProperties;
|
||||
} else if (init.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = init.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
|
||||
// Routes keyed by ID
|
||||
let manifest = {};
|
||||
// Routes in tree format for matching
|
||||
let dataRoutes = convertRoutesToDataRoutes(init.routes, mapRouteProperties, undefined, manifest);
|
||||
let inFlightDataRoutes;
|
||||
let basename = init.basename || "/";
|
||||
let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
|
||||
let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
|
||||
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_fetcherPersist: false,
|
||||
v7_normalizeFormMethod: false,
|
||||
v7_partialHydration: false,
|
||||
v7_prependBasename: false,
|
||||
v7_relativeSplatPath: false,
|
||||
v7_skipActionErrorRevalidation: false
|
||||
}, init.future);
|
||||
// Cleanup function for history
|
||||
let unlistenHistory = null;
|
||||
// Externally-provided functions to call on all state changes
|
||||
let subscribers = new Set();
|
||||
// Externally-provided object to hold scroll restoration locations during routing
|
||||
let savedScrollPositions = null;
|
||||
// Externally-provided function to get scroll restoration keys
|
||||
let getScrollRestorationKey = null;
|
||||
// Externally-provided function to get current scroll position
|
||||
let getScrollPosition = null;
|
||||
// One-time flag to control the initial hydration scroll restoration. Because
|
||||
// we don't get the saved positions from <ScrollRestoration /> until _after_
|
||||
// the initial render, we need to manually trigger a separate updateState to
|
||||
// send along the restoreScrollPosition
|
||||
// Set to true if we have `hydrationData` since we assume we were SSR'd and that
|
||||
// SSR did the initial scroll restoration.
|
||||
let initialScrollRestored = init.hydrationData != null;
|
||||
let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
|
||||
let initialMatchesIsFOW = false;
|
||||
let initialErrors = null;
|
||||
if (initialMatches == null && !patchRoutesOnNavigationImpl) {
|
||||
// If we do not match a user-provided-route, fall back to the root
|
||||
// to allow the error boundary to take over
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: init.history.location.pathname
|
||||
});
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
initialMatches = matches;
|
||||
initialErrors = {
|
||||
[route.id]: error
|
||||
};
|
||||
}
|
||||
|
||||
// In SPA apps, if the user provided a patchRoutesOnNavigation implementation and
|
||||
// our initial match is a splat route, clear them out so we run through lazy
|
||||
// discovery on hydration in case there's a more accurate lazy route match.
|
||||
// In SSR apps (with `hydrationData`), we expect that the server will send
|
||||
// up the proper matched routes so we don't want to run lazy discovery on
|
||||
// initial hydration and want to hydrate into the splat route.
|
||||
if (initialMatches && !init.hydrationData) {
|
||||
let fogOfWar = checkFogOfWar(initialMatches, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active) {
|
||||
initialMatches = null;
|
||||
}
|
||||
}
|
||||
let initialized;
|
||||
if (!initialMatches) {
|
||||
initialized = false;
|
||||
initialMatches = [];
|
||||
|
||||
// If partial hydration and fog of war is enabled, we will be running
|
||||
// `patchRoutesOnNavigation` during hydration so include any partial matches as
|
||||
// the initial matches so we can properly render `HydrateFallback`'s
|
||||
if (future.v7_partialHydration) {
|
||||
let fogOfWar = checkFogOfWar(null, dataRoutes, init.history.location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
initialMatchesIsFOW = true;
|
||||
initialMatches = fogOfWar.matches;
|
||||
}
|
||||
}
|
||||
} else if (initialMatches.some(m => m.route.lazy)) {
|
||||
// All initialMatches need to be loaded before we're ready. If we have lazy
|
||||
// functions around still then we'll need to run them in initialize()
|
||||
initialized = false;
|
||||
} else if (!initialMatches.some(m => m.route.loader)) {
|
||||
// If we've got no loaders to run, then we're good to go
|
||||
initialized = true;
|
||||
} else if (future.v7_partialHydration) {
|
||||
// If partial hydration is enabled, we're initialized so long as we were
|
||||
// provided with hydrationData for every route with a loader, and no loaders
|
||||
// were marked for explicit hydration
|
||||
let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
|
||||
let errors = init.hydrationData ? init.hydrationData.errors : null;
|
||||
// If errors exist, don't consider routes below the boundary
|
||||
if (errors) {
|
||||
let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
|
||||
initialized = initialMatches.slice(0, idx + 1).every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
} else {
|
||||
initialized = initialMatches.every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
}
|
||||
} else {
|
||||
// Without partial hydration - we're initialized if we were provided any
|
||||
// hydrationData - which is expected to be complete
|
||||
initialized = init.hydrationData != null;
|
||||
}
|
||||
let router;
|
||||
let state = {
|
||||
historyAction: init.history.action,
|
||||
location: init.history.location,
|
||||
matches: initialMatches,
|
||||
initialized,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
// Don't restore on initial updateState() if we were SSR'd
|
||||
restoreScrollPosition: init.hydrationData != null ? false : null,
|
||||
preventScrollReset: false,
|
||||
revalidation: "idle",
|
||||
loaderData: init.hydrationData && init.hydrationData.loaderData || {},
|
||||
actionData: init.hydrationData && init.hydrationData.actionData || null,
|
||||
errors: init.hydrationData && init.hydrationData.errors || initialErrors,
|
||||
fetchers: new Map(),
|
||||
blockers: new Map()
|
||||
};
|
||||
|
||||
// -- Stateful internal variables to manage navigations --
|
||||
// Current navigation in progress (to be committed in completeNavigation)
|
||||
let pendingAction = Action.Pop;
|
||||
|
||||
// Should the current navigation prevent the scroll reset if scroll cannot
|
||||
// be restored?
|
||||
let pendingPreventScrollReset = false;
|
||||
|
||||
// AbortController for the active navigation
|
||||
let pendingNavigationController;
|
||||
|
||||
// Should the current navigation enable document.startViewTransition?
|
||||
let pendingViewTransitionEnabled = false;
|
||||
|
||||
// Store applied view transitions so we can apply them on POP
|
||||
let appliedViewTransitions = new Map();
|
||||
|
||||
// Cleanup function for persisting applied transitions to sessionStorage
|
||||
let removePageHideEventListener = null;
|
||||
|
||||
// We use this to avoid touching history in completeNavigation if a
|
||||
// revalidation is entirely uninterrupted
|
||||
let isUninterruptedRevalidation = false;
|
||||
|
||||
// Use this internal flag to force revalidation of all loaders:
|
||||
// - submissions (completed or interrupted)
|
||||
// - useRevalidator()
|
||||
// - X-Remix-Revalidate (from redirect)
|
||||
let isRevalidationRequired = false;
|
||||
|
||||
// Use this internal array to capture routes that require revalidation due
|
||||
// to a cancelled deferred on action submission
|
||||
let cancelledDeferredRoutes = [];
|
||||
|
||||
// Use this internal array to capture fetcher loads that were cancelled by an
|
||||
// action navigation and require revalidation
|
||||
let cancelledFetcherLoads = new Set();
|
||||
|
||||
// AbortControllers for any in-flight fetchers
|
||||
let fetchControllers = new Map();
|
||||
|
||||
// Track loads based on the order in which they started
|
||||
let incrementingLoadId = 0;
|
||||
|
||||
// Track the outstanding pending navigation data load to be compared against
|
||||
// the globally incrementing load when a fetcher load lands after a completed
|
||||
// navigation
|
||||
let pendingNavigationLoadId = -1;
|
||||
|
||||
// Fetchers that triggered data reloads as a result of their actions
|
||||
let fetchReloadIds = new Map();
|
||||
|
||||
// Fetchers that triggered redirect navigations
|
||||
let fetchRedirectIds = new Set();
|
||||
|
||||
// Most recent href/match for fetcher.load calls for fetchers
|
||||
let fetchLoadMatches = new Map();
|
||||
|
||||
// Ref-count mounted fetchers so we know when it's ok to clean them up
|
||||
let activeFetchers = new Map();
|
||||
|
||||
// Fetchers that have requested a delete when using v7_fetcherPersist,
|
||||
// they'll be officially removed after they return to idle
|
||||
let deletedFetchers = new Set();
|
||||
|
||||
// Store DeferredData instances for active route matches. When a
|
||||
// route loader returns defer() we stick one in here. Then, when a nested
|
||||
// promise resolves we update loaderData. If a new navigation starts we
|
||||
// cancel active deferreds for eliminated routes.
|
||||
let activeDeferreds = new Map();
|
||||
|
||||
// Store blocker functions in a separate Map outside of router state since
|
||||
// we don't need to update UI state if they change
|
||||
let blockerFunctions = new Map();
|
||||
|
||||
// Flag to ignore the next history update, so we can revert the URL change on
|
||||
// a POP navigation that was blocked by the user without touching router state
|
||||
let unblockBlockerHistoryUpdate = undefined;
|
||||
|
||||
// Initialize the router, all side effects should be kicked off from here.
|
||||
// Implemented as a Fluent API for ease of:
|
||||
// let router = createRouter(init).initialize();
|
||||
function initialize() {
|
||||
// If history informs us of a POP navigation, start the navigation but do not update
|
||||
// state. We'll update our own state once the navigation completes
|
||||
unlistenHistory = init.history.listen(_ref => {
|
||||
let {
|
||||
action: historyAction,
|
||||
location,
|
||||
delta
|
||||
} = _ref;
|
||||
// Ignore this event if it was just us resetting the URL from a
|
||||
// blocked POP navigation
|
||||
if (unblockBlockerHistoryUpdate) {
|
||||
unblockBlockerHistoryUpdate();
|
||||
unblockBlockerHistoryUpdate = undefined;
|
||||
return;
|
||||
}
|
||||
warning(blockerFunctions.size === 0 || delta != null, "You are trying to use a blocker on a POP navigation to a location " + "that was not created by @remix-run/router. This will fail silently in " + "production. This can happen if you are navigating outside the router " + "via `window.history.pushState`/`window.location.hash` instead of using " + "router navigation APIs. This can also happen if you are using " + "createHashRouter and the user manually changes the URL.");
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey && delta != null) {
|
||||
// Restore the URL to match the current UI, but don't update router state
|
||||
let nextHistoryUpdatePromise = new Promise(resolve => {
|
||||
unblockBlockerHistoryUpdate = resolve;
|
||||
});
|
||||
init.history.go(delta * -1);
|
||||
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location
|
||||
});
|
||||
// Re-do the same POP navigation we just blocked, after the url
|
||||
// restoration is also complete. See:
|
||||
// https://github.com/remix-run/react-router/issues/11613
|
||||
nextHistoryUpdatePromise.then(() => init.history.go(delta));
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return startNavigation(historyAction, location);
|
||||
});
|
||||
if (isBrowser) {
|
||||
// FIXME: This feels gross. How can we cleanup the lines between
|
||||
// scrollRestoration/appliedTransitions persistance?
|
||||
restoreAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
let _saveAppliedTransitions = () => persistAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
routerWindow.addEventListener("pagehide", _saveAppliedTransitions);
|
||||
removePageHideEventListener = () => routerWindow.removeEventListener("pagehide", _saveAppliedTransitions);
|
||||
}
|
||||
|
||||
// Kick off initial data load if needed. Use Pop to avoid modifying history
|
||||
// Note we don't do any handling of lazy here. For SPA's it'll get handled
|
||||
// in the normal navigation flow. For SSR it's expected that lazy modules are
|
||||
// resolved prior to router creation since we can't go into a fallbackElement
|
||||
// UI for SSR'd apps
|
||||
if (!state.initialized) {
|
||||
startNavigation(Action.Pop, state.location, {
|
||||
initialHydration: true
|
||||
});
|
||||
}
|
||||
return router;
|
||||
}
|
||||
|
||||
// Clean up a router and it's side effects
|
||||
function dispose() {
|
||||
if (unlistenHistory) {
|
||||
unlistenHistory();
|
||||
}
|
||||
if (removePageHideEventListener) {
|
||||
removePageHideEventListener();
|
||||
}
|
||||
subscribers.clear();
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
state.fetchers.forEach((_, key) => deleteFetcher(key));
|
||||
state.blockers.forEach((_, key) => deleteBlocker(key));
|
||||
}
|
||||
|
||||
// Subscribe to state updates for the router
|
||||
function subscribe(fn) {
|
||||
subscribers.add(fn);
|
||||
return () => subscribers.delete(fn);
|
||||
}
|
||||
|
||||
// Update our state and notify the calling context of the change
|
||||
function updateState(newState, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state = _extends({}, state, newState);
|
||||
|
||||
// Prep fetcher cleanup so we can tell the UI which fetcher data entries
|
||||
// can be removed
|
||||
let completedFetchers = [];
|
||||
let deletedFetchersKeys = [];
|
||||
if (future.v7_fetcherPersist) {
|
||||
state.fetchers.forEach((fetcher, key) => {
|
||||
if (fetcher.state === "idle") {
|
||||
if (deletedFetchers.has(key)) {
|
||||
// Unmounted from the UI and can be totally removed
|
||||
deletedFetchersKeys.push(key);
|
||||
} else {
|
||||
// Returned to idle but still mounted in the UI, so semi-remains for
|
||||
// revalidations and such
|
||||
completedFetchers.push(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Remove any lingering deleted fetchers that have already been removed
|
||||
// from state.fetchers
|
||||
deletedFetchers.forEach(key => {
|
||||
if (!state.fetchers.has(key) && !fetchControllers.has(key)) {
|
||||
deletedFetchersKeys.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
// Iterate over a local copy so that if flushSync is used and we end up
|
||||
// removing and adding a new subscriber due to the useCallback dependencies,
|
||||
// we don't get ourselves into a loop calling the new subscriber immediately
|
||||
[...subscribers].forEach(subscriber => subscriber(state, {
|
||||
deletedFetchers: deletedFetchersKeys,
|
||||
viewTransitionOpts: opts.viewTransitionOpts,
|
||||
flushSync: opts.flushSync === true
|
||||
}));
|
||||
|
||||
// Remove idle fetchers from state since we only care about in-flight fetchers.
|
||||
if (future.v7_fetcherPersist) {
|
||||
completedFetchers.forEach(key => state.fetchers.delete(key));
|
||||
deletedFetchersKeys.forEach(key => deleteFetcher(key));
|
||||
} else {
|
||||
// We already called deleteFetcher() on these, can remove them from this
|
||||
// Set now that we've handed the keys off to the data layer
|
||||
deletedFetchersKeys.forEach(key => deletedFetchers.delete(key));
|
||||
}
|
||||
}
|
||||
|
||||
// Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
|
||||
// and setting state.[historyAction/location/matches] to the new route.
|
||||
// - Location is a required param
|
||||
// - Navigation will always be set to IDLE_NAVIGATION
|
||||
// - Can pass any other state in newState
|
||||
function completeNavigation(location, newState, _temp) {
|
||||
var _location$state, _location$state2;
|
||||
let {
|
||||
flushSync
|
||||
} = _temp === void 0 ? {} : _temp;
|
||||
// Deduce if we're in a loading/actionReload state:
|
||||
// - We have committed actionData in the store
|
||||
// - The current navigation was a mutation submission
|
||||
// - We're past the submitting state and into the loading state
|
||||
// - The location being loaded is not the result of a redirect
|
||||
let isActionReload = state.actionData != null && state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && state.navigation.state === "loading" && ((_location$state = location.state) == null ? void 0 : _location$state._isRedirect) !== true;
|
||||
let actionData;
|
||||
if (newState.actionData) {
|
||||
if (Object.keys(newState.actionData).length > 0) {
|
||||
actionData = newState.actionData;
|
||||
} else {
|
||||
// Empty actionData -> clear prior actionData due to an action error
|
||||
actionData = null;
|
||||
}
|
||||
} else if (isActionReload) {
|
||||
// Keep the current data if we're wrapping up the action reload
|
||||
actionData = state.actionData;
|
||||
} else {
|
||||
// Clear actionData on any other completed navigations
|
||||
actionData = null;
|
||||
}
|
||||
|
||||
// Always preserve any existing loaderData from re-used routes
|
||||
let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
|
||||
|
||||
// On a successful navigation we can assume we got through all blockers
|
||||
// so we can start fresh
|
||||
let blockers = state.blockers;
|
||||
if (blockers.size > 0) {
|
||||
blockers = new Map(blockers);
|
||||
blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
|
||||
}
|
||||
|
||||
// Always respect the user flag. Otherwise don't reset on mutation
|
||||
// submission navigations unless they redirect
|
||||
let preventScrollReset = pendingPreventScrollReset === true || state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && ((_location$state2 = location.state) == null ? void 0 : _location$state2._isRedirect) !== true;
|
||||
|
||||
// Commit any in-flight routes at the end of the HMR revalidation "navigation"
|
||||
if (inFlightDataRoutes) {
|
||||
dataRoutes = inFlightDataRoutes;
|
||||
inFlightDataRoutes = undefined;
|
||||
}
|
||||
if (isUninterruptedRevalidation) ; else if (pendingAction === Action.Pop) ; else if (pendingAction === Action.Push) {
|
||||
init.history.push(location, location.state);
|
||||
} else if (pendingAction === Action.Replace) {
|
||||
init.history.replace(location, location.state);
|
||||
}
|
||||
let viewTransitionOpts;
|
||||
|
||||
// On POP, enable transitions if they were enabled on the original navigation
|
||||
if (pendingAction === Action.Pop) {
|
||||
// Forward takes precedence so they behave like the original navigation
|
||||
let priorPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (priorPaths && priorPaths.has(location.pathname)) {
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
} else if (appliedViewTransitions.has(location.pathname)) {
|
||||
// If we don't have a previous forward nav, assume we're popping back to
|
||||
// the new location and enable if that location previously enabled
|
||||
viewTransitionOpts = {
|
||||
currentLocation: location,
|
||||
nextLocation: state.location
|
||||
};
|
||||
}
|
||||
} else if (pendingViewTransitionEnabled) {
|
||||
// Store the applied transition on PUSH/REPLACE
|
||||
let toPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (toPaths) {
|
||||
toPaths.add(location.pathname);
|
||||
} else {
|
||||
toPaths = new Set([location.pathname]);
|
||||
appliedViewTransitions.set(state.location.pathname, toPaths);
|
||||
}
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location
|
||||
};
|
||||
}
|
||||
updateState(_extends({}, newState, {
|
||||
// matches, errors, fetchers go through as-is
|
||||
actionData,
|
||||
loaderData,
|
||||
historyAction: pendingAction,
|
||||
location,
|
||||
initialized: true,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
revalidation: "idle",
|
||||
restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
|
||||
preventScrollReset,
|
||||
blockers
|
||||
}), {
|
||||
viewTransitionOpts,
|
||||
flushSync: flushSync === true
|
||||
});
|
||||
|
||||
// Reset stateful navigation vars
|
||||
pendingAction = Action.Pop;
|
||||
pendingPreventScrollReset = false;
|
||||
pendingViewTransitionEnabled = false;
|
||||
isUninterruptedRevalidation = false;
|
||||
isRevalidationRequired = false;
|
||||
cancelledDeferredRoutes = [];
|
||||
}
|
||||
|
||||
// Trigger a navigation event, which can either be a numerical POP or a PUSH
|
||||
// replace with an optional submission
|
||||
async function navigate(to, opts) {
|
||||
if (typeof to === "number") {
|
||||
init.history.go(to);
|
||||
return;
|
||||
}
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, to, future.v7_relativeSplatPath, opts == null ? void 0 : opts.fromRouteId, opts == null ? void 0 : opts.relative);
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, false, normalizedPath, opts);
|
||||
let currentLocation = state.location;
|
||||
let nextLocation = createLocation(state.location, path, opts && opts.state);
|
||||
|
||||
// When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
|
||||
// URL from window.location, so we need to encode it here so the behavior
|
||||
// remains the same as POP and non-data-router usages. new URL() does all
|
||||
// the same encoding we'd get from a history.pushState/window.location read
|
||||
// without having to touch history
|
||||
nextLocation = _extends({}, nextLocation, init.history.encodeLocation(nextLocation));
|
||||
let userReplace = opts && opts.replace != null ? opts.replace : undefined;
|
||||
let historyAction = Action.Push;
|
||||
if (userReplace === true) {
|
||||
historyAction = Action.Replace;
|
||||
} else if (userReplace === false) ; else if (submission != null && isMutationMethod(submission.formMethod) && submission.formAction === state.location.pathname + state.location.search) {
|
||||
// By default on submissions to the current location we REPLACE so that
|
||||
// users don't have to double-click the back button to get to the prior
|
||||
// location. If the user redirects to a different location from the
|
||||
// action/loader this will be ignored and the redirect will be a PUSH
|
||||
historyAction = Action.Replace;
|
||||
}
|
||||
let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
});
|
||||
if (blockerKey) {
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location: nextLocation,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: nextLocation
|
||||
});
|
||||
// Send the same navigation through
|
||||
navigate(to, opts);
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey, IDLE_BLOCKER);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
return await startNavigation(historyAction, nextLocation, {
|
||||
submission,
|
||||
// Send through the formData serialization error if we have one so we can
|
||||
// render at the right error boundary after we match routes
|
||||
pendingError: error,
|
||||
preventScrollReset,
|
||||
replace: opts && opts.replace,
|
||||
enableViewTransition: opts && opts.viewTransition,
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
|
||||
// Revalidate all current loaders. If a navigation is in progress or if this
|
||||
// is interrupted by a navigation, allow this to "succeed" by calling all
|
||||
// loaders during the next loader round
|
||||
function revalidate() {
|
||||
interruptActiveLoads();
|
||||
updateState({
|
||||
revalidation: "loading"
|
||||
});
|
||||
|
||||
// If we're currently submitting an action, we don't need to start a new
|
||||
// navigation, we'll just let the follow up loader execution call all loaders
|
||||
if (state.navigation.state === "submitting") {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we're currently in an idle state, start a new navigation for the current
|
||||
// action/location and mark it as uninterrupted, which will skip the history
|
||||
// update in completeNavigation
|
||||
if (state.navigation.state === "idle") {
|
||||
startNavigation(state.historyAction, state.location, {
|
||||
startUninterruptedRevalidation: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, if we're currently in a loading state, just start a new
|
||||
// navigation to the navigation.location but do not trigger an uninterrupted
|
||||
// revalidation so that history correctly updates once the navigation completes
|
||||
startNavigation(pendingAction || state.historyAction, state.navigation.location, {
|
||||
overrideNavigation: state.navigation,
|
||||
// Proxy through any rending view transition
|
||||
enableViewTransition: pendingViewTransitionEnabled === true
|
||||
});
|
||||
}
|
||||
|
||||
// Start a navigation to the given action/location. Can optionally provide a
|
||||
// overrideNavigation which will override the normalLoad in the case of a redirect
|
||||
// navigation
|
||||
async function startNavigation(historyAction, location, opts) {
|
||||
// Abort any in-progress navigations and start a new one. Unset any ongoing
|
||||
// uninterrupted revalidations unless told otherwise, since we want this
|
||||
// new navigation to update history normally
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
pendingNavigationController = null;
|
||||
pendingAction = historyAction;
|
||||
isUninterruptedRevalidation = (opts && opts.startUninterruptedRevalidation) === true;
|
||||
|
||||
// Save the current scroll position every time we start a new navigation,
|
||||
// and track whether we should reset scroll on completion
|
||||
saveScrollPosition(state.location, state.matches);
|
||||
pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let loadingNavigation = opts && opts.overrideNavigation;
|
||||
let matches = opts != null && opts.initialHydration && state.matches && state.matches.length > 0 && !initialMatchesIsFOW ?
|
||||
// `matchRoutes()` has already been called if we're in here via `router.initialize()`
|
||||
state.matches : matchRoutes(routesToUse, location, basename);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
|
||||
// Short circuit if it's only a hash change and not a revalidation or
|
||||
// mutation submission.
|
||||
//
|
||||
// Ignore on initial page loads because since the initial hydration will always
|
||||
// be "same hash". For example, on /page#hash and submit a <Form method="post">
|
||||
// which will default to a navigation to /page
|
||||
if (matches && state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
|
||||
completeNavigation(location, {
|
||||
matches
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
|
||||
// Short circuit with a 404 on the root error boundary if we match nothing
|
||||
if (!matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
completeNavigation(location, {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
}, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a controller/Request for this navigation
|
||||
pendingNavigationController = new AbortController();
|
||||
let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
|
||||
let pendingActionResult;
|
||||
if (opts && opts.pendingError) {
|
||||
// If we have a pendingError, it means the user attempted a GET submission
|
||||
// with binary FormData so assign here and skip to handleLoaders. That
|
||||
// way we handle calling loaders above the boundary etc. It's not really
|
||||
// different from an actionError in that sense.
|
||||
pendingActionResult = [findNearestBoundary(matches).route.id, {
|
||||
type: ResultType.error,
|
||||
error: opts.pendingError
|
||||
}];
|
||||
} else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {
|
||||
// Call action if we received an action submission
|
||||
let actionResult = await handleAction(request, location, opts.submission, matches, fogOfWar.active, {
|
||||
replace: opts.replace,
|
||||
flushSync
|
||||
});
|
||||
if (actionResult.shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we received a 404 from handleAction, it's because we couldn't lazily
|
||||
// discover the destination route so we don't want to call loaders
|
||||
if (actionResult.pendingActionResult) {
|
||||
let [routeId, result] = actionResult.pendingActionResult;
|
||||
if (isErrorResult(result) && isRouteErrorResponse(result.error) && result.error.status === 404) {
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, {
|
||||
matches: actionResult.matches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[routeId]: result.error
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
matches = actionResult.matches || matches;
|
||||
pendingActionResult = actionResult.pendingActionResult;
|
||||
loadingNavigation = getLoadingNavigation(location, opts.submission);
|
||||
flushSync = false;
|
||||
// No need to do fog of war matching again on loader execution
|
||||
fogOfWar.active = false;
|
||||
|
||||
// Create a GET request for the loaders
|
||||
request = createClientSideRequest(init.history, request.url, request.signal);
|
||||
}
|
||||
|
||||
// Call loaders
|
||||
let {
|
||||
shortCircuited,
|
||||
matches: updatedMatches,
|
||||
loaderData,
|
||||
errors
|
||||
} = await handleLoaders(request, location, matches, fogOfWar.active, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, opts && opts.initialHydration === true, flushSync, pendingActionResult);
|
||||
if (shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clean up now that the action/loaders have completed. Don't clean up if
|
||||
// we short circuited because pendingNavigationController will have already
|
||||
// been assigned to a new controller for the next navigation
|
||||
pendingNavigationController = null;
|
||||
completeNavigation(location, _extends({
|
||||
matches: updatedMatches || matches
|
||||
}, getActionDataForCommit(pendingActionResult), {
|
||||
loaderData,
|
||||
errors
|
||||
}));
|
||||
}
|
||||
|
||||
// Call the action matched by the leaf route for this navigation and handle
|
||||
// redirects/errors
|
||||
async function handleAction(request, location, submission, matches, isFogOfWar, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
interruptActiveLoads();
|
||||
|
||||
// Put us in a submitting state
|
||||
let navigation = getSubmittingNavigation(location, submission);
|
||||
updateState({
|
||||
navigation
|
||||
}, {
|
||||
flushSync: opts.flushSync === true
|
||||
});
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
pendingActionResult: [boundaryId, {
|
||||
type: ResultType.error,
|
||||
error: discoverResult.error
|
||||
}]
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
notFoundMatches,
|
||||
error,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
pendingActionResult: [route.id, {
|
||||
type: ResultType.error,
|
||||
error
|
||||
}]
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
|
||||
// Call our action and get the result
|
||||
let result;
|
||||
let actionMatch = getTargetMatch(matches, location);
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: location.pathname,
|
||||
routeId: actionMatch.route.id
|
||||
})
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", state, request, [actionMatch], matches, null);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
let replace;
|
||||
if (opts && opts.replace != null) {
|
||||
replace = opts.replace;
|
||||
} else {
|
||||
// If the user didn't explicity indicate replace behavior, replace if
|
||||
// we redirected to the exact same location we're currently at to avoid
|
||||
// double back-buttons
|
||||
let location = normalizeRedirectLocation(result.response.headers.get("Location"), new URL(request.url), basename, init.history);
|
||||
replace = location === state.location.pathname + state.location.search;
|
||||
}
|
||||
await startRedirectNavigation(request, result, true, {
|
||||
submission,
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
|
||||
|
||||
// By default, all submissions to the current location are REPLACE
|
||||
// navigations, but if the action threw an error that'll be rendered in
|
||||
// an errorElement, we fall back to PUSH so that the user can use the
|
||||
// back button to get back to the pre-submission form location to try
|
||||
// again
|
||||
if ((opts && opts.replace) !== true) {
|
||||
pendingAction = Action.Push;
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [boundaryMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [actionMatch.route.id, result]
|
||||
};
|
||||
}
|
||||
|
||||
// Call all applicable loaders for the given matches, handling redirects,
|
||||
// errors, etc.
|
||||
async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace, initialHydration, flushSync, pendingActionResult) {
|
||||
// Figure out the right navigation we want to use for data loading
|
||||
let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
|
||||
|
||||
// If this was a redirect from an action we don't have a "submission" but
|
||||
// we have it on the loading navigation so use that if available
|
||||
let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
|
||||
|
||||
// If this is an uninterrupted revalidation, we remain in our current idle
|
||||
// state. If not, we need to switch to our loading state and load data,
|
||||
// preserving any new action data or existing action data (in the case of
|
||||
// a revalidation interrupting an actionReload)
|
||||
// If we have partialHydration enabled, then don't update the state for the
|
||||
// initial data load since it's not a "navigation"
|
||||
let shouldUpdateNavigationState = !isUninterruptedRevalidation && (!future.v7_partialHydration || !initialHydration);
|
||||
|
||||
// When fog of war is enabled, we enter our `loading` state earlier so we
|
||||
// can discover new routes during the `loading` state. We skip this if
|
||||
// we've already run actions since we would have done our matching already.
|
||||
// If the children() function threw then, we want to proceed with the
|
||||
// partial matches it discovered.
|
||||
if (isFogOfWar) {
|
||||
if (shouldUpdateNavigationState) {
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
updateState(_extends({
|
||||
navigation: loadingNavigation
|
||||
}, actionData !== undefined ? {
|
||||
actionData
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
let discoverResult = await discoverRoutes(matches, location.pathname, request.signal);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[boundaryId]: discoverResult.error
|
||||
}
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let {
|
||||
error,
|
||||
notFoundMatches,
|
||||
route
|
||||
} = handleNavigational404(location.pathname);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error
|
||||
}
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, future.v7_partialHydration && initialHydration === true, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult);
|
||||
|
||||
// Cancel pending deferreds for no-longer-matched routes or routes we're
|
||||
// about to reload. Note that if this is an action reload we would have
|
||||
// already cancelled all pending deferreds so this would be a no-op
|
||||
cancelActiveDeferreds(routeId => !(matches && matches.some(m => m.route.id === routeId)) || matchesToLoad && matchesToLoad.some(m => m.route.id === routeId));
|
||||
pendingNavigationLoadId = ++incrementingLoadId;
|
||||
|
||||
// Short circuit if we have no loaders to run
|
||||
if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
completeNavigation(location, _extends({
|
||||
matches,
|
||||
loaderData: {},
|
||||
// Commit pending error if we're short circuiting
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null
|
||||
}, getActionDataForCommit(pendingActionResult), updatedFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {}), {
|
||||
flushSync
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
if (shouldUpdateNavigationState) {
|
||||
let updates = {};
|
||||
if (!isFogOfWar) {
|
||||
// Only update navigation/actionNData if we didn't already do it above
|
||||
updates.navigation = loadingNavigation;
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
if (actionData !== undefined) {
|
||||
updates.actionData = actionData;
|
||||
}
|
||||
}
|
||||
if (revalidatingFetchers.length > 0) {
|
||||
updates.fetchers = getUpdatedRevalidatingFetchers(revalidatingFetchers);
|
||||
}
|
||||
updateState(updates, {
|
||||
flushSync
|
||||
});
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
abortFetcher(rf.key);
|
||||
if (rf.controller) {
|
||||
// Fetchers use an independent AbortController so that aborting a fetcher
|
||||
// (via deleteFetcher) does not abort the triggering navigation that
|
||||
// triggered the revalidation
|
||||
fetchControllers.set(rf.key, rf.controller);
|
||||
}
|
||||
});
|
||||
|
||||
// Proxy navigation abort through to revalidation fetchers
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(f => abortFetcher(f.key));
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, request);
|
||||
if (request.signal.aborted) {
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
|
||||
// Clean up _after_ loaders have completed. Don't clean up if we short
|
||||
// circuited because fetchControllers would have been aborted and
|
||||
// reassigned to new controllers for the next navigation
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
}
|
||||
revalidatingFetchers.forEach(rf => fetchControllers.delete(rf.key));
|
||||
|
||||
// If any loaders returned a redirect Response, start a new REPLACE navigation
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace
|
||||
});
|
||||
return {
|
||||
shortCircuited: true
|
||||
};
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
|
||||
// Wire up subscribers to update loaderData as promises settle
|
||||
activeDeferreds.forEach((deferredData, routeId) => {
|
||||
deferredData.subscribe(aborted => {
|
||||
// Note: No need to updateState here since the TrackedPromise on
|
||||
// loaderData is stable across resolve/reject
|
||||
// Remove this instance if we were aborted or if promises have settled
|
||||
if (aborted || deferredData.done) {
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Preserve SSR errors during partial hydration
|
||||
if (future.v7_partialHydration && initialHydration && state.errors) {
|
||||
errors = _extends({}, state.errors, errors);
|
||||
}
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
|
||||
let shouldUpdateFetchers = updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;
|
||||
return _extends({
|
||||
matches,
|
||||
loaderData,
|
||||
errors
|
||||
}, shouldUpdateFetchers ? {
|
||||
fetchers: new Map(state.fetchers)
|
||||
} : {});
|
||||
}
|
||||
function getUpdatedActionData(pendingActionResult) {
|
||||
if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {
|
||||
// This is cast to `any` currently because `RouteData`uses any and it
|
||||
// would be a breaking change to use any.
|
||||
// TODO: v7 - change `RouteData` to use `unknown` instead of `any`
|
||||
return {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
};
|
||||
} else if (state.actionData) {
|
||||
if (Object.keys(state.actionData).length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return state.actionData;
|
||||
}
|
||||
}
|
||||
}
|
||||
function getUpdatedRevalidatingFetchers(revalidatingFetchers) {
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let fetcher = state.fetchers.get(rf.key);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, fetcher ? fetcher.data : undefined);
|
||||
state.fetchers.set(rf.key, revalidatingFetcher);
|
||||
});
|
||||
return new Map(state.fetchers);
|
||||
}
|
||||
|
||||
// Trigger a fetcher load/submit for the given fetcher key
|
||||
function fetch(key, routeId, href, opts) {
|
||||
if (isServer) {
|
||||
throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
|
||||
}
|
||||
abortFetcher(key);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, future.v7_relativeSplatPath, routeId, opts == null ? void 0 : opts.relative);
|
||||
let matches = matchRoutes(routesToUse, normalizedPath, basename);
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, normalizedPath);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
if (!matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: normalizedPath
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let {
|
||||
path,
|
||||
submission,
|
||||
error
|
||||
} = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
|
||||
if (error) {
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
}
|
||||
let match = getTargetMatch(matches, path);
|
||||
let preventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
handleFetcherAction(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
return;
|
||||
}
|
||||
|
||||
// Store off the match so we can call it's shouldRevalidate on subsequent
|
||||
// revalidations
|
||||
fetchLoadMatches.set(key, {
|
||||
routeId,
|
||||
path
|
||||
});
|
||||
handleFetcherLoader(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
|
||||
}
|
||||
|
||||
// Call the action for the matched fetcher.submit(), and then handle redirects,
|
||||
// errors, and revalidation
|
||||
async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
interruptActiveLoads();
|
||||
fetchLoadMatches.delete(key);
|
||||
function detectAndHandle405Error(m) {
|
||||
if (!m.route.action && !m.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: submission.formMethod,
|
||||
pathname: path,
|
||||
routeId: routeId
|
||||
});
|
||||
setFetcherError(key, routeId, error, {
|
||||
flushSync
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if (!isFogOfWar && detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Put this fetcher into it's submitting state
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(requestMatches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
requestMatches = discoverResult.matches;
|
||||
match = getTargetMatch(requestMatches, path);
|
||||
if (detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Call the action for the fetcher
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let actionResults = await callDataStrategy("action", state, fetchRequest, [match], requestMatches, key);
|
||||
let actionResult = actionResults[match.route.id];
|
||||
if (fetchRequest.signal.aborted) {
|
||||
// We can delete this so long as we weren't aborted by our own fetcher
|
||||
// re-submit which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// When using v7_fetcherPersist, we don't want errors bubbling up to the UI
|
||||
// or redirects processed for unmounted fetchers so we just revert them to
|
||||
// idle
|
||||
if (future.v7_fetcherPersist && deletedFetchers.has(key)) {
|
||||
if (isRedirectResult(actionResult) || isErrorResult(actionResult)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
// Let SuccessResult's fall through for revalidation
|
||||
} else {
|
||||
if (isRedirectResult(actionResult)) {
|
||||
fetchControllers.delete(key);
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our action started, so that
|
||||
// should take precedence over this redirect navigation. We already
|
||||
// set isRevalidationRequired so all loaders for the new route should
|
||||
// fire unless opted out via shouldRevalidate
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission));
|
||||
return startRedirectNavigation(fetchRequest, actionResult, false, {
|
||||
fetcherSubmission: submission,
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(actionResult)) {
|
||||
setFetcherError(key, routeId, actionResult.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (isDeferredResult(actionResult)) {
|
||||
throw getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
}
|
||||
|
||||
// Start the data load for current matches, or the next location if we're
|
||||
// in the middle of a navigation
|
||||
let nextLocation = state.navigation.location || state.location;
|
||||
let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let matches = state.navigation.state !== "idle" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;
|
||||
invariant(matches, "Didn't find any matches after fetcher action");
|
||||
let loadId = ++incrementingLoadId;
|
||||
fetchReloadIds.set(key, loadId);
|
||||
let loadFetcher = getLoadingFetcher(submission, actionResult.data);
|
||||
state.fetchers.set(key, loadFetcher);
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, false, future.v7_skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, [match.route.id, actionResult]);
|
||||
|
||||
// Put all revalidating fetchers into the loading state, except for the
|
||||
// current fetcher which we want to keep in it's current loading state which
|
||||
// contains it's action submission info + action data
|
||||
revalidatingFetchers.filter(rf => rf.key !== key).forEach(rf => {
|
||||
let staleKey = rf.key;
|
||||
let existingFetcher = state.fetchers.get(staleKey);
|
||||
let revalidatingFetcher = getLoadingFetcher(undefined, existingFetcher ? existingFetcher.data : undefined);
|
||||
state.fetchers.set(staleKey, revalidatingFetcher);
|
||||
abortFetcher(staleKey);
|
||||
if (rf.controller) {
|
||||
fetchControllers.set(staleKey, rf.controller);
|
||||
}
|
||||
});
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
|
||||
abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
|
||||
let {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
} = await callLoadersAndMaybeResolveData(state, matches, matchesToLoad, revalidatingFetchers, revalidationRequest);
|
||||
if (abortController.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
abortController.signal.removeEventListener("abort", abortPendingFetchRevalidations);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchControllers.delete(key);
|
||||
revalidatingFetchers.forEach(r => fetchControllers.delete(r.key));
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
return startRedirectNavigation(revalidationRequest, redirect.result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processLoaderData(state, matches, loaderResults, undefined, revalidatingFetchers, fetcherResults, activeDeferreds);
|
||||
|
||||
// Since we let revalidations complete even if the submitting fetcher was
|
||||
// deleted, only put it back to idle if it hasn't been deleted
|
||||
if (state.fetchers.has(key)) {
|
||||
let doneFetcher = getDoneFetcher(actionResult.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
abortStaleFetchLoads(loadId);
|
||||
|
||||
// If we are currently in a navigation loading state and this fetcher is
|
||||
// more recent than the navigation, we want the newer data so abort the
|
||||
// navigation and complete it with the fetcher data
|
||||
if (state.navigation.state === "loading" && loadId > pendingNavigationLoadId) {
|
||||
invariant(pendingAction, "Expected pending action");
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
completeNavigation(state.navigation.location, {
|
||||
matches,
|
||||
loaderData,
|
||||
errors,
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
} else {
|
||||
// otherwise just update with the fetcher data, preserving any existing
|
||||
// loaderData for loaders that did not need to reload. We have to
|
||||
// manually merge here since we aren't going through completeNavigation
|
||||
updateState({
|
||||
errors,
|
||||
loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
isRevalidationRequired = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Call the matched loader for fetcher.load(), handling redirects, errors, etc.
|
||||
async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, preventScrollReset, submission) {
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
|
||||
flushSync
|
||||
});
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(matches, new URL(fetchRequest.url).pathname, fetchRequest.signal, key);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(key, routeId, getInternalRouterError(404, {
|
||||
pathname: path
|
||||
}), {
|
||||
flushSync
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
match = getTargetMatch(matches, path);
|
||||
}
|
||||
}
|
||||
|
||||
// Call the loader for this fetcher route match
|
||||
fetchControllers.set(key, abortController);
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let results = await callDataStrategy("loader", state, fetchRequest, [match], matches, key);
|
||||
let result = results[match.route.id];
|
||||
|
||||
// Deferred isn't supported for fetcher loads, await everything and treat it
|
||||
// as a normal load. resolveDeferredData will return undefined if this
|
||||
// fetcher gets aborted, so we just leave result untouched and short circuit
|
||||
// below if that happens
|
||||
if (isDeferredResult(result)) {
|
||||
result = (await resolveDeferredData(result, fetchRequest.signal, true)) || result;
|
||||
}
|
||||
|
||||
// We can delete this so long as we weren't aborted by our our own fetcher
|
||||
// re-load which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
if (fetchRequest.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We don't want errors bubbling up or redirects followed for unmounted
|
||||
// fetchers, so short circuit here if it was removed from the UI
|
||||
if (deletedFetchers.has(key)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
|
||||
// If the loader threw a redirect Response, start a new REPLACE navigation
|
||||
if (isRedirectResult(result)) {
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our loader started, so that
|
||||
// should take precedence over this redirect navigation
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
await startRedirectNavigation(fetchRequest, result, false, {
|
||||
preventScrollReset
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(result)) {
|
||||
setFetcherError(key, routeId, result.error);
|
||||
return;
|
||||
}
|
||||
invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
|
||||
|
||||
// Put the fetcher back into an idle state
|
||||
updateFetcherState(key, getDoneFetcher(result.data));
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function to handle redirects returned from an action or loader.
|
||||
* Normally, a redirect "replaces" the navigation that triggered it. So, for
|
||||
* example:
|
||||
*
|
||||
* - user is on /a
|
||||
* - user clicks a link to /b
|
||||
* - loader for /b redirects to /c
|
||||
*
|
||||
* In a non-JS app the browser would track the in-flight navigation to /b and
|
||||
* then replace it with /c when it encountered the redirect response. In
|
||||
* the end it would only ever update the URL bar with /c.
|
||||
*
|
||||
* In client-side routing using pushState/replaceState, we aim to emulate
|
||||
* this behavior and we also do not update history until the end of the
|
||||
* navigation (including processed redirects). This means that we never
|
||||
* actually touch history until we've processed redirects, so we just use
|
||||
* the history action from the original navigation (PUSH or REPLACE).
|
||||
*/
|
||||
async function startRedirectNavigation(request, redirect, isNavigation, _temp2) {
|
||||
let {
|
||||
submission,
|
||||
fetcherSubmission,
|
||||
preventScrollReset,
|
||||
replace
|
||||
} = _temp2 === void 0 ? {} : _temp2;
|
||||
if (redirect.response.headers.has("X-Remix-Revalidate")) {
|
||||
isRevalidationRequired = true;
|
||||
}
|
||||
let location = redirect.response.headers.get("Location");
|
||||
invariant(location, "Expected a Location header on the redirect Response");
|
||||
location = normalizeRedirectLocation(location, new URL(request.url), basename, init.history);
|
||||
let redirectLocation = createLocation(state.location, location, {
|
||||
_isRedirect: true
|
||||
});
|
||||
if (isBrowser) {
|
||||
let isDocumentReload = false;
|
||||
if (redirect.response.headers.has("X-Remix-Reload-Document")) {
|
||||
// Hard reload if the response contained X-Remix-Reload-Document
|
||||
isDocumentReload = true;
|
||||
} else if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
const url = init.history.createURL(location);
|
||||
isDocumentReload =
|
||||
// Hard reload if it's an absolute URL to a new origin
|
||||
url.origin !== routerWindow.location.origin ||
|
||||
// Hard reload if it's an absolute URL that does not match our basename
|
||||
stripBasename(url.pathname, basename) == null;
|
||||
}
|
||||
if (isDocumentReload) {
|
||||
if (replace) {
|
||||
routerWindow.location.replace(location);
|
||||
} else {
|
||||
routerWindow.location.assign(location);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// There's no need to abort on redirects, since we don't detect the
|
||||
// redirect until the action/loaders have settled
|
||||
pendingNavigationController = null;
|
||||
let redirectHistoryAction = replace === true || redirect.response.headers.has("X-Remix-Replace") ? Action.Replace : Action.Push;
|
||||
|
||||
// Use the incoming submission if provided, fallback on the active one in
|
||||
// state.navigation
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType
|
||||
} = state.navigation;
|
||||
if (!submission && !fetcherSubmission && formMethod && formAction && formEncType) {
|
||||
submission = getSubmissionFromNavigation(state.navigation);
|
||||
}
|
||||
|
||||
// If this was a 307/308 submission we want to preserve the HTTP method and
|
||||
// re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
|
||||
// redirected location
|
||||
let activeSubmission = submission || fetcherSubmission;
|
||||
if (redirectPreserveMethodStatusCodes.has(redirect.response.status) && activeSubmission && isMutationMethod(activeSubmission.formMethod)) {
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
submission: _extends({}, activeSubmission, {
|
||||
formAction: location
|
||||
}),
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
} else {
|
||||
// If we have a navigation submission, we will preserve it through the
|
||||
// redirect navigation
|
||||
let overrideNavigation = getLoadingNavigation(redirectLocation, submission);
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
overrideNavigation,
|
||||
// Send fetcher submissions through for shouldRevalidate
|
||||
fetcherSubmission,
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy client-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, state, request, matchesToLoad, matches, fetcherKey) {
|
||||
let results;
|
||||
let dataResults = {};
|
||||
try {
|
||||
results = await callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties);
|
||||
} catch (e) {
|
||||
// If the outer dataStrategy method throws, just return the error for all
|
||||
// matches - and it'll naturally bubble to the root
|
||||
matchesToLoad.forEach(m => {
|
||||
dataResults[m.route.id] = {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
});
|
||||
return dataResults;
|
||||
}
|
||||
for (let [routeId, result] of Object.entries(results)) {
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
dataResults[routeId] = {
|
||||
type: ResultType.redirect,
|
||||
response: normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, future.v7_relativeSplatPath)
|
||||
};
|
||||
} else {
|
||||
dataResults[routeId] = await convertDataStrategyResultToDataResult(result);
|
||||
}
|
||||
}
|
||||
return dataResults;
|
||||
}
|
||||
async function callLoadersAndMaybeResolveData(state, matches, matchesToLoad, fetchersToLoad, request) {
|
||||
let currentMatches = state.matches;
|
||||
|
||||
// Kick off loaders and fetchers in parallel
|
||||
let loaderResultsPromise = callDataStrategy("loader", state, request, matchesToLoad, matches, null);
|
||||
let fetcherResultsPromise = Promise.all(fetchersToLoad.map(async f => {
|
||||
if (f.matches && f.match && f.controller) {
|
||||
let results = await callDataStrategy("loader", state, createClientSideRequest(init.history, f.path, f.controller.signal), [f.match], f.matches, f.key);
|
||||
let result = results[f.match.route.id];
|
||||
// Fetcher results are keyed by fetcher key from here on out, not routeId
|
||||
return {
|
||||
[f.key]: result
|
||||
};
|
||||
} else {
|
||||
return Promise.resolve({
|
||||
[f.key]: {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(404, {
|
||||
pathname: f.path
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}));
|
||||
let loaderResults = await loaderResultsPromise;
|
||||
let fetcherResults = (await fetcherResultsPromise).reduce((acc, r) => Object.assign(acc, r), {});
|
||||
await Promise.all([resolveNavigationDeferredResults(matches, loaderResults, request.signal, currentMatches, state.loaderData), resolveFetcherDeferredResults(matches, fetcherResults, fetchersToLoad)]);
|
||||
return {
|
||||
loaderResults,
|
||||
fetcherResults
|
||||
};
|
||||
}
|
||||
function interruptActiveLoads() {
|
||||
// Every interruption triggers a revalidation
|
||||
isRevalidationRequired = true;
|
||||
|
||||
// Cancel pending route-level deferreds and mark cancelled routes for
|
||||
// revalidation
|
||||
cancelledDeferredRoutes.push(...cancelActiveDeferreds());
|
||||
|
||||
// Abort in-flight fetcher loads
|
||||
fetchLoadMatches.forEach((_, key) => {
|
||||
if (fetchControllers.has(key)) {
|
||||
cancelledFetcherLoads.add(key);
|
||||
}
|
||||
abortFetcher(key);
|
||||
});
|
||||
}
|
||||
function updateFetcherState(key, fetcher, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
state.fetchers.set(key, fetcher);
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function setFetcherError(key, routeId, error, opts) {
|
||||
if (opts === void 0) {
|
||||
opts = {};
|
||||
}
|
||||
let boundaryMatch = findNearestBoundary(state.matches, routeId);
|
||||
deleteFetcher(key);
|
||||
updateState({
|
||||
errors: {
|
||||
[boundaryMatch.route.id]: error
|
||||
},
|
||||
fetchers: new Map(state.fetchers)
|
||||
}, {
|
||||
flushSync: (opts && opts.flushSync) === true
|
||||
});
|
||||
}
|
||||
function getFetcher(key) {
|
||||
activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
|
||||
// If this fetcher was previously marked for deletion, unmark it since we
|
||||
// have a new instance
|
||||
if (deletedFetchers.has(key)) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
return state.fetchers.get(key) || IDLE_FETCHER;
|
||||
}
|
||||
function deleteFetcher(key) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
// Don't abort the controller if this is a deletion of a fetcher.submit()
|
||||
// in it's loading phase since - we don't want to abort the corresponding
|
||||
// revalidation and want them to complete and land
|
||||
if (fetchControllers.has(key) && !(fetcher && fetcher.state === "loading" && fetchReloadIds.has(key))) {
|
||||
abortFetcher(key);
|
||||
}
|
||||
fetchLoadMatches.delete(key);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchRedirectIds.delete(key);
|
||||
|
||||
// If we opted into the flag we can clear this now since we're calling
|
||||
// deleteFetcher() at the end of updateState() and we've already handed the
|
||||
// deleted fetcher keys off to the data layer.
|
||||
// If not, we're eagerly calling deleteFetcher() and we need to keep this
|
||||
// Set populated until the next updateState call, and we'll clear
|
||||
// `deletedFetchers` then
|
||||
if (future.v7_fetcherPersist) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
cancelledFetcherLoads.delete(key);
|
||||
state.fetchers.delete(key);
|
||||
}
|
||||
function deleteFetcherAndUpdateState(key) {
|
||||
let count = (activeFetchers.get(key) || 0) - 1;
|
||||
if (count <= 0) {
|
||||
activeFetchers.delete(key);
|
||||
deletedFetchers.add(key);
|
||||
if (!future.v7_fetcherPersist) {
|
||||
deleteFetcher(key);
|
||||
}
|
||||
} else {
|
||||
activeFetchers.set(key, count);
|
||||
}
|
||||
updateState({
|
||||
fetchers: new Map(state.fetchers)
|
||||
});
|
||||
}
|
||||
function abortFetcher(key) {
|
||||
let controller = fetchControllers.get(key);
|
||||
if (controller) {
|
||||
controller.abort();
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
}
|
||||
function markFetchersDone(keys) {
|
||||
for (let key of keys) {
|
||||
let fetcher = getFetcher(key);
|
||||
let doneFetcher = getDoneFetcher(fetcher.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
}
|
||||
function markFetchRedirectsDone() {
|
||||
let doneKeys = [];
|
||||
let updatedFetchers = false;
|
||||
for (let key of fetchRedirectIds) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
fetchRedirectIds.delete(key);
|
||||
doneKeys.push(key);
|
||||
updatedFetchers = true;
|
||||
}
|
||||
}
|
||||
markFetchersDone(doneKeys);
|
||||
return updatedFetchers;
|
||||
}
|
||||
function abortStaleFetchLoads(landedId) {
|
||||
let yeetedKeys = [];
|
||||
for (let [key, id] of fetchReloadIds) {
|
||||
if (id < landedId) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, "Expected fetcher: " + key);
|
||||
if (fetcher.state === "loading") {
|
||||
abortFetcher(key);
|
||||
fetchReloadIds.delete(key);
|
||||
yeetedKeys.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
markFetchersDone(yeetedKeys);
|
||||
return yeetedKeys.length > 0;
|
||||
}
|
||||
function getBlocker(key, fn) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
if (blockerFunctions.get(key) !== fn) {
|
||||
blockerFunctions.set(key, fn);
|
||||
}
|
||||
return blocker;
|
||||
}
|
||||
function deleteBlocker(key) {
|
||||
state.blockers.delete(key);
|
||||
blockerFunctions.delete(key);
|
||||
}
|
||||
|
||||
// Utility function to update blockers, ensuring valid state transitions
|
||||
function updateBlocker(key, newBlocker) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
|
||||
// Poor mans state machine :)
|
||||
// https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
|
||||
invariant(blocker.state === "unblocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "proceeding" || blocker.state === "blocked" && newBlocker.state === "unblocked" || blocker.state === "proceeding" && newBlocker.state === "unblocked", "Invalid blocker state transition: " + blocker.state + " -> " + newBlocker.state);
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(key, newBlocker);
|
||||
updateState({
|
||||
blockers
|
||||
});
|
||||
}
|
||||
function shouldBlockNavigation(_ref2) {
|
||||
let {
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
} = _ref2;
|
||||
if (blockerFunctions.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We ony support a single active blocker at the moment since we don't have
|
||||
// any compelling use cases for multi-blocker yet
|
||||
if (blockerFunctions.size > 1) {
|
||||
warning(false, "A router only supports one blocker at a time");
|
||||
}
|
||||
let entries = Array.from(blockerFunctions.entries());
|
||||
let [blockerKey, blockerFunction] = entries[entries.length - 1];
|
||||
let blocker = state.blockers.get(blockerKey);
|
||||
if (blocker && blocker.state === "proceeding") {
|
||||
// If the blocker is currently proceeding, we don't need to re-check
|
||||
// it and can let this navigation continue
|
||||
return;
|
||||
}
|
||||
|
||||
// At this point, we know we're unblocked/blocked so we need to check the
|
||||
// user-provided blocker function
|
||||
if (blockerFunction({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction
|
||||
})) {
|
||||
return blockerKey;
|
||||
}
|
||||
}
|
||||
function handleNavigational404(pathname) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let {
|
||||
matches,
|
||||
route
|
||||
} = getShortCircuitMatches(routesToUse);
|
||||
|
||||
// Cancel all pending deferred on 404s since we don't keep any routes
|
||||
cancelActiveDeferreds();
|
||||
return {
|
||||
notFoundMatches: matches,
|
||||
route,
|
||||
error
|
||||
};
|
||||
}
|
||||
function cancelActiveDeferreds(predicate) {
|
||||
let cancelledRouteIds = [];
|
||||
activeDeferreds.forEach((dfd, routeId) => {
|
||||
if (!predicate || predicate(routeId)) {
|
||||
// Cancel the deferred - but do not remove from activeDeferreds here -
|
||||
// we rely on the subscribers to do that so our tests can assert proper
|
||||
// cleanup via _internalActiveDeferreds
|
||||
dfd.cancel();
|
||||
cancelledRouteIds.push(routeId);
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
return cancelledRouteIds;
|
||||
}
|
||||
|
||||
// Opt in to capturing and reporting scroll positions during navigations,
|
||||
// used by the <ScrollRestoration> component
|
||||
function enableScrollRestoration(positions, getPosition, getKey) {
|
||||
savedScrollPositions = positions;
|
||||
getScrollPosition = getPosition;
|
||||
getScrollRestorationKey = getKey || null;
|
||||
|
||||
// Perform initial hydration scroll restoration, since we miss the boat on
|
||||
// the initial updateState() because we've not yet rendered <ScrollRestoration/>
|
||||
// and therefore have no savedScrollPositions available
|
||||
if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {
|
||||
initialScrollRestored = true;
|
||||
let y = getSavedScrollPosition(state.location, state.matches);
|
||||
if (y != null) {
|
||||
updateState({
|
||||
restoreScrollPosition: y
|
||||
});
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
savedScrollPositions = null;
|
||||
getScrollPosition = null;
|
||||
getScrollRestorationKey = null;
|
||||
};
|
||||
}
|
||||
function getScrollKey(location, matches) {
|
||||
if (getScrollRestorationKey) {
|
||||
let key = getScrollRestorationKey(location, matches.map(m => convertRouteMatchToUiMatch(m, state.loaderData)));
|
||||
return key || location.key;
|
||||
}
|
||||
return location.key;
|
||||
}
|
||||
function saveScrollPosition(location, matches) {
|
||||
if (savedScrollPositions && getScrollPosition) {
|
||||
let key = getScrollKey(location, matches);
|
||||
savedScrollPositions[key] = getScrollPosition();
|
||||
}
|
||||
}
|
||||
function getSavedScrollPosition(location, matches) {
|
||||
if (savedScrollPositions) {
|
||||
let key = getScrollKey(location, matches);
|
||||
let y = savedScrollPositions[key];
|
||||
if (typeof y === "number") {
|
||||
return y;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function checkFogOfWar(matches, routesToUse, pathname) {
|
||||
if (patchRoutesOnNavigationImpl) {
|
||||
if (!matches) {
|
||||
let fogMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: fogMatches || []
|
||||
};
|
||||
} else {
|
||||
if (Object.keys(matches[0].params).length > 0) {
|
||||
// If we matched a dynamic param or a splat, it might only be because
|
||||
// we haven't yet discovered other routes that would match with a
|
||||
// higher score. Call patchRoutesOnNavigation just to be sure
|
||||
let partialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
return {
|
||||
active: true,
|
||||
matches: partialMatches
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
active: false,
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
async function discoverRoutes(matches, pathname, signal, fetcherKey) {
|
||||
if (!patchRoutesOnNavigationImpl) {
|
||||
return {
|
||||
type: "success",
|
||||
matches
|
||||
};
|
||||
}
|
||||
let partialMatches = matches;
|
||||
while (true) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let localManifest = manifest;
|
||||
try {
|
||||
await patchRoutesOnNavigationImpl({
|
||||
signal,
|
||||
path: pathname,
|
||||
matches: partialMatches,
|
||||
fetcherKey,
|
||||
patch: (routeId, children) => {
|
||||
if (signal.aborted) return;
|
||||
patchRoutesImpl(routeId, children, routesToUse, localManifest, mapRouteProperties);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
error: e,
|
||||
partialMatches
|
||||
};
|
||||
} finally {
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity so when we `updateState` at the end of
|
||||
// this navigation/fetch `router.routes` will be a new identity and
|
||||
// trigger a re-run of memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR && !signal.aborted) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
}
|
||||
}
|
||||
if (signal.aborted) {
|
||||
return {
|
||||
type: "aborted"
|
||||
};
|
||||
}
|
||||
let newMatches = matchRoutes(routesToUse, pathname, basename);
|
||||
if (newMatches) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: newMatches
|
||||
};
|
||||
}
|
||||
let newPartialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
|
||||
|
||||
// Avoid loops if the second pass results in the same partial matches
|
||||
if (!newPartialMatches || partialMatches.length === newPartialMatches.length && partialMatches.every((m, i) => m.route.id === newPartialMatches[i].route.id)) {
|
||||
return {
|
||||
type: "success",
|
||||
matches: null
|
||||
};
|
||||
}
|
||||
partialMatches = newPartialMatches;
|
||||
}
|
||||
}
|
||||
function _internalSetRoutes(newRoutes) {
|
||||
manifest = {};
|
||||
inFlightDataRoutes = convertRoutesToDataRoutes(newRoutes, mapRouteProperties, undefined, manifest);
|
||||
}
|
||||
function patchRoutes(routeId, children) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties);
|
||||
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity and trigger a reflow via `updateState`
|
||||
// to re-run memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
updateState({});
|
||||
}
|
||||
}
|
||||
router = {
|
||||
get basename() {
|
||||
return basename;
|
||||
},
|
||||
get future() {
|
||||
return future;
|
||||
},
|
||||
get state() {
|
||||
return state;
|
||||
},
|
||||
get routes() {
|
||||
return dataRoutes;
|
||||
},
|
||||
get window() {
|
||||
return routerWindow;
|
||||
},
|
||||
initialize,
|
||||
subscribe,
|
||||
enableScrollRestoration,
|
||||
navigate,
|
||||
fetch,
|
||||
revalidate,
|
||||
// Passthrough to history-aware createHref used by useHref so we get proper
|
||||
// hash-aware URLs in DOM paths
|
||||
createHref: to => init.history.createHref(to),
|
||||
encodeLocation: to => init.history.encodeLocation(to),
|
||||
getFetcher,
|
||||
deleteFetcher: deleteFetcherAndUpdateState,
|
||||
dispose,
|
||||
getBlocker,
|
||||
deleteBlocker,
|
||||
patchRoutes,
|
||||
_internalFetchControllers: fetchControllers,
|
||||
_internalActiveDeferreds: activeDeferreds,
|
||||
// TODO: Remove setRoutes, it's temporary to avoid dealing with
|
||||
// updating the tree while validating the update algorithm.
|
||||
_internalSetRoutes
|
||||
};
|
||||
return router;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createStaticHandler
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
|
||||
function createStaticHandler(routes, opts) {
|
||||
invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
|
||||
let manifest = {};
|
||||
let basename = (opts ? opts.basename : null) || "/";
|
||||
let mapRouteProperties;
|
||||
if (opts != null && opts.mapRouteProperties) {
|
||||
mapRouteProperties = opts.mapRouteProperties;
|
||||
} else if (opts != null && opts.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = opts.detectErrorBoundary;
|
||||
mapRouteProperties = route => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route)
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
// Config driven behavior flags
|
||||
let future = _extends({
|
||||
v7_relativeSplatPath: false,
|
||||
v7_throwAbortReason: false
|
||||
}, opts ? opts.future : null);
|
||||
let dataRoutes = convertRoutesToDataRoutes(routes, mapRouteProperties, undefined, manifest);
|
||||
|
||||
/**
|
||||
* The query() method is intended for document requests, in which we want to
|
||||
* call an optional action and potentially multiple loaders for all nested
|
||||
* routes. It returns a StaticHandlerContext object, which is very similar
|
||||
* to the router state (location, loaderData, actionData, errors, etc.) and
|
||||
* also adds SSR-specific information such as the statusCode and headers
|
||||
* from action/loaders Responses.
|
||||
*
|
||||
* It _should_ never throw and should report all errors through the
|
||||
* returned context.errors object, properly associating errors to their error
|
||||
* boundary. Additionally, it tracks _deepestRenderedBoundaryId which can be
|
||||
* used to emulate React error boundaries during SSr by performing a second
|
||||
* pass only down to the boundaryId.
|
||||
*
|
||||
* The one exception where we do not return a StaticHandlerContext is when a
|
||||
* redirect response is returned or thrown from any action/loader. We
|
||||
* propagate that out and return the raw Response so the HTTP server can
|
||||
* return it directly.
|
||||
*
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
* - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
|
||||
* the bubbling of errors which allows single-fetch-type implementations
|
||||
* where the client will handle the bubbling and we may need to return data
|
||||
* for the handling route
|
||||
*/
|
||||
async function query(request, _temp3) {
|
||||
let {
|
||||
requestContext,
|
||||
skipLoaderErrorBubbling,
|
||||
dataStrategy
|
||||
} = _temp3 === void 0 ? {} : _temp3;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD") {
|
||||
let error = getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
let {
|
||||
matches: methodNotAllowedMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: methodNotAllowedMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
} else if (!matches) {
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
let {
|
||||
matches: notFoundMatches,
|
||||
route
|
||||
} = getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, skipLoaderErrorBubbling === true, null);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// When returning StaticHandlerContext, we patch back in the location here
|
||||
// since we need it for React Context. But this helps keep our submit and
|
||||
// loadRouteData operating on a Request instead of a Location
|
||||
return _extends({
|
||||
location,
|
||||
basename
|
||||
}, result);
|
||||
}
|
||||
|
||||
/**
|
||||
* The queryRoute() method is intended for targeted route requests, either
|
||||
* for fetch ?_data requests or resource route requests. In this case, we
|
||||
* are only ever calling a single action or loader, and we are returning the
|
||||
* returned value directly. In most cases, this will be a Response returned
|
||||
* from the action/loader, but it may be a primitive or other value as well -
|
||||
* and in such cases the calling context should handle that accordingly.
|
||||
*
|
||||
* We do respect the throw/return differentiation, so if an action/loader
|
||||
* throws, then this method will throw the value. This is important so we
|
||||
* can do proper boundary identification in Remix where a thrown Response
|
||||
* must go to the Catch Boundary but a returned Response is happy-path.
|
||||
*
|
||||
* One thing to note is that any Router-initiated Errors that make sense
|
||||
* to associate with a status code will be thrown as an ErrorResponse
|
||||
* instance which include the raw Error, such that the calling context can
|
||||
* serialize the error as they see fit while including the proper response
|
||||
* code. Examples here are 404 and 405 errors that occur prior to reaching
|
||||
* any user-defined loaders.
|
||||
*
|
||||
* - `opts.routeId` allows you to specify the specific route handler to call.
|
||||
* If not provided the handler will determine the proper route by matching
|
||||
* against `request.url`
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
*/
|
||||
async function queryRoute(request, _temp4) {
|
||||
let {
|
||||
routeId,
|
||||
requestContext,
|
||||
dataStrategy
|
||||
} = _temp4 === void 0 ? {} : _temp4;
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD" && method !== "OPTIONS") {
|
||||
throw getInternalRouterError(405, {
|
||||
method
|
||||
});
|
||||
} else if (!matches) {
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let match = routeId ? matches.find(m => m.route.id === routeId) : getTargetMatch(matches, location);
|
||||
if (routeId && !match) {
|
||||
throw getInternalRouterError(403, {
|
||||
pathname: location.pathname,
|
||||
routeId
|
||||
});
|
||||
} else if (!match) {
|
||||
// This should never hit I don't think?
|
||||
throw getInternalRouterError(404, {
|
||||
pathname: location.pathname
|
||||
});
|
||||
}
|
||||
let result = await queryImpl(request, location, matches, requestContext, dataStrategy || null, false, match);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
let error = result.errors ? Object.values(result.errors)[0] : undefined;
|
||||
if (error !== undefined) {
|
||||
// If we got back result.errors, that means the loader/action threw
|
||||
// _something_ that wasn't a Response, but it's not guaranteed/required
|
||||
// to be an `instanceof Error` either, so we have to use throw here to
|
||||
// preserve the "error" state outside of queryImpl.
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Pick off the right state value to return
|
||||
if (result.actionData) {
|
||||
return Object.values(result.actionData)[0];
|
||||
}
|
||||
if (result.loaderData) {
|
||||
var _result$activeDeferre;
|
||||
let data = Object.values(result.loaderData)[0];
|
||||
if ((_result$activeDeferre = result.activeDeferreds) != null && _result$activeDeferre[match.route.id]) {
|
||||
data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
|
||||
}
|
||||
return data;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
async function queryImpl(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {
|
||||
invariant(request.signal, "query()/queryRoute() requests must contain an AbortController signal");
|
||||
try {
|
||||
if (isMutationMethod(request.method.toLowerCase())) {
|
||||
let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch != null);
|
||||
return result;
|
||||
}
|
||||
let result = await loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch);
|
||||
return isResponse(result) ? result : _extends({}, result, {
|
||||
actionData: null,
|
||||
actionHeaders: {}
|
||||
});
|
||||
} catch (e) {
|
||||
// If the user threw/returned a Response in callLoaderOrAction for a
|
||||
// `queryRoute` call, we throw the `DataStrategyResult` to bail out early
|
||||
// and then return or throw the raw Response here accordingly
|
||||
if (isDataStrategyResult(e) && isResponse(e.result)) {
|
||||
if (e.type === ResultType.error) {
|
||||
throw e.result;
|
||||
}
|
||||
return e.result;
|
||||
}
|
||||
// Redirects are always returned since they don't propagate to catch
|
||||
// boundaries
|
||||
if (isRedirectResponse(e)) {
|
||||
return e;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
async function submit(request, matches, actionMatch, requestContext, dataStrategy, skipLoaderErrorBubbling, isRouteRequest) {
|
||||
let result;
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: actionMatch.route.id
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy("action", request, [actionMatch], matches, isRouteRequest, requestContext, dataStrategy);
|
||||
result = results[actionMatch.route.id];
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
}
|
||||
if (isRedirectResult(result)) {
|
||||
// Uhhhh - this should never happen, we should always throw these from
|
||||
// callLoaderOrAction, but the type narrowing here keeps TS happy and we
|
||||
// can get back on the "throw all redirect responses" train here should
|
||||
// this ever happen :/
|
||||
throw new Response(null, {
|
||||
status: result.response.status,
|
||||
headers: {
|
||||
Location: result.response.headers.get("Location")
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
let error = getInternalRouterError(400, {
|
||||
type: "defer-action"
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error
|
||||
};
|
||||
}
|
||||
if (isRouteRequest) {
|
||||
// Note: This should only be non-Response values if we get here, since
|
||||
// isRouteRequest should throw any Response received in callLoaderOrAction
|
||||
if (isErrorResult(result)) {
|
||||
throw result.error;
|
||||
}
|
||||
return {
|
||||
matches: [actionMatch],
|
||||
loaderData: {},
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
},
|
||||
errors: null,
|
||||
// Note: statusCode + headers are unused here since queryRoute will
|
||||
// return the raw Response or value
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
|
||||
// Create a GET request for the loaders
|
||||
let loaderRequest = new Request(request.url, {
|
||||
headers: request.headers,
|
||||
redirect: request.redirect,
|
||||
signal: request.signal
|
||||
});
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = skipLoaderErrorBubbling ? actionMatch : findNearestBoundary(matches, actionMatch.route.id);
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null, [boundaryMatch.route.id, result]);
|
||||
|
||||
// action status codes take precedence over loader status codes
|
||||
return _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(result.error) ? result.error.status : result.statusCode != null ? result.statusCode : 500,
|
||||
actionData: null,
|
||||
actionHeaders: _extends({}, result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {})
|
||||
});
|
||||
}
|
||||
let context = await loadRouteData(loaderRequest, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, null);
|
||||
return _extends({}, context, {
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data
|
||||
}
|
||||
}, result.statusCode ? {
|
||||
statusCode: result.statusCode
|
||||
} : {}, {
|
||||
actionHeaders: result.headers ? {
|
||||
[actionMatch.route.id]: result.headers
|
||||
} : {}
|
||||
});
|
||||
}
|
||||
async function loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch, pendingActionResult) {
|
||||
let isRouteRequest = routeMatch != null;
|
||||
|
||||
// Short circuit if we have no loaders to run (queryRoute())
|
||||
if (isRouteRequest && !(routeMatch != null && routeMatch.route.loader) && !(routeMatch != null && routeMatch.route.lazy)) {
|
||||
throw getInternalRouterError(400, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: routeMatch == null ? void 0 : routeMatch.route.id
|
||||
});
|
||||
}
|
||||
let requestMatches = routeMatch ? [routeMatch] : pendingActionResult && isErrorResult(pendingActionResult[1]) ? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]) : matches;
|
||||
let matchesToLoad = requestMatches.filter(m => m.route.loader || m.route.lazy);
|
||||
|
||||
// Short circuit if we have no loaders to run (query())
|
||||
if (matchesToLoad.length === 0) {
|
||||
return {
|
||||
matches,
|
||||
// Add a null for all matched routes for proper revalidation on the client
|
||||
loaderData: matches.reduce((acc, m) => Object.assign(acc, {
|
||||
[m.route.id]: null
|
||||
}), {}),
|
||||
errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error
|
||||
} : null,
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
activeDeferreds: null
|
||||
};
|
||||
}
|
||||
let results = await callDataStrategy("loader", request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy);
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let activeDeferreds = new Map();
|
||||
let context = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling);
|
||||
|
||||
// Add a null for any non-loader matches for proper revalidation on the client
|
||||
let executedLoaders = new Set(matchesToLoad.map(match => match.route.id));
|
||||
matches.forEach(match => {
|
||||
if (!executedLoaders.has(match.route.id)) {
|
||||
context.loaderData[match.route.id] = null;
|
||||
}
|
||||
});
|
||||
return _extends({}, context, {
|
||||
matches,
|
||||
activeDeferreds: activeDeferreds.size > 0 ? Object.fromEntries(activeDeferreds.entries()) : null
|
||||
});
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy server-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy) {
|
||||
let results = await callDataStrategyImpl(dataStrategy || defaultDataStrategy, type, null, request, matchesToLoad, matches, null, manifest, mapRouteProperties, requestContext);
|
||||
let dataResults = {};
|
||||
await Promise.all(matches.map(async match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let result = results[match.route.id];
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result;
|
||||
// Throw redirects and let the server handle them with an HTTP redirect
|
||||
throw normalizeRelativeRoutingRedirectResponse(response, request, match.route.id, matches, basename, future.v7_relativeSplatPath);
|
||||
}
|
||||
if (isResponse(result.result) && isRouteRequest) {
|
||||
// For SSR single-route requests, we want to hand Responses back
|
||||
// directly without unwrapping
|
||||
throw result;
|
||||
}
|
||||
dataResults[match.route.id] = await convertDataStrategyResultToDataResult(result);
|
||||
}));
|
||||
return dataResults;
|
||||
}
|
||||
return {
|
||||
dataRoutes,
|
||||
query,
|
||||
queryRoute
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Helpers
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Given an existing StaticHandlerContext and an error thrown at render time,
|
||||
* provide an updated StaticHandlerContext suitable for a second SSR render
|
||||
*/
|
||||
function getStaticContextFromError(routes, context, error) {
|
||||
let newContext = _extends({}, context, {
|
||||
statusCode: isRouteErrorResponse(error) ? error.status : 500,
|
||||
errors: {
|
||||
[context._deepestRenderedBoundaryId || routes[0].id]: error
|
||||
}
|
||||
});
|
||||
return newContext;
|
||||
}
|
||||
function throwStaticHandlerAbortedError(request, isRouteRequest, future) {
|
||||
if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
|
||||
throw request.signal.reason;
|
||||
}
|
||||
let method = isRouteRequest ? "queryRoute" : "query";
|
||||
throw new Error(method + "() call aborted: " + request.method + " " + request.url);
|
||||
}
|
||||
function isSubmissionNavigation(opts) {
|
||||
return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
|
||||
}
|
||||
function normalizeTo(location, matches, basename, prependBasename, to, v7_relativeSplatPath, fromRouteId, relative) {
|
||||
let contextualMatches;
|
||||
let activeRouteMatch;
|
||||
if (fromRouteId) {
|
||||
// Grab matches up to the calling route so our route-relative logic is
|
||||
// relative to the correct source route
|
||||
contextualMatches = [];
|
||||
for (let match of matches) {
|
||||
contextualMatches.push(match);
|
||||
if (match.route.id === fromRouteId) {
|
||||
activeRouteMatch = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
contextualMatches = matches;
|
||||
activeRouteMatch = matches[matches.length - 1];
|
||||
}
|
||||
|
||||
// Resolve the relative path
|
||||
let path = resolveTo(to ? to : ".", getResolveToMatches(contextualMatches, v7_relativeSplatPath), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
|
||||
|
||||
// When `to` is not specified we inherit search/hash from the current
|
||||
// location, unlike when to="." and we just inherit the path.
|
||||
// See https://github.com/remix-run/remix/issues/927
|
||||
if (to == null) {
|
||||
path.search = location.search;
|
||||
path.hash = location.hash;
|
||||
}
|
||||
|
||||
// Account for `?index` params when routing to the current location
|
||||
if ((to == null || to === "" || to === ".") && activeRouteMatch) {
|
||||
let nakedIndex = hasNakedIndexQuery(path.search);
|
||||
if (activeRouteMatch.route.index && !nakedIndex) {
|
||||
// Add one when we're targeting an index route
|
||||
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
|
||||
} else if (!activeRouteMatch.route.index && nakedIndex) {
|
||||
// Remove existing ones when we're not
|
||||
let params = new URLSearchParams(path.search);
|
||||
let indexValues = params.getAll("index");
|
||||
params.delete("index");
|
||||
indexValues.filter(v => v).forEach(v => params.append("index", v));
|
||||
let qs = params.toString();
|
||||
path.search = qs ? "?" + qs : "";
|
||||
}
|
||||
}
|
||||
|
||||
// If we're operating within a basename, prepend it to the pathname. If
|
||||
// this is a root navigation, then just use the raw basename which allows
|
||||
// the basename to have full control over the presence of a trailing slash
|
||||
// on root actions
|
||||
if (prependBasename && basename !== "/") {
|
||||
path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
|
||||
}
|
||||
return createPath(path);
|
||||
}
|
||||
|
||||
// Normalize navigation options by converting formMethod=GET formData objects to
|
||||
// URLSearchParams so they behave identically to links with query params
|
||||
function normalizeNavigateOptions(normalizeFormMethod, isFetcher, path, opts) {
|
||||
// Return location verbatim on non-submission navigations
|
||||
if (!opts || !isSubmissionNavigation(opts)) {
|
||||
return {
|
||||
path
|
||||
};
|
||||
}
|
||||
if (opts.formMethod && !isValidMethod(opts.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
error: getInternalRouterError(405, {
|
||||
method: opts.formMethod
|
||||
})
|
||||
};
|
||||
}
|
||||
let getInvalidBodyError = () => ({
|
||||
path,
|
||||
error: getInternalRouterError(400, {
|
||||
type: "invalid-body"
|
||||
})
|
||||
});
|
||||
|
||||
// Create a Submission on non-GET navigations
|
||||
let rawFormMethod = opts.formMethod || "get";
|
||||
let formMethod = normalizeFormMethod ? rawFormMethod.toUpperCase() : rawFormMethod.toLowerCase();
|
||||
let formAction = stripHashFromPath(path);
|
||||
if (opts.body !== undefined) {
|
||||
if (opts.formEncType === "text/plain") {
|
||||
// text only support POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
|
||||
Array.from(opts.body.entries()).reduce((acc, _ref3) => {
|
||||
let [name, value] = _ref3;
|
||||
return "" + acc + name + "=" + value + "\n";
|
||||
}, "") : String(opts.body);
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
}
|
||||
};
|
||||
} else if (opts.formEncType === "application/json") {
|
||||
// json only supports POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
try {
|
||||
let json = typeof opts.body === "string" ? JSON.parse(opts.body) : opts.body;
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
}
|
||||
invariant(typeof FormData === "function", "FormData is not available in this environment");
|
||||
let searchParams;
|
||||
let formData;
|
||||
if (opts.formData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.formData);
|
||||
formData = opts.formData;
|
||||
} else if (opts.body instanceof FormData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.body);
|
||||
formData = opts.body;
|
||||
} else if (opts.body instanceof URLSearchParams) {
|
||||
searchParams = opts.body;
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} else if (opts.body == null) {
|
||||
searchParams = new URLSearchParams();
|
||||
formData = new FormData();
|
||||
} else {
|
||||
try {
|
||||
searchParams = new URLSearchParams(opts.body);
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
let submission = {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
if (isMutationMethod(submission.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
submission
|
||||
};
|
||||
}
|
||||
|
||||
// Flatten submission onto URLSearchParams for GET submissions
|
||||
let parsedPath = parsePath(path);
|
||||
// On GET navigation submissions we can drop the ?index param from the
|
||||
// resulting location since all loaders will run. But fetcher GET submissions
|
||||
// only run a single loader so we need to preserve any incoming ?index params
|
||||
if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
|
||||
searchParams.append("index", "");
|
||||
}
|
||||
parsedPath.search = "?" + searchParams;
|
||||
return {
|
||||
path: createPath(parsedPath),
|
||||
submission
|
||||
};
|
||||
}
|
||||
|
||||
// Filter out all routes at/below any caught error as they aren't going to
|
||||
// render so we don't need to load them
|
||||
function getLoaderMatchesUntilBoundary(matches, boundaryId, includeBoundary) {
|
||||
if (includeBoundary === void 0) {
|
||||
includeBoundary = false;
|
||||
}
|
||||
let index = matches.findIndex(m => m.route.id === boundaryId);
|
||||
if (index >= 0) {
|
||||
return matches.slice(0, includeBoundary ? index + 1 : index);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
function getMatchesToLoad(history, state, matches, submission, location, initialHydration, skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {
|
||||
let actionResult = pendingActionResult ? isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : pendingActionResult[1].data : undefined;
|
||||
let currentUrl = history.createURL(state.location);
|
||||
let nextUrl = history.createURL(location);
|
||||
|
||||
// Pick navigation matches that are net-new or qualify for revalidation
|
||||
let boundaryMatches = matches;
|
||||
if (initialHydration && state.errors) {
|
||||
// On initial hydration, only consider matches up to _and including_ the boundary.
|
||||
// This is inclusive to handle cases where a server loader ran successfully,
|
||||
// a child server loader bubbled up to this route, but this route has
|
||||
// `clientLoader.hydrate` so we want to still run the `clientLoader` so that
|
||||
// we have a complete version of `loaderData`
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, Object.keys(state.errors)[0], true);
|
||||
} else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
|
||||
// If an action threw an error, we call loaders up to, but not including the
|
||||
// boundary
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]);
|
||||
}
|
||||
|
||||
// Don't revalidate loaders by default after action 4xx/5xx responses
|
||||
// when the flag is enabled. They can still opt-into revalidation via
|
||||
// `shouldRevalidate` via `actionResult`
|
||||
let actionStatus = pendingActionResult ? pendingActionResult[1].statusCode : undefined;
|
||||
let shouldSkipRevalidation = skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
|
||||
let navigationMatches = boundaryMatches.filter((match, index) => {
|
||||
let {
|
||||
route
|
||||
} = match;
|
||||
if (route.lazy) {
|
||||
// We haven't loaded this route yet so we don't know if it's got a loader!
|
||||
return true;
|
||||
}
|
||||
if (route.loader == null) {
|
||||
return false;
|
||||
}
|
||||
if (initialHydration) {
|
||||
return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
|
||||
}
|
||||
|
||||
// Always call the loader on new route instances and pending defer cancellations
|
||||
if (isNewLoader(state.loaderData, state.matches[index], match) || cancelledDeferredRoutes.some(id => id === match.route.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// This is the default implementation for when we revalidate. If the route
|
||||
// provides it's own implementation, then we give them full control but
|
||||
// provide this value so they can leverage it if needed after they check
|
||||
// their own specific use cases
|
||||
let currentRouteMatch = state.matches[index];
|
||||
let nextRouteMatch = match;
|
||||
return shouldRevalidateLoader(match, _extends({
|
||||
currentUrl,
|
||||
currentParams: currentRouteMatch.params,
|
||||
nextUrl,
|
||||
nextParams: nextRouteMatch.params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false :
|
||||
// Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
|
||||
isRevalidationRequired || currentUrl.pathname + currentUrl.search === nextUrl.pathname + nextUrl.search ||
|
||||
// Search params affect all loaders
|
||||
currentUrl.search !== nextUrl.search || isNewRouteInstance(currentRouteMatch, nextRouteMatch)
|
||||
}));
|
||||
});
|
||||
|
||||
// Pick fetcher.loads that need to be revalidated
|
||||
let revalidatingFetchers = [];
|
||||
fetchLoadMatches.forEach((f, key) => {
|
||||
// Don't revalidate:
|
||||
// - on initial hydration (shouldn't be any fetchers then anyway)
|
||||
// - if fetcher won't be present in the subsequent render
|
||||
// - no longer matches the URL (v7_fetcherPersist=false)
|
||||
// - was unmounted but persisted due to v7_fetcherPersist=true
|
||||
if (initialHydration || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
|
||||
return;
|
||||
}
|
||||
let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
|
||||
|
||||
// If the fetcher path no longer matches, push it in with null matches so
|
||||
// we can trigger a 404 in callLoadersAndMaybeResolveData. Note this is
|
||||
// currently only a use-case for Remix HMR where the route tree can change
|
||||
// at runtime and remove a route previously loaded via a fetcher
|
||||
if (!fetcherMatches) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: null,
|
||||
match: null,
|
||||
controller: null
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Revalidating fetchers are decoupled from the route matches since they
|
||||
// load from a static href. They revalidate based on explicit revalidation
|
||||
// (submission, useRevalidator, or X-Remix-Revalidate)
|
||||
let fetcher = state.fetchers.get(key);
|
||||
let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
|
||||
let shouldRevalidate = false;
|
||||
if (fetchRedirectIds.has(key)) {
|
||||
// Never trigger a revalidation of an actively redirecting fetcher
|
||||
shouldRevalidate = false;
|
||||
} else if (cancelledFetcherLoads.has(key)) {
|
||||
// Always mark for revalidation if the fetcher was cancelled
|
||||
cancelledFetcherLoads.delete(key);
|
||||
shouldRevalidate = true;
|
||||
} else if (fetcher && fetcher.state !== "idle" && fetcher.data === undefined) {
|
||||
// If the fetcher hasn't ever completed loading yet, then this isn't a
|
||||
// revalidation, it would just be a brand new load if an explicit
|
||||
// revalidation is required
|
||||
shouldRevalidate = isRevalidationRequired;
|
||||
} else {
|
||||
// Otherwise fall back on any user-defined shouldRevalidate, defaulting
|
||||
// to explicit revalidations only
|
||||
shouldRevalidate = shouldRevalidateLoader(fetcherMatch, _extends({
|
||||
currentUrl,
|
||||
currentParams: state.matches[state.matches.length - 1].params,
|
||||
nextUrl,
|
||||
nextParams: matches[matches.length - 1].params
|
||||
}, submission, {
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation ? false : isRevalidationRequired
|
||||
}));
|
||||
}
|
||||
if (shouldRevalidate) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: fetcherMatches,
|
||||
match: fetcherMatch,
|
||||
controller: new AbortController()
|
||||
});
|
||||
}
|
||||
});
|
||||
return [navigationMatches, revalidatingFetchers];
|
||||
}
|
||||
function shouldLoadRouteOnHydration(route, loaderData, errors) {
|
||||
// We dunno if we have a loader - gotta find out!
|
||||
if (route.lazy) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// No loader, nothing to initialize
|
||||
if (!route.loader) {
|
||||
return false;
|
||||
}
|
||||
let hasData = loaderData != null && loaderData[route.id] !== undefined;
|
||||
let hasError = errors != null && errors[route.id] !== undefined;
|
||||
|
||||
// Don't run if we error'd during SSR
|
||||
if (!hasData && hasError) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Explicitly opting-in to running on hydration
|
||||
if (typeof route.loader === "function" && route.loader.hydrate === true) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, run if we're not yet initialized with anything
|
||||
return !hasData && !hasError;
|
||||
}
|
||||
function isNewLoader(currentLoaderData, currentMatch, match) {
|
||||
let isNew =
|
||||
// [a] -> [a, b]
|
||||
!currentMatch ||
|
||||
// [a, b] -> [a, c]
|
||||
match.route.id !== currentMatch.route.id;
|
||||
|
||||
// Handle the case that we don't have data for a re-used route, potentially
|
||||
// from a prior error or from a cancelled pending deferred
|
||||
let isMissingData = currentLoaderData[match.route.id] === undefined;
|
||||
|
||||
// Always load if this is a net-new route or we don't yet have data
|
||||
return isNew || isMissingData;
|
||||
}
|
||||
function isNewRouteInstance(currentMatch, match) {
|
||||
let currentPath = currentMatch.route.path;
|
||||
return (
|
||||
// param change for this match, /users/123 -> /users/456
|
||||
currentMatch.pathname !== match.pathname ||
|
||||
// splat param changed, which is not present in match.path
|
||||
// e.g. /files/images/avatar.jpg -> files/finances.xls
|
||||
currentPath != null && currentPath.endsWith("*") && currentMatch.params["*"] !== match.params["*"]
|
||||
);
|
||||
}
|
||||
function shouldRevalidateLoader(loaderMatch, arg) {
|
||||
if (loaderMatch.route.shouldRevalidate) {
|
||||
let routeChoice = loaderMatch.route.shouldRevalidate(arg);
|
||||
if (typeof routeChoice === "boolean") {
|
||||
return routeChoice;
|
||||
}
|
||||
}
|
||||
return arg.defaultShouldRevalidate;
|
||||
}
|
||||
function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties) {
|
||||
var _childrenToPatch;
|
||||
let childrenToPatch;
|
||||
if (routeId) {
|
||||
let route = manifest[routeId];
|
||||
invariant(route, "No route found to patch children into: routeId = " + routeId);
|
||||
if (!route.children) {
|
||||
route.children = [];
|
||||
}
|
||||
childrenToPatch = route.children;
|
||||
} else {
|
||||
childrenToPatch = routesToUse;
|
||||
}
|
||||
|
||||
// Don't patch in routes we already know about so that `patch` is idempotent
|
||||
// to simplify user-land code. This is useful because we re-call the
|
||||
// `patchRoutesOnNavigation` function for matched routes with params.
|
||||
let uniqueChildren = children.filter(newRoute => !childrenToPatch.some(existingRoute => isSameRoute(newRoute, existingRoute)));
|
||||
let newRoutes = convertRoutesToDataRoutes(uniqueChildren, mapRouteProperties, [routeId || "_", "patch", String(((_childrenToPatch = childrenToPatch) == null ? void 0 : _childrenToPatch.length) || "0")], manifest);
|
||||
childrenToPatch.push(...newRoutes);
|
||||
}
|
||||
function isSameRoute(newRoute, existingRoute) {
|
||||
// Most optimal check is by id
|
||||
if ("id" in newRoute && "id" in existingRoute && newRoute.id === existingRoute.id) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Second is by pathing differences
|
||||
if (!(newRoute.index === existingRoute.index && newRoute.path === existingRoute.path && newRoute.caseSensitive === existingRoute.caseSensitive)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Pathless layout routes are trickier since we need to check children.
|
||||
// If they have no children then they're the same as far as we can tell
|
||||
if ((!newRoute.children || newRoute.children.length === 0) && (!existingRoute.children || existingRoute.children.length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, we look to see if every child in the new route is already
|
||||
// represented in the existing route's children
|
||||
return newRoute.children.every((aChild, i) => {
|
||||
var _existingRoute$childr;
|
||||
return (_existingRoute$childr = existingRoute.children) == null ? void 0 : _existingRoute$childr.some(bChild => isSameRoute(aChild, bChild));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute route.lazy() methods to lazily load route modules (loader, action,
|
||||
* shouldRevalidate) and update the routeManifest in place which shares objects
|
||||
* with dataRoutes so those get updated as well.
|
||||
*/
|
||||
async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let lazyRoute = await route.lazy();
|
||||
|
||||
// If the lazy route function was executed and removed by another parallel
|
||||
// call then we can return - first lazy() to finish wins because the return
|
||||
// value of lazy is expected to be static
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
let routeToUpdate = manifest[route.id];
|
||||
invariant(routeToUpdate, "No route found in manifest");
|
||||
|
||||
// Update the route in place. This should be safe because there's no way
|
||||
// we could yet be sitting on this route as we can't get there without
|
||||
// resolving lazy() first.
|
||||
//
|
||||
// This is different than the HMR "update" use-case where we may actively be
|
||||
// on the route being updated. The main concern boils down to "does this
|
||||
// mutation affect any ongoing navigations or any current state.matches
|
||||
// values?". If not, it should be safe to update in place.
|
||||
let routeUpdates = {};
|
||||
for (let lazyRouteProperty in lazyRoute) {
|
||||
let staticRouteValue = routeToUpdate[lazyRouteProperty];
|
||||
let isPropertyStaticallyDefined = staticRouteValue !== undefined &&
|
||||
// This property isn't static since it should always be updated based
|
||||
// on the route updates
|
||||
lazyRouteProperty !== "hasErrorBoundary";
|
||||
warning(!isPropertyStaticallyDefined, "Route \"" + routeToUpdate.id + "\" has a static property \"" + lazyRouteProperty + "\" " + "defined but its lazy function is also returning a value for this property. " + ("The lazy route property \"" + lazyRouteProperty + "\" will be ignored."));
|
||||
if (!isPropertyStaticallyDefined && !immutableRouteKeys.has(lazyRouteProperty)) {
|
||||
routeUpdates[lazyRouteProperty] = lazyRoute[lazyRouteProperty];
|
||||
}
|
||||
}
|
||||
|
||||
// Mutate the route with the provided updates. Do this first so we pass
|
||||
// the updated version to mapRouteProperties
|
||||
Object.assign(routeToUpdate, routeUpdates);
|
||||
|
||||
// Mutate the `hasErrorBoundary` property on the route based on the route
|
||||
// updates and remove the `lazy` function so we don't resolve the lazy
|
||||
// route again.
|
||||
Object.assign(routeToUpdate, _extends({}, mapRouteProperties(routeToUpdate), {
|
||||
lazy: undefined
|
||||
}));
|
||||
}
|
||||
|
||||
// Default implementation of `dataStrategy` which fetches all loaders in parallel
|
||||
async function defaultDataStrategy(_ref4) {
|
||||
let {
|
||||
matches
|
||||
} = _ref4;
|
||||
let matchesToLoad = matches.filter(m => m.shouldLoad);
|
||||
let results = await Promise.all(matchesToLoad.map(m => m.resolve()));
|
||||
return results.reduce((acc, result, i) => Object.assign(acc, {
|
||||
[matchesToLoad[i].route.id]: result
|
||||
}), {});
|
||||
}
|
||||
async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties, requestContext) {
|
||||
let loadRouteDefinitionsPromises = matches.map(m => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties, manifest) : undefined);
|
||||
let dsMatches = matches.map((match, i) => {
|
||||
let loadRoutePromise = loadRouteDefinitionsPromises[i];
|
||||
let shouldLoad = matchesToLoad.some(m => m.route.id === match.route.id);
|
||||
// `resolve` encapsulates route.lazy(), executing the loader/action,
|
||||
// and mapping return values/thrown errors to a `DataStrategyResult`. Users
|
||||
// can pass a callback to take fine-grained control over the execution
|
||||
// of the loader/action
|
||||
let resolve = async handlerOverride => {
|
||||
if (handlerOverride && request.method === "GET" && (match.route.lazy || match.route.loader)) {
|
||||
shouldLoad = true;
|
||||
}
|
||||
return shouldLoad ? callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, requestContext) : Promise.resolve({
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
});
|
||||
};
|
||||
return _extends({}, match, {
|
||||
shouldLoad,
|
||||
resolve
|
||||
});
|
||||
});
|
||||
|
||||
// Send all matches here to allow for a middleware-type implementation.
|
||||
// handler will be a no-op for unneeded routes and we filter those results
|
||||
// back out below.
|
||||
let results = await dataStrategyImpl({
|
||||
matches: dsMatches,
|
||||
request,
|
||||
params: matches[0].params,
|
||||
fetcherKey,
|
||||
context: requestContext
|
||||
});
|
||||
|
||||
// Wait for all routes to load here but 'swallow the error since we want
|
||||
// it to bubble up from the `await loadRoutePromise` in `callLoaderOrAction` -
|
||||
// called from `match.resolve()`
|
||||
try {
|
||||
await Promise.all(loadRouteDefinitionsPromises);
|
||||
} catch (e) {
|
||||
// No-op
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
// Default logic for calling a loader/action is the user has no specified a dataStrategy
|
||||
async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
|
||||
let result;
|
||||
let onReject;
|
||||
let runHandler = handler => {
|
||||
// Setup a promise we can race against so that abort signals short circuit
|
||||
let reject;
|
||||
// This will never resolve so safe to type it as Promise<DataStrategyResult> to
|
||||
// satisfy the function return value
|
||||
let abortPromise = new Promise((_, r) => reject = r);
|
||||
onReject = () => reject();
|
||||
request.signal.addEventListener("abort", onReject);
|
||||
let actualHandler = ctx => {
|
||||
if (typeof handler !== "function") {
|
||||
return Promise.reject(new Error("You cannot call the handler for a route which defines a boolean " + ("\"" + type + "\" [routeId: " + match.route.id + "]")));
|
||||
}
|
||||
return handler({
|
||||
request,
|
||||
params: match.params,
|
||||
context: staticContext
|
||||
}, ...(ctx !== undefined ? [ctx] : []));
|
||||
};
|
||||
let handlerPromise = (async () => {
|
||||
try {
|
||||
let val = await (handlerOverride ? handlerOverride(ctx => actualHandler(ctx)) : actualHandler());
|
||||
return {
|
||||
type: "data",
|
||||
result: val
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
type: "error",
|
||||
result: e
|
||||
};
|
||||
}
|
||||
})();
|
||||
return Promise.race([handlerPromise, abortPromise]);
|
||||
};
|
||||
try {
|
||||
let handler = match.route[type];
|
||||
|
||||
// If we have a route.lazy promise, await that first
|
||||
if (loadRoutePromise) {
|
||||
if (handler) {
|
||||
// Run statically defined handler in parallel with lazy()
|
||||
let handlerError;
|
||||
let [value] = await Promise.all([
|
||||
// If the handler throws, don't let it immediately bubble out,
|
||||
// since we need to let the lazy() execution finish so we know if this
|
||||
// route has a boundary that can handle the error
|
||||
runHandler(handler).catch(e => {
|
||||
handlerError = e;
|
||||
}), loadRoutePromise]);
|
||||
if (handlerError !== undefined) {
|
||||
throw handlerError;
|
||||
}
|
||||
result = value;
|
||||
} else {
|
||||
// Load lazy route module, then run any returned handler
|
||||
await loadRoutePromise;
|
||||
handler = match.route[type];
|
||||
if (handler) {
|
||||
// Handler still runs even if we got interrupted to maintain consistency
|
||||
// with un-abortable behavior of handler execution on non-lazy or
|
||||
// previously-lazy-loaded routes
|
||||
result = await runHandler(handler);
|
||||
} else if (type === "action") {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname,
|
||||
routeId: match.route.id
|
||||
});
|
||||
} else {
|
||||
// lazy() route has no loader to run. Short circuit here so we don't
|
||||
// hit the invariant below that errors on returning undefined.
|
||||
return {
|
||||
type: ResultType.data,
|
||||
result: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
} else if (!handler) {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(404, {
|
||||
pathname
|
||||
});
|
||||
} else {
|
||||
result = await runHandler(handler);
|
||||
}
|
||||
invariant(result.result !== undefined, "You defined " + (type === "action" ? "an action" : "a loader") + " for route " + ("\"" + match.route.id + "\" but didn't return anything from your `" + type + "` ") + "function. Please return a value or `null`.");
|
||||
} catch (e) {
|
||||
// We should already be catching and converting normal handler executions to
|
||||
// DataStrategyResults and returning them, so anything that throws here is an
|
||||
// unexpected error we still need to wrap
|
||||
return {
|
||||
type: ResultType.error,
|
||||
result: e
|
||||
};
|
||||
} finally {
|
||||
if (onReject) {
|
||||
request.signal.removeEventListener("abort", onReject);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
async function convertDataStrategyResultToDataResult(dataStrategyResult) {
|
||||
let {
|
||||
result,
|
||||
type
|
||||
} = dataStrategyResult;
|
||||
if (isResponse(result)) {
|
||||
let data;
|
||||
try {
|
||||
let contentType = result.headers.get("Content-Type");
|
||||
// Check between word boundaries instead of startsWith() due to the last
|
||||
// paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
|
||||
if (contentType && /\bapplication\/json\b/.test(contentType)) {
|
||||
if (result.body == null) {
|
||||
data = null;
|
||||
} else {
|
||||
data = await result.json();
|
||||
}
|
||||
} else {
|
||||
data = await result.text();
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(result.status, result.statusText, data),
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data,
|
||||
statusCode: result.status,
|
||||
headers: result.headers
|
||||
};
|
||||
}
|
||||
if (type === ResultType.error) {
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init3, _result$init4;
|
||||
if (result.data instanceof Error) {
|
||||
var _result$init, _result$init2;
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result.data,
|
||||
statusCode: (_result$init = result.init) == null ? void 0 : _result$init.status,
|
||||
headers: (_result$init2 = result.init) != null && _result$init2.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
|
||||
// Convert thrown data() to ErrorResponse instances
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(((_result$init3 = result.init) == null ? void 0 : _result$init3.status) || 500, undefined, result.data),
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined,
|
||||
headers: (_result$init4 = result.init) != null && _result$init4.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result,
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined
|
||||
};
|
||||
}
|
||||
if (isDeferredData(result)) {
|
||||
var _result$init5, _result$init6;
|
||||
return {
|
||||
type: ResultType.deferred,
|
||||
deferredData: result,
|
||||
statusCode: (_result$init5 = result.init) == null ? void 0 : _result$init5.status,
|
||||
headers: ((_result$init6 = result.init) == null ? void 0 : _result$init6.headers) && new Headers(result.init.headers)
|
||||
};
|
||||
}
|
||||
if (isDataWithResponseInit(result)) {
|
||||
var _result$init7, _result$init8;
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.data,
|
||||
statusCode: (_result$init7 = result.init) == null ? void 0 : _result$init7.status,
|
||||
headers: (_result$init8 = result.init) != null && _result$init8.headers ? new Headers(result.init.headers) : undefined
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result
|
||||
};
|
||||
}
|
||||
|
||||
// Support relative routing in internal redirects
|
||||
function normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename, v7_relativeSplatPath) {
|
||||
let location = response.headers.get("Location");
|
||||
invariant(location, "Redirects returned/thrown from loaders/actions must have a Location header");
|
||||
if (!ABSOLUTE_URL_REGEX.test(location)) {
|
||||
let trimmedMatches = matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1);
|
||||
location = normalizeTo(new URL(request.url), trimmedMatches, basename, true, location, v7_relativeSplatPath);
|
||||
response.headers.set("Location", location);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
function normalizeRedirectLocation(location, currentUrl, basename, historyInstance) {
|
||||
// Match Chrome's behavior:
|
||||
// https://github.com/chromium/chromium/blob/216dbeb61db0c667e62082e5f5400a32d6983df3/content/public/common/url_utils.cc#L82
|
||||
let invalidProtocols = ["about:", "blob:", "chrome:", "chrome-untrusted:", "content:", "data:", "devtools:", "file:", "filesystem:",
|
||||
// eslint-disable-next-line no-script-url
|
||||
"javascript:"];
|
||||
if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
// Strip off the protocol+origin for same-origin + same-basename absolute redirects
|
||||
let normalizedLocation = location;
|
||||
let url = normalizedLocation.startsWith("//") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
let isSameBasename = stripBasename(url.pathname, basename) != null;
|
||||
if (url.origin === currentUrl.origin && isSameBasename) {
|
||||
return removeDoubleSlashes(url.pathname) + url.search + url.hash;
|
||||
}
|
||||
}
|
||||
try {
|
||||
let url = historyInstance.createURL(location);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
} catch (e) {}
|
||||
return location;
|
||||
}
|
||||
|
||||
// Utility method for creating the Request instances for loaders/actions during
|
||||
// client-side navigations and fetches. During SSR we will always have a
|
||||
// Request instance from the static handler (query/queryRoute)
|
||||
function createClientSideRequest(history, location, signal, submission) {
|
||||
let url = history.createURL(stripHashFromPath(location)).toString();
|
||||
let init = {
|
||||
signal
|
||||
};
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
let {
|
||||
formMethod,
|
||||
formEncType
|
||||
} = submission;
|
||||
// Didn't think we needed this but it turns out unlike other methods, patch
|
||||
// won't be properly normalized to uppercase and results in a 405 error.
|
||||
// See: https://fetch.spec.whatwg.org/#concept-method
|
||||
init.method = formMethod.toUpperCase();
|
||||
if (formEncType === "application/json") {
|
||||
init.headers = new Headers({
|
||||
"Content-Type": formEncType
|
||||
});
|
||||
init.body = JSON.stringify(submission.json);
|
||||
} else if (formEncType === "text/plain") {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.text;
|
||||
} else if (formEncType === "application/x-www-form-urlencoded" && submission.formData) {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = convertFormDataToSearchParams(submission.formData);
|
||||
} else {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.formData;
|
||||
}
|
||||
}
|
||||
return new Request(url, init);
|
||||
}
|
||||
function convertFormDataToSearchParams(formData) {
|
||||
let searchParams = new URLSearchParams();
|
||||
for (let [key, value] of formData.entries()) {
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
|
||||
searchParams.append(key, typeof value === "string" ? value : value.name);
|
||||
}
|
||||
return searchParams;
|
||||
}
|
||||
function convertSearchParamsToFormData(searchParams) {
|
||||
let formData = new FormData();
|
||||
for (let [key, value] of searchParams.entries()) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
function processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling) {
|
||||
// Fill in loaderData/errors from our loaders
|
||||
let loaderData = {};
|
||||
let errors = null;
|
||||
let statusCode;
|
||||
let foundError = false;
|
||||
let loaderHeaders = {};
|
||||
let pendingError = pendingActionResult && isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : undefined;
|
||||
|
||||
// Process loader results into state.loaderData/state.errors
|
||||
matches.forEach(match => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let id = match.route.id;
|
||||
let result = results[id];
|
||||
invariant(!isRedirectResult(result), "Cannot handle redirect results in processLoaderData");
|
||||
if (isErrorResult(result)) {
|
||||
let error = result.error;
|
||||
// If we have a pending action error, we report it at the highest-route
|
||||
// that throws a loader error, and then clear it out to indicate that
|
||||
// it was consumed
|
||||
if (pendingError !== undefined) {
|
||||
error = pendingError;
|
||||
pendingError = undefined;
|
||||
}
|
||||
errors = errors || {};
|
||||
if (skipLoaderErrorBubbling) {
|
||||
errors[id] = error;
|
||||
} else {
|
||||
// Look upwards from the matched route for the closest ancestor error
|
||||
// boundary, defaulting to the root match. Prefer higher error values
|
||||
// if lower errors bubble to the same boundary
|
||||
let boundaryMatch = findNearestBoundary(matches, id);
|
||||
if (errors[boundaryMatch.route.id] == null) {
|
||||
errors[boundaryMatch.route.id] = error;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear our any prior loaderData for the throwing route
|
||||
loaderData[id] = undefined;
|
||||
|
||||
// Once we find our first (highest) error, we set the status code and
|
||||
// prevent deeper status codes from overriding
|
||||
if (!foundError) {
|
||||
foundError = true;
|
||||
statusCode = isRouteErrorResponse(result.error) ? result.error.status : 500;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
if (isDeferredResult(result)) {
|
||||
activeDeferreds.set(id, result.deferredData);
|
||||
loaderData[id] = result.deferredData.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode != null && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
loaderData[id] = result.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we didn't consume the pending action error (i.e., all loaders
|
||||
// resolved), then consume it here. Also clear out any loaderData for the
|
||||
// throwing route
|
||||
if (pendingError !== undefined && pendingActionResult) {
|
||||
errors = {
|
||||
[pendingActionResult[0]]: pendingError
|
||||
};
|
||||
loaderData[pendingActionResult[0]] = undefined;
|
||||
}
|
||||
return {
|
||||
loaderData,
|
||||
errors,
|
||||
statusCode: statusCode || 200,
|
||||
loaderHeaders
|
||||
};
|
||||
}
|
||||
function processLoaderData(state, matches, results, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds) {
|
||||
let {
|
||||
loaderData,
|
||||
errors
|
||||
} = processRouteLoaderData(matches, results, pendingActionResult, activeDeferreds, false // This method is only called client side so we always want to bubble
|
||||
);
|
||||
|
||||
// Process results from our revalidating fetchers
|
||||
revalidatingFetchers.forEach(rf => {
|
||||
let {
|
||||
key,
|
||||
match,
|
||||
controller
|
||||
} = rf;
|
||||
let result = fetcherResults[key];
|
||||
invariant(result, "Did not find corresponding fetcher result");
|
||||
|
||||
// Process fetcher non-redirect errors
|
||||
if (controller && controller.signal.aborted) {
|
||||
// Nothing to do for aborted fetchers
|
||||
return;
|
||||
} else if (isErrorResult(result)) {
|
||||
let boundaryMatch = findNearestBoundary(state.matches, match == null ? void 0 : match.route.id);
|
||||
if (!(errors && errors[boundaryMatch.route.id])) {
|
||||
errors = _extends({}, errors, {
|
||||
[boundaryMatch.route.id]: result.error
|
||||
});
|
||||
}
|
||||
state.fetchers.delete(key);
|
||||
} else if (isRedirectResult(result)) {
|
||||
// Should never get here, redirects should get processed above, but we
|
||||
// keep this to type narrow to a success result in the else
|
||||
invariant(false, "Unhandled fetcher revalidation redirect");
|
||||
} else if (isDeferredResult(result)) {
|
||||
// Should never get here, deferred data should be awaited for fetchers
|
||||
// in resolveDeferredResults
|
||||
invariant(false, "Unhandled fetcher deferred data");
|
||||
} else {
|
||||
let doneFetcher = getDoneFetcher(result.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
});
|
||||
return {
|
||||
loaderData,
|
||||
errors
|
||||
};
|
||||
}
|
||||
function mergeLoaderData(loaderData, newLoaderData, matches, errors) {
|
||||
let mergedLoaderData = _extends({}, newLoaderData);
|
||||
for (let match of matches) {
|
||||
let id = match.route.id;
|
||||
if (newLoaderData.hasOwnProperty(id)) {
|
||||
if (newLoaderData[id] !== undefined) {
|
||||
mergedLoaderData[id] = newLoaderData[id];
|
||||
}
|
||||
} else if (loaderData[id] !== undefined && match.route.loader) {
|
||||
// Preserve existing keys not included in newLoaderData and where a loader
|
||||
// wasn't removed by HMR
|
||||
mergedLoaderData[id] = loaderData[id];
|
||||
}
|
||||
if (errors && errors.hasOwnProperty(id)) {
|
||||
// Don't keep any loader data below the boundary
|
||||
break;
|
||||
}
|
||||
}
|
||||
return mergedLoaderData;
|
||||
}
|
||||
function getActionDataForCommit(pendingActionResult) {
|
||||
if (!pendingActionResult) {
|
||||
return {};
|
||||
}
|
||||
return isErrorResult(pendingActionResult[1]) ? {
|
||||
// Clear out prior actionData on errors
|
||||
actionData: {}
|
||||
} : {
|
||||
actionData: {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Find the nearest error boundary, looking upwards from the leaf route (or the
|
||||
// route specified by routeId) for the closest ancestor error boundary,
|
||||
// defaulting to the root match
|
||||
function findNearestBoundary(matches, routeId) {
|
||||
let eligibleMatches = routeId ? matches.slice(0, matches.findIndex(m => m.route.id === routeId) + 1) : [...matches];
|
||||
return eligibleMatches.reverse().find(m => m.route.hasErrorBoundary === true) || matches[0];
|
||||
}
|
||||
function getShortCircuitMatches(routes) {
|
||||
// Prefer a root layout route if present, otherwise shim in a route object
|
||||
let route = routes.length === 1 ? routes[0] : routes.find(r => r.index || !r.path || r.path === "/") || {
|
||||
id: "__shim-error-route__"
|
||||
};
|
||||
return {
|
||||
matches: [{
|
||||
params: {},
|
||||
pathname: "",
|
||||
pathnameBase: "",
|
||||
route
|
||||
}],
|
||||
route
|
||||
};
|
||||
}
|
||||
function getInternalRouterError(status, _temp5) {
|
||||
let {
|
||||
pathname,
|
||||
routeId,
|
||||
method,
|
||||
type,
|
||||
message
|
||||
} = _temp5 === void 0 ? {} : _temp5;
|
||||
let statusText = "Unknown Server Error";
|
||||
let errorMessage = "Unknown @remix-run/router error";
|
||||
if (status === 400) {
|
||||
statusText = "Bad Request";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method + " request to \"" + pathname + "\" but " + ("did not provide a `loader` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (type === "defer-action") {
|
||||
errorMessage = "defer() is not supported in actions";
|
||||
} else if (type === "invalid-body") {
|
||||
errorMessage = "Unable to encode submission body";
|
||||
}
|
||||
} else if (status === 403) {
|
||||
statusText = "Forbidden";
|
||||
errorMessage = "Route \"" + routeId + "\" does not match URL \"" + pathname + "\"";
|
||||
} else if (status === 404) {
|
||||
statusText = "Not Found";
|
||||
errorMessage = "No route matches URL \"" + pathname + "\"";
|
||||
} else if (status === 405) {
|
||||
statusText = "Method Not Allowed";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage = "You made a " + method.toUpperCase() + " request to \"" + pathname + "\" but " + ("did not provide an `action` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
|
||||
} else if (method) {
|
||||
errorMessage = "Invalid request method \"" + method.toUpperCase() + "\"";
|
||||
}
|
||||
}
|
||||
return new ErrorResponseImpl(status || 500, statusText, new Error(errorMessage), true);
|
||||
}
|
||||
|
||||
// Find any returned redirect errors, starting from the lowest match
|
||||
function findRedirect(results) {
|
||||
let entries = Object.entries(results);
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
let [key, result] = entries[i];
|
||||
if (isRedirectResult(result)) {
|
||||
return {
|
||||
key,
|
||||
result
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
function stripHashFromPath(path) {
|
||||
let parsedPath = typeof path === "string" ? parsePath(path) : path;
|
||||
return createPath(_extends({}, parsedPath, {
|
||||
hash: ""
|
||||
}));
|
||||
}
|
||||
function isHashChangeOnly(a, b) {
|
||||
if (a.pathname !== b.pathname || a.search !== b.search) {
|
||||
return false;
|
||||
}
|
||||
if (a.hash === "") {
|
||||
// /page -> /page#hash
|
||||
return b.hash !== "";
|
||||
} else if (a.hash === b.hash) {
|
||||
// /page#hash -> /page#hash
|
||||
return true;
|
||||
} else if (b.hash !== "") {
|
||||
// /page#hash -> /page#other
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the hash is removed the browser will re-perform a request to the server
|
||||
// /page#hash -> /page
|
||||
return false;
|
||||
}
|
||||
function isDataStrategyResult(result) {
|
||||
return result != null && typeof result === "object" && "type" in result && "result" in result && (result.type === ResultType.data || result.type === ResultType.error);
|
||||
}
|
||||
function isRedirectDataStrategyResultResult(result) {
|
||||
return isResponse(result.result) && redirectStatusCodes.has(result.result.status);
|
||||
}
|
||||
function isDeferredResult(result) {
|
||||
return result.type === ResultType.deferred;
|
||||
}
|
||||
function isErrorResult(result) {
|
||||
return result.type === ResultType.error;
|
||||
}
|
||||
function isRedirectResult(result) {
|
||||
return (result && result.type) === ResultType.redirect;
|
||||
}
|
||||
function isDataWithResponseInit(value) {
|
||||
return typeof value === "object" && value != null && "type" in value && "data" in value && "init" in value && value.type === "DataWithResponseInit";
|
||||
}
|
||||
function isDeferredData(value) {
|
||||
let deferred = value;
|
||||
return deferred && typeof deferred === "object" && typeof deferred.data === "object" && typeof deferred.subscribe === "function" && typeof deferred.cancel === "function" && typeof deferred.resolveData === "function";
|
||||
}
|
||||
function isResponse(value) {
|
||||
return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
|
||||
}
|
||||
function isRedirectResponse(result) {
|
||||
if (!isResponse(result)) {
|
||||
return false;
|
||||
}
|
||||
let status = result.status;
|
||||
let location = result.headers.get("Location");
|
||||
return status >= 300 && status <= 399 && location != null;
|
||||
}
|
||||
function isValidMethod(method) {
|
||||
return validRequestMethods.has(method.toLowerCase());
|
||||
}
|
||||
function isMutationMethod(method) {
|
||||
return validMutationMethods.has(method.toLowerCase());
|
||||
}
|
||||
async function resolveNavigationDeferredResults(matches, results, signal, currentMatches, currentLoaderData) {
|
||||
let entries = Object.entries(results);
|
||||
for (let index = 0; index < entries.length; index++) {
|
||||
let [routeId, result] = entries[index];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
let currentMatch = currentMatches.find(m => m.route.id === match.route.id);
|
||||
let isRevalidatingLoader = currentMatch != null && !isNewRouteInstance(currentMatch, match) && (currentLoaderData && currentLoaderData[match.route.id]) !== undefined;
|
||||
if (isDeferredResult(result) && isRevalidatingLoader) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
await resolveDeferredData(result, signal, false).then(result => {
|
||||
if (result) {
|
||||
results[routeId] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveFetcherDeferredResults(matches, results, revalidatingFetchers) {
|
||||
for (let index = 0; index < revalidatingFetchers.length; index++) {
|
||||
let {
|
||||
key,
|
||||
routeId,
|
||||
controller
|
||||
} = revalidatingFetchers[index];
|
||||
let result = results[key];
|
||||
let match = matches.find(m => (m == null ? void 0 : m.route.id) === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
if (isDeferredResult(result)) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
invariant(controller, "Expected an AbortController for revalidating fetcher deferred result");
|
||||
await resolveDeferredData(result, controller.signal, true).then(result => {
|
||||
if (result) {
|
||||
results[key] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async function resolveDeferredData(result, signal, unwrap) {
|
||||
if (unwrap === void 0) {
|
||||
unwrap = false;
|
||||
}
|
||||
let aborted = await result.deferredData.resolveData(signal);
|
||||
if (aborted) {
|
||||
return;
|
||||
}
|
||||
if (unwrap) {
|
||||
try {
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.unwrappedData
|
||||
};
|
||||
} catch (e) {
|
||||
// Handle any TrackedPromise._error values encountered while unwrapping
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.data
|
||||
};
|
||||
}
|
||||
function hasNakedIndexQuery(search) {
|
||||
return new URLSearchParams(search).getAll("index").some(v => v === "");
|
||||
}
|
||||
function getTargetMatch(matches, location) {
|
||||
let search = typeof location === "string" ? parsePath(location).search : location.search;
|
||||
if (matches[matches.length - 1].route.index && hasNakedIndexQuery(search || "")) {
|
||||
// Return the leaf index route when index is present
|
||||
return matches[matches.length - 1];
|
||||
}
|
||||
// Otherwise grab the deepest "path contributing" match (ignoring index and
|
||||
// pathless layout routes)
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
return pathMatches[pathMatches.length - 1];
|
||||
}
|
||||
function getSubmissionFromNavigation(navigation) {
|
||||
let {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
text,
|
||||
formData,
|
||||
json
|
||||
} = navigation;
|
||||
if (!formMethod || !formAction || !formEncType) {
|
||||
return;
|
||||
}
|
||||
if (text != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text
|
||||
};
|
||||
} else if (formData != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
} else if (json !== undefined) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
function getLoadingNavigation(location, submission) {
|
||||
if (submission) {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
} else {
|
||||
let navigation = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
}
|
||||
function getSubmittingNavigation(location, submission) {
|
||||
let navigation = {
|
||||
state: "submitting",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
function getLoadingFetcher(submission, data) {
|
||||
if (submission) {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
} else {
|
||||
let fetcher = {
|
||||
state: "loading",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
}
|
||||
function getSubmittingFetcher(submission, existingFetcher) {
|
||||
let fetcher = {
|
||||
state: "submitting",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data: existingFetcher ? existingFetcher.data : undefined
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function getDoneFetcher(data) {
|
||||
let fetcher = {
|
||||
state: "idle",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
function restoreAppliedTransitions(_window, transitions) {
|
||||
try {
|
||||
let sessionPositions = _window.sessionStorage.getItem(TRANSITIONS_STORAGE_KEY);
|
||||
if (sessionPositions) {
|
||||
let json = JSON.parse(sessionPositions);
|
||||
for (let [k, v] of Object.entries(json || {})) {
|
||||
if (v && Array.isArray(v)) {
|
||||
transitions.set(k, new Set(v || []));
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// no-op, use default empty object
|
||||
}
|
||||
}
|
||||
function persistAppliedTransitions(_window, transitions) {
|
||||
if (transitions.size > 0) {
|
||||
let json = {};
|
||||
for (let [k, v] of transitions) {
|
||||
json[k] = [...v];
|
||||
}
|
||||
try {
|
||||
_window.sessionStorage.setItem(TRANSITIONS_STORAGE_KEY, JSON.stringify(json));
|
||||
} catch (error) {
|
||||
warning(false, "Failed to save applied view transitions in sessionStorage (" + error + ").");
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
exports.AbortedDeferredError = AbortedDeferredError;
|
||||
exports.Action = Action;
|
||||
exports.IDLE_BLOCKER = IDLE_BLOCKER;
|
||||
exports.IDLE_FETCHER = IDLE_FETCHER;
|
||||
exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
|
||||
exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;
|
||||
exports.UNSAFE_DeferredData = DeferredData;
|
||||
exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;
|
||||
exports.UNSAFE_convertRouteMatchToUiMatch = convertRouteMatchToUiMatch;
|
||||
exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
|
||||
exports.UNSAFE_decodePath = decodePath;
|
||||
exports.UNSAFE_getResolveToMatches = getResolveToMatches;
|
||||
exports.UNSAFE_invariant = invariant;
|
||||
exports.UNSAFE_warning = warning;
|
||||
exports.createBrowserHistory = createBrowserHistory;
|
||||
exports.createHashHistory = createHashHistory;
|
||||
exports.createMemoryHistory = createMemoryHistory;
|
||||
exports.createPath = createPath;
|
||||
exports.createRouter = createRouter;
|
||||
exports.createStaticHandler = createStaticHandler;
|
||||
exports.data = data;
|
||||
exports.defer = defer;
|
||||
exports.generatePath = generatePath;
|
||||
exports.getStaticContextFromError = getStaticContextFromError;
|
||||
exports.getToPathname = getToPathname;
|
||||
exports.isDataWithResponseInit = isDataWithResponseInit;
|
||||
exports.isDeferredData = isDeferredData;
|
||||
exports.isRouteErrorResponse = isRouteErrorResponse;
|
||||
exports.joinPaths = joinPaths;
|
||||
exports.json = json;
|
||||
exports.matchPath = matchPath;
|
||||
exports.matchRoutes = matchRoutes;
|
||||
exports.normalizePathname = normalizePathname;
|
||||
exports.parsePath = parsePath;
|
||||
exports.redirect = redirect;
|
||||
exports.redirectDocument = redirectDocument;
|
||||
exports.replace = replace;
|
||||
exports.resolvePath = resolvePath;
|
||||
exports.resolveTo = resolveTo;
|
||||
exports.stripBasename = stripBasename;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=router.umd.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+12
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+557
@@ -0,0 +1,557 @@
|
||||
import type { Location, Path, To } from "./history";
|
||||
/**
|
||||
* Map of routeId -> data returned from a loader/action/error
|
||||
*/
|
||||
export interface RouteData {
|
||||
[routeId: string]: any;
|
||||
}
|
||||
export declare enum ResultType {
|
||||
data = "data",
|
||||
deferred = "deferred",
|
||||
redirect = "redirect",
|
||||
error = "error"
|
||||
}
|
||||
/**
|
||||
* Successful result from a loader or action
|
||||
*/
|
||||
export interface SuccessResult {
|
||||
type: ResultType.data;
|
||||
data: unknown;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
/**
|
||||
* Successful defer() result from a loader or action
|
||||
*/
|
||||
export interface DeferredResult {
|
||||
type: ResultType.deferred;
|
||||
deferredData: DeferredData;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
/**
|
||||
* Redirect result from a loader or action
|
||||
*/
|
||||
export interface RedirectResult {
|
||||
type: ResultType.redirect;
|
||||
response: Response;
|
||||
}
|
||||
/**
|
||||
* Unsuccessful result from a loader or action
|
||||
*/
|
||||
export interface ErrorResult {
|
||||
type: ResultType.error;
|
||||
error: unknown;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
/**
|
||||
* Result from a loader or action - potentially successful or unsuccessful
|
||||
*/
|
||||
export type DataResult = SuccessResult | DeferredResult | RedirectResult | ErrorResult;
|
||||
type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
|
||||
type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
|
||||
/**
|
||||
* Users can specify either lowercase or uppercase form methods on `<Form>`,
|
||||
* useSubmit(), `<fetcher.Form>`, etc.
|
||||
*/
|
||||
export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;
|
||||
/**
|
||||
* Active navigation/fetcher form methods are exposed in lowercase on the
|
||||
* RouterState
|
||||
*/
|
||||
export type FormMethod = LowerCaseFormMethod;
|
||||
export type MutationFormMethod = Exclude<FormMethod, "get">;
|
||||
/**
|
||||
* In v7, active navigation/fetcher form methods are exposed in uppercase on the
|
||||
* RouterState. This is to align with the normalization done via fetch().
|
||||
*/
|
||||
export type V7_FormMethod = UpperCaseFormMethod;
|
||||
export type V7_MutationFormMethod = Exclude<V7_FormMethod, "GET">;
|
||||
export type FormEncType = "application/x-www-form-urlencoded" | "multipart/form-data" | "application/json" | "text/plain";
|
||||
type JsonObject = {
|
||||
[Key in string]: JsonValue;
|
||||
} & {
|
||||
[Key in string]?: JsonValue | undefined;
|
||||
};
|
||||
type JsonArray = JsonValue[] | readonly JsonValue[];
|
||||
type JsonPrimitive = string | number | boolean | null;
|
||||
type JsonValue = JsonPrimitive | JsonObject | JsonArray;
|
||||
/**
|
||||
* @private
|
||||
* Internal interface to pass around for action submissions, not intended for
|
||||
* external consumption
|
||||
*/
|
||||
export type Submission = {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: FormData;
|
||||
json: undefined;
|
||||
text: undefined;
|
||||
} | {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: undefined;
|
||||
json: JsonValue;
|
||||
text: undefined;
|
||||
} | {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
text: string;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* Arguments passed to route loader/action functions. Same for now but we keep
|
||||
* this as a private implementation detail in case they diverge in the future.
|
||||
*/
|
||||
interface DataFunctionArgs<Context> {
|
||||
request: Request;
|
||||
params: Params;
|
||||
context?: Context;
|
||||
}
|
||||
/**
|
||||
* Arguments passed to loader functions
|
||||
*/
|
||||
export interface LoaderFunctionArgs<Context = any> extends DataFunctionArgs<Context> {
|
||||
}
|
||||
/**
|
||||
* Arguments passed to action functions
|
||||
*/
|
||||
export interface ActionFunctionArgs<Context = any> extends DataFunctionArgs<Context> {
|
||||
}
|
||||
/**
|
||||
* Loaders and actions can return anything except `undefined` (`null` is a
|
||||
* valid return value if there is no data to return). Responses are preferred
|
||||
* and will ease any future migration to Remix
|
||||
*/
|
||||
type DataFunctionValue = Response | NonNullable<unknown> | null;
|
||||
type DataFunctionReturnValue = Promise<DataFunctionValue> | DataFunctionValue;
|
||||
/**
|
||||
* Route loader function signature
|
||||
*/
|
||||
export type LoaderFunction<Context = any> = {
|
||||
(args: LoaderFunctionArgs<Context>, handlerCtx?: unknown): DataFunctionReturnValue;
|
||||
} & {
|
||||
hydrate?: boolean;
|
||||
};
|
||||
/**
|
||||
* Route action function signature
|
||||
*/
|
||||
export interface ActionFunction<Context = any> {
|
||||
(args: ActionFunctionArgs<Context>, handlerCtx?: unknown): DataFunctionReturnValue;
|
||||
}
|
||||
/**
|
||||
* Arguments passed to shouldRevalidate function
|
||||
*/
|
||||
export interface ShouldRevalidateFunctionArgs {
|
||||
currentUrl: URL;
|
||||
currentParams: AgnosticDataRouteMatch["params"];
|
||||
nextUrl: URL;
|
||||
nextParams: AgnosticDataRouteMatch["params"];
|
||||
formMethod?: Submission["formMethod"];
|
||||
formAction?: Submission["formAction"];
|
||||
formEncType?: Submission["formEncType"];
|
||||
text?: Submission["text"];
|
||||
formData?: Submission["formData"];
|
||||
json?: Submission["json"];
|
||||
actionStatus?: number;
|
||||
actionResult?: any;
|
||||
defaultShouldRevalidate: boolean;
|
||||
}
|
||||
/**
|
||||
* Route shouldRevalidate function signature. This runs after any submission
|
||||
* (navigation or fetcher), so we flatten the navigation/fetcher submission
|
||||
* onto the arguments. It shouldn't matter whether it came from a navigation
|
||||
* or a fetcher, what really matters is the URLs and the formData since loaders
|
||||
* have to re-run based on the data models that were potentially mutated.
|
||||
*/
|
||||
export interface ShouldRevalidateFunction {
|
||||
(args: ShouldRevalidateFunctionArgs): boolean;
|
||||
}
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set `hasErrorBoundary`
|
||||
* from the framework-aware `errorElement` prop
|
||||
*
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
export interface DetectErrorBoundaryFunction {
|
||||
(route: AgnosticRouteObject): boolean;
|
||||
}
|
||||
export interface DataStrategyMatch extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
|
||||
shouldLoad: boolean;
|
||||
resolve: (handlerOverride?: (handler: (ctx?: unknown) => DataFunctionReturnValue) => DataFunctionReturnValue) => Promise<DataStrategyResult>;
|
||||
}
|
||||
export interface DataStrategyFunctionArgs<Context = any> extends DataFunctionArgs<Context> {
|
||||
matches: DataStrategyMatch[];
|
||||
fetcherKey: string | null;
|
||||
}
|
||||
/**
|
||||
* Result from a loader or action called via dataStrategy
|
||||
*/
|
||||
export interface DataStrategyResult {
|
||||
type: "data" | "error";
|
||||
result: unknown;
|
||||
}
|
||||
export interface DataStrategyFunction {
|
||||
(args: DataStrategyFunctionArgs): Promise<Record<string, DataStrategyResult>>;
|
||||
}
|
||||
export type AgnosticPatchRoutesOnNavigationFunctionArgs<O extends AgnosticRouteObject = AgnosticRouteObject, M extends AgnosticRouteMatch = AgnosticRouteMatch> = {
|
||||
signal: AbortSignal;
|
||||
path: string;
|
||||
matches: M[];
|
||||
fetcherKey: string | undefined;
|
||||
patch: (routeId: string | null, children: O[]) => void;
|
||||
};
|
||||
export type AgnosticPatchRoutesOnNavigationFunction<O extends AgnosticRouteObject = AgnosticRouteObject, M extends AgnosticRouteMatch = AgnosticRouteMatch> = (opts: AgnosticPatchRoutesOnNavigationFunctionArgs<O, M>) => void | Promise<void>;
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set any framework-specific
|
||||
* properties from framework-agnostic properties
|
||||
*/
|
||||
export interface MapRoutePropertiesFunction {
|
||||
(route: AgnosticRouteObject): {
|
||||
hasErrorBoundary: boolean;
|
||||
} & Record<string, any>;
|
||||
}
|
||||
/**
|
||||
* Keys we cannot change from within a lazy() function. We spread all other keys
|
||||
* onto the route. Either they're meaningful to the router, or they'll get
|
||||
* ignored.
|
||||
*/
|
||||
export type ImmutableRouteKey = "lazy" | "caseSensitive" | "path" | "id" | "index" | "children";
|
||||
export declare const immutableRouteKeys: Set<ImmutableRouteKey>;
|
||||
type RequireOne<T, Key = keyof T> = Exclude<{
|
||||
[K in keyof T]: K extends Key ? Omit<T, K> & Required<Pick<T, K>> : never;
|
||||
}[keyof T], undefined>;
|
||||
/**
|
||||
* lazy() function to load a route definition, which can add non-matching
|
||||
* related properties to a route
|
||||
*/
|
||||
export interface LazyRouteFunction<R extends AgnosticRouteObject> {
|
||||
(): Promise<RequireOne<Omit<R, ImmutableRouteKey>>>;
|
||||
}
|
||||
/**
|
||||
* Base RouteObject with common props shared by all types of routes
|
||||
*/
|
||||
type AgnosticBaseRouteObject = {
|
||||
caseSensitive?: boolean;
|
||||
path?: string;
|
||||
id?: string;
|
||||
loader?: LoaderFunction | boolean;
|
||||
action?: ActionFunction | boolean;
|
||||
hasErrorBoundary?: boolean;
|
||||
shouldRevalidate?: ShouldRevalidateFunction;
|
||||
handle?: any;
|
||||
lazy?: LazyRouteFunction<AgnosticBaseRouteObject>;
|
||||
};
|
||||
/**
|
||||
* Index routes must not have children
|
||||
*/
|
||||
export type AgnosticIndexRouteObject = AgnosticBaseRouteObject & {
|
||||
children?: undefined;
|
||||
index: true;
|
||||
};
|
||||
/**
|
||||
* Non-index routes may have children, but cannot have index
|
||||
*/
|
||||
export type AgnosticNonIndexRouteObject = AgnosticBaseRouteObject & {
|
||||
children?: AgnosticRouteObject[];
|
||||
index?: false;
|
||||
};
|
||||
/**
|
||||
* A route object represents a logical route, with (optionally) its child
|
||||
* routes organized in a tree-like structure.
|
||||
*/
|
||||
export type AgnosticRouteObject = AgnosticIndexRouteObject | AgnosticNonIndexRouteObject;
|
||||
export type AgnosticDataIndexRouteObject = AgnosticIndexRouteObject & {
|
||||
id: string;
|
||||
};
|
||||
export type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObject & {
|
||||
children?: AgnosticDataRouteObject[];
|
||||
id: string;
|
||||
};
|
||||
/**
|
||||
* A data route object, which is just a RouteObject with a required unique ID
|
||||
*/
|
||||
export type AgnosticDataRouteObject = AgnosticDataIndexRouteObject | AgnosticDataNonIndexRouteObject;
|
||||
export type RouteManifest = Record<string, AgnosticDataRouteObject | undefined>;
|
||||
type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param extends `${infer Optional}?` ? Optional : Param : never;
|
||||
/**
|
||||
* Examples:
|
||||
* "/a/b/*" -> "*"
|
||||
* ":a" -> "a"
|
||||
* "/a/:b" -> "b"
|
||||
* "/a/blahblahblah:b" -> "b"
|
||||
* "/:a/:b" -> "a" | "b"
|
||||
* "/:a/b/:c/*" -> "a" | "c" | "*"
|
||||
*/
|
||||
export type PathParam<Path extends string> = Path extends "*" | "/*" ? "*" : Path extends `${infer Rest}/*` ? "*" | _PathParam<Rest> : _PathParam<Path>;
|
||||
export type ParamParseKey<Segment extends string> = [
|
||||
PathParam<Segment>
|
||||
] extends [never] ? string : PathParam<Segment>;
|
||||
/**
|
||||
* The parameters that were parsed from the URL path.
|
||||
*/
|
||||
export type Params<Key extends string = string> = {
|
||||
readonly [key in Key]: string | undefined;
|
||||
};
|
||||
/**
|
||||
* A RouteMatch contains info about how a route matched a URL.
|
||||
*/
|
||||
export interface AgnosticRouteMatch<ParamKey extends string = string, RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject> {
|
||||
/**
|
||||
* The names and values of dynamic parameters in the URL.
|
||||
*/
|
||||
params: Params<ParamKey>;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched.
|
||||
*/
|
||||
pathname: string;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched before child routes.
|
||||
*/
|
||||
pathnameBase: string;
|
||||
/**
|
||||
* The route object that was used to match.
|
||||
*/
|
||||
route: RouteObjectType;
|
||||
}
|
||||
export interface AgnosticDataRouteMatch extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
|
||||
}
|
||||
export declare function convertRoutesToDataRoutes(routes: AgnosticRouteObject[], mapRouteProperties: MapRoutePropertiesFunction, parentPath?: string[], manifest?: RouteManifest): AgnosticDataRouteObject[];
|
||||
/**
|
||||
* Matches the given routes to a location and returns the match data.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-routes
|
||||
*/
|
||||
export declare function matchRoutes<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename?: string): AgnosticRouteMatch<string, RouteObjectType>[] | null;
|
||||
export declare function matchRoutesImpl<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename: string, allowPartial: boolean): AgnosticRouteMatch<string, RouteObjectType>[] | null;
|
||||
export interface UIMatch<Data = unknown, Handle = unknown> {
|
||||
id: string;
|
||||
pathname: string;
|
||||
params: AgnosticRouteMatch["params"];
|
||||
data: Data;
|
||||
handle: Handle;
|
||||
}
|
||||
export declare function convertRouteMatchToUiMatch(match: AgnosticDataRouteMatch, loaderData: RouteData): UIMatch;
|
||||
/**
|
||||
* Returns a path with params interpolated.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/generate-path
|
||||
*/
|
||||
export declare function generatePath<Path extends string>(originalPath: Path, params?: {
|
||||
[key in PathParam<Path>]: string | null;
|
||||
}): string;
|
||||
/**
|
||||
* A PathPattern is used to match on some portion of a URL pathname.
|
||||
*/
|
||||
export interface PathPattern<Path extends string = string> {
|
||||
/**
|
||||
* A string to match against a URL pathname. May contain `:id`-style segments
|
||||
* to indicate placeholders for dynamic parameters. May also end with `/*` to
|
||||
* indicate matching the rest of the URL pathname.
|
||||
*/
|
||||
path: Path;
|
||||
/**
|
||||
* Should be `true` if the static portions of the `path` should be matched in
|
||||
* the same case.
|
||||
*/
|
||||
caseSensitive?: boolean;
|
||||
/**
|
||||
* Should be `true` if this pattern should match the entire URL pathname.
|
||||
*/
|
||||
end?: boolean;
|
||||
}
|
||||
/**
|
||||
* A PathMatch contains info about how a PathPattern matched on a URL pathname.
|
||||
*/
|
||||
export interface PathMatch<ParamKey extends string = string> {
|
||||
/**
|
||||
* The names and values of dynamic parameters in the URL.
|
||||
*/
|
||||
params: Params<ParamKey>;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched.
|
||||
*/
|
||||
pathname: string;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched before child routes.
|
||||
*/
|
||||
pathnameBase: string;
|
||||
/**
|
||||
* The pattern that was used to match.
|
||||
*/
|
||||
pattern: PathPattern;
|
||||
}
|
||||
/**
|
||||
* Performs pattern matching on a URL pathname and returns information about
|
||||
* the match.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-path
|
||||
*/
|
||||
export declare function matchPath<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path, pathname: string): PathMatch<ParamKey> | null;
|
||||
export declare function decodePath(value: string): string;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare function stripBasename(pathname: string, basename: string): string | null;
|
||||
export declare const isAbsoluteUrl: (url: string) => boolean;
|
||||
/**
|
||||
* Returns a resolved path object relative to the given pathname.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/resolve-path
|
||||
*/
|
||||
export declare function resolvePath(to: To, fromPathname?: string): Path;
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* When processing relative navigation we want to ignore ancestor routes that
|
||||
* do not contribute to the path, such that index/pathless layout routes don't
|
||||
* interfere.
|
||||
*
|
||||
* For example, when moving a route element into an index route and/or a
|
||||
* pathless layout route, relative link behavior contained within should stay
|
||||
* the same. Both of the following examples should link back to the root:
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts" element={<Link to=".."}>
|
||||
* </Route>
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts">
|
||||
* <Route element={<AccountsLayout />}> // <-- Does not contribute
|
||||
* <Route index element={<Link to=".."} /> // <-- Does not contribute
|
||||
* </Route
|
||||
* </Route>
|
||||
* </Route>
|
||||
*/
|
||||
export declare function getPathContributingMatches<T extends AgnosticRouteMatch = AgnosticRouteMatch>(matches: T[]): T[];
|
||||
export declare function getResolveToMatches<T extends AgnosticRouteMatch = AgnosticRouteMatch>(matches: T[], v7_relativeSplatPath: boolean): string[];
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare function resolveTo(toArg: To, routePathnames: string[], locationPathname: string, isPathRelative?: boolean): Path;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare function getToPathname(to: To): string | undefined;
|
||||
export declare const removeDoubleSlashes: (path: string) => string;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare const joinPaths: (paths: string[]) => string;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare const normalizePathname: (pathname: string) => string;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare const normalizeSearch: (search: string) => string;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export declare const normalizeHash: (hash: string) => string;
|
||||
export type JsonFunction = <Data>(data: Data, init?: number | ResponseInit) => Response;
|
||||
/**
|
||||
* This is a shortcut for creating `application/json` responses. Converts `data`
|
||||
* to JSON and sets the `Content-Type` header.
|
||||
*
|
||||
* @deprecated The `json` method is deprecated in favor of returning raw objects.
|
||||
* This method will be removed in v7.
|
||||
*/
|
||||
export declare const json: JsonFunction;
|
||||
export declare class DataWithResponseInit<D> {
|
||||
type: string;
|
||||
data: D;
|
||||
init: ResponseInit | null;
|
||||
constructor(data: D, init?: ResponseInit);
|
||||
}
|
||||
/**
|
||||
* Create "responses" that contain `status`/`headers` without forcing
|
||||
* serialization into an actual `Response` - used by Remix single fetch
|
||||
*/
|
||||
export declare function data<D>(data: D, init?: number | ResponseInit): DataWithResponseInit<D>;
|
||||
export interface TrackedPromise extends Promise<any> {
|
||||
_tracked?: boolean;
|
||||
_data?: any;
|
||||
_error?: any;
|
||||
}
|
||||
export declare class AbortedDeferredError extends Error {
|
||||
}
|
||||
export declare class DeferredData {
|
||||
private pendingKeysSet;
|
||||
private controller;
|
||||
private abortPromise;
|
||||
private unlistenAbortSignal;
|
||||
private subscribers;
|
||||
data: Record<string, unknown>;
|
||||
init?: ResponseInit;
|
||||
deferredKeys: string[];
|
||||
constructor(data: Record<string, unknown>, responseInit?: ResponseInit);
|
||||
private trackPromise;
|
||||
private onSettle;
|
||||
private emit;
|
||||
subscribe(fn: (aborted: boolean, settledKey?: string) => void): () => boolean;
|
||||
cancel(): void;
|
||||
resolveData(signal: AbortSignal): Promise<boolean>;
|
||||
get done(): boolean;
|
||||
get unwrappedData(): {};
|
||||
get pendingKeys(): string[];
|
||||
}
|
||||
export type DeferFunction = (data: Record<string, unknown>, init?: number | ResponseInit) => DeferredData;
|
||||
/**
|
||||
* @deprecated The `defer` method is deprecated in favor of returning raw
|
||||
* objects. This method will be removed in v7.
|
||||
*/
|
||||
export declare const defer: DeferFunction;
|
||||
export type RedirectFunction = (url: string, init?: number | ResponseInit) => Response;
|
||||
/**
|
||||
* A redirect response. Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export declare const redirect: RedirectFunction;
|
||||
/**
|
||||
* A redirect response that will force a document reload to the new location.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export declare const redirectDocument: RedirectFunction;
|
||||
/**
|
||||
* A redirect response that will perform a `history.replaceState` instead of a
|
||||
* `history.pushState` for client-side navigation redirects.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export declare const replace: RedirectFunction;
|
||||
export type ErrorResponse = {
|
||||
status: number;
|
||||
statusText: string;
|
||||
data: any;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
|
||||
*
|
||||
* We don't export the class for public use since it's an implementation
|
||||
* detail, but we export the interface above so folks can build their own
|
||||
* abstractions around instances via isRouteErrorResponse()
|
||||
*/
|
||||
export declare class ErrorResponseImpl implements ErrorResponse {
|
||||
status: number;
|
||||
statusText: string;
|
||||
data: any;
|
||||
private error?;
|
||||
private internal;
|
||||
constructor(status: number, statusText: string | undefined, data: any, internal?: boolean);
|
||||
}
|
||||
/**
|
||||
* Check if the given error is an ErrorResponse generated from a 4xx/5xx
|
||||
* Response thrown from an action/loader
|
||||
*/
|
||||
export declare function isRouteErrorResponse(error: any): error is ErrorResponse;
|
||||
export {};
|
||||
+746
@@ -0,0 +1,746 @@
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Actions represent the type of change to a location value.
|
||||
*/
|
||||
export enum Action {
|
||||
/**
|
||||
* A POP indicates a change to an arbitrary index in the history stack, such
|
||||
* as a back or forward navigation. It does not describe the direction of the
|
||||
* navigation, only that the current index changed.
|
||||
*
|
||||
* Note: This is the default action for newly created history objects.
|
||||
*/
|
||||
Pop = "POP",
|
||||
|
||||
/**
|
||||
* A PUSH indicates a new entry being added to the history stack, such as when
|
||||
* a link is clicked and a new page loads. When this happens, all subsequent
|
||||
* entries in the stack are lost.
|
||||
*/
|
||||
Push = "PUSH",
|
||||
|
||||
/**
|
||||
* A REPLACE indicates the entry at the current index in the history stack
|
||||
* being replaced by a new one.
|
||||
*/
|
||||
Replace = "REPLACE",
|
||||
}
|
||||
|
||||
/**
|
||||
* The pathname, search, and hash values of a URL.
|
||||
*/
|
||||
export interface Path {
|
||||
/**
|
||||
* A URL pathname, beginning with a /.
|
||||
*/
|
||||
pathname: string;
|
||||
|
||||
/**
|
||||
* A URL search string, beginning with a ?.
|
||||
*/
|
||||
search: string;
|
||||
|
||||
/**
|
||||
* A URL fragment identifier, beginning with a #.
|
||||
*/
|
||||
hash: string;
|
||||
}
|
||||
|
||||
// TODO: (v7) Change the Location generic default from `any` to `unknown` and
|
||||
// remove Remix `useLocation` wrapper.
|
||||
|
||||
/**
|
||||
* An entry in a history stack. A location contains information about the
|
||||
* URL path, as well as possibly some arbitrary state and a key.
|
||||
*/
|
||||
export interface Location<State = any> extends Path {
|
||||
/**
|
||||
* A value of arbitrary data associated with this location.
|
||||
*/
|
||||
state: State;
|
||||
|
||||
/**
|
||||
* A unique string associated with this location. May be used to safely store
|
||||
* and retrieve data in some other storage API, like `localStorage`.
|
||||
*
|
||||
* Note: This value is always "default" on the initial location.
|
||||
*/
|
||||
key: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A change to the current location.
|
||||
*/
|
||||
export interface Update {
|
||||
/**
|
||||
* The action that triggered the change.
|
||||
*/
|
||||
action: Action;
|
||||
|
||||
/**
|
||||
* The new location.
|
||||
*/
|
||||
location: Location;
|
||||
|
||||
/**
|
||||
* The delta between this location and the former location in the history stack
|
||||
*/
|
||||
delta: number | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* A function that receives notifications about location changes.
|
||||
*/
|
||||
export interface Listener {
|
||||
(update: Update): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Describes a location that is the destination of some navigation, either via
|
||||
* `history.push` or `history.replace`. This may be either a URL or the pieces
|
||||
* of a URL path.
|
||||
*/
|
||||
export type To = string | Partial<Path>;
|
||||
|
||||
/**
|
||||
* A history is an interface to the navigation stack. The history serves as the
|
||||
* source of truth for the current location, as well as provides a set of
|
||||
* methods that may be used to change it.
|
||||
*
|
||||
* It is similar to the DOM's `window.history` object, but with a smaller, more
|
||||
* focused API.
|
||||
*/
|
||||
export interface History {
|
||||
/**
|
||||
* The last action that modified the current location. This will always be
|
||||
* Action.Pop when a history instance is first created. This value is mutable.
|
||||
*/
|
||||
readonly action: Action;
|
||||
|
||||
/**
|
||||
* The current location. This value is mutable.
|
||||
*/
|
||||
readonly location: Location;
|
||||
|
||||
/**
|
||||
* Returns a valid href for the given `to` value that may be used as
|
||||
* the value of an <a href> attribute.
|
||||
*
|
||||
* @param to - The destination URL
|
||||
*/
|
||||
createHref(to: To): string;
|
||||
|
||||
/**
|
||||
* Returns a URL for the given `to` value
|
||||
*
|
||||
* @param to - The destination URL
|
||||
*/
|
||||
createURL(to: To): URL;
|
||||
|
||||
/**
|
||||
* Encode a location the same way window.history would do (no-op for memory
|
||||
* history) so we ensure our PUSH/REPLACE navigations for data routers
|
||||
* behave the same as POP
|
||||
*
|
||||
* @param to Unencoded path
|
||||
*/
|
||||
encodeLocation(to: To): Path;
|
||||
|
||||
/**
|
||||
* Pushes a new location onto the history stack, increasing its length by one.
|
||||
* If there were any entries in the stack after the current one, they are
|
||||
* lost.
|
||||
*
|
||||
* @param to - The new URL
|
||||
* @param state - Data to associate with the new location
|
||||
*/
|
||||
push(to: To, state?: any): void;
|
||||
|
||||
/**
|
||||
* Replaces the current location in the history stack with a new one. The
|
||||
* location that was replaced will no longer be available.
|
||||
*
|
||||
* @param to - The new URL
|
||||
* @param state - Data to associate with the new location
|
||||
*/
|
||||
replace(to: To, state?: any): void;
|
||||
|
||||
/**
|
||||
* Navigates `n` entries backward/forward in the history stack relative to the
|
||||
* current index. For example, a "back" navigation would use go(-1).
|
||||
*
|
||||
* @param delta - The delta in the stack index
|
||||
*/
|
||||
go(delta: number): void;
|
||||
|
||||
/**
|
||||
* Sets up a listener that will be called whenever the current location
|
||||
* changes.
|
||||
*
|
||||
* @param listener - A function that will be called when the location changes
|
||||
* @returns unlisten - A function that may be used to stop listening
|
||||
*/
|
||||
listen(listener: Listener): () => void;
|
||||
}
|
||||
|
||||
type HistoryState = {
|
||||
usr: any;
|
||||
key?: string;
|
||||
idx: number;
|
||||
};
|
||||
|
||||
const PopStateEventType = "popstate";
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Memory History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A user-supplied object that describes a location. Used when providing
|
||||
* entries to `createMemoryHistory` via its `initialEntries` option.
|
||||
*/
|
||||
export type InitialEntry = string | Partial<Location>;
|
||||
|
||||
export type MemoryHistoryOptions = {
|
||||
initialEntries?: InitialEntry[];
|
||||
initialIndex?: number;
|
||||
v5Compat?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* A memory history stores locations in memory. This is useful in stateful
|
||||
* environments where there is no web browser, such as node tests or React
|
||||
* Native.
|
||||
*/
|
||||
export interface MemoryHistory extends History {
|
||||
/**
|
||||
* The current index in the history stack.
|
||||
*/
|
||||
readonly index: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory history stores the current location in memory. It is designed for use
|
||||
* in stateful non-browser environments like tests and React Native.
|
||||
*/
|
||||
export function createMemoryHistory(
|
||||
options: MemoryHistoryOptions = {}
|
||||
): MemoryHistory {
|
||||
let { initialEntries = ["/"], initialIndex, v5Compat = false } = options;
|
||||
let entries: Location[]; // Declare so we can access from createMemoryLocation
|
||||
entries = initialEntries.map((entry, index) =>
|
||||
createMemoryLocation(
|
||||
entry,
|
||||
typeof entry === "string" ? null : entry.state,
|
||||
index === 0 ? "default" : undefined
|
||||
)
|
||||
);
|
||||
let index = clampIndex(
|
||||
initialIndex == null ? entries.length - 1 : initialIndex
|
||||
);
|
||||
let action = Action.Pop;
|
||||
let listener: Listener | null = null;
|
||||
|
||||
function clampIndex(n: number): number {
|
||||
return Math.min(Math.max(n, 0), entries.length - 1);
|
||||
}
|
||||
function getCurrentLocation(): Location {
|
||||
return entries[index];
|
||||
}
|
||||
function createMemoryLocation(
|
||||
to: To,
|
||||
state: any = null,
|
||||
key?: string
|
||||
): Location {
|
||||
let location = createLocation(
|
||||
entries ? getCurrentLocation().pathname : "/",
|
||||
to,
|
||||
state,
|
||||
key
|
||||
);
|
||||
warning(
|
||||
location.pathname.charAt(0) === "/",
|
||||
`relative pathnames are not supported in memory history: ${JSON.stringify(
|
||||
to
|
||||
)}`
|
||||
);
|
||||
return location;
|
||||
}
|
||||
|
||||
function createHref(to: To) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
|
||||
let history: MemoryHistory = {
|
||||
get index() {
|
||||
return index;
|
||||
},
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getCurrentLocation();
|
||||
},
|
||||
createHref,
|
||||
createURL(to) {
|
||||
return new URL(createHref(to), "http://localhost");
|
||||
},
|
||||
encodeLocation(to: To) {
|
||||
let path = typeof to === "string" ? parsePath(to) : to;
|
||||
return {
|
||||
pathname: path.pathname || "",
|
||||
search: path.search || "",
|
||||
hash: path.hash || "",
|
||||
};
|
||||
},
|
||||
push(to, state) {
|
||||
action = Action.Push;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
index += 1;
|
||||
entries.splice(index, entries.length, nextLocation);
|
||||
if (v5Compat && listener) {
|
||||
listener({ action, location: nextLocation, delta: 1 });
|
||||
}
|
||||
},
|
||||
replace(to, state) {
|
||||
action = Action.Replace;
|
||||
let nextLocation = createMemoryLocation(to, state);
|
||||
entries[index] = nextLocation;
|
||||
if (v5Compat && listener) {
|
||||
listener({ action, location: nextLocation, delta: 0 });
|
||||
}
|
||||
},
|
||||
go(delta) {
|
||||
action = Action.Pop;
|
||||
let nextIndex = clampIndex(index + delta);
|
||||
let nextLocation = entries[nextIndex];
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({ action, location: nextLocation, delta });
|
||||
}
|
||||
},
|
||||
listen(fn: Listener) {
|
||||
listener = fn;
|
||||
return () => {
|
||||
listener = null;
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
return history;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Browser History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A browser history stores the current location in regular URLs in a web
|
||||
* browser environment. This is the standard for most web apps and provides the
|
||||
* cleanest URLs the browser's address bar.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory
|
||||
*/
|
||||
export interface BrowserHistory extends UrlHistory {}
|
||||
|
||||
export type BrowserHistoryOptions = UrlHistoryOptions;
|
||||
|
||||
/**
|
||||
* Browser history stores the location in regular URLs. This is the standard for
|
||||
* most web apps, but it requires some configuration on the server to ensure you
|
||||
* serve the same app at multiple URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
||||
*/
|
||||
export function createBrowserHistory(
|
||||
options: BrowserHistoryOptions = {}
|
||||
): BrowserHistory {
|
||||
function createBrowserLocation(
|
||||
window: Window,
|
||||
globalHistory: Window["history"]
|
||||
) {
|
||||
let { pathname, search, hash } = window.location;
|
||||
return createLocation(
|
||||
"",
|
||||
{ pathname, search, hash },
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
(globalHistory.state && globalHistory.state.usr) || null,
|
||||
(globalHistory.state && globalHistory.state.key) || "default"
|
||||
);
|
||||
}
|
||||
|
||||
function createBrowserHref(window: Window, to: To) {
|
||||
return typeof to === "string" ? to : createPath(to);
|
||||
}
|
||||
|
||||
return getUrlBasedHistory(
|
||||
createBrowserLocation,
|
||||
createBrowserHref,
|
||||
null,
|
||||
options
|
||||
);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Hash History
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A hash history stores the current location in the fragment identifier portion
|
||||
* of the URL in a web browser environment.
|
||||
*
|
||||
* This is ideal for apps that do not control the server for some reason
|
||||
* (because the fragment identifier is never sent to the server), including some
|
||||
* shared hosting environments that do not provide fine-grained controls over
|
||||
* which pages are served at which URLs.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory
|
||||
*/
|
||||
export interface HashHistory extends UrlHistory {}
|
||||
|
||||
export type HashHistoryOptions = UrlHistoryOptions;
|
||||
|
||||
/**
|
||||
* Hash history stores the location in window.location.hash. This makes it ideal
|
||||
* for situations where you don't want to send the location to the server for
|
||||
* some reason, either because you do cannot configure it or the URL space is
|
||||
* reserved for something else.
|
||||
*
|
||||
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
||||
*/
|
||||
export function createHashHistory(
|
||||
options: HashHistoryOptions = {}
|
||||
): HashHistory {
|
||||
function createHashLocation(
|
||||
window: Window,
|
||||
globalHistory: Window["history"]
|
||||
) {
|
||||
let {
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = "",
|
||||
} = parsePath(window.location.hash.substr(1));
|
||||
|
||||
// Hash URL should always have a leading / just like window.location.pathname
|
||||
// does, so if an app ends up at a route like /#something then we add a
|
||||
// leading slash so all of our path-matching behaves the same as if it would
|
||||
// in a browser router. This is particularly important when there exists a
|
||||
// root splat route (<Route path="*">) since that matches internally against
|
||||
// "/*" and we'd expect /#something to 404 in a hash router app.
|
||||
if (!pathname.startsWith("/") && !pathname.startsWith(".")) {
|
||||
pathname = "/" + pathname;
|
||||
}
|
||||
|
||||
return createLocation(
|
||||
"",
|
||||
{ pathname, search, hash },
|
||||
// state defaults to `null` because `window.history.state` does
|
||||
(globalHistory.state && globalHistory.state.usr) || null,
|
||||
(globalHistory.state && globalHistory.state.key) || "default"
|
||||
);
|
||||
}
|
||||
|
||||
function createHashHref(window: Window, to: To) {
|
||||
let base = window.document.querySelector("base");
|
||||
let href = "";
|
||||
|
||||
if (base && base.getAttribute("href")) {
|
||||
let url = window.location.href;
|
||||
let hashIndex = url.indexOf("#");
|
||||
href = hashIndex === -1 ? url : url.slice(0, hashIndex);
|
||||
}
|
||||
|
||||
return href + "#" + (typeof to === "string" ? to : createPath(to));
|
||||
}
|
||||
|
||||
function validateHashLocation(location: Location, to: To) {
|
||||
warning(
|
||||
location.pathname.charAt(0) === "/",
|
||||
`relative pathnames are not supported in hash history.push(${JSON.stringify(
|
||||
to
|
||||
)})`
|
||||
);
|
||||
}
|
||||
|
||||
return getUrlBasedHistory(
|
||||
createHashLocation,
|
||||
createHashHref,
|
||||
validateHashLocation,
|
||||
options
|
||||
);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region UTILS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export function invariant(value: boolean, message?: string): asserts value;
|
||||
export function invariant<T>(
|
||||
value: T | null | undefined,
|
||||
message?: string
|
||||
): asserts value is T;
|
||||
export function invariant(value: any, message?: string) {
|
||||
if (value === false || value === null || typeof value === "undefined") {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
|
||||
export function warning(cond: any, message: string) {
|
||||
if (!cond) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== "undefined") console.warn(message);
|
||||
|
||||
try {
|
||||
// Welcome to debugging history!
|
||||
//
|
||||
// This error is thrown as a convenience, so you can more easily
|
||||
// find the source for a warning that appears in the console by
|
||||
// enabling "pause on exceptions" in your JavaScript debugger.
|
||||
throw new Error(message);
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
function createKey() {
|
||||
return Math.random().toString(36).substr(2, 8);
|
||||
}
|
||||
|
||||
/**
|
||||
* For browser-based histories, we combine the state and key into an object
|
||||
*/
|
||||
function getHistoryState(location: Location, index: number): HistoryState {
|
||||
return {
|
||||
usr: location.state,
|
||||
key: location.key,
|
||||
idx: index,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Location object with a unique key from the given Path
|
||||
*/
|
||||
export function createLocation(
|
||||
current: string | Location,
|
||||
to: To,
|
||||
state: any = null,
|
||||
key?: string
|
||||
): Readonly<Location> {
|
||||
let location: Readonly<Location> = {
|
||||
pathname: typeof current === "string" ? current : current.pathname,
|
||||
search: "",
|
||||
hash: "",
|
||||
...(typeof to === "string" ? parsePath(to) : to),
|
||||
state,
|
||||
// TODO: This could be cleaned up. push/replace should probably just take
|
||||
// full Locations now and avoid the need to run through this flow at all
|
||||
// But that's a pretty big refactor to the current test suite so going to
|
||||
// keep as is for the time being and just let any incoming keys take precedence
|
||||
key: (to && (to as Location).key) || key || createKey(),
|
||||
};
|
||||
return location;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a string URL path from the given pathname, search, and hash components.
|
||||
*/
|
||||
export function createPath({
|
||||
pathname = "/",
|
||||
search = "",
|
||||
hash = "",
|
||||
}: Partial<Path>) {
|
||||
if (search && search !== "?")
|
||||
pathname += search.charAt(0) === "?" ? search : "?" + search;
|
||||
if (hash && hash !== "#")
|
||||
pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
|
||||
return pathname;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a string URL path into its separate pathname, search, and hash components.
|
||||
*/
|
||||
export function parsePath(path: string): Partial<Path> {
|
||||
let parsedPath: Partial<Path> = {};
|
||||
|
||||
if (path) {
|
||||
let hashIndex = path.indexOf("#");
|
||||
if (hashIndex >= 0) {
|
||||
parsedPath.hash = path.substr(hashIndex);
|
||||
path = path.substr(0, hashIndex);
|
||||
}
|
||||
|
||||
let searchIndex = path.indexOf("?");
|
||||
if (searchIndex >= 0) {
|
||||
parsedPath.search = path.substr(searchIndex);
|
||||
path = path.substr(0, searchIndex);
|
||||
}
|
||||
|
||||
if (path) {
|
||||
parsedPath.pathname = path;
|
||||
}
|
||||
}
|
||||
|
||||
return parsedPath;
|
||||
}
|
||||
|
||||
export interface UrlHistory extends History {}
|
||||
|
||||
export type UrlHistoryOptions = {
|
||||
window?: Window;
|
||||
v5Compat?: boolean;
|
||||
};
|
||||
|
||||
function getUrlBasedHistory(
|
||||
getLocation: (window: Window, globalHistory: Window["history"]) => Location,
|
||||
createHref: (window: Window, to: To) => string,
|
||||
validateLocation: ((location: Location, to: To) => void) | null,
|
||||
options: UrlHistoryOptions = {}
|
||||
): UrlHistory {
|
||||
let { window = document.defaultView!, v5Compat = false } = options;
|
||||
let globalHistory = window.history;
|
||||
let action = Action.Pop;
|
||||
let listener: Listener | null = null;
|
||||
|
||||
let index = getIndex()!;
|
||||
// Index should only be null when we initialize. If not, it's because the
|
||||
// user called history.pushState or history.replaceState directly, in which
|
||||
// case we should log a warning as it will result in bugs.
|
||||
if (index == null) {
|
||||
index = 0;
|
||||
globalHistory.replaceState({ ...globalHistory.state, idx: index }, "");
|
||||
}
|
||||
|
||||
function getIndex(): number {
|
||||
let state = globalHistory.state || { idx: null };
|
||||
return state.idx;
|
||||
}
|
||||
|
||||
function handlePop() {
|
||||
action = Action.Pop;
|
||||
let nextIndex = getIndex();
|
||||
let delta = nextIndex == null ? null : nextIndex - index;
|
||||
index = nextIndex;
|
||||
if (listener) {
|
||||
listener({ action, location: history.location, delta });
|
||||
}
|
||||
}
|
||||
|
||||
function push(to: To, state?: any) {
|
||||
action = Action.Push;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
|
||||
index = getIndex() + 1;
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
|
||||
// try...catch because iOS limits us to 100 pushState calls :/
|
||||
try {
|
||||
globalHistory.pushState(historyState, "", url);
|
||||
} catch (error) {
|
||||
// If the exception is because `state` can't be serialized, let that throw
|
||||
// outwards just like a replace call would so the dev knows the cause
|
||||
// https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps
|
||||
// https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal
|
||||
if (error instanceof DOMException && error.name === "DataCloneError") {
|
||||
throw error;
|
||||
}
|
||||
// They are going to lose state here, but there is no real
|
||||
// way to warn them about it since the page will refresh...
|
||||
window.location.assign(url);
|
||||
}
|
||||
|
||||
if (v5Compat && listener) {
|
||||
listener({ action, location: history.location, delta: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
function replace(to: To, state?: any) {
|
||||
action = Action.Replace;
|
||||
let location = createLocation(history.location, to, state);
|
||||
if (validateLocation) validateLocation(location, to);
|
||||
|
||||
index = getIndex();
|
||||
let historyState = getHistoryState(location, index);
|
||||
let url = history.createHref(location);
|
||||
globalHistory.replaceState(historyState, "", url);
|
||||
|
||||
if (v5Compat && listener) {
|
||||
listener({ action, location: history.location, delta: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
function createURL(to: To): URL {
|
||||
// window.location.origin is "null" (the literal string value) in Firefox
|
||||
// under certain conditions, notably when serving from a local HTML file
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
|
||||
let base =
|
||||
window.location.origin !== "null"
|
||||
? window.location.origin
|
||||
: window.location.href;
|
||||
|
||||
let href = typeof to === "string" ? to : createPath(to);
|
||||
// Treating this as a full URL will strip any trailing spaces so we need to
|
||||
// pre-encode them since they might be part of a matching splat param from
|
||||
// an ancestor route
|
||||
href = href.replace(/ $/, "%20");
|
||||
invariant(
|
||||
base,
|
||||
`No window.location.(origin|href) available to create URL for href: ${href}`
|
||||
);
|
||||
return new URL(href, base);
|
||||
}
|
||||
|
||||
let history: History = {
|
||||
get action() {
|
||||
return action;
|
||||
},
|
||||
get location() {
|
||||
return getLocation(window, globalHistory);
|
||||
},
|
||||
listen(fn: Listener) {
|
||||
if (listener) {
|
||||
throw new Error("A history only accepts one active listener");
|
||||
}
|
||||
window.addEventListener(PopStateEventType, handlePop);
|
||||
listener = fn;
|
||||
|
||||
return () => {
|
||||
window.removeEventListener(PopStateEventType, handlePop);
|
||||
listener = null;
|
||||
};
|
||||
},
|
||||
createHref(to) {
|
||||
return createHref(window, to);
|
||||
},
|
||||
createURL,
|
||||
encodeLocation(to) {
|
||||
// Encode a Location the same way window.location would
|
||||
let url = createURL(to);
|
||||
return {
|
||||
pathname: url.pathname,
|
||||
search: url.search,
|
||||
hash: url.hash,
|
||||
};
|
||||
},
|
||||
push,
|
||||
replace,
|
||||
go(n) {
|
||||
return globalHistory.go(n);
|
||||
},
|
||||
};
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
//#endregion
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
export type {
|
||||
ActionFunction,
|
||||
ActionFunctionArgs,
|
||||
AgnosticDataIndexRouteObject,
|
||||
AgnosticDataNonIndexRouteObject,
|
||||
AgnosticDataRouteMatch,
|
||||
AgnosticDataRouteObject,
|
||||
AgnosticIndexRouteObject,
|
||||
AgnosticNonIndexRouteObject,
|
||||
AgnosticPatchRoutesOnNavigationFunction,
|
||||
AgnosticPatchRoutesOnNavigationFunctionArgs,
|
||||
AgnosticRouteMatch,
|
||||
AgnosticRouteObject,
|
||||
DataStrategyFunction,
|
||||
DataStrategyFunctionArgs,
|
||||
DataStrategyMatch,
|
||||
DataStrategyResult,
|
||||
ErrorResponse,
|
||||
FormEncType,
|
||||
FormMethod,
|
||||
HTMLFormMethod,
|
||||
JsonFunction,
|
||||
LazyRouteFunction,
|
||||
LoaderFunction,
|
||||
LoaderFunctionArgs,
|
||||
ParamParseKey,
|
||||
Params,
|
||||
PathMatch,
|
||||
PathParam,
|
||||
PathPattern,
|
||||
RedirectFunction,
|
||||
ShouldRevalidateFunction,
|
||||
ShouldRevalidateFunctionArgs,
|
||||
TrackedPromise,
|
||||
UIMatch,
|
||||
V7_FormMethod,
|
||||
DataWithResponseInit as UNSAFE_DataWithResponseInit,
|
||||
} from "./utils";
|
||||
|
||||
export {
|
||||
AbortedDeferredError,
|
||||
data,
|
||||
defer,
|
||||
generatePath,
|
||||
getToPathname,
|
||||
isRouteErrorResponse,
|
||||
joinPaths,
|
||||
json,
|
||||
matchPath,
|
||||
matchRoutes,
|
||||
normalizePathname,
|
||||
redirect,
|
||||
redirectDocument,
|
||||
replace,
|
||||
resolvePath,
|
||||
resolveTo,
|
||||
stripBasename,
|
||||
} from "./utils";
|
||||
|
||||
export type {
|
||||
BrowserHistory,
|
||||
BrowserHistoryOptions,
|
||||
HashHistory,
|
||||
HashHistoryOptions,
|
||||
History,
|
||||
InitialEntry,
|
||||
Location,
|
||||
MemoryHistory,
|
||||
MemoryHistoryOptions,
|
||||
Path,
|
||||
To,
|
||||
} from "./history";
|
||||
|
||||
export {
|
||||
Action,
|
||||
createBrowserHistory,
|
||||
createHashHistory,
|
||||
createMemoryHistory,
|
||||
createPath,
|
||||
parsePath,
|
||||
} from "./history";
|
||||
|
||||
export * from "./router";
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// DANGER! PLEASE READ ME!
|
||||
// We consider these exports an implementation detail and do not guarantee
|
||||
// against any breaking changes, regardless of the semver release. Use with
|
||||
// extreme caution and only if you understand the consequences. Godspeed.
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/** @internal */
|
||||
export type { RouteManifest as UNSAFE_RouteManifest } from "./utils";
|
||||
export {
|
||||
DeferredData as UNSAFE_DeferredData,
|
||||
ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
|
||||
convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
|
||||
convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
|
||||
decodePath as UNSAFE_decodePath,
|
||||
getResolveToMatches as UNSAFE_getResolveToMatches,
|
||||
} from "./utils";
|
||||
|
||||
export {
|
||||
invariant as UNSAFE_invariant,
|
||||
warning as UNSAFE_warning,
|
||||
} from "./history";
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@remix-run/router",
|
||||
"version": "1.23.3",
|
||||
"description": "Nested/Data-driven/Framework-agnostic Routing",
|
||||
"keywords": [
|
||||
"remix",
|
||||
"router",
|
||||
"location"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/remix-run/react-router",
|
||||
"directory": "packages/router"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Remix Software <hello@remix.run>",
|
||||
"sideEffects": false,
|
||||
"main": "./dist/router.cjs.js",
|
||||
"unpkg": "./dist/router.umd.min.js",
|
||||
"module": "./dist/router.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/",
|
||||
"*.ts",
|
||||
"CHANGELOG.md"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
+6032
@@ -0,0 +1,6032 @@
|
||||
import type { History, Location, Path, To } from "./history";
|
||||
import {
|
||||
Action as HistoryAction,
|
||||
createLocation,
|
||||
createPath,
|
||||
invariant,
|
||||
parsePath,
|
||||
warning,
|
||||
} from "./history";
|
||||
import type {
|
||||
AgnosticDataRouteMatch,
|
||||
AgnosticDataRouteObject,
|
||||
DataStrategyMatch,
|
||||
AgnosticRouteObject,
|
||||
DataResult,
|
||||
DataStrategyFunction,
|
||||
DataStrategyFunctionArgs,
|
||||
DeferredData,
|
||||
DeferredResult,
|
||||
DetectErrorBoundaryFunction,
|
||||
ErrorResult,
|
||||
FormEncType,
|
||||
FormMethod,
|
||||
HTMLFormMethod,
|
||||
DataStrategyResult,
|
||||
ImmutableRouteKey,
|
||||
MapRoutePropertiesFunction,
|
||||
MutationFormMethod,
|
||||
RedirectResult,
|
||||
RouteData,
|
||||
RouteManifest,
|
||||
ShouldRevalidateFunctionArgs,
|
||||
Submission,
|
||||
SuccessResult,
|
||||
UIMatch,
|
||||
V7_FormMethod,
|
||||
V7_MutationFormMethod,
|
||||
AgnosticPatchRoutesOnNavigationFunction,
|
||||
DataWithResponseInit,
|
||||
} from "./utils";
|
||||
import {
|
||||
ErrorResponseImpl,
|
||||
ResultType,
|
||||
convertRouteMatchToUiMatch,
|
||||
convertRoutesToDataRoutes,
|
||||
getPathContributingMatches,
|
||||
getResolveToMatches,
|
||||
immutableRouteKeys,
|
||||
isRouteErrorResponse,
|
||||
joinPaths,
|
||||
matchRoutes,
|
||||
matchRoutesImpl,
|
||||
removeDoubleSlashes,
|
||||
resolveTo,
|
||||
stripBasename,
|
||||
} from "./utils";
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Types and Constants
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* A Router instance manages all navigation and data loading/mutations
|
||||
*/
|
||||
export interface Router {
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the basename for the router
|
||||
*/
|
||||
get basename(): RouterInit["basename"];
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the future config for the router
|
||||
*/
|
||||
get future(): FutureConfig;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the current state of the router
|
||||
*/
|
||||
get state(): RouterState;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the routes for this router instance
|
||||
*/
|
||||
get routes(): AgnosticDataRouteObject[];
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Return the window associated with the router
|
||||
*/
|
||||
get window(): RouterInit["window"];
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Initialize the router, including adding history listeners and kicking off
|
||||
* initial data fetches. Returns a function to cleanup listeners and abort
|
||||
* any in-progress loads
|
||||
*/
|
||||
initialize(): Router;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Subscribe to router.state updates
|
||||
*
|
||||
* @param fn function to call with the new state
|
||||
*/
|
||||
subscribe(fn: RouterSubscriber): () => void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Enable scroll restoration behavior in the router
|
||||
*
|
||||
* @param savedScrollPositions Object that will manage positions, in case
|
||||
* it's being restored from sessionStorage
|
||||
* @param getScrollPosition Function to get the active Y scroll position
|
||||
* @param getKey Function to get the key to use for restoration
|
||||
*/
|
||||
enableScrollRestoration(
|
||||
savedScrollPositions: Record<string, number>,
|
||||
getScrollPosition: GetScrollPositionFunction,
|
||||
getKey?: GetScrollRestorationKeyFunction
|
||||
): () => void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Navigate forward/backward in the history stack
|
||||
* @param to Delta to move in the history stack
|
||||
*/
|
||||
navigate(to: number): Promise<void>;
|
||||
|
||||
/**
|
||||
* Navigate to the given path
|
||||
* @param to Path to navigate to
|
||||
* @param opts Navigation options (method, submission, etc.)
|
||||
*/
|
||||
navigate(to: To | null, opts?: RouterNavigateOptions): Promise<void>;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Trigger a fetcher load/submission
|
||||
*
|
||||
* @param key Fetcher key
|
||||
* @param routeId Route that owns the fetcher
|
||||
* @param href href to fetch
|
||||
* @param opts Fetcher options, (method, submission, etc.)
|
||||
*/
|
||||
fetch(
|
||||
key: string,
|
||||
routeId: string,
|
||||
href: string | null,
|
||||
opts?: RouterFetchOptions
|
||||
): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Trigger a revalidation of all current route loaders and fetcher loads
|
||||
*/
|
||||
revalidate(): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Utility function to create an href for the given location
|
||||
* @param location
|
||||
*/
|
||||
createHref(location: Location | URL): string;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Utility function to URL encode a destination path according to the internal
|
||||
* history implementation
|
||||
* @param to
|
||||
*/
|
||||
encodeLocation(to: To): Path;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Get/create a fetcher for the given key
|
||||
* @param key
|
||||
*/
|
||||
getFetcher<TData = any>(key: string): Fetcher<TData>;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Delete the fetcher for a given key
|
||||
* @param key
|
||||
*/
|
||||
deleteFetcher(key: string): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Cleanup listeners and abort any in-progress loads
|
||||
*/
|
||||
dispose(): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Get a navigation blocker
|
||||
* @param key The identifier for the blocker
|
||||
* @param fn The blocker function implementation
|
||||
*/
|
||||
getBlocker(key: string, fn: BlockerFunction): Blocker;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Delete a navigation blocker
|
||||
* @param key The identifier for the blocker
|
||||
*/
|
||||
deleteBlocker(key: string): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE DO NOT USE
|
||||
*
|
||||
* Patch additional children routes into an existing parent route
|
||||
* @param routeId The parent route id or a callback function accepting `patch`
|
||||
* to perform batch patching
|
||||
* @param children The additional children routes
|
||||
*/
|
||||
patchRoutes(routeId: string | null, children: AgnosticRouteObject[]): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* HMR needs to pass in-flight route updates to React Router
|
||||
* TODO: Replace this with granular route update APIs (addRoute, updateRoute, deleteRoute)
|
||||
*/
|
||||
_internalSetRoutes(routes: AgnosticRouteObject[]): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Internal fetch AbortControllers accessed by unit tests
|
||||
*/
|
||||
_internalFetchControllers: Map<string, AbortController>;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* PRIVATE - DO NOT USE
|
||||
*
|
||||
* Internal pending DeferredData instances accessed by unit tests
|
||||
*/
|
||||
_internalActiveDeferreds: Map<string, DeferredData>;
|
||||
}
|
||||
|
||||
/**
|
||||
* State maintained internally by the router. During a navigation, all states
|
||||
* reflect the the "old" location unless otherwise noted.
|
||||
*/
|
||||
export interface RouterState {
|
||||
/**
|
||||
* The action of the most recent navigation
|
||||
*/
|
||||
historyAction: HistoryAction;
|
||||
|
||||
/**
|
||||
* The current location reflected by the router
|
||||
*/
|
||||
location: Location;
|
||||
|
||||
/**
|
||||
* The current set of route matches
|
||||
*/
|
||||
matches: AgnosticDataRouteMatch[];
|
||||
|
||||
/**
|
||||
* Tracks whether we've completed our initial data load
|
||||
*/
|
||||
initialized: boolean;
|
||||
|
||||
/**
|
||||
* Current scroll position we should start at for a new view
|
||||
* - number -> scroll position to restore to
|
||||
* - false -> do not restore scroll at all (used during submissions)
|
||||
* - null -> don't have a saved position, scroll to hash or top of page
|
||||
*/
|
||||
restoreScrollPosition: number | false | null;
|
||||
|
||||
/**
|
||||
* Indicate whether this navigation should skip resetting the scroll position
|
||||
* if we are unable to restore the scroll position
|
||||
*/
|
||||
preventScrollReset: boolean;
|
||||
|
||||
/**
|
||||
* Tracks the state of the current navigation
|
||||
*/
|
||||
navigation: Navigation;
|
||||
|
||||
/**
|
||||
* Tracks any in-progress revalidations
|
||||
*/
|
||||
revalidation: RevalidationState;
|
||||
|
||||
/**
|
||||
* Data from the loaders for the current matches
|
||||
*/
|
||||
loaderData: RouteData;
|
||||
|
||||
/**
|
||||
* Data from the action for the current matches
|
||||
*/
|
||||
actionData: RouteData | null;
|
||||
|
||||
/**
|
||||
* Errors caught from loaders for the current matches
|
||||
*/
|
||||
errors: RouteData | null;
|
||||
|
||||
/**
|
||||
* Map of current fetchers
|
||||
*/
|
||||
fetchers: Map<string, Fetcher>;
|
||||
|
||||
/**
|
||||
* Map of current blockers
|
||||
*/
|
||||
blockers: Map<string, Blocker>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data that can be passed into hydrate a Router from SSR
|
||||
*/
|
||||
export type HydrationState = Partial<
|
||||
Pick<RouterState, "loaderData" | "actionData" | "errors">
|
||||
>;
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
export interface FutureConfig {
|
||||
v7_fetcherPersist: boolean;
|
||||
v7_normalizeFormMethod: boolean;
|
||||
v7_partialHydration: boolean;
|
||||
v7_prependBasename: boolean;
|
||||
v7_relativeSplatPath: boolean;
|
||||
v7_skipActionErrorRevalidation: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization options for createRouter
|
||||
*/
|
||||
export interface RouterInit {
|
||||
routes: AgnosticRouteObject[];
|
||||
history: History;
|
||||
basename?: string;
|
||||
/**
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
detectErrorBoundary?: DetectErrorBoundaryFunction;
|
||||
mapRouteProperties?: MapRoutePropertiesFunction;
|
||||
future?: Partial<FutureConfig>;
|
||||
hydrationData?: HydrationState;
|
||||
window?: Window;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
patchRoutesOnNavigation?: AgnosticPatchRoutesOnNavigationFunction;
|
||||
}
|
||||
|
||||
/**
|
||||
* State returned from a server-side query() call
|
||||
*/
|
||||
export interface StaticHandlerContext {
|
||||
basename: Router["basename"];
|
||||
location: RouterState["location"];
|
||||
matches: RouterState["matches"];
|
||||
loaderData: RouterState["loaderData"];
|
||||
actionData: RouterState["actionData"];
|
||||
errors: RouterState["errors"];
|
||||
statusCode: number;
|
||||
loaderHeaders: Record<string, Headers>;
|
||||
actionHeaders: Record<string, Headers>;
|
||||
activeDeferreds: Record<string, DeferredData> | null;
|
||||
_deepestRenderedBoundaryId?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* A StaticHandler instance manages a singular SSR navigation/fetch event
|
||||
*/
|
||||
export interface StaticHandler {
|
||||
dataRoutes: AgnosticDataRouteObject[];
|
||||
query(
|
||||
request: Request,
|
||||
opts?: {
|
||||
requestContext?: unknown;
|
||||
skipLoaderErrorBubbling?: boolean;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
}
|
||||
): Promise<StaticHandlerContext | Response>;
|
||||
queryRoute(
|
||||
request: Request,
|
||||
opts?: {
|
||||
routeId?: string;
|
||||
requestContext?: unknown;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
}
|
||||
): Promise<any>;
|
||||
}
|
||||
|
||||
type ViewTransitionOpts = {
|
||||
currentLocation: Location;
|
||||
nextLocation: Location;
|
||||
};
|
||||
|
||||
/**
|
||||
* Subscriber function signature for changes to router state
|
||||
*/
|
||||
export interface RouterSubscriber {
|
||||
(
|
||||
state: RouterState,
|
||||
opts: {
|
||||
deletedFetchers: string[];
|
||||
viewTransitionOpts?: ViewTransitionOpts;
|
||||
flushSync: boolean;
|
||||
}
|
||||
): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function signature for determining the key to be used in scroll restoration
|
||||
* for a given location
|
||||
*/
|
||||
export interface GetScrollRestorationKeyFunction {
|
||||
(location: Location, matches: UIMatch[]): string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function signature for determining the current scroll position
|
||||
*/
|
||||
export interface GetScrollPositionFunction {
|
||||
(): number;
|
||||
}
|
||||
|
||||
export type RelativeRoutingType = "route" | "path";
|
||||
|
||||
// Allowed for any navigation or fetch
|
||||
type BaseNavigateOrFetchOptions = {
|
||||
preventScrollReset?: boolean;
|
||||
relative?: RelativeRoutingType;
|
||||
flushSync?: boolean;
|
||||
};
|
||||
|
||||
// Only allowed for navigations
|
||||
type BaseNavigateOptions = BaseNavigateOrFetchOptions & {
|
||||
replace?: boolean;
|
||||
state?: any;
|
||||
fromRouteId?: string;
|
||||
viewTransition?: boolean;
|
||||
};
|
||||
|
||||
// Only allowed for submission navigations
|
||||
type BaseSubmissionOptions = {
|
||||
formMethod?: HTMLFormMethod;
|
||||
formEncType?: FormEncType;
|
||||
} & (
|
||||
| { formData: FormData; body?: undefined }
|
||||
| { formData?: undefined; body: any }
|
||||
);
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a normal (non-submission) navigation
|
||||
*/
|
||||
type LinkNavigateOptions = BaseNavigateOptions;
|
||||
|
||||
/**
|
||||
* Options for a navigate() call for a submission navigation
|
||||
*/
|
||||
type SubmissionNavigateOptions = BaseNavigateOptions & BaseSubmissionOptions;
|
||||
|
||||
/**
|
||||
* Options to pass to navigate() for a navigation
|
||||
*/
|
||||
export type RouterNavigateOptions =
|
||||
| LinkNavigateOptions
|
||||
| SubmissionNavigateOptions;
|
||||
|
||||
/**
|
||||
* Options for a fetch() load
|
||||
*/
|
||||
type LoadFetchOptions = BaseNavigateOrFetchOptions;
|
||||
|
||||
/**
|
||||
* Options for a fetch() submission
|
||||
*/
|
||||
type SubmitFetchOptions = BaseNavigateOrFetchOptions & BaseSubmissionOptions;
|
||||
|
||||
/**
|
||||
* Options to pass to fetch()
|
||||
*/
|
||||
export type RouterFetchOptions = LoadFetchOptions | SubmitFetchOptions;
|
||||
|
||||
/**
|
||||
* Potential states for state.navigation
|
||||
*/
|
||||
export type NavigationStates = {
|
||||
Idle: {
|
||||
state: "idle";
|
||||
location: undefined;
|
||||
formMethod: undefined;
|
||||
formAction: undefined;
|
||||
formEncType: undefined;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
text: undefined;
|
||||
};
|
||||
Loading: {
|
||||
state: "loading";
|
||||
location: Location;
|
||||
formMethod: Submission["formMethod"] | undefined;
|
||||
formAction: Submission["formAction"] | undefined;
|
||||
formEncType: Submission["formEncType"] | undefined;
|
||||
formData: Submission["formData"] | undefined;
|
||||
json: Submission["json"] | undefined;
|
||||
text: Submission["text"] | undefined;
|
||||
};
|
||||
Submitting: {
|
||||
state: "submitting";
|
||||
location: Location;
|
||||
formMethod: Submission["formMethod"];
|
||||
formAction: Submission["formAction"];
|
||||
formEncType: Submission["formEncType"];
|
||||
formData: Submission["formData"];
|
||||
json: Submission["json"];
|
||||
text: Submission["text"];
|
||||
};
|
||||
};
|
||||
|
||||
export type Navigation = NavigationStates[keyof NavigationStates];
|
||||
|
||||
export type RevalidationState = "idle" | "loading";
|
||||
|
||||
/**
|
||||
* Potential states for fetchers
|
||||
*/
|
||||
type FetcherStates<TData = any> = {
|
||||
Idle: {
|
||||
state: "idle";
|
||||
formMethod: undefined;
|
||||
formAction: undefined;
|
||||
formEncType: undefined;
|
||||
text: undefined;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
data: TData | undefined;
|
||||
};
|
||||
Loading: {
|
||||
state: "loading";
|
||||
formMethod: Submission["formMethod"] | undefined;
|
||||
formAction: Submission["formAction"] | undefined;
|
||||
formEncType: Submission["formEncType"] | undefined;
|
||||
text: Submission["text"] | undefined;
|
||||
formData: Submission["formData"] | undefined;
|
||||
json: Submission["json"] | undefined;
|
||||
data: TData | undefined;
|
||||
};
|
||||
Submitting: {
|
||||
state: "submitting";
|
||||
formMethod: Submission["formMethod"];
|
||||
formAction: Submission["formAction"];
|
||||
formEncType: Submission["formEncType"];
|
||||
text: Submission["text"];
|
||||
formData: Submission["formData"];
|
||||
json: Submission["json"];
|
||||
data: TData | undefined;
|
||||
};
|
||||
};
|
||||
|
||||
export type Fetcher<TData = any> =
|
||||
FetcherStates<TData>[keyof FetcherStates<TData>];
|
||||
|
||||
interface BlockerBlocked {
|
||||
state: "blocked";
|
||||
reset(): void;
|
||||
proceed(): void;
|
||||
location: Location;
|
||||
}
|
||||
|
||||
interface BlockerUnblocked {
|
||||
state: "unblocked";
|
||||
reset: undefined;
|
||||
proceed: undefined;
|
||||
location: undefined;
|
||||
}
|
||||
|
||||
interface BlockerProceeding {
|
||||
state: "proceeding";
|
||||
reset: undefined;
|
||||
proceed: undefined;
|
||||
location: Location;
|
||||
}
|
||||
|
||||
export type Blocker = BlockerUnblocked | BlockerBlocked | BlockerProceeding;
|
||||
|
||||
export type BlockerFunction = (args: {
|
||||
currentLocation: Location;
|
||||
nextLocation: Location;
|
||||
historyAction: HistoryAction;
|
||||
}) => boolean;
|
||||
|
||||
interface ShortCircuitable {
|
||||
/**
|
||||
* startNavigation does not need to complete the navigation because we
|
||||
* redirected or got interrupted
|
||||
*/
|
||||
shortCircuited?: boolean;
|
||||
}
|
||||
|
||||
type PendingActionResult = [string, SuccessResult | ErrorResult];
|
||||
|
||||
interface HandleActionResult extends ShortCircuitable {
|
||||
/**
|
||||
* Route matches which may have been updated from fog of war discovery
|
||||
*/
|
||||
matches?: RouterState["matches"];
|
||||
/**
|
||||
* Tuple for the returned or thrown value from the current action. The routeId
|
||||
* is the action route for success and the bubbled boundary route for errors.
|
||||
*/
|
||||
pendingActionResult?: PendingActionResult;
|
||||
}
|
||||
|
||||
interface HandleLoadersResult extends ShortCircuitable {
|
||||
/**
|
||||
* Route matches which may have been updated from fog of war discovery
|
||||
*/
|
||||
matches?: RouterState["matches"];
|
||||
/**
|
||||
* loaderData returned from the current set of loaders
|
||||
*/
|
||||
loaderData?: RouterState["loaderData"];
|
||||
/**
|
||||
* errors thrown from the current set of loaders
|
||||
*/
|
||||
errors?: RouterState["errors"];
|
||||
}
|
||||
|
||||
/**
|
||||
* Cached info for active fetcher.load() instances so they can participate
|
||||
* in revalidation
|
||||
*/
|
||||
interface FetchLoadMatch {
|
||||
routeId: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Identified fetcher.load() calls that need to be revalidated
|
||||
*/
|
||||
interface RevalidatingFetcher extends FetchLoadMatch {
|
||||
key: string;
|
||||
match: AgnosticDataRouteMatch | null;
|
||||
matches: AgnosticDataRouteMatch[] | null;
|
||||
controller: AbortController | null;
|
||||
}
|
||||
|
||||
const validMutationMethodsArr: MutationFormMethod[] = [
|
||||
"post",
|
||||
"put",
|
||||
"patch",
|
||||
"delete",
|
||||
];
|
||||
const validMutationMethods = new Set<MutationFormMethod>(
|
||||
validMutationMethodsArr
|
||||
);
|
||||
|
||||
const validRequestMethodsArr: FormMethod[] = [
|
||||
"get",
|
||||
...validMutationMethodsArr,
|
||||
];
|
||||
const validRequestMethods = new Set<FormMethod>(validRequestMethodsArr);
|
||||
|
||||
const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
|
||||
const redirectPreserveMethodStatusCodes = new Set([307, 308]);
|
||||
|
||||
export const IDLE_NAVIGATION: NavigationStates["Idle"] = {
|
||||
state: "idle",
|
||||
location: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
};
|
||||
|
||||
export const IDLE_FETCHER: FetcherStates["Idle"] = {
|
||||
state: "idle",
|
||||
data: undefined,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
};
|
||||
|
||||
export const IDLE_BLOCKER: BlockerUnblocked = {
|
||||
state: "unblocked",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: undefined,
|
||||
};
|
||||
|
||||
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
|
||||
const defaultMapRouteProperties: MapRoutePropertiesFunction = (route) => ({
|
||||
hasErrorBoundary: Boolean(route.hasErrorBoundary),
|
||||
});
|
||||
|
||||
const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createRouter
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Create a router and listen to history POP navigations
|
||||
*/
|
||||
export function createRouter(init: RouterInit): Router {
|
||||
const routerWindow = init.window
|
||||
? init.window
|
||||
: typeof window !== "undefined"
|
||||
? window
|
||||
: undefined;
|
||||
const isBrowser =
|
||||
typeof routerWindow !== "undefined" &&
|
||||
typeof routerWindow.document !== "undefined" &&
|
||||
typeof routerWindow.document.createElement !== "undefined";
|
||||
const isServer = !isBrowser;
|
||||
|
||||
invariant(
|
||||
init.routes.length > 0,
|
||||
"You must provide a non-empty routes array to createRouter"
|
||||
);
|
||||
|
||||
let mapRouteProperties: MapRoutePropertiesFunction;
|
||||
if (init.mapRouteProperties) {
|
||||
mapRouteProperties = init.mapRouteProperties;
|
||||
} else if (init.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = init.detectErrorBoundary;
|
||||
mapRouteProperties = (route) => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route),
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
|
||||
// Routes keyed by ID
|
||||
let manifest: RouteManifest = {};
|
||||
// Routes in tree format for matching
|
||||
let dataRoutes = convertRoutesToDataRoutes(
|
||||
init.routes,
|
||||
mapRouteProperties,
|
||||
undefined,
|
||||
manifest
|
||||
);
|
||||
let inFlightDataRoutes: AgnosticDataRouteObject[] | undefined;
|
||||
let basename = init.basename || "/";
|
||||
let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
|
||||
let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
|
||||
|
||||
// Config driven behavior flags
|
||||
let future: FutureConfig = {
|
||||
v7_fetcherPersist: false,
|
||||
v7_normalizeFormMethod: false,
|
||||
v7_partialHydration: false,
|
||||
v7_prependBasename: false,
|
||||
v7_relativeSplatPath: false,
|
||||
v7_skipActionErrorRevalidation: false,
|
||||
...init.future,
|
||||
};
|
||||
// Cleanup function for history
|
||||
let unlistenHistory: (() => void) | null = null;
|
||||
// Externally-provided functions to call on all state changes
|
||||
let subscribers = new Set<RouterSubscriber>();
|
||||
// Externally-provided object to hold scroll restoration locations during routing
|
||||
let savedScrollPositions: Record<string, number> | null = null;
|
||||
// Externally-provided function to get scroll restoration keys
|
||||
let getScrollRestorationKey: GetScrollRestorationKeyFunction | null = null;
|
||||
// Externally-provided function to get current scroll position
|
||||
let getScrollPosition: GetScrollPositionFunction | null = null;
|
||||
// One-time flag to control the initial hydration scroll restoration. Because
|
||||
// we don't get the saved positions from <ScrollRestoration /> until _after_
|
||||
// the initial render, we need to manually trigger a separate updateState to
|
||||
// send along the restoreScrollPosition
|
||||
// Set to true if we have `hydrationData` since we assume we were SSR'd and that
|
||||
// SSR did the initial scroll restoration.
|
||||
let initialScrollRestored = init.hydrationData != null;
|
||||
|
||||
let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
|
||||
let initialMatchesIsFOW = false;
|
||||
let initialErrors: RouteData | null = null;
|
||||
|
||||
if (initialMatches == null && !patchRoutesOnNavigationImpl) {
|
||||
// If we do not match a user-provided-route, fall back to the root
|
||||
// to allow the error boundary to take over
|
||||
let error = getInternalRouterError(404, {
|
||||
pathname: init.history.location.pathname,
|
||||
});
|
||||
let { matches, route } = getShortCircuitMatches(dataRoutes);
|
||||
initialMatches = matches;
|
||||
initialErrors = { [route.id]: error };
|
||||
}
|
||||
|
||||
// In SPA apps, if the user provided a patchRoutesOnNavigation implementation and
|
||||
// our initial match is a splat route, clear them out so we run through lazy
|
||||
// discovery on hydration in case there's a more accurate lazy route match.
|
||||
// In SSR apps (with `hydrationData`), we expect that the server will send
|
||||
// up the proper matched routes so we don't want to run lazy discovery on
|
||||
// initial hydration and want to hydrate into the splat route.
|
||||
if (initialMatches && !init.hydrationData) {
|
||||
let fogOfWar = checkFogOfWar(
|
||||
initialMatches,
|
||||
dataRoutes,
|
||||
init.history.location.pathname
|
||||
);
|
||||
if (fogOfWar.active) {
|
||||
initialMatches = null;
|
||||
}
|
||||
}
|
||||
|
||||
let initialized: boolean;
|
||||
if (!initialMatches) {
|
||||
initialized = false;
|
||||
initialMatches = [];
|
||||
|
||||
// If partial hydration and fog of war is enabled, we will be running
|
||||
// `patchRoutesOnNavigation` during hydration so include any partial matches as
|
||||
// the initial matches so we can properly render `HydrateFallback`'s
|
||||
if (future.v7_partialHydration) {
|
||||
let fogOfWar = checkFogOfWar(
|
||||
null,
|
||||
dataRoutes,
|
||||
init.history.location.pathname
|
||||
);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
initialMatchesIsFOW = true;
|
||||
initialMatches = fogOfWar.matches;
|
||||
}
|
||||
}
|
||||
} else if (initialMatches.some((m) => m.route.lazy)) {
|
||||
// All initialMatches need to be loaded before we're ready. If we have lazy
|
||||
// functions around still then we'll need to run them in initialize()
|
||||
initialized = false;
|
||||
} else if (!initialMatches.some((m) => m.route.loader)) {
|
||||
// If we've got no loaders to run, then we're good to go
|
||||
initialized = true;
|
||||
} else if (future.v7_partialHydration) {
|
||||
// If partial hydration is enabled, we're initialized so long as we were
|
||||
// provided with hydrationData for every route with a loader, and no loaders
|
||||
// were marked for explicit hydration
|
||||
let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
|
||||
let errors = init.hydrationData ? init.hydrationData.errors : null;
|
||||
// If errors exist, don't consider routes below the boundary
|
||||
if (errors) {
|
||||
let idx = initialMatches.findIndex(
|
||||
(m) => errors![m.route.id] !== undefined
|
||||
);
|
||||
initialized = initialMatches
|
||||
.slice(0, idx + 1)
|
||||
.every((m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
|
||||
} else {
|
||||
initialized = initialMatches.every(
|
||||
(m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Without partial hydration - we're initialized if we were provided any
|
||||
// hydrationData - which is expected to be complete
|
||||
initialized = init.hydrationData != null;
|
||||
}
|
||||
|
||||
let router: Router;
|
||||
let state: RouterState = {
|
||||
historyAction: init.history.action,
|
||||
location: init.history.location,
|
||||
matches: initialMatches,
|
||||
initialized,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
// Don't restore on initial updateState() if we were SSR'd
|
||||
restoreScrollPosition: init.hydrationData != null ? false : null,
|
||||
preventScrollReset: false,
|
||||
revalidation: "idle",
|
||||
loaderData: (init.hydrationData && init.hydrationData.loaderData) || {},
|
||||
actionData: (init.hydrationData && init.hydrationData.actionData) || null,
|
||||
errors: (init.hydrationData && init.hydrationData.errors) || initialErrors,
|
||||
fetchers: new Map(),
|
||||
blockers: new Map(),
|
||||
};
|
||||
|
||||
// -- Stateful internal variables to manage navigations --
|
||||
// Current navigation in progress (to be committed in completeNavigation)
|
||||
let pendingAction: HistoryAction = HistoryAction.Pop;
|
||||
|
||||
// Should the current navigation prevent the scroll reset if scroll cannot
|
||||
// be restored?
|
||||
let pendingPreventScrollReset = false;
|
||||
|
||||
// AbortController for the active navigation
|
||||
let pendingNavigationController: AbortController | null;
|
||||
|
||||
// Should the current navigation enable document.startViewTransition?
|
||||
let pendingViewTransitionEnabled = false;
|
||||
|
||||
// Store applied view transitions so we can apply them on POP
|
||||
let appliedViewTransitions: Map<string, Set<string>> = new Map<
|
||||
string,
|
||||
Set<string>
|
||||
>();
|
||||
|
||||
// Cleanup function for persisting applied transitions to sessionStorage
|
||||
let removePageHideEventListener: (() => void) | null = null;
|
||||
|
||||
// We use this to avoid touching history in completeNavigation if a
|
||||
// revalidation is entirely uninterrupted
|
||||
let isUninterruptedRevalidation = false;
|
||||
|
||||
// Use this internal flag to force revalidation of all loaders:
|
||||
// - submissions (completed or interrupted)
|
||||
// - useRevalidator()
|
||||
// - X-Remix-Revalidate (from redirect)
|
||||
let isRevalidationRequired = false;
|
||||
|
||||
// Use this internal array to capture routes that require revalidation due
|
||||
// to a cancelled deferred on action submission
|
||||
let cancelledDeferredRoutes: string[] = [];
|
||||
|
||||
// Use this internal array to capture fetcher loads that were cancelled by an
|
||||
// action navigation and require revalidation
|
||||
let cancelledFetcherLoads: Set<string> = new Set();
|
||||
|
||||
// AbortControllers for any in-flight fetchers
|
||||
let fetchControllers = new Map<string, AbortController>();
|
||||
|
||||
// Track loads based on the order in which they started
|
||||
let incrementingLoadId = 0;
|
||||
|
||||
// Track the outstanding pending navigation data load to be compared against
|
||||
// the globally incrementing load when a fetcher load lands after a completed
|
||||
// navigation
|
||||
let pendingNavigationLoadId = -1;
|
||||
|
||||
// Fetchers that triggered data reloads as a result of their actions
|
||||
let fetchReloadIds = new Map<string, number>();
|
||||
|
||||
// Fetchers that triggered redirect navigations
|
||||
let fetchRedirectIds = new Set<string>();
|
||||
|
||||
// Most recent href/match for fetcher.load calls for fetchers
|
||||
let fetchLoadMatches = new Map<string, FetchLoadMatch>();
|
||||
|
||||
// Ref-count mounted fetchers so we know when it's ok to clean them up
|
||||
let activeFetchers = new Map<string, number>();
|
||||
|
||||
// Fetchers that have requested a delete when using v7_fetcherPersist,
|
||||
// they'll be officially removed after they return to idle
|
||||
let deletedFetchers = new Set<string>();
|
||||
|
||||
// Store DeferredData instances for active route matches. When a
|
||||
// route loader returns defer() we stick one in here. Then, when a nested
|
||||
// promise resolves we update loaderData. If a new navigation starts we
|
||||
// cancel active deferreds for eliminated routes.
|
||||
let activeDeferreds = new Map<string, DeferredData>();
|
||||
|
||||
// Store blocker functions in a separate Map outside of router state since
|
||||
// we don't need to update UI state if they change
|
||||
let blockerFunctions = new Map<string, BlockerFunction>();
|
||||
|
||||
// Map of pending patchRoutesOnNavigation() promises (keyed by path/matches) so
|
||||
// that we only kick them off once for a given combo
|
||||
let pendingPatchRoutes = new Map<
|
||||
string,
|
||||
ReturnType<AgnosticPatchRoutesOnNavigationFunction>
|
||||
>();
|
||||
|
||||
// Flag to ignore the next history update, so we can revert the URL change on
|
||||
// a POP navigation that was blocked by the user without touching router state
|
||||
let unblockBlockerHistoryUpdate: (() => void) | undefined = undefined;
|
||||
|
||||
// Initialize the router, all side effects should be kicked off from here.
|
||||
// Implemented as a Fluent API for ease of:
|
||||
// let router = createRouter(init).initialize();
|
||||
function initialize() {
|
||||
// If history informs us of a POP navigation, start the navigation but do not update
|
||||
// state. We'll update our own state once the navigation completes
|
||||
unlistenHistory = init.history.listen(
|
||||
({ action: historyAction, location, delta }) => {
|
||||
// Ignore this event if it was just us resetting the URL from a
|
||||
// blocked POP navigation
|
||||
if (unblockBlockerHistoryUpdate) {
|
||||
unblockBlockerHistoryUpdate();
|
||||
unblockBlockerHistoryUpdate = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
warning(
|
||||
blockerFunctions.size === 0 || delta != null,
|
||||
"You are trying to use a blocker on a POP navigation to a location " +
|
||||
"that was not created by @remix-run/router. This will fail silently in " +
|
||||
"production. This can happen if you are navigating outside the router " +
|
||||
"via `window.history.pushState`/`window.location.hash` instead of using " +
|
||||
"router navigation APIs. This can also happen if you are using " +
|
||||
"createHashRouter and the user manually changes the URL."
|
||||
);
|
||||
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
historyAction,
|
||||
});
|
||||
|
||||
if (blockerKey && delta != null) {
|
||||
// Restore the URL to match the current UI, but don't update router state
|
||||
let nextHistoryUpdatePromise = new Promise<void>((resolve) => {
|
||||
unblockBlockerHistoryUpdate = resolve;
|
||||
});
|
||||
init.history.go(delta * -1);
|
||||
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey!, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location,
|
||||
});
|
||||
// Re-do the same POP navigation we just blocked, after the url
|
||||
// restoration is also complete. See:
|
||||
// https://github.com/remix-run/react-router/issues/11613
|
||||
nextHistoryUpdatePromise.then(() => init.history.go(delta));
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey!, IDLE_BLOCKER);
|
||||
updateState({ blockers });
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
return startNavigation(historyAction, location);
|
||||
}
|
||||
);
|
||||
|
||||
if (isBrowser) {
|
||||
// FIXME: This feels gross. How can we cleanup the lines between
|
||||
// scrollRestoration/appliedTransitions persistance?
|
||||
restoreAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
let _saveAppliedTransitions = () =>
|
||||
persistAppliedTransitions(routerWindow, appliedViewTransitions);
|
||||
routerWindow.addEventListener("pagehide", _saveAppliedTransitions);
|
||||
removePageHideEventListener = () =>
|
||||
routerWindow.removeEventListener("pagehide", _saveAppliedTransitions);
|
||||
}
|
||||
|
||||
// Kick off initial data load if needed. Use Pop to avoid modifying history
|
||||
// Note we don't do any handling of lazy here. For SPA's it'll get handled
|
||||
// in the normal navigation flow. For SSR it's expected that lazy modules are
|
||||
// resolved prior to router creation since we can't go into a fallbackElement
|
||||
// UI for SSR'd apps
|
||||
if (!state.initialized) {
|
||||
startNavigation(HistoryAction.Pop, state.location, {
|
||||
initialHydration: true,
|
||||
});
|
||||
}
|
||||
|
||||
return router;
|
||||
}
|
||||
|
||||
// Clean up a router and it's side effects
|
||||
function dispose() {
|
||||
if (unlistenHistory) {
|
||||
unlistenHistory();
|
||||
}
|
||||
if (removePageHideEventListener) {
|
||||
removePageHideEventListener();
|
||||
}
|
||||
subscribers.clear();
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
state.fetchers.forEach((_, key) => deleteFetcher(key));
|
||||
state.blockers.forEach((_, key) => deleteBlocker(key));
|
||||
}
|
||||
|
||||
// Subscribe to state updates for the router
|
||||
function subscribe(fn: RouterSubscriber) {
|
||||
subscribers.add(fn);
|
||||
return () => subscribers.delete(fn);
|
||||
}
|
||||
|
||||
// Update our state and notify the calling context of the change
|
||||
function updateState(
|
||||
newState: Partial<RouterState>,
|
||||
opts: {
|
||||
flushSync?: boolean;
|
||||
viewTransitionOpts?: ViewTransitionOpts;
|
||||
} = {}
|
||||
): void {
|
||||
state = {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
|
||||
// Prep fetcher cleanup so we can tell the UI which fetcher data entries
|
||||
// can be removed
|
||||
let completedFetchers: string[] = [];
|
||||
let deletedFetchersKeys: string[] = [];
|
||||
|
||||
if (future.v7_fetcherPersist) {
|
||||
state.fetchers.forEach((fetcher, key) => {
|
||||
if (fetcher.state === "idle") {
|
||||
if (deletedFetchers.has(key)) {
|
||||
// Unmounted from the UI and can be totally removed
|
||||
deletedFetchersKeys.push(key);
|
||||
} else {
|
||||
// Returned to idle but still mounted in the UI, so semi-remains for
|
||||
// revalidations and such
|
||||
completedFetchers.push(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Remove any lingering deleted fetchers that have already been removed
|
||||
// from state.fetchers
|
||||
deletedFetchers.forEach((key) => {
|
||||
if (!state.fetchers.has(key) && !fetchControllers.has(key)) {
|
||||
deletedFetchersKeys.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
// Iterate over a local copy so that if flushSync is used and we end up
|
||||
// removing and adding a new subscriber due to the useCallback dependencies,
|
||||
// we don't get ourselves into a loop calling the new subscriber immediately
|
||||
[...subscribers].forEach((subscriber) =>
|
||||
subscriber(state, {
|
||||
deletedFetchers: deletedFetchersKeys,
|
||||
viewTransitionOpts: opts.viewTransitionOpts,
|
||||
flushSync: opts.flushSync === true,
|
||||
})
|
||||
);
|
||||
|
||||
// Remove idle fetchers from state since we only care about in-flight fetchers.
|
||||
if (future.v7_fetcherPersist) {
|
||||
completedFetchers.forEach((key) => state.fetchers.delete(key));
|
||||
deletedFetchersKeys.forEach((key) => deleteFetcher(key));
|
||||
} else {
|
||||
// We already called deleteFetcher() on these, can remove them from this
|
||||
// Set now that we've handed the keys off to the data layer
|
||||
deletedFetchersKeys.forEach((key) => deletedFetchers.delete(key));
|
||||
}
|
||||
}
|
||||
|
||||
// Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
|
||||
// and setting state.[historyAction/location/matches] to the new route.
|
||||
// - Location is a required param
|
||||
// - Navigation will always be set to IDLE_NAVIGATION
|
||||
// - Can pass any other state in newState
|
||||
function completeNavigation(
|
||||
location: Location,
|
||||
newState: Partial<Omit<RouterState, "action" | "location" | "navigation">>,
|
||||
{ flushSync }: { flushSync?: boolean } = {}
|
||||
): void {
|
||||
// Deduce if we're in a loading/actionReload state:
|
||||
// - We have committed actionData in the store
|
||||
// - The current navigation was a mutation submission
|
||||
// - We're past the submitting state and into the loading state
|
||||
// - The location being loaded is not the result of a redirect
|
||||
let isActionReload =
|
||||
state.actionData != null &&
|
||||
state.navigation.formMethod != null &&
|
||||
isMutationMethod(state.navigation.formMethod) &&
|
||||
state.navigation.state === "loading" &&
|
||||
location.state?._isRedirect !== true;
|
||||
|
||||
let actionData: RouteData | null;
|
||||
if (newState.actionData) {
|
||||
if (Object.keys(newState.actionData).length > 0) {
|
||||
actionData = newState.actionData;
|
||||
} else {
|
||||
// Empty actionData -> clear prior actionData due to an action error
|
||||
actionData = null;
|
||||
}
|
||||
} else if (isActionReload) {
|
||||
// Keep the current data if we're wrapping up the action reload
|
||||
actionData = state.actionData;
|
||||
} else {
|
||||
// Clear actionData on any other completed navigations
|
||||
actionData = null;
|
||||
}
|
||||
|
||||
// Always preserve any existing loaderData from re-used routes
|
||||
let loaderData = newState.loaderData
|
||||
? mergeLoaderData(
|
||||
state.loaderData,
|
||||
newState.loaderData,
|
||||
newState.matches || [],
|
||||
newState.errors
|
||||
)
|
||||
: state.loaderData;
|
||||
|
||||
// On a successful navigation we can assume we got through all blockers
|
||||
// so we can start fresh
|
||||
let blockers = state.blockers;
|
||||
if (blockers.size > 0) {
|
||||
blockers = new Map(blockers);
|
||||
blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
|
||||
}
|
||||
|
||||
// Always respect the user flag. Otherwise don't reset on mutation
|
||||
// submission navigations unless they redirect
|
||||
let preventScrollReset =
|
||||
pendingPreventScrollReset === true ||
|
||||
(state.navigation.formMethod != null &&
|
||||
isMutationMethod(state.navigation.formMethod) &&
|
||||
location.state?._isRedirect !== true);
|
||||
|
||||
// Commit any in-flight routes at the end of the HMR revalidation "navigation"
|
||||
if (inFlightDataRoutes) {
|
||||
dataRoutes = inFlightDataRoutes;
|
||||
inFlightDataRoutes = undefined;
|
||||
}
|
||||
|
||||
if (isUninterruptedRevalidation) {
|
||||
// If this was an uninterrupted revalidation then do not touch history
|
||||
} else if (pendingAction === HistoryAction.Pop) {
|
||||
// Do nothing for POP - URL has already been updated
|
||||
} else if (pendingAction === HistoryAction.Push) {
|
||||
init.history.push(location, location.state);
|
||||
} else if (pendingAction === HistoryAction.Replace) {
|
||||
init.history.replace(location, location.state);
|
||||
}
|
||||
|
||||
let viewTransitionOpts: ViewTransitionOpts | undefined;
|
||||
|
||||
// On POP, enable transitions if they were enabled on the original navigation
|
||||
if (pendingAction === HistoryAction.Pop) {
|
||||
// Forward takes precedence so they behave like the original navigation
|
||||
let priorPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (priorPaths && priorPaths.has(location.pathname)) {
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
};
|
||||
} else if (appliedViewTransitions.has(location.pathname)) {
|
||||
// If we don't have a previous forward nav, assume we're popping back to
|
||||
// the new location and enable if that location previously enabled
|
||||
viewTransitionOpts = {
|
||||
currentLocation: location,
|
||||
nextLocation: state.location,
|
||||
};
|
||||
}
|
||||
} else if (pendingViewTransitionEnabled) {
|
||||
// Store the applied transition on PUSH/REPLACE
|
||||
let toPaths = appliedViewTransitions.get(state.location.pathname);
|
||||
if (toPaths) {
|
||||
toPaths.add(location.pathname);
|
||||
} else {
|
||||
toPaths = new Set<string>([location.pathname]);
|
||||
appliedViewTransitions.set(state.location.pathname, toPaths);
|
||||
}
|
||||
viewTransitionOpts = {
|
||||
currentLocation: state.location,
|
||||
nextLocation: location,
|
||||
};
|
||||
}
|
||||
|
||||
updateState(
|
||||
{
|
||||
...newState, // matches, errors, fetchers go through as-is
|
||||
actionData,
|
||||
loaderData,
|
||||
historyAction: pendingAction,
|
||||
location,
|
||||
initialized: true,
|
||||
navigation: IDLE_NAVIGATION,
|
||||
revalidation: "idle",
|
||||
restoreScrollPosition: getSavedScrollPosition(
|
||||
location,
|
||||
newState.matches || state.matches
|
||||
),
|
||||
preventScrollReset,
|
||||
blockers,
|
||||
},
|
||||
{
|
||||
viewTransitionOpts,
|
||||
flushSync: flushSync === true,
|
||||
}
|
||||
);
|
||||
|
||||
// Reset stateful navigation vars
|
||||
pendingAction = HistoryAction.Pop;
|
||||
pendingPreventScrollReset = false;
|
||||
pendingViewTransitionEnabled = false;
|
||||
isUninterruptedRevalidation = false;
|
||||
isRevalidationRequired = false;
|
||||
cancelledDeferredRoutes = [];
|
||||
}
|
||||
|
||||
// Trigger a navigation event, which can either be a numerical POP or a PUSH
|
||||
// replace with an optional submission
|
||||
async function navigate(
|
||||
to: number | To | null,
|
||||
opts?: RouterNavigateOptions
|
||||
): Promise<void> {
|
||||
if (typeof to === "number") {
|
||||
init.history.go(to);
|
||||
return;
|
||||
}
|
||||
|
||||
let normalizedPath = normalizeTo(
|
||||
state.location,
|
||||
state.matches,
|
||||
basename,
|
||||
future.v7_prependBasename,
|
||||
to,
|
||||
future.v7_relativeSplatPath,
|
||||
opts?.fromRouteId,
|
||||
opts?.relative
|
||||
);
|
||||
let { path, submission, error } = normalizeNavigateOptions(
|
||||
future.v7_normalizeFormMethod,
|
||||
false,
|
||||
normalizedPath,
|
||||
opts
|
||||
);
|
||||
|
||||
let currentLocation = state.location;
|
||||
let nextLocation = createLocation(state.location, path, opts && opts.state);
|
||||
|
||||
// When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
|
||||
// URL from window.location, so we need to encode it here so the behavior
|
||||
// remains the same as POP and non-data-router usages. new URL() does all
|
||||
// the same encoding we'd get from a history.pushState/window.location read
|
||||
// without having to touch history
|
||||
nextLocation = {
|
||||
...nextLocation,
|
||||
...init.history.encodeLocation(nextLocation),
|
||||
};
|
||||
|
||||
let userReplace = opts && opts.replace != null ? opts.replace : undefined;
|
||||
|
||||
let historyAction = HistoryAction.Push;
|
||||
|
||||
if (userReplace === true) {
|
||||
historyAction = HistoryAction.Replace;
|
||||
} else if (userReplace === false) {
|
||||
// no-op
|
||||
} else if (
|
||||
submission != null &&
|
||||
isMutationMethod(submission.formMethod) &&
|
||||
submission.formAction === state.location.pathname + state.location.search
|
||||
) {
|
||||
// By default on submissions to the current location we REPLACE so that
|
||||
// users don't have to double-click the back button to get to the prior
|
||||
// location. If the user redirects to a different location from the
|
||||
// action/loader this will be ignored and the redirect will be a PUSH
|
||||
historyAction = HistoryAction.Replace;
|
||||
}
|
||||
|
||||
let preventScrollReset =
|
||||
opts && "preventScrollReset" in opts
|
||||
? opts.preventScrollReset === true
|
||||
: undefined;
|
||||
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
|
||||
let blockerKey = shouldBlockNavigation({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction,
|
||||
});
|
||||
|
||||
if (blockerKey) {
|
||||
// Put the blocker into a blocked state
|
||||
updateBlocker(blockerKey, {
|
||||
state: "blocked",
|
||||
location: nextLocation,
|
||||
proceed() {
|
||||
updateBlocker(blockerKey!, {
|
||||
state: "proceeding",
|
||||
proceed: undefined,
|
||||
reset: undefined,
|
||||
location: nextLocation,
|
||||
});
|
||||
// Send the same navigation through
|
||||
navigate(to, opts);
|
||||
},
|
||||
reset() {
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(blockerKey!, IDLE_BLOCKER);
|
||||
updateState({ blockers });
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
return await startNavigation(historyAction, nextLocation, {
|
||||
submission,
|
||||
// Send through the formData serialization error if we have one so we can
|
||||
// render at the right error boundary after we match routes
|
||||
pendingError: error,
|
||||
preventScrollReset,
|
||||
replace: opts && opts.replace,
|
||||
enableViewTransition: opts && opts.viewTransition,
|
||||
flushSync,
|
||||
});
|
||||
}
|
||||
|
||||
// Revalidate all current loaders. If a navigation is in progress or if this
|
||||
// is interrupted by a navigation, allow this to "succeed" by calling all
|
||||
// loaders during the next loader round
|
||||
function revalidate() {
|
||||
interruptActiveLoads();
|
||||
updateState({ revalidation: "loading" });
|
||||
|
||||
// If we're currently submitting an action, we don't need to start a new
|
||||
// navigation, we'll just let the follow up loader execution call all loaders
|
||||
if (state.navigation.state === "submitting") {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we're currently in an idle state, start a new navigation for the current
|
||||
// action/location and mark it as uninterrupted, which will skip the history
|
||||
// update in completeNavigation
|
||||
if (state.navigation.state === "idle") {
|
||||
startNavigation(state.historyAction, state.location, {
|
||||
startUninterruptedRevalidation: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, if we're currently in a loading state, just start a new
|
||||
// navigation to the navigation.location but do not trigger an uninterrupted
|
||||
// revalidation so that history correctly updates once the navigation completes
|
||||
startNavigation(
|
||||
pendingAction || state.historyAction,
|
||||
state.navigation.location,
|
||||
{
|
||||
overrideNavigation: state.navigation,
|
||||
// Proxy through any rending view transition
|
||||
enableViewTransition: pendingViewTransitionEnabled === true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Start a navigation to the given action/location. Can optionally provide a
|
||||
// overrideNavigation which will override the normalLoad in the case of a redirect
|
||||
// navigation
|
||||
async function startNavigation(
|
||||
historyAction: HistoryAction,
|
||||
location: Location,
|
||||
opts?: {
|
||||
initialHydration?: boolean;
|
||||
submission?: Submission;
|
||||
fetcherSubmission?: Submission;
|
||||
overrideNavigation?: Navigation;
|
||||
pendingError?: ErrorResponseImpl;
|
||||
startUninterruptedRevalidation?: boolean;
|
||||
preventScrollReset?: boolean;
|
||||
replace?: boolean;
|
||||
enableViewTransition?: boolean;
|
||||
flushSync?: boolean;
|
||||
}
|
||||
): Promise<void> {
|
||||
// Abort any in-progress navigations and start a new one. Unset any ongoing
|
||||
// uninterrupted revalidations unless told otherwise, since we want this
|
||||
// new navigation to update history normally
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
pendingNavigationController = null;
|
||||
pendingAction = historyAction;
|
||||
isUninterruptedRevalidation =
|
||||
(opts && opts.startUninterruptedRevalidation) === true;
|
||||
|
||||
// Save the current scroll position every time we start a new navigation,
|
||||
// and track whether we should reset scroll on completion
|
||||
saveScrollPosition(state.location, state.matches);
|
||||
pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
|
||||
pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
|
||||
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let loadingNavigation = opts && opts.overrideNavigation;
|
||||
let matches =
|
||||
opts?.initialHydration &&
|
||||
state.matches &&
|
||||
state.matches.length > 0 &&
|
||||
!initialMatchesIsFOW
|
||||
? // `matchRoutes()` has already been called if we're in here via `router.initialize()`
|
||||
state.matches
|
||||
: matchRoutes(routesToUse, location, basename);
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
|
||||
// Short circuit if it's only a hash change and not a revalidation or
|
||||
// mutation submission.
|
||||
//
|
||||
// Ignore on initial page loads because since the initial hydration will always
|
||||
// be "same hash". For example, on /page#hash and submit a <Form method="post">
|
||||
// which will default to a navigation to /page
|
||||
if (
|
||||
matches &&
|
||||
state.initialized &&
|
||||
!isRevalidationRequired &&
|
||||
isHashChangeOnly(state.location, location) &&
|
||||
!(opts && opts.submission && isMutationMethod(opts.submission.formMethod))
|
||||
) {
|
||||
completeNavigation(location, { matches }, { flushSync });
|
||||
return;
|
||||
}
|
||||
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
|
||||
// Short circuit with a 404 on the root error boundary if we match nothing
|
||||
if (!matches) {
|
||||
let { error, notFoundMatches, route } = handleNavigational404(
|
||||
location.pathname
|
||||
);
|
||||
completeNavigation(
|
||||
location,
|
||||
{
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error,
|
||||
},
|
||||
},
|
||||
{ flushSync }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a controller/Request for this navigation
|
||||
pendingNavigationController = new AbortController();
|
||||
let request = createClientSideRequest(
|
||||
init.history,
|
||||
location,
|
||||
pendingNavigationController.signal,
|
||||
opts && opts.submission
|
||||
);
|
||||
let pendingActionResult: PendingActionResult | undefined;
|
||||
|
||||
if (opts && opts.pendingError) {
|
||||
// If we have a pendingError, it means the user attempted a GET submission
|
||||
// with binary FormData so assign here and skip to handleLoaders. That
|
||||
// way we handle calling loaders above the boundary etc. It's not really
|
||||
// different from an actionError in that sense.
|
||||
pendingActionResult = [
|
||||
findNearestBoundary(matches).route.id,
|
||||
{ type: ResultType.error, error: opts.pendingError },
|
||||
];
|
||||
} else if (
|
||||
opts &&
|
||||
opts.submission &&
|
||||
isMutationMethod(opts.submission.formMethod)
|
||||
) {
|
||||
// Call action if we received an action submission
|
||||
let actionResult = await handleAction(
|
||||
request,
|
||||
location,
|
||||
opts.submission,
|
||||
matches,
|
||||
fogOfWar.active,
|
||||
{ replace: opts.replace, flushSync }
|
||||
);
|
||||
|
||||
if (actionResult.shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we received a 404 from handleAction, it's because we couldn't lazily
|
||||
// discover the destination route so we don't want to call loaders
|
||||
if (actionResult.pendingActionResult) {
|
||||
let [routeId, result] = actionResult.pendingActionResult;
|
||||
if (
|
||||
isErrorResult(result) &&
|
||||
isRouteErrorResponse(result.error) &&
|
||||
result.error.status === 404
|
||||
) {
|
||||
pendingNavigationController = null;
|
||||
|
||||
completeNavigation(location, {
|
||||
matches: actionResult.matches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[routeId]: result.error,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
matches = actionResult.matches || matches;
|
||||
pendingActionResult = actionResult.pendingActionResult;
|
||||
loadingNavigation = getLoadingNavigation(location, opts.submission);
|
||||
flushSync = false;
|
||||
// No need to do fog of war matching again on loader execution
|
||||
fogOfWar.active = false;
|
||||
|
||||
// Create a GET request for the loaders
|
||||
request = createClientSideRequest(
|
||||
init.history,
|
||||
request.url,
|
||||
request.signal
|
||||
);
|
||||
}
|
||||
|
||||
// Call loaders
|
||||
let {
|
||||
shortCircuited,
|
||||
matches: updatedMatches,
|
||||
loaderData,
|
||||
errors,
|
||||
} = await handleLoaders(
|
||||
request,
|
||||
location,
|
||||
matches,
|
||||
fogOfWar.active,
|
||||
loadingNavigation,
|
||||
opts && opts.submission,
|
||||
opts && opts.fetcherSubmission,
|
||||
opts && opts.replace,
|
||||
opts && opts.initialHydration === true,
|
||||
flushSync,
|
||||
pendingActionResult
|
||||
);
|
||||
|
||||
if (shortCircuited) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clean up now that the action/loaders have completed. Don't clean up if
|
||||
// we short circuited because pendingNavigationController will have already
|
||||
// been assigned to a new controller for the next navigation
|
||||
pendingNavigationController = null;
|
||||
|
||||
completeNavigation(location, {
|
||||
matches: updatedMatches || matches,
|
||||
...getActionDataForCommit(pendingActionResult),
|
||||
loaderData,
|
||||
errors,
|
||||
});
|
||||
}
|
||||
|
||||
// Call the action matched by the leaf route for this navigation and handle
|
||||
// redirects/errors
|
||||
async function handleAction(
|
||||
request: Request,
|
||||
location: Location,
|
||||
submission: Submission,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
isFogOfWar: boolean,
|
||||
opts: { replace?: boolean; flushSync?: boolean } = {}
|
||||
): Promise<HandleActionResult> {
|
||||
interruptActiveLoads();
|
||||
|
||||
// Put us in a submitting state
|
||||
let navigation = getSubmittingNavigation(location, submission);
|
||||
updateState({ navigation }, { flushSync: opts.flushSync === true });
|
||||
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(
|
||||
matches,
|
||||
location.pathname,
|
||||
request.signal
|
||||
);
|
||||
if (discoverResult.type === "aborted") {
|
||||
return { shortCircuited: true };
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches)
|
||||
.route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
pendingActionResult: [
|
||||
boundaryId,
|
||||
{
|
||||
type: ResultType.error,
|
||||
error: discoverResult.error,
|
||||
},
|
||||
],
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let { notFoundMatches, error, route } = handleNavigational404(
|
||||
location.pathname
|
||||
);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
pendingActionResult: [
|
||||
route.id,
|
||||
{
|
||||
type: ResultType.error,
|
||||
error,
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
|
||||
// Call our action and get the result
|
||||
let result: DataResult;
|
||||
let actionMatch = getTargetMatch(matches, location);
|
||||
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: location.pathname,
|
||||
routeId: actionMatch.route.id,
|
||||
}),
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy(
|
||||
"action",
|
||||
state,
|
||||
request,
|
||||
[actionMatch],
|
||||
matches,
|
||||
null
|
||||
);
|
||||
result = results[actionMatch.route.id];
|
||||
|
||||
if (request.signal.aborted) {
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
}
|
||||
|
||||
if (isRedirectResult(result)) {
|
||||
let replace: boolean;
|
||||
if (opts && opts.replace != null) {
|
||||
replace = opts.replace;
|
||||
} else {
|
||||
// If the user didn't explicity indicate replace behavior, replace if
|
||||
// we redirected to the exact same location we're currently at to avoid
|
||||
// double back-buttons
|
||||
let location = normalizeRedirectLocation(
|
||||
result.response.headers.get("Location")!,
|
||||
new URL(request.url),
|
||||
basename,
|
||||
init.history,
|
||||
);
|
||||
replace = location === state.location.pathname + state.location.search;
|
||||
}
|
||||
await startRedirectNavigation(request, result, true, {
|
||||
submission,
|
||||
replace,
|
||||
});
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
|
||||
if (isDeferredResult(result)) {
|
||||
throw getInternalRouterError(400, { type: "defer-action" });
|
||||
}
|
||||
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
|
||||
|
||||
// By default, all submissions to the current location are REPLACE
|
||||
// navigations, but if the action threw an error that'll be rendered in
|
||||
// an errorElement, we fall back to PUSH so that the user can use the
|
||||
// back button to get back to the pre-submission form location to try
|
||||
// again
|
||||
if ((opts && opts.replace) !== true) {
|
||||
pendingAction = HistoryAction.Push;
|
||||
}
|
||||
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [boundaryMatch.route.id, result],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
matches,
|
||||
pendingActionResult: [actionMatch.route.id, result],
|
||||
};
|
||||
}
|
||||
|
||||
// Call all applicable loaders for the given matches, handling redirects,
|
||||
// errors, etc.
|
||||
async function handleLoaders(
|
||||
request: Request,
|
||||
location: Location,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
isFogOfWar: boolean,
|
||||
overrideNavigation?: Navigation,
|
||||
submission?: Submission,
|
||||
fetcherSubmission?: Submission,
|
||||
replace?: boolean,
|
||||
initialHydration?: boolean,
|
||||
flushSync?: boolean,
|
||||
pendingActionResult?: PendingActionResult
|
||||
): Promise<HandleLoadersResult> {
|
||||
// Figure out the right navigation we want to use for data loading
|
||||
let loadingNavigation =
|
||||
overrideNavigation || getLoadingNavigation(location, submission);
|
||||
|
||||
// If this was a redirect from an action we don't have a "submission" but
|
||||
// we have it on the loading navigation so use that if available
|
||||
let activeSubmission =
|
||||
submission ||
|
||||
fetcherSubmission ||
|
||||
getSubmissionFromNavigation(loadingNavigation);
|
||||
|
||||
// If this is an uninterrupted revalidation, we remain in our current idle
|
||||
// state. If not, we need to switch to our loading state and load data,
|
||||
// preserving any new action data or existing action data (in the case of
|
||||
// a revalidation interrupting an actionReload)
|
||||
// If we have partialHydration enabled, then don't update the state for the
|
||||
// initial data load since it's not a "navigation"
|
||||
let shouldUpdateNavigationState =
|
||||
!isUninterruptedRevalidation &&
|
||||
(!future.v7_partialHydration || !initialHydration);
|
||||
|
||||
// When fog of war is enabled, we enter our `loading` state earlier so we
|
||||
// can discover new routes during the `loading` state. We skip this if
|
||||
// we've already run actions since we would have done our matching already.
|
||||
// If the children() function threw then, we want to proceed with the
|
||||
// partial matches it discovered.
|
||||
if (isFogOfWar) {
|
||||
if (shouldUpdateNavigationState) {
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
updateState(
|
||||
{
|
||||
navigation: loadingNavigation,
|
||||
...(actionData !== undefined ? { actionData } : {}),
|
||||
},
|
||||
{
|
||||
flushSync,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
let discoverResult = await discoverRoutes(
|
||||
matches,
|
||||
location.pathname,
|
||||
request.signal
|
||||
);
|
||||
|
||||
if (discoverResult.type === "aborted") {
|
||||
return { shortCircuited: true };
|
||||
} else if (discoverResult.type === "error") {
|
||||
let boundaryId = findNearestBoundary(discoverResult.partialMatches)
|
||||
.route.id;
|
||||
return {
|
||||
matches: discoverResult.partialMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[boundaryId]: discoverResult.error,
|
||||
},
|
||||
};
|
||||
} else if (!discoverResult.matches) {
|
||||
let { error, notFoundMatches, route } = handleNavigational404(
|
||||
location.pathname
|
||||
);
|
||||
return {
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
errors: {
|
||||
[route.id]: error,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
}
|
||||
}
|
||||
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
|
||||
init.history,
|
||||
state,
|
||||
matches,
|
||||
activeSubmission,
|
||||
location,
|
||||
future.v7_partialHydration && initialHydration === true,
|
||||
future.v7_skipActionErrorRevalidation,
|
||||
isRevalidationRequired,
|
||||
cancelledDeferredRoutes,
|
||||
cancelledFetcherLoads,
|
||||
deletedFetchers,
|
||||
fetchLoadMatches,
|
||||
fetchRedirectIds,
|
||||
routesToUse,
|
||||
basename,
|
||||
pendingActionResult
|
||||
);
|
||||
|
||||
// Cancel pending deferreds for no-longer-matched routes or routes we're
|
||||
// about to reload. Note that if this is an action reload we would have
|
||||
// already cancelled all pending deferreds so this would be a no-op
|
||||
cancelActiveDeferreds(
|
||||
(routeId) =>
|
||||
!(matches && matches.some((m) => m.route.id === routeId)) ||
|
||||
(matchesToLoad && matchesToLoad.some((m) => m.route.id === routeId))
|
||||
);
|
||||
|
||||
pendingNavigationLoadId = ++incrementingLoadId;
|
||||
|
||||
// Short circuit if we have no loaders to run
|
||||
if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
completeNavigation(
|
||||
location,
|
||||
{
|
||||
matches,
|
||||
loaderData: {},
|
||||
// Commit pending error if we're short circuiting
|
||||
errors:
|
||||
pendingActionResult && isErrorResult(pendingActionResult[1])
|
||||
? { [pendingActionResult[0]]: pendingActionResult[1].error }
|
||||
: null,
|
||||
...getActionDataForCommit(pendingActionResult),
|
||||
...(updatedFetchers ? { fetchers: new Map(state.fetchers) } : {}),
|
||||
},
|
||||
{ flushSync }
|
||||
);
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
|
||||
if (shouldUpdateNavigationState) {
|
||||
let updates: Partial<RouterState> = {};
|
||||
if (!isFogOfWar) {
|
||||
// Only update navigation/actionNData if we didn't already do it above
|
||||
updates.navigation = loadingNavigation;
|
||||
let actionData = getUpdatedActionData(pendingActionResult);
|
||||
if (actionData !== undefined) {
|
||||
updates.actionData = actionData;
|
||||
}
|
||||
}
|
||||
if (revalidatingFetchers.length > 0) {
|
||||
updates.fetchers = getUpdatedRevalidatingFetchers(revalidatingFetchers);
|
||||
}
|
||||
updateState(updates, { flushSync });
|
||||
}
|
||||
|
||||
revalidatingFetchers.forEach((rf) => {
|
||||
abortFetcher(rf.key);
|
||||
if (rf.controller) {
|
||||
// Fetchers use an independent AbortController so that aborting a fetcher
|
||||
// (via deleteFetcher) does not abort the triggering navigation that
|
||||
// triggered the revalidation
|
||||
fetchControllers.set(rf.key, rf.controller);
|
||||
}
|
||||
});
|
||||
|
||||
// Proxy navigation abort through to revalidation fetchers
|
||||
let abortPendingFetchRevalidations = () =>
|
||||
revalidatingFetchers.forEach((f) => abortFetcher(f.key));
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.addEventListener(
|
||||
"abort",
|
||||
abortPendingFetchRevalidations
|
||||
);
|
||||
}
|
||||
|
||||
let { loaderResults, fetcherResults } =
|
||||
await callLoadersAndMaybeResolveData(
|
||||
state,
|
||||
matches,
|
||||
matchesToLoad,
|
||||
revalidatingFetchers,
|
||||
request
|
||||
);
|
||||
|
||||
if (request.signal.aborted) {
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
|
||||
// Clean up _after_ loaders have completed. Don't clean up if we short
|
||||
// circuited because fetchControllers would have been aborted and
|
||||
// reassigned to new controllers for the next navigation
|
||||
if (pendingNavigationController) {
|
||||
pendingNavigationController.signal.removeEventListener(
|
||||
"abort",
|
||||
abortPendingFetchRevalidations
|
||||
);
|
||||
}
|
||||
|
||||
revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
|
||||
|
||||
// If any loaders returned a redirect Response, start a new REPLACE navigation
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace,
|
||||
});
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
await startRedirectNavigation(request, redirect.result, true, {
|
||||
replace,
|
||||
});
|
||||
return { shortCircuited: true };
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let { loaderData, errors } = processLoaderData(
|
||||
state,
|
||||
matches,
|
||||
loaderResults,
|
||||
pendingActionResult,
|
||||
revalidatingFetchers,
|
||||
fetcherResults,
|
||||
activeDeferreds
|
||||
);
|
||||
|
||||
// Wire up subscribers to update loaderData as promises settle
|
||||
activeDeferreds.forEach((deferredData, routeId) => {
|
||||
deferredData.subscribe((aborted) => {
|
||||
// Note: No need to updateState here since the TrackedPromise on
|
||||
// loaderData is stable across resolve/reject
|
||||
// Remove this instance if we were aborted or if promises have settled
|
||||
if (aborted || deferredData.done) {
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Preserve SSR errors during partial hydration
|
||||
if (future.v7_partialHydration && initialHydration && state.errors) {
|
||||
errors = { ...state.errors, ...errors };
|
||||
}
|
||||
|
||||
let updatedFetchers = markFetchRedirectsDone();
|
||||
let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
|
||||
let shouldUpdateFetchers =
|
||||
updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;
|
||||
|
||||
return {
|
||||
matches,
|
||||
loaderData,
|
||||
errors,
|
||||
...(shouldUpdateFetchers ? { fetchers: new Map(state.fetchers) } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
function getUpdatedActionData(
|
||||
pendingActionResult: PendingActionResult | undefined
|
||||
): Record<string, RouteData> | null | undefined {
|
||||
if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {
|
||||
// This is cast to `any` currently because `RouteData`uses any and it
|
||||
// would be a breaking change to use any.
|
||||
// TODO: v7 - change `RouteData` to use `unknown` instead of `any`
|
||||
return {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data as any,
|
||||
};
|
||||
} else if (state.actionData) {
|
||||
if (Object.keys(state.actionData).length === 0) {
|
||||
return null;
|
||||
} else {
|
||||
return state.actionData;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getUpdatedRevalidatingFetchers(
|
||||
revalidatingFetchers: RevalidatingFetcher[]
|
||||
) {
|
||||
revalidatingFetchers.forEach((rf) => {
|
||||
let fetcher = state.fetchers.get(rf.key);
|
||||
let revalidatingFetcher = getLoadingFetcher(
|
||||
undefined,
|
||||
fetcher ? fetcher.data : undefined
|
||||
);
|
||||
state.fetchers.set(rf.key, revalidatingFetcher);
|
||||
});
|
||||
return new Map(state.fetchers);
|
||||
}
|
||||
|
||||
// Trigger a fetcher load/submit for the given fetcher key
|
||||
function fetch(
|
||||
key: string,
|
||||
routeId: string,
|
||||
href: string | null,
|
||||
opts?: RouterFetchOptions
|
||||
) {
|
||||
if (isServer) {
|
||||
throw new Error(
|
||||
"router.fetch() was called during the server render, but it shouldn't be. " +
|
||||
"You are likely calling a useFetcher() method in the body of your component. " +
|
||||
"Try moving it to a useEffect or a callback."
|
||||
);
|
||||
}
|
||||
|
||||
abortFetcher(key);
|
||||
|
||||
let flushSync = (opts && opts.flushSync) === true;
|
||||
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let normalizedPath = normalizeTo(
|
||||
state.location,
|
||||
state.matches,
|
||||
basename,
|
||||
future.v7_prependBasename,
|
||||
href,
|
||||
future.v7_relativeSplatPath,
|
||||
routeId,
|
||||
opts?.relative
|
||||
);
|
||||
let matches = matchRoutes(routesToUse, normalizedPath, basename);
|
||||
|
||||
let fogOfWar = checkFogOfWar(matches, routesToUse, normalizedPath);
|
||||
if (fogOfWar.active && fogOfWar.matches) {
|
||||
matches = fogOfWar.matches;
|
||||
}
|
||||
|
||||
if (!matches) {
|
||||
setFetcherError(
|
||||
key,
|
||||
routeId,
|
||||
getInternalRouterError(404, { pathname: normalizedPath }),
|
||||
{ flushSync }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
let { path, submission, error } = normalizeNavigateOptions(
|
||||
future.v7_normalizeFormMethod,
|
||||
true,
|
||||
normalizedPath,
|
||||
opts
|
||||
);
|
||||
|
||||
if (error) {
|
||||
setFetcherError(key, routeId, error, { flushSync });
|
||||
return;
|
||||
}
|
||||
|
||||
let match = getTargetMatch(matches, path);
|
||||
|
||||
let preventScrollReset = (opts && opts.preventScrollReset) === true;
|
||||
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
handleFetcherAction(
|
||||
key,
|
||||
routeId,
|
||||
path,
|
||||
match,
|
||||
matches,
|
||||
fogOfWar.active,
|
||||
flushSync,
|
||||
preventScrollReset,
|
||||
submission
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Store off the match so we can call it's shouldRevalidate on subsequent
|
||||
// revalidations
|
||||
fetchLoadMatches.set(key, { routeId, path });
|
||||
handleFetcherLoader(
|
||||
key,
|
||||
routeId,
|
||||
path,
|
||||
match,
|
||||
matches,
|
||||
fogOfWar.active,
|
||||
flushSync,
|
||||
preventScrollReset,
|
||||
submission
|
||||
);
|
||||
}
|
||||
|
||||
// Call the action for the matched fetcher.submit(), and then handle redirects,
|
||||
// errors, and revalidation
|
||||
async function handleFetcherAction(
|
||||
key: string,
|
||||
routeId: string,
|
||||
path: string,
|
||||
match: AgnosticDataRouteMatch,
|
||||
requestMatches: AgnosticDataRouteMatch[],
|
||||
isFogOfWar: boolean,
|
||||
flushSync: boolean,
|
||||
preventScrollReset: boolean,
|
||||
submission: Submission
|
||||
) {
|
||||
interruptActiveLoads();
|
||||
fetchLoadMatches.delete(key);
|
||||
|
||||
function detectAndHandle405Error(m: AgnosticDataRouteMatch) {
|
||||
if (!m.route.action && !m.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: submission.formMethod,
|
||||
pathname: path,
|
||||
routeId: routeId,
|
||||
});
|
||||
setFetcherError(key, routeId, error, { flushSync });
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isFogOfWar && detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Put this fetcher into it's submitting state
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
|
||||
flushSync,
|
||||
});
|
||||
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(
|
||||
init.history,
|
||||
path,
|
||||
abortController.signal,
|
||||
submission
|
||||
);
|
||||
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(
|
||||
requestMatches,
|
||||
new URL(fetchRequest.url).pathname,
|
||||
fetchRequest.signal,
|
||||
key
|
||||
);
|
||||
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, { flushSync });
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(
|
||||
key,
|
||||
routeId,
|
||||
getInternalRouterError(404, { pathname: path }),
|
||||
{ flushSync }
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
requestMatches = discoverResult.matches;
|
||||
match = getTargetMatch(requestMatches, path);
|
||||
|
||||
if (detectAndHandle405Error(match)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Call the action for the fetcher
|
||||
fetchControllers.set(key, abortController);
|
||||
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let actionResults = await callDataStrategy(
|
||||
"action",
|
||||
state,
|
||||
fetchRequest,
|
||||
[match],
|
||||
requestMatches,
|
||||
key
|
||||
);
|
||||
let actionResult = actionResults[match.route.id];
|
||||
|
||||
if (fetchRequest.signal.aborted) {
|
||||
// We can delete this so long as we weren't aborted by our own fetcher
|
||||
// re-submit which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// When using v7_fetcherPersist, we don't want errors bubbling up to the UI
|
||||
// or redirects processed for unmounted fetchers so we just revert them to
|
||||
// idle
|
||||
if (future.v7_fetcherPersist && deletedFetchers.has(key)) {
|
||||
if (isRedirectResult(actionResult) || isErrorResult(actionResult)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
// Let SuccessResult's fall through for revalidation
|
||||
} else {
|
||||
if (isRedirectResult(actionResult)) {
|
||||
fetchControllers.delete(key);
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our action started, so that
|
||||
// should take precedence over this redirect navigation. We already
|
||||
// set isRevalidationRequired so all loaders for the new route should
|
||||
// fire unless opted out via shouldRevalidate
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
updateFetcherState(key, getLoadingFetcher(submission));
|
||||
return startRedirectNavigation(fetchRequest, actionResult, false, {
|
||||
fetcherSubmission: submission,
|
||||
preventScrollReset,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(actionResult)) {
|
||||
setFetcherError(key, routeId, actionResult.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isDeferredResult(actionResult)) {
|
||||
throw getInternalRouterError(400, { type: "defer-action" });
|
||||
}
|
||||
|
||||
// Start the data load for current matches, or the next location if we're
|
||||
// in the middle of a navigation
|
||||
let nextLocation = state.navigation.location || state.location;
|
||||
let revalidationRequest = createClientSideRequest(
|
||||
init.history,
|
||||
nextLocation,
|
||||
abortController.signal
|
||||
);
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let matches =
|
||||
state.navigation.state !== "idle"
|
||||
? matchRoutes(routesToUse, state.navigation.location, basename)
|
||||
: state.matches;
|
||||
|
||||
invariant(matches, "Didn't find any matches after fetcher action");
|
||||
|
||||
let loadId = ++incrementingLoadId;
|
||||
fetchReloadIds.set(key, loadId);
|
||||
|
||||
let loadFetcher = getLoadingFetcher(submission, actionResult.data);
|
||||
state.fetchers.set(key, loadFetcher);
|
||||
|
||||
let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
|
||||
init.history,
|
||||
state,
|
||||
matches,
|
||||
submission,
|
||||
nextLocation,
|
||||
false,
|
||||
future.v7_skipActionErrorRevalidation,
|
||||
isRevalidationRequired,
|
||||
cancelledDeferredRoutes,
|
||||
cancelledFetcherLoads,
|
||||
deletedFetchers,
|
||||
fetchLoadMatches,
|
||||
fetchRedirectIds,
|
||||
routesToUse,
|
||||
basename,
|
||||
[match.route.id, actionResult]
|
||||
);
|
||||
|
||||
// Put all revalidating fetchers into the loading state, except for the
|
||||
// current fetcher which we want to keep in it's current loading state which
|
||||
// contains it's action submission info + action data
|
||||
revalidatingFetchers
|
||||
.filter((rf) => rf.key !== key)
|
||||
.forEach((rf) => {
|
||||
let staleKey = rf.key;
|
||||
let existingFetcher = state.fetchers.get(staleKey);
|
||||
let revalidatingFetcher = getLoadingFetcher(
|
||||
undefined,
|
||||
existingFetcher ? existingFetcher.data : undefined
|
||||
);
|
||||
state.fetchers.set(staleKey, revalidatingFetcher);
|
||||
abortFetcher(staleKey);
|
||||
if (rf.controller) {
|
||||
fetchControllers.set(staleKey, rf.controller);
|
||||
}
|
||||
});
|
||||
|
||||
updateState({ fetchers: new Map(state.fetchers) });
|
||||
|
||||
let abortPendingFetchRevalidations = () =>
|
||||
revalidatingFetchers.forEach((rf) => abortFetcher(rf.key));
|
||||
|
||||
abortController.signal.addEventListener(
|
||||
"abort",
|
||||
abortPendingFetchRevalidations
|
||||
);
|
||||
|
||||
let { loaderResults, fetcherResults } =
|
||||
await callLoadersAndMaybeResolveData(
|
||||
state,
|
||||
matches,
|
||||
matchesToLoad,
|
||||
revalidatingFetchers,
|
||||
revalidationRequest
|
||||
);
|
||||
|
||||
if (abortController.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
abortController.signal.removeEventListener(
|
||||
"abort",
|
||||
abortPendingFetchRevalidations
|
||||
);
|
||||
|
||||
fetchReloadIds.delete(key);
|
||||
fetchControllers.delete(key);
|
||||
revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));
|
||||
|
||||
let redirect = findRedirect(loaderResults);
|
||||
if (redirect) {
|
||||
return startRedirectNavigation(
|
||||
revalidationRequest,
|
||||
redirect.result,
|
||||
false,
|
||||
{ preventScrollReset }
|
||||
);
|
||||
}
|
||||
|
||||
redirect = findRedirect(fetcherResults);
|
||||
if (redirect) {
|
||||
// If this redirect came from a fetcher make sure we mark it in
|
||||
// fetchRedirectIds so it doesn't get revalidated on the next set of
|
||||
// loader executions
|
||||
fetchRedirectIds.add(redirect.key);
|
||||
return startRedirectNavigation(
|
||||
revalidationRequest,
|
||||
redirect.result,
|
||||
false,
|
||||
{ preventScrollReset }
|
||||
);
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let { loaderData, errors } = processLoaderData(
|
||||
state,
|
||||
matches,
|
||||
loaderResults,
|
||||
undefined,
|
||||
revalidatingFetchers,
|
||||
fetcherResults,
|
||||
activeDeferreds
|
||||
);
|
||||
|
||||
// Since we let revalidations complete even if the submitting fetcher was
|
||||
// deleted, only put it back to idle if it hasn't been deleted
|
||||
if (state.fetchers.has(key)) {
|
||||
let doneFetcher = getDoneFetcher(actionResult.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
|
||||
abortStaleFetchLoads(loadId);
|
||||
|
||||
// If we are currently in a navigation loading state and this fetcher is
|
||||
// more recent than the navigation, we want the newer data so abort the
|
||||
// navigation and complete it with the fetcher data
|
||||
if (
|
||||
state.navigation.state === "loading" &&
|
||||
loadId > pendingNavigationLoadId
|
||||
) {
|
||||
invariant(pendingAction, "Expected pending action");
|
||||
pendingNavigationController && pendingNavigationController.abort();
|
||||
|
||||
completeNavigation(state.navigation.location, {
|
||||
matches,
|
||||
loaderData,
|
||||
errors,
|
||||
fetchers: new Map(state.fetchers),
|
||||
});
|
||||
} else {
|
||||
// otherwise just update with the fetcher data, preserving any existing
|
||||
// loaderData for loaders that did not need to reload. We have to
|
||||
// manually merge here since we aren't going through completeNavigation
|
||||
updateState({
|
||||
errors,
|
||||
loaderData: mergeLoaderData(
|
||||
state.loaderData,
|
||||
loaderData,
|
||||
matches,
|
||||
errors
|
||||
),
|
||||
fetchers: new Map(state.fetchers),
|
||||
});
|
||||
isRevalidationRequired = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Call the matched loader for fetcher.load(), handling redirects, errors, etc.
|
||||
async function handleFetcherLoader(
|
||||
key: string,
|
||||
routeId: string,
|
||||
path: string,
|
||||
match: AgnosticDataRouteMatch,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
isFogOfWar: boolean,
|
||||
flushSync: boolean,
|
||||
preventScrollReset: boolean,
|
||||
submission?: Submission
|
||||
) {
|
||||
let existingFetcher = state.fetchers.get(key);
|
||||
updateFetcherState(
|
||||
key,
|
||||
getLoadingFetcher(
|
||||
submission,
|
||||
existingFetcher ? existingFetcher.data : undefined
|
||||
),
|
||||
{ flushSync }
|
||||
);
|
||||
|
||||
let abortController = new AbortController();
|
||||
let fetchRequest = createClientSideRequest(
|
||||
init.history,
|
||||
path,
|
||||
abortController.signal
|
||||
);
|
||||
|
||||
if (isFogOfWar) {
|
||||
let discoverResult = await discoverRoutes(
|
||||
matches,
|
||||
new URL(fetchRequest.url).pathname,
|
||||
fetchRequest.signal,
|
||||
key
|
||||
);
|
||||
|
||||
if (discoverResult.type === "aborted") {
|
||||
return;
|
||||
} else if (discoverResult.type === "error") {
|
||||
setFetcherError(key, routeId, discoverResult.error, { flushSync });
|
||||
return;
|
||||
} else if (!discoverResult.matches) {
|
||||
setFetcherError(
|
||||
key,
|
||||
routeId,
|
||||
getInternalRouterError(404, { pathname: path }),
|
||||
{ flushSync }
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
matches = discoverResult.matches;
|
||||
match = getTargetMatch(matches, path);
|
||||
}
|
||||
}
|
||||
|
||||
// Call the loader for this fetcher route match
|
||||
fetchControllers.set(key, abortController);
|
||||
|
||||
let originatingLoadId = incrementingLoadId;
|
||||
let results = await callDataStrategy(
|
||||
"loader",
|
||||
state,
|
||||
fetchRequest,
|
||||
[match],
|
||||
matches,
|
||||
key
|
||||
);
|
||||
let result = results[match.route.id];
|
||||
|
||||
// Deferred isn't supported for fetcher loads, await everything and treat it
|
||||
// as a normal load. resolveDeferredData will return undefined if this
|
||||
// fetcher gets aborted, so we just leave result untouched and short circuit
|
||||
// below if that happens
|
||||
if (isDeferredResult(result)) {
|
||||
result =
|
||||
(await resolveDeferredData(result, fetchRequest.signal, true)) ||
|
||||
result;
|
||||
}
|
||||
|
||||
// We can delete this so long as we weren't aborted by our our own fetcher
|
||||
// re-load which would have put _new_ controller is in fetchControllers
|
||||
if (fetchControllers.get(key) === abortController) {
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
|
||||
if (fetchRequest.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We don't want errors bubbling up or redirects followed for unmounted
|
||||
// fetchers, so short circuit here if it was removed from the UI
|
||||
if (deletedFetchers.has(key)) {
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
}
|
||||
|
||||
// If the loader threw a redirect Response, start a new REPLACE navigation
|
||||
if (isRedirectResult(result)) {
|
||||
if (pendingNavigationLoadId > originatingLoadId) {
|
||||
// A new navigation was kicked off after our loader started, so that
|
||||
// should take precedence over this redirect navigation
|
||||
updateFetcherState(key, getDoneFetcher(undefined));
|
||||
return;
|
||||
} else {
|
||||
fetchRedirectIds.add(key);
|
||||
await startRedirectNavigation(fetchRequest, result, false, {
|
||||
preventScrollReset,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Process any non-redirect errors thrown
|
||||
if (isErrorResult(result)) {
|
||||
setFetcherError(key, routeId, result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
|
||||
|
||||
// Put the fetcher back into an idle state
|
||||
updateFetcherState(key, getDoneFetcher(result.data));
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function to handle redirects returned from an action or loader.
|
||||
* Normally, a redirect "replaces" the navigation that triggered it. So, for
|
||||
* example:
|
||||
*
|
||||
* - user is on /a
|
||||
* - user clicks a link to /b
|
||||
* - loader for /b redirects to /c
|
||||
*
|
||||
* In a non-JS app the browser would track the in-flight navigation to /b and
|
||||
* then replace it with /c when it encountered the redirect response. In
|
||||
* the end it would only ever update the URL bar with /c.
|
||||
*
|
||||
* In client-side routing using pushState/replaceState, we aim to emulate
|
||||
* this behavior and we also do not update history until the end of the
|
||||
* navigation (including processed redirects). This means that we never
|
||||
* actually touch history until we've processed redirects, so we just use
|
||||
* the history action from the original navigation (PUSH or REPLACE).
|
||||
*/
|
||||
async function startRedirectNavigation(
|
||||
request: Request,
|
||||
redirect: RedirectResult,
|
||||
isNavigation: boolean,
|
||||
{
|
||||
submission,
|
||||
fetcherSubmission,
|
||||
preventScrollReset,
|
||||
replace,
|
||||
}: {
|
||||
submission?: Submission;
|
||||
fetcherSubmission?: Submission;
|
||||
preventScrollReset?: boolean;
|
||||
replace?: boolean;
|
||||
} = {}
|
||||
) {
|
||||
if (redirect.response.headers.has("X-Remix-Revalidate")) {
|
||||
isRevalidationRequired = true;
|
||||
}
|
||||
|
||||
let location = redirect.response.headers.get("Location");
|
||||
invariant(location, "Expected a Location header on the redirect Response");
|
||||
location = normalizeRedirectLocation(
|
||||
location,
|
||||
new URL(request.url),
|
||||
basename,
|
||||
init.history,
|
||||
);
|
||||
let redirectLocation = createLocation(state.location, location, {
|
||||
_isRedirect: true,
|
||||
});
|
||||
|
||||
if (isBrowser) {
|
||||
let isDocumentReload = false;
|
||||
|
||||
if (redirect.response.headers.has("X-Remix-Reload-Document")) {
|
||||
// Hard reload if the response contained X-Remix-Reload-Document
|
||||
isDocumentReload = true;
|
||||
} else if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
const url = init.history.createURL(location);
|
||||
isDocumentReload =
|
||||
// Hard reload if it's an absolute URL to a new origin
|
||||
url.origin !== routerWindow.location.origin ||
|
||||
// Hard reload if it's an absolute URL that does not match our basename
|
||||
stripBasename(url.pathname, basename) == null;
|
||||
}
|
||||
|
||||
if (isDocumentReload) {
|
||||
if (replace) {
|
||||
routerWindow.location.replace(location);
|
||||
} else {
|
||||
routerWindow.location.assign(location);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// There's no need to abort on redirects, since we don't detect the
|
||||
// redirect until the action/loaders have settled
|
||||
pendingNavigationController = null;
|
||||
|
||||
let redirectHistoryAction =
|
||||
replace === true || redirect.response.headers.has("X-Remix-Replace")
|
||||
? HistoryAction.Replace
|
||||
: HistoryAction.Push;
|
||||
|
||||
// Use the incoming submission if provided, fallback on the active one in
|
||||
// state.navigation
|
||||
let { formMethod, formAction, formEncType } = state.navigation;
|
||||
if (
|
||||
!submission &&
|
||||
!fetcherSubmission &&
|
||||
formMethod &&
|
||||
formAction &&
|
||||
formEncType
|
||||
) {
|
||||
submission = getSubmissionFromNavigation(state.navigation);
|
||||
}
|
||||
|
||||
// If this was a 307/308 submission we want to preserve the HTTP method and
|
||||
// re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
|
||||
// redirected location
|
||||
let activeSubmission = submission || fetcherSubmission;
|
||||
if (
|
||||
redirectPreserveMethodStatusCodes.has(redirect.response.status) &&
|
||||
activeSubmission &&
|
||||
isMutationMethod(activeSubmission.formMethod)
|
||||
) {
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
submission: {
|
||||
...activeSubmission,
|
||||
formAction: location,
|
||||
},
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation
|
||||
? pendingViewTransitionEnabled
|
||||
: undefined,
|
||||
});
|
||||
} else {
|
||||
// If we have a navigation submission, we will preserve it through the
|
||||
// redirect navigation
|
||||
let overrideNavigation = getLoadingNavigation(
|
||||
redirectLocation,
|
||||
submission
|
||||
);
|
||||
await startNavigation(redirectHistoryAction, redirectLocation, {
|
||||
overrideNavigation,
|
||||
// Send fetcher submissions through for shouldRevalidate
|
||||
fetcherSubmission,
|
||||
// Preserve these flags across redirects
|
||||
preventScrollReset: preventScrollReset || pendingPreventScrollReset,
|
||||
enableViewTransition: isNavigation
|
||||
? pendingViewTransitionEnabled
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy client-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(
|
||||
type: "loader" | "action",
|
||||
state: RouterState,
|
||||
request: Request,
|
||||
matchesToLoad: AgnosticDataRouteMatch[],
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
fetcherKey: string | null
|
||||
): Promise<Record<string, DataResult>> {
|
||||
let results: Record<string, DataStrategyResult>;
|
||||
let dataResults: Record<string, DataResult> = {};
|
||||
try {
|
||||
results = await callDataStrategyImpl(
|
||||
dataStrategyImpl,
|
||||
type,
|
||||
state,
|
||||
request,
|
||||
matchesToLoad,
|
||||
matches,
|
||||
fetcherKey,
|
||||
manifest,
|
||||
mapRouteProperties
|
||||
);
|
||||
} catch (e) {
|
||||
// If the outer dataStrategy method throws, just return the error for all
|
||||
// matches - and it'll naturally bubble to the root
|
||||
matchesToLoad.forEach((m) => {
|
||||
dataResults[m.route.id] = {
|
||||
type: ResultType.error,
|
||||
error: e,
|
||||
};
|
||||
});
|
||||
return dataResults;
|
||||
}
|
||||
|
||||
for (let [routeId, result] of Object.entries(results)) {
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result as Response;
|
||||
dataResults[routeId] = {
|
||||
type: ResultType.redirect,
|
||||
response: normalizeRelativeRoutingRedirectResponse(
|
||||
response,
|
||||
request,
|
||||
routeId,
|
||||
matches,
|
||||
basename,
|
||||
future.v7_relativeSplatPath
|
||||
),
|
||||
};
|
||||
} else {
|
||||
dataResults[routeId] = await convertDataStrategyResultToDataResult(
|
||||
result
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return dataResults;
|
||||
}
|
||||
|
||||
async function callLoadersAndMaybeResolveData(
|
||||
state: RouterState,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
matchesToLoad: AgnosticDataRouteMatch[],
|
||||
fetchersToLoad: RevalidatingFetcher[],
|
||||
request: Request
|
||||
) {
|
||||
let currentMatches = state.matches;
|
||||
|
||||
// Kick off loaders and fetchers in parallel
|
||||
let loaderResultsPromise = callDataStrategy(
|
||||
"loader",
|
||||
state,
|
||||
request,
|
||||
matchesToLoad,
|
||||
matches,
|
||||
null
|
||||
);
|
||||
|
||||
let fetcherResultsPromise = Promise.all(
|
||||
fetchersToLoad.map(async (f) => {
|
||||
if (f.matches && f.match && f.controller) {
|
||||
let results = await callDataStrategy(
|
||||
"loader",
|
||||
state,
|
||||
createClientSideRequest(init.history, f.path, f.controller.signal),
|
||||
[f.match],
|
||||
f.matches,
|
||||
f.key
|
||||
);
|
||||
let result = results[f.match.route.id];
|
||||
// Fetcher results are keyed by fetcher key from here on out, not routeId
|
||||
return { [f.key]: result };
|
||||
} else {
|
||||
return Promise.resolve({
|
||||
[f.key]: {
|
||||
type: ResultType.error,
|
||||
error: getInternalRouterError(404, {
|
||||
pathname: f.path,
|
||||
}),
|
||||
} as ErrorResult,
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
let loaderResults = await loaderResultsPromise;
|
||||
let fetcherResults = (await fetcherResultsPromise).reduce(
|
||||
(acc, r) => Object.assign(acc, r),
|
||||
{}
|
||||
);
|
||||
|
||||
await Promise.all([
|
||||
resolveNavigationDeferredResults(
|
||||
matches,
|
||||
loaderResults,
|
||||
request.signal,
|
||||
currentMatches,
|
||||
state.loaderData
|
||||
),
|
||||
resolveFetcherDeferredResults(matches, fetcherResults, fetchersToLoad),
|
||||
]);
|
||||
|
||||
return {
|
||||
loaderResults,
|
||||
fetcherResults,
|
||||
};
|
||||
}
|
||||
|
||||
function interruptActiveLoads() {
|
||||
// Every interruption triggers a revalidation
|
||||
isRevalidationRequired = true;
|
||||
|
||||
// Cancel pending route-level deferreds and mark cancelled routes for
|
||||
// revalidation
|
||||
cancelledDeferredRoutes.push(...cancelActiveDeferreds());
|
||||
|
||||
// Abort in-flight fetcher loads
|
||||
fetchLoadMatches.forEach((_, key) => {
|
||||
if (fetchControllers.has(key)) {
|
||||
cancelledFetcherLoads.add(key);
|
||||
}
|
||||
abortFetcher(key);
|
||||
});
|
||||
}
|
||||
|
||||
function updateFetcherState(
|
||||
key: string,
|
||||
fetcher: Fetcher,
|
||||
opts: { flushSync?: boolean } = {}
|
||||
) {
|
||||
state.fetchers.set(key, fetcher);
|
||||
updateState(
|
||||
{ fetchers: new Map(state.fetchers) },
|
||||
{ flushSync: (opts && opts.flushSync) === true }
|
||||
);
|
||||
}
|
||||
|
||||
function setFetcherError(
|
||||
key: string,
|
||||
routeId: string,
|
||||
error: any,
|
||||
opts: { flushSync?: boolean } = {}
|
||||
) {
|
||||
let boundaryMatch = findNearestBoundary(state.matches, routeId);
|
||||
deleteFetcher(key);
|
||||
updateState(
|
||||
{
|
||||
errors: {
|
||||
[boundaryMatch.route.id]: error,
|
||||
},
|
||||
fetchers: new Map(state.fetchers),
|
||||
},
|
||||
{ flushSync: (opts && opts.flushSync) === true }
|
||||
);
|
||||
}
|
||||
|
||||
function getFetcher<TData = any>(key: string): Fetcher<TData> {
|
||||
activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
|
||||
// If this fetcher was previously marked for deletion, unmark it since we
|
||||
// have a new instance
|
||||
if (deletedFetchers.has(key)) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
return state.fetchers.get(key) || IDLE_FETCHER;
|
||||
}
|
||||
|
||||
function deleteFetcher(key: string): void {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
// Don't abort the controller if this is a deletion of a fetcher.submit()
|
||||
// in it's loading phase since - we don't want to abort the corresponding
|
||||
// revalidation and want them to complete and land
|
||||
if (
|
||||
fetchControllers.has(key) &&
|
||||
!(fetcher && fetcher.state === "loading" && fetchReloadIds.has(key))
|
||||
) {
|
||||
abortFetcher(key);
|
||||
}
|
||||
fetchLoadMatches.delete(key);
|
||||
fetchReloadIds.delete(key);
|
||||
fetchRedirectIds.delete(key);
|
||||
|
||||
// If we opted into the flag we can clear this now since we're calling
|
||||
// deleteFetcher() at the end of updateState() and we've already handed the
|
||||
// deleted fetcher keys off to the data layer.
|
||||
// If not, we're eagerly calling deleteFetcher() and we need to keep this
|
||||
// Set populated until the next updateState call, and we'll clear
|
||||
// `deletedFetchers` then
|
||||
if (future.v7_fetcherPersist) {
|
||||
deletedFetchers.delete(key);
|
||||
}
|
||||
|
||||
cancelledFetcherLoads.delete(key);
|
||||
state.fetchers.delete(key);
|
||||
}
|
||||
|
||||
function deleteFetcherAndUpdateState(key: string): void {
|
||||
let count = (activeFetchers.get(key) || 0) - 1;
|
||||
if (count <= 0) {
|
||||
activeFetchers.delete(key);
|
||||
deletedFetchers.add(key);
|
||||
if (!future.v7_fetcherPersist) {
|
||||
deleteFetcher(key);
|
||||
}
|
||||
} else {
|
||||
activeFetchers.set(key, count);
|
||||
}
|
||||
|
||||
updateState({ fetchers: new Map(state.fetchers) });
|
||||
}
|
||||
|
||||
function abortFetcher(key: string) {
|
||||
let controller = fetchControllers.get(key);
|
||||
if (controller) {
|
||||
controller.abort();
|
||||
fetchControllers.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
function markFetchersDone(keys: string[]) {
|
||||
for (let key of keys) {
|
||||
let fetcher = getFetcher(key);
|
||||
let doneFetcher = getDoneFetcher(fetcher.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
}
|
||||
|
||||
function markFetchRedirectsDone(): boolean {
|
||||
let doneKeys = [];
|
||||
let updatedFetchers = false;
|
||||
for (let key of fetchRedirectIds) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, `Expected fetcher: ${key}`);
|
||||
if (fetcher.state === "loading") {
|
||||
fetchRedirectIds.delete(key);
|
||||
doneKeys.push(key);
|
||||
updatedFetchers = true;
|
||||
}
|
||||
}
|
||||
markFetchersDone(doneKeys);
|
||||
return updatedFetchers;
|
||||
}
|
||||
|
||||
function abortStaleFetchLoads(landedId: number): boolean {
|
||||
let yeetedKeys = [];
|
||||
for (let [key, id] of fetchReloadIds) {
|
||||
if (id < landedId) {
|
||||
let fetcher = state.fetchers.get(key);
|
||||
invariant(fetcher, `Expected fetcher: ${key}`);
|
||||
if (fetcher.state === "loading") {
|
||||
abortFetcher(key);
|
||||
fetchReloadIds.delete(key);
|
||||
yeetedKeys.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
markFetchersDone(yeetedKeys);
|
||||
return yeetedKeys.length > 0;
|
||||
}
|
||||
|
||||
function getBlocker(key: string, fn: BlockerFunction) {
|
||||
let blocker: Blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
|
||||
if (blockerFunctions.get(key) !== fn) {
|
||||
blockerFunctions.set(key, fn);
|
||||
}
|
||||
|
||||
return blocker;
|
||||
}
|
||||
|
||||
function deleteBlocker(key: string) {
|
||||
state.blockers.delete(key);
|
||||
blockerFunctions.delete(key);
|
||||
}
|
||||
|
||||
// Utility function to update blockers, ensuring valid state transitions
|
||||
function updateBlocker(key: string, newBlocker: Blocker) {
|
||||
let blocker = state.blockers.get(key) || IDLE_BLOCKER;
|
||||
|
||||
// Poor mans state machine :)
|
||||
// https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
|
||||
invariant(
|
||||
(blocker.state === "unblocked" && newBlocker.state === "blocked") ||
|
||||
(blocker.state === "blocked" && newBlocker.state === "blocked") ||
|
||||
(blocker.state === "blocked" && newBlocker.state === "proceeding") ||
|
||||
(blocker.state === "blocked" && newBlocker.state === "unblocked") ||
|
||||
(blocker.state === "proceeding" && newBlocker.state === "unblocked"),
|
||||
`Invalid blocker state transition: ${blocker.state} -> ${newBlocker.state}`
|
||||
);
|
||||
|
||||
let blockers = new Map(state.blockers);
|
||||
blockers.set(key, newBlocker);
|
||||
updateState({ blockers });
|
||||
}
|
||||
|
||||
function shouldBlockNavigation({
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
historyAction,
|
||||
}: {
|
||||
currentLocation: Location;
|
||||
nextLocation: Location;
|
||||
historyAction: HistoryAction;
|
||||
}): string | undefined {
|
||||
if (blockerFunctions.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We ony support a single active blocker at the moment since we don't have
|
||||
// any compelling use cases for multi-blocker yet
|
||||
if (blockerFunctions.size > 1) {
|
||||
warning(false, "A router only supports one blocker at a time");
|
||||
}
|
||||
|
||||
let entries = Array.from(blockerFunctions.entries());
|
||||
let [blockerKey, blockerFunction] = entries[entries.length - 1];
|
||||
let blocker = state.blockers.get(blockerKey);
|
||||
|
||||
if (blocker && blocker.state === "proceeding") {
|
||||
// If the blocker is currently proceeding, we don't need to re-check
|
||||
// it and can let this navigation continue
|
||||
return;
|
||||
}
|
||||
|
||||
// At this point, we know we're unblocked/blocked so we need to check the
|
||||
// user-provided blocker function
|
||||
if (blockerFunction({ currentLocation, nextLocation, historyAction })) {
|
||||
return blockerKey;
|
||||
}
|
||||
}
|
||||
|
||||
function handleNavigational404(pathname: string) {
|
||||
let error = getInternalRouterError(404, { pathname });
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let { matches, route } = getShortCircuitMatches(routesToUse);
|
||||
|
||||
// Cancel all pending deferred on 404s since we don't keep any routes
|
||||
cancelActiveDeferreds();
|
||||
|
||||
return { notFoundMatches: matches, route, error };
|
||||
}
|
||||
|
||||
function cancelActiveDeferreds(
|
||||
predicate?: (routeId: string) => boolean
|
||||
): string[] {
|
||||
let cancelledRouteIds: string[] = [];
|
||||
activeDeferreds.forEach((dfd, routeId) => {
|
||||
if (!predicate || predicate(routeId)) {
|
||||
// Cancel the deferred - but do not remove from activeDeferreds here -
|
||||
// we rely on the subscribers to do that so our tests can assert proper
|
||||
// cleanup via _internalActiveDeferreds
|
||||
dfd.cancel();
|
||||
cancelledRouteIds.push(routeId);
|
||||
activeDeferreds.delete(routeId);
|
||||
}
|
||||
});
|
||||
return cancelledRouteIds;
|
||||
}
|
||||
|
||||
// Opt in to capturing and reporting scroll positions during navigations,
|
||||
// used by the <ScrollRestoration> component
|
||||
function enableScrollRestoration(
|
||||
positions: Record<string, number>,
|
||||
getPosition: GetScrollPositionFunction,
|
||||
getKey?: GetScrollRestorationKeyFunction
|
||||
) {
|
||||
savedScrollPositions = positions;
|
||||
getScrollPosition = getPosition;
|
||||
getScrollRestorationKey = getKey || null;
|
||||
|
||||
// Perform initial hydration scroll restoration, since we miss the boat on
|
||||
// the initial updateState() because we've not yet rendered <ScrollRestoration/>
|
||||
// and therefore have no savedScrollPositions available
|
||||
if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {
|
||||
initialScrollRestored = true;
|
||||
let y = getSavedScrollPosition(state.location, state.matches);
|
||||
if (y != null) {
|
||||
updateState({ restoreScrollPosition: y });
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
savedScrollPositions = null;
|
||||
getScrollPosition = null;
|
||||
getScrollRestorationKey = null;
|
||||
};
|
||||
}
|
||||
|
||||
function getScrollKey(location: Location, matches: AgnosticDataRouteMatch[]) {
|
||||
if (getScrollRestorationKey) {
|
||||
let key = getScrollRestorationKey(
|
||||
location,
|
||||
matches.map((m) => convertRouteMatchToUiMatch(m, state.loaderData))
|
||||
);
|
||||
return key || location.key;
|
||||
}
|
||||
return location.key;
|
||||
}
|
||||
|
||||
function saveScrollPosition(
|
||||
location: Location,
|
||||
matches: AgnosticDataRouteMatch[]
|
||||
): void {
|
||||
if (savedScrollPositions && getScrollPosition) {
|
||||
let key = getScrollKey(location, matches);
|
||||
savedScrollPositions[key] = getScrollPosition();
|
||||
}
|
||||
}
|
||||
|
||||
function getSavedScrollPosition(
|
||||
location: Location,
|
||||
matches: AgnosticDataRouteMatch[]
|
||||
): number | null {
|
||||
if (savedScrollPositions) {
|
||||
let key = getScrollKey(location, matches);
|
||||
let y = savedScrollPositions[key];
|
||||
if (typeof y === "number") {
|
||||
return y;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function checkFogOfWar(
|
||||
matches: AgnosticDataRouteMatch[] | null,
|
||||
routesToUse: AgnosticDataRouteObject[],
|
||||
pathname: string
|
||||
): { active: boolean; matches: AgnosticDataRouteMatch[] | null } {
|
||||
if (patchRoutesOnNavigationImpl) {
|
||||
if (!matches) {
|
||||
let fogMatches = matchRoutesImpl<AgnosticDataRouteObject>(
|
||||
routesToUse,
|
||||
pathname,
|
||||
basename,
|
||||
true
|
||||
);
|
||||
|
||||
return { active: true, matches: fogMatches || [] };
|
||||
} else {
|
||||
if (Object.keys(matches[0].params).length > 0) {
|
||||
// If we matched a dynamic param or a splat, it might only be because
|
||||
// we haven't yet discovered other routes that would match with a
|
||||
// higher score. Call patchRoutesOnNavigation just to be sure
|
||||
let partialMatches = matchRoutesImpl<AgnosticDataRouteObject>(
|
||||
routesToUse,
|
||||
pathname,
|
||||
basename,
|
||||
true
|
||||
);
|
||||
return { active: true, matches: partialMatches };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { active: false, matches: null };
|
||||
}
|
||||
|
||||
type DiscoverRoutesSuccessResult = {
|
||||
type: "success";
|
||||
matches: AgnosticDataRouteMatch[] | null;
|
||||
};
|
||||
type DiscoverRoutesErrorResult = {
|
||||
type: "error";
|
||||
error: any;
|
||||
partialMatches: AgnosticDataRouteMatch[];
|
||||
};
|
||||
type DiscoverRoutesAbortedResult = { type: "aborted" };
|
||||
type DiscoverRoutesResult =
|
||||
| DiscoverRoutesSuccessResult
|
||||
| DiscoverRoutesErrorResult
|
||||
| DiscoverRoutesAbortedResult;
|
||||
|
||||
async function discoverRoutes(
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
pathname: string,
|
||||
signal: AbortSignal,
|
||||
fetcherKey?: string
|
||||
): Promise<DiscoverRoutesResult> {
|
||||
if (!patchRoutesOnNavigationImpl) {
|
||||
return { type: "success", matches };
|
||||
}
|
||||
|
||||
let partialMatches: AgnosticDataRouteMatch[] | null = matches;
|
||||
while (true) {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
let localManifest = manifest;
|
||||
try {
|
||||
await patchRoutesOnNavigationImpl({
|
||||
signal,
|
||||
path: pathname,
|
||||
matches: partialMatches,
|
||||
fetcherKey,
|
||||
patch: (routeId, children) => {
|
||||
if (signal.aborted) return;
|
||||
patchRoutesImpl(
|
||||
routeId,
|
||||
children,
|
||||
routesToUse,
|
||||
localManifest,
|
||||
mapRouteProperties
|
||||
);
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
return { type: "error", error: e, partialMatches };
|
||||
} finally {
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity so when we `updateState` at the end of
|
||||
// this navigation/fetch `router.routes` will be a new identity and
|
||||
// trigger a re-run of memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR && !signal.aborted) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
}
|
||||
}
|
||||
|
||||
if (signal.aborted) {
|
||||
return { type: "aborted" };
|
||||
}
|
||||
|
||||
let newMatches = matchRoutes(routesToUse, pathname, basename);
|
||||
if (newMatches) {
|
||||
return { type: "success", matches: newMatches };
|
||||
}
|
||||
|
||||
let newPartialMatches = matchRoutesImpl<AgnosticDataRouteObject>(
|
||||
routesToUse,
|
||||
pathname,
|
||||
basename,
|
||||
true
|
||||
);
|
||||
|
||||
// Avoid loops if the second pass results in the same partial matches
|
||||
if (
|
||||
!newPartialMatches ||
|
||||
(partialMatches.length === newPartialMatches.length &&
|
||||
partialMatches.every(
|
||||
(m, i) => m.route.id === newPartialMatches![i].route.id
|
||||
))
|
||||
) {
|
||||
return { type: "success", matches: null };
|
||||
}
|
||||
|
||||
partialMatches = newPartialMatches;
|
||||
}
|
||||
}
|
||||
|
||||
function _internalSetRoutes(newRoutes: AgnosticDataRouteObject[]) {
|
||||
manifest = {};
|
||||
inFlightDataRoutes = convertRoutesToDataRoutes(
|
||||
newRoutes,
|
||||
mapRouteProperties,
|
||||
undefined,
|
||||
manifest
|
||||
);
|
||||
}
|
||||
|
||||
function patchRoutes(
|
||||
routeId: string | null,
|
||||
children: AgnosticRouteObject[]
|
||||
): void {
|
||||
let isNonHMR = inFlightDataRoutes == null;
|
||||
let routesToUse = inFlightDataRoutes || dataRoutes;
|
||||
patchRoutesImpl(
|
||||
routeId,
|
||||
children,
|
||||
routesToUse,
|
||||
manifest,
|
||||
mapRouteProperties
|
||||
);
|
||||
|
||||
// If we are not in the middle of an HMR revalidation and we changed the
|
||||
// routes, provide a new identity and trigger a reflow via `updateState`
|
||||
// to re-run memoized `router.routes` dependencies.
|
||||
// HMR will already update the identity and reflow when it lands
|
||||
// `inFlightDataRoutes` in `completeNavigation`
|
||||
if (isNonHMR) {
|
||||
dataRoutes = [...dataRoutes];
|
||||
updateState({});
|
||||
}
|
||||
}
|
||||
|
||||
router = {
|
||||
get basename() {
|
||||
return basename;
|
||||
},
|
||||
get future() {
|
||||
return future;
|
||||
},
|
||||
get state() {
|
||||
return state;
|
||||
},
|
||||
get routes() {
|
||||
return dataRoutes;
|
||||
},
|
||||
get window() {
|
||||
return routerWindow;
|
||||
},
|
||||
initialize,
|
||||
subscribe,
|
||||
enableScrollRestoration,
|
||||
navigate,
|
||||
fetch,
|
||||
revalidate,
|
||||
// Passthrough to history-aware createHref used by useHref so we get proper
|
||||
// hash-aware URLs in DOM paths
|
||||
createHref: (to: To) => init.history.createHref(to),
|
||||
encodeLocation: (to: To) => init.history.encodeLocation(to),
|
||||
getFetcher,
|
||||
deleteFetcher: deleteFetcherAndUpdateState,
|
||||
dispose,
|
||||
getBlocker,
|
||||
deleteBlocker,
|
||||
patchRoutes,
|
||||
_internalFetchControllers: fetchControllers,
|
||||
_internalActiveDeferreds: activeDeferreds,
|
||||
// TODO: Remove setRoutes, it's temporary to avoid dealing with
|
||||
// updating the tree while validating the update algorithm.
|
||||
_internalSetRoutes,
|
||||
};
|
||||
|
||||
return router;
|
||||
}
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region createStaticHandler
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
export const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
|
||||
|
||||
/**
|
||||
* Future flags to toggle new feature behavior
|
||||
*/
|
||||
export interface StaticHandlerFutureConfig {
|
||||
v7_relativeSplatPath: boolean;
|
||||
v7_throwAbortReason: boolean;
|
||||
}
|
||||
|
||||
export interface CreateStaticHandlerOptions {
|
||||
basename?: string;
|
||||
/**
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
detectErrorBoundary?: DetectErrorBoundaryFunction;
|
||||
mapRouteProperties?: MapRoutePropertiesFunction;
|
||||
future?: Partial<StaticHandlerFutureConfig>;
|
||||
}
|
||||
|
||||
export function createStaticHandler(
|
||||
routes: AgnosticRouteObject[],
|
||||
opts?: CreateStaticHandlerOptions
|
||||
): StaticHandler {
|
||||
invariant(
|
||||
routes.length > 0,
|
||||
"You must provide a non-empty routes array to createStaticHandler"
|
||||
);
|
||||
|
||||
let manifest: RouteManifest = {};
|
||||
let basename = (opts ? opts.basename : null) || "/";
|
||||
let mapRouteProperties: MapRoutePropertiesFunction;
|
||||
if (opts?.mapRouteProperties) {
|
||||
mapRouteProperties = opts.mapRouteProperties;
|
||||
} else if (opts?.detectErrorBoundary) {
|
||||
// If they are still using the deprecated version, wrap it with the new API
|
||||
let detectErrorBoundary = opts.detectErrorBoundary;
|
||||
mapRouteProperties = (route) => ({
|
||||
hasErrorBoundary: detectErrorBoundary(route),
|
||||
});
|
||||
} else {
|
||||
mapRouteProperties = defaultMapRouteProperties;
|
||||
}
|
||||
// Config driven behavior flags
|
||||
let future: StaticHandlerFutureConfig = {
|
||||
v7_relativeSplatPath: false,
|
||||
v7_throwAbortReason: false,
|
||||
...(opts ? opts.future : null),
|
||||
};
|
||||
|
||||
let dataRoutes = convertRoutesToDataRoutes(
|
||||
routes,
|
||||
mapRouteProperties,
|
||||
undefined,
|
||||
manifest
|
||||
);
|
||||
|
||||
/**
|
||||
* The query() method is intended for document requests, in which we want to
|
||||
* call an optional action and potentially multiple loaders for all nested
|
||||
* routes. It returns a StaticHandlerContext object, which is very similar
|
||||
* to the router state (location, loaderData, actionData, errors, etc.) and
|
||||
* also adds SSR-specific information such as the statusCode and headers
|
||||
* from action/loaders Responses.
|
||||
*
|
||||
* It _should_ never throw and should report all errors through the
|
||||
* returned context.errors object, properly associating errors to their error
|
||||
* boundary. Additionally, it tracks _deepestRenderedBoundaryId which can be
|
||||
* used to emulate React error boundaries during SSr by performing a second
|
||||
* pass only down to the boundaryId.
|
||||
*
|
||||
* The one exception where we do not return a StaticHandlerContext is when a
|
||||
* redirect response is returned or thrown from any action/loader. We
|
||||
* propagate that out and return the raw Response so the HTTP server can
|
||||
* return it directly.
|
||||
*
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
* - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
|
||||
* the bubbling of errors which allows single-fetch-type implementations
|
||||
* where the client will handle the bubbling and we may need to return data
|
||||
* for the handling route
|
||||
*/
|
||||
async function query(
|
||||
request: Request,
|
||||
{
|
||||
requestContext,
|
||||
skipLoaderErrorBubbling,
|
||||
dataStrategy,
|
||||
}: {
|
||||
requestContext?: unknown;
|
||||
skipLoaderErrorBubbling?: boolean;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
} = {}
|
||||
): Promise<StaticHandlerContext | Response> {
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD") {
|
||||
let error = getInternalRouterError(405, { method });
|
||||
let { matches: methodNotAllowedMatches, route } =
|
||||
getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: methodNotAllowedMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error,
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null,
|
||||
};
|
||||
} else if (!matches) {
|
||||
let error = getInternalRouterError(404, { pathname: location.pathname });
|
||||
let { matches: notFoundMatches, route } =
|
||||
getShortCircuitMatches(dataRoutes);
|
||||
return {
|
||||
basename,
|
||||
location,
|
||||
matches: notFoundMatches,
|
||||
loaderData: {},
|
||||
actionData: null,
|
||||
errors: {
|
||||
[route.id]: error,
|
||||
},
|
||||
statusCode: error.status,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null,
|
||||
};
|
||||
}
|
||||
|
||||
let result = await queryImpl(
|
||||
request,
|
||||
location,
|
||||
matches,
|
||||
requestContext,
|
||||
dataStrategy || null,
|
||||
skipLoaderErrorBubbling === true,
|
||||
null
|
||||
);
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// When returning StaticHandlerContext, we patch back in the location here
|
||||
// since we need it for React Context. But this helps keep our submit and
|
||||
// loadRouteData operating on a Request instead of a Location
|
||||
return { location, basename, ...result };
|
||||
}
|
||||
|
||||
/**
|
||||
* The queryRoute() method is intended for targeted route requests, either
|
||||
* for fetch ?_data requests or resource route requests. In this case, we
|
||||
* are only ever calling a single action or loader, and we are returning the
|
||||
* returned value directly. In most cases, this will be a Response returned
|
||||
* from the action/loader, but it may be a primitive or other value as well -
|
||||
* and in such cases the calling context should handle that accordingly.
|
||||
*
|
||||
* We do respect the throw/return differentiation, so if an action/loader
|
||||
* throws, then this method will throw the value. This is important so we
|
||||
* can do proper boundary identification in Remix where a thrown Response
|
||||
* must go to the Catch Boundary but a returned Response is happy-path.
|
||||
*
|
||||
* One thing to note is that any Router-initiated Errors that make sense
|
||||
* to associate with a status code will be thrown as an ErrorResponse
|
||||
* instance which include the raw Error, such that the calling context can
|
||||
* serialize the error as they see fit while including the proper response
|
||||
* code. Examples here are 404 and 405 errors that occur prior to reaching
|
||||
* any user-defined loaders.
|
||||
*
|
||||
* - `opts.routeId` allows you to specify the specific route handler to call.
|
||||
* If not provided the handler will determine the proper route by matching
|
||||
* against `request.url`
|
||||
* - `opts.requestContext` is an optional server context that will be passed
|
||||
* to actions/loaders in the `context` parameter
|
||||
*/
|
||||
async function queryRoute(
|
||||
request: Request,
|
||||
{
|
||||
routeId,
|
||||
requestContext,
|
||||
dataStrategy,
|
||||
}: {
|
||||
requestContext?: unknown;
|
||||
routeId?: string;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
} = {}
|
||||
): Promise<any> {
|
||||
let url = new URL(request.url);
|
||||
let method = request.method;
|
||||
let location = createLocation("", createPath(url), null, "default");
|
||||
let matches = matchRoutes(dataRoutes, location, basename);
|
||||
|
||||
// SSR supports HEAD requests while SPA doesn't
|
||||
if (!isValidMethod(method) && method !== "HEAD" && method !== "OPTIONS") {
|
||||
throw getInternalRouterError(405, { method });
|
||||
} else if (!matches) {
|
||||
throw getInternalRouterError(404, { pathname: location.pathname });
|
||||
}
|
||||
|
||||
let match = routeId
|
||||
? matches.find((m) => m.route.id === routeId)
|
||||
: getTargetMatch(matches, location);
|
||||
|
||||
if (routeId && !match) {
|
||||
throw getInternalRouterError(403, {
|
||||
pathname: location.pathname,
|
||||
routeId,
|
||||
});
|
||||
} else if (!match) {
|
||||
// This should never hit I don't think?
|
||||
throw getInternalRouterError(404, { pathname: location.pathname });
|
||||
}
|
||||
|
||||
let result = await queryImpl(
|
||||
request,
|
||||
location,
|
||||
matches,
|
||||
requestContext,
|
||||
dataStrategy || null,
|
||||
false,
|
||||
match
|
||||
);
|
||||
|
||||
if (isResponse(result)) {
|
||||
return result;
|
||||
}
|
||||
|
||||
let error = result.errors ? Object.values(result.errors)[0] : undefined;
|
||||
if (error !== undefined) {
|
||||
// If we got back result.errors, that means the loader/action threw
|
||||
// _something_ that wasn't a Response, but it's not guaranteed/required
|
||||
// to be an `instanceof Error` either, so we have to use throw here to
|
||||
// preserve the "error" state outside of queryImpl.
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Pick off the right state value to return
|
||||
if (result.actionData) {
|
||||
return Object.values(result.actionData)[0];
|
||||
}
|
||||
|
||||
if (result.loaderData) {
|
||||
let data = Object.values(result.loaderData)[0];
|
||||
if (result.activeDeferreds?.[match.route.id]) {
|
||||
data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
async function queryImpl(
|
||||
request: Request,
|
||||
location: Location,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
requestContext: unknown,
|
||||
dataStrategy: DataStrategyFunction | null,
|
||||
skipLoaderErrorBubbling: boolean,
|
||||
routeMatch: AgnosticDataRouteMatch | null
|
||||
): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
|
||||
invariant(
|
||||
request.signal,
|
||||
"query()/queryRoute() requests must contain an AbortController signal"
|
||||
);
|
||||
|
||||
try {
|
||||
if (isMutationMethod(request.method.toLowerCase())) {
|
||||
let result = await submit(
|
||||
request,
|
||||
matches,
|
||||
routeMatch || getTargetMatch(matches, location),
|
||||
requestContext,
|
||||
dataStrategy,
|
||||
skipLoaderErrorBubbling,
|
||||
routeMatch != null
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
let result = await loadRouteData(
|
||||
request,
|
||||
matches,
|
||||
requestContext,
|
||||
dataStrategy,
|
||||
skipLoaderErrorBubbling,
|
||||
routeMatch
|
||||
);
|
||||
return isResponse(result)
|
||||
? result
|
||||
: {
|
||||
...result,
|
||||
actionData: null,
|
||||
actionHeaders: {},
|
||||
};
|
||||
} catch (e) {
|
||||
// If the user threw/returned a Response in callLoaderOrAction for a
|
||||
// `queryRoute` call, we throw the `DataStrategyResult` to bail out early
|
||||
// and then return or throw the raw Response here accordingly
|
||||
if (isDataStrategyResult(e) && isResponse(e.result)) {
|
||||
if (e.type === ResultType.error) {
|
||||
throw e.result;
|
||||
}
|
||||
return e.result;
|
||||
}
|
||||
// Redirects are always returned since they don't propagate to catch
|
||||
// boundaries
|
||||
if (isRedirectResponse(e)) {
|
||||
return e;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(
|
||||
request: Request,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
actionMatch: AgnosticDataRouteMatch,
|
||||
requestContext: unknown,
|
||||
dataStrategy: DataStrategyFunction | null,
|
||||
skipLoaderErrorBubbling: boolean,
|
||||
isRouteRequest: boolean
|
||||
): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
|
||||
let result: DataResult;
|
||||
|
||||
if (!actionMatch.route.action && !actionMatch.route.lazy) {
|
||||
let error = getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: actionMatch.route.id,
|
||||
});
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error,
|
||||
};
|
||||
} else {
|
||||
let results = await callDataStrategy(
|
||||
"action",
|
||||
request,
|
||||
[actionMatch],
|
||||
matches,
|
||||
isRouteRequest,
|
||||
requestContext,
|
||||
dataStrategy
|
||||
);
|
||||
result = results[actionMatch.route.id];
|
||||
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
}
|
||||
|
||||
if (isRedirectResult(result)) {
|
||||
// Uhhhh - this should never happen, we should always throw these from
|
||||
// callLoaderOrAction, but the type narrowing here keeps TS happy and we
|
||||
// can get back on the "throw all redirect responses" train here should
|
||||
// this ever happen :/
|
||||
throw new Response(null, {
|
||||
status: result.response.status,
|
||||
headers: {
|
||||
Location: result.response.headers.get("Location")!,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (isDeferredResult(result)) {
|
||||
let error = getInternalRouterError(400, { type: "defer-action" });
|
||||
if (isRouteRequest) {
|
||||
throw error;
|
||||
}
|
||||
result = {
|
||||
type: ResultType.error,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
if (isRouteRequest) {
|
||||
// Note: This should only be non-Response values if we get here, since
|
||||
// isRouteRequest should throw any Response received in callLoaderOrAction
|
||||
if (isErrorResult(result)) {
|
||||
throw result.error;
|
||||
}
|
||||
|
||||
return {
|
||||
matches: [actionMatch],
|
||||
loaderData: {},
|
||||
actionData: { [actionMatch.route.id]: result.data },
|
||||
errors: null,
|
||||
// Note: statusCode + headers are unused here since queryRoute will
|
||||
// return the raw Response or value
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
actionHeaders: {},
|
||||
activeDeferreds: null,
|
||||
};
|
||||
}
|
||||
|
||||
// Create a GET request for the loaders
|
||||
let loaderRequest = new Request(request.url, {
|
||||
headers: request.headers,
|
||||
redirect: request.redirect,
|
||||
signal: request.signal,
|
||||
});
|
||||
|
||||
if (isErrorResult(result)) {
|
||||
// Store off the pending error - we use it to determine which loaders
|
||||
// to call and will commit it when we complete the navigation
|
||||
let boundaryMatch = skipLoaderErrorBubbling
|
||||
? actionMatch
|
||||
: findNearestBoundary(matches, actionMatch.route.id);
|
||||
|
||||
let context = await loadRouteData(
|
||||
loaderRequest,
|
||||
matches,
|
||||
requestContext,
|
||||
dataStrategy,
|
||||
skipLoaderErrorBubbling,
|
||||
null,
|
||||
[boundaryMatch.route.id, result]
|
||||
);
|
||||
|
||||
// action status codes take precedence over loader status codes
|
||||
return {
|
||||
...context,
|
||||
statusCode: isRouteErrorResponse(result.error)
|
||||
? result.error.status
|
||||
: result.statusCode != null
|
||||
? result.statusCode
|
||||
: 500,
|
||||
actionData: null,
|
||||
actionHeaders: {
|
||||
...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let context = await loadRouteData(
|
||||
loaderRequest,
|
||||
matches,
|
||||
requestContext,
|
||||
dataStrategy,
|
||||
skipLoaderErrorBubbling,
|
||||
null
|
||||
);
|
||||
|
||||
return {
|
||||
...context,
|
||||
actionData: {
|
||||
[actionMatch.route.id]: result.data,
|
||||
},
|
||||
// action status codes take precedence over loader status codes
|
||||
...(result.statusCode ? { statusCode: result.statusCode } : {}),
|
||||
actionHeaders: result.headers
|
||||
? { [actionMatch.route.id]: result.headers }
|
||||
: {},
|
||||
};
|
||||
}
|
||||
|
||||
async function loadRouteData(
|
||||
request: Request,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
requestContext: unknown,
|
||||
dataStrategy: DataStrategyFunction | null,
|
||||
skipLoaderErrorBubbling: boolean,
|
||||
routeMatch: AgnosticDataRouteMatch | null,
|
||||
pendingActionResult?: PendingActionResult
|
||||
): Promise<
|
||||
| Omit<
|
||||
StaticHandlerContext,
|
||||
"location" | "basename" | "actionData" | "actionHeaders"
|
||||
>
|
||||
| Response
|
||||
> {
|
||||
let isRouteRequest = routeMatch != null;
|
||||
|
||||
// Short circuit if we have no loaders to run (queryRoute())
|
||||
if (
|
||||
isRouteRequest &&
|
||||
!routeMatch?.route.loader &&
|
||||
!routeMatch?.route.lazy
|
||||
) {
|
||||
throw getInternalRouterError(400, {
|
||||
method: request.method,
|
||||
pathname: new URL(request.url).pathname,
|
||||
routeId: routeMatch?.route.id,
|
||||
});
|
||||
}
|
||||
|
||||
let requestMatches = routeMatch
|
||||
? [routeMatch]
|
||||
: pendingActionResult && isErrorResult(pendingActionResult[1])
|
||||
? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0])
|
||||
: matches;
|
||||
let matchesToLoad = requestMatches.filter(
|
||||
(m) => m.route.loader || m.route.lazy
|
||||
);
|
||||
|
||||
// Short circuit if we have no loaders to run (query())
|
||||
if (matchesToLoad.length === 0) {
|
||||
return {
|
||||
matches,
|
||||
// Add a null for all matched routes for proper revalidation on the client
|
||||
loaderData: matches.reduce(
|
||||
(acc, m) => Object.assign(acc, { [m.route.id]: null }),
|
||||
{}
|
||||
),
|
||||
errors:
|
||||
pendingActionResult && isErrorResult(pendingActionResult[1])
|
||||
? {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].error,
|
||||
}
|
||||
: null,
|
||||
statusCode: 200,
|
||||
loaderHeaders: {},
|
||||
activeDeferreds: null,
|
||||
};
|
||||
}
|
||||
|
||||
let results = await callDataStrategy(
|
||||
"loader",
|
||||
request,
|
||||
matchesToLoad,
|
||||
matches,
|
||||
isRouteRequest,
|
||||
requestContext,
|
||||
dataStrategy
|
||||
);
|
||||
|
||||
if (request.signal.aborted) {
|
||||
throwStaticHandlerAbortedError(request, isRouteRequest, future);
|
||||
}
|
||||
|
||||
// Process and commit output from loaders
|
||||
let activeDeferreds = new Map<string, DeferredData>();
|
||||
let context = processRouteLoaderData(
|
||||
matches,
|
||||
results,
|
||||
pendingActionResult,
|
||||
activeDeferreds,
|
||||
skipLoaderErrorBubbling
|
||||
);
|
||||
|
||||
// Add a null for any non-loader matches for proper revalidation on the client
|
||||
let executedLoaders = new Set<string>(
|
||||
matchesToLoad.map((match) => match.route.id)
|
||||
);
|
||||
matches.forEach((match) => {
|
||||
if (!executedLoaders.has(match.route.id)) {
|
||||
context.loaderData[match.route.id] = null;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
...context,
|
||||
matches,
|
||||
activeDeferreds:
|
||||
activeDeferreds.size > 0
|
||||
? Object.fromEntries(activeDeferreds.entries())
|
||||
: null,
|
||||
};
|
||||
}
|
||||
|
||||
// Utility wrapper for calling dataStrategy server-side without having to
|
||||
// pass around the manifest, mapRouteProperties, etc.
|
||||
async function callDataStrategy(
|
||||
type: "loader" | "action",
|
||||
request: Request,
|
||||
matchesToLoad: AgnosticDataRouteMatch[],
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
isRouteRequest: boolean,
|
||||
requestContext: unknown,
|
||||
dataStrategy: DataStrategyFunction | null
|
||||
): Promise<Record<string, DataResult>> {
|
||||
let results = await callDataStrategyImpl(
|
||||
dataStrategy || defaultDataStrategy,
|
||||
type,
|
||||
null,
|
||||
request,
|
||||
matchesToLoad,
|
||||
matches,
|
||||
null,
|
||||
manifest,
|
||||
mapRouteProperties,
|
||||
requestContext
|
||||
);
|
||||
|
||||
let dataResults: Record<string, DataResult> = {};
|
||||
await Promise.all(
|
||||
matches.map(async (match) => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let result = results[match.route.id];
|
||||
if (isRedirectDataStrategyResultResult(result)) {
|
||||
let response = result.result as Response;
|
||||
// Throw redirects and let the server handle them with an HTTP redirect
|
||||
throw normalizeRelativeRoutingRedirectResponse(
|
||||
response,
|
||||
request,
|
||||
match.route.id,
|
||||
matches,
|
||||
basename,
|
||||
future.v7_relativeSplatPath
|
||||
);
|
||||
}
|
||||
if (isResponse(result.result) && isRouteRequest) {
|
||||
// For SSR single-route requests, we want to hand Responses back
|
||||
// directly without unwrapping
|
||||
throw result;
|
||||
}
|
||||
|
||||
dataResults[match.route.id] =
|
||||
await convertDataStrategyResultToDataResult(result);
|
||||
})
|
||||
);
|
||||
return dataResults;
|
||||
}
|
||||
|
||||
return {
|
||||
dataRoutes,
|
||||
query,
|
||||
queryRoute,
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
//#region Helpers
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Given an existing StaticHandlerContext and an error thrown at render time,
|
||||
* provide an updated StaticHandlerContext suitable for a second SSR render
|
||||
*/
|
||||
export function getStaticContextFromError(
|
||||
routes: AgnosticDataRouteObject[],
|
||||
context: StaticHandlerContext,
|
||||
error: any
|
||||
) {
|
||||
let newContext: StaticHandlerContext = {
|
||||
...context,
|
||||
statusCode: isRouteErrorResponse(error) ? error.status : 500,
|
||||
errors: {
|
||||
[context._deepestRenderedBoundaryId || routes[0].id]: error,
|
||||
},
|
||||
};
|
||||
return newContext;
|
||||
}
|
||||
|
||||
function throwStaticHandlerAbortedError(
|
||||
request: Request,
|
||||
isRouteRequest: boolean,
|
||||
future: StaticHandlerFutureConfig
|
||||
) {
|
||||
if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
|
||||
throw request.signal.reason;
|
||||
}
|
||||
|
||||
let method = isRouteRequest ? "queryRoute" : "query";
|
||||
throw new Error(`${method}() call aborted: ${request.method} ${request.url}`);
|
||||
}
|
||||
|
||||
function isSubmissionNavigation(
|
||||
opts: BaseNavigateOrFetchOptions
|
||||
): opts is SubmissionNavigateOptions {
|
||||
return (
|
||||
opts != null &&
|
||||
(("formData" in opts && opts.formData != null) ||
|
||||
("body" in opts && opts.body !== undefined))
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeTo(
|
||||
location: Path,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
basename: string,
|
||||
prependBasename: boolean,
|
||||
to: To | null,
|
||||
v7_relativeSplatPath: boolean,
|
||||
fromRouteId?: string,
|
||||
relative?: RelativeRoutingType
|
||||
) {
|
||||
let contextualMatches: AgnosticDataRouteMatch[];
|
||||
let activeRouteMatch: AgnosticDataRouteMatch | undefined;
|
||||
if (fromRouteId) {
|
||||
// Grab matches up to the calling route so our route-relative logic is
|
||||
// relative to the correct source route
|
||||
contextualMatches = [];
|
||||
for (let match of matches) {
|
||||
contextualMatches.push(match);
|
||||
if (match.route.id === fromRouteId) {
|
||||
activeRouteMatch = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
contextualMatches = matches;
|
||||
activeRouteMatch = matches[matches.length - 1];
|
||||
}
|
||||
|
||||
// Resolve the relative path
|
||||
let path = resolveTo(
|
||||
to ? to : ".",
|
||||
getResolveToMatches(contextualMatches, v7_relativeSplatPath),
|
||||
stripBasename(location.pathname, basename) || location.pathname,
|
||||
relative === "path"
|
||||
);
|
||||
|
||||
// When `to` is not specified we inherit search/hash from the current
|
||||
// location, unlike when to="." and we just inherit the path.
|
||||
// See https://github.com/remix-run/remix/issues/927
|
||||
if (to == null) {
|
||||
path.search = location.search;
|
||||
path.hash = location.hash;
|
||||
}
|
||||
|
||||
// Account for `?index` params when routing to the current location
|
||||
if ((to == null || to === "" || to === ".") && activeRouteMatch) {
|
||||
let nakedIndex = hasNakedIndexQuery(path.search);
|
||||
if (activeRouteMatch.route.index && !nakedIndex) {
|
||||
// Add one when we're targeting an index route
|
||||
path.search = path.search
|
||||
? path.search.replace(/^\?/, "?index&")
|
||||
: "?index";
|
||||
} else if (!activeRouteMatch.route.index && nakedIndex) {
|
||||
// Remove existing ones when we're not
|
||||
let params = new URLSearchParams(path.search);
|
||||
let indexValues = params.getAll("index");
|
||||
params.delete("index");
|
||||
indexValues.filter((v) => v).forEach((v) => params.append("index", v));
|
||||
let qs = params.toString();
|
||||
path.search = qs ? `?${qs}` : "";
|
||||
}
|
||||
}
|
||||
|
||||
// If we're operating within a basename, prepend it to the pathname. If
|
||||
// this is a root navigation, then just use the raw basename which allows
|
||||
// the basename to have full control over the presence of a trailing slash
|
||||
// on root actions
|
||||
if (prependBasename && basename !== "/") {
|
||||
path.pathname =
|
||||
path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
|
||||
}
|
||||
|
||||
return createPath(path);
|
||||
}
|
||||
|
||||
// Normalize navigation options by converting formMethod=GET formData objects to
|
||||
// URLSearchParams so they behave identically to links with query params
|
||||
function normalizeNavigateOptions(
|
||||
normalizeFormMethod: boolean,
|
||||
isFetcher: boolean,
|
||||
path: string,
|
||||
opts?: BaseNavigateOrFetchOptions
|
||||
): {
|
||||
path: string;
|
||||
submission?: Submission;
|
||||
error?: ErrorResponseImpl;
|
||||
} {
|
||||
// Return location verbatim on non-submission navigations
|
||||
if (!opts || !isSubmissionNavigation(opts)) {
|
||||
return { path };
|
||||
}
|
||||
|
||||
if (opts.formMethod && !isValidMethod(opts.formMethod)) {
|
||||
return {
|
||||
path,
|
||||
error: getInternalRouterError(405, { method: opts.formMethod }),
|
||||
};
|
||||
}
|
||||
|
||||
let getInvalidBodyError = () => ({
|
||||
path,
|
||||
error: getInternalRouterError(400, { type: "invalid-body" }),
|
||||
});
|
||||
|
||||
// Create a Submission on non-GET navigations
|
||||
let rawFormMethod = opts.formMethod || "get";
|
||||
let formMethod = normalizeFormMethod
|
||||
? (rawFormMethod.toUpperCase() as V7_FormMethod)
|
||||
: (rawFormMethod.toLowerCase() as FormMethod);
|
||||
let formAction = stripHashFromPath(path);
|
||||
|
||||
if (opts.body !== undefined) {
|
||||
if (opts.formEncType === "text/plain") {
|
||||
// text only support POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
|
||||
let text =
|
||||
typeof opts.body === "string"
|
||||
? opts.body
|
||||
: opts.body instanceof FormData ||
|
||||
opts.body instanceof URLSearchParams
|
||||
? // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
|
||||
Array.from(opts.body.entries()).reduce(
|
||||
(acc, [name, value]) => `${acc}${name}=${value}\n`,
|
||||
""
|
||||
)
|
||||
: String(opts.body);
|
||||
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text,
|
||||
},
|
||||
};
|
||||
} else if (opts.formEncType === "application/json") {
|
||||
// json only supports POST/PUT/PATCH/DELETE submissions
|
||||
if (!isMutationMethod(formMethod)) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
|
||||
try {
|
||||
let json =
|
||||
typeof opts.body === "string" ? JSON.parse(opts.body) : opts.body;
|
||||
|
||||
return {
|
||||
path,
|
||||
submission: {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType: opts.formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined,
|
||||
},
|
||||
};
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
invariant(
|
||||
typeof FormData === "function",
|
||||
"FormData is not available in this environment"
|
||||
);
|
||||
|
||||
let searchParams: URLSearchParams;
|
||||
let formData: FormData;
|
||||
|
||||
if (opts.formData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.formData);
|
||||
formData = opts.formData;
|
||||
} else if (opts.body instanceof FormData) {
|
||||
searchParams = convertFormDataToSearchParams(opts.body);
|
||||
formData = opts.body;
|
||||
} else if (opts.body instanceof URLSearchParams) {
|
||||
searchParams = opts.body;
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} else if (opts.body == null) {
|
||||
searchParams = new URLSearchParams();
|
||||
formData = new FormData();
|
||||
} else {
|
||||
try {
|
||||
searchParams = new URLSearchParams(opts.body);
|
||||
formData = convertSearchParamsToFormData(searchParams);
|
||||
} catch (e) {
|
||||
return getInvalidBodyError();
|
||||
}
|
||||
}
|
||||
|
||||
let submission: Submission = {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType:
|
||||
(opts && opts.formEncType) || "application/x-www-form-urlencoded",
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
};
|
||||
|
||||
if (isMutationMethod(submission.formMethod)) {
|
||||
return { path, submission };
|
||||
}
|
||||
|
||||
// Flatten submission onto URLSearchParams for GET submissions
|
||||
let parsedPath = parsePath(path);
|
||||
// On GET navigation submissions we can drop the ?index param from the
|
||||
// resulting location since all loaders will run. But fetcher GET submissions
|
||||
// only run a single loader so we need to preserve any incoming ?index params
|
||||
if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
|
||||
searchParams.append("index", "");
|
||||
}
|
||||
parsedPath.search = `?${searchParams}`;
|
||||
|
||||
return { path: createPath(parsedPath), submission };
|
||||
}
|
||||
|
||||
// Filter out all routes at/below any caught error as they aren't going to
|
||||
// render so we don't need to load them
|
||||
function getLoaderMatchesUntilBoundary(
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
boundaryId: string,
|
||||
includeBoundary = false
|
||||
) {
|
||||
let index = matches.findIndex((m) => m.route.id === boundaryId);
|
||||
if (index >= 0) {
|
||||
return matches.slice(0, includeBoundary ? index + 1 : index);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
|
||||
function getMatchesToLoad(
|
||||
history: History,
|
||||
state: RouterState,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
submission: Submission | undefined,
|
||||
location: Location,
|
||||
initialHydration: boolean,
|
||||
skipActionErrorRevalidation: boolean,
|
||||
isRevalidationRequired: boolean,
|
||||
cancelledDeferredRoutes: string[],
|
||||
cancelledFetcherLoads: Set<string>,
|
||||
deletedFetchers: Set<string>,
|
||||
fetchLoadMatches: Map<string, FetchLoadMatch>,
|
||||
fetchRedirectIds: Set<string>,
|
||||
routesToUse: AgnosticDataRouteObject[],
|
||||
basename: string | undefined,
|
||||
pendingActionResult?: PendingActionResult
|
||||
): [AgnosticDataRouteMatch[], RevalidatingFetcher[]] {
|
||||
let actionResult = pendingActionResult
|
||||
? isErrorResult(pendingActionResult[1])
|
||||
? pendingActionResult[1].error
|
||||
: pendingActionResult[1].data
|
||||
: undefined;
|
||||
let currentUrl = history.createURL(state.location);
|
||||
let nextUrl = history.createURL(location);
|
||||
|
||||
// Pick navigation matches that are net-new or qualify for revalidation
|
||||
let boundaryMatches = matches;
|
||||
if (initialHydration && state.errors) {
|
||||
// On initial hydration, only consider matches up to _and including_ the boundary.
|
||||
// This is inclusive to handle cases where a server loader ran successfully,
|
||||
// a child server loader bubbled up to this route, but this route has
|
||||
// `clientLoader.hydrate` so we want to still run the `clientLoader` so that
|
||||
// we have a complete version of `loaderData`
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(
|
||||
matches,
|
||||
Object.keys(state.errors)[0],
|
||||
true
|
||||
);
|
||||
} else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
|
||||
// If an action threw an error, we call loaders up to, but not including the
|
||||
// boundary
|
||||
boundaryMatches = getLoaderMatchesUntilBoundary(
|
||||
matches,
|
||||
pendingActionResult[0]
|
||||
);
|
||||
}
|
||||
|
||||
// Don't revalidate loaders by default after action 4xx/5xx responses
|
||||
// when the flag is enabled. They can still opt-into revalidation via
|
||||
// `shouldRevalidate` via `actionResult`
|
||||
let actionStatus = pendingActionResult
|
||||
? pendingActionResult[1].statusCode
|
||||
: undefined;
|
||||
let shouldSkipRevalidation =
|
||||
skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
|
||||
|
||||
let navigationMatches = boundaryMatches.filter((match, index) => {
|
||||
let { route } = match;
|
||||
if (route.lazy) {
|
||||
// We haven't loaded this route yet so we don't know if it's got a loader!
|
||||
return true;
|
||||
}
|
||||
|
||||
if (route.loader == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (initialHydration) {
|
||||
return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
|
||||
}
|
||||
|
||||
// Always call the loader on new route instances and pending defer cancellations
|
||||
if (
|
||||
isNewLoader(state.loaderData, state.matches[index], match) ||
|
||||
cancelledDeferredRoutes.some((id) => id === match.route.id)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// This is the default implementation for when we revalidate. If the route
|
||||
// provides it's own implementation, then we give them full control but
|
||||
// provide this value so they can leverage it if needed after they check
|
||||
// their own specific use cases
|
||||
let currentRouteMatch = state.matches[index];
|
||||
let nextRouteMatch = match;
|
||||
|
||||
return shouldRevalidateLoader(match, {
|
||||
currentUrl,
|
||||
currentParams: currentRouteMatch.params,
|
||||
nextUrl,
|
||||
nextParams: nextRouteMatch.params,
|
||||
...submission,
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation
|
||||
? false
|
||||
: // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
|
||||
isRevalidationRequired ||
|
||||
currentUrl.pathname + currentUrl.search ===
|
||||
nextUrl.pathname + nextUrl.search ||
|
||||
// Search params affect all loaders
|
||||
currentUrl.search !== nextUrl.search ||
|
||||
isNewRouteInstance(currentRouteMatch, nextRouteMatch),
|
||||
});
|
||||
});
|
||||
|
||||
// Pick fetcher.loads that need to be revalidated
|
||||
let revalidatingFetchers: RevalidatingFetcher[] = [];
|
||||
fetchLoadMatches.forEach((f, key) => {
|
||||
// Don't revalidate:
|
||||
// - on initial hydration (shouldn't be any fetchers then anyway)
|
||||
// - if fetcher won't be present in the subsequent render
|
||||
// - no longer matches the URL (v7_fetcherPersist=false)
|
||||
// - was unmounted but persisted due to v7_fetcherPersist=true
|
||||
if (
|
||||
initialHydration ||
|
||||
!matches.some((m) => m.route.id === f.routeId) ||
|
||||
deletedFetchers.has(key)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
|
||||
|
||||
// If the fetcher path no longer matches, push it in with null matches so
|
||||
// we can trigger a 404 in callLoadersAndMaybeResolveData. Note this is
|
||||
// currently only a use-case for Remix HMR where the route tree can change
|
||||
// at runtime and remove a route previously loaded via a fetcher
|
||||
if (!fetcherMatches) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: null,
|
||||
match: null,
|
||||
controller: null,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Revalidating fetchers are decoupled from the route matches since they
|
||||
// load from a static href. They revalidate based on explicit revalidation
|
||||
// (submission, useRevalidator, or X-Remix-Revalidate)
|
||||
let fetcher = state.fetchers.get(key);
|
||||
let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
|
||||
|
||||
let shouldRevalidate = false;
|
||||
if (fetchRedirectIds.has(key)) {
|
||||
// Never trigger a revalidation of an actively redirecting fetcher
|
||||
shouldRevalidate = false;
|
||||
} else if (cancelledFetcherLoads.has(key)) {
|
||||
// Always mark for revalidation if the fetcher was cancelled
|
||||
cancelledFetcherLoads.delete(key);
|
||||
shouldRevalidate = true;
|
||||
} else if (
|
||||
fetcher &&
|
||||
fetcher.state !== "idle" &&
|
||||
fetcher.data === undefined
|
||||
) {
|
||||
// If the fetcher hasn't ever completed loading yet, then this isn't a
|
||||
// revalidation, it would just be a brand new load if an explicit
|
||||
// revalidation is required
|
||||
shouldRevalidate = isRevalidationRequired;
|
||||
} else {
|
||||
// Otherwise fall back on any user-defined shouldRevalidate, defaulting
|
||||
// to explicit revalidations only
|
||||
shouldRevalidate = shouldRevalidateLoader(fetcherMatch, {
|
||||
currentUrl,
|
||||
currentParams: state.matches[state.matches.length - 1].params,
|
||||
nextUrl,
|
||||
nextParams: matches[matches.length - 1].params,
|
||||
...submission,
|
||||
actionResult,
|
||||
actionStatus,
|
||||
defaultShouldRevalidate: shouldSkipRevalidation
|
||||
? false
|
||||
: isRevalidationRequired,
|
||||
});
|
||||
}
|
||||
|
||||
if (shouldRevalidate) {
|
||||
revalidatingFetchers.push({
|
||||
key,
|
||||
routeId: f.routeId,
|
||||
path: f.path,
|
||||
matches: fetcherMatches,
|
||||
match: fetcherMatch,
|
||||
controller: new AbortController(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return [navigationMatches, revalidatingFetchers];
|
||||
}
|
||||
|
||||
function shouldLoadRouteOnHydration(
|
||||
route: AgnosticDataRouteObject,
|
||||
loaderData: RouteData | null | undefined,
|
||||
errors: RouteData | null | undefined
|
||||
) {
|
||||
// We dunno if we have a loader - gotta find out!
|
||||
if (route.lazy) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// No loader, nothing to initialize
|
||||
if (!route.loader) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let hasData = loaderData != null && loaderData[route.id] !== undefined;
|
||||
let hasError = errors != null && errors[route.id] !== undefined;
|
||||
|
||||
// Don't run if we error'd during SSR
|
||||
if (!hasData && hasError) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Explicitly opting-in to running on hydration
|
||||
if (typeof route.loader === "function" && route.loader.hydrate === true) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, run if we're not yet initialized with anything
|
||||
return !hasData && !hasError;
|
||||
}
|
||||
|
||||
function isNewLoader(
|
||||
currentLoaderData: RouteData,
|
||||
currentMatch: AgnosticDataRouteMatch,
|
||||
match: AgnosticDataRouteMatch
|
||||
) {
|
||||
let isNew =
|
||||
// [a] -> [a, b]
|
||||
!currentMatch ||
|
||||
// [a, b] -> [a, c]
|
||||
match.route.id !== currentMatch.route.id;
|
||||
|
||||
// Handle the case that we don't have data for a re-used route, potentially
|
||||
// from a prior error or from a cancelled pending deferred
|
||||
let isMissingData = currentLoaderData[match.route.id] === undefined;
|
||||
|
||||
// Always load if this is a net-new route or we don't yet have data
|
||||
return isNew || isMissingData;
|
||||
}
|
||||
|
||||
function isNewRouteInstance(
|
||||
currentMatch: AgnosticDataRouteMatch,
|
||||
match: AgnosticDataRouteMatch
|
||||
) {
|
||||
let currentPath = currentMatch.route.path;
|
||||
return (
|
||||
// param change for this match, /users/123 -> /users/456
|
||||
currentMatch.pathname !== match.pathname ||
|
||||
// splat param changed, which is not present in match.path
|
||||
// e.g. /files/images/avatar.jpg -> files/finances.xls
|
||||
(currentPath != null &&
|
||||
currentPath.endsWith("*") &&
|
||||
currentMatch.params["*"] !== match.params["*"])
|
||||
);
|
||||
}
|
||||
|
||||
function shouldRevalidateLoader(
|
||||
loaderMatch: AgnosticDataRouteMatch,
|
||||
arg: ShouldRevalidateFunctionArgs
|
||||
) {
|
||||
if (loaderMatch.route.shouldRevalidate) {
|
||||
let routeChoice = loaderMatch.route.shouldRevalidate(arg);
|
||||
if (typeof routeChoice === "boolean") {
|
||||
return routeChoice;
|
||||
}
|
||||
}
|
||||
|
||||
return arg.defaultShouldRevalidate;
|
||||
}
|
||||
|
||||
function patchRoutesImpl(
|
||||
routeId: string | null,
|
||||
children: AgnosticRouteObject[],
|
||||
routesToUse: AgnosticDataRouteObject[],
|
||||
manifest: RouteManifest,
|
||||
mapRouteProperties: MapRoutePropertiesFunction
|
||||
) {
|
||||
let childrenToPatch: AgnosticDataRouteObject[];
|
||||
if (routeId) {
|
||||
let route = manifest[routeId];
|
||||
invariant(
|
||||
route,
|
||||
`No route found to patch children into: routeId = ${routeId}`
|
||||
);
|
||||
if (!route.children) {
|
||||
route.children = [];
|
||||
}
|
||||
childrenToPatch = route.children;
|
||||
} else {
|
||||
childrenToPatch = routesToUse;
|
||||
}
|
||||
|
||||
// Don't patch in routes we already know about so that `patch` is idempotent
|
||||
// to simplify user-land code. This is useful because we re-call the
|
||||
// `patchRoutesOnNavigation` function for matched routes with params.
|
||||
let uniqueChildren = children.filter(
|
||||
(newRoute) =>
|
||||
!childrenToPatch.some((existingRoute) =>
|
||||
isSameRoute(newRoute, existingRoute)
|
||||
)
|
||||
);
|
||||
|
||||
let newRoutes = convertRoutesToDataRoutes(
|
||||
uniqueChildren,
|
||||
mapRouteProperties,
|
||||
[routeId || "_", "patch", String(childrenToPatch?.length || "0")],
|
||||
manifest
|
||||
);
|
||||
|
||||
childrenToPatch.push(...newRoutes);
|
||||
}
|
||||
|
||||
function isSameRoute(
|
||||
newRoute: AgnosticRouteObject,
|
||||
existingRoute: AgnosticRouteObject
|
||||
): boolean {
|
||||
// Most optimal check is by id
|
||||
if (
|
||||
"id" in newRoute &&
|
||||
"id" in existingRoute &&
|
||||
newRoute.id === existingRoute.id
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Second is by pathing differences
|
||||
if (
|
||||
!(
|
||||
newRoute.index === existingRoute.index &&
|
||||
newRoute.path === existingRoute.path &&
|
||||
newRoute.caseSensitive === existingRoute.caseSensitive
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Pathless layout routes are trickier since we need to check children.
|
||||
// If they have no children then they're the same as far as we can tell
|
||||
if (
|
||||
(!newRoute.children || newRoute.children.length === 0) &&
|
||||
(!existingRoute.children || existingRoute.children.length === 0)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, we look to see if every child in the new route is already
|
||||
// represented in the existing route's children
|
||||
return newRoute.children!.every((aChild, i) =>
|
||||
existingRoute.children?.some((bChild) => isSameRoute(aChild, bChild))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute route.lazy() methods to lazily load route modules (loader, action,
|
||||
* shouldRevalidate) and update the routeManifest in place which shares objects
|
||||
* with dataRoutes so those get updated as well.
|
||||
*/
|
||||
async function loadLazyRouteModule(
|
||||
route: AgnosticDataRouteObject,
|
||||
mapRouteProperties: MapRoutePropertiesFunction,
|
||||
manifest: RouteManifest
|
||||
) {
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
|
||||
let lazyRoute = await route.lazy();
|
||||
|
||||
// If the lazy route function was executed and removed by another parallel
|
||||
// call then we can return - first lazy() to finish wins because the return
|
||||
// value of lazy is expected to be static
|
||||
if (!route.lazy) {
|
||||
return;
|
||||
}
|
||||
|
||||
let routeToUpdate = manifest[route.id];
|
||||
invariant(routeToUpdate, "No route found in manifest");
|
||||
|
||||
// Update the route in place. This should be safe because there's no way
|
||||
// we could yet be sitting on this route as we can't get there without
|
||||
// resolving lazy() first.
|
||||
//
|
||||
// This is different than the HMR "update" use-case where we may actively be
|
||||
// on the route being updated. The main concern boils down to "does this
|
||||
// mutation affect any ongoing navigations or any current state.matches
|
||||
// values?". If not, it should be safe to update in place.
|
||||
let routeUpdates: Record<string, any> = {};
|
||||
for (let lazyRouteProperty in lazyRoute) {
|
||||
let staticRouteValue =
|
||||
routeToUpdate[lazyRouteProperty as keyof typeof routeToUpdate];
|
||||
|
||||
let isPropertyStaticallyDefined =
|
||||
staticRouteValue !== undefined &&
|
||||
// This property isn't static since it should always be updated based
|
||||
// on the route updates
|
||||
lazyRouteProperty !== "hasErrorBoundary";
|
||||
|
||||
warning(
|
||||
!isPropertyStaticallyDefined,
|
||||
`Route "${routeToUpdate.id}" has a static property "${lazyRouteProperty}" ` +
|
||||
`defined but its lazy function is also returning a value for this property. ` +
|
||||
`The lazy route property "${lazyRouteProperty}" will be ignored.`
|
||||
);
|
||||
|
||||
if (
|
||||
!isPropertyStaticallyDefined &&
|
||||
!immutableRouteKeys.has(lazyRouteProperty as ImmutableRouteKey)
|
||||
) {
|
||||
routeUpdates[lazyRouteProperty] =
|
||||
lazyRoute[lazyRouteProperty as keyof typeof lazyRoute];
|
||||
}
|
||||
}
|
||||
|
||||
// Mutate the route with the provided updates. Do this first so we pass
|
||||
// the updated version to mapRouteProperties
|
||||
Object.assign(routeToUpdate, routeUpdates);
|
||||
|
||||
// Mutate the `hasErrorBoundary` property on the route based on the route
|
||||
// updates and remove the `lazy` function so we don't resolve the lazy
|
||||
// route again.
|
||||
Object.assign(routeToUpdate, {
|
||||
// To keep things framework agnostic, we use the provided
|
||||
// `mapRouteProperties` (or wrapped `detectErrorBoundary`) function to
|
||||
// set the framework-aware properties (`element`/`hasErrorBoundary`) since
|
||||
// the logic will differ between frameworks.
|
||||
...mapRouteProperties(routeToUpdate),
|
||||
lazy: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
// Default implementation of `dataStrategy` which fetches all loaders in parallel
|
||||
async function defaultDataStrategy({
|
||||
matches,
|
||||
}: DataStrategyFunctionArgs): ReturnType<DataStrategyFunction> {
|
||||
let matchesToLoad = matches.filter((m) => m.shouldLoad);
|
||||
let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
|
||||
return results.reduce(
|
||||
(acc, result, i) =>
|
||||
Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
||||
async function callDataStrategyImpl(
|
||||
dataStrategyImpl: DataStrategyFunction,
|
||||
type: "loader" | "action",
|
||||
state: RouterState | null,
|
||||
request: Request,
|
||||
matchesToLoad: AgnosticDataRouteMatch[],
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
fetcherKey: string | null,
|
||||
manifest: RouteManifest,
|
||||
mapRouteProperties: MapRoutePropertiesFunction,
|
||||
requestContext?: unknown
|
||||
): Promise<Record<string, DataStrategyResult>> {
|
||||
let loadRouteDefinitionsPromises = matches.map((m) =>
|
||||
m.route.lazy
|
||||
? loadLazyRouteModule(m.route, mapRouteProperties, manifest)
|
||||
: undefined
|
||||
);
|
||||
|
||||
let dsMatches = matches.map((match, i) => {
|
||||
let loadRoutePromise = loadRouteDefinitionsPromises[i];
|
||||
let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
|
||||
// `resolve` encapsulates route.lazy(), executing the loader/action,
|
||||
// and mapping return values/thrown errors to a `DataStrategyResult`. Users
|
||||
// can pass a callback to take fine-grained control over the execution
|
||||
// of the loader/action
|
||||
let resolve: DataStrategyMatch["resolve"] = async (handlerOverride) => {
|
||||
if (
|
||||
handlerOverride &&
|
||||
request.method === "GET" &&
|
||||
(match.route.lazy || match.route.loader)
|
||||
) {
|
||||
shouldLoad = true;
|
||||
}
|
||||
return shouldLoad
|
||||
? callLoaderOrAction(
|
||||
type,
|
||||
request,
|
||||
match,
|
||||
loadRoutePromise,
|
||||
handlerOverride,
|
||||
requestContext
|
||||
)
|
||||
: Promise.resolve({ type: ResultType.data, result: undefined });
|
||||
};
|
||||
|
||||
return {
|
||||
...match,
|
||||
shouldLoad,
|
||||
resolve,
|
||||
};
|
||||
});
|
||||
|
||||
// Send all matches here to allow for a middleware-type implementation.
|
||||
// handler will be a no-op for unneeded routes and we filter those results
|
||||
// back out below.
|
||||
let results = await dataStrategyImpl({
|
||||
matches: dsMatches,
|
||||
request,
|
||||
params: matches[0].params,
|
||||
fetcherKey,
|
||||
context: requestContext,
|
||||
});
|
||||
|
||||
// Wait for all routes to load here but 'swallow the error since we want
|
||||
// it to bubble up from the `await loadRoutePromise` in `callLoaderOrAction` -
|
||||
// called from `match.resolve()`
|
||||
try {
|
||||
await Promise.all(loadRouteDefinitionsPromises);
|
||||
} catch (e) {
|
||||
// No-op
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
// Default logic for calling a loader/action is the user has no specified a dataStrategy
|
||||
async function callLoaderOrAction(
|
||||
type: "loader" | "action",
|
||||
request: Request,
|
||||
match: AgnosticDataRouteMatch,
|
||||
loadRoutePromise: Promise<void> | undefined,
|
||||
handlerOverride: Parameters<DataStrategyMatch["resolve"]>[0],
|
||||
staticContext?: unknown
|
||||
): Promise<DataStrategyResult> {
|
||||
let result: DataStrategyResult;
|
||||
let onReject: (() => void) | undefined;
|
||||
|
||||
let runHandler = (
|
||||
handler: AgnosticRouteObject["loader"] | AgnosticRouteObject["action"]
|
||||
): Promise<DataStrategyResult> => {
|
||||
// Setup a promise we can race against so that abort signals short circuit
|
||||
let reject: () => void;
|
||||
// This will never resolve so safe to type it as Promise<DataStrategyResult> to
|
||||
// satisfy the function return value
|
||||
let abortPromise = new Promise<DataStrategyResult>((_, r) => (reject = r));
|
||||
onReject = () => reject();
|
||||
request.signal.addEventListener("abort", onReject);
|
||||
|
||||
let actualHandler = (ctx?: unknown) => {
|
||||
if (typeof handler !== "function") {
|
||||
return Promise.reject(
|
||||
new Error(
|
||||
`You cannot call the handler for a route which defines a boolean ` +
|
||||
`"${type}" [routeId: ${match.route.id}]`
|
||||
)
|
||||
);
|
||||
}
|
||||
return handler(
|
||||
{
|
||||
request,
|
||||
params: match.params,
|
||||
context: staticContext,
|
||||
},
|
||||
...(ctx !== undefined ? [ctx] : [])
|
||||
);
|
||||
};
|
||||
|
||||
let handlerPromise: Promise<DataStrategyResult> = (async () => {
|
||||
try {
|
||||
let val = await (handlerOverride
|
||||
? handlerOverride((ctx: unknown) => actualHandler(ctx))
|
||||
: actualHandler());
|
||||
return { type: "data", result: val };
|
||||
} catch (e) {
|
||||
return { type: "error", result: e };
|
||||
}
|
||||
})();
|
||||
|
||||
return Promise.race([handlerPromise, abortPromise]);
|
||||
};
|
||||
|
||||
try {
|
||||
let handler = match.route[type];
|
||||
|
||||
// If we have a route.lazy promise, await that first
|
||||
if (loadRoutePromise) {
|
||||
if (handler) {
|
||||
// Run statically defined handler in parallel with lazy()
|
||||
let handlerError;
|
||||
let [value] = await Promise.all([
|
||||
// If the handler throws, don't let it immediately bubble out,
|
||||
// since we need to let the lazy() execution finish so we know if this
|
||||
// route has a boundary that can handle the error
|
||||
runHandler(handler).catch((e) => {
|
||||
handlerError = e;
|
||||
}),
|
||||
loadRoutePromise,
|
||||
]);
|
||||
if (handlerError !== undefined) {
|
||||
throw handlerError;
|
||||
}
|
||||
result = value!;
|
||||
} else {
|
||||
// Load lazy route module, then run any returned handler
|
||||
await loadRoutePromise;
|
||||
|
||||
handler = match.route[type];
|
||||
if (handler) {
|
||||
// Handler still runs even if we got interrupted to maintain consistency
|
||||
// with un-abortable behavior of handler execution on non-lazy or
|
||||
// previously-lazy-loaded routes
|
||||
result = await runHandler(handler);
|
||||
} else if (type === "action") {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(405, {
|
||||
method: request.method,
|
||||
pathname,
|
||||
routeId: match.route.id,
|
||||
});
|
||||
} else {
|
||||
// lazy() route has no loader to run. Short circuit here so we don't
|
||||
// hit the invariant below that errors on returning undefined.
|
||||
return { type: ResultType.data, result: undefined };
|
||||
}
|
||||
}
|
||||
} else if (!handler) {
|
||||
let url = new URL(request.url);
|
||||
let pathname = url.pathname + url.search;
|
||||
throw getInternalRouterError(404, {
|
||||
pathname,
|
||||
});
|
||||
} else {
|
||||
result = await runHandler(handler);
|
||||
}
|
||||
|
||||
invariant(
|
||||
result.result !== undefined,
|
||||
`You defined ${type === "action" ? "an action" : "a loader"} for route ` +
|
||||
`"${match.route.id}" but didn't return anything from your \`${type}\` ` +
|
||||
`function. Please return a value or \`null\`.`
|
||||
);
|
||||
} catch (e) {
|
||||
// We should already be catching and converting normal handler executions to
|
||||
// DataStrategyResults and returning them, so anything that throws here is an
|
||||
// unexpected error we still need to wrap
|
||||
return { type: ResultType.error, result: e };
|
||||
} finally {
|
||||
if (onReject) {
|
||||
request.signal.removeEventListener("abort", onReject);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
async function convertDataStrategyResultToDataResult(
|
||||
dataStrategyResult: DataStrategyResult
|
||||
): Promise<DataResult> {
|
||||
let { result, type } = dataStrategyResult;
|
||||
|
||||
if (isResponse(result)) {
|
||||
let data: any;
|
||||
|
||||
try {
|
||||
let contentType = result.headers.get("Content-Type");
|
||||
// Check between word boundaries instead of startsWith() due to the last
|
||||
// paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
|
||||
if (contentType && /\bapplication\/json\b/.test(contentType)) {
|
||||
if (result.body == null) {
|
||||
data = null;
|
||||
} else {
|
||||
data = await result.json();
|
||||
}
|
||||
} else {
|
||||
data = await result.text();
|
||||
}
|
||||
} catch (e) {
|
||||
return { type: ResultType.error, error: e };
|
||||
}
|
||||
|
||||
if (type === ResultType.error) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(result.status, result.statusText, data),
|
||||
statusCode: result.status,
|
||||
headers: result.headers,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data,
|
||||
statusCode: result.status,
|
||||
headers: result.headers,
|
||||
};
|
||||
}
|
||||
|
||||
if (type === ResultType.error) {
|
||||
if (isDataWithResponseInit(result)) {
|
||||
if (result.data instanceof Error) {
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result.data,
|
||||
statusCode: result.init?.status,
|
||||
headers: result.init?.headers
|
||||
? new Headers(result.init.headers)
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
// Convert thrown data() to ErrorResponse instances
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: new ErrorResponseImpl(
|
||||
result.init?.status || 500,
|
||||
undefined,
|
||||
result.data
|
||||
),
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined,
|
||||
headers: result.init?.headers
|
||||
? new Headers(result.init.headers)
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: result,
|
||||
statusCode: isRouteErrorResponse(result) ? result.status : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
if (isDeferredData(result)) {
|
||||
return {
|
||||
type: ResultType.deferred,
|
||||
deferredData: result,
|
||||
statusCode: result.init?.status,
|
||||
headers: result.init?.headers && new Headers(result.init.headers),
|
||||
};
|
||||
}
|
||||
|
||||
if (isDataWithResponseInit(result)) {
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.data,
|
||||
statusCode: result.init?.status,
|
||||
headers: result.init?.headers
|
||||
? new Headers(result.init.headers)
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
return { type: ResultType.data, data: result };
|
||||
}
|
||||
|
||||
// Support relative routing in internal redirects
|
||||
function normalizeRelativeRoutingRedirectResponse(
|
||||
response: Response,
|
||||
request: Request,
|
||||
routeId: string,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
basename: string,
|
||||
v7_relativeSplatPath: boolean
|
||||
) {
|
||||
let location = response.headers.get("Location");
|
||||
invariant(
|
||||
location,
|
||||
"Redirects returned/thrown from loaders/actions must have a Location header"
|
||||
);
|
||||
|
||||
if (!ABSOLUTE_URL_REGEX.test(location)) {
|
||||
let trimmedMatches = matches.slice(
|
||||
0,
|
||||
matches.findIndex((m) => m.route.id === routeId) + 1
|
||||
);
|
||||
location = normalizeTo(
|
||||
new URL(request.url),
|
||||
trimmedMatches,
|
||||
basename,
|
||||
true,
|
||||
location,
|
||||
v7_relativeSplatPath
|
||||
);
|
||||
response.headers.set("Location", location);
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
function normalizeRedirectLocation(
|
||||
location: string,
|
||||
currentUrl: URL,
|
||||
basename: string,
|
||||
historyInstance: History,
|
||||
): string {
|
||||
// Match Chrome's behavior:
|
||||
// https://github.com/chromium/chromium/blob/216dbeb61db0c667e62082e5f5400a32d6983df3/content/public/common/url_utils.cc#L82
|
||||
let invalidProtocols = [
|
||||
"about:",
|
||||
"blob:",
|
||||
"chrome:",
|
||||
"chrome-untrusted:",
|
||||
"content:",
|
||||
"data:",
|
||||
"devtools:",
|
||||
"file:",
|
||||
"filesystem:",
|
||||
// eslint-disable-next-line no-script-url
|
||||
"javascript:",
|
||||
];
|
||||
|
||||
if (ABSOLUTE_URL_REGEX.test(location)) {
|
||||
// Strip off the protocol+origin for same-origin + same-basename absolute redirects
|
||||
let normalizedLocation = location;
|
||||
let url = normalizedLocation.startsWith("//")
|
||||
? new URL(currentUrl.protocol + normalizedLocation)
|
||||
: new URL(normalizedLocation);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
let isSameBasename = stripBasename(url.pathname, basename) != null;
|
||||
if (url.origin === currentUrl.origin && isSameBasename) {
|
||||
return removeDoubleSlashes(url.pathname) + url.search + url.hash;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let url = historyInstance.createURL(location);
|
||||
if (invalidProtocols.includes(url.protocol)) {
|
||||
throw new Error("Invalid redirect location");
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return location;
|
||||
}
|
||||
|
||||
// Utility method for creating the Request instances for loaders/actions during
|
||||
// client-side navigations and fetches. During SSR we will always have a
|
||||
// Request instance from the static handler (query/queryRoute)
|
||||
function createClientSideRequest(
|
||||
history: History,
|
||||
location: string | Location,
|
||||
signal: AbortSignal,
|
||||
submission?: Submission
|
||||
): Request {
|
||||
let url = history.createURL(stripHashFromPath(location)).toString();
|
||||
let init: RequestInit = { signal };
|
||||
|
||||
if (submission && isMutationMethod(submission.formMethod)) {
|
||||
let { formMethod, formEncType } = submission;
|
||||
// Didn't think we needed this but it turns out unlike other methods, patch
|
||||
// won't be properly normalized to uppercase and results in a 405 error.
|
||||
// See: https://fetch.spec.whatwg.org/#concept-method
|
||||
init.method = formMethod.toUpperCase();
|
||||
|
||||
if (formEncType === "application/json") {
|
||||
init.headers = new Headers({ "Content-Type": formEncType });
|
||||
init.body = JSON.stringify(submission.json);
|
||||
} else if (formEncType === "text/plain") {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.text;
|
||||
} else if (
|
||||
formEncType === "application/x-www-form-urlencoded" &&
|
||||
submission.formData
|
||||
) {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = convertFormDataToSearchParams(submission.formData);
|
||||
} else {
|
||||
// Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
|
||||
init.body = submission.formData;
|
||||
}
|
||||
}
|
||||
|
||||
return new Request(url, init);
|
||||
}
|
||||
|
||||
function convertFormDataToSearchParams(formData: FormData): URLSearchParams {
|
||||
let searchParams = new URLSearchParams();
|
||||
|
||||
for (let [key, value] of formData.entries()) {
|
||||
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
|
||||
searchParams.append(key, typeof value === "string" ? value : value.name);
|
||||
}
|
||||
|
||||
return searchParams;
|
||||
}
|
||||
|
||||
function convertSearchParamsToFormData(
|
||||
searchParams: URLSearchParams
|
||||
): FormData {
|
||||
let formData = new FormData();
|
||||
for (let [key, value] of searchParams.entries()) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
|
||||
function processRouteLoaderData(
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
results: Record<string, DataResult>,
|
||||
pendingActionResult: PendingActionResult | undefined,
|
||||
activeDeferreds: Map<string, DeferredData>,
|
||||
skipLoaderErrorBubbling: boolean
|
||||
): {
|
||||
loaderData: RouterState["loaderData"];
|
||||
errors: RouterState["errors"] | null;
|
||||
statusCode: number;
|
||||
loaderHeaders: Record<string, Headers>;
|
||||
} {
|
||||
// Fill in loaderData/errors from our loaders
|
||||
let loaderData: RouterState["loaderData"] = {};
|
||||
let errors: RouterState["errors"] | null = null;
|
||||
let statusCode: number | undefined;
|
||||
let foundError = false;
|
||||
let loaderHeaders: Record<string, Headers> = {};
|
||||
let pendingError =
|
||||
pendingActionResult && isErrorResult(pendingActionResult[1])
|
||||
? pendingActionResult[1].error
|
||||
: undefined;
|
||||
|
||||
// Process loader results into state.loaderData/state.errors
|
||||
matches.forEach((match) => {
|
||||
if (!(match.route.id in results)) {
|
||||
return;
|
||||
}
|
||||
let id = match.route.id;
|
||||
let result = results[id];
|
||||
invariant(
|
||||
!isRedirectResult(result),
|
||||
"Cannot handle redirect results in processLoaderData"
|
||||
);
|
||||
if (isErrorResult(result)) {
|
||||
let error = result.error;
|
||||
// If we have a pending action error, we report it at the highest-route
|
||||
// that throws a loader error, and then clear it out to indicate that
|
||||
// it was consumed
|
||||
if (pendingError !== undefined) {
|
||||
error = pendingError;
|
||||
pendingError = undefined;
|
||||
}
|
||||
|
||||
errors = errors || {};
|
||||
|
||||
if (skipLoaderErrorBubbling) {
|
||||
errors[id] = error;
|
||||
} else {
|
||||
// Look upwards from the matched route for the closest ancestor error
|
||||
// boundary, defaulting to the root match. Prefer higher error values
|
||||
// if lower errors bubble to the same boundary
|
||||
let boundaryMatch = findNearestBoundary(matches, id);
|
||||
if (errors[boundaryMatch.route.id] == null) {
|
||||
errors[boundaryMatch.route.id] = error;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear our any prior loaderData for the throwing route
|
||||
loaderData[id] = undefined;
|
||||
|
||||
// Once we find our first (highest) error, we set the status code and
|
||||
// prevent deeper status codes from overriding
|
||||
if (!foundError) {
|
||||
foundError = true;
|
||||
statusCode = isRouteErrorResponse(result.error)
|
||||
? result.error.status
|
||||
: 500;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
if (isDeferredResult(result)) {
|
||||
activeDeferreds.set(id, result.deferredData);
|
||||
loaderData[id] = result.deferredData.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (
|
||||
result.statusCode != null &&
|
||||
result.statusCode !== 200 &&
|
||||
!foundError
|
||||
) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
} else {
|
||||
loaderData[id] = result.data;
|
||||
// Error status codes always override success status codes, but if all
|
||||
// loaders are successful we take the deepest status code.
|
||||
if (result.statusCode && result.statusCode !== 200 && !foundError) {
|
||||
statusCode = result.statusCode;
|
||||
}
|
||||
if (result.headers) {
|
||||
loaderHeaders[id] = result.headers;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we didn't consume the pending action error (i.e., all loaders
|
||||
// resolved), then consume it here. Also clear out any loaderData for the
|
||||
// throwing route
|
||||
if (pendingError !== undefined && pendingActionResult) {
|
||||
errors = { [pendingActionResult[0]]: pendingError };
|
||||
loaderData[pendingActionResult[0]] = undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
loaderData,
|
||||
errors,
|
||||
statusCode: statusCode || 200,
|
||||
loaderHeaders,
|
||||
};
|
||||
}
|
||||
|
||||
function processLoaderData(
|
||||
state: RouterState,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
results: Record<string, DataResult>,
|
||||
pendingActionResult: PendingActionResult | undefined,
|
||||
revalidatingFetchers: RevalidatingFetcher[],
|
||||
fetcherResults: Record<string, DataResult>,
|
||||
activeDeferreds: Map<string, DeferredData>
|
||||
): {
|
||||
loaderData: RouterState["loaderData"];
|
||||
errors?: RouterState["errors"];
|
||||
} {
|
||||
let { loaderData, errors } = processRouteLoaderData(
|
||||
matches,
|
||||
results,
|
||||
pendingActionResult,
|
||||
activeDeferreds,
|
||||
false // This method is only called client side so we always want to bubble
|
||||
);
|
||||
|
||||
// Process results from our revalidating fetchers
|
||||
revalidatingFetchers.forEach((rf) => {
|
||||
let { key, match, controller } = rf;
|
||||
let result = fetcherResults[key];
|
||||
invariant(result, "Did not find corresponding fetcher result");
|
||||
|
||||
// Process fetcher non-redirect errors
|
||||
if (controller && controller.signal.aborted) {
|
||||
// Nothing to do for aborted fetchers
|
||||
return;
|
||||
} else if (isErrorResult(result)) {
|
||||
let boundaryMatch = findNearestBoundary(state.matches, match?.route.id);
|
||||
if (!(errors && errors[boundaryMatch.route.id])) {
|
||||
errors = {
|
||||
...errors,
|
||||
[boundaryMatch.route.id]: result.error,
|
||||
};
|
||||
}
|
||||
state.fetchers.delete(key);
|
||||
} else if (isRedirectResult(result)) {
|
||||
// Should never get here, redirects should get processed above, but we
|
||||
// keep this to type narrow to a success result in the else
|
||||
invariant(false, "Unhandled fetcher revalidation redirect");
|
||||
} else if (isDeferredResult(result)) {
|
||||
// Should never get here, deferred data should be awaited for fetchers
|
||||
// in resolveDeferredResults
|
||||
invariant(false, "Unhandled fetcher deferred data");
|
||||
} else {
|
||||
let doneFetcher = getDoneFetcher(result.data);
|
||||
state.fetchers.set(key, doneFetcher);
|
||||
}
|
||||
});
|
||||
|
||||
return { loaderData, errors };
|
||||
}
|
||||
|
||||
function mergeLoaderData(
|
||||
loaderData: RouteData,
|
||||
newLoaderData: RouteData,
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
errors: RouteData | null | undefined
|
||||
): RouteData {
|
||||
let mergedLoaderData = { ...newLoaderData };
|
||||
for (let match of matches) {
|
||||
let id = match.route.id;
|
||||
if (newLoaderData.hasOwnProperty(id)) {
|
||||
if (newLoaderData[id] !== undefined) {
|
||||
mergedLoaderData[id] = newLoaderData[id];
|
||||
} else {
|
||||
// No-op - this is so we ignore existing data if we have a key in the
|
||||
// incoming object with an undefined value, which is how we unset a prior
|
||||
// loaderData if we encounter a loader error
|
||||
}
|
||||
} else if (loaderData[id] !== undefined && match.route.loader) {
|
||||
// Preserve existing keys not included in newLoaderData and where a loader
|
||||
// wasn't removed by HMR
|
||||
mergedLoaderData[id] = loaderData[id];
|
||||
}
|
||||
|
||||
if (errors && errors.hasOwnProperty(id)) {
|
||||
// Don't keep any loader data below the boundary
|
||||
break;
|
||||
}
|
||||
}
|
||||
return mergedLoaderData;
|
||||
}
|
||||
|
||||
function getActionDataForCommit(
|
||||
pendingActionResult: PendingActionResult | undefined
|
||||
) {
|
||||
if (!pendingActionResult) {
|
||||
return {};
|
||||
}
|
||||
return isErrorResult(pendingActionResult[1])
|
||||
? {
|
||||
// Clear out prior actionData on errors
|
||||
actionData: {},
|
||||
}
|
||||
: {
|
||||
actionData: {
|
||||
[pendingActionResult[0]]: pendingActionResult[1].data,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Find the nearest error boundary, looking upwards from the leaf route (or the
|
||||
// route specified by routeId) for the closest ancestor error boundary,
|
||||
// defaulting to the root match
|
||||
function findNearestBoundary(
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
routeId?: string
|
||||
): AgnosticDataRouteMatch {
|
||||
let eligibleMatches = routeId
|
||||
? matches.slice(0, matches.findIndex((m) => m.route.id === routeId) + 1)
|
||||
: [...matches];
|
||||
return (
|
||||
eligibleMatches.reverse().find((m) => m.route.hasErrorBoundary === true) ||
|
||||
matches[0]
|
||||
);
|
||||
}
|
||||
|
||||
function getShortCircuitMatches(routes: AgnosticDataRouteObject[]): {
|
||||
matches: AgnosticDataRouteMatch[];
|
||||
route: AgnosticDataRouteObject;
|
||||
} {
|
||||
// Prefer a root layout route if present, otherwise shim in a route object
|
||||
let route =
|
||||
routes.length === 1
|
||||
? routes[0]
|
||||
: routes.find((r) => r.index || !r.path || r.path === "/") || {
|
||||
id: `__shim-error-route__`,
|
||||
};
|
||||
|
||||
return {
|
||||
matches: [
|
||||
{
|
||||
params: {},
|
||||
pathname: "",
|
||||
pathnameBase: "",
|
||||
route,
|
||||
},
|
||||
],
|
||||
route,
|
||||
};
|
||||
}
|
||||
|
||||
function getInternalRouterError(
|
||||
status: number,
|
||||
{
|
||||
pathname,
|
||||
routeId,
|
||||
method,
|
||||
type,
|
||||
message,
|
||||
}: {
|
||||
pathname?: string;
|
||||
routeId?: string;
|
||||
method?: string;
|
||||
type?: "defer-action" | "invalid-body";
|
||||
message?: string;
|
||||
} = {}
|
||||
) {
|
||||
let statusText = "Unknown Server Error";
|
||||
let errorMessage = "Unknown @remix-run/router error";
|
||||
|
||||
if (status === 400) {
|
||||
statusText = "Bad Request";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage =
|
||||
`You made a ${method} request to "${pathname}" but ` +
|
||||
`did not provide a \`loader\` for route "${routeId}", ` +
|
||||
`so there is no way to handle the request.`;
|
||||
} else if (type === "defer-action") {
|
||||
errorMessage = "defer() is not supported in actions";
|
||||
} else if (type === "invalid-body") {
|
||||
errorMessage = "Unable to encode submission body";
|
||||
}
|
||||
} else if (status === 403) {
|
||||
statusText = "Forbidden";
|
||||
errorMessage = `Route "${routeId}" does not match URL "${pathname}"`;
|
||||
} else if (status === 404) {
|
||||
statusText = "Not Found";
|
||||
errorMessage = `No route matches URL "${pathname}"`;
|
||||
} else if (status === 405) {
|
||||
statusText = "Method Not Allowed";
|
||||
if (method && pathname && routeId) {
|
||||
errorMessage =
|
||||
`You made a ${method.toUpperCase()} request to "${pathname}" but ` +
|
||||
`did not provide an \`action\` for route "${routeId}", ` +
|
||||
`so there is no way to handle the request.`;
|
||||
} else if (method) {
|
||||
errorMessage = `Invalid request method "${method.toUpperCase()}"`;
|
||||
}
|
||||
}
|
||||
|
||||
return new ErrorResponseImpl(
|
||||
status || 500,
|
||||
statusText,
|
||||
new Error(errorMessage),
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
// Find any returned redirect errors, starting from the lowest match
|
||||
function findRedirect(
|
||||
results: Record<string, DataResult>
|
||||
): { key: string; result: RedirectResult } | undefined {
|
||||
let entries = Object.entries(results);
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
let [key, result] = entries[i];
|
||||
if (isRedirectResult(result)) {
|
||||
return { key, result };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stripHashFromPath(path: To) {
|
||||
let parsedPath = typeof path === "string" ? parsePath(path) : path;
|
||||
return createPath({ ...parsedPath, hash: "" });
|
||||
}
|
||||
|
||||
function isHashChangeOnly(a: Location, b: Location): boolean {
|
||||
if (a.pathname !== b.pathname || a.search !== b.search) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (a.hash === "") {
|
||||
// /page -> /page#hash
|
||||
return b.hash !== "";
|
||||
} else if (a.hash === b.hash) {
|
||||
// /page#hash -> /page#hash
|
||||
return true;
|
||||
} else if (b.hash !== "") {
|
||||
// /page#hash -> /page#other
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the hash is removed the browser will re-perform a request to the server
|
||||
// /page#hash -> /page
|
||||
return false;
|
||||
}
|
||||
|
||||
function isPromise<T = unknown>(val: unknown): val is Promise<T> {
|
||||
return typeof val === "object" && val != null && "then" in val;
|
||||
}
|
||||
|
||||
function isDataStrategyResult(result: unknown): result is DataStrategyResult {
|
||||
return (
|
||||
result != null &&
|
||||
typeof result === "object" &&
|
||||
"type" in result &&
|
||||
"result" in result &&
|
||||
(result.type === ResultType.data || result.type === ResultType.error)
|
||||
);
|
||||
}
|
||||
|
||||
function isRedirectDataStrategyResultResult(result: DataStrategyResult) {
|
||||
return (
|
||||
isResponse(result.result) && redirectStatusCodes.has(result.result.status)
|
||||
);
|
||||
}
|
||||
|
||||
function isDeferredResult(result: DataResult): result is DeferredResult {
|
||||
return result.type === ResultType.deferred;
|
||||
}
|
||||
|
||||
function isErrorResult(result: DataResult): result is ErrorResult {
|
||||
return result.type === ResultType.error;
|
||||
}
|
||||
|
||||
function isRedirectResult(result?: DataResult): result is RedirectResult {
|
||||
return (result && result.type) === ResultType.redirect;
|
||||
}
|
||||
|
||||
export function isDataWithResponseInit(
|
||||
value: any
|
||||
): value is DataWithResponseInit<unknown> {
|
||||
return (
|
||||
typeof value === "object" &&
|
||||
value != null &&
|
||||
"type" in value &&
|
||||
"data" in value &&
|
||||
"init" in value &&
|
||||
value.type === "DataWithResponseInit"
|
||||
);
|
||||
}
|
||||
|
||||
export function isDeferredData(value: any): value is DeferredData {
|
||||
let deferred: DeferredData = value;
|
||||
return (
|
||||
deferred &&
|
||||
typeof deferred === "object" &&
|
||||
typeof deferred.data === "object" &&
|
||||
typeof deferred.subscribe === "function" &&
|
||||
typeof deferred.cancel === "function" &&
|
||||
typeof deferred.resolveData === "function"
|
||||
);
|
||||
}
|
||||
|
||||
function isResponse(value: any): value is Response {
|
||||
return (
|
||||
value != null &&
|
||||
typeof value.status === "number" &&
|
||||
typeof value.statusText === "string" &&
|
||||
typeof value.headers === "object" &&
|
||||
typeof value.body !== "undefined"
|
||||
);
|
||||
}
|
||||
|
||||
function isRedirectResponse(result: any): result is Response {
|
||||
if (!isResponse(result)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let status = result.status;
|
||||
let location = result.headers.get("Location");
|
||||
return status >= 300 && status <= 399 && location != null;
|
||||
}
|
||||
|
||||
function isValidMethod(method: string): method is FormMethod | V7_FormMethod {
|
||||
return validRequestMethods.has(method.toLowerCase() as FormMethod);
|
||||
}
|
||||
|
||||
function isMutationMethod(
|
||||
method: string
|
||||
): method is MutationFormMethod | V7_MutationFormMethod {
|
||||
return validMutationMethods.has(method.toLowerCase() as MutationFormMethod);
|
||||
}
|
||||
|
||||
async function resolveNavigationDeferredResults(
|
||||
matches: (AgnosticDataRouteMatch | null)[],
|
||||
results: Record<string, DataResult>,
|
||||
signal: AbortSignal,
|
||||
currentMatches: AgnosticDataRouteMatch[],
|
||||
currentLoaderData: RouteData
|
||||
) {
|
||||
let entries = Object.entries(results);
|
||||
for (let index = 0; index < entries.length; index++) {
|
||||
let [routeId, result] = entries[index];
|
||||
let match = matches.find((m) => m?.route.id === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let currentMatch = currentMatches.find(
|
||||
(m) => m.route.id === match!.route.id
|
||||
);
|
||||
let isRevalidatingLoader =
|
||||
currentMatch != null &&
|
||||
!isNewRouteInstance(currentMatch, match) &&
|
||||
(currentLoaderData && currentLoaderData[match.route.id]) !== undefined;
|
||||
|
||||
if (isDeferredResult(result) && isRevalidatingLoader) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
await resolveDeferredData(result, signal, false).then((result) => {
|
||||
if (result) {
|
||||
results[routeId] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveFetcherDeferredResults(
|
||||
matches: (AgnosticDataRouteMatch | null)[],
|
||||
results: Record<string, DataResult>,
|
||||
revalidatingFetchers: RevalidatingFetcher[]
|
||||
) {
|
||||
for (let index = 0; index < revalidatingFetchers.length; index++) {
|
||||
let { key, routeId, controller } = revalidatingFetchers[index];
|
||||
let result = results[key];
|
||||
let match = matches.find((m) => m?.route.id === routeId);
|
||||
// If we don't have a match, then we can have a deferred result to do
|
||||
// anything with. This is for revalidating fetchers where the route was
|
||||
// removed during HMR
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (isDeferredResult(result)) {
|
||||
// Note: we do not have to touch activeDeferreds here since we race them
|
||||
// against the signal in resolveDeferredData and they'll get aborted
|
||||
// there if needed
|
||||
invariant(
|
||||
controller,
|
||||
"Expected an AbortController for revalidating fetcher deferred result"
|
||||
);
|
||||
await resolveDeferredData(result, controller.signal, true).then(
|
||||
(result) => {
|
||||
if (result) {
|
||||
results[key] = result;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveDeferredData(
|
||||
result: DeferredResult,
|
||||
signal: AbortSignal,
|
||||
unwrap = false
|
||||
): Promise<SuccessResult | ErrorResult | undefined> {
|
||||
let aborted = await result.deferredData.resolveData(signal);
|
||||
if (aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (unwrap) {
|
||||
try {
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.unwrappedData,
|
||||
};
|
||||
} catch (e) {
|
||||
// Handle any TrackedPromise._error values encountered while unwrapping
|
||||
return {
|
||||
type: ResultType.error,
|
||||
error: e,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
type: ResultType.data,
|
||||
data: result.deferredData.data,
|
||||
};
|
||||
}
|
||||
|
||||
function hasNakedIndexQuery(search: string): boolean {
|
||||
return new URLSearchParams(search).getAll("index").some((v) => v === "");
|
||||
}
|
||||
|
||||
function getTargetMatch(
|
||||
matches: AgnosticDataRouteMatch[],
|
||||
location: Location | string
|
||||
) {
|
||||
let search =
|
||||
typeof location === "string" ? parsePath(location).search : location.search;
|
||||
if (
|
||||
matches[matches.length - 1].route.index &&
|
||||
hasNakedIndexQuery(search || "")
|
||||
) {
|
||||
// Return the leaf index route when index is present
|
||||
return matches[matches.length - 1];
|
||||
}
|
||||
// Otherwise grab the deepest "path contributing" match (ignoring index and
|
||||
// pathless layout routes)
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
return pathMatches[pathMatches.length - 1];
|
||||
}
|
||||
|
||||
function getSubmissionFromNavigation(
|
||||
navigation: Navigation
|
||||
): Submission | undefined {
|
||||
let { formMethod, formAction, formEncType, text, formData, json } =
|
||||
navigation;
|
||||
if (!formMethod || !formAction || !formEncType) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (text != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text,
|
||||
};
|
||||
} else if (formData != null) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
};
|
||||
} else if (json !== undefined) {
|
||||
return {
|
||||
formMethod,
|
||||
formAction,
|
||||
formEncType,
|
||||
formData: undefined,
|
||||
json,
|
||||
text: undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getLoadingNavigation(
|
||||
location: Location,
|
||||
submission?: Submission
|
||||
): NavigationStates["Loading"] {
|
||||
if (submission) {
|
||||
let navigation: NavigationStates["Loading"] = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
};
|
||||
return navigation;
|
||||
} else {
|
||||
let navigation: NavigationStates["Loading"] = {
|
||||
state: "loading",
|
||||
location,
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
}
|
||||
|
||||
function getSubmittingNavigation(
|
||||
location: Location,
|
||||
submission: Submission
|
||||
): NavigationStates["Submitting"] {
|
||||
let navigation: NavigationStates["Submitting"] = {
|
||||
state: "submitting",
|
||||
location,
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
};
|
||||
return navigation;
|
||||
}
|
||||
|
||||
function getLoadingFetcher(
|
||||
submission?: Submission,
|
||||
data?: Fetcher["data"]
|
||||
): FetcherStates["Loading"] {
|
||||
if (submission) {
|
||||
let fetcher: FetcherStates["Loading"] = {
|
||||
state: "loading",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data,
|
||||
};
|
||||
return fetcher;
|
||||
} else {
|
||||
let fetcher: FetcherStates["Loading"] = {
|
||||
state: "loading",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data,
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
}
|
||||
|
||||
function getSubmittingFetcher(
|
||||
submission: Submission,
|
||||
existingFetcher?: Fetcher
|
||||
): FetcherStates["Submitting"] {
|
||||
let fetcher: FetcherStates["Submitting"] = {
|
||||
state: "submitting",
|
||||
formMethod: submission.formMethod,
|
||||
formAction: submission.formAction,
|
||||
formEncType: submission.formEncType,
|
||||
formData: submission.formData,
|
||||
json: submission.json,
|
||||
text: submission.text,
|
||||
data: existingFetcher ? existingFetcher.data : undefined,
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
|
||||
function getDoneFetcher(data: Fetcher["data"]): FetcherStates["Idle"] {
|
||||
let fetcher: FetcherStates["Idle"] = {
|
||||
state: "idle",
|
||||
formMethod: undefined,
|
||||
formAction: undefined,
|
||||
formEncType: undefined,
|
||||
formData: undefined,
|
||||
json: undefined,
|
||||
text: undefined,
|
||||
data,
|
||||
};
|
||||
return fetcher;
|
||||
}
|
||||
|
||||
function restoreAppliedTransitions(
|
||||
_window: Window,
|
||||
transitions: Map<string, Set<string>>
|
||||
) {
|
||||
try {
|
||||
let sessionPositions = _window.sessionStorage.getItem(
|
||||
TRANSITIONS_STORAGE_KEY
|
||||
);
|
||||
if (sessionPositions) {
|
||||
let json = JSON.parse(sessionPositions);
|
||||
for (let [k, v] of Object.entries(json || {})) {
|
||||
if (v && Array.isArray(v)) {
|
||||
transitions.set(k, new Set(v || []));
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// no-op, use default empty object
|
||||
}
|
||||
}
|
||||
|
||||
function persistAppliedTransitions(
|
||||
_window: Window,
|
||||
transitions: Map<string, Set<string>>
|
||||
) {
|
||||
if (transitions.size > 0) {
|
||||
let json: Record<string, string[]> = {};
|
||||
for (let [k, v] of transitions) {
|
||||
json[k] = [...v];
|
||||
}
|
||||
try {
|
||||
_window.sessionStorage.setItem(
|
||||
TRANSITIONS_STORAGE_KEY,
|
||||
JSON.stringify(json)
|
||||
);
|
||||
} catch (error) {
|
||||
warning(
|
||||
false,
|
||||
`Failed to save applied view transitions in sessionStorage (${error}).`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
+1746
@@ -0,0 +1,1746 @@
|
||||
import type { Location, Path, To } from "./history";
|
||||
import { invariant, parsePath, warning } from "./history";
|
||||
|
||||
/**
|
||||
* Map of routeId -> data returned from a loader/action/error
|
||||
*/
|
||||
export interface RouteData {
|
||||
[routeId: string]: any;
|
||||
}
|
||||
|
||||
export enum ResultType {
|
||||
data = "data",
|
||||
deferred = "deferred",
|
||||
redirect = "redirect",
|
||||
error = "error",
|
||||
}
|
||||
|
||||
/**
|
||||
* Successful result from a loader or action
|
||||
*/
|
||||
export interface SuccessResult {
|
||||
type: ResultType.data;
|
||||
data: unknown;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
|
||||
/**
|
||||
* Successful defer() result from a loader or action
|
||||
*/
|
||||
export interface DeferredResult {
|
||||
type: ResultType.deferred;
|
||||
deferredData: DeferredData;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
|
||||
/**
|
||||
* Redirect result from a loader or action
|
||||
*/
|
||||
export interface RedirectResult {
|
||||
type: ResultType.redirect;
|
||||
// We keep the raw Response for redirects so we can return it verbatim
|
||||
response: Response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsuccessful result from a loader or action
|
||||
*/
|
||||
export interface ErrorResult {
|
||||
type: ResultType.error;
|
||||
error: unknown;
|
||||
statusCode?: number;
|
||||
headers?: Headers;
|
||||
}
|
||||
|
||||
/**
|
||||
* Result from a loader or action - potentially successful or unsuccessful
|
||||
*/
|
||||
export type DataResult =
|
||||
| SuccessResult
|
||||
| DeferredResult
|
||||
| RedirectResult
|
||||
| ErrorResult;
|
||||
|
||||
type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
|
||||
type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
|
||||
|
||||
/**
|
||||
* Users can specify either lowercase or uppercase form methods on `<Form>`,
|
||||
* useSubmit(), `<fetcher.Form>`, etc.
|
||||
*/
|
||||
export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;
|
||||
|
||||
/**
|
||||
* Active navigation/fetcher form methods are exposed in lowercase on the
|
||||
* RouterState
|
||||
*/
|
||||
export type FormMethod = LowerCaseFormMethod;
|
||||
export type MutationFormMethod = Exclude<FormMethod, "get">;
|
||||
|
||||
/**
|
||||
* In v7, active navigation/fetcher form methods are exposed in uppercase on the
|
||||
* RouterState. This is to align with the normalization done via fetch().
|
||||
*/
|
||||
export type V7_FormMethod = UpperCaseFormMethod;
|
||||
export type V7_MutationFormMethod = Exclude<V7_FormMethod, "GET">;
|
||||
|
||||
export type FormEncType =
|
||||
| "application/x-www-form-urlencoded"
|
||||
| "multipart/form-data"
|
||||
| "application/json"
|
||||
| "text/plain";
|
||||
|
||||
// Thanks https://github.com/sindresorhus/type-fest!
|
||||
type JsonObject = { [Key in string]: JsonValue } & {
|
||||
[Key in string]?: JsonValue | undefined;
|
||||
};
|
||||
type JsonArray = JsonValue[] | readonly JsonValue[];
|
||||
type JsonPrimitive = string | number | boolean | null;
|
||||
type JsonValue = JsonPrimitive | JsonObject | JsonArray;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Internal interface to pass around for action submissions, not intended for
|
||||
* external consumption
|
||||
*/
|
||||
export type Submission =
|
||||
| {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: FormData;
|
||||
json: undefined;
|
||||
text: undefined;
|
||||
}
|
||||
| {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: undefined;
|
||||
json: JsonValue;
|
||||
text: undefined;
|
||||
}
|
||||
| {
|
||||
formMethod: FormMethod | V7_FormMethod;
|
||||
formAction: string;
|
||||
formEncType: FormEncType;
|
||||
formData: undefined;
|
||||
json: undefined;
|
||||
text: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Arguments passed to route loader/action functions. Same for now but we keep
|
||||
* this as a private implementation detail in case they diverge in the future.
|
||||
*/
|
||||
interface DataFunctionArgs<Context> {
|
||||
request: Request;
|
||||
params: Params;
|
||||
context?: Context;
|
||||
}
|
||||
|
||||
// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
|
||||
// ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
|
||||
// Also, make them a type alias instead of an interface
|
||||
|
||||
/**
|
||||
* Arguments passed to loader functions
|
||||
*/
|
||||
export interface LoaderFunctionArgs<Context = any>
|
||||
extends DataFunctionArgs<Context> {}
|
||||
|
||||
/**
|
||||
* Arguments passed to action functions
|
||||
*/
|
||||
export interface ActionFunctionArgs<Context = any>
|
||||
extends DataFunctionArgs<Context> {}
|
||||
|
||||
/**
|
||||
* Loaders and actions can return anything except `undefined` (`null` is a
|
||||
* valid return value if there is no data to return). Responses are preferred
|
||||
* and will ease any future migration to Remix
|
||||
*/
|
||||
type DataFunctionValue = Response | NonNullable<unknown> | null;
|
||||
|
||||
type DataFunctionReturnValue = Promise<DataFunctionValue> | DataFunctionValue;
|
||||
|
||||
/**
|
||||
* Route loader function signature
|
||||
*/
|
||||
export type LoaderFunction<Context = any> = {
|
||||
(
|
||||
args: LoaderFunctionArgs<Context>,
|
||||
handlerCtx?: unknown
|
||||
): DataFunctionReturnValue;
|
||||
} & { hydrate?: boolean };
|
||||
|
||||
/**
|
||||
* Route action function signature
|
||||
*/
|
||||
export interface ActionFunction<Context = any> {
|
||||
(
|
||||
args: ActionFunctionArgs<Context>,
|
||||
handlerCtx?: unknown
|
||||
): DataFunctionReturnValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Arguments passed to shouldRevalidate function
|
||||
*/
|
||||
export interface ShouldRevalidateFunctionArgs {
|
||||
currentUrl: URL;
|
||||
currentParams: AgnosticDataRouteMatch["params"];
|
||||
nextUrl: URL;
|
||||
nextParams: AgnosticDataRouteMatch["params"];
|
||||
formMethod?: Submission["formMethod"];
|
||||
formAction?: Submission["formAction"];
|
||||
formEncType?: Submission["formEncType"];
|
||||
text?: Submission["text"];
|
||||
formData?: Submission["formData"];
|
||||
json?: Submission["json"];
|
||||
actionStatus?: number;
|
||||
actionResult?: any;
|
||||
defaultShouldRevalidate: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Route shouldRevalidate function signature. This runs after any submission
|
||||
* (navigation or fetcher), so we flatten the navigation/fetcher submission
|
||||
* onto the arguments. It shouldn't matter whether it came from a navigation
|
||||
* or a fetcher, what really matters is the URLs and the formData since loaders
|
||||
* have to re-run based on the data models that were potentially mutated.
|
||||
*/
|
||||
export interface ShouldRevalidateFunction {
|
||||
(args: ShouldRevalidateFunctionArgs): boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set `hasErrorBoundary`
|
||||
* from the framework-aware `errorElement` prop
|
||||
*
|
||||
* @deprecated Use `mapRouteProperties` instead
|
||||
*/
|
||||
export interface DetectErrorBoundaryFunction {
|
||||
(route: AgnosticRouteObject): boolean;
|
||||
}
|
||||
|
||||
export interface DataStrategyMatch
|
||||
extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
|
||||
shouldLoad: boolean;
|
||||
resolve: (
|
||||
handlerOverride?: (
|
||||
handler: (ctx?: unknown) => DataFunctionReturnValue
|
||||
) => DataFunctionReturnValue
|
||||
) => Promise<DataStrategyResult>;
|
||||
}
|
||||
|
||||
export interface DataStrategyFunctionArgs<Context = any>
|
||||
extends DataFunctionArgs<Context> {
|
||||
matches: DataStrategyMatch[];
|
||||
fetcherKey: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Result from a loader or action called via dataStrategy
|
||||
*/
|
||||
export interface DataStrategyResult {
|
||||
type: "data" | "error";
|
||||
result: unknown; // data, Error, Response, DeferredData, DataWithResponseInit
|
||||
}
|
||||
|
||||
export interface DataStrategyFunction {
|
||||
(args: DataStrategyFunctionArgs): Promise<Record<string, DataStrategyResult>>;
|
||||
}
|
||||
|
||||
export type AgnosticPatchRoutesOnNavigationFunctionArgs<
|
||||
O extends AgnosticRouteObject = AgnosticRouteObject,
|
||||
M extends AgnosticRouteMatch = AgnosticRouteMatch
|
||||
> = {
|
||||
signal: AbortSignal;
|
||||
path: string;
|
||||
matches: M[];
|
||||
fetcherKey: string | undefined;
|
||||
patch: (routeId: string | null, children: O[]) => void;
|
||||
};
|
||||
|
||||
export type AgnosticPatchRoutesOnNavigationFunction<
|
||||
O extends AgnosticRouteObject = AgnosticRouteObject,
|
||||
M extends AgnosticRouteMatch = AgnosticRouteMatch
|
||||
> = (
|
||||
opts: AgnosticPatchRoutesOnNavigationFunctionArgs<O, M>
|
||||
) => void | Promise<void>;
|
||||
|
||||
/**
|
||||
* Function provided by the framework-aware layers to set any framework-specific
|
||||
* properties from framework-agnostic properties
|
||||
*/
|
||||
export interface MapRoutePropertiesFunction {
|
||||
(route: AgnosticRouteObject): {
|
||||
hasErrorBoundary: boolean;
|
||||
} & Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Keys we cannot change from within a lazy() function. We spread all other keys
|
||||
* onto the route. Either they're meaningful to the router, or they'll get
|
||||
* ignored.
|
||||
*/
|
||||
export type ImmutableRouteKey =
|
||||
| "lazy"
|
||||
| "caseSensitive"
|
||||
| "path"
|
||||
| "id"
|
||||
| "index"
|
||||
| "children";
|
||||
|
||||
export const immutableRouteKeys = new Set<ImmutableRouteKey>([
|
||||
"lazy",
|
||||
"caseSensitive",
|
||||
"path",
|
||||
"id",
|
||||
"index",
|
||||
"children",
|
||||
]);
|
||||
|
||||
type RequireOne<T, Key = keyof T> = Exclude<
|
||||
{
|
||||
[K in keyof T]: K extends Key ? Omit<T, K> & Required<Pick<T, K>> : never;
|
||||
}[keyof T],
|
||||
undefined
|
||||
>;
|
||||
|
||||
/**
|
||||
* lazy() function to load a route definition, which can add non-matching
|
||||
* related properties to a route
|
||||
*/
|
||||
export interface LazyRouteFunction<R extends AgnosticRouteObject> {
|
||||
(): Promise<RequireOne<Omit<R, ImmutableRouteKey>>>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Base RouteObject with common props shared by all types of routes
|
||||
*/
|
||||
type AgnosticBaseRouteObject = {
|
||||
caseSensitive?: boolean;
|
||||
path?: string;
|
||||
id?: string;
|
||||
loader?: LoaderFunction | boolean;
|
||||
action?: ActionFunction | boolean;
|
||||
hasErrorBoundary?: boolean;
|
||||
shouldRevalidate?: ShouldRevalidateFunction;
|
||||
handle?: any;
|
||||
lazy?: LazyRouteFunction<AgnosticBaseRouteObject>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Index routes must not have children
|
||||
*/
|
||||
export type AgnosticIndexRouteObject = AgnosticBaseRouteObject & {
|
||||
children?: undefined;
|
||||
index: true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Non-index routes may have children, but cannot have index
|
||||
*/
|
||||
export type AgnosticNonIndexRouteObject = AgnosticBaseRouteObject & {
|
||||
children?: AgnosticRouteObject[];
|
||||
index?: false;
|
||||
};
|
||||
|
||||
/**
|
||||
* A route object represents a logical route, with (optionally) its child
|
||||
* routes organized in a tree-like structure.
|
||||
*/
|
||||
export type AgnosticRouteObject =
|
||||
| AgnosticIndexRouteObject
|
||||
| AgnosticNonIndexRouteObject;
|
||||
|
||||
export type AgnosticDataIndexRouteObject = AgnosticIndexRouteObject & {
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObject & {
|
||||
children?: AgnosticDataRouteObject[];
|
||||
id: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* A data route object, which is just a RouteObject with a required unique ID
|
||||
*/
|
||||
export type AgnosticDataRouteObject =
|
||||
| AgnosticDataIndexRouteObject
|
||||
| AgnosticDataNonIndexRouteObject;
|
||||
|
||||
export type RouteManifest = Record<string, AgnosticDataRouteObject | undefined>;
|
||||
|
||||
// Recursive helper for finding path parameters in the absence of wildcards
|
||||
type _PathParam<Path extends string> =
|
||||
// split path into individual path segments
|
||||
Path extends `${infer L}/${infer R}`
|
||||
? _PathParam<L> | _PathParam<R>
|
||||
: // find params after `:`
|
||||
Path extends `:${infer Param}`
|
||||
? Param extends `${infer Optional}?`
|
||||
? Optional
|
||||
: Param
|
||||
: // otherwise, there aren't any params present
|
||||
never;
|
||||
|
||||
/**
|
||||
* Examples:
|
||||
* "/a/b/*" -> "*"
|
||||
* ":a" -> "a"
|
||||
* "/a/:b" -> "b"
|
||||
* "/a/blahblahblah:b" -> "b"
|
||||
* "/:a/:b" -> "a" | "b"
|
||||
* "/:a/b/:c/*" -> "a" | "c" | "*"
|
||||
*/
|
||||
export type PathParam<Path extends string> =
|
||||
// check if path is just a wildcard
|
||||
Path extends "*" | "/*"
|
||||
? "*"
|
||||
: // look for wildcard at the end of the path
|
||||
Path extends `${infer Rest}/*`
|
||||
? "*" | _PathParam<Rest>
|
||||
: // look for params in the absence of wildcards
|
||||
_PathParam<Path>;
|
||||
|
||||
// Attempt to parse the given string segment. If it fails, then just return the
|
||||
// plain string type as a default fallback. Otherwise, return the union of the
|
||||
// parsed string literals that were referenced as dynamic segments in the route.
|
||||
export type ParamParseKey<Segment extends string> =
|
||||
// if you could not find path params, fallback to `string`
|
||||
[PathParam<Segment>] extends [never] ? string : PathParam<Segment>;
|
||||
|
||||
/**
|
||||
* The parameters that were parsed from the URL path.
|
||||
*/
|
||||
export type Params<Key extends string = string> = {
|
||||
readonly [key in Key]: string | undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* A RouteMatch contains info about how a route matched a URL.
|
||||
*/
|
||||
export interface AgnosticRouteMatch<
|
||||
ParamKey extends string = string,
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
> {
|
||||
/**
|
||||
* The names and values of dynamic parameters in the URL.
|
||||
*/
|
||||
params: Params<ParamKey>;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched.
|
||||
*/
|
||||
pathname: string;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched before child routes.
|
||||
*/
|
||||
pathnameBase: string;
|
||||
/**
|
||||
* The route object that was used to match.
|
||||
*/
|
||||
route: RouteObjectType;
|
||||
}
|
||||
|
||||
export interface AgnosticDataRouteMatch
|
||||
extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {}
|
||||
|
||||
function isIndexRoute(
|
||||
route: AgnosticRouteObject
|
||||
): route is AgnosticIndexRouteObject {
|
||||
return route.index === true;
|
||||
}
|
||||
|
||||
// Walk the route tree generating unique IDs where necessary, so we are working
|
||||
// solely with AgnosticDataRouteObject's within the Router
|
||||
export function convertRoutesToDataRoutes(
|
||||
routes: AgnosticRouteObject[],
|
||||
mapRouteProperties: MapRoutePropertiesFunction,
|
||||
parentPath: string[] = [],
|
||||
manifest: RouteManifest = {}
|
||||
): AgnosticDataRouteObject[] {
|
||||
return routes.map((route, index) => {
|
||||
let treePath = [...parentPath, String(index)];
|
||||
let id = typeof route.id === "string" ? route.id : treePath.join("-");
|
||||
invariant(
|
||||
route.index !== true || !route.children,
|
||||
`Cannot specify children on an index route`
|
||||
);
|
||||
invariant(
|
||||
!manifest[id],
|
||||
`Found a route id collision on id "${id}". Route ` +
|
||||
"id's must be globally unique within Data Router usages"
|
||||
);
|
||||
|
||||
if (isIndexRoute(route)) {
|
||||
let indexRoute: AgnosticDataIndexRouteObject = {
|
||||
...route,
|
||||
...mapRouteProperties(route),
|
||||
id,
|
||||
};
|
||||
manifest[id] = indexRoute;
|
||||
return indexRoute;
|
||||
} else {
|
||||
let pathOrLayoutRoute: AgnosticDataNonIndexRouteObject = {
|
||||
...route,
|
||||
...mapRouteProperties(route),
|
||||
id,
|
||||
children: undefined,
|
||||
};
|
||||
manifest[id] = pathOrLayoutRoute;
|
||||
|
||||
if (route.children) {
|
||||
pathOrLayoutRoute.children = convertRoutesToDataRoutes(
|
||||
route.children,
|
||||
mapRouteProperties,
|
||||
treePath,
|
||||
manifest
|
||||
);
|
||||
}
|
||||
|
||||
return pathOrLayoutRoute;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches the given routes to a location and returns the match data.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-routes
|
||||
*/
|
||||
export function matchRoutes<
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
>(
|
||||
routes: RouteObjectType[],
|
||||
locationArg: Partial<Location> | string,
|
||||
basename = "/"
|
||||
): AgnosticRouteMatch<string, RouteObjectType>[] | null {
|
||||
return matchRoutesImpl(routes, locationArg, basename, false);
|
||||
}
|
||||
|
||||
export function matchRoutesImpl<
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
>(
|
||||
routes: RouteObjectType[],
|
||||
locationArg: Partial<Location> | string,
|
||||
basename: string,
|
||||
allowPartial: boolean
|
||||
): AgnosticRouteMatch<string, RouteObjectType>[] | null {
|
||||
let location =
|
||||
typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
|
||||
|
||||
let pathname = stripBasename(location.pathname || "/", basename);
|
||||
|
||||
if (pathname == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let branches = flattenRoutes(routes);
|
||||
rankRouteBranches(branches);
|
||||
|
||||
let matches = null;
|
||||
let decoded = decodePath(pathname);
|
||||
for (let i = 0; matches == null && i < branches.length; ++i) {
|
||||
// Incoming pathnames are generally encoded from either window.location
|
||||
// or from router.navigate, but we want to match against the unencoded
|
||||
// paths in the route definitions. Memory router locations won't be
|
||||
// encoded here but there also shouldn't be anything to decode so this
|
||||
// should be a safe operation. This avoids needing matchRoutes to be
|
||||
// history-aware.
|
||||
matches = matchRouteBranch<string, RouteObjectType>(
|
||||
branches[i],
|
||||
decoded,
|
||||
allowPartial
|
||||
);
|
||||
}
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
export interface UIMatch<Data = unknown, Handle = unknown> {
|
||||
id: string;
|
||||
pathname: string;
|
||||
params: AgnosticRouteMatch["params"];
|
||||
data: Data;
|
||||
handle: Handle;
|
||||
}
|
||||
|
||||
export function convertRouteMatchToUiMatch(
|
||||
match: AgnosticDataRouteMatch,
|
||||
loaderData: RouteData
|
||||
): UIMatch {
|
||||
let { route, pathname, params } = match;
|
||||
return {
|
||||
id: route.id,
|
||||
pathname,
|
||||
params,
|
||||
data: loaderData[route.id],
|
||||
handle: route.handle,
|
||||
};
|
||||
}
|
||||
|
||||
interface RouteMeta<
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
> {
|
||||
relativePath: string;
|
||||
caseSensitive: boolean;
|
||||
childrenIndex: number;
|
||||
route: RouteObjectType;
|
||||
}
|
||||
|
||||
interface RouteBranch<
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
> {
|
||||
path: string;
|
||||
score: number;
|
||||
routesMeta: RouteMeta<RouteObjectType>[];
|
||||
}
|
||||
|
||||
function flattenRoutes<
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
>(
|
||||
routes: RouteObjectType[],
|
||||
branches: RouteBranch<RouteObjectType>[] = [],
|
||||
parentsMeta: RouteMeta<RouteObjectType>[] = [],
|
||||
parentPath = ""
|
||||
): RouteBranch<RouteObjectType>[] {
|
||||
let flattenRoute = (
|
||||
route: RouteObjectType,
|
||||
index: number,
|
||||
relativePath?: string
|
||||
) => {
|
||||
let meta: RouteMeta<RouteObjectType> = {
|
||||
relativePath:
|
||||
relativePath === undefined ? route.path || "" : relativePath,
|
||||
caseSensitive: route.caseSensitive === true,
|
||||
childrenIndex: index,
|
||||
route,
|
||||
};
|
||||
|
||||
if (meta.relativePath.startsWith("/")) {
|
||||
invariant(
|
||||
meta.relativePath.startsWith(parentPath),
|
||||
`Absolute route path "${meta.relativePath}" nested under path ` +
|
||||
`"${parentPath}" is not valid. An absolute child route path ` +
|
||||
`must start with the combined path of all its parent routes.`
|
||||
);
|
||||
|
||||
meta.relativePath = meta.relativePath.slice(parentPath.length);
|
||||
}
|
||||
|
||||
let path = joinPaths([parentPath, meta.relativePath]);
|
||||
let routesMeta = parentsMeta.concat(meta);
|
||||
|
||||
// Add the children before adding this route to the array, so we traverse the
|
||||
// route tree depth-first and child routes appear before their parents in
|
||||
// the "flattened" version.
|
||||
if (route.children && route.children.length > 0) {
|
||||
invariant(
|
||||
// Our types know better, but runtime JS may not!
|
||||
// @ts-expect-error
|
||||
route.index !== true,
|
||||
`Index routes must not have child routes. Please remove ` +
|
||||
`all child routes from route path "${path}".`
|
||||
);
|
||||
flattenRoutes(route.children, branches, routesMeta, path);
|
||||
}
|
||||
|
||||
// Routes without a path shouldn't ever match by themselves unless they are
|
||||
// index routes, so don't add them to the list of possible branches.
|
||||
if (route.path == null && !route.index) {
|
||||
return;
|
||||
}
|
||||
|
||||
branches.push({
|
||||
path,
|
||||
score: computeScore(path, route.index),
|
||||
routesMeta,
|
||||
});
|
||||
};
|
||||
routes.forEach((route, index) => {
|
||||
// coarse-grain check for optional params
|
||||
if (route.path === "" || !route.path?.includes("?")) {
|
||||
flattenRoute(route, index);
|
||||
} else {
|
||||
for (let exploded of explodeOptionalSegments(route.path)) {
|
||||
flattenRoute(route, index, exploded);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return branches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes all combinations of optional path segments for a given path,
|
||||
* excluding combinations that are ambiguous and of lower priority.
|
||||
*
|
||||
* For example, `/one/:two?/three/:four?/:five?` explodes to:
|
||||
* - `/one/three`
|
||||
* - `/one/:two/three`
|
||||
* - `/one/three/:four`
|
||||
* - `/one/three/:five`
|
||||
* - `/one/:two/three/:four`
|
||||
* - `/one/:two/three/:five`
|
||||
* - `/one/three/:four/:five`
|
||||
* - `/one/:two/three/:four/:five`
|
||||
*/
|
||||
function explodeOptionalSegments(path: string): string[] {
|
||||
let segments = path.split("/");
|
||||
if (segments.length === 0) return [];
|
||||
|
||||
let [first, ...rest] = segments;
|
||||
|
||||
// Optional path segments are denoted by a trailing `?`
|
||||
let isOptional = first.endsWith("?");
|
||||
// Compute the corresponding required segment: `foo?` -> `foo`
|
||||
let required = first.replace(/\?$/, "");
|
||||
|
||||
if (rest.length === 0) {
|
||||
// Intepret empty string as omitting an optional segment
|
||||
// `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three`
|
||||
return isOptional ? [required, ""] : [required];
|
||||
}
|
||||
|
||||
let restExploded = explodeOptionalSegments(rest.join("/"));
|
||||
|
||||
let result: string[] = [];
|
||||
|
||||
// All child paths with the prefix. Do this for all children before the
|
||||
// optional version for all children, so we get consistent ordering where the
|
||||
// parent optional aspect is preferred as required. Otherwise, we can get
|
||||
// child sections interspersed where deeper optional segments are higher than
|
||||
// parent optional segments, where for example, /:two would explode _earlier_
|
||||
// then /:one. By always including the parent as required _for all children_
|
||||
// first, we avoid this issue
|
||||
result.push(
|
||||
...restExploded.map((subpath) =>
|
||||
subpath === "" ? required : [required, subpath].join("/")
|
||||
)
|
||||
);
|
||||
|
||||
// Then, if this is an optional value, add all child versions without
|
||||
if (isOptional) {
|
||||
result.push(...restExploded);
|
||||
}
|
||||
|
||||
// for absolute paths, ensure `/` instead of empty segment
|
||||
return result.map((exploded) =>
|
||||
path.startsWith("/") && exploded === "" ? "/" : exploded
|
||||
);
|
||||
}
|
||||
|
||||
function rankRouteBranches(branches: RouteBranch[]): void {
|
||||
branches.sort((a, b) =>
|
||||
a.score !== b.score
|
||||
? b.score - a.score // Higher score first
|
||||
: compareIndexes(
|
||||
a.routesMeta.map((meta) => meta.childrenIndex),
|
||||
b.routesMeta.map((meta) => meta.childrenIndex)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const paramRe = /^:[\w-]+$/;
|
||||
const dynamicSegmentValue = 3;
|
||||
const indexRouteValue = 2;
|
||||
const emptySegmentValue = 1;
|
||||
const staticSegmentValue = 10;
|
||||
const splatPenalty = -2;
|
||||
const isSplat = (s: string) => s === "*";
|
||||
|
||||
function computeScore(path: string, index: boolean | undefined): number {
|
||||
let segments = path.split("/");
|
||||
let initialScore = segments.length;
|
||||
if (segments.some(isSplat)) {
|
||||
initialScore += splatPenalty;
|
||||
}
|
||||
|
||||
if (index) {
|
||||
initialScore += indexRouteValue;
|
||||
}
|
||||
|
||||
return segments
|
||||
.filter((s) => !isSplat(s))
|
||||
.reduce(
|
||||
(score, segment) =>
|
||||
score +
|
||||
(paramRe.test(segment)
|
||||
? dynamicSegmentValue
|
||||
: segment === ""
|
||||
? emptySegmentValue
|
||||
: staticSegmentValue),
|
||||
initialScore
|
||||
);
|
||||
}
|
||||
|
||||
function compareIndexes(a: number[], b: number[]): number {
|
||||
let siblings =
|
||||
a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
|
||||
|
||||
return siblings
|
||||
? // If two routes are siblings, we should try to match the earlier sibling
|
||||
// first. This allows people to have fine-grained control over the matching
|
||||
// behavior by simply putting routes with identical paths in the order they
|
||||
// want them tried.
|
||||
a[a.length - 1] - b[b.length - 1]
|
||||
: // Otherwise, it doesn't really make sense to rank non-siblings by index,
|
||||
// so they sort equally.
|
||||
0;
|
||||
}
|
||||
|
||||
function matchRouteBranch<
|
||||
ParamKey extends string = string,
|
||||
RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
|
||||
>(
|
||||
branch: RouteBranch<RouteObjectType>,
|
||||
pathname: string,
|
||||
allowPartial = false
|
||||
): AgnosticRouteMatch<ParamKey, RouteObjectType>[] | null {
|
||||
let { routesMeta } = branch;
|
||||
|
||||
let matchedParams = {};
|
||||
let matchedPathname = "/";
|
||||
let matches: AgnosticRouteMatch<ParamKey, RouteObjectType>[] = [];
|
||||
for (let i = 0; i < routesMeta.length; ++i) {
|
||||
let meta = routesMeta[i];
|
||||
let end = i === routesMeta.length - 1;
|
||||
let remainingPathname =
|
||||
matchedPathname === "/"
|
||||
? pathname
|
||||
: pathname.slice(matchedPathname.length) || "/";
|
||||
let match = matchPath(
|
||||
{ path: meta.relativePath, caseSensitive: meta.caseSensitive, end },
|
||||
remainingPathname
|
||||
);
|
||||
|
||||
let route = meta.route;
|
||||
|
||||
if (
|
||||
!match &&
|
||||
end &&
|
||||
allowPartial &&
|
||||
!routesMeta[routesMeta.length - 1].route.index
|
||||
) {
|
||||
match = matchPath(
|
||||
{
|
||||
path: meta.relativePath,
|
||||
caseSensitive: meta.caseSensitive,
|
||||
end: false,
|
||||
},
|
||||
remainingPathname
|
||||
);
|
||||
}
|
||||
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
|
||||
Object.assign(matchedParams, match.params);
|
||||
|
||||
matches.push({
|
||||
// TODO: Can this as be avoided?
|
||||
params: matchedParams as Params<ParamKey>,
|
||||
pathname: joinPaths([matchedPathname, match.pathname]),
|
||||
pathnameBase: normalizePathname(
|
||||
joinPaths([matchedPathname, match.pathnameBase])
|
||||
),
|
||||
route,
|
||||
});
|
||||
|
||||
if (match.pathnameBase !== "/") {
|
||||
matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
|
||||
}
|
||||
}
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a path with params interpolated.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/generate-path
|
||||
*/
|
||||
export function generatePath<Path extends string>(
|
||||
originalPath: Path,
|
||||
params: {
|
||||
[key in PathParam<Path>]: string | null;
|
||||
} = {} as any
|
||||
): string {
|
||||
let path: string = originalPath;
|
||||
if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
|
||||
warning(
|
||||
false,
|
||||
`Route path "${path}" will be treated as if it were ` +
|
||||
`"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` +
|
||||
`always follow a \`/\` in the pattern. To get rid of this warning, ` +
|
||||
`please change the route path to "${path.replace(/\*$/, "/*")}".`
|
||||
);
|
||||
path = path.replace(/\*$/, "/*") as Path;
|
||||
}
|
||||
|
||||
// ensure `/` is added at the beginning if the path is absolute
|
||||
const prefix = path.startsWith("/") ? "/" : "";
|
||||
|
||||
const stringify = (p: any) =>
|
||||
p == null ? "" : typeof p === "string" ? p : String(p);
|
||||
|
||||
const segments = path
|
||||
.split(/\/+/)
|
||||
.map((segment, index, array) => {
|
||||
const isLastSegment = index === array.length - 1;
|
||||
|
||||
// only apply the splat if it's the last segment
|
||||
if (isLastSegment && segment === "*") {
|
||||
const star = "*" as PathParam<Path>;
|
||||
// Apply the splat
|
||||
return stringify(params[star]);
|
||||
}
|
||||
|
||||
const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
|
||||
if (keyMatch) {
|
||||
const [, key, optional] = keyMatch;
|
||||
let param = params[key as PathParam<Path>];
|
||||
invariant(optional === "?" || param != null, `Missing ":${key}" param`);
|
||||
return stringify(param);
|
||||
}
|
||||
|
||||
// Remove any optional markers from optional static segments
|
||||
return segment.replace(/\?$/g, "");
|
||||
})
|
||||
// Remove empty segments
|
||||
.filter((segment) => !!segment);
|
||||
|
||||
return prefix + segments.join("/");
|
||||
}
|
||||
|
||||
/**
|
||||
* A PathPattern is used to match on some portion of a URL pathname.
|
||||
*/
|
||||
export interface PathPattern<Path extends string = string> {
|
||||
/**
|
||||
* A string to match against a URL pathname. May contain `:id`-style segments
|
||||
* to indicate placeholders for dynamic parameters. May also end with `/*` to
|
||||
* indicate matching the rest of the URL pathname.
|
||||
*/
|
||||
path: Path;
|
||||
/**
|
||||
* Should be `true` if the static portions of the `path` should be matched in
|
||||
* the same case.
|
||||
*/
|
||||
caseSensitive?: boolean;
|
||||
/**
|
||||
* Should be `true` if this pattern should match the entire URL pathname.
|
||||
*/
|
||||
end?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* A PathMatch contains info about how a PathPattern matched on a URL pathname.
|
||||
*/
|
||||
export interface PathMatch<ParamKey extends string = string> {
|
||||
/**
|
||||
* The names and values of dynamic parameters in the URL.
|
||||
*/
|
||||
params: Params<ParamKey>;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched.
|
||||
*/
|
||||
pathname: string;
|
||||
/**
|
||||
* The portion of the URL pathname that was matched before child routes.
|
||||
*/
|
||||
pathnameBase: string;
|
||||
/**
|
||||
* The pattern that was used to match.
|
||||
*/
|
||||
pattern: PathPattern;
|
||||
}
|
||||
|
||||
type Mutable<T> = {
|
||||
-readonly [P in keyof T]: T[P];
|
||||
};
|
||||
|
||||
/**
|
||||
* Performs pattern matching on a URL pathname and returns information about
|
||||
* the match.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/match-path
|
||||
*/
|
||||
export function matchPath<
|
||||
ParamKey extends ParamParseKey<Path>,
|
||||
Path extends string
|
||||
>(
|
||||
pattern: PathPattern<Path> | Path,
|
||||
pathname: string
|
||||
): PathMatch<ParamKey> | null {
|
||||
if (typeof pattern === "string") {
|
||||
pattern = { path: pattern, caseSensitive: false, end: true };
|
||||
}
|
||||
|
||||
let [matcher, compiledParams] = compilePath(
|
||||
pattern.path,
|
||||
pattern.caseSensitive,
|
||||
pattern.end
|
||||
);
|
||||
|
||||
let match = pathname.match(matcher);
|
||||
if (!match) return null;
|
||||
|
||||
let matchedPathname = match[0];
|
||||
let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
|
||||
let captureGroups = match.slice(1);
|
||||
let params: Params = compiledParams.reduce<Mutable<Params>>(
|
||||
(memo, { paramName, isOptional }, index) => {
|
||||
// We need to compute the pathnameBase here using the raw splat value
|
||||
// instead of using params["*"] later because it will be decoded then
|
||||
if (paramName === "*") {
|
||||
let splatValue = captureGroups[index] || "";
|
||||
pathnameBase = matchedPathname
|
||||
.slice(0, matchedPathname.length - splatValue.length)
|
||||
.replace(/(.)\/+$/, "$1");
|
||||
}
|
||||
|
||||
const value = captureGroups[index];
|
||||
if (isOptional && !value) {
|
||||
memo[paramName] = undefined;
|
||||
} else {
|
||||
memo[paramName] = (value || "").replace(/%2F/g, "/");
|
||||
}
|
||||
return memo;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
return {
|
||||
params,
|
||||
pathname: matchedPathname,
|
||||
pathnameBase,
|
||||
pattern,
|
||||
};
|
||||
}
|
||||
|
||||
type CompiledPathParam = { paramName: string; isOptional?: boolean };
|
||||
|
||||
function compilePath(
|
||||
path: string,
|
||||
caseSensitive = false,
|
||||
end = true
|
||||
): [RegExp, CompiledPathParam[]] {
|
||||
warning(
|
||||
path === "*" || !path.endsWith("*") || path.endsWith("/*"),
|
||||
`Route path "${path}" will be treated as if it were ` +
|
||||
`"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` +
|
||||
`always follow a \`/\` in the pattern. To get rid of this warning, ` +
|
||||
`please change the route path to "${path.replace(/\*$/, "/*")}".`
|
||||
);
|
||||
|
||||
let params: CompiledPathParam[] = [];
|
||||
let regexpSource =
|
||||
"^" +
|
||||
path
|
||||
.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
|
||||
.replace(/^\/*/, "/") // Make sure it has a leading /
|
||||
.replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
|
||||
.replace(
|
||||
/\/:([\w-]+)(\?)?/g,
|
||||
(_: string, paramName: string, isOptional) => {
|
||||
params.push({ paramName, isOptional: isOptional != null });
|
||||
return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
|
||||
}
|
||||
);
|
||||
|
||||
if (path.endsWith("*")) {
|
||||
params.push({ paramName: "*" });
|
||||
regexpSource +=
|
||||
path === "*" || path === "/*"
|
||||
? "(.*)$" // Already matched the initial /, just match the rest
|
||||
: "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
|
||||
} else if (end) {
|
||||
// When matching to the end, ignore trailing slashes
|
||||
regexpSource += "\\/*$";
|
||||
} else if (path !== "" && path !== "/") {
|
||||
// If our path is non-empty and contains anything beyond an initial slash,
|
||||
// then we have _some_ form of path in our regex, so we should expect to
|
||||
// match only if we find the end of this path segment. Look for an optional
|
||||
// non-captured trailing slash (to match a portion of the URL) or the end
|
||||
// of the path (if we've matched to the end). We used to do this with a
|
||||
// word boundary but that gives false positives on routes like
|
||||
// /user-preferences since `-` counts as a word boundary.
|
||||
regexpSource += "(?:(?=\\/|$))";
|
||||
} else {
|
||||
// Nothing to match for "" or "/"
|
||||
}
|
||||
|
||||
let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
|
||||
|
||||
return [matcher, params];
|
||||
}
|
||||
|
||||
export function decodePath(value: string) {
|
||||
try {
|
||||
return value
|
||||
.split("/")
|
||||
.map((v) => decodeURIComponent(v).replace(/\//g, "%2F"))
|
||||
.join("/");
|
||||
} catch (error) {
|
||||
warning(
|
||||
false,
|
||||
`The URL path "${value}" could not be decoded because it is is a ` +
|
||||
`malformed URL segment. This is probably due to a bad percent ` +
|
||||
`encoding (${error}).`
|
||||
);
|
||||
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export function stripBasename(
|
||||
pathname: string,
|
||||
basename: string
|
||||
): string | null {
|
||||
if (basename === "/") return pathname;
|
||||
|
||||
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// We want to leave trailing slash behavior in the user's control, so if they
|
||||
// specify a basename with a trailing slash, we should support it
|
||||
let startIndex = basename.endsWith("/")
|
||||
? basename.length - 1
|
||||
: basename.length;
|
||||
let nextChar = pathname.charAt(startIndex);
|
||||
if (nextChar && nextChar !== "/") {
|
||||
// pathname does not start with basename/
|
||||
return null;
|
||||
}
|
||||
|
||||
return pathname.slice(startIndex) || "/";
|
||||
}
|
||||
|
||||
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
|
||||
export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url);
|
||||
|
||||
/**
|
||||
* Returns a resolved path object relative to the given pathname.
|
||||
*
|
||||
* @see https://reactrouter.com/v6/utils/resolve-path
|
||||
*/
|
||||
export function resolvePath(to: To, fromPathname = "/"): Path {
|
||||
let {
|
||||
pathname: toPathname,
|
||||
search = "",
|
||||
hash = "",
|
||||
} = typeof to === "string" ? parsePath(to) : to;
|
||||
|
||||
let pathname: string;
|
||||
if (toPathname) {
|
||||
if (isAbsoluteUrl(toPathname)) {
|
||||
pathname = toPathname;
|
||||
} else {
|
||||
if (toPathname.includes("//")) {
|
||||
let oldPathname = toPathname;
|
||||
toPathname = removeDoubleSlashes(toPathname);
|
||||
warning(
|
||||
false,
|
||||
`Pathnames cannot have embedded double slashes - normalizing ` +
|
||||
`${oldPathname} -> ${toPathname}`
|
||||
);
|
||||
}
|
||||
if (toPathname.startsWith("/")) {
|
||||
pathname = resolvePathname(toPathname.substring(1), "/");
|
||||
} else {
|
||||
pathname = resolvePathname(toPathname, fromPathname);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
pathname = fromPathname;
|
||||
}
|
||||
|
||||
return {
|
||||
pathname,
|
||||
search: normalizeSearch(search),
|
||||
hash: normalizeHash(hash),
|
||||
};
|
||||
}
|
||||
|
||||
function resolvePathname(relativePath: string, fromPathname: string): string {
|
||||
let segments = fromPathname.replace(/\/+$/, "").split("/");
|
||||
let relativeSegments = relativePath.split("/");
|
||||
|
||||
relativeSegments.forEach((segment) => {
|
||||
if (segment === "..") {
|
||||
// Keep the root "" segment so the pathname starts at /
|
||||
if (segments.length > 1) segments.pop();
|
||||
} else if (segment !== ".") {
|
||||
segments.push(segment);
|
||||
}
|
||||
});
|
||||
|
||||
return segments.length > 1 ? segments.join("/") : "/";
|
||||
}
|
||||
|
||||
function getInvalidPathError(
|
||||
char: string,
|
||||
field: string,
|
||||
dest: string,
|
||||
path: Partial<Path>
|
||||
) {
|
||||
return (
|
||||
`Cannot include a '${char}' character in a manually specified ` +
|
||||
`\`to.${field}\` field [${JSON.stringify(
|
||||
path
|
||||
)}]. Please separate it out to the ` +
|
||||
`\`to.${dest}\` field. Alternatively you may provide the full path as ` +
|
||||
`a string in <Link to="..."> and the router will parse it for you.`
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* When processing relative navigation we want to ignore ancestor routes that
|
||||
* do not contribute to the path, such that index/pathless layout routes don't
|
||||
* interfere.
|
||||
*
|
||||
* For example, when moving a route element into an index route and/or a
|
||||
* pathless layout route, relative link behavior contained within should stay
|
||||
* the same. Both of the following examples should link back to the root:
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts" element={<Link to=".."}>
|
||||
* </Route>
|
||||
*
|
||||
* <Route path="/">
|
||||
* <Route path="accounts">
|
||||
* <Route element={<AccountsLayout />}> // <-- Does not contribute
|
||||
* <Route index element={<Link to=".."} /> // <-- Does not contribute
|
||||
* </Route
|
||||
* </Route>
|
||||
* </Route>
|
||||
*/
|
||||
export function getPathContributingMatches<
|
||||
T extends AgnosticRouteMatch = AgnosticRouteMatch
|
||||
>(matches: T[]) {
|
||||
return matches.filter(
|
||||
(match, index) =>
|
||||
index === 0 || (match.route.path && match.route.path.length > 0)
|
||||
);
|
||||
}
|
||||
|
||||
// Return the array of pathnames for the current route matches - used to
|
||||
// generate the routePathnames input for resolveTo()
|
||||
export function getResolveToMatches<
|
||||
T extends AgnosticRouteMatch = AgnosticRouteMatch
|
||||
>(matches: T[], v7_relativeSplatPath: boolean) {
|
||||
let pathMatches = getPathContributingMatches(matches);
|
||||
|
||||
// When v7_relativeSplatPath is enabled, use the full pathname for the leaf
|
||||
// match so we include splat values for "." links. See:
|
||||
// https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
|
||||
if (v7_relativeSplatPath) {
|
||||
return pathMatches.map((match, idx) =>
|
||||
idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase
|
||||
);
|
||||
}
|
||||
|
||||
return pathMatches.map((match) => match.pathnameBase);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export function resolveTo(
|
||||
toArg: To,
|
||||
routePathnames: string[],
|
||||
locationPathname: string,
|
||||
isPathRelative = false
|
||||
): Path {
|
||||
let to: Partial<Path>;
|
||||
if (typeof toArg === "string") {
|
||||
to = parsePath(toArg);
|
||||
} else {
|
||||
to = { ...toArg };
|
||||
|
||||
invariant(
|
||||
!to.pathname || !to.pathname.includes("?"),
|
||||
getInvalidPathError("?", "pathname", "search", to)
|
||||
);
|
||||
invariant(
|
||||
!to.pathname || !to.pathname.includes("#"),
|
||||
getInvalidPathError("#", "pathname", "hash", to)
|
||||
);
|
||||
invariant(
|
||||
!to.search || !to.search.includes("#"),
|
||||
getInvalidPathError("#", "search", "hash", to)
|
||||
);
|
||||
}
|
||||
|
||||
let isEmptyPath = toArg === "" || to.pathname === "";
|
||||
let toPathname = isEmptyPath ? "/" : to.pathname;
|
||||
|
||||
let from: string;
|
||||
|
||||
// Routing is relative to the current pathname if explicitly requested.
|
||||
//
|
||||
// If a pathname is explicitly provided in `to`, it should be relative to the
|
||||
// route context. This is explained in `Note on `<Link to>` values` in our
|
||||
// migration guide from v5 as a means of disambiguation between `to` values
|
||||
// that begin with `/` and those that do not. However, this is problematic for
|
||||
// `to` values that do not provide a pathname. `to` can simply be a search or
|
||||
// hash string, in which case we should assume that the navigation is relative
|
||||
// to the current location's pathname and *not* the route pathname.
|
||||
if (toPathname == null) {
|
||||
from = locationPathname;
|
||||
} else {
|
||||
let routePathnameIndex = routePathnames.length - 1;
|
||||
|
||||
// With relative="route" (the default), each leading .. segment means
|
||||
// "go up one route" instead of "go up one URL segment". This is a key
|
||||
// difference from how <a href> works and a major reason we call this a
|
||||
// "to" value instead of a "href".
|
||||
if (!isPathRelative && toPathname.startsWith("..")) {
|
||||
let toSegments = toPathname.split("/");
|
||||
|
||||
while (toSegments[0] === "..") {
|
||||
toSegments.shift();
|
||||
routePathnameIndex -= 1;
|
||||
}
|
||||
|
||||
to.pathname = toSegments.join("/");
|
||||
}
|
||||
|
||||
from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
|
||||
}
|
||||
|
||||
let path = resolvePath(to, from);
|
||||
|
||||
// Ensure the pathname has a trailing slash if the original "to" had one
|
||||
let hasExplicitTrailingSlash =
|
||||
toPathname && toPathname !== "/" && toPathname.endsWith("/");
|
||||
// Or if this was a link to the current path which has a trailing slash
|
||||
let hasCurrentTrailingSlash =
|
||||
(isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
|
||||
if (
|
||||
!path.pathname.endsWith("/") &&
|
||||
(hasExplicitTrailingSlash || hasCurrentTrailingSlash)
|
||||
) {
|
||||
path.pathname += "/";
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export function getToPathname(to: To): string | undefined {
|
||||
// Empty strings should be treated the same as / paths
|
||||
return to === "" || (to as Path).pathname === ""
|
||||
? "/"
|
||||
: typeof to === "string"
|
||||
? parsePath(to).pathname
|
||||
: to.pathname;
|
||||
}
|
||||
|
||||
export const removeDoubleSlashes = (path: string): string =>
|
||||
path.replace(/\/\/+/g, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export const joinPaths = (paths: string[]): string =>
|
||||
removeDoubleSlashes(paths.join("/"));
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export const normalizePathname = (pathname: string): string =>
|
||||
pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export const normalizeSearch = (search: string): string =>
|
||||
!search || search === "?"
|
||||
? ""
|
||||
: search.startsWith("?")
|
||||
? search
|
||||
: "?" + search;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export const normalizeHash = (hash: string): string =>
|
||||
!hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
|
||||
|
||||
export type JsonFunction = <Data>(
|
||||
data: Data,
|
||||
init?: number | ResponseInit
|
||||
) => Response;
|
||||
|
||||
/**
|
||||
* This is a shortcut for creating `application/json` responses. Converts `data`
|
||||
* to JSON and sets the `Content-Type` header.
|
||||
*
|
||||
* @deprecated The `json` method is deprecated in favor of returning raw objects.
|
||||
* This method will be removed in v7.
|
||||
*/
|
||||
export const json: JsonFunction = (data, init = {}) => {
|
||||
let responseInit = typeof init === "number" ? { status: init } : init;
|
||||
|
||||
let headers = new Headers(responseInit.headers);
|
||||
if (!headers.has("Content-Type")) {
|
||||
headers.set("Content-Type", "application/json; charset=utf-8");
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify(data), {
|
||||
...responseInit,
|
||||
headers,
|
||||
});
|
||||
};
|
||||
|
||||
export class DataWithResponseInit<D> {
|
||||
type: string = "DataWithResponseInit";
|
||||
data: D;
|
||||
init: ResponseInit | null;
|
||||
|
||||
constructor(data: D, init?: ResponseInit) {
|
||||
this.data = data;
|
||||
this.init = init || null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create "responses" that contain `status`/`headers` without forcing
|
||||
* serialization into an actual `Response` - used by Remix single fetch
|
||||
*/
|
||||
export function data<D>(data: D, init?: number | ResponseInit) {
|
||||
return new DataWithResponseInit(
|
||||
data,
|
||||
typeof init === "number" ? { status: init } : init
|
||||
);
|
||||
}
|
||||
|
||||
export interface TrackedPromise extends Promise<any> {
|
||||
_tracked?: boolean;
|
||||
_data?: any;
|
||||
_error?: any;
|
||||
}
|
||||
|
||||
export class AbortedDeferredError extends Error {}
|
||||
|
||||
export class DeferredData {
|
||||
private pendingKeysSet: Set<string> = new Set<string>();
|
||||
private controller: AbortController;
|
||||
private abortPromise: Promise<void>;
|
||||
private unlistenAbortSignal: () => void;
|
||||
private subscribers: Set<(aborted: boolean, settledKey?: string) => void> =
|
||||
new Set();
|
||||
data: Record<string, unknown>;
|
||||
init?: ResponseInit;
|
||||
deferredKeys: string[] = [];
|
||||
|
||||
constructor(data: Record<string, unknown>, responseInit?: ResponseInit) {
|
||||
invariant(
|
||||
data && typeof data === "object" && !Array.isArray(data),
|
||||
"defer() only accepts plain objects"
|
||||
);
|
||||
|
||||
// Set up an AbortController + Promise we can race against to exit early
|
||||
// cancellation
|
||||
let reject: (e: AbortedDeferredError) => void;
|
||||
this.abortPromise = new Promise((_, r) => (reject = r));
|
||||
this.controller = new AbortController();
|
||||
let onAbort = () =>
|
||||
reject(new AbortedDeferredError("Deferred data aborted"));
|
||||
this.unlistenAbortSignal = () =>
|
||||
this.controller.signal.removeEventListener("abort", onAbort);
|
||||
this.controller.signal.addEventListener("abort", onAbort);
|
||||
|
||||
this.data = Object.entries(data).reduce(
|
||||
(acc, [key, value]) =>
|
||||
Object.assign(acc, {
|
||||
[key]: this.trackPromise(key, value),
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
if (this.done) {
|
||||
// All incoming values were resolved
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
|
||||
this.init = responseInit;
|
||||
}
|
||||
|
||||
private trackPromise(
|
||||
key: string,
|
||||
value: Promise<unknown> | unknown
|
||||
): TrackedPromise | unknown {
|
||||
if (!(value instanceof Promise)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
this.deferredKeys.push(key);
|
||||
this.pendingKeysSet.add(key);
|
||||
|
||||
// We store a little wrapper promise that will be extended with
|
||||
// _data/_error props upon resolve/reject
|
||||
let promise: TrackedPromise = Promise.race([value, this.abortPromise]).then(
|
||||
(data) => this.onSettle(promise, key, undefined, data as unknown),
|
||||
(error) => this.onSettle(promise, key, error as unknown)
|
||||
);
|
||||
|
||||
// Register rejection listeners to avoid uncaught promise rejections on
|
||||
// errors or aborted deferred values
|
||||
promise.catch(() => {});
|
||||
|
||||
Object.defineProperty(promise, "_tracked", { get: () => true });
|
||||
return promise;
|
||||
}
|
||||
|
||||
private onSettle(
|
||||
promise: TrackedPromise,
|
||||
key: string,
|
||||
error: unknown,
|
||||
data?: unknown
|
||||
): unknown {
|
||||
if (
|
||||
this.controller.signal.aborted &&
|
||||
error instanceof AbortedDeferredError
|
||||
) {
|
||||
this.unlistenAbortSignal();
|
||||
Object.defineProperty(promise, "_error", { get: () => error });
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
this.pendingKeysSet.delete(key);
|
||||
|
||||
if (this.done) {
|
||||
// Nothing left to abort!
|
||||
this.unlistenAbortSignal();
|
||||
}
|
||||
|
||||
// If the promise was resolved/rejected with undefined, we'll throw an error as you
|
||||
// should always resolve with a value or null
|
||||
if (error === undefined && data === undefined) {
|
||||
let undefinedError = new Error(
|
||||
`Deferred data for key "${key}" resolved/rejected with \`undefined\`, ` +
|
||||
`you must resolve/reject with a value or \`null\`.`
|
||||
);
|
||||
Object.defineProperty(promise, "_error", { get: () => undefinedError });
|
||||
this.emit(false, key);
|
||||
return Promise.reject(undefinedError);
|
||||
}
|
||||
|
||||
if (data === undefined) {
|
||||
Object.defineProperty(promise, "_error", { get: () => error });
|
||||
this.emit(false, key);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
Object.defineProperty(promise, "_data", { get: () => data });
|
||||
this.emit(false, key);
|
||||
return data;
|
||||
}
|
||||
|
||||
private emit(aborted: boolean, settledKey?: string) {
|
||||
this.subscribers.forEach((subscriber) => subscriber(aborted, settledKey));
|
||||
}
|
||||
|
||||
subscribe(fn: (aborted: boolean, settledKey?: string) => void) {
|
||||
this.subscribers.add(fn);
|
||||
return () => this.subscribers.delete(fn);
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.controller.abort();
|
||||
this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k));
|
||||
this.emit(true);
|
||||
}
|
||||
|
||||
async resolveData(signal: AbortSignal) {
|
||||
let aborted = false;
|
||||
if (!this.done) {
|
||||
let onAbort = () => this.cancel();
|
||||
signal.addEventListener("abort", onAbort);
|
||||
aborted = await new Promise((resolve) => {
|
||||
this.subscribe((aborted) => {
|
||||
signal.removeEventListener("abort", onAbort);
|
||||
if (aborted || this.done) {
|
||||
resolve(aborted);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return aborted;
|
||||
}
|
||||
|
||||
get done() {
|
||||
return this.pendingKeysSet.size === 0;
|
||||
}
|
||||
|
||||
get unwrappedData() {
|
||||
invariant(
|
||||
this.data !== null && this.done,
|
||||
"Can only unwrap data on initialized and settled deferreds"
|
||||
);
|
||||
|
||||
return Object.entries(this.data).reduce(
|
||||
(acc, [key, value]) =>
|
||||
Object.assign(acc, {
|
||||
[key]: unwrapTrackedPromise(value),
|
||||
}),
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
||||
get pendingKeys() {
|
||||
return Array.from(this.pendingKeysSet);
|
||||
}
|
||||
}
|
||||
|
||||
function isTrackedPromise(value: any): value is TrackedPromise {
|
||||
return (
|
||||
value instanceof Promise && (value as TrackedPromise)._tracked === true
|
||||
);
|
||||
}
|
||||
|
||||
function unwrapTrackedPromise(value: any) {
|
||||
if (!isTrackedPromise(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (value._error) {
|
||||
throw value._error;
|
||||
}
|
||||
return value._data;
|
||||
}
|
||||
|
||||
export type DeferFunction = (
|
||||
data: Record<string, unknown>,
|
||||
init?: number | ResponseInit
|
||||
) => DeferredData;
|
||||
|
||||
/**
|
||||
* @deprecated The `defer` method is deprecated in favor of returning raw
|
||||
* objects. This method will be removed in v7.
|
||||
*/
|
||||
export const defer: DeferFunction = (data, init = {}) => {
|
||||
let responseInit = typeof init === "number" ? { status: init } : init;
|
||||
|
||||
return new DeferredData(data, responseInit);
|
||||
};
|
||||
|
||||
export type RedirectFunction = (
|
||||
url: string,
|
||||
init?: number | ResponseInit
|
||||
) => Response;
|
||||
|
||||
/**
|
||||
* A redirect response. Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export const redirect: RedirectFunction = (url, init = 302) => {
|
||||
let responseInit = init;
|
||||
if (typeof responseInit === "number") {
|
||||
responseInit = { status: responseInit };
|
||||
} else if (typeof responseInit.status === "undefined") {
|
||||
responseInit.status = 302;
|
||||
}
|
||||
|
||||
let headers = new Headers(responseInit.headers);
|
||||
headers.set("Location", url);
|
||||
|
||||
return new Response(null, {
|
||||
...responseInit,
|
||||
headers,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will force a document reload to the new location.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export const redirectDocument: RedirectFunction = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Reload-Document", "true");
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* A redirect response that will perform a `history.replaceState` instead of a
|
||||
* `history.pushState` for client-side navigation redirects.
|
||||
* Sets the status code and the `Location` header.
|
||||
* Defaults to "302 Found".
|
||||
*/
|
||||
export const replace: RedirectFunction = (url, init) => {
|
||||
let response = redirect(url, init);
|
||||
response.headers.set("X-Remix-Replace", "true");
|
||||
return response;
|
||||
};
|
||||
|
||||
export type ErrorResponse = {
|
||||
status: number;
|
||||
statusText: string;
|
||||
data: any;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
|
||||
*
|
||||
* We don't export the class for public use since it's an implementation
|
||||
* detail, but we export the interface above so folks can build their own
|
||||
* abstractions around instances via isRouteErrorResponse()
|
||||
*/
|
||||
export class ErrorResponseImpl implements ErrorResponse {
|
||||
status: number;
|
||||
statusText: string;
|
||||
data: any;
|
||||
private error?: Error;
|
||||
private internal: boolean;
|
||||
|
||||
constructor(
|
||||
status: number,
|
||||
statusText: string | undefined,
|
||||
data: any,
|
||||
internal = false
|
||||
) {
|
||||
this.status = status;
|
||||
this.statusText = statusText || "";
|
||||
this.internal = internal;
|
||||
if (data instanceof Error) {
|
||||
this.data = data.toString();
|
||||
this.error = data;
|
||||
} else {
|
||||
this.data = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given error is an ErrorResponse generated from a 4xx/5xx
|
||||
* Response thrown from an action/loader
|
||||
*/
|
||||
export function isRouteErrorResponse(error: any): error is ErrorResponse {
|
||||
return (
|
||||
error != null &&
|
||||
typeof error.status === "number" &&
|
||||
typeof error.statusText === "string" &&
|
||||
typeof error.internal === "boolean" &&
|
||||
"data" in error
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user