@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.
Files changed (48) hide show
  1. package/dist/cjs/Match.cjs +60 -22
  2. package/dist/cjs/Match.cjs.map +1 -1
  3. package/dist/cjs/Matches.cjs +4 -1
  4. package/dist/cjs/Matches.cjs.map +1 -1
  5. package/dist/cjs/ScriptOnce.cjs +1 -1
  6. package/dist/cjs/ScriptOnce.cjs.map +1 -1
  7. package/dist/cjs/ScrollRestoration.cjs +39 -0
  8. package/dist/cjs/ScrollRestoration.cjs.map +1 -0
  9. package/dist/cjs/ScrollRestoration.d.cts +15 -0
  10. package/dist/cjs/Transitioner.cjs +3 -33
  11. package/dist/cjs/Transitioner.cjs.map +1 -1
  12. package/dist/cjs/index.cjs +3 -4
  13. package/dist/cjs/index.cjs.map +1 -1
  14. package/dist/cjs/index.d.cts +1 -2
  15. package/dist/cjs/router.cjs +14 -12
  16. package/dist/cjs/router.cjs.map +1 -1
  17. package/dist/cjs/router.d.cts +26 -26
  18. package/dist/cjs/scroll-restoration.cjs +168 -165
  19. package/dist/cjs/scroll-restoration.cjs.map +1 -1
  20. package/dist/cjs/scroll-restoration.d.cts +25 -15
  21. package/dist/esm/Match.js +62 -24
  22. package/dist/esm/Match.js.map +1 -1
  23. package/dist/esm/Matches.js +4 -1
  24. package/dist/esm/Matches.js.map +1 -1
  25. package/dist/esm/ScriptOnce.js +1 -1
  26. package/dist/esm/ScriptOnce.js.map +1 -1
  27. package/dist/esm/ScrollRestoration.d.ts +15 -0
  28. package/dist/esm/ScrollRestoration.js +39 -0
  29. package/dist/esm/ScrollRestoration.js.map +1 -0
  30. package/dist/esm/Transitioner.js +4 -34
  31. package/dist/esm/Transitioner.js.map +1 -1
  32. package/dist/esm/index.d.ts +1 -2
  33. package/dist/esm/index.js +1 -2
  34. package/dist/esm/router.d.ts +26 -26
  35. package/dist/esm/router.js +15 -13
  36. package/dist/esm/router.js.map +1 -1
  37. package/dist/esm/scroll-restoration.d.ts +25 -15
  38. package/dist/esm/scroll-restoration.js +168 -148
  39. package/dist/esm/scroll-restoration.js.map +1 -1
  40. package/package.json +3 -3
  41. package/src/Match.tsx +79 -48
  42. package/src/Matches.tsx +1 -1
  43. package/src/ScriptOnce.tsx +1 -1
  44. package/src/ScrollRestoration.tsx +65 -0
  45. package/src/Transitioner.tsx +4 -40
  46. package/src/index.tsx +1 -3
  47. package/src/router.ts +43 -38
  48. 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, rootRouteId } from "@tanstack/router-core";
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
- return /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsx(
49
- ResolvedCatchBoundary,
50
- {
51
- getResetKey: () => resetKey,
52
- errorComponent: routeErrorComponent || ErrorComponent,
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
  }) {
@@ -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;;;;;;"}
@@ -47,7 +47,10 @@ function MatchesInner() {
47
47
  function useMatchRoute() {
48
48
  const router = useRouter();
49
49
  useRouterState({
50
- select: (s) => [s.location.href, s.resolvedLocation.href, s.status],
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(
@@ -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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"}
@@ -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 __TSR__ !== "undefined") __TSR__.cleanScripts()'
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 __TSR__ !== \"undefined\") __TSR__.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;"}
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;"}
@@ -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
- fromLocation,
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
- fromLocation,
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
- fromLocation,
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 const toLocation = router.state.location\n const fromLocation = router.state.resolvedLocation\n const pathChanged = fromLocation.pathname !== toLocation.pathname\n const hrefChanged = fromLocation.href !== toLocation.href\n\n router.emit({\n type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n fromLocation,\n toLocation,\n pathChanged,\n hrefChanged,\n })\n }\n }, [previousIsLoading, router, isLoading])\n\n useLayoutEffect(() => {\n // emit onBeforeRouteMount\n if (previousIsPagePending && !isPagePending) {\n const toLocation = router.state.location\n const fromLocation = router.state.resolvedLocation\n const pathChanged = fromLocation.pathname !== toLocation.pathname\n const hrefChanged = fromLocation.href !== toLocation.href\n\n router.emit({\n type: 'onBeforeRouteMount',\n fromLocation,\n toLocation,\n pathChanged,\n hrefChanged,\n })\n }\n }, [isPagePending, previousIsPagePending, router])\n\n useLayoutEffect(() => {\n // The router was pending and now it's not\n if (previousIsAnyPending && !isAnyPending) {\n const toLocation = router.state.location\n const fromLocation = router.state.resolvedLocation\n const pathChanged = fromLocation.pathname !== toLocation.pathname\n const hrefChanged = fromLocation.href !== toLocation.href\n\n router.emit({\n type: 'onResolved',\n fromLocation,\n toLocation,\n pathChanged,\n hrefChanged,\n })\n\n router.__store.setState((s) => ({\n ...s,\n status: 'idle',\n resolvedLocation: s.location,\n }))\n\n if (typeof document !== 'undefined' && (document as any).querySelector) {\n const hashScrollIntoViewOptions =\n router.state.location.state.__hashScrollIntoViewOptions ?? true\n\n if (hashScrollIntoViewOptions && router.state.location.hash !== '') {\n const el = document.getElementById(router.state.location.hash)\n if (el) {\n el.scrollIntoView(hashScrollIntoViewOptions)\n }\n }\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;AAC7B,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,mBAAmB,QAAQ,SAAS,CAAC;AAEzC,kBAAgB,MAAM;AAEhB,QAAA,yBAAyB,CAAC,eAAe;AACrC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,eAAe,uBAAuB,MAAM,CAAC;AAEjD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACnC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MAAA,EACpB;AAEF,UAAI,OAAO,aAAa,eAAgB,SAAiB,eAAe;AACtE,cAAM,4BACJ,OAAO,MAAM,SAAS,MAAM,+BAA+B;AAE7D,YAAI,6BAA6B,OAAO,MAAM,SAAS,SAAS,IAAI;AAClE,gBAAM,KAAK,SAAS,eAAe,OAAO,MAAM,SAAS,IAAI;AAC7D,cAAI,IAAI;AACN,eAAG,eAAe,yBAAyB;AAAA,UAAA;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAAA,EAED,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}
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;"}
@@ -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 { useScrollRestoration, useElementScrollRestoration, ScrollRestoration, } from './scroll-restoration.js';
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, useScrollRestoration } from "./scroll-restoration.js";
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
@@ -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: ParsedLocation<FullSearchSchema<TRouteTree>>;
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
- fromLocation: ParsedLocation;
382
- toLocation: ParsedLocation;
383
- pathChanged: boolean;
384
- hrefChanged: boolean;
385
- };
396
+ } & NavigationEventInfo;
386
397
  onBeforeLoad: {
387
398
  type: 'onBeforeLoad';
388
- fromLocation: ParsedLocation;
389
- toLocation: ParsedLocation;
390
- pathChanged: boolean;
391
- hrefChanged: boolean;
392
- };
399
+ } & NavigationEventInfo;
393
400
  onLoad: {
394
401
  type: 'onLoad';
395
- fromLocation: ParsedLocation;
396
- toLocation: ParsedLocation;
397
- pathChanged: boolean;
398
- hrefChanged: boolean;
399
- };
402
+ } & NavigationEventInfo;
400
403
  onResolved: {
401
404
  type: 'onResolved';
402
- fromLocation: ParsedLocation;
403
- toLocation: ParsedLocation;
404
- pathChanged: boolean;
405
- hrefChanged: boolean;
406
- };
405
+ } & NavigationEventInfo;
407
406
  onBeforeRouteMount: {
408
407
  type: 'onBeforeRouteMount';
409
- fromLocation: ParsedLocation;
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;