react-router 0.0.0-experimental-7b1bbb00 → 0.0.0-experimental-4a8a492a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/index.d.ts +4 -4
- package/dist/index.js +168 -53
- package/dist/index.js.map +1 -1
- package/dist/lib/components.d.ts +17 -5
- package/dist/lib/context.d.ts +10 -1
- package/dist/lib/hooks.d.ts +10 -16
- package/dist/main.js +1 -1
- package/dist/react-router.development.js +143 -38
- package/dist/react-router.development.js.map +1 -1
- package/dist/react-router.production.min.js +2 -2
- package/dist/react-router.production.min.js.map +1 -1
- package/dist/umd/react-router.development.js +167 -51
- package/dist/umd/react-router.development.js.map +1 -1
- package/dist/umd/react-router.production.min.js +2 -2
- package/dist/umd/react-router.production.min.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# `react-router`
|
|
2
2
|
|
|
3
|
+
## 6.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 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))
|
|
8
|
+
- `Location` now accepts a generic for the `location.state` value
|
|
9
|
+
- `ActionFunctionArgs`/`ActionFunction`/`LoaderFunctionArgs`/`LoaderFunction` now accept a generic for the `context` parameter (only used in SSR usages via `createStaticHandler`)
|
|
10
|
+
- 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`
|
|
11
|
+
- 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))
|
|
12
|
+
- Export `ShouldRevalidateFunctionArgs` interface ([#10797](https://github.com/remix-run/react-router/pull/10797))
|
|
13
|
+
- 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))
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies:
|
|
18
|
+
- `@remix-run/router@1.9.0`
|
|
19
|
+
|
|
3
20
|
## 6.15.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import type { ActionFunction, ActionFunctionArgs, Blocker, BlockerFunction, ErrorResponse, Fetcher, HydrationState, InitialEntry, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, ParamParseKey, Params, Path, PathMatch, PathPattern, RedirectFunction, RelativeRoutingType, Router as RemixRouter, FutureConfig as RouterFutureConfig, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To } from "@remix-run/router";
|
|
1
|
+
import type { ActionFunction, ActionFunctionArgs, Blocker, BlockerFunction, ErrorResponse, Fetcher, HydrationState, InitialEntry, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, ParamParseKey, Params, Path, PathMatch, PathPattern, RedirectFunction, RelativeRoutingType, Router as RemixRouter, FutureConfig as RouterFutureConfig, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch } from "@remix-run/router";
|
|
2
2
|
import { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, resolvePath } from "@remix-run/router";
|
|
3
3
|
import type { AwaitProps, FutureConfig, IndexRouteProps, LayoutRouteProps, MemoryRouterProps, NavigateProps, OutletProps, PathRouteProps, RouteProps, RouterProps, RouterProviderProps, RoutesProps } from "./lib/components";
|
|
4
4
|
import { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, createRoutesFromChildren, renderMatches } from "./lib/components";
|
|
5
5
|
import type { DataRouteMatch, DataRouteObject, IndexRouteObject, NavigateOptions, Navigator, NonIndexRouteObject, RouteMatch, RouteObject } from "./lib/context";
|
|
6
|
-
import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
|
|
6
|
+
import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext, ViewTransitionContext } from "./lib/context";
|
|
7
7
|
import type { NavigateFunction } from "./lib/hooks";
|
|
8
8
|
import { useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteId, useRouteLoaderData, useRoutes, useRoutesImpl } from "./lib/hooks";
|
|
9
9
|
type Hash = string;
|
|
10
10
|
type Pathname = string;
|
|
11
11
|
type Search = string;
|
|
12
|
-
export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, FutureConfig, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, ParamParseKey, Params, Path, PathMatch, PathPattern, PathRouteProps, Pathname, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, Blocker as unstable_Blocker, BlockerFunction as unstable_BlockerFunction, };
|
|
12
|
+
export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, FutureConfig, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, ParamParseKey, Params, Path, PathMatch, PathPattern, PathRouteProps, Pathname, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, Blocker as unstable_Blocker, BlockerFunction as unstable_BlockerFunction, };
|
|
13
13
|
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createPath, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
|
|
14
14
|
declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
|
|
15
15
|
hasErrorBoundary: boolean;
|
|
@@ -22,4 +22,4 @@ export declare function createMemoryRouter(routes: RouteObject[], opts?: {
|
|
|
22
22
|
initialIndex?: number;
|
|
23
23
|
}): RemixRouter;
|
|
24
24
|
/** @internal */
|
|
25
|
-
export { DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, };
|
|
25
|
+
export { DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* React Router v0.0.0-experimental-
|
|
2
|
+
* React Router v0.0.0-experimental-4a8a492a
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Remix Software Inc.
|
|
5
5
|
*
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* @license MIT
|
|
10
10
|
*/
|
|
11
11
|
import * as React from 'react';
|
|
12
|
-
import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getPathContributingMatches, UNSAFE_warning, resolveTo, parsePath, matchRoutes, Action, stripBasename, IDLE_BLOCKER, isRouteErrorResponse, createMemoryHistory, AbortedDeferredError, createRouter } from '@remix-run/router';
|
|
12
|
+
import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getPathContributingMatches, UNSAFE_warning, resolveTo, parsePath, matchRoutes, Action, UNSAFE_convertRouteMatchToUiMatch, stripBasename, IDLE_BLOCKER, isRouteErrorResponse, createMemoryHistory, AbortedDeferredError, createRouter } from '@remix-run/router';
|
|
13
13
|
export { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, resolvePath } from '@remix-run/router';
|
|
14
14
|
|
|
15
15
|
function _extends() {
|
|
@@ -37,6 +37,12 @@ const DataRouterStateContext = /*#__PURE__*/React.createContext(null);
|
|
|
37
37
|
if (process.env.NODE_ENV !== "production") {
|
|
38
38
|
DataRouterStateContext.displayName = "DataRouterState";
|
|
39
39
|
}
|
|
40
|
+
const ViewTransitionContext = /*#__PURE__*/React.createContext({
|
|
41
|
+
isTransitioning: false
|
|
42
|
+
});
|
|
43
|
+
if (process.env.NODE_ENV !== "production") {
|
|
44
|
+
ViewTransitionContext.displayName = "ViewTransition";
|
|
45
|
+
}
|
|
40
46
|
const AwaitContext = /*#__PURE__*/React.createContext(null);
|
|
41
47
|
if (process.env.NODE_ENV !== "production") {
|
|
42
48
|
AwaitContext.displayName = "Await";
|
|
@@ -46,7 +52,7 @@ if (process.env.NODE_ENV !== "production") {
|
|
|
46
52
|
* A Navigator is a "location changer"; it's how you get to different locations.
|
|
47
53
|
*
|
|
48
54
|
* Every history instance conforms to the Navigator interface, but the
|
|
49
|
-
* distinction is useful primarily when it comes to the low-level
|
|
55
|
+
* distinction is useful primarily when it comes to the low-level `<Router>` API
|
|
50
56
|
* where both the location and a navigator must be provided separately in order
|
|
51
57
|
* to avoid "tearing" that may occur in a suspense-enabled app if the action
|
|
52
58
|
* and/or location were to be read directly from the history instance.
|
|
@@ -114,7 +120,7 @@ function useHref(to, _temp) {
|
|
|
114
120
|
}
|
|
115
121
|
|
|
116
122
|
/**
|
|
117
|
-
* Returns true if this component is a descendant of a
|
|
123
|
+
* Returns true if this component is a descendant of a `<Router>`.
|
|
118
124
|
*
|
|
119
125
|
* @see https://reactrouter.com/hooks/use-in-router-context
|
|
120
126
|
*/
|
|
@@ -152,7 +158,7 @@ function useNavigationType() {
|
|
|
152
158
|
/**
|
|
153
159
|
* Returns a PathMatch object if the given pattern matches the current URL.
|
|
154
160
|
* This is useful for components that need to know "active" state, e.g.
|
|
155
|
-
*
|
|
161
|
+
* `<NavLink>`.
|
|
156
162
|
*
|
|
157
163
|
* @see https://reactrouter.com/hooks/use-match
|
|
158
164
|
*/
|
|
@@ -184,7 +190,7 @@ function useIsomorphicLayoutEffect(cb) {
|
|
|
184
190
|
}
|
|
185
191
|
|
|
186
192
|
/**
|
|
187
|
-
* Returns an imperative method for changing the location. Used by
|
|
193
|
+
* Returns an imperative method for changing the location. Used by `<Link>`s, but
|
|
188
194
|
* may also be used by other elements to change the location.
|
|
189
195
|
*
|
|
190
196
|
* @see https://reactrouter.com/hooks/use-navigate
|
|
@@ -258,7 +264,7 @@ function useOutletContext() {
|
|
|
258
264
|
|
|
259
265
|
/**
|
|
260
266
|
* Returns the element for the child route at this level of the route
|
|
261
|
-
* hierarchy. Used internally by
|
|
267
|
+
* hierarchy. Used internally by `<Outlet>` to render child routes.
|
|
262
268
|
*
|
|
263
269
|
* @see https://reactrouter.com/hooks/use-outlet
|
|
264
270
|
*/
|
|
@@ -308,7 +314,7 @@ function useResolvedPath(to, _temp2) {
|
|
|
308
314
|
/**
|
|
309
315
|
* Returns the element of the route that matched the current location, prepared
|
|
310
316
|
* with the correct context to render the remainder of the route tree. Route
|
|
311
|
-
* elements in the tree must render an
|
|
317
|
+
* elements in the tree must render an `<Outlet>` to render their child route's
|
|
312
318
|
* element.
|
|
313
319
|
*
|
|
314
320
|
* @see https://reactrouter.com/hooks/use-routes
|
|
@@ -669,22 +675,7 @@ function useMatches() {
|
|
|
669
675
|
matches,
|
|
670
676
|
loaderData
|
|
671
677
|
} = useDataRouterState(DataRouterStateHook.UseMatches);
|
|
672
|
-
return React.useMemo(() => matches.map(
|
|
673
|
-
let {
|
|
674
|
-
pathname,
|
|
675
|
-
params
|
|
676
|
-
} = match;
|
|
677
|
-
// Note: This structure matches that created by createUseMatchesMatch
|
|
678
|
-
// in the @remix-run/router , so if you change this please also change
|
|
679
|
-
// that :) Eventually we'll DRY this up
|
|
680
|
-
return {
|
|
681
|
-
id: match.route.id,
|
|
682
|
-
pathname,
|
|
683
|
-
params,
|
|
684
|
-
data: loaderData[match.route.id],
|
|
685
|
-
handle: match.route.handle
|
|
686
|
-
};
|
|
687
|
-
}), [matches, loaderData]);
|
|
678
|
+
return React.useMemo(() => matches.map(m => UNSAFE_convertRouteMatchToUiMatch(m, loaderData)), [matches, loaderData]);
|
|
688
679
|
}
|
|
689
680
|
|
|
690
681
|
/**
|
|
@@ -740,7 +731,7 @@ function useRouteError() {
|
|
|
740
731
|
}
|
|
741
732
|
|
|
742
733
|
/**
|
|
743
|
-
* Returns the happy-path data from the nearest ancestor
|
|
734
|
+
* Returns the happy-path data from the nearest ancestor `<Await />` value
|
|
744
735
|
*/
|
|
745
736
|
function useAsyncValue() {
|
|
746
737
|
let value = React.useContext(AwaitContext);
|
|
@@ -748,7 +739,7 @@ function useAsyncValue() {
|
|
|
748
739
|
}
|
|
749
740
|
|
|
750
741
|
/**
|
|
751
|
-
* Returns the error from the nearest ancestor
|
|
742
|
+
* Returns the error from the nearest ancestor `<Await />` value
|
|
752
743
|
*/
|
|
753
744
|
function useAsyncError() {
|
|
754
745
|
let value = React.useContext(AwaitContext);
|
|
@@ -882,6 +873,36 @@ function warningOnce(key, cond, message) {
|
|
|
882
873
|
*/
|
|
883
874
|
const START_TRANSITION = "startTransition";
|
|
884
875
|
const startTransitionImpl = React[START_TRANSITION];
|
|
876
|
+
function startTransitionSafe(cb) {
|
|
877
|
+
if (startTransitionImpl) {
|
|
878
|
+
startTransitionImpl(cb);
|
|
879
|
+
} else {
|
|
880
|
+
cb();
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
class Deferred {
|
|
884
|
+
// @ts-expect-error - no initializer
|
|
885
|
+
|
|
886
|
+
// @ts-expect-error - no initializer
|
|
887
|
+
|
|
888
|
+
constructor() {
|
|
889
|
+
this.status = "pending";
|
|
890
|
+
this.promise = new Promise((resolve, reject) => {
|
|
891
|
+
this.resolve = value => {
|
|
892
|
+
if (this.status === "pending") {
|
|
893
|
+
this.status = "resolved";
|
|
894
|
+
resolve(value);
|
|
895
|
+
}
|
|
896
|
+
};
|
|
897
|
+
this.reject = reason => {
|
|
898
|
+
if (this.status === "pending") {
|
|
899
|
+
this.status = "rejected";
|
|
900
|
+
reject(reason);
|
|
901
|
+
}
|
|
902
|
+
};
|
|
903
|
+
});
|
|
904
|
+
}
|
|
905
|
+
}
|
|
885
906
|
|
|
886
907
|
/**
|
|
887
908
|
* Given a Remix Router instance, render the appropriate UI
|
|
@@ -892,16 +913,108 @@ function RouterProvider(_ref) {
|
|
|
892
913
|
router,
|
|
893
914
|
future
|
|
894
915
|
} = _ref;
|
|
895
|
-
// Need to use a layout effect here so we are subscribed early enough to
|
|
896
|
-
// pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
|
|
897
916
|
let [state, setStateImpl] = React.useState(router.state);
|
|
917
|
+
let [pendingState, setPendingState] = React.useState();
|
|
918
|
+
let [vtContext, setVtContext] = React.useState({
|
|
919
|
+
isTransitioning: false
|
|
920
|
+
});
|
|
921
|
+
let [renderDfd, setRenderDfd] = React.useState();
|
|
922
|
+
let [transition, setTransition] = React.useState();
|
|
923
|
+
let [interruption, setInterruption] = React.useState();
|
|
898
924
|
let {
|
|
899
925
|
v7_startTransition
|
|
900
926
|
} = future || {};
|
|
901
|
-
let
|
|
902
|
-
|
|
903
|
-
|
|
927
|
+
let optInStartTransition = React.useCallback(cb => {
|
|
928
|
+
if (v7_startTransition) {
|
|
929
|
+
startTransitionSafe(cb);
|
|
930
|
+
} else {
|
|
931
|
+
cb();
|
|
932
|
+
}
|
|
933
|
+
}, [v7_startTransition]);
|
|
934
|
+
let setState = React.useCallback((newState, _ref2) => {
|
|
935
|
+
let {
|
|
936
|
+
viewTransitionOpts
|
|
937
|
+
} = _ref2;
|
|
938
|
+
if (!viewTransitionOpts || typeof document.startViewTransition !== "function") {
|
|
939
|
+
// Mid-navigation state update, or startViewTransition isn't available
|
|
940
|
+
optInStartTransition(() => setStateImpl(newState));
|
|
941
|
+
} else if (transition && renderDfd) {
|
|
942
|
+
// Interrupting an in-progress transition, cancel and let everything flush
|
|
943
|
+
// out, and then kick off a new transition from the interruption state
|
|
944
|
+
renderDfd.resolve();
|
|
945
|
+
transition.skipTransition();
|
|
946
|
+
setInterruption({
|
|
947
|
+
state: newState,
|
|
948
|
+
currentLocation: viewTransitionOpts.currentLocation,
|
|
949
|
+
nextLocation: viewTransitionOpts.nextLocation
|
|
950
|
+
});
|
|
951
|
+
} else {
|
|
952
|
+
// Completed navigation update with opted-in view transitions, let 'er rip
|
|
953
|
+
setPendingState(newState);
|
|
954
|
+
setVtContext({
|
|
955
|
+
isTransitioning: true,
|
|
956
|
+
currentLocation: viewTransitionOpts.currentLocation,
|
|
957
|
+
nextLocation: viewTransitionOpts.nextLocation
|
|
958
|
+
});
|
|
959
|
+
}
|
|
960
|
+
}, [optInStartTransition, transition, renderDfd]);
|
|
961
|
+
|
|
962
|
+
// Need to use a layout effect here so we are subscribed early enough to
|
|
963
|
+
// pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
|
|
904
964
|
React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
|
|
965
|
+
|
|
966
|
+
// When we start a view transition, create a Deferred we can use for the
|
|
967
|
+
// eventual "completed" render
|
|
968
|
+
React.useEffect(() => {
|
|
969
|
+
if (vtContext.isTransitioning) {
|
|
970
|
+
setRenderDfd(new Deferred());
|
|
971
|
+
}
|
|
972
|
+
}, [vtContext.isTransitioning]);
|
|
973
|
+
|
|
974
|
+
// Once the deferred is created, kick off startViewTransition() to update the
|
|
975
|
+
// DOM and then wait on the Deferred to resolve (indicating the DOM update has
|
|
976
|
+
// happened)
|
|
977
|
+
React.useEffect(() => {
|
|
978
|
+
if (renderDfd && pendingState) {
|
|
979
|
+
let newState = pendingState;
|
|
980
|
+
let renderPromise = renderDfd.promise;
|
|
981
|
+
let transition = document.startViewTransition(async () => {
|
|
982
|
+
optInStartTransition(() => setStateImpl(newState));
|
|
983
|
+
await renderPromise;
|
|
984
|
+
});
|
|
985
|
+
transition.finished.finally(() => {
|
|
986
|
+
setRenderDfd(undefined);
|
|
987
|
+
setTransition(undefined);
|
|
988
|
+
setPendingState(undefined);
|
|
989
|
+
setVtContext({
|
|
990
|
+
isTransitioning: false
|
|
991
|
+
});
|
|
992
|
+
});
|
|
993
|
+
setTransition(transition);
|
|
994
|
+
}
|
|
995
|
+
}, [optInStartTransition, pendingState, renderDfd]);
|
|
996
|
+
|
|
997
|
+
// When the new location finally renders and is committed to the DOM, this
|
|
998
|
+
// effect will run to resolve the transition
|
|
999
|
+
React.useEffect(() => {
|
|
1000
|
+
if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
|
|
1001
|
+
renderDfd.resolve();
|
|
1002
|
+
}
|
|
1003
|
+
}, [renderDfd, transition, state.location, pendingState]);
|
|
1004
|
+
|
|
1005
|
+
// If we get interrupted with a new navigation during a transition, we skip
|
|
1006
|
+
// the active transition, let it cleanup, then kick it off again here
|
|
1007
|
+
React.useEffect(() => {
|
|
1008
|
+
if (!vtContext.isTransitioning && interruption) {
|
|
1009
|
+
setPendingState(interruption.state);
|
|
1010
|
+
setVtContext({
|
|
1011
|
+
isTransitioning: true,
|
|
1012
|
+
currentLocation: interruption.currentLocation,
|
|
1013
|
+
nextLocation: interruption.nextLocation
|
|
1014
|
+
});
|
|
1015
|
+
setInterruption(undefined);
|
|
1016
|
+
}
|
|
1017
|
+
}, [vtContext.isTransitioning, interruption]);
|
|
905
1018
|
let navigator = React.useMemo(() => {
|
|
906
1019
|
return {
|
|
907
1020
|
createHref: router.createHref,
|
|
@@ -936,6 +1049,8 @@ function RouterProvider(_ref) {
|
|
|
936
1049
|
value: dataRouterContext
|
|
937
1050
|
}, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
|
|
938
1051
|
value: state
|
|
1052
|
+
}, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
|
|
1053
|
+
value: vtContext
|
|
939
1054
|
}, /*#__PURE__*/React.createElement(Router, {
|
|
940
1055
|
basename: basename,
|
|
941
1056
|
location: state.location,
|
|
@@ -944,28 +1059,28 @@ function RouterProvider(_ref) {
|
|
|
944
1059
|
}, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
|
|
945
1060
|
routes: router.routes,
|
|
946
1061
|
state: state
|
|
947
|
-
}) : fallbackElement))), null);
|
|
1062
|
+
}) : fallbackElement)))), null);
|
|
948
1063
|
}
|
|
949
|
-
function DataRoutes(
|
|
1064
|
+
function DataRoutes(_ref3) {
|
|
950
1065
|
let {
|
|
951
1066
|
routes,
|
|
952
1067
|
state
|
|
953
|
-
} =
|
|
1068
|
+
} = _ref3;
|
|
954
1069
|
return useRoutesImpl(routes, undefined, state);
|
|
955
1070
|
}
|
|
956
1071
|
/**
|
|
957
|
-
* A
|
|
1072
|
+
* A `<Router>` that stores all entries in memory.
|
|
958
1073
|
*
|
|
959
1074
|
* @see https://reactrouter.com/router-components/memory-router
|
|
960
1075
|
*/
|
|
961
|
-
function MemoryRouter(
|
|
1076
|
+
function MemoryRouter(_ref4) {
|
|
962
1077
|
let {
|
|
963
1078
|
basename,
|
|
964
1079
|
children,
|
|
965
1080
|
initialEntries,
|
|
966
1081
|
initialIndex,
|
|
967
1082
|
future
|
|
968
|
-
} =
|
|
1083
|
+
} = _ref4;
|
|
969
1084
|
let historyRef = React.useRef();
|
|
970
1085
|
if (historyRef.current == null) {
|
|
971
1086
|
historyRef.current = createMemoryHistory({
|
|
@@ -1003,13 +1118,13 @@ function MemoryRouter(_ref3) {
|
|
|
1003
1118
|
*
|
|
1004
1119
|
* @see https://reactrouter.com/components/navigate
|
|
1005
1120
|
*/
|
|
1006
|
-
function Navigate(
|
|
1121
|
+
function Navigate(_ref5) {
|
|
1007
1122
|
let {
|
|
1008
1123
|
to,
|
|
1009
1124
|
replace,
|
|
1010
1125
|
state,
|
|
1011
1126
|
relative
|
|
1012
|
-
} =
|
|
1127
|
+
} = _ref5;
|
|
1013
1128
|
!useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, // TODO: This error is probably because they somehow have 2 versions of
|
|
1014
1129
|
// the router loaded. We can help them understand how to avoid that.
|
|
1015
1130
|
"<Navigate> may be used only in the context of a <Router> component.") : UNSAFE_invariant(false) : void 0;
|
|
@@ -1052,13 +1167,13 @@ function Route(_props) {
|
|
|
1052
1167
|
/**
|
|
1053
1168
|
* Provides location context for the rest of the app.
|
|
1054
1169
|
*
|
|
1055
|
-
* Note: You usually won't render a
|
|
1056
|
-
* router that is more specific to your environment such as a
|
|
1057
|
-
* in web browsers or a
|
|
1170
|
+
* Note: You usually won't render a `<Router>` directly. Instead, you'll render a
|
|
1171
|
+
* router that is more specific to your environment such as a `<BrowserRouter>`
|
|
1172
|
+
* in web browsers or a `<StaticRouter>` for server rendering.
|
|
1058
1173
|
*
|
|
1059
1174
|
* @see https://reactrouter.com/router-components/router
|
|
1060
1175
|
*/
|
|
1061
|
-
function Router(
|
|
1176
|
+
function Router(_ref6) {
|
|
1062
1177
|
let {
|
|
1063
1178
|
basename: basenameProp = "/",
|
|
1064
1179
|
children = null,
|
|
@@ -1066,7 +1181,7 @@ function Router(_ref5) {
|
|
|
1066
1181
|
navigationType = Action.Pop,
|
|
1067
1182
|
navigator,
|
|
1068
1183
|
static: staticProp = false
|
|
1069
|
-
} =
|
|
1184
|
+
} = _ref6;
|
|
1070
1185
|
!!useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.") : UNSAFE_invariant(false) : void 0;
|
|
1071
1186
|
|
|
1072
1187
|
// Preserve trailing slashes on basename, so we can let the user control
|
|
@@ -1115,28 +1230,28 @@ function Router(_ref5) {
|
|
|
1115
1230
|
}));
|
|
1116
1231
|
}
|
|
1117
1232
|
/**
|
|
1118
|
-
* A container for a nested tree of
|
|
1233
|
+
* A container for a nested tree of `<Route>` elements that renders the branch
|
|
1119
1234
|
* that best matches the current location.
|
|
1120
1235
|
*
|
|
1121
1236
|
* @see https://reactrouter.com/components/routes
|
|
1122
1237
|
*/
|
|
1123
|
-
function Routes(
|
|
1238
|
+
function Routes(_ref7) {
|
|
1124
1239
|
let {
|
|
1125
1240
|
children,
|
|
1126
1241
|
location
|
|
1127
|
-
} =
|
|
1242
|
+
} = _ref7;
|
|
1128
1243
|
return useRoutes(createRoutesFromChildren(children), location);
|
|
1129
1244
|
}
|
|
1130
1245
|
/**
|
|
1131
1246
|
* Component to use for rendering lazily loaded data from returning defer()
|
|
1132
1247
|
* in a loader function
|
|
1133
1248
|
*/
|
|
1134
|
-
function Await(
|
|
1249
|
+
function Await(_ref8) {
|
|
1135
1250
|
let {
|
|
1136
1251
|
children,
|
|
1137
1252
|
errorElement,
|
|
1138
1253
|
resolve
|
|
1139
|
-
} =
|
|
1254
|
+
} = _ref8;
|
|
1140
1255
|
return /*#__PURE__*/React.createElement(AwaitErrorBoundary, {
|
|
1141
1256
|
resolve: resolve,
|
|
1142
1257
|
errorElement: errorElement
|
|
@@ -1239,12 +1354,12 @@ class AwaitErrorBoundary extends React.Component {
|
|
|
1239
1354
|
|
|
1240
1355
|
/**
|
|
1241
1356
|
* @private
|
|
1242
|
-
* Indirection to leverage useAsyncValue for a render-prop API on
|
|
1357
|
+
* Indirection to leverage useAsyncValue for a render-prop API on `<Await>`
|
|
1243
1358
|
*/
|
|
1244
|
-
function ResolveAwait(
|
|
1359
|
+
function ResolveAwait(_ref9) {
|
|
1245
1360
|
let {
|
|
1246
1361
|
children
|
|
1247
|
-
} =
|
|
1362
|
+
} = _ref9;
|
|
1248
1363
|
let data = useAsyncValue();
|
|
1249
1364
|
let toRender = typeof children === "function" ? children(data) : children;
|
|
1250
1365
|
return /*#__PURE__*/React.createElement(React.Fragment, null, toRender);
|
|
@@ -1357,5 +1472,5 @@ function createMemoryRouter(routes, opts) {
|
|
|
1357
1472
|
}).initialize();
|
|
1358
1473
|
}
|
|
1359
1474
|
|
|
1360
|
-
export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
|
|
1475
|
+
export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
|
|
1361
1476
|
//# sourceMappingURL=index.js.map
|