@tanstack/react-router 0.0.1-beta.213 → 0.0.1-beta.215
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/build/cjs/CatchBoundary.js +1 -0
- package/build/cjs/CatchBoundary.js.map +1 -1
- package/build/cjs/Matches.js +14 -4
- package/build/cjs/Matches.js.map +1 -1
- package/build/cjs/RouterProvider.js +80 -69
- package/build/cjs/RouterProvider.js.map +1 -1
- package/build/cjs/fileRoute.js.map +1 -1
- package/build/cjs/index.js +1 -0
- package/build/cjs/index.js.map +1 -1
- package/build/cjs/route.js +6 -0
- package/build/cjs/route.js.map +1 -1
- package/build/cjs/router.js.map +1 -1
- package/build/esm/index.js +101 -74
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +267 -267
- package/build/types/Matches.d.ts +4 -1
- package/build/types/RouterProvider.d.ts +2 -1
- package/build/types/fileRoute.d.ts +3 -3
- package/build/types/route.d.ts +28 -20
- package/build/types/router.d.ts +1 -1
- package/build/umd/index.development.js +101 -73
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -2
- package/src/CatchBoundary.tsx +1 -0
- package/src/Matches.tsx +31 -9
- package/src/RouterProvider.tsx +97 -89
- package/src/fileRoute.ts +10 -2
- package/src/route.ts +58 -17
- package/src/router.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport function CatchBoundary(props: {\n resetKey: string\n children: any\n errorComponent?: any\n onCatch: (error: any) => void\n}) {\n const errorComponent = props.errorComponent ?? ErrorComponent\n\n return (\n <CatchBoundaryImpl\n resetKey={props.resetKey}\n onCatch={props.onCatch}\n children={({ error }) => {\n if (error) {\n return React.createElement(errorComponent, {\n error,\n })\n }\n\n return props.children\n }}\n />\n )\n}\n\nexport class CatchBoundaryImpl extends React.Component<{\n resetKey: string\n children: (props: { error: any; reset: () => void }) => any\n onCatch?: (error: any) => void\n}> {\n state = { error: null } as any\n static getDerivedStateFromError(error: any) {\n return { error }\n }\n componentDidUpdate(\n prevProps: Readonly<{\n resetKey: string\n children: (props: { error: any; reset: () => void }) => any\n onCatch?: ((error: any, info: any) => void) | undefined\n }>,\n prevState: any,\n ): void {\n if (prevState.error && prevProps.resetKey !== this.props.resetKey) {\n this.setState({ error: null })\n }\n }\n componentDidCatch(error: any) {\n this.props.onCatch?.(error)\n }\n render() {\n return this.props.children(this.state)\n }\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')\n\n return (\n <div style={{ padding: '.5rem', maxWidth: '100%' }}>\n <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>\n <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>\n <button\n style={{\n appearance: 'none',\n fontSize: '.6em',\n border: '1px solid currentColor',\n padding: '.1rem .2rem',\n fontWeight: 'bold',\n borderRadius: '.25rem',\n }}\n onClick={() => setShow((d) => !d)}\n >\n {show ? 'Hide Error' : 'Show Error'}\n </button>\n </div>\n <div style={{ height: '.25rem' }} />\n {show ? (\n <div>\n <pre\n style={{\n fontSize: '.7em',\n border: '1px solid red',\n borderRadius: '.25rem',\n padding: '.3rem',\n color: 'red',\n overflow: 'auto',\n }}\n >\n {error.message ? <code>{error.message}</code> : null}\n </pre>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["CatchBoundary","props","errorComponent","ErrorComponent","React","createElement","CatchBoundaryImpl","resetKey","onCatch","children","error","Component","state","getDerivedStateFromError","componentDidUpdate","prevProps","prevState","setState","componentDidCatch","render","show","setShow","useState","process","env","NODE_ENV","style","padding","maxWidth","display","alignItems","gap","fontSize","appearance","border","fontWeight","borderRadius","onClick","d","height","color","overflow","message"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,SAASA,aAAaA,CAACC,KAK7B,EAAE;AACD,EAAA,MAAMC,cAAc,GAAGD,KAAK,CAACC,cAAc,IAAIC,cAAc,CAAA;AAE7D,EAAA,oBACEC,gBAAA,CAAAC,aAAA,CAACC,iBAAiB,EAAA;IAChBC,QAAQ,EAAEN,KAAK,CAACM,QAAS;IACzBC,OAAO,EAAEP,KAAK,CAACO,OAAQ;AACvBC,IAAAA,QAAQ,EAAEA,CAAC;AAAEC,MAAAA,KAAAA;AAAM,KAAC,KAAK;AACvB,MAAA,IAAIA,KAAK,EAAE;AACT,QAAA,oBAAON,gBAAK,CAACC,aAAa,CAACH,cAAc,EAAE;AACzCQ,UAAAA,KAAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;MAEA,OAAOT,KAAK,CAACQ,QAAQ,CAAA;AACvB,KAAA;AAAE,GACH,CAAC,CAAA;AAEN,CAAA;AAEO,MAAMH,iBAAiB,SAASF,gBAAK,CAACO,SAAS,CAInD;AACDC,EAAAA,KAAK,GAAG;AAAEF,IAAAA,KAAK,EAAE,IAAA;GAAM,CAAA;EACvB,OAAOG,wBAAwBA,CAACH,KAAU,EAAE;IAC1C,OAAO;AAAEA,MAAAA,KAAAA;KAAO,CAAA;AAClB,GAAA;AACAI,EAAAA,kBAAkBA,CAChBC,SAIE,EACFC,SAAc,EACR;AACN,IAAA,IAAIA,SAAS,CAACN,KAAK,IAAIK,SAAS,CAACR,QAAQ,KAAK,IAAI,CAACN,KAAK,CAACM,QAAQ,EAAE;MACjE,IAAI,CAACU,QAAQ,CAAC;AAAEP,QAAAA,KAAK,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;AAChC,KAAA;AACF,GAAA;EACAQ,iBAAiBA,CAACR,KAAU,EAAE;
|
|
1
|
+
{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport function CatchBoundary(props: {\n resetKey: string\n children: any\n errorComponent?: any\n onCatch: (error: any) => void\n}) {\n const errorComponent = props.errorComponent ?? ErrorComponent\n\n return (\n <CatchBoundaryImpl\n resetKey={props.resetKey}\n onCatch={props.onCatch}\n children={({ error }) => {\n if (error) {\n return React.createElement(errorComponent, {\n error,\n })\n }\n\n return props.children\n }}\n />\n )\n}\n\nexport class CatchBoundaryImpl extends React.Component<{\n resetKey: string\n children: (props: { error: any; reset: () => void }) => any\n onCatch?: (error: any) => void\n}> {\n state = { error: null } as any\n static getDerivedStateFromError(error: any) {\n return { error }\n }\n componentDidUpdate(\n prevProps: Readonly<{\n resetKey: string\n children: (props: { error: any; reset: () => void }) => any\n onCatch?: ((error: any, info: any) => void) | undefined\n }>,\n prevState: any,\n ): void {\n if (prevState.error && prevProps.resetKey !== this.props.resetKey) {\n this.setState({ error: null })\n }\n }\n componentDidCatch(error: any) {\n console.error(error)\n this.props.onCatch?.(error)\n }\n render() {\n return this.props.children(this.state)\n }\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')\n\n return (\n <div style={{ padding: '.5rem', maxWidth: '100%' }}>\n <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>\n <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>\n <button\n style={{\n appearance: 'none',\n fontSize: '.6em',\n border: '1px solid currentColor',\n padding: '.1rem .2rem',\n fontWeight: 'bold',\n borderRadius: '.25rem',\n }}\n onClick={() => setShow((d) => !d)}\n >\n {show ? 'Hide Error' : 'Show Error'}\n </button>\n </div>\n <div style={{ height: '.25rem' }} />\n {show ? (\n <div>\n <pre\n style={{\n fontSize: '.7em',\n border: '1px solid red',\n borderRadius: '.25rem',\n padding: '.3rem',\n color: 'red',\n overflow: 'auto',\n }}\n >\n {error.message ? <code>{error.message}</code> : null}\n </pre>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["CatchBoundary","props","errorComponent","ErrorComponent","React","createElement","CatchBoundaryImpl","resetKey","onCatch","children","error","Component","state","getDerivedStateFromError","componentDidUpdate","prevProps","prevState","setState","componentDidCatch","console","render","show","setShow","useState","process","env","NODE_ENV","style","padding","maxWidth","display","alignItems","gap","fontSize","appearance","border","fontWeight","borderRadius","onClick","d","height","color","overflow","message"],"mappings":"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"}
|
package/build/cjs/Matches.js
CHANGED
|
@@ -75,6 +75,9 @@ function Matches() {
|
|
|
75
75
|
}) : null));
|
|
76
76
|
}
|
|
77
77
|
const defaultPending = () => null;
|
|
78
|
+
function SafeFragment(props) {
|
|
79
|
+
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
|
|
80
|
+
}
|
|
78
81
|
function Match({
|
|
79
82
|
matches
|
|
80
83
|
}) {
|
|
@@ -88,9 +91,7 @@ function Match({
|
|
|
88
91
|
const locationKey = RouterProvider.useRouterState().location.state?.key;
|
|
89
92
|
const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
|
|
90
93
|
const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? CatchBoundary.ErrorComponent;
|
|
91
|
-
const ResolvedSuspenseBoundary = route.options.wrapInSuspense
|
|
92
|
-
// const ResolvedSuspenseBoundary = SafeFragment
|
|
93
|
-
|
|
94
|
+
const ResolvedSuspenseBoundary = route.options.wrapInSuspense ? React__namespace.Suspense : SafeFragment;
|
|
94
95
|
const errorComponent = React__namespace.useCallback(props => {
|
|
95
96
|
return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
|
|
96
97
|
...props,
|
|
@@ -140,7 +141,8 @@ function MatchInner({
|
|
|
140
141
|
useMatch: route.useMatch,
|
|
141
142
|
useRouteContext: route.useRouteContext,
|
|
142
143
|
useSearch: route.useSearch,
|
|
143
|
-
useParams: route.useParams
|
|
144
|
+
useParams: route.useParams,
|
|
145
|
+
useLoaderData: route.useLoaderData
|
|
144
146
|
});
|
|
145
147
|
}
|
|
146
148
|
return /*#__PURE__*/React__namespace.createElement(Outlet, null);
|
|
@@ -211,12 +213,20 @@ function useMatches(opts) {
|
|
|
211
213
|
}
|
|
212
214
|
});
|
|
213
215
|
}
|
|
216
|
+
function useLoaderData(opts) {
|
|
217
|
+
const match = useMatch({
|
|
218
|
+
...opts,
|
|
219
|
+
select: undefined
|
|
220
|
+
});
|
|
221
|
+
return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
|
|
222
|
+
}
|
|
214
223
|
|
|
215
224
|
exports.Match = Match;
|
|
216
225
|
exports.MatchRoute = MatchRoute;
|
|
217
226
|
exports.Matches = Matches;
|
|
218
227
|
exports.Outlet = Outlet;
|
|
219
228
|
exports.matchesContext = matchesContext;
|
|
229
|
+
exports.useLoaderData = useLoaderData;
|
|
220
230
|
exports.useMatch = useMatch;
|
|
221
231
|
exports.useMatchRoute = useMatchRoute;
|
|
222
232
|
exports.useMatches = useMatches;
|
package/build/cjs/Matches.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { RouteMatch } from './RouterProvider'\nimport { useRouter, useRouterState } from './RouterProvider'\nimport { ResolveRelativePath, ToOptions } from './link'\nimport { AnyRoute, ReactNode, rootRouteId } from './route'\nimport { RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo'\nimport { RegisteredRouter } from './router'\nimport { NoInfer, StrictOrFrom } from './utils'\n\nexport function Matches() {\n const { routesById, state } = useRouter()\n const { matches } = state\n\n const locationKey = useRouterState().location.state.key\n\n const route = routesById[rootRouteId]\n\n const errorComponent = React.useCallback(\n (props: any) => {\n return React.createElement(ErrorComponent, {\n ...props,\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })\n },\n [route],\n )\n\n return (\n <matchesContext.Provider value={matches}>\n <CatchBoundary\n resetKey={locationKey}\n errorComponent={errorComponent}\n onCatch={() => {\n warning(\n false,\n `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`,\n )\n }}\n >\n {matches.length ? <Match matches={matches} /> : null}\n </CatchBoundary>\n </matchesContext.Provider>\n )\n}\n\nconst defaultPending = () => null\nfunction SafeFragment(props: any) {\n return <>{props.children}</>\n}\n\nexport function Match({ matches }: { matches: RouteMatch[] }) {\n const { options, routesById } = useRouter()\n const match = matches[0]!\n const routeId = match?.routeId\n const route = routesById[routeId]\n const locationKey = useRouterState().location.state?.key\n\n const PendingComponent = (route.options.pendingComponent ??\n options.defaultPendingComponent ??\n defaultPending) as any\n\n const routeErrorComponent =\n route.options.errorComponent ??\n options.defaultErrorComponent ??\n ErrorComponent\n\n const ResolvedSuspenseBoundary =\n route.options.wrapInSuspense ?? React.Suspense\n // const ResolvedSuspenseBoundary = SafeFragment\n\n const errorComponent = React.useCallback(\n (props: any) => {\n return React.createElement(routeErrorComponent, {\n ...props,\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })\n },\n [route],\n )\n\n return (\n <matchesContext.Provider value={matches}>\n <ResolvedSuspenseBoundary\n fallback={React.createElement(PendingComponent, {\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })}\n >\n <CatchBoundary\n resetKey={locationKey}\n errorComponent={errorComponent}\n onCatch={() => {\n warning(false, `Error in route match: ${match.id}`)\n }}\n >\n <MatchInner match={match} />\n </CatchBoundary>\n </ResolvedSuspenseBoundary>\n </matchesContext.Provider>\n )\n}\nfunction MatchInner({ match }: { match: RouteMatch }): any {\n const { options, routesById } = useRouter()\n const route = routesById[match.routeId]\n\n if (match.status === 'error') {\n throw match.error\n }\n\n if (match.status === 'pending') {\n throw match.loadPromise\n }\n\n if (match.status === 'success') {\n let comp = route.options.component ?? options.defaultComponent\n\n if (comp) {\n return React.createElement(comp, {\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext as any,\n useSearch: route.useSearch,\n useParams: route.useParams as any,\n } as any)\n }\n\n return <Outlet />\n }\n\n invariant(\n false,\n 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',\n )\n}\n\nexport function Outlet() {\n const matches = React.useContext(matchesContext).slice(1)\n\n if (!matches[0]) {\n return null\n }\n\n return <Match matches={matches} />\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type MakeUseMatchRouteOptions<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n> = ToOptions<AnyRoute, TFrom, TTo, TMaskFrom, TMaskTo> & MatchRouteOptions\n\nexport function useMatchRoute<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n>() {\n const { matchRoute } = useRouter()\n\n return React.useCallback(\n <\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,\n >(\n opts: MakeUseMatchRouteOptions<\n TRouteTree,\n TFrom,\n TTo,\n TMaskFrom,\n TMaskTo\n >,\n ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {\n const { pending, caseSensitive, ...rest } = opts\n\n return matchRoute(rest as any, {\n pending,\n caseSensitive,\n })\n },\n [],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n> = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &\n MatchRouteOptions & {\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 TRouteTree,\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n }\n\nexport function MatchRoute<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n>(\n props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any)\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 function useMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n TRouteMatchState = RouteMatch<TRouteTree, TFrom>,\n TSelected = TRouteMatchState,\n>(\n opts: StrictOrFrom<TFrom> & {\n select?: (match: TRouteMatchState) => TSelected\n },\n): TStrict extends true ? TRouteMatchState : TRouteMatchState | undefined {\n const nearestMatch = React.useContext(matchesContext)[0]!\n const nearestMatchRouteId = nearestMatch?.routeId\n\n const matchRouteId = useRouterState({\n select: (state) => {\n const match = opts?.from\n ? state.matches.find((d) => d.routeId === opts?.from)\n : state.matches.find((d) => d.id === nearestMatch.id)\n\n return match!.routeId\n },\n })\n\n if (opts?.strict ?? true) {\n invariant(\n nearestMatchRouteId == matchRouteId,\n `useMatch(\"${\n matchRouteId as string\n }\") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch(\"${\n matchRouteId as string\n }\", { strict: false })' or 'useRoute(\"${\n matchRouteId as string\n }\")' instead?`,\n )\n }\n\n const matchSelection = useRouterState({\n select: (state) => {\n const match = opts?.from\n ? state.matches.find((d) => d.routeId === opts?.from)\n : state.matches.find((d) => d.id === nearestMatch.id)\n\n invariant(\n match,\n `Could not find ${\n opts?.from\n ? `an active match from \"${opts.from}\"`\n : 'a nearest match!'\n }`,\n )\n\n return opts?.select ? opts.select(match as any) : match\n },\n })\n\n return matchSelection as any\n}\n\nexport const matchesContext = React.createContext<RouteMatch[]>(null!)\n\nexport function useMatches<T = RouteMatch[]>(opts?: {\n select?: (matches: RouteMatch[]) => T\n}): T {\n const contextMatches = React.useContext(matchesContext)\n\n return useRouterState({\n select: (state) => {\n const matches = state.matches.slice(\n state.matches.findIndex((d) => d.id === contextMatches[0]?.id),\n )\n return opts?.select ? opts.select(matches) : (matches as T)\n },\n })\n}\n"],"names":["Matches","routesById","state","useRouter","matches","locationKey","useRouterState","location","key","route","rootRouteId","errorComponent","React","useCallback","props","createElement","ErrorComponent","useMatch","useRouteContext","useSearch","useParams","matchesContext","Provider","value","CatchBoundary","resetKey","onCatch","warning","length","Match","defaultPending","options","match","routeId","PendingComponent","pendingComponent","defaultPendingComponent","routeErrorComponent","defaultErrorComponent","ResolvedSuspenseBoundary","wrapInSuspense","Suspense","fallback","id","MatchInner","status","error","loadPromise","comp","component","defaultComponent","Outlet","invariant","useContext","slice","useMatchRoute","matchRoute","opts","pending","caseSensitive","rest","MatchRoute","params","children","nearestMatch","nearestMatchRouteId","matchRouteId","select","from","find","d","strict","matchSelection","createContext","useMatches","contextMatches","findIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { RouteMatch } from './RouterProvider'\nimport { useRouter, useRouterState } from './RouterProvider'\nimport { ResolveRelativePath, ToOptions } from './link'\nimport { AnyRoute, ReactNode, rootRouteId } from './route'\nimport { RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo'\nimport { RegisteredRouter } from './router'\nimport { NoInfer, StrictOrFrom, functionalUpdate } from './utils'\n\nexport function Matches() {\n const { routesById, state } = useRouter()\n const { matches } = state\n\n const locationKey = useRouterState().location.state.key\n\n const route = routesById[rootRouteId]!\n\n const errorComponent = React.useCallback(\n (props: any) => {\n return React.createElement(ErrorComponent, {\n ...props,\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })\n },\n [route],\n )\n\n return (\n <matchesContext.Provider value={matches}>\n <CatchBoundary\n resetKey={locationKey}\n errorComponent={errorComponent}\n onCatch={() => {\n warning(\n false,\n `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`,\n )\n }}\n >\n {matches.length ? <Match matches={matches} /> : null}\n </CatchBoundary>\n </matchesContext.Provider>\n )\n}\n\nconst defaultPending = () => null\nfunction SafeFragment(props: any) {\n return <>{props.children}</>\n}\n\nexport function Match({ matches }: { matches: RouteMatch[] }) {\n const { options, routesById } = useRouter()\n const match = matches[0]!\n const routeId = match?.routeId\n const route = routesById[routeId]!\n const locationKey = useRouterState().location.state?.key\n\n const PendingComponent = (route.options.pendingComponent ??\n options.defaultPendingComponent ??\n defaultPending) as any\n\n const routeErrorComponent =\n route.options.errorComponent ??\n options.defaultErrorComponent ??\n ErrorComponent\n\n const ResolvedSuspenseBoundary = route.options.wrapInSuspense\n ? React.Suspense\n : SafeFragment\n\n const errorComponent = React.useCallback(\n (props: any) => {\n return React.createElement(routeErrorComponent, {\n ...props,\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })\n },\n [route],\n )\n\n return (\n <matchesContext.Provider value={matches}>\n <ResolvedSuspenseBoundary\n fallback={React.createElement(PendingComponent, {\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext,\n useSearch: route.useSearch,\n useParams: route.useParams,\n })}\n >\n <CatchBoundary\n resetKey={locationKey}\n errorComponent={errorComponent}\n onCatch={() => {\n warning(false, `Error in route match: ${match.id}`)\n }}\n >\n <MatchInner match={match} />\n </CatchBoundary>\n </ResolvedSuspenseBoundary>\n </matchesContext.Provider>\n )\n}\nfunction MatchInner({ match }: { match: RouteMatch }): any {\n const { options, routesById } = useRouter()\n const route = routesById[match.routeId]!\n\n if (match.status === 'error') {\n throw match.error\n }\n\n if (match.status === 'pending') {\n throw match.loadPromise\n }\n\n if (match.status === 'success') {\n let comp = route.options.component ?? options.defaultComponent\n\n if (comp) {\n return React.createElement(comp, {\n useMatch: route.useMatch,\n useRouteContext: route.useRouteContext as any,\n useSearch: route.useSearch,\n useParams: route.useParams as any,\n useLoaderData: route.useLoaderData,\n })\n }\n\n return <Outlet />\n }\n\n invariant(\n false,\n 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',\n )\n}\n\nexport function Outlet() {\n const matches = React.useContext(matchesContext).slice(1)\n\n if (!matches[0]) {\n return null\n }\n\n return <Match matches={matches} />\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type MakeUseMatchRouteOptions<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n> = ToOptions<AnyRoute, TFrom, TTo, TMaskFrom, TMaskTo> & MatchRouteOptions\n\nexport function useMatchRoute<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n>() {\n const { matchRoute } = useRouter()\n\n return React.useCallback(\n <\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,\n >(\n opts: MakeUseMatchRouteOptions<\n TRouteTree,\n TFrom,\n TTo,\n TMaskFrom,\n TMaskTo\n >,\n ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {\n const { pending, caseSensitive, ...rest } = opts\n\n return matchRoute(rest as any, {\n pending,\n caseSensitive,\n })\n },\n [],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n> = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &\n MatchRouteOptions & {\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 TRouteTree,\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n }\n\nexport function MatchRoute<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RoutePaths<TRouteTree> = '/',\n TTo extends string = '',\n TMaskFrom extends RoutePaths<TRouteTree> = '/',\n TMaskTo extends string = '',\n>(\n props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any)\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 function useMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n TRouteMatchState = RouteMatch<TRouteTree, TFrom>,\n TSelected = TRouteMatchState,\n>(\n opts: StrictOrFrom<TFrom> & {\n select?: (match: TRouteMatchState) => TSelected\n },\n): TStrict extends true ? TSelected : TSelected | undefined {\n const nearestMatch = React.useContext(matchesContext)[0]!\n const nearestMatchRouteId = nearestMatch?.routeId\n\n const matchRouteId = useRouterState({\n select: (state) => {\n const match = opts?.from\n ? state.matches.find((d) => d.routeId === opts?.from)\n : state.matches.find((d) => d.id === nearestMatch.id)\n\n return match!.routeId\n },\n })\n\n if (opts?.strict ?? true) {\n invariant(\n nearestMatchRouteId == matchRouteId,\n `useMatch(\"${\n matchRouteId as string\n }\") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch(\"${\n matchRouteId as string\n }\", { strict: false })' or 'useRoute(\"${\n matchRouteId as string\n }\")' instead?`,\n )\n }\n\n const matchSelection = useRouterState({\n select: (state) => {\n const match = opts?.from\n ? state.matches.find((d) => d.routeId === opts?.from)\n : state.matches.find((d) => d.id === nearestMatch.id)\n\n invariant(\n match,\n `Could not find ${\n opts?.from\n ? `an active match from \"${opts.from}\"`\n : 'a nearest match!'\n }`,\n )\n\n return opts?.select ? opts.select(match as any) : match\n },\n })\n\n return matchSelection as any\n}\n\nexport const matchesContext = React.createContext<RouteMatch[]>(null!)\n\nexport function useMatches<T = RouteMatch[]>(opts?: {\n select?: (matches: RouteMatch[]) => T\n}): T {\n const contextMatches = React.useContext(matchesContext)\n\n return useRouterState({\n select: (state) => {\n const matches = state.matches.slice(\n state.matches.findIndex((d) => d.id === contextMatches[0]?.id),\n )\n return opts?.select ? opts.select(matches) : (matches as T)\n },\n })\n}\n\nexport function useLoaderData<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<\n TRouteTree,\n TFrom\n >,\n TSelected = TRouteMatch['loaderData'],\n>(\n opts: StrictOrFrom<TFrom> & {\n select?: (match: TRouteMatch) => TSelected\n },\n): TStrict extends true ? TSelected : TSelected | undefined {\n const match = useMatch({ ...opts, select: undefined })!\n\n return typeof opts.select === 'function'\n ? opts.select(match?.loaderData)\n : match?.loaderData\n}\n"],"names":["Matches","routesById","state","useRouter","matches","locationKey","useRouterState","location","key","route","rootRouteId","errorComponent","React","useCallback","props","createElement","ErrorComponent","useMatch","useRouteContext","useSearch","useParams","matchesContext","Provider","value","CatchBoundary","resetKey","onCatch","warning","length","Match","defaultPending","SafeFragment","Fragment","children","options","match","routeId","PendingComponent","pendingComponent","defaultPendingComponent","routeErrorComponent","defaultErrorComponent","ResolvedSuspenseBoundary","wrapInSuspense","Suspense","fallback","id","MatchInner","status","error","loadPromise","comp","component","defaultComponent","useLoaderData","Outlet","invariant","useContext","slice","useMatchRoute","matchRoute","opts","pending","caseSensitive","rest","MatchRoute","params","nearestMatch","nearestMatchRouteId","matchRouteId","select","from","find","d","strict","matchSelection","createContext","useMatches","contextMatches","findIndex","undefined","loaderData"],"mappings":"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"}
|
|
@@ -123,10 +123,12 @@ function RouterProvider({
|
|
|
123
123
|
const latestLocationRef = React__namespace.useRef(parseLocation());
|
|
124
124
|
const [preState, setState] = React__namespace.useState(() => getInitialRouterState(latestLocationRef.current));
|
|
125
125
|
const [isTransitioning, startReactTransition] = React__namespace.useTransition();
|
|
126
|
+
const pendingMatchesRef = React__namespace.useRef([]);
|
|
126
127
|
const state = React__namespace.useMemo(() => ({
|
|
127
128
|
...preState,
|
|
128
129
|
status: isTransitioning ? 'pending' : 'idle',
|
|
129
|
-
location: isTransitioning ? latestLocationRef.current : preState.location
|
|
130
|
+
location: isTransitioning ? latestLocationRef.current : preState.location,
|
|
131
|
+
pendingMatches: pendingMatchesRef.current
|
|
130
132
|
}), [preState, isTransitioning]);
|
|
131
133
|
React__namespace.useLayoutEffect(() => {
|
|
132
134
|
if (!isTransitioning && state.resolvedLocation !== state.location) {
|
|
@@ -136,6 +138,7 @@ function RouterProvider({
|
|
|
136
138
|
toLocation: state.location,
|
|
137
139
|
pathChanged: state.location.href !== state.resolvedLocation?.href
|
|
138
140
|
});
|
|
141
|
+
pendingMatchesRef.current = [];
|
|
139
142
|
setState(s => ({
|
|
140
143
|
...s,
|
|
141
144
|
resolvedLocation: s.location
|
|
@@ -289,7 +292,7 @@ function RouterProvider({
|
|
|
289
292
|
}
|
|
290
293
|
|
|
291
294
|
// Create a fresh route match
|
|
292
|
-
const hasLoaders = !!(route.options.
|
|
295
|
+
const hasLoaders = !!(route.options.loader || router.componentTypes.some(d => route.options[d]?.preload));
|
|
293
296
|
const routeMatch = {
|
|
294
297
|
id: matchId,
|
|
295
298
|
routeId: route.id,
|
|
@@ -620,9 +623,6 @@ function RouterProvider({
|
|
|
620
623
|
matchPromises.push((async () => {
|
|
621
624
|
const parentMatchPromise = matchPromises[index - 1];
|
|
622
625
|
const route = looseRoutesById[match.routeId];
|
|
623
|
-
if (match.isFetching) {
|
|
624
|
-
return getRouteMatch(state, match.id)?.loadPromise;
|
|
625
|
-
}
|
|
626
626
|
const handleIfRedirect = err => {
|
|
627
627
|
if (redirects.isRedirect(err)) {
|
|
628
628
|
if (!preload) {
|
|
@@ -632,73 +632,85 @@ function RouterProvider({
|
|
|
632
632
|
}
|
|
633
633
|
return false;
|
|
634
634
|
};
|
|
635
|
-
const load = async () => {
|
|
636
|
-
try {
|
|
637
|
-
const componentsPromise = Promise.all(router.componentTypes.map(async type => {
|
|
638
|
-
const component = route.options[type];
|
|
639
|
-
if (component?.preload) {
|
|
640
|
-
await component.preload();
|
|
641
|
-
}
|
|
642
|
-
}));
|
|
643
|
-
const loaderPromise = route.options.load?.({
|
|
644
|
-
params: match.params,
|
|
645
|
-
search: match.search,
|
|
646
|
-
preload: !!preload,
|
|
647
|
-
parentMatchPromise,
|
|
648
|
-
abortController: match.abortController,
|
|
649
|
-
context: match.context,
|
|
650
|
-
location: state.location,
|
|
651
|
-
navigate: opts => navigate({
|
|
652
|
-
...opts,
|
|
653
|
-
from: match.pathname
|
|
654
|
-
})
|
|
655
|
-
});
|
|
656
|
-
const [_, loaderContext] = await Promise.all([componentsPromise, loaderPromise]);
|
|
657
|
-
if (latestPromise = checkLatest()) return await latestPromise;
|
|
658
|
-
matches[index] = match = {
|
|
659
|
-
...match,
|
|
660
|
-
error: undefined,
|
|
661
|
-
status: 'success',
|
|
662
|
-
isFetching: false,
|
|
663
|
-
updatedAt: Date.now()
|
|
664
|
-
};
|
|
665
|
-
} catch (error) {
|
|
666
|
-
if (latestPromise = checkLatest()) return await latestPromise;
|
|
667
|
-
if (handleIfRedirect(error)) return;
|
|
668
|
-
try {
|
|
669
|
-
route.options.onError?.(error);
|
|
670
|
-
} catch (onErrorError) {
|
|
671
|
-
error = onErrorError;
|
|
672
|
-
if (handleIfRedirect(onErrorError)) return;
|
|
673
|
-
}
|
|
674
|
-
matches[index] = match = {
|
|
675
|
-
...match,
|
|
676
|
-
error,
|
|
677
|
-
status: 'error',
|
|
678
|
-
isFetching: false,
|
|
679
|
-
updatedAt: Date.now()
|
|
680
|
-
};
|
|
681
|
-
}
|
|
682
|
-
if (!preload) {
|
|
683
|
-
setState(s => ({
|
|
684
|
-
...s,
|
|
685
|
-
matches: s.matches.map(d => d.id === match.id ? match : d)
|
|
686
|
-
}));
|
|
687
|
-
}
|
|
688
|
-
};
|
|
689
635
|
let loadPromise;
|
|
690
636
|
matches[index] = match = {
|
|
691
637
|
...match,
|
|
692
|
-
isFetching: true,
|
|
693
638
|
fetchedAt: Date.now(),
|
|
694
639
|
invalid: false
|
|
695
640
|
};
|
|
696
|
-
|
|
641
|
+
if (match.isFetching) {
|
|
642
|
+
loadPromise = getRouteMatch(state, match.id)?.loadPromise;
|
|
643
|
+
} else {
|
|
644
|
+
matches[index] = match = {
|
|
645
|
+
...match,
|
|
646
|
+
isFetching: true
|
|
647
|
+
};
|
|
648
|
+
const componentsPromise = Promise.all(router.componentTypes.map(async type => {
|
|
649
|
+
const component = route.options[type];
|
|
650
|
+
if (component?.preload) {
|
|
651
|
+
await component.preload();
|
|
652
|
+
}
|
|
653
|
+
}));
|
|
654
|
+
const loaderPromise = route.options.loader?.({
|
|
655
|
+
params: match.params,
|
|
656
|
+
search: match.search,
|
|
657
|
+
preload: !!preload,
|
|
658
|
+
parentMatchPromise,
|
|
659
|
+
abortController: match.abortController,
|
|
660
|
+
context: match.context,
|
|
661
|
+
location: state.location,
|
|
662
|
+
navigate: opts => navigate({
|
|
663
|
+
...opts,
|
|
664
|
+
from: match.pathname
|
|
665
|
+
})
|
|
666
|
+
});
|
|
667
|
+
loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
|
|
668
|
+
}
|
|
697
669
|
matches[index] = match = {
|
|
698
670
|
...match,
|
|
699
671
|
loadPromise
|
|
700
672
|
};
|
|
701
|
-
|
|
673
|
+
if (!preload) {
|
|
674
|
+
setState(s => ({
|
|
675
|
+
...s,
|
|
676
|
+
matches: s.matches.map(d => d.id === match.id ? match : d)
|
|
677
|
+
}));
|
|
678
|
+
}
|
|
679
|
+
try {
|
|
680
|
+
const loaderData = await loadPromise;
|
|
681
|
+
if (latestPromise = checkLatest()) return await latestPromise;
|
|
682
|
+
matches[index] = match = {
|
|
683
|
+
...match,
|
|
684
|
+
error: undefined,
|
|
685
|
+
status: 'success',
|
|
686
|
+
isFetching: false,
|
|
687
|
+
updatedAt: Date.now(),
|
|
688
|
+
loaderData,
|
|
689
|
+
loadPromise: undefined
|
|
690
|
+
};
|
|
691
|
+
} catch (error) {
|
|
692
|
+
if (latestPromise = checkLatest()) return await latestPromise;
|
|
693
|
+
if (handleIfRedirect(error)) return;
|
|
694
|
+
try {
|
|
695
|
+
route.options.onError?.(error);
|
|
696
|
+
} catch (onErrorError) {
|
|
697
|
+
error = onErrorError;
|
|
698
|
+
if (handleIfRedirect(onErrorError)) return;
|
|
699
|
+
}
|
|
700
|
+
matches[index] = match = {
|
|
701
|
+
...match,
|
|
702
|
+
error,
|
|
703
|
+
status: 'error',
|
|
704
|
+
isFetching: false,
|
|
705
|
+
updatedAt: Date.now()
|
|
706
|
+
};
|
|
707
|
+
}
|
|
708
|
+
if (!preload) {
|
|
709
|
+
setState(s => ({
|
|
710
|
+
...s,
|
|
711
|
+
matches: s.matches.map(d => d.id === match.id ? match : d)
|
|
712
|
+
}));
|
|
713
|
+
}
|
|
702
714
|
})());
|
|
703
715
|
});
|
|
704
716
|
await Promise.all(matchPromises);
|
|
@@ -724,6 +736,7 @@ function RouterProvider({
|
|
|
724
736
|
let matches = matchRoutes(next.pathname, next.search, {
|
|
725
737
|
debug: true
|
|
726
738
|
});
|
|
739
|
+
pendingMatchesRef.current = matches;
|
|
727
740
|
const previousMatches = state.matches;
|
|
728
741
|
|
|
729
742
|
// Ingest the new matches
|
|
@@ -749,9 +762,9 @@ function RouterProvider({
|
|
|
749
762
|
if (latestPromise = checkLatest(promise)) {
|
|
750
763
|
return latestPromise;
|
|
751
764
|
}
|
|
752
|
-
const exitingMatchIds = previousMatches.filter(id => !
|
|
753
|
-
const enteringMatchIds =
|
|
754
|
-
const stayingMatchIds = previousMatches.filter(id =>
|
|
765
|
+
const exitingMatchIds = previousMatches.filter(id => !pendingMatchesRef.current.includes(id));
|
|
766
|
+
const enteringMatchIds = pendingMatchesRef.current.filter(id => !previousMatches.includes(id));
|
|
767
|
+
const stayingMatchIds = previousMatches.filter(id => pendingMatchesRef.current.includes(id))
|
|
755
768
|
|
|
756
769
|
// setState((s) => ({
|
|
757
770
|
// ...s,
|
|
@@ -931,9 +944,7 @@ function RouterProvider({
|
|
|
931
944
|
unsub();
|
|
932
945
|
};
|
|
933
946
|
}, [history$1]);
|
|
934
|
-
|
|
935
|
-
if (initialLoad.current) {
|
|
936
|
-
initialLoad.current = false;
|
|
947
|
+
React__namespace.useLayoutEffect(() => {
|
|
937
948
|
startReactTransition(() => {
|
|
938
949
|
try {
|
|
939
950
|
load();
|
|
@@ -941,7 +952,7 @@ function RouterProvider({
|
|
|
941
952
|
console.error(err);
|
|
942
953
|
}
|
|
943
954
|
});
|
|
944
|
-
}
|
|
955
|
+
}, []);
|
|
945
956
|
const matchRoute = utils.useStableCallback((location, opts) => {
|
|
946
957
|
location = {
|
|
947
958
|
...location,
|