@tanstack/react-router 0.0.1-beta.285 → 0.0.1-beta.286

package/build/esm/index.js

@@ -303,472 +303,114 @@ 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 joinPaths(paths) {
+  return cleanPath(paths.filter(Boolean).join('/'));
 }
-function SafeFragment(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+function cleanPath(path) {
+  // remove double slashes
+  return path.replace(/\/{2,}/g, '/');
 }
-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, null) : null;
-  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: pendingElement
-  }, /*#__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: pendingElement
-  }))));
+function trimPathLeft(path) {
+  return path === '/' ? path : path.replace(/^\/{1,}/, '');
 }
-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;
-    }
-    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!');
+function trimPathRight(path) {
+  return path === '/' ? path : path.replace(/\/{1,}$/, '');
 }
-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;
+function trimPath(path) {
+  return trimPathRight(trimPathLeft(path));
+}
+function resolvePath(basepath, base, to) {
+  base = base.replace(new RegExp(`^${basepath}`), '/');
+  to = to.replace(new RegExp(`^${basepath}`), '/');
+  let baseSegments = parsePathname(base);
+  const toSegments = parsePathname(to);
+  toSegments.forEach((toSegment, index) => {
+    if (toSegment.value === '/') {
+      if (!index) {
+        // Leading slash
+        baseSegments = [toSegment];
+      } else if (index === toSegments.length - 1) {
+        // Trailing Slash
+        baseSegments.push(toSegment);
+      } else ;
+    } else if (toSegment.value === '..') {
+      // Extra trailing slash? pop it off
+      if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
+        baseSegments.pop();
+      }
+      baseSegments.pop();
+    } else if (toSegment.value === '.') {
+      return;
+    } else {
+      baseSegments.push(toSegment);
     }
   });
-  if (!childMatchId) {
-    return null;
+  const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
+  return cleanPath(joined);
+}
+function parsePathname(pathname) {
+  if (!pathname) {
+    return [];
   }
-  return /*#__PURE__*/React.createElement(Match, {
-    matchId: childMatchId
-  });
-});
-function useMatchRoute() {
-  useRouterState({
-    select: s => [s.location, s.resolvedLocation]
-  });
-  const {
-    matchRoute
-  } = useRouter();
-  return React.useCallback(opts => {
-    const {
-      pending,
-      caseSensitive,
-      ...rest
-    } = opts;
-    return matchRoute(rest, {
-      pending,
-      caseSensitive
+  pathname = cleanPath(pathname);
+  const segments = [];
+  if (pathname.slice(0, 1) === '/') {
+    pathname = pathname.substring(1);
+    segments.push({
+      type: 'pathname',
+      value: '/'
     });
-  }, []);
-}
-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?`);
+  if (!pathname) {
+    return segments;
   }
-  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;
+
+  // Remove empty segments and '.' segments
+  const split = pathname.split('/').filter(Boolean);
+  segments.push(...split.map(part => {
+    if (part === '$' || part === '*') {
+      return {
+        type: 'wildcard',
+        value: part
+      };
     }
-  });
-}
-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;
+    if (part.charAt(0) === '$') {
+      return {
+        type: 'param',
+        value: part
+      };
     }
-  });
+    return {
+      type: 'pathname',
+      value: part
+    };
+  }));
+  if (pathname.slice(-1) === '/') {
+    pathname = pathname.substring(1);
+    segments.push({
+      type: 'pathname',
+      value: '/'
+    });
+  }
+  return segments;
 }
-function useLoaderDeps(opts) {
-  return useMatch({
-    ...opts,
-    select: s => {
-      return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
+function interpolatePath(path, params, leaveWildcards = false) {
+  const interpolatedPathSegments = parsePathname(path);
+  return joinPaths(interpolatedPathSegments.map(segment => {
+    if (segment.type === 'wildcard') {
+      const value = params[segment.value];
+      if (leaveWildcards) return `${segment.value}${value ?? ''}`;
+      return value;
     }
-  });
-}
-function useLoaderData(opts) {
-  return useMatch({
-    ...opts,
-    select: s => {
-      return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+    if (segment.type === 'param') {
+      return params[segment.value.substring(1)] ?? 'undefined';
     }
-  });
+    return segment.value;
+  }));
 }
-
-let routerContext = /*#__PURE__*/React.createContext(null);
-if (typeof document !== 'undefined') {
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    routerContext = window.__TSR_ROUTER_CONTEXT__;
-  } else {
-    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 matches = router.options.InnerWrap ? /*#__PURE__*/React.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
-  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: router
-  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
-  if (router.options.Wrap) {
-    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
-  }
-  return provider;
-}
-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) {
-        if (routerState.location.hash !== '') {
-          const el = document.getElementById(routerState.location.hash);
-          if (el) {
-            el.scrollIntoView();
-          }
-        }
-      }
-      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.cachedMatches, ...(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('/'));
-}
-function cleanPath(path) {
-  // remove double slashes
-  return path.replace(/\/{2,}/g, '/');
-}
-function trimPathLeft(path) {
-  return path === '/' ? path : path.replace(/^\/{1,}/, '');
-}
-function trimPathRight(path) {
-  return path === '/' ? path : path.replace(/\/{1,}$/, '');
-}
-function trimPath(path) {
-  return trimPathRight(trimPathLeft(path));
-}
-function resolvePath(basepath, base, to) {
-  base = base.replace(new RegExp(`^${basepath}`), '/');
-  to = to.replace(new RegExp(`^${basepath}`), '/');
-  let baseSegments = parsePathname(base);
-  const toSegments = parsePathname(to);
-  toSegments.forEach((toSegment, index) => {
-    if (toSegment.value === '/') {
-      if (!index) {
-        // Leading slash
-        baseSegments = [toSegment];
-      } else if (index === toSegments.length - 1) {
-        // Trailing Slash
-        baseSegments.push(toSegment);
-      } else ;
-    } else if (toSegment.value === '..') {
-      // Extra trailing slash? pop it off
-      if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
-        baseSegments.pop();
-      }
-      baseSegments.pop();
-    } else if (toSegment.value === '.') {
-      return;
-    } else {
-      baseSegments.push(toSegment);
-    }
-  });
-  const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
-  return cleanPath(joined);
-}
-function parsePathname(pathname) {
-  if (!pathname) {
-    return [];
-  }
-  pathname = cleanPath(pathname);
-  const segments = [];
-  if (pathname.slice(0, 1) === '/') {
-    pathname = pathname.substring(1);
-    segments.push({
-      type: 'pathname',
-      value: '/'
-    });
-  }
-  if (!pathname) {
-    return segments;
-  }
-
-  // Remove empty segments and '.' segments
-  const split = pathname.split('/').filter(Boolean);
-  segments.push(...split.map(part => {
-    if (part === '$' || part === '*') {
-      return {
-        type: 'wildcard',
-        value: part
-      };
-    }
-    if (part.charAt(0) === '$') {
-      return {
-        type: 'param',
-        value: part
-      };
-    }
-    return {
-      type: 'pathname',
-      value: part
-    };
-  }));
-  if (pathname.slice(-1) === '/') {
-    pathname = pathname.substring(1);
-    segments.push({
-      type: 'pathname',
-      value: '/'
-    });
-  }
-  return segments;
-}
-function interpolatePath(path, params, leaveWildcards = false) {
-  const interpolatedPathSegments = parsePathname(path);
-  return joinPaths(interpolatedPathSegments.map(segment => {
-    if (segment.type === 'wildcard') {
-      const value = params[segment.value];
-      if (leaveWildcards) return `${segment.value}${value ?? ''}`;
-      return value;
-    }
-    if (segment.type === 'param') {
-      return params[segment.value.substring(1)] ?? 'undefined';
-    }
-    return segment.value;
-  }));
-}
-function matchPathname(basepath, currentPathname, matchLocation) {
-  const pathParams = matchByPath(basepath, currentPathname, matchLocation);
-  // const searchMatched = matchBySearch(location.search, matchLocation)
+function matchPathname(basepath, currentPathname, matchLocation) {
+  const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+  // const searchMatched = matchBySearch(location.search, matchLocation)
 
   if (matchLocation.to && !pathParams) {
     return;
@@ -938,98 +580,463 @@ class Route {
     } else {
       invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
     }
-    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);
+    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);
+    }
+    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;
+    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
+    });
+  };
+  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
+    });
+  };
+  useLoaderDeps = opts => {
+    return useLoaderDeps({
+      ...opts,
+      from: this.id
+    });
+  };
+  useLoaderData = opts => {
+    return useLoaderData({
+      ...opts,
+      from: this.id
+    });
+  };
+}
+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;
+    }
+  });
+  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, null) : null;
+  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: pendingElement
+  }, /*#__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: 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;
+    }
+    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() {
+  useRouterState({
+    select: s => [s.location, s.resolvedLocation]
+  });
+  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 removeUnderscores(s) {
+  if (s === rootRouteId) return s;
+  return s?.replace(/(^_|_$)/, '').replace(/(\/_|_\/)/, '/');
+}
+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);
+    if (!opts.from) {
+      return matches.find(d => d.id === nearestMatchId);
+    }
+    const from = removeUnderscores(opts.from);
+    return matches.find(d => d.routeId === from) ?? matches.find(d => d.routeId === from?.replace(/\/$/, ''));
+  })()?.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 useLoaderDeps(opts) {
+  return useMatch({
+    ...opts,
+    select: s => {
+      return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
     }
-    const customId = options?.id || path;
+  });
+}
+function useLoaderData(opts) {
+  return useMatch({
+    ...opts,
+    select: s => {
+      return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+    }
+  });
+}
 
-    // 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 = '/';
+let routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__;
+  } else {
+    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 (id !== rootRouteId) {
-      id = joinPaths(['/', id]);
+  });
+  const matches = router.options.InnerWrap ? /*#__PURE__*/React.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
+  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
+  }
+  return provider;
+}
+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 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
-    });
-  };
-  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
+  }, [isTransitioning]);
+  const tryLoad = () => {
+    const apply = cb => {
+      if (!routerState.isTransitioning) {
+        startReactTransition(() => cb());
+      } else {
+        cb();
+      }
+    };
+    apply(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
+      }
     });
   };
-  useLoaderDeps = opts => {
-    return useLoaderDeps({
-      ...opts,
-      from: this.id
+  useLayoutEffect$1(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation);
+      if (routerState.location !== router.latestLocation) {
+        tryLoad();
+      }
     });
-  };
-  useLoaderData = opts => {
-    return useLoaderData({
-      ...opts,
-      from: this.id
+    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) {
+        if (routerState.location.hash !== '') {
+          const el = document.getElementById(routerState.location.hash);
+          if (el) {
+            el.scrollIntoView();
+          }
+        }
+      }
+      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 rootRouteWithContext() {
-  return options => {
-    return new RootRoute(options);
-  };
+function getRouteMatch(state, id) {
+  return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
 }
-class RootRoute extends Route {
-  constructor(options) {
-    super(options);
-  }
+function useRouterState(opts) {
+  const router = useRouter();
+  return useStore(router.__store, opts?.select);
 }
-function createRouteMask(opts) {
-  return opts;
+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;
 }
 
-//
-
-class NotFoundRoute extends Route {
-  constructor(options) {
-    super({
-      ...options,
-      id: '404'
+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);
 }
 
 class FileRoute {