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

package/build/esm/index.js

@@ -301,6 +301,346 @@ function escapeJSON(jsonString) {
   .replace(/"/g, '\\"'); // Escape double quotes
 }
 
+const matchContext = /*#__PURE__*/React.createContext(undefined);
+function Matches() {
+  const router = useRouter();
+  const matchId = useRouterState({
+    select: s => {
+      return getRenderedMatches(s)[0]?.id;
+    }
+  });
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
+  }, /*#__PURE__*/React.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.createElement(Match, {
+    matchId: matchId
+  }) : null));
+}
+function SafeFragment(props) {
+  return /*#__PURE__*/React.createElement(React.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.Suspense : SafeFragment;
+  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
+  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
+    fallback: PendingComponent
+  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
+    getResetKey: () => router.state.resolvedLocation.state?.key,
+    errorComponent: routeErrorComponent,
+    onCatch: () => {
+      warning(false, `Error in route match: ${matchId}`);
+    }
+  }, /*#__PURE__*/React.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.createElement(Comp, null);
+    }
+    return /*#__PURE__*/React.createElement(Outlet, null);
+  }
+  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+}
+const Outlet = /*#__PURE__*/React.memo(function Outlet() {
+  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, {
+    matchId: childMatchId
+  });
+});
+function useMatchRoute() {
+  const {
+    matchRoute
+  } = useRouter();
+  return React.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.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.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.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.createElement(routerContext.Provider, {
+    value: router
+  }, /*#__PURE__*/React.createElement(Matches, null), /*#__PURE__*/React.createElement(Transitioner, null));
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.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.useTransition();
+  router.startReactTransition = startReactTransition;
+  React.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.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('/'));
 }
@@ -476,133 +816,47 @@ function matchByPath(basepath, from, matchLocation) {
           }
           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,
@@ -635,393 +889,115 @@ class Route {
     });
   };
 }
-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.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.useCallback(props => {
-    return /*#__PURE__*/React.createElement(ErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]);
-  return /*#__PURE__*/React.createElement(matchContext.Provider, {
-    value: matchId
-  }, /*#__PURE__*/React.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.createElement(Match, {
-    matchId: matchId
-  }) : null));
-}
-function SafeFragment(props) {
-  return /*#__PURE__*/React.createElement(React.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.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.Suspense : SafeFragment;
-  const errorComponent = routeErrorComponent ? React.useCallback(props => {
-    return /*#__PURE__*/React.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.createElement(matchContext.Provider, {
-    value: matchId
-  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
-    fallback: pendingElement
-  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
-    getResetKey: () => router.state.resolvedLocation.state?.key,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(false, `Error in route match: ${matchId}`);
-    }
-  }, /*#__PURE__*/React.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.createElement(comp, {
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams,
-        useLoaderData: route.useLoaderData
-      });
-    }
-    return /*#__PURE__*/React.createElement(Outlet, null);
-  }
-  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-}
-const Outlet = /*#__PURE__*/React.memo(function Outlet() {
-  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, {
-    matchId: childMatchId
-  });
-});
-function useMatchRoute() {
-  const {
-    matchRoute
-  } = useRouter();
-  return React.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.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.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.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.createElement(routerContext.Provider, {
-    value: router
-  }, /*#__PURE__*/React.createElement(Matches, null), /*#__PURE__*/React.createElement(Transitioner, null));
-  if (router.options.Wrap) {
-    return /*#__PURE__*/React.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.useTransition();
-  router.startReactTransition = startReactTransition;
-  React.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.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 {
@@ -1702,7 +1678,6 @@ class Router {
         status: hasLoaders ? 'pending' : 'success',
         showPending: false,
         isFetching: false,
-        invalid: false,
         error: undefined,
         paramsError: parseErrors[index],
         loadPromise: Promise.resolve(),
@@ -2021,7 +1996,6 @@ class Router {
         matches[index] = match = {
           ...match,
           fetchedAt: Date.now(),
-          invalid: false,
           showPending: false
         };
         const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
@@ -2224,7 +2198,7 @@ class Router {
 
         //
         ;
-        [[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);
           });
@@ -2314,7 +2288,7 @@ class Router {
   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']))
       }
     };
   };
@@ -2578,9 +2552,21 @@ function useNavigate(defaultOpts) {
     });
   }, []);
 }
-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 {
@@ -2598,5 +2584,5 @@ function Navigate(props) {
   return null;
 }
 
-export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, 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, removeBasepath, 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, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, 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, removeBasepath, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map