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

package/build/esm/index.js

@@ -21,7 +21,7 @@ import { Store } from '@tanstack/store';
 function CatchBoundary(props) {
   const errorComponent = props.errorComponent ?? ErrorComponent;
   return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
-    resetKey: props.resetKey,
+    getResetKey: props.getResetKey,
     onCatch: props.onCatch,
     children: ({
       error
@@ -39,13 +39,18 @@ class CatchBoundaryImpl extends React.Component {
   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
       });
@@ -608,11 +613,14 @@ function createRouteMask(opts) {
 
 //
 
+const matchContext = /*#__PURE__*/React.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.useCallback(props => {
     return /*#__PURE__*/React.createElement(ErrorComponent, {
@@ -623,41 +631,38 @@ function Matches() {
       useParams: route.useParams
     });
   }, [route]);
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: matches
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
   }, /*#__PURE__*/React.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.createElement(Match, {
-    matches: matches
+  }, matchId ? /*#__PURE__*/React.createElement(Match, {
+    matchId: matchId
   }) : null));
 }
 function SafeFragment(props) {
   return /*#__PURE__*/React.createElement(React.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.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.Suspense : SafeFragment;
   const errorComponent = routeErrorComponent ? React.useCallback(props => {
     return /*#__PURE__*/React.createElement(routeErrorComponent, {
@@ -669,30 +674,33 @@ function Match({
     });
   }, [route]) : undefined;
   const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: matches
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
   }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
     fallback: pendingElement
   }, /*#__PURE__*/React.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.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;
   }
@@ -703,7 +711,7 @@ function MatchInner({
     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.createElement(comp, {
         useMatch: route.useMatch,
@@ -718,12 +726,19 @@ function MatchInner({
   invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
 }
 function Outlet() {
-  const matches = React.useContext(matchesContext).slice(1);
-  if (!matches[0]) {
+  const matchId = React.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.createElement(Match, {
-    matches: matches
+    matchId: childMatchId
   });
 }
 function useMatchRoute() {
@@ -750,46 +765,47 @@ function MatchRoute(props) {
   }
   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.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.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.createContext(null);
 function useMatches(opts) {
-  const contextMatches = React.useContext(matchesContext);
+  const contextMatchId = React.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.createContext(null);
@@ -1509,7 +1525,7 @@ class Router {
           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
@@ -2504,12 +2520,13 @@ function useNavigate(defaultOpts) {
   const {
     navigate
   } = useRouter();
-  const match = useMatch({
-    strict: false
+  const matchPathname = useMatch({
+    strict: false,
+    select: s => s.pathname
   });
   return React.useCallback(opts => {
     return navigate({
-      from: opts?.to ? match.pathname : undefined,
+      from: opts?.to ? matchPathname : undefined,
       ...defaultOpts,
       ...opts
     });
@@ -2535,5 +2552,5 @@ function Navigate(props) {
   return null;
 }
 
-export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
+export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchContext, matchPathname, parsePathname, parseSearchWith, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map