@tanstack/react-router 1.98.0 → 1.98.1
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/dist/cjs/Match.cjs +60 -22
- package/dist/cjs/Match.cjs.map +1 -1
- package/dist/cjs/Matches.cjs +4 -1
- package/dist/cjs/Matches.cjs.map +1 -1
- package/dist/cjs/ScriptOnce.cjs +1 -1
- package/dist/cjs/ScriptOnce.cjs.map +1 -1
- package/dist/cjs/ScrollRestoration.cjs +39 -0
- package/dist/cjs/ScrollRestoration.cjs.map +1 -0
- package/dist/cjs/ScrollRestoration.d.cts +15 -0
- package/dist/cjs/Transitioner.cjs +3 -33
- package/dist/cjs/Transitioner.cjs.map +1 -1
- package/dist/cjs/index.cjs +3 -4
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +1 -2
- package/dist/cjs/router.cjs +14 -12
- package/dist/cjs/router.cjs.map +1 -1
- package/dist/cjs/router.d.cts +26 -26
- package/dist/cjs/scroll-restoration.cjs +168 -165
- package/dist/cjs/scroll-restoration.cjs.map +1 -1
- package/dist/cjs/scroll-restoration.d.cts +25 -15
- package/dist/esm/Match.js +62 -24
- package/dist/esm/Match.js.map +1 -1
- package/dist/esm/Matches.js +4 -1
- package/dist/esm/Matches.js.map +1 -1
- package/dist/esm/ScriptOnce.js +1 -1
- package/dist/esm/ScriptOnce.js.map +1 -1
- package/dist/esm/ScrollRestoration.d.ts +15 -0
- package/dist/esm/ScrollRestoration.js +39 -0
- package/dist/esm/ScrollRestoration.js.map +1 -0
- package/dist/esm/Transitioner.js +4 -34
- package/dist/esm/Transitioner.js.map +1 -1
- package/dist/esm/index.d.ts +1 -2
- package/dist/esm/index.js +1 -2
- package/dist/esm/router.d.ts +26 -26
- package/dist/esm/router.js +15 -13
- package/dist/esm/router.js.map +1 -1
- package/dist/esm/scroll-restoration.d.ts +25 -15
- package/dist/esm/scroll-restoration.js +168 -148
- package/dist/esm/scroll-restoration.js.map +1 -1
- package/package.json +3 -3
- package/src/Match.tsx +79 -48
- package/src/Matches.tsx +1 -1
- package/src/ScriptOnce.tsx +1 -1
- package/src/ScrollRestoration.tsx +65 -0
- package/src/Transitioner.tsx +4 -40
- package/src/index.tsx +1 -3
- package/src/router.ts +43 -38
- package/src/scroll-restoration.tsx +271 -183
package/dist/esm/Match.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import invariant from "tiny-invariant";
|
|
5
5
|
import warning from "tiny-warning";
|
|
6
|
-
import { pick, createControlledPromise
|
|
6
|
+
import { rootRouteId, getLocationChangeInfo, pick, createControlledPromise } from "@tanstack/router-core";
|
|
7
7
|
import { ErrorComponent, CatchBoundary } from "./CatchBoundary.js";
|
|
8
8
|
import { useRouterState } from "./useRouterState.js";
|
|
9
9
|
import { useRouter } from "./useRouter.js";
|
|
@@ -12,6 +12,7 @@ import { isRedirect } from "./redirects.js";
|
|
|
12
12
|
import { matchContext } from "./matchContext.js";
|
|
13
13
|
import { SafeFragment } from "./SafeFragment.js";
|
|
14
14
|
import { renderRouteNotFound } from "./renderRouteNotFound.js";
|
|
15
|
+
import { ScrollRestoration } from "./scroll-restoration.js";
|
|
15
16
|
const Match = React.memo(function MatchImpl({
|
|
16
17
|
matchId
|
|
17
18
|
}) {
|
|
@@ -45,30 +46,67 @@ const Match = React.memo(function MatchImpl({
|
|
|
45
46
|
const resetKey = useRouterState({
|
|
46
47
|
select: (s) => s.loadedAt
|
|
47
48
|
});
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
onCatch: (error, errorInfo) => {
|
|
54
|
-
if (isNotFound(error)) throw error;
|
|
55
|
-
warning(false, `Error in route match: ${matchId}`);
|
|
56
|
-
routeOnCatch == null ? void 0 : routeOnCatch(error, errorInfo);
|
|
57
|
-
},
|
|
58
|
-
children: /* @__PURE__ */ jsx(
|
|
59
|
-
ResolvedNotFoundBoundary,
|
|
60
|
-
{
|
|
61
|
-
fallback: (error) => {
|
|
62
|
-
if (!routeNotFoundComponent || error.routeId && error.routeId !== routeId || !error.routeId && !route.isRoot)
|
|
63
|
-
throw error;
|
|
64
|
-
return React.createElement(routeNotFoundComponent, error);
|
|
65
|
-
},
|
|
66
|
-
children: /* @__PURE__ */ jsx(MatchInner, { matchId })
|
|
67
|
-
}
|
|
68
|
-
)
|
|
49
|
+
const parentRouteId = useRouterState({
|
|
50
|
+
select: (s) => {
|
|
51
|
+
var _a2;
|
|
52
|
+
const index = s.matches.findIndex((d) => d.id === matchId);
|
|
53
|
+
return (_a2 = s.matches[index - 1]) == null ? void 0 : _a2.routeId;
|
|
69
54
|
}
|
|
70
|
-
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
57
|
+
/* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsx(
|
|
58
|
+
ResolvedCatchBoundary,
|
|
59
|
+
{
|
|
60
|
+
getResetKey: () => resetKey,
|
|
61
|
+
errorComponent: routeErrorComponent || ErrorComponent,
|
|
62
|
+
onCatch: (error, errorInfo) => {
|
|
63
|
+
if (isNotFound(error)) throw error;
|
|
64
|
+
warning(false, `Error in route match: ${matchId}`);
|
|
65
|
+
routeOnCatch == null ? void 0 : routeOnCatch(error, errorInfo);
|
|
66
|
+
},
|
|
67
|
+
children: /* @__PURE__ */ jsx(
|
|
68
|
+
ResolvedNotFoundBoundary,
|
|
69
|
+
{
|
|
70
|
+
fallback: (error) => {
|
|
71
|
+
if (!routeNotFoundComponent || error.routeId && error.routeId !== routeId || !error.routeId && !route.isRoot)
|
|
72
|
+
throw error;
|
|
73
|
+
return React.createElement(routeNotFoundComponent, error);
|
|
74
|
+
},
|
|
75
|
+
children: /* @__PURE__ */ jsx(MatchInner, { matchId })
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
) }) }),
|
|
80
|
+
parentRouteId === rootRouteId ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
81
|
+
/* @__PURE__ */ jsx(OnRendered, {}),
|
|
82
|
+
/* @__PURE__ */ jsx(ScrollRestoration, {})
|
|
83
|
+
] }) : null
|
|
84
|
+
] });
|
|
71
85
|
});
|
|
86
|
+
function OnRendered() {
|
|
87
|
+
var _a;
|
|
88
|
+
const router = useRouter();
|
|
89
|
+
const prevLocationRef = React.useRef(
|
|
90
|
+
void 0
|
|
91
|
+
);
|
|
92
|
+
return /* @__PURE__ */ jsx(
|
|
93
|
+
"script",
|
|
94
|
+
{
|
|
95
|
+
suppressHydrationWarning: true,
|
|
96
|
+
ref: (el) => {
|
|
97
|
+
if (el) {
|
|
98
|
+
router.emit({
|
|
99
|
+
type: "onRendered",
|
|
100
|
+
...getLocationChangeInfo(router.state)
|
|
101
|
+
});
|
|
102
|
+
} else {
|
|
103
|
+
prevLocationRef.current = router.state.resolvedLocation;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
(_a = router.state.resolvedLocation) == null ? void 0 : _a.state.key
|
|
108
|
+
);
|
|
109
|
+
}
|
|
72
110
|
const MatchInner = React.memo(function MatchInnerImpl({
|
|
73
111
|
matchId
|
|
74
112
|
}) {
|
package/dist/esm/Match.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport {\n createControlledPromise,\n pick,\n rootRouteId,\n} from '@tanstack/router-core'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport type { AnyRoute } from './route'\n\nexport const Match = React.memo(function MatchImpl({\n matchId,\n}: {\n matchId: string\n}) {\n const router = useRouter()\n const routeId = useRouterState({\n select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n })\n\n invariant(\n routeId,\n `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n )\n\n const route: AnyRoute = router.routesById[routeId]\n\n const PendingComponent =\n route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n const routeErrorComponent =\n route.options.errorComponent ?? router.options.defaultErrorComponent\n\n const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n const routeNotFoundComponent = route.isRoot\n ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n (route.options.notFoundComponent ??\n router.options.notFoundRoute?.options.component)\n : route.options.notFoundComponent\n\n const ResolvedSuspenseBoundary =\n // If we're on the root route, allow forcefully wrapping in suspense\n (!route.isRoot || route.options.wrapInSuspense) &&\n (route.options.wrapInSuspense ??\n PendingComponent ??\n (route.options.errorComponent as any)?.preload)\n ? React.Suspense\n : SafeFragment\n\n const ResolvedCatchBoundary = routeErrorComponent\n ? CatchBoundary\n : SafeFragment\n\n const ResolvedNotFoundBoundary = routeNotFoundComponent\n ? CatchNotFound\n : SafeFragment\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n return (\n <matchContext.Provider value={matchId}>\n <ResolvedSuspenseBoundary fallback={pendingElement}>\n <ResolvedCatchBoundary\n getResetKey={() => resetKey}\n errorComponent={routeErrorComponent || ErrorComponent}\n onCatch={(error, errorInfo) => {\n // Forward not found errors (we don't want to show the error component for these)\n if (isNotFound(error)) throw error\n warning(false, `Error in route match: ${matchId}`)\n routeOnCatch?.(error, errorInfo)\n }}\n >\n <ResolvedNotFoundBoundary\n fallback={(error) => {\n // If the current not found handler doesn't exist or it has a\n // route ID which doesn't match the current route, rethrow the error\n if (\n !routeNotFoundComponent ||\n (error.routeId && error.routeId !== routeId) ||\n (!error.routeId && !route.isRoot)\n )\n throw error\n\n return React.createElement(routeNotFoundComponent, error as any)\n }}\n >\n <MatchInner matchId={matchId} />\n </ResolvedNotFoundBoundary>\n </ResolvedCatchBoundary>\n </ResolvedSuspenseBoundary>\n </matchContext.Provider>\n )\n})\n\nexport const MatchInner = React.memo(function MatchInnerImpl({\n matchId,\n}: {\n matchId: string\n}): any {\n const router = useRouter()\n\n const { match, key, routeId } = useRouterState({\n select: (s) => {\n const matchIndex = s.matches.findIndex((d) => d.id === matchId)\n const match = s.matches[matchIndex]!\n const routeId = match.routeId as string\n\n const remountFn =\n (router.routesById[routeId] as AnyRoute).options.remountDeps ??\n router.options.defaultRemountDeps\n const remountDeps = remountFn?.({\n routeId,\n loaderDeps: match.loaderDeps,\n params: match._strictParams,\n search: match._strictSearch,\n })\n const key = remountDeps ? JSON.stringify(remountDeps) : undefined\n\n return {\n key,\n routeId,\n match: pick(match, ['id', 'status', 'error']),\n }\n },\n structuralSharing: true as any,\n })\n\n const route = router.routesById[routeId] as AnyRoute\n\n const out = React.useMemo(() => {\n const Comp = route.options.component ?? router.options.defaultComponent\n if (Comp) {\n return <Comp key={key} />\n }\n return <Outlet />\n }, [key, route.options.component, router.options.defaultComponent])\n\n // function useChangedDiff(value: any) {\n // const ref = React.useRef(value)\n // const changed = ref.current !== value\n // if (changed) {\n // console.log(\n // 'Changed:',\n // value,\n // Object.fromEntries(\n // Object.entries(value).filter(\n // ([key, val]) => val !== ref.current[key],\n // ),\n // ),\n // )\n // }\n // ref.current = value\n // }\n\n // useChangedDiff(match)\n\n const RouteErrorComponent =\n (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n ErrorComponent\n\n if (match.status === 'notFound') {\n invariant(isNotFound(match.error), 'Expected a notFound error')\n return renderRouteNotFound(router, route, match.error)\n }\n\n if (match.status === 'redirected') {\n // Redirects should be handled by the router transition. If we happen to\n // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n invariant(isRedirect(match.error), 'Expected a redirect error')\n\n // warning(\n // false,\n // 'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n // )\n throw router.getMatch(match.id)?.loadPromise\n }\n\n if (match.status === 'error') {\n // If we're on the server, we need to use React's new and super\n // wonky api for throwing errors from a server side render inside\n // of a suspense boundary. This is the only way to get\n // renderToPipeableStream to not hang indefinitely.\n // We'll serialize the error and rethrow it on the client.\n if (router.isServer) {\n return (\n <RouteErrorComponent\n error={match.error as any}\n reset={undefined as any}\n info={{\n componentStack: '',\n }}\n />\n )\n }\n\n throw match.error\n }\n\n if (match.status === 'pending') {\n // We're pending, and if we have a minPendingMs, we need to wait for it\n const pendingMinMs =\n route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n if (pendingMinMs && !router.getMatch(match.id)?.minPendingPromise) {\n // Create a promise that will resolve after the minPendingMs\n if (!router.isServer) {\n const minPendingPromise = createControlledPromise<void>()\n\n Promise.resolve().then(() => {\n router.updateMatch(match.id, (prev) => ({\n ...prev,\n minPendingPromise,\n }))\n })\n\n setTimeout(() => {\n minPendingPromise.resolve()\n\n // We've handled the minPendingPromise, so we can delete it\n router.updateMatch(match.id, (prev) => ({\n ...prev,\n minPendingPromise: undefined,\n }))\n }, pendingMinMs)\n }\n }\n throw router.getMatch(match.id)?.loadPromise\n }\n\n return out\n})\n\nexport const Outlet = React.memo(function OutletImpl() {\n const router = useRouter()\n const matchId = React.useContext(matchContext)\n const routeId = useRouterState({\n select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n })\n\n const route = router.routesById[routeId]!\n\n const parentGlobalNotFound = useRouterState({\n select: (s) => {\n const matches = s.matches\n const parentMatch = matches.find((d) => d.id === matchId)\n invariant(\n parentMatch,\n `Could not find parent match for matchId \"${matchId}\"`,\n )\n return parentMatch.globalNotFound\n },\n })\n\n const childMatchId = useRouterState({\n select: (s) => {\n const matches = s.matches\n const index = matches.findIndex((d) => d.id === matchId)\n return matches[index + 1]?.id\n },\n })\n\n if (parentGlobalNotFound) {\n return renderRouteNotFound(router, route, undefined)\n }\n\n if (!childMatchId) {\n return null\n }\n\n const nextMatch = <Match matchId={childMatchId} />\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n if (matchId === rootRouteId) {\n return (\n <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n )\n }\n\n return nextMatch\n})\n"],"names":["match","routeId","key"],"mappings":";;;;;;;;;;;;;;AAoBO;AAA4C;AAEnD;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAAA;AAChC;AAKV;AAEO;AAAsD;AAE7D;;AAGE;AAEA;AAA+C;AAErC;AACAA;AACN;AAEM;AAGN;AAAgC;AAC9BC;AACkB;AACJ;AACA;AAEhB;AAEO;AAAA;AACLC;AACAD;AAC4C;AAC9C;AACF;AACmB;AAGf;AAEA;AACJ;AACA;AACS;AAAgB;AAEzB;AAAe;AAsBjB;AAII;AACF;AACA;AAAqD;AAGnD;AAGF;AAMA;AAAiC;AAG/B;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACN;AACD;AACY;AAAA;AAClB;AACF;AAIJ;AAAY;AAGV;AAEF;AAGA;AAEM;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AAAA;AAGnB;AAAiC;AAG5B;AACT;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAA4C;AAExC;AACA;AACA;AAAA;AACE;AACmD;AAErD;AAAmB;AAAA;AAIvB;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAAA;AAI/B;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport {\n createControlledPromise,\n getLocationChangeInfo,\n pick,\n rootRouteId,\n} from '@tanstack/router-core'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { ScrollRestoration } from './scroll-restoration'\nimport type { ParsedLocation } from '@tanstack/router-core'\nimport type { AnyRoute } from './route'\n\nexport const Match = React.memo(function MatchImpl({\n matchId,\n}: {\n matchId: string\n}) {\n const router = useRouter()\n const routeId = useRouterState({\n select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n })\n\n invariant(\n routeId,\n `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n )\n\n const route: AnyRoute = router.routesById[routeId]\n\n const PendingComponent =\n route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n const routeErrorComponent =\n route.options.errorComponent ?? router.options.defaultErrorComponent\n\n const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n const routeNotFoundComponent = route.isRoot\n ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n (route.options.notFoundComponent ??\n router.options.notFoundRoute?.options.component)\n : route.options.notFoundComponent\n\n const ResolvedSuspenseBoundary =\n // If we're on the root route, allow forcefully wrapping in suspense\n (!route.isRoot || route.options.wrapInSuspense) &&\n (route.options.wrapInSuspense ??\n PendingComponent ??\n (route.options.errorComponent as any)?.preload)\n ? React.Suspense\n : SafeFragment\n\n const ResolvedCatchBoundary = routeErrorComponent\n ? CatchBoundary\n : SafeFragment\n\n const ResolvedNotFoundBoundary = routeNotFoundComponent\n ? CatchNotFound\n : SafeFragment\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n const parentRouteId = useRouterState({\n select: (s) => {\n const index = s.matches.findIndex((d) => d.id === matchId)\n return s.matches[index - 1]?.routeId as string\n },\n })\n\n return (\n <>\n <matchContext.Provider value={matchId}>\n <ResolvedSuspenseBoundary fallback={pendingElement}>\n <ResolvedCatchBoundary\n getResetKey={() => resetKey}\n errorComponent={routeErrorComponent || ErrorComponent}\n onCatch={(error, errorInfo) => {\n // Forward not found errors (we don't want to show the error component for these)\n if (isNotFound(error)) throw error\n warning(false, `Error in route match: ${matchId}`)\n routeOnCatch?.(error, errorInfo)\n }}\n >\n <ResolvedNotFoundBoundary\n fallback={(error) => {\n // If the current not found handler doesn't exist or it has a\n // route ID which doesn't match the current route, rethrow the error\n if (\n !routeNotFoundComponent ||\n (error.routeId && error.routeId !== routeId) ||\n (!error.routeId && !route.isRoot)\n )\n throw error\n\n return React.createElement(routeNotFoundComponent, error as any)\n }}\n >\n <MatchInner matchId={matchId} />\n </ResolvedNotFoundBoundary>\n </ResolvedCatchBoundary>\n </ResolvedSuspenseBoundary>\n </matchContext.Provider>\n {parentRouteId === rootRouteId ? (\n <>\n <OnRendered />\n <ScrollRestoration />\n </>\n ) : null}\n </>\n )\n})\n\n// On Rendered can't happen above the root layout because it actually\n// renders a dummy dom element to track the rendered state of the app.\n// We render a script tag with a key that changes based on the current\n// location state.key. Also, because it's below the root layout, it\n// allows us to fire onRendered events even after a hydration mismatch\n// error that occurred above the root layout (like bad head/link tags,\n// which is common).\nfunction OnRendered() {\n const router = useRouter()\n\n const prevLocationRef = React.useRef<undefined | ParsedLocation<{}>>(\n undefined,\n )\n\n return (\n <script\n key={router.state.resolvedLocation?.state.key}\n suppressHydrationWarning\n ref={(el) => {\n if (el) {\n router.emit({\n type: 'onRendered',\n ...getLocationChangeInfo(router.state),\n })\n } else {\n prevLocationRef.current = router.state.resolvedLocation\n }\n }}\n />\n )\n}\n\nexport const MatchInner = React.memo(function MatchInnerImpl({\n matchId,\n}: {\n matchId: string\n}): any {\n const router = useRouter()\n\n const { match, key, routeId } = useRouterState({\n select: (s) => {\n const matchIndex = s.matches.findIndex((d) => d.id === matchId)\n const match = s.matches[matchIndex]!\n const routeId = match.routeId as string\n\n const remountFn =\n (router.routesById[routeId] as AnyRoute).options.remountDeps ??\n router.options.defaultRemountDeps\n const remountDeps = remountFn?.({\n routeId,\n loaderDeps: match.loaderDeps,\n params: match._strictParams,\n search: match._strictSearch,\n })\n const key = remountDeps ? JSON.stringify(remountDeps) : undefined\n\n return {\n key,\n routeId,\n match: pick(match, ['id', 'status', 'error']),\n }\n },\n structuralSharing: true as any,\n })\n\n const route = router.routesById[routeId] as AnyRoute\n\n const out = React.useMemo(() => {\n const Comp = route.options.component ?? router.options.defaultComponent\n if (Comp) {\n return <Comp key={key} />\n }\n return <Outlet />\n }, [key, route.options.component, router.options.defaultComponent])\n\n const RouteErrorComponent =\n (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n ErrorComponent\n\n if (match.status === 'notFound') {\n invariant(isNotFound(match.error), 'Expected a notFound error')\n return renderRouteNotFound(router, route, match.error)\n }\n\n if (match.status === 'redirected') {\n // Redirects should be handled by the router transition. If we happen to\n // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n invariant(isRedirect(match.error), 'Expected a redirect error')\n\n // warning(\n // false,\n // 'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n // )\n throw router.getMatch(match.id)?.loadPromise\n }\n\n if (match.status === 'error') {\n // If we're on the server, we need to use React's new and super\n // wonky api for throwing errors from a server side render inside\n // of a suspense boundary. This is the only way to get\n // renderToPipeableStream to not hang indefinitely.\n // We'll serialize the error and rethrow it on the client.\n if (router.isServer) {\n return (\n <RouteErrorComponent\n error={match.error as any}\n reset={undefined as any}\n info={{\n componentStack: '',\n }}\n />\n )\n }\n\n throw match.error\n }\n\n if (match.status === 'pending') {\n // We're pending, and if we have a minPendingMs, we need to wait for it\n const pendingMinMs =\n route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n if (pendingMinMs && !router.getMatch(match.id)?.minPendingPromise) {\n // Create a promise that will resolve after the minPendingMs\n if (!router.isServer) {\n const minPendingPromise = createControlledPromise<void>()\n\n Promise.resolve().then(() => {\n router.updateMatch(match.id, (prev) => ({\n ...prev,\n minPendingPromise,\n }))\n })\n\n setTimeout(() => {\n minPendingPromise.resolve()\n\n // We've handled the minPendingPromise, so we can delete it\n router.updateMatch(match.id, (prev) => ({\n ...prev,\n minPendingPromise: undefined,\n }))\n }, pendingMinMs)\n }\n }\n throw router.getMatch(match.id)?.loadPromise\n }\n\n return out\n})\n\nexport const Outlet = React.memo(function OutletImpl() {\n const router = useRouter()\n const matchId = React.useContext(matchContext)\n const routeId = useRouterState({\n select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n })\n\n const route = router.routesById[routeId]!\n\n const parentGlobalNotFound = useRouterState({\n select: (s) => {\n const matches = s.matches\n const parentMatch = matches.find((d) => d.id === matchId)\n invariant(\n parentMatch,\n `Could not find parent match for matchId \"${matchId}\"`,\n )\n return parentMatch.globalNotFound\n },\n })\n\n const childMatchId = useRouterState({\n select: (s) => {\n const matches = s.matches\n const index = matches.findIndex((d) => d.id === matchId)\n return matches[index + 1]?.id\n },\n })\n\n if (parentGlobalNotFound) {\n return renderRouteNotFound(router, route, undefined)\n }\n\n if (!childMatchId) {\n return null\n }\n\n const nextMatch = <Match matchId={childMatchId} />\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n if (matchId === rootRouteId) {\n return (\n <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n )\n }\n\n return nextMatch\n})\n"],"names":["match","routeId","key"],"mappings":";;;;;;;;;;;;;;;AAuBO;AAA4C;AAEnD;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAGnB;AAAqC;;AAE3B;AACN;AAA6B;AAAA;AAIjC;AAEI;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAAA;AAChC;AAGN;AAGI;AAAY;AACO;AAEnB;AAGV;AASA;;AACE;AAEA;AAA8B;AAC5B;AAIA;AAAA;AAAC;AAAA;AAEyB;AAEtB;AACE;AAAY;AACJ;AAC+B;AACtC;AAEe;AAAuB;AAAA;AACzC;AACF;AAX0C;AAchD;AAEO;AAAsD;AAE7D;;AAGE;AAEA;AAA+C;AAErC;AACAA;AACN;AAEM;AAGN;AAAgC;AAC9BC;AACkB;AACJ;AACA;AAEhB;AAEO;AAAA;AACLC;AACAD;AAC4C;AAC9C;AACF;AACmB;AAGf;AAEA;AACJ;AACA;AACS;AAAgB;AAEzB;AAAe;AAGjB;AAII;AACF;AACA;AAAqD;AAGnD;AAGF;AAMA;AAAiC;AAG/B;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACN;AACD;AACY;AAAA;AAClB;AACF;AAIJ;AAAY;AAGV;AAEF;AAGA;AAEM;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AAAA;AAGnB;AAAiC;AAG5B;AACT;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAA4C;AAExC;AACA;AACA;AAAA;AACE;AACmD;AAErD;AAAmB;AAAA;AAIvB;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAAA;AAI/B;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;;"}
|
package/dist/esm/Matches.js
CHANGED
|
@@ -47,7 +47,10 @@ function MatchesInner() {
|
|
|
47
47
|
function useMatchRoute() {
|
|
48
48
|
const router = useRouter();
|
|
49
49
|
useRouterState({
|
|
50
|
-
select: (s) =>
|
|
50
|
+
select: (s) => {
|
|
51
|
+
var _a;
|
|
52
|
+
return [s.location.href, (_a = s.resolvedLocation) == null ? void 0 : _a.href, s.status];
|
|
53
|
+
},
|
|
51
54
|
structuralSharing: true
|
|
52
55
|
});
|
|
53
56
|
return React.useCallback(
|
package/dist/esm/Matches.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { Transitioner } from './Transitioner'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type {\n StructuralSharingOption,\n ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRoute, ReactNode } from './route'\nimport type {\n ControlledPromise,\n DeepPartial,\n NoInfer,\n ResolveRelativePath,\n StaticDataRouteOption,\n} from '@tanstack/router-core'\nimport type { AnyRouter, RegisteredRouter, RouterState } from './router'\nimport type {\n MakeOptionalPathParams,\n MakeOptionalSearchParams,\n MaskOptions,\n ResolveRoute,\n ToSubOptionsProps,\n} from './link'\nimport type {\n AllContext,\n AllLoaderData,\n AllParams,\n FullSearchSchema,\n ParseRoute,\n RouteById,\n RouteByPath,\n RouteIds,\n} from './routeInfo'\n\nexport type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<\n TRoute['types']['id'],\n TRoute['types']['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n>\n\nexport interface RouteMatch<\n out TRouteId,\n out TFullPath,\n out TAllParams,\n out TFullSearchSchema,\n out TLoaderData,\n out TAllContext,\n out TLoaderDeps,\n> {\n id: string\n routeId: TRouteId\n fullPath: TFullPath\n index: number\n pathname: string\n params: TAllParams\n _strictParams: TAllParams\n status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n isFetching: false | 'beforeLoad' | 'loader'\n error: unknown\n paramsError: unknown\n searchError: unknown\n updatedAt: number\n loadPromise?: ControlledPromise<void>\n beforeLoadPromise?: ControlledPromise<void>\n loaderPromise?: ControlledPromise<void>\n loaderData?: TLoaderData\n __routeContext: Record<string, unknown>\n __beforeLoadContext: Record<string, unknown>\n context: TAllContext\n search: TFullSearchSchema\n _strictSearch: TFullSearchSchema\n fetchCount: number\n abortController: AbortController\n cause: 'preload' | 'enter' | 'stay'\n loaderDeps: TLoaderDeps\n preload: boolean\n invalid: boolean\n meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>\n links?: Array<React.JSX.IntrinsicElements['link'] | undefined>\n scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>\n headers?: Record<string, string>\n globalNotFound?: boolean\n staticData: StaticDataRouteOption\n minPendingPromise?: ControlledPromise<void>\n pendingTimeout?: ReturnType<typeof setTimeout>\n}\n\nexport type MakeRouteMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TRouteId = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n> = RouteMatch<\n TRouteId,\n RouteById<TRouteTree, TRouteId>['types']['fullPath'],\n TStrict extends false\n ? AllParams<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allParams'],\n TStrict extends false\n ? FullSearchSchema<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],\n TStrict extends false\n ? AllLoaderData<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['loaderData'],\n TStrict extends false\n ? AllContext<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allContext'],\n RouteById<TRouteTree, TRouteId>['types']['loaderDeps']\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n const router = useRouter()\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n // Do not render a root Suspense during SSR or hydrating from SSR\n const ResolvedSuspense =\n router.isServer || (typeof document !== 'undefined' && router.clientSsr)\n ? SafeFragment\n : React.Suspense\n\n const inner = (\n <ResolvedSuspense fallback={pendingElement}>\n <Transitioner />\n <MatchesInner />\n </ResolvedSuspense>\n )\n\n return router.options.InnerWrap ? (\n <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n ) : (\n inner\n )\n}\n\nfunction MatchesInner() {\n const matchId = useRouterState({\n select: (s) => {\n return s.matches[0]?.id\n },\n })\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n return (\n <matchContext.Provider value={matchId}>\n <CatchBoundary\n getResetKey={() => resetKey}\n errorComponent={ErrorComponent}\n onCatch={(error) => {\n warning(\n false,\n `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n )\n warning(false, error.message || error.toString())\n }}\n >\n {matchId ? <Match matchId={matchId} /> : null}\n </CatchBoundary>\n </matchContext.Provider>\n )\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = ToSubOptionsProps<TRouter, TFrom, TTo> &\n DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &\n DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &\n MaskOptions<TRouter, TMaskFrom, TMaskTo> &\n MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n const router = useRouter()\n\n useRouterState({\n select: (s) => [s.location.href, s.resolvedLocation.href, s.status],\n structuralSharing: true as any,\n })\n\n return React.useCallback(\n <\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n >(\n opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {\n const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n return router.matchRoute(rest as any, {\n pending,\n caseSensitive,\n fuzzy,\n includeSearch,\n })\n },\n [router],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | ((\n params?: RouteByPath<\n TRouter['routeTree'],\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n}\n\nexport function MatchRoute<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any) as boolean\n\n if (typeof props.children === 'function') {\n return (props.children as any)(params)\n }\n\n return params ? props.children : null\n}\n\nexport type MakeRouteMatchUnion<\n TRouter extends AnyRouter = RegisteredRouter,\n TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n ? RouteMatch<\n TRoute['id'],\n TRoute['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n >\n : never\n\nexport interface UseMatchesBaseOptions<\n TRouter extends AnyRouter,\n TSelected,\n TStructuralSharing,\n> {\n select?: (\n matches: Array<MakeRouteMatchUnion<TRouter>>,\n ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n}\n\nexport type UseMatchesResult<\n TRouter extends AnyRouter,\n TSelected,\n> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected\n\nexport function useMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n return useRouterState({\n select: (state: RouterState<TRouter['routeTree']>) => {\n const matches = state.matches\n return opts?.select\n ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)\n : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any) as UseMatchesResult<TRouter, TSelected>\n}\n\nexport function useParentMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n 0,\n matches.findIndex((d) => d.id === contextMatchId),\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n\nexport function useChildMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n matches.findIndex((d) => d.id === contextMatchId) + 1,\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { Transitioner } from './Transitioner'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type {\n StructuralSharingOption,\n ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRoute, ReactNode } from './route'\nimport type {\n ControlledPromise,\n DeepPartial,\n NoInfer,\n ResolveRelativePath,\n StaticDataRouteOption,\n} from '@tanstack/router-core'\nimport type { AnyRouter, RegisteredRouter, RouterState } from './router'\nimport type {\n MakeOptionalPathParams,\n MakeOptionalSearchParams,\n MaskOptions,\n ResolveRoute,\n ToSubOptionsProps,\n} from './link'\nimport type {\n AllContext,\n AllLoaderData,\n AllParams,\n FullSearchSchema,\n ParseRoute,\n RouteById,\n RouteByPath,\n RouteIds,\n} from './routeInfo'\n\nexport type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<\n TRoute['types']['id'],\n TRoute['types']['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n>\n\nexport interface RouteMatch<\n out TRouteId,\n out TFullPath,\n out TAllParams,\n out TFullSearchSchema,\n out TLoaderData,\n out TAllContext,\n out TLoaderDeps,\n> {\n id: string\n routeId: TRouteId\n fullPath: TFullPath\n index: number\n pathname: string\n params: TAllParams\n _strictParams: TAllParams\n status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n isFetching: false | 'beforeLoad' | 'loader'\n error: unknown\n paramsError: unknown\n searchError: unknown\n updatedAt: number\n loadPromise?: ControlledPromise<void>\n beforeLoadPromise?: ControlledPromise<void>\n loaderPromise?: ControlledPromise<void>\n loaderData?: TLoaderData\n __routeContext: Record<string, unknown>\n __beforeLoadContext: Record<string, unknown>\n context: TAllContext\n search: TFullSearchSchema\n _strictSearch: TFullSearchSchema\n fetchCount: number\n abortController: AbortController\n cause: 'preload' | 'enter' | 'stay'\n loaderDeps: TLoaderDeps\n preload: boolean\n invalid: boolean\n meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>\n links?: Array<React.JSX.IntrinsicElements['link'] | undefined>\n scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>\n headers?: Record<string, string>\n globalNotFound?: boolean\n staticData: StaticDataRouteOption\n minPendingPromise?: ControlledPromise<void>\n pendingTimeout?: ReturnType<typeof setTimeout>\n}\n\nexport type MakeRouteMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TRouteId = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n> = RouteMatch<\n TRouteId,\n RouteById<TRouteTree, TRouteId>['types']['fullPath'],\n TStrict extends false\n ? AllParams<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allParams'],\n TStrict extends false\n ? FullSearchSchema<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],\n TStrict extends false\n ? AllLoaderData<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['loaderData'],\n TStrict extends false\n ? AllContext<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allContext'],\n RouteById<TRouteTree, TRouteId>['types']['loaderDeps']\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n const router = useRouter()\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n // Do not render a root Suspense during SSR or hydrating from SSR\n const ResolvedSuspense =\n router.isServer || (typeof document !== 'undefined' && router.clientSsr)\n ? SafeFragment\n : React.Suspense\n\n const inner = (\n <ResolvedSuspense fallback={pendingElement}>\n <Transitioner />\n <MatchesInner />\n </ResolvedSuspense>\n )\n\n return router.options.InnerWrap ? (\n <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n ) : (\n inner\n )\n}\n\nfunction MatchesInner() {\n const matchId = useRouterState({\n select: (s) => {\n return s.matches[0]?.id\n },\n })\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n return (\n <matchContext.Provider value={matchId}>\n <CatchBoundary\n getResetKey={() => resetKey}\n errorComponent={ErrorComponent}\n onCatch={(error) => {\n warning(\n false,\n `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n )\n warning(false, error.message || error.toString())\n }}\n >\n {matchId ? <Match matchId={matchId} /> : null}\n </CatchBoundary>\n </matchContext.Provider>\n )\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = ToSubOptionsProps<TRouter, TFrom, TTo> &\n DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &\n DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &\n MaskOptions<TRouter, TMaskFrom, TMaskTo> &\n MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n const router = useRouter()\n\n useRouterState({\n select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],\n structuralSharing: true as any,\n })\n\n return React.useCallback(\n <\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n >(\n opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {\n const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n return router.matchRoute(rest as any, {\n pending,\n caseSensitive,\n fuzzy,\n includeSearch,\n })\n },\n [router],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | ((\n params?: RouteByPath<\n TRouter['routeTree'],\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n}\n\nexport function MatchRoute<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any) as boolean\n\n if (typeof props.children === 'function') {\n return (props.children as any)(params)\n }\n\n return params ? props.children : null\n}\n\nexport type MakeRouteMatchUnion<\n TRouter extends AnyRouter = RegisteredRouter,\n TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n ? RouteMatch<\n TRoute['id'],\n TRoute['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n >\n : never\n\nexport interface UseMatchesBaseOptions<\n TRouter extends AnyRouter,\n TSelected,\n TStructuralSharing,\n> {\n select?: (\n matches: Array<MakeRouteMatchUnion<TRouter>>,\n ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n}\n\nexport type UseMatchesResult<\n TRouter extends AnyRouter,\n TSelected,\n> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected\n\nexport function useMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n return useRouterState({\n select: (state: RouterState<TRouter['routeTree']>) => {\n const matches = state.matches\n return opts?.select\n ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)\n : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any) as UseMatchesResult<TRouter, TSelected>\n}\n\nexport function useParentMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n 0,\n matches.findIndex((d) => d.id === contextMatchId),\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n\nexport function useChildMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n matches.findIndex((d) => d.id === contextMatchId) + 1,\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n"],"names":[],"mappings":"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"}
|
package/dist/esm/ScriptOnce.js
CHANGED
|
@@ -16,7 +16,7 @@ function ScriptOnce({
|
|
|
16
16
|
children,
|
|
17
17
|
(log ?? true) && process.env.NODE_ENV === "development" ? `console.info(\`Injected From Server:
|
|
18
18
|
${jsesc(children.toString(), { quotes: "backtick" })}\`)` : "",
|
|
19
|
-
'if (typeof
|
|
19
|
+
'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()'
|
|
20
20
|
].filter(Boolean).join("\n")
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScriptOnce.js","sources":["../../src/ScriptOnce.tsx"],"sourcesContent":["import jsesc from 'jsesc'\n\nexport function ScriptOnce({\n children,\n log,\n}: {\n children: string\n log?: boolean\n sync?: boolean\n}) {\n if (typeof document !== 'undefined') {\n return null\n }\n\n return (\n <script\n className=\"tsr-once\"\n dangerouslySetInnerHTML={{\n __html: [\n children,\n (log ?? true) && process.env.NODE_ENV === 'development'\n ? `console.info(\\`Injected From Server:\n${jsesc(children.toString(), { quotes: 'backtick' })}\\`)`\n : '',\n 'if (typeof
|
|
1
|
+
{"version":3,"file":"ScriptOnce.js","sources":["../../src/ScriptOnce.tsx"],"sourcesContent":["import jsesc from 'jsesc'\n\nexport function ScriptOnce({\n children,\n log,\n}: {\n children: string\n log?: boolean\n sync?: boolean\n}) {\n if (typeof document !== 'undefined') {\n return null\n }\n\n return (\n <script\n className=\"tsr-once\"\n dangerouslySetInnerHTML={{\n __html: [\n children,\n (log ?? true) && process.env.NODE_ENV === 'development'\n ? `console.info(\\`Injected From Server:\n${jsesc(children.toString(), { quotes: 'backtick' })}\\`)`\n : '',\n 'if (typeof __TSR_SSR__ !== \"undefined\") __TSR_SSR__.cleanScripts()',\n ]\n .filter(Boolean)\n .join('\\n'),\n }}\n />\n )\n}\n"],"names":[],"mappings":";;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAIG;AACG,MAAA,OAAO,aAAa,aAAa;AAC5B,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB;AAAA,QACvB,QAAQ;AAAA,UACN;AAAA,WACC,OAAO,SAAS,QAAQ,IAAI,aAAa,gBACtC;AAAA,EACZ,MAAM,SAAS,YAAY,EAAE,QAAQ,WAAY,CAAA,CAAC,QACtC;AAAA,UACJ;AAAA,QAEC,EAAA,OAAO,OAAO,EACd,KAAK,IAAI;AAAA,MAAA;AAAA,IACd;AAAA,EACF;AAEJ;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ScrollRestorationOptions } from './scroll-restoration.js';
|
|
2
|
+
import { ParsedLocation } from '@tanstack/router-core';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated use createRouter's `scrollRestoration` option instead
|
|
5
|
+
*/
|
|
6
|
+
export declare function ScrollRestoration(_props: ScrollRestorationOptions): null;
|
|
7
|
+
export declare function useElementScrollRestoration(options: ({
|
|
8
|
+
id: string;
|
|
9
|
+
getElement?: () => Element | undefined | null;
|
|
10
|
+
} | {
|
|
11
|
+
id?: string;
|
|
12
|
+
getElement: () => Element | undefined | null;
|
|
13
|
+
}) & {
|
|
14
|
+
getKey?: (location: ParsedLocation) => string;
|
|
15
|
+
}): import('./scroll-restoration.js').ScrollRestorationEntry | undefined;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useRouter } from "./useRouter.js";
|
|
2
|
+
import { defaultGetScrollRestorationKey, getCssSelector, scrollRestorationCache, setupScrollRestoration } from "./scroll-restoration.js";
|
|
3
|
+
function useScrollRestoration() {
|
|
4
|
+
const router = useRouter();
|
|
5
|
+
setupScrollRestoration(router, true);
|
|
6
|
+
}
|
|
7
|
+
function ScrollRestoration(_props) {
|
|
8
|
+
useScrollRestoration();
|
|
9
|
+
if (process.env.NODE_ENV === "development") {
|
|
10
|
+
console.warn(
|
|
11
|
+
"The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead."
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
function useElementScrollRestoration(options) {
|
|
17
|
+
var _a;
|
|
18
|
+
useScrollRestoration();
|
|
19
|
+
const router = useRouter();
|
|
20
|
+
const getKey = options.getKey || defaultGetScrollRestorationKey;
|
|
21
|
+
let elementSelector = "";
|
|
22
|
+
if (options.id) {
|
|
23
|
+
elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
|
|
24
|
+
} else {
|
|
25
|
+
const element = (_a = options.getElement) == null ? void 0 : _a.call(options);
|
|
26
|
+
if (!element) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
elementSelector = getCssSelector(element);
|
|
30
|
+
}
|
|
31
|
+
const restoreKey = getKey(router.latestLocation);
|
|
32
|
+
const byKey = scrollRestorationCache.state[restoreKey];
|
|
33
|
+
return byKey == null ? void 0 : byKey[elementSelector];
|
|
34
|
+
}
|
|
35
|
+
export {
|
|
36
|
+
ScrollRestoration,
|
|
37
|
+
useElementScrollRestoration
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=ScrollRestoration.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollRestoration.js","sources":["../../src/ScrollRestoration.tsx"],"sourcesContent":["import { useRouter } from './useRouter'\nimport {\n defaultGetScrollRestorationKey,\n getCssSelector,\n scrollRestorationCache,\n setupScrollRestoration,\n} from './scroll-restoration'\nimport type { ScrollRestorationOptions } from './scroll-restoration'\nimport type { ParsedLocation } from '@tanstack/router-core'\n\nfunction useScrollRestoration() {\n const router = useRouter()\n setupScrollRestoration(router, true)\n}\n\n/**\n * @deprecated use createRouter's `scrollRestoration` option instead\n */\nexport function ScrollRestoration(_props: ScrollRestorationOptions) {\n useScrollRestoration()\n\n if (process.env.NODE_ENV === 'development') {\n console.warn(\n \"The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.\",\n )\n }\n\n return null\n}\n\nexport function useElementScrollRestoration(\n options: (\n | {\n id: string\n getElement?: () => Element | undefined | null\n }\n | {\n id?: string\n getElement: () => Element | undefined | null\n }\n ) & {\n getKey?: (location: ParsedLocation) => string\n },\n) {\n useScrollRestoration()\n\n const router = useRouter()\n const getKey = options.getKey || defaultGetScrollRestorationKey\n\n let elementSelector = ''\n\n if (options.id) {\n elementSelector = `[data-scroll-restoration-id=\"${options.id}\"]`\n } else {\n const element = options.getElement?.()\n if (!element) {\n return\n }\n elementSelector = getCssSelector(element)\n }\n\n const restoreKey = getKey(router.latestLocation)\n const byKey = scrollRestorationCache.state[restoreKey]\n return byKey?.[elementSelector]\n}\n"],"names":[],"mappings":";;AAUA,SAAS,uBAAuB;AAC9B,QAAM,SAAS,UAAU;AACzB,yBAAuB,QAAQ,IAAI;AACrC;AAKO,SAAS,kBAAkB,QAAkC;AAC7C,uBAAA;AAEjB,MAAA,QAAQ,IAAI,aAAa,eAAe;AAClC,YAAA;AAAA,MACN;AAAA,IACF;AAAA,EAAA;AAGK,SAAA;AACT;AAEO,SAAS,4BACd,SAYA;;AACqB,uBAAA;AAErB,QAAM,SAAS,UAAU;AACnB,QAAA,SAAS,QAAQ,UAAU;AAEjC,MAAI,kBAAkB;AAEtB,MAAI,QAAQ,IAAI;AACI,sBAAA,gCAAgC,QAAQ,EAAE;AAAA,EAAA,OACvD;AACC,UAAA,WAAU,aAAQ,eAAR;AAChB,QAAI,CAAC,SAAS;AACZ;AAAA,IAAA;AAEF,sBAAkB,eAAe,OAAO;AAAA,EAAA;AAGpC,QAAA,aAAa,OAAO,OAAO,cAAc;AACzC,QAAA,QAAQ,uBAAuB,MAAM,UAAU;AACrD,SAAO,+BAAQ;AACjB;"}
|
package/dist/esm/Transitioner.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { trimPathRight } from "@tanstack/router-core";
|
|
2
|
+
import { trimPathRight, getLocationChangeInfo } from "@tanstack/router-core";
|
|
3
3
|
import { usePrevious, useLayoutEffect } from "./utils.js";
|
|
4
4
|
import { useRouter } from "./useRouter.js";
|
|
5
5
|
import { useRouterState } from "./useRouterState.js";
|
|
@@ -61,62 +61,32 @@ function Transitioner() {
|
|
|
61
61
|
}, [router]);
|
|
62
62
|
useLayoutEffect(() => {
|
|
63
63
|
if (previousIsLoading && !isLoading) {
|
|
64
|
-
const toLocation = router.state.location;
|
|
65
|
-
const fromLocation = router.state.resolvedLocation;
|
|
66
|
-
const pathChanged = fromLocation.pathname !== toLocation.pathname;
|
|
67
|
-
const hrefChanged = fromLocation.href !== toLocation.href;
|
|
68
64
|
router.emit({
|
|
69
65
|
type: "onLoad",
|
|
70
66
|
// When the new URL has committed, when the new matches have been loaded into state.matches
|
|
71
|
-
|
|
72
|
-
toLocation,
|
|
73
|
-
pathChanged,
|
|
74
|
-
hrefChanged
|
|
67
|
+
...getLocationChangeInfo(router.state)
|
|
75
68
|
});
|
|
76
69
|
}
|
|
77
70
|
}, [previousIsLoading, router, isLoading]);
|
|
78
71
|
useLayoutEffect(() => {
|
|
79
72
|
if (previousIsPagePending && !isPagePending) {
|
|
80
|
-
const toLocation = router.state.location;
|
|
81
|
-
const fromLocation = router.state.resolvedLocation;
|
|
82
|
-
const pathChanged = fromLocation.pathname !== toLocation.pathname;
|
|
83
|
-
const hrefChanged = fromLocation.href !== toLocation.href;
|
|
84
73
|
router.emit({
|
|
85
74
|
type: "onBeforeRouteMount",
|
|
86
|
-
|
|
87
|
-
toLocation,
|
|
88
|
-
pathChanged,
|
|
89
|
-
hrefChanged
|
|
75
|
+
...getLocationChangeInfo(router.state)
|
|
90
76
|
});
|
|
91
77
|
}
|
|
92
78
|
}, [isPagePending, previousIsPagePending, router]);
|
|
93
79
|
useLayoutEffect(() => {
|
|
94
80
|
if (previousIsAnyPending && !isAnyPending) {
|
|
95
|
-
const toLocation = router.state.location;
|
|
96
|
-
const fromLocation = router.state.resolvedLocation;
|
|
97
|
-
const pathChanged = fromLocation.pathname !== toLocation.pathname;
|
|
98
|
-
const hrefChanged = fromLocation.href !== toLocation.href;
|
|
99
81
|
router.emit({
|
|
100
82
|
type: "onResolved",
|
|
101
|
-
|
|
102
|
-
toLocation,
|
|
103
|
-
pathChanged,
|
|
104
|
-
hrefChanged
|
|
83
|
+
...getLocationChangeInfo(router.state)
|
|
105
84
|
});
|
|
106
85
|
router.__store.setState((s) => ({
|
|
107
86
|
...s,
|
|
108
87
|
status: "idle",
|
|
109
88
|
resolvedLocation: s.location
|
|
110
89
|
}));
|
|
111
|
-
if (typeof document !== "undefined" && document.querySelector) {
|
|
112
|
-
const hashScrollIntoViewOptions = router.state.location.state.__hashScrollIntoViewOptions ?? true;
|
|
113
|
-
if (hashScrollIntoViewOptions && router.state.location.hash !== "") {
|
|
114
|
-
const el = document.getElementById(router.state.location.hash);
|
|
115
|
-
if (el) {
|
|
116
|
-
el.scrollIntoView(hashScrollIntoViewOptions);
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
90
|
}
|
|
121
91
|
}, [isAnyPending, previousIsAnyPending, router]);
|
|
122
92
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { trimPathRight } from '@tanstack/router-core'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n const router = useRouter()\n const mountLoadForRouter = React.useRef({ router, mounted: false })\n const isLoading = useRouterState({\n select: ({ isLoading }) => isLoading,\n })\n\n const [isTransitioning, setIsTransitioning] = React.useState(false)\n // Track pending state changes\n const hasPendingMatches = useRouterState({\n select: (s) => s.matches.some((d) => d.status === 'pending'),\n structuralSharing: true,\n })\n\n const previousIsLoading = usePrevious(isLoading)\n\n const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n const previousIsAnyPending = usePrevious(isAnyPending)\n\n const isPagePending = isLoading || hasPendingMatches\n const previousIsPagePending = usePrevious(isPagePending)\n\n if (!router.isServer) {\n router.startReactTransition = (fn: () => void) => {\n setIsTransitioning(true)\n React.startTransition(() => {\n fn()\n setIsTransitioning(false)\n })\n }\n }\n\n // Subscribe to location changes\n // and try to load the new location\n React.useEffect(() => {\n const unsub = router.history.subscribe(router.load)\n\n const nextLocation = router.buildLocation({\n to: router.latestLocation.pathname,\n search: true,\n params: true,\n hash: true,\n state: true,\n _includeValidateSearch: true,\n })\n\n if (\n trimPathRight(router.latestLocation.href) !==\n trimPathRight(nextLocation.href)\n ) {\n router.commitLocation({ ...nextLocation, replace: true })\n }\n\n return () => {\n unsub()\n }\n }, [router, router.history])\n\n // Try to load the initial location\n useLayoutEffect(() => {\n if (\n (typeof window !== 'undefined' && router.clientSsr) ||\n (mountLoadForRouter.current.router === router &&\n mountLoadForRouter.current.mounted)\n ) {\n return\n }\n mountLoadForRouter.current = { router, mounted: true }\n\n const tryLoad = async () => {\n try {\n await router.load()\n } catch (err) {\n console.error(err)\n }\n }\n\n tryLoad()\n }, [router])\n\n useLayoutEffect(() => {\n // The router was loading and now it's not\n if (previousIsLoading && !isLoading) {\n
|
|
1
|
+
{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n const router = useRouter()\n const mountLoadForRouter = React.useRef({ router, mounted: false })\n const isLoading = useRouterState({\n select: ({ isLoading }) => isLoading,\n })\n\n const [isTransitioning, setIsTransitioning] = React.useState(false)\n // Track pending state changes\n const hasPendingMatches = useRouterState({\n select: (s) => s.matches.some((d) => d.status === 'pending'),\n structuralSharing: true,\n })\n\n const previousIsLoading = usePrevious(isLoading)\n\n const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n const previousIsAnyPending = usePrevious(isAnyPending)\n\n const isPagePending = isLoading || hasPendingMatches\n const previousIsPagePending = usePrevious(isPagePending)\n\n if (!router.isServer) {\n router.startReactTransition = (fn: () => void) => {\n setIsTransitioning(true)\n React.startTransition(() => {\n fn()\n setIsTransitioning(false)\n })\n }\n }\n\n // Subscribe to location changes\n // and try to load the new location\n React.useEffect(() => {\n const unsub = router.history.subscribe(router.load)\n\n const nextLocation = router.buildLocation({\n to: router.latestLocation.pathname,\n search: true,\n params: true,\n hash: true,\n state: true,\n _includeValidateSearch: true,\n })\n\n if (\n trimPathRight(router.latestLocation.href) !==\n trimPathRight(nextLocation.href)\n ) {\n router.commitLocation({ ...nextLocation, replace: true })\n }\n\n return () => {\n unsub()\n }\n }, [router, router.history])\n\n // Try to load the initial location\n useLayoutEffect(() => {\n if (\n (typeof window !== 'undefined' && router.clientSsr) ||\n (mountLoadForRouter.current.router === router &&\n mountLoadForRouter.current.mounted)\n ) {\n return\n }\n mountLoadForRouter.current = { router, mounted: true }\n\n const tryLoad = async () => {\n try {\n await router.load()\n } catch (err) {\n console.error(err)\n }\n }\n\n tryLoad()\n }, [router])\n\n useLayoutEffect(() => {\n // The router was loading and now it's not\n if (previousIsLoading && !isLoading) {\n router.emit({\n type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n ...getLocationChangeInfo(router.state),\n })\n }\n }, [previousIsLoading, router, isLoading])\n\n useLayoutEffect(() => {\n // emit onBeforeRouteMount\n if (previousIsPagePending && !isPagePending) {\n router.emit({\n type: 'onBeforeRouteMount',\n ...getLocationChangeInfo(router.state),\n })\n }\n }, [isPagePending, previousIsPagePending, router])\n\n useLayoutEffect(() => {\n // The router was pending and now it's not\n if (previousIsAnyPending && !isAnyPending) {\n router.emit({\n type: 'onResolved',\n ...getLocationChangeInfo(router.state),\n })\n\n router.__store.setState((s) => ({\n ...s,\n status: 'idle',\n resolvedLocation: s.location,\n }))\n }\n }, [isAnyPending, previousIsAnyPending, router])\n\n return null\n}\n"],"names":["isLoading"],"mappings":";;;;;AAMO,SAAS,eAAe;AAC7B,QAAM,SAAS,UAAU;AACzB,QAAM,qBAAqB,MAAM,OAAO,EAAE,QAAQ,SAAS,OAAO;AAClE,QAAM,YAAY,eAAe;AAAA,IAC/B,QAAQ,CAAC,EAAE,WAAAA,iBAAgBA;AAAAA,EAAA,CAC5B;AAED,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAElE,QAAM,oBAAoB,eAAe;AAAA,IACvC,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS;AAAA,IAC3D,mBAAmB;AAAA,EAAA,CACpB;AAEK,QAAA,oBAAoB,YAAY,SAAS;AAEzC,QAAA,eAAe,aAAa,mBAAmB;AAC/C,QAAA,uBAAuB,YAAY,YAAY;AAErD,QAAM,gBAAgB,aAAa;AAC7B,QAAA,wBAAwB,YAAY,aAAa;AAEnD,MAAA,CAAC,OAAO,UAAU;AACb,WAAA,uBAAuB,CAAC,OAAmB;AAChD,yBAAmB,IAAI;AACvB,YAAM,gBAAgB,MAAM;AACvB,WAAA;AACH,2BAAmB,KAAK;AAAA,MAAA,CACzB;AAAA,IACH;AAAA,EAAA;AAKF,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,IAAI;AAE5C,UAAA,eAAe,OAAO,cAAc;AAAA,MACxC,IAAI,OAAO,eAAe;AAAA,MAC1B,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,wBAAwB;AAAA,IAAA,CACzB;AAGC,QAAA,cAAc,OAAO,eAAe,IAAI,MACxC,cAAc,aAAa,IAAI,GAC/B;AACA,aAAO,eAAe,EAAE,GAAG,cAAc,SAAS,MAAM;AAAA,IAAA;AAG1D,WAAO,MAAM;AACL,YAAA;AAAA,IACR;AAAA,EACC,GAAA,CAAC,QAAQ,OAAO,OAAO,CAAC;AAG3B,kBAAgB,MAAM;AAEjB,QAAA,OAAO,WAAW,eAAe,OAAO,aACxC,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,SAC7B;AACA;AAAA,IAAA;AAEF,uBAAmB,UAAU,EAAE,QAAQ,SAAS,KAAK;AAErD,UAAM,UAAU,YAAY;AACtB,UAAA;AACF,cAAM,OAAO,KAAK;AAAA,eACX,KAAK;AACZ,gBAAQ,MAAM,GAAG;AAAA,MAAA;AAAA,IAErB;AAEQ,YAAA;AAAA,EAAA,GACP,CAAC,MAAM,CAAC;AAEX,kBAAgB,MAAM;AAEhB,QAAA,qBAAqB,CAAC,WAAW;AACnC,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN,GAAG,sBAAsB,OAAO,KAAK;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,mBAAmB,QAAQ,SAAS,CAAC;AAEzC,kBAAgB,MAAM;AAEhB,QAAA,yBAAyB,CAAC,eAAe;AAC3C,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,GAAG,sBAAsB,OAAO,KAAK;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,eAAe,uBAAuB,MAAM,CAAC;AAEjD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACzC,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,GAAG,sBAAsB,OAAO,KAAK;AAAA,MAAA,CACtC;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,EAEH,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -30,8 +30,7 @@ export { componentTypes, createRouter, Router, lazyFn, SearchParamError, PathPar
|
|
|
30
30
|
export type { Register, AnyRouter, RegisteredRouter, RouterContextOptions, RouterOptions, RouterErrorSerializer, RouterState, ListenerFn, BuildNextOptions, RouterConstructorOptions, RouterEvents, RouterEvent, RouterListener, AnyRouterWithContext, ControllablePromise, InjectedHtmlEntry, } from './router.js';
|
|
31
31
|
export { RouterProvider, RouterContextProvider } from './RouterProvider.js';
|
|
32
32
|
export type { RouterProps, CommitLocationOptions, MatchLocation, NavigateFn, BuildLocationFn, } from './RouterProvider.js';
|
|
33
|
-
export {
|
|
34
|
-
export type { ScrollRestorationOptions } from './scroll-restoration.js';
|
|
33
|
+
export { useElementScrollRestoration, ScrollRestoration, } from './ScrollRestoration.js';
|
|
35
34
|
export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker.js';
|
|
36
35
|
export { useBlocker, Block } from './useBlocker.js';
|
|
37
36
|
export { useNavigate, Navigate } from './useNavigate.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -17,7 +17,7 @@ import { isRedirect, redirect } from "./redirects.js";
|
|
|
17
17
|
import { NotFoundRoute, RootRoute, Route, RouteApi, createRootRoute, createRootRouteWithContext, createRoute, createRouteMask, getRouteApi, rootRouteWithContext } from "./route.js";
|
|
18
18
|
import { PathParamError, Router, SearchParamError, componentTypes, createRouter, getInitialRouterState, lazyFn } from "./router.js";
|
|
19
19
|
import { RouterContextProvider, RouterProvider } from "./RouterProvider.js";
|
|
20
|
-
import { ScrollRestoration, useElementScrollRestoration
|
|
20
|
+
import { ScrollRestoration, useElementScrollRestoration } from "./ScrollRestoration.js";
|
|
21
21
|
import { Block, useBlocker } from "./useBlocker.js";
|
|
22
22
|
import { Navigate, useNavigate } from "./useNavigate.js";
|
|
23
23
|
import { useParams } from "./useParams.js";
|
|
@@ -137,7 +137,6 @@ export {
|
|
|
137
137
|
useRouteContext,
|
|
138
138
|
useRouter,
|
|
139
139
|
useRouterState,
|
|
140
|
-
useScrollRestoration,
|
|
141
140
|
useSearch,
|
|
142
141
|
useStableCallback,
|
|
143
142
|
default3 as warning
|
package/dist/esm/router.d.ts
CHANGED
|
@@ -332,6 +332,14 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TTrailingSlashOption
|
|
|
332
332
|
*/
|
|
333
333
|
pathParamsAllowedCharacters?: Array<';' | ':' | '@' | '&' | '=' | '+' | '$' | ','>;
|
|
334
334
|
defaultRemountDeps?: (opts: MakeRemountDepsOptionsUnion<TRouteTree>) => any;
|
|
335
|
+
/**
|
|
336
|
+
* If `false`, scroll restoration will be disabled
|
|
337
|
+
*
|
|
338
|
+
* @default true
|
|
339
|
+
*/
|
|
340
|
+
scrollRestoration?: boolean;
|
|
341
|
+
getScrollRestorationKey?: (location: ParsedLocation) => string;
|
|
342
|
+
scrollRestorationBehavior?: ScrollBehavior;
|
|
335
343
|
}
|
|
336
344
|
export interface RouterErrorSerializer<TSerializedError> {
|
|
337
345
|
serialize: (err: unknown) => TSerializedError;
|
|
@@ -346,7 +354,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute, TRouteMatch
|
|
|
346
354
|
pendingMatches?: Array<TRouteMatch>;
|
|
347
355
|
cachedMatches: Array<TRouteMatch>;
|
|
348
356
|
location: ParsedLocation<FullSearchSchema<TRouteTree>>;
|
|
349
|
-
resolvedLocation
|
|
357
|
+
resolvedLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>;
|
|
350
358
|
statusCode: number;
|
|
351
359
|
redirect?: ResolvedRedirect;
|
|
352
360
|
}
|
|
@@ -375,46 +383,36 @@ export interface MatchedRoutesResult {
|
|
|
375
383
|
}
|
|
376
384
|
export type RouterConstructorOptions<TRouteTree extends AnyRoute, TTrailingSlashOption extends TrailingSlashOption, TDefaultStructuralSharingOption extends boolean, TRouterHistory extends RouterHistory, TDehydrated extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TTrailingSlashOption, TDefaultStructuralSharingOption, TRouterHistory, TDehydrated>, 'context'> & RouterContextOptions<TRouteTree>;
|
|
377
385
|
export declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent", "notFoundComponent"];
|
|
386
|
+
type NavigationEventInfo = {
|
|
387
|
+
fromLocation?: ParsedLocation;
|
|
388
|
+
toLocation: ParsedLocation;
|
|
389
|
+
pathChanged: boolean;
|
|
390
|
+
hrefChanged: boolean;
|
|
391
|
+
hashChanged: boolean;
|
|
392
|
+
};
|
|
378
393
|
export type RouterEvents = {
|
|
379
394
|
onBeforeNavigate: {
|
|
380
395
|
type: 'onBeforeNavigate';
|
|
381
|
-
|
|
382
|
-
toLocation: ParsedLocation;
|
|
383
|
-
pathChanged: boolean;
|
|
384
|
-
hrefChanged: boolean;
|
|
385
|
-
};
|
|
396
|
+
} & NavigationEventInfo;
|
|
386
397
|
onBeforeLoad: {
|
|
387
398
|
type: 'onBeforeLoad';
|
|
388
|
-
|
|
389
|
-
toLocation: ParsedLocation;
|
|
390
|
-
pathChanged: boolean;
|
|
391
|
-
hrefChanged: boolean;
|
|
392
|
-
};
|
|
399
|
+
} & NavigationEventInfo;
|
|
393
400
|
onLoad: {
|
|
394
401
|
type: 'onLoad';
|
|
395
|
-
|
|
396
|
-
toLocation: ParsedLocation;
|
|
397
|
-
pathChanged: boolean;
|
|
398
|
-
hrefChanged: boolean;
|
|
399
|
-
};
|
|
402
|
+
} & NavigationEventInfo;
|
|
400
403
|
onResolved: {
|
|
401
404
|
type: 'onResolved';
|
|
402
|
-
|
|
403
|
-
toLocation: ParsedLocation;
|
|
404
|
-
pathChanged: boolean;
|
|
405
|
-
hrefChanged: boolean;
|
|
406
|
-
};
|
|
405
|
+
} & NavigationEventInfo;
|
|
407
406
|
onBeforeRouteMount: {
|
|
408
407
|
type: 'onBeforeRouteMount';
|
|
409
|
-
|
|
410
|
-
toLocation: ParsedLocation;
|
|
411
|
-
pathChanged: boolean;
|
|
412
|
-
hrefChanged: boolean;
|
|
413
|
-
};
|
|
408
|
+
} & NavigationEventInfo;
|
|
414
409
|
onInjectedHtml: {
|
|
415
410
|
type: 'onInjectedHtml';
|
|
416
411
|
promise: Promise<string>;
|
|
417
412
|
};
|
|
413
|
+
onRendered: {
|
|
414
|
+
type: 'onRendered';
|
|
415
|
+
} & NavigationEventInfo;
|
|
418
416
|
};
|
|
419
417
|
export type RouterEvent = RouterEvents[keyof RouterEvents];
|
|
420
418
|
export type RouterListener<TRouterEvent extends RouterEvent> = {
|
|
@@ -435,6 +433,8 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
|
|
|
435
433
|
isViewTransitionTypesSupported?: boolean;
|
|
436
434
|
subscribers: Set<RouterListener<RouterEvent>>;
|
|
437
435
|
viewTransitionPromise?: ControlledPromise<true>;
|
|
436
|
+
isScrollRestoring: boolean;
|
|
437
|
+
isScrollRestorationSetup: boolean;
|
|
438
438
|
__store: Store<RouterState<TRouteTree>>;
|
|
439
439
|
options: PickAsRequired<RouterOptions<TRouteTree, TTrailingSlashOption, TDefaultStructuralSharingOption, TRouterHistory, TDehydrated>, 'stringifySearch' | 'parseSearch' | 'context'>;
|
|
440
440
|
history: TRouterHistory;
|