@tanstack/react-router 0.0.1-beta.269 → 0.0.1-beta.270

package/build/umd/index.development.js

@@ -909,6 +909,346 @@
     .replace(/"/g, '\\"'); // Escape double quotes
   }
 
+  const matchContext = /*#__PURE__*/React__namespace.createContext(undefined);
+  function Matches() {
+    const router = useRouter();
+    const matchId = useRouterState({
+      select: s => {
+        return getRenderedMatches(s)[0]?.id;
+      }
+    });
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      getResetKey: () => router.state.resolvedLocation.state?.key,
+      errorComponent: ErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+      }
+    }, 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({
+    matchId
+  }) {
+    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 routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ?? route.options.component?.preload ?? route.options.pendingComponent?.preload ?? route.options.errorComponent?.preload ? React__namespace.Suspense : SafeFragment;
+    const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
+      fallback: PendingComponent
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
+      getResetKey: () => router.state.resolvedLocation.state?.key,
+      errorComponent: routeErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in route match: ${matchId}`);
+      }
+    }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
+      matchId: matchId,
+      pendingElement: PendingComponent
+    }))));
+  }
+  function MatchInner({
+    matchId,
+    pendingElement
+  }) {
+    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;
+    }
+    if (match.status === 'pending') {
+      if (match.showPending) {
+        return pendingElement || null;
+      }
+      throw match.loadPromise;
+    }
+    if (match.status === 'success') {
+      let Comp = route.options.component ?? router.options.defaultComponent;
+      if (Comp) {
+        return /*#__PURE__*/React__namespace.createElement(Comp, null);
+      }
+      return /*#__PURE__*/React__namespace.createElement(Outlet, null);
+    }
+    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+  }
+  const Outlet = /*#__PURE__*/React__namespace.memo(function Outlet() {
+    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, {
+      matchId: childMatchId
+    });
+  });
+  function useMatchRoute() {
+    const {
+      matchRoute
+    } = useRouter();
+    return React__namespace.useCallback(opts => {
+      const {
+        pending,
+        caseSensitive,
+        ...rest
+      } = opts;
+      return matchRoute(rest, {
+        pending,
+        caseSensitive
+      });
+    }, []);
+  }
+  function MatchRoute(props) {
+    const matchRoute = useMatchRoute();
+    const params = matchRoute(props);
+    if (typeof props.children === 'function') {
+      return props.children(params);
+    }
+    return !!params ? props.children : null;
+  }
+  function getRenderedMatches(state) {
+    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+  }
+  function useMatch(opts) {
+    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 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;
+  }
+  function useMatches(opts) {
+    return useRouterState({
+      select: state => {
+        let matches = getRenderedMatches(state);
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useParentMatches(opts) {
+    const contextMatchId = React__namespace.useContext(matchContext);
+    return useMatches({
+      select: matches => {
+        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useLoaderData(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+      }
+    });
+  }
+
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  if (typeof document !== 'undefined') {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext;
+  }
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest?.context
+      }
+    });
+    const inner = /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: router
+    }, /*#__PURE__*/React__namespace.createElement(Matches, null), /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, inner);
+    }
+    return inner;
+  }
+  function Transitioner() {
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
+    const [isTransitioning, startReactTransition] = React__namespace.useTransition();
+    router.startReactTransition = startReactTransition;
+    React__namespace.useEffect(() => {
+      if (isTransitioning) {
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning
+        }));
+      }
+    }, [isTransitioning]);
+    const tryLoad = () => {
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    };
+    useLayoutEffect$1(() => {
+      const unsub = router.history.subscribe(() => {
+        router.latestLocation = router.parseLocation(router.latestLocation);
+        if (routerState.location !== router.latestLocation) {
+          tryLoad();
+        }
+      });
+      const nextLocation = router.buildLocation({
+        search: true,
+        params: true,
+        hash: true,
+        state: true
+      });
+      if (routerState.location.href !== nextLocation.href) {
+        router.commitLocation({
+          ...nextLocation,
+          replace: true
+        });
+      }
+      return () => {
+        unsub();
+      };
+    }, [router.history]);
+    useLayoutEffect$1(() => {
+      if (routerState.isTransitioning && !isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        router.emit({
+          type: 'onResolved',
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+        });
+        if (document.querySelector) {
+          const el = document.getElementById(routerState.location.hash);
+          if (el) {
+            el.scrollIntoView();
+          }
+        }
+        router.pendingMatches = [];
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning: false,
+          resolvedLocation: s.location
+        }));
+      }
+    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+    useLayoutEffect$1(() => {
+      if (!window.__TSR_DEHYDRATED__) {
+        tryLoad();
+      }
+    }, []);
+    return null;
+  }
+  function getRouteMatch(state, id) {
+    return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+  }
+  function useRouterState(opts) {
+    const router = useRouter();
+    return useStore(router.__store, opts?.select);
+  }
+  function useRouter() {
+    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
+    const value = React__namespace.useContext(resolvedContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
+      });
+    }
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  function useAwaited({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw new Promise(r => setTimeout(r, 1)).then(() => promise);
+    }
+    if (state.status === 'error') {
+      throw state.error;
+    }
+    router.dehydrateData(key, state);
+    return [state.data];
+  }
+  function Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
+  }
+
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
   }
@@ -1084,133 +1424,47 @@
             }
             if (baseSegment.value.charAt(0) !== '$') {
               params[routeSegment.value.substring(1)] = baseSegment.value;
-            }
-          }
-        }
-        if (!isLastBaseSegment && isLastRouteSegment) {
-          params['**'] = joinPaths(baseSegments.slice(i + 1).map(d => d.value));
-          return !!matchLocation.fuzzy && routeSegment?.value !== '/';
-        }
-      }
-      return true;
-    })();
-    return isMatch ? params : undefined;
-  }
-
-  function useParams(opts) {
-    return useRouterState({
-      select: state => {
-        const params = last(state.matches)?.params;
-        return opts?.select ? opts.select(params) : params;
-      }
-    });
-  }
-
-  function useSearch(opts) {
-    return useMatch({
-      ...opts,
-      select: match => {
-        return opts?.select ? opts.select(match.search) : match.search;
-      }
-    });
-  }
-
-  const rootRouteId = '__root__';
-
-  // The parse type here allows a zod schema to be passed directly to the validator
-
-  class RouteApi {
-    constructor({
-      id
-    }) {
-      this.id = id;
-    }
-    useMatch = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id
-      });
-    };
-    useRouteContext = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
-      });
-    };
-    useSearch = opts => {
-      return useSearch({
-        ...opts,
-        from: this.id
-      });
-    };
-    useParams = opts => {
-      return useParams({
-        ...opts,
-        from: this.id
-      });
-    };
-    useLoaderData = opts => {
-      return useLoaderData({
-        ...opts,
-        from: this.id
-      });
-    };
+            }
+          }
+        }
+        if (!isLastBaseSegment && isLastRouteSegment) {
+          params['**'] = joinPaths(baseSegments.slice(i + 1).map(d => d.value));
+          return !!matchLocation.fuzzy && routeSegment?.value !== '/';
+        }
+      }
+      return true;
+    })();
+    return isMatch ? params : undefined;
   }
-  class Route {
-    // Set up in this.init()
-
-    // customId!: TCustomId
-
-    // Optional
 
-    constructor(options) {
-      this.options = options || {};
-      this.isRoot = !options?.getParentRoute;
-      invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
-      this.$$typeof = Symbol.for('react.memo');
-    }
-    init = opts => {
-      this.originalIndex = opts.originalIndex;
-      const options = this.options;
-      const isRoot = !options?.path && !options?.id;
-      this.parentRoute = this.options?.getParentRoute?.();
-      if (isRoot) {
-        this.path = rootRouteId;
-      } else {
-        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+  function useParams(opts) {
+    return useRouterState({
+      select: state => {
+        const params = last(state.matches)?.params;
+        return opts?.select ? opts.select(params) : params;
       }
-      let path = isRoot ? rootRouteId : options.path;
+    });
+  }
 
-      // If the path is anything other than an index path, trim it up
-      if (path && path !== '/') {
-        path = trimPath(path);
+  function useSearch(opts) {
+    return useMatch({
+      ...opts,
+      select: match => {
+        return opts?.select ? opts.select(match.search) : match.search;
       }
-      const customId = options?.id || path;
+    });
+  }
 
-      // Strip the parentId prefix from the first level of children
-      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
-      if (path === rootRouteId) {
-        path = '/';
-      }
-      if (id !== rootRouteId) {
-        id = joinPaths(['/', id]);
-      }
-      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
-      this.path = path;
+  const rootRouteId = '__root__';
+
+  // The parse type here allows a zod schema to be passed directly to the validator
+
+  class RouteApi {
+    constructor({
+      id
+    }) {
       this.id = id;
-      // this.customId = customId as TCustomId
-      this.fullPath = fullPath;
-      this.to = fullPath;
-    };
-    addChildren = children => {
-      this.children = children;
-      return this;
-    };
-    update = options => {
-      Object.assign(this.options, options);
-      return this;
-    };
+    }
     useMatch = opts => {
       return useMatch({
         ...opts,
@@ -1243,393 +1497,115 @@
       });
     };
   }
-  function rootRouteWithContext() {
-    return options => {
-      return new RootRoute(options);
-    };
-  }
-  class RootRoute extends Route {
-    constructor(options) {
-      super(options);
-    }
-  }
-  function createRouteMask(opts) {
-    return opts;
-  }
-
-  //
-
-  class NotFoundRoute extends Route {
-    constructor(options) {
-      super({
-        ...options,
-        id: '404'
-      });
-    }
-  }
-
-  const matchContext = /*#__PURE__*/React__namespace.createContext(undefined);
-  function Matches() {
-    const router = useRouter();
-    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, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }, [route]);
-    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
-      value: matchId
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      getResetKey: () => router.state.resolvedLocation.state?.key,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-      }
-    }, 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({
-    matchId
-  }) {
-    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 ?? 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, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }, [route]) : undefined;
-    const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
-    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
-      value: matchId
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-      fallback: pendingElement
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-      getResetKey: () => router.state.resolvedLocation.state?.key,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in route match: ${matchId}`);
-      }
-    }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      matchId: matchId,
-      pendingElement: pendingElement
-    }))));
-  }
-  function MatchInner({
-    matchId,
-    pendingElement
-  }) {
-    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;
-    }
-    if (match.status === 'pending') {
-      if (match.showPending) {
-        return pendingElement || null;
-      }
-      throw match.loadPromise;
-    }
-    if (match.status === 'success') {
-      let comp = route.options.component ?? router.options.defaultComponent;
-      if (comp) {
-        return /*#__PURE__*/React__namespace.createElement(comp, {
-          useMatch: route.useMatch,
-          useRouteContext: route.useRouteContext,
-          useSearch: route.useSearch,
-          useParams: route.useParams,
-          useLoaderData: route.useLoaderData
-        });
-      }
-      return /*#__PURE__*/React__namespace.createElement(Outlet, null);
-    }
-    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-  }
-  const Outlet = /*#__PURE__*/React__namespace.memo(function Outlet() {
-    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, {
-      matchId: childMatchId
-    });
-  });
-  function useMatchRoute() {
-    const {
-      matchRoute
-    } = useRouter();
-    return React__namespace.useCallback(opts => {
-      const {
-        pending,
-        caseSensitive,
-        ...rest
-      } = opts;
-      return matchRoute(rest, {
-        pending,
-        caseSensitive
-      });
-    }, []);
-  }
-  function MatchRoute(props) {
-    const matchRoute = useMatchRoute();
-    const params = matchRoute(props);
-    if (typeof props.children === 'function') {
-      return props.children(params);
-    }
-    return !!params ? props.children : null;
-  }
-  function getRenderedMatches(state) {
-    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
-  }
-  function useMatch(opts) {
-    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 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;
-  }
-  function useMatches(opts) {
-    const contextMatchId = React__namespace.useContext(matchContext);
-    return useRouterState({
-      select: state => {
-        let matches = getRenderedMatches(state);
-        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
-        return opts?.select ? opts.select(matches) : matches;
-      }
-    });
-  }
-  function useLoaderData(opts) {
-    return useMatch({
-      ...opts,
-      select: s => {
-        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+  class Route {
+    // Set up in this.init()
+
+    // customId!: TCustomId
+
+    // Optional
+
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+      invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
+      this.$$typeof = Symbol.for('react.memo');
+    }
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      const options = this.options;
+      const isRoot = !options?.path && !options?.id;
+      this.parentRoute = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
+      } else {
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
       }
-    });
-  }
+      let path = isRoot ? rootRouteId : options.path;
 
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  if (typeof document !== 'undefined') {
-    window.__TSR_ROUTER_CONTEXT__ = routerContext;
-  }
-  function RouterProvider({
-    router,
-    ...rest
-  }) {
-    // Allow the router to update options on the router instance
-    router.update({
-      ...router.options,
-      ...rest,
-      context: {
-        ...router.options.context,
-        ...rest?.context
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
       }
-    });
-    const inner = /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: router
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null), /*#__PURE__*/React__namespace.createElement(Transitioner, null));
-    if (router.options.Wrap) {
-      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, inner);
-    }
-    return inner;
-  }
-  function Transitioner() {
-    const router = useRouter();
-    const routerState = useRouterState({
-      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-    });
-    const [isTransitioning, startReactTransition] = React__namespace.useTransition();
-    router.startReactTransition = startReactTransition;
-    React__namespace.useEffect(() => {
-      if (isTransitioning) {
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning
-        }));
+      const customId = options?.id || path;
+
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
       }
-    }, [isTransitioning]);
-    const tryLoad = () => {
-      const apply = cb => {
-        if (!routerState.isTransitioning) {
-          startReactTransition(() => cb());
-        } else {
-          cb();
-        }
-      };
-      apply(() => {
-        try {
-          router.load();
-        } catch (err) {
-          console.error(err);
-        }
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
+      }
+      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
+      this.path = path;
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
+      this.to = fullPath;
+    };
+    addChildren = children => {
+      this.children = children;
+      return this;
+    };
+    update = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
       });
     };
-    useLayoutEffect$1(() => {
-      const unsub = router.history.subscribe(() => {
-        router.latestLocation = router.parseLocation(router.latestLocation);
-        if (routerState.location !== router.latestLocation) {
-          tryLoad();
-        }
+    useRouteContext = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
       });
-      const nextLocation = router.buildLocation({
-        search: true,
-        params: true,
-        hash: true,
-        state: true
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
       });
-      if (routerState.location.href !== nextLocation.href) {
-        router.commitLocation({
-          ...nextLocation,
-          replace: true
-        });
-      }
-      return () => {
-        unsub();
-      };
-    }, [router.history]);
-    useLayoutEffect$1(() => {
-      if (routerState.isTransitioning && !isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
-        router.emit({
-          type: 'onResolved',
-          fromLocation: routerState.resolvedLocation,
-          toLocation: routerState.location,
-          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
-        });
-        if (document.querySelector) {
-          const el = document.getElementById(routerState.location.hash);
-          if (el) {
-            el.scrollIntoView();
-          }
-        }
-        router.pendingMatches = [];
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning: false,
-          resolvedLocation: s.location
-        }));
-      }
-    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
-    useLayoutEffect$1(() => {
-      if (!window.__TSR_DEHYDRATED__) {
-        tryLoad();
-      }
-    }, []);
-    return null;
-  }
-  function getRouteMatch(state, id) {
-    return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
-  }
-  function useRouterState(opts) {
-    const router = useRouter();
-    return useStore(router.__store, opts?.select);
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
+    };
   }
-  function useRouter() {
-    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
-    const value = React__namespace.useContext(resolvedContext);
-    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
+  function rootRouteWithContext() {
+    return options => {
+      return new RootRoute(options);
+    };
   }
-
-  function defer(_promise) {
-    const promise = _promise;
-    if (!promise.__deferredState) {
-      promise.__deferredState = {
-        uid: Math.random().toString(36).slice(2),
-        status: 'pending'
-      };
-      const state = promise.__deferredState;
-      promise.then(data => {
-        state.status = 'success';
-        state.data = data;
-      }).catch(error => {
-        state.status = 'error';
-        state.error = error;
-      });
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
     }
-    return promise;
   }
-  function isDehydratedDeferred(obj) {
-    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  function createRouteMask(opts) {
+    return opts;
   }
 
-  function useAwaited({
-    promise
-  }) {
-    const router = useRouter();
-    let state = promise.__deferredState;
-    const key = `__TSR__DEFERRED__${state.uid}`;
-    if (isDehydratedDeferred(promise)) {
-      state = router.hydrateData(key);
-      promise = Promise.resolve(state.data);
-      promise.__deferredState = state;
-    }
-    if (state.status === 'pending') {
-      throw new Promise(r => setTimeout(r, 1)).then(() => promise);
-    }
-    if (state.status === 'error') {
-      throw state.error;
+  //
+
+  class NotFoundRoute extends Route {
+    constructor(options) {
+      super({
+        ...options,
+        id: '404'
+      });
     }
-    router.dehydrateData(key, state);
-    return [state.data];
-  }
-  function Await(props) {
-    const awaited = useAwaited(props);
-    return props.children(...awaited);
   }
 
   class FileRoute {
@@ -2310,7 +2286,6 @@
           status: hasLoaders ? 'pending' : 'success',
           showPending: false,
           isFetching: false,
-          invalid: false,
           error: undefined,
           paramsError: parseErrors[index],
           loadPromise: Promise.resolve(),
@@ -2629,7 +2604,6 @@
           matches[index] = match = {
             ...match,
             fetchedAt: Date.now(),
-            invalid: false,
             showPending: false
           };
           const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
@@ -2832,7 +2806,7 @@
 
           //
           ;
-          [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matches, hook]) => {
+          [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onStay']].forEach(([matches, hook]) => {
             matches.forEach(match => {
               this.looseRoutesById[match.routeId].options[hook]?.(match);
             });
@@ -2922,7 +2896,7 @@
     dehydrate = () => {
       return {
         state: {
-          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt', 'loaderData']))
+          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'id', 'status', 'updatedAt', 'loaderData']))
         }
       };
     };
@@ -3186,9 +3160,21 @@
       });
     }, []);
   }
-  function typedNavigate(navigate) {
-    return navigate;
-  } //
+
+  // NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
+  // export function typedNavigate<
+  //   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  //   TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+  // >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+  //   return navigate as <
+  //     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+  //     TTo extends string = '',
+  //     TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  //     TMaskTo extends string = '',
+  //   >(
+  //     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  //   ) => Promise<void>
+  // } //
 
   function Navigate(props) {
     const {
@@ -3272,7 +3258,6 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
-  exports.typedNavigate = typedNavigate;
   exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
   exports.useElementScrollRestoration = useElementScrollRestoration;
@@ -3284,6 +3269,7 @@
   exports.useMatches = useMatches;
   exports.useNavigate = useNavigate;
   exports.useParams = useParams;
+  exports.useParentMatches = useParentMatches;
   exports.useRouteContext = useRouteContext;
   exports.useRouter = useRouter;
   exports.useRouterState = useRouterState;