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

package/build/umd/index.development.js

@@ -771,6 +771,8 @@
   // // Using DeepMerge to merge TypeA and TypeB
   // type MergedType = Expand<AssignAll<[TypeA, TypeB, TypeC]>>
 
+  // from https://github.com/type-challenges/type-challenges/issues/737
+
   //
 
   const isServer = typeof document === 'undefined';
@@ -909,468 +911,110 @@
     .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 joinPaths(paths) {
+    return cleanPath(paths.filter(Boolean).join('/'));
   }
-  function SafeFragment(props) {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.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__namespace.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__namespace.Suspense : SafeFragment;
-    const ResolvedCatchBoundary = routeErrorComponent ? 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: routeErrorComponent,
-      onCatch: () => {
-        warning(false, `Error in route match: ${matchId}`);
-      }
-    }, /*#__PURE__*/React__namespace.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__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!');
+  function trimPathRight(path) {
+    return path === '/' ? path : path.replace(/\/{1,}$/, '');
   }
-  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;
+  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__namespace.createElement(Match, {
-      matchId: childMatchId
-    });
-  });
-  function useMatchRoute() {
-    useRouterState({
-      select: s => [s.location, s.resolvedLocation]
-    });
-    const {
-      matchRoute
-    } = useRouter();
-    return React__namespace.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__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?`);
+    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__namespace.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';
       }
-    });
-  }
-
-  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  if (typeof document !== 'undefined') {
-    if (window.__TSR_ROUTER_CONTEXT__) {
-      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
-    } else {
-      window.__TSR_ROUTER_CONTEXT__ = exports.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__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
-    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
-      value: router
-    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
-    if (router.options.Wrap) {
-      return /*#__PURE__*/React__namespace.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__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) {
-          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__ || exports.routerContext : exports.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('/'));
-  }
-  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;
-    }));
+      return segment.value;
+    }));
   }
   function matchPathname(basepath, currentPathname, matchLocation) {
     const pathParams = matchByPath(basepath, currentPathname, matchLocation);
@@ -1544,98 +1188,463 @@
       } 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__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 pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.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__namespace.Suspense : SafeFragment;
+    const ResolvedCatchBoundary = routeErrorComponent ? 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: routeErrorComponent,
+      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;
+      }
+      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() {
+    useRouterState({
+      select: s => [s.location, s.resolvedLocation]
+    });
+    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 removeUnderscores(s) {
+    if (s === rootRouteId) return s;
+    return s?.replace(/(^_|_$)/, '').replace(/(\/_|_\/)/, '/');
+  }
+  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);
+      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__namespace.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 = '/';
+  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  if (typeof document !== 'undefined') {
+    if (window.__TSR_ROUTER_CONTEXT__) {
+      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
+    } else {
+      window.__TSR_ROUTER_CONTEXT__ = exports.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__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
+    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
+      value: router
+    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.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__namespace.useTransition();
+    router.startReactTransition = startReactTransition;
+    React__namespace.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__ || exports.routerContext : exports.routerContext;
+    const value = React__namespace.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 {