@tanstack/react-router 0.0.1-beta.241 → 0.0.1-beta.242

package/build/types/CatchBoundary.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 export declare function CatchBoundary(props: {
-    resetKey: string;
+    getResetKey: () => string;
     children: any;
     errorComponent?: any;
     onCatch: (error: any) => void;
 }): React.JSX.Element;
 export declare class CatchBoundaryImpl extends React.Component<{
-    resetKey: string;
+    getResetKey: () => string;
     children: (props: {
         error: any;
         reset: () => void;
@@ -14,11 +14,14 @@ export declare class CatchBoundaryImpl extends React.Component<{
     onCatch?: (error: any) => void;
 }> {
     state: any;
+    static getDerivedStateFromProps(props: any): {
+        resetKey: any;
+    };
     static getDerivedStateFromError(error: any): {
         error: any;
     };
     componentDidUpdate(prevProps: Readonly<{
-        resetKey: string;
+        getResetKey: () => string;
         children: (props: {
             error: any;
             reset: () => void;

package/build/types/Matches.d.ts

@@ -4,6 +4,7 @@ import { AnyRoute, ReactNode } from './route';
 import { FullSearchSchema, ParseRoute, RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo';
 import { RegisteredRouter } from './router';
 import { NoInfer, StrictOrFrom } from './utils';
+export declare const matchContext: React.Context<string | undefined>;
 export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id']> {
     id: string;
     routeId: TRouteId;
@@ -29,8 +30,8 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
 }
 export type AnyRouteMatch = RouteMatch<any>;
 export declare function Matches(): React.JSX.Element;
-export declare function Match({ matches }: {
-    matches: RouteMatch[];
+export declare function Match({ matchId }: {
+    matchId: string;
 }): React.JSX.Element;
 export declare function Outlet(): React.JSX.Element | null;
 export interface MatchRouteOptions {
@@ -48,7 +49,6 @@ export declare function MatchRoute<TRouteTree extends AnyRoute = RegisteredRoute
 export declare function useMatch<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>, TStrict extends boolean = true, TRouteMatchState = RouteMatch<TRouteTree, TFrom>, TSelected = TRouteMatchState>(opts: StrictOrFrom<TFrom> & {
     select?: (match: TRouteMatchState) => TSelected;
 }): TStrict extends true ? TSelected : TSelected | undefined;
-export declare const matchesContext: React.Context<RouteMatch<AnyRoute, any>[]>;
 export declare function useMatches<T = RouteMatch[]>(opts?: {
     select?: (matches: RouteMatch[]) => T;
 }): T;

package/build/umd/index.development.js

@@ -611,7 +611,7 @@
   function CatchBoundary(props) {
     const errorComponent = props.errorComponent ?? ErrorComponent;
     return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
-      resetKey: props.resetKey,
+      getResetKey: props.getResetKey,
       onCatch: props.onCatch,
       children: ({
         error
@@ -629,13 +629,18 @@
     state = {
       error: null
     };
+    static getDerivedStateFromProps(props) {
+      return {
+        resetKey: props.getResetKey()
+      };
+    }
     static getDerivedStateFromError(error) {
       return {
         error
       };
     }
     componentDidUpdate(prevProps, prevState) {
-      if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+      if (prevState.error && prevState.resetKey !== this.state.resetKey) {
         this.setState({
           error: null
         });
@@ -1198,11 +1203,14 @@
 
   //
 
+  const matchContext = /*#__PURE__*/React__namespace.createContext(undefined);
   function Matches() {
     const router = useRouter();
-    const routerState = useRouterState();
-    const matches = routerState.pendingMatches?.some(d => d.showPending) ? routerState.pendingMatches : routerState.matches;
-    const locationKey = routerState.resolvedLocation.state.key;
+    const matchId = useRouterState({
+      select: s => {
+        return getRenderedMatches(s)[0]?.id;
+      }
+    });
     const route = router.routesById[rootRouteId];
     const errorComponent = React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
@@ -1213,41 +1221,38 @@
         useParams: route.useParams
       });
     }, [route]);
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: matches
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
     }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      resetKey: locationKey,
+      getResetKey: () => router.state.resolvedLocation.state?.key,
       errorComponent: errorComponent,
       onCatch: () => {
         warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
       }
-    }, matches.length ? /*#__PURE__*/React__namespace.createElement(Match, {
-      matches: matches
+    }, matchId ? /*#__PURE__*/React__namespace.createElement(Match, {
+      matchId: matchId
     }) : null));
   }
   function SafeFragment(props) {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
   function Match({
-    matches
+    matchId
   }) {
-    const {
-      options,
-      routesById
-    } = useRouter();
-    const match = matches[0];
-    const routeId = match?.routeId;
-    const route = routesById[routeId];
-    useRouter();
-    const locationKey = useRouterState().resolvedLocation.state?.key;
-    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
+    const router = useRouter();
+    const routeId = useRouterState({
+      select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+    });
+    invariant(routeId, `Could not find routeId for matchId "${matchId}". Please file an issue!`);
+    const route = router.routesById[routeId];
+    const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
     const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.createElement(PendingComponent, {
       useMatch: route.useMatch,
       useRouteContext: route.useRouteContext,
       useSearch: route.useSearch,
       useParams: route.useParams
     }) : undefined;
-    const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
+    const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
     const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? pendingElement ? React__namespace.Suspense : SafeFragment;
     const errorComponent = routeErrorComponent ? React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
@@ -1259,30 +1264,33 @@
       });
     }, [route]) : undefined;
     const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: matches
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
       fallback: pendingElement
     }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-      resetKey: locationKey,
+      getResetKey: () => router.state.resolvedLocation.state?.key,
       errorComponent: errorComponent,
       onCatch: () => {
-        warning(false, `Error in route match: ${match.id}`);
+        warning(false, `Error in route match: ${matchId}`);
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      match: match,
+      matchId: matchId,
       pendingElement: pendingElement
     }))));
   }
   function MatchInner({
-    match,
+    matchId,
     pendingElement
   }) {
-    const {
-      options,
-      routesById
-    } = useRouter();
-    const route = routesById[match.routeId];
+    const router = useRouter();
+    const routeId = useRouterState({
+      select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+    });
+    const route = router.routesById[routeId];
+    const match = useRouterState({
+      select: s => pick(getRenderedMatches(s).find(d => d.id === matchId), ['status', 'error', 'showPending', 'loadPromise'])
+    });
     if (match.status === 'error') {
       throw match.error;
     }
@@ -1293,7 +1301,7 @@
       throw match.loadPromise;
     }
     if (match.status === 'success') {
-      let comp = route.options.component ?? options.defaultComponent;
+      let comp = route.options.component ?? router.options.defaultComponent;
       if (comp) {
         return /*#__PURE__*/React__namespace.createElement(comp, {
           useMatch: route.useMatch,
@@ -1308,12 +1316,19 @@
     invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
   }
   function Outlet() {
-    const matches = React__namespace.useContext(matchesContext).slice(1);
-    if (!matches[0]) {
+    const matchId = React__namespace.useContext(matchContext);
+    const childMatchId = useRouterState({
+      select: s => {
+        const matches = getRenderedMatches(s);
+        const index = matches.findIndex(d => d.id === matchId);
+        return matches[index + 1]?.id;
+      }
+    });
+    if (!childMatchId) {
       return null;
     }
     return /*#__PURE__*/React__namespace.createElement(Match, {
-      matches: matches
+      matchId: childMatchId
     });
   }
   function useMatchRoute() {
@@ -1340,46 +1355,47 @@
     }
     return !!params ? props.children : null;
   }
+  function getRenderedMatches(state) {
+    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+  }
   function useMatch(opts) {
-    const nearestMatch = React__namespace.useContext(matchesContext)[0];
-    const nearestMatchRouteId = nearestMatch?.routeId;
-    const matchRouteId = useRouterState({
-      select: state => {
-        const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
-        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
-        return match.routeId;
-      }
-    });
+    const router = useRouter();
+    const nearestMatchId = React__namespace.useContext(matchContext);
+    const nearestMatchRouteId = getRenderedMatches(router.state).find(d => d.id === nearestMatchId)?.routeId;
+    const matchRouteId = (() => {
+      const matches = getRenderedMatches(router.state);
+      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+      return match.routeId;
+    })();
     if (opts?.strict ?? true) {
       invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
     }
     const matchSelection = useRouterState({
       select: state => {
-        const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
-        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
+        const match = getRenderedMatches(state).find(d => d.id === nearestMatchId);
         invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
         return opts?.select ? opts.select(match) : match;
       }
     });
     return matchSelection;
   }
-  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
   function useMatches(opts) {
-    const contextMatches = React__namespace.useContext(matchesContext);
+    const contextMatchId = React__namespace.useContext(matchContext);
     return useRouterState({
       select: state => {
-        let matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
-        matches = matches.slice(matches.findIndex(d => d.id === contextMatches[0]?.id));
+        let matches = getRenderedMatches(state);
+        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
         return opts?.select ? opts.select(matches) : matches;
       }
     });
   }
   function useLoaderData(opts) {
-    const match = useMatch({
+    return useMatch({
       ...opts,
-      select: undefined
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+      }
     });
-    return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
   }
 
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
@@ -2099,7 +2115,7 @@
             return [parentSearch, searchError];
           }
         })();
-        const interpolatedPath = interpolatePath(route.path, routeParams);
+        const interpolatedPath = interpolatePath(route.fullPath, routeParams);
         const matchId = interpolatePath(route.id, routeParams, true) + (route.options.key?.({
           search: preMatchSearch,
           location: this.state.location
@@ -3171,8 +3187,8 @@
   exports.lazyFn = lazyFn;
   exports.lazyRouteComponent = lazyRouteComponent;
   exports.matchByPath = matchByPath;
+  exports.matchContext = matchContext;
   exports.matchPathname = matchPathname;
-  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
   exports.pick = pick;