@tanstack/react-router 1.7.1 → 1.8.0

package/build/esm/index.js

@@ -1,2874 +0,0 @@
-/**
- * @tanstack/react-router/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-import { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
-export * from '@tanstack/history';
-import invariant from 'tiny-invariant';
-export { default as invariant } from 'tiny-invariant';
-import warning from 'tiny-warning';
-export { default as warning } from 'tiny-warning';
-import * as React from 'react';
-import { useStore } from '@tanstack/react-store';
-import { Store } from '@tanstack/store';
-
-function CatchBoundary(props) {
-  const errorComponent = props.errorComponent ?? ErrorComponent;
-  return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
-    getResetKey: props.getResetKey,
-    onCatch: props.onCatch,
-    children: ({
-      error
-    }) => {
-      if (error) {
-        return /*#__PURE__*/React.createElement(errorComponent, {
-          error
-        });
-      }
-      return props.children;
-    }
-  });
-}
-class CatchBoundaryImpl extends React.Component {
-  state = {
-    error: null
-  };
-  static getDerivedStateFromProps(props) {
-    return {
-      resetKey: props.getResetKey()
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
-      this.setState({
-        error: null
-      });
-    }
-  }
-  componentDidCatch(error) {
-    console.error(error);
-    this.props.onCatch?.(error);
-  }
-  render() {
-    return this.props.children(this.state);
-  }
-}
-function ErrorComponent({
-  error
-}) {
-  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production');
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '.5rem',
-      maxWidth: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem'
-    }
-  }, /*#__PURE__*/React.createElement("strong", {
-    style: {
-      fontSize: '1rem'
-    }
-  }, "Something went wrong!"), /*#__PURE__*/React.createElement("button", {
-    style: {
-      appearance: 'none',
-      fontSize: '.6em',
-      border: '1px solid currentColor',
-      padding: '.1rem .2rem',
-      fontWeight: 'bold',
-      borderRadius: '.25rem'
-    },
-    onClick: () => setShow(d => !d)
-  }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '.25rem'
-    }
-  }), show ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
-    style: {
-      fontSize: '.7em',
-      border: '1px solid red',
-      borderRadius: '.25rem',
-      padding: '.3rem',
-      color: 'red',
-      overflow: 'auto'
-    }
-  }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
-}
-
-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 useRouter(opts) {
-  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
-  const value = React.useContext(resolvedContext);
-  warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
-  return value;
-}
-
-function useRouterState(opts) {
-  const contextRouter = useRouter({
-    warn: opts?.router === undefined
-  });
-  return useStore((opts?.router || contextRouter).__store, opts?.select);
-}
-
-// from https://stackoverflow.com/a/76458160
-
-// export type Expand<T> = T
-
-// type Compute<T> = { [K in keyof T]: T[K] } | never
-
-// type AllKeys<T> = T extends any ? keyof T : never
-
-// export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
-//   {
-//     [K in Keys]: T[Keys]
-//   } & {
-//     [K in AllKeys<T>]?: T extends any
-//       ? K extends keyof T
-//         ? T[K]
-//         : never
-//       : never
-//   }
-// >
-
-// // Sample types to merge
-// type TypeA = {
-//   shared: string
-//   onlyInA: string
-//   nested: {
-//     shared: string
-//     aProp: string
-//   }
-//   array: string[]
-// }
-
-// type TypeB = {
-//   shared: number
-//   onlyInB: number
-//   nested: {
-//     shared: number
-//     bProp: number
-//   }
-//   array: number[]
-// }
-
-// type TypeC = {
-//   shared: boolean
-//   onlyInC: boolean
-//   nested: {
-//     shared: boolean
-//     cProp: boolean
-//   }
-//   array: boolean[]
-// }
-
-// type Test = Expand<Assign<TypeA, TypeB>>
-
-// // 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';
-function last(arr) {
-  return arr[arr.length - 1];
-}
-function isFunction(d) {
-  return typeof d === 'function';
-}
-function functionalUpdate(updater, previous) {
-  if (isFunction(updater)) {
-    return updater(previous);
-  }
-  return updater;
-}
-function pick(parent, keys) {
-  return keys.reduce((obj, key) => {
-    obj[key] = parent[key];
-    return obj;
-  }, {});
-}
-
-/**
- * This function returns `prev` if `_next` is deeply equal.
- * If not, it will replace any deeply equal children of `b` with those of `a`.
- * This can be used for structural sharing between immutable JSON values for example.
- * Do not use this with signals
- */
-function replaceEqualDeep(prev, _next) {
-  if (prev === _next) {
-    return prev;
-  }
-  const next = _next;
-  const array = isPlainArray(prev) && isPlainArray(next);
-  if (array || isPlainObject(prev) && isPlainObject(next)) {
-    const prevItems = array ? prev : Object.keys(prev);
-    const prevSize = prevItems.length;
-    const nextItems = array ? next : Object.keys(next);
-    const nextSize = nextItems.length;
-    const copy = array ? [] : {};
-    let equalItems = 0;
-    for (let i = 0; i < nextSize; i++) {
-      const key = array ? i : nextItems[i];
-      if (!array && prev[key] === undefined && next[key] === undefined && prevItems.includes(key)) {
-        copy[key] = undefined;
-        equalItems++;
-      } else {
-        copy[key] = replaceEqualDeep(prev[key], next[key]);
-        if (copy[key] === prev[key] && prev[key] !== undefined) {
-          equalItems++;
-        }
-      }
-    }
-    return prevSize === nextSize && equalItems === prevSize ? prev : copy;
-  }
-  return next;
-}
-
-// Copied from: https://github.com/jonschlinkert/is-plain-object
-function isPlainObject(o) {
-  if (!hasObjectPrototype(o)) {
-    return false;
-  }
-
-  // If has modified constructor
-  const ctor = o.constructor;
-  if (typeof ctor === 'undefined') {
-    return true;
-  }
-
-  // If has modified prototype
-  const prot = ctor.prototype;
-  if (!hasObjectPrototype(prot)) {
-    return false;
-  }
-
-  // If constructor does not have an Object-specific method
-  if (!prot.hasOwnProperty('isPrototypeOf')) {
-    return false;
-  }
-
-  // Most likely a plain Object
-  return true;
-}
-function hasObjectPrototype(o) {
-  return Object.prototype.toString.call(o) === '[object Object]';
-}
-function isPlainArray(value) {
-  return Array.isArray(value) && value.length === Object.keys(value).length;
-}
-function deepEqual(a, b, partial = false) {
-  if (a === b) {
-    return true;
-  }
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (!partial && aKeys.length !== bKeys.length) {
-      return false;
-    }
-    return !bKeys.some(key => !(key in a) || !deepEqual(a[key], b[key], partial));
-  }
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return !a.some((item, index) => !deepEqual(item, b[index], partial));
-  }
-  return false;
-}
-function useStableCallback(fn) {
-  const fnRef = React.useRef(fn);
-  fnRef.current = fn;
-  const ref = React.useRef((...args) => fnRef.current(...args));
-  return ref.current;
-}
-function shallow(objA, objB) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
-    return false;
-  }
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-function escapeJSON(jsonString) {
-  return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
-  .replace(/'/g, "\\'") // Escape single quotes
-  .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 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') {
-    if (isServerSideError(match.error)) {
-      const deserializeError = router.options.errorSerializer?.deserialize ?? defaultDeserializeError;
-      throw deserializeError(match.error.data);
-    } else {
-      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,
-      fuzzy,
-      includeSearch,
-      ...rest
-    } = opts;
-    return matchRoute(rest, {
-      pending,
-      caseSensitive,
-      fuzzy,
-      includeSearch
-    });
-  }, []);
-}
-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 useLoaderDeps(opts) {
-  return useMatch({
-    ...opts,
-    select: s => {
-      return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
-    }
-  });
-}
-function useLoaderData(opts) {
-  return useMatch({
-    ...opts,
-    select: s => {
-      return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
-    }
-  });
-}
-function isServerSideError(error) {
-  if (!(typeof error === 'object' && error && 'data' in error)) return false;
-  if (!('__isServerError' in error && error.__isServerError)) return false;
-  if (!(typeof error.data === 'object' && error.data)) return false;
-  return error.__isServerError === true;
-}
-function defaultDeserializeError(serializedData) {
-  if ('name' in serializedData && 'message' in serializedData) {
-    const error = new Error(serializedData.message);
-    error.name = serializedData.name;
-    return error;
-  }
-  return serializedData.data;
-}
-
-// @ts-nocheck
-
-// qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
-
-function encode(obj, pfx) {
-  var k,
-    i,
-    tmp,
-    str = '';
-  for (k in obj) {
-    if ((tmp = obj[k]) !== void 0) {
-      if (Array.isArray(tmp)) {
-        for (i = 0; i < tmp.length; i++) {
-          str && (str += '&');
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
-        }
-      } else {
-        str && (str += '&');
-        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
-      }
-    }
-  }
-  return (pfx || '') + str;
-}
-function toValue(mix) {
-  if (!mix) return '';
-  var str = decodeURIComponent(mix);
-  if (str === 'false') return false;
-  if (str === 'true') return true;
-  return +str * 0 === 0 && +str + '' === str ? +str : str;
-}
-function decode(str) {
-  var tmp,
-    k,
-    out = {},
-    arr = str.split('&');
-  while (tmp = arr.shift()) {
-    tmp = tmp.split('=');
-    k = tmp.shift();
-    if (out[k] !== void 0) {
-      out[k] = [].concat(out[k], toValue(tmp.shift()));
-    } else {
-      out[k] = toValue(tmp.shift());
-    }
-  }
-  return out;
-}
-
-const defaultParseSearch = parseSearchWith(JSON.parse);
-const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
-function parseSearchWith(parser) {
-  return searchStr => {
-    if (searchStr.substring(0, 1) === '?') {
-      searchStr = searchStr.substring(1);
-    }
-    let query = decode(searchStr);
-
-    // Try to parse any query params that might be json
-    for (let key in query) {
-      const value = query[key];
-      if (typeof value === 'string') {
-        try {
-          query[key] = parser(value);
-        } catch (err) {
-          //
-        }
-      }
-    }
-    return query;
-  };
-}
-function stringifySearchWith(stringify, parser) {
-  function stringifyValue(val) {
-    if (typeof val === 'object' && val !== null) {
-      try {
-        return stringify(val);
-      } catch (err) {
-        // silent
-      }
-    } else if (typeof val === 'string' && typeof parser === 'function') {
-      try {
-        // Check if it's a valid parseable string.
-        // If it is, then stringify it again.
-        parser(val);
-        return stringify(val);
-      } catch (err) {
-        // silent
-      }
-    }
-    return val;
-  }
-  return search => {
-    search = {
-      ...search
-    };
-    if (search) {
-      Object.keys(search).forEach(key => {
-        const val = search[key];
-        if (typeof val === 'undefined' || val === undefined) {
-          delete search[key];
-        } else {
-          search[key] = stringifyValue(val);
-        }
-      });
-    }
-    const searchStr = encode(search).toString();
-    return searchStr ? `?${searchStr}` : '';
-  };
-}
-
-const useTransition = React.useTransition || (() => [false, cb => {
-  cb();
-}]);
-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 mountLoadCount = React.useRef(0);
-  const router = useRouter();
-  const routerState = useRouterState({
-    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-  });
-  const [isTransitioning, startReactTransition] = 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 (React.useTransition ? 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__ && !mountLoadCount.current) {
-      mountLoadCount.current++;
-      tryLoad();
-    }
-  }, []);
-  return null;
-}
-function getRouteMatch(state, id) {
-  return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
-}
-
-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)
-
-  if (matchLocation.to && !pathParams) {
-    return;
-  }
-  return pathParams ?? {};
-}
-function removeBasepath(basepath, pathname) {
-  return basepath != '/' ? pathname.substring(basepath.length) : pathname;
-}
-function matchByPath(basepath, from, matchLocation) {
-  // Remove the base path from the pathname
-  from = removeBasepath(basepath, from);
-  // Default to to $ (wildcard)
-  const to = `${matchLocation.to ?? '$'}`;
-  // Parse the from and to
-  const baseSegments = parsePathname(from);
-  const routeSegments = parsePathname(to);
-  if (!from.startsWith('/')) {
-    baseSegments.unshift({
-      type: 'pathname',
-      value: '/'
-    });
-  }
-  if (!to.startsWith('/')) {
-    routeSegments.unshift({
-      type: 'pathname',
-      value: '/'
-    });
-  }
-  const params = {};
-  let isMatch = (() => {
-    for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
-      const baseSegment = baseSegments[i];
-      const routeSegment = routeSegments[i];
-      const isLastBaseSegment = i >= baseSegments.length - 1;
-      const isLastRouteSegment = i >= routeSegments.length - 1;
-      if (routeSegment) {
-        if (routeSegment.type === 'wildcard') {
-          if (baseSegment?.value) {
-            const _splat = joinPaths(baseSegments.slice(i).map(d => d.value));
-            // TODO: Deprecate *
-            params['*'] = _splat;
-            params['_splat'] = _splat;
-            return true;
-          }
-          return false;
-        }
-        if (routeSegment.type === 'pathname') {
-          if (routeSegment.value === '/' && !baseSegment?.value) {
-            return true;
-          }
-          if (baseSegment) {
-            if (matchLocation.caseSensitive) {
-              if (routeSegment.value !== baseSegment.value) {
-                return false;
-              }
-            } else if (routeSegment.value.toLowerCase() !== baseSegment.value.toLowerCase()) {
-              return false;
-            }
-          }
-        }
-        if (!baseSegment) {
-          return false;
-        }
-        if (routeSegment.type === 'param') {
-          if (baseSegment?.value === '/') {
-            return false;
-          }
-          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;
-}
-
-// Detect if we're in the DOM
-
-function redirect(opts) {
-  opts.isRedirect = true;
-  if (opts.throw) {
-    throw opts;
-  }
-  return opts;
-}
-function isRedirect(obj) {
-  return !!obj?.isRedirect;
-}
-
-// import warning from 'tiny-warning'
-
-//
-
-const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-class Router {
-  // Option-independent properties
-  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
-  resetNextScroll = true;
-  navigateTimeout = null;
-  latestLoadPromise = Promise.resolve();
-  subscribers = new Set();
-  injectedHtml = [];
-
-  // Must build in constructor
-
-  constructor(options) {
-    this.update({
-      defaultPreloadDelay: 50,
-      defaultPendingMs: 1000,
-      defaultPendingMinMs: 500,
-      context: undefined,
-      ...options,
-      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
-      parseSearch: options?.parseSearch ?? defaultParseSearch
-    });
-  }
-
-  // These are default implementations that can optionally be overridden
-  // by the router provider once rendered. We provide these so that the
-  // router can be used in a non-react environment if necessary
-  startReactTransition = fn => fn();
-  update = newOptions => {
-    const previousOptions = this.options;
-    this.options = {
-      ...this.options,
-      ...newOptions
-    };
-    if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
-      if (newOptions.basepath === undefined || newOptions.basepath === '' || newOptions.basepath === '/') {
-        this.basepath = '/';
-      } else {
-        this.basepath = `/${trimPath(newOptions.basepath)}`;
-      }
-    }
-    if (!this.history || this.options.history && this.options.history !== this.history) {
-      this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory({
-        initialEntries: [this.options.basepath || '/']
-      }));
-      this.latestLocation = this.parseLocation();
-    }
-    if (this.options.routeTree !== this.routeTree) {
-      this.routeTree = this.options.routeTree;
-      this.buildRouteTree();
-    }
-    if (!this.__store) {
-      this.__store = new Store(getInitialRouterState(this.latestLocation), {
-        onUpdate: () => {
-          this.__store.state = {
-            ...this.state,
-            status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
-          };
-        }
-      });
-    }
-  };
-  get state() {
-    return this.__store.state;
-  }
-  buildRouteTree = () => {
-    this.routesById = {};
-    this.routesByPath = {};
-    const notFoundRoute = this.options.notFoundRoute;
-    if (notFoundRoute) {
-      notFoundRoute.init({
-        originalIndex: 99999999999
-      });
-      this.routesById[notFoundRoute.id] = notFoundRoute;
-    }
-    const recurseRoutes = childRoutes => {
-      childRoutes.forEach((childRoute, i) => {
-        childRoute.init({
-          originalIndex: i
-        });
-        const existingRoute = this.routesById[childRoute.id];
-        invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
-        this.routesById[childRoute.id] = childRoute;
-        if (!childRoute.isRoot && childRoute.path) {
-          const trimmedFullPath = trimPathRight(childRoute.fullPath);
-          if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
-            this.routesByPath[trimmedFullPath] = childRoute;
-          }
-        }
-        const children = childRoute.children;
-        if (children?.length) {
-          recurseRoutes(children);
-        }
-      });
-    };
-    recurseRoutes([this.routeTree]);
-    const scoredRoutes = [];
-    Object.values(this.routesById).forEach((d, i) => {
-      if (d.isRoot || !d.path) {
-        return;
-      }
-      const trimmed = trimPathLeft(d.fullPath);
-      const parsed = parsePathname(trimmed);
-      while (parsed.length > 1 && parsed[0]?.value === '/') {
-        parsed.shift();
-      }
-      const scores = parsed.map(d => {
-        if (d.value === '/') {
-          return 0.75;
-        }
-        if (d.type === 'param') {
-          return 0.5;
-        }
-        if (d.type === 'wildcard') {
-          return 0.25;
-        }
-        return 1;
-      });
-      scoredRoutes.push({
-        child: d,
-        trimmed,
-        parsed,
-        index: i,
-        scores
-      });
-    });
-    this.flatRoutes = scoredRoutes.sort((a, b) => {
-      const minLength = Math.min(a.scores.length, b.scores.length);
-
-      // Sort by min available score
-      for (let i = 0; i < minLength; i++) {
-        if (a.scores[i] !== b.scores[i]) {
-          return b.scores[i] - a.scores[i];
-        }
-      }
-
-      // Sort by length of score
-      if (a.scores.length !== b.scores.length) {
-        return b.scores.length - a.scores.length;
-      }
-
-      // Sort by min available parsed value
-      for (let i = 0; i < minLength; i++) {
-        if (a.parsed[i].value !== b.parsed[i].value) {
-          return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
-        }
-      }
-
-      // Sort by original index
-      return a.index - b.index;
-    }).map((d, i) => {
-      d.child.rank = i;
-      return d.child;
-    });
-  };
-  subscribe = (eventType, fn) => {
-    const listener = {
-      eventType,
-      fn
-    };
-    this.subscribers.add(listener);
-    return () => {
-      this.subscribers.delete(listener);
-    };
-  };
-  emit = routerEvent => {
-    this.subscribers.forEach(listener => {
-      if (listener.eventType === routerEvent.type) {
-        listener.fn(routerEvent);
-      }
-    });
-  };
-  checkLatest = promise => {
-    return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
-  };
-  parseLocation = previousLocation => {
-    const parse = ({
-      pathname,
-      search,
-      hash,
-      state
-    }) => {
-      const parsedSearch = this.options.parseSearch(search);
-      return {
-        pathname: pathname,
-        searchStr: search,
-        search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-        hash: hash.split('#').reverse()[0] ?? '',
-        href: `${pathname}${search}${hash}`,
-        state: replaceEqualDeep(previousLocation?.state, state)
-      };
-    };
-    const location = parse(this.history.location);
-    let {
-      __tempLocation,
-      __tempKey
-    } = location.state;
-    if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
-      // Sync up the location keys
-      const parsedTempLocation = parse(__tempLocation);
-      parsedTempLocation.state.key = location.state.key;
-      delete parsedTempLocation.state.__tempLocation;
-      return {
-        ...parsedTempLocation,
-        maskedLocation: location
-      };
-    }
-    return location;
-  };
-  resolvePathWithBase = (from, path) => {
-    return resolvePath(this.basepath, from, cleanPath(path));
-  };
-  get looseRoutesById() {
-    return this.routesById;
-  }
-  matchRoutes = (pathname, locationSearch, opts) => {
-    let routeParams = {};
-    let foundRoute = this.flatRoutes.find(route => {
-      const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
-        to: route.fullPath,
-        caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
-        fuzzy: true
-      });
-      if (matchedParams) {
-        routeParams = matchedParams;
-        return true;
-      }
-      return false;
-    });
-    let routeCursor = foundRoute || this.routesById['__root__'];
-    let matchedRoutes = [routeCursor];
-
-    // Check to see if the route needs a 404 entry
-    if (
-    // If we found a route, and it's not an index route and we have left over path
-    (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
-    // Or if we didn't find a route and we have left over path
-    trimPathRight(pathname)) &&
-    // And we have a 404 route configured
-    this.options.notFoundRoute) {
-      matchedRoutes.push(this.options.notFoundRoute);
-    }
-    while (routeCursor?.parentRoute) {
-      routeCursor = routeCursor.parentRoute;
-      if (routeCursor) matchedRoutes.unshift(routeCursor);
-    }
-
-    // Existing matches are matches that are already loaded along with
-    // pending matches that are still loading
-
-    const parseErrors = matchedRoutes.map(route => {
-      let parsedParamsError;
-      if (route.options.parseParams) {
-        try {
-          const parsedParams = route.options.parseParams(routeParams);
-          // Add the parsed params to the accumulated params bag
-          Object.assign(routeParams, parsedParams);
-        } catch (err) {
-          parsedParamsError = new PathParamError(err.message, {
-            cause: err
-          });
-          if (opts?.throwOnError) {
-            throw parsedParamsError;
-          }
-          return parsedParamsError;
-        }
-      }
-      return;
-    });
-    const matches = [];
-    matchedRoutes.forEach((route, index) => {
-      // Take each matched route and resolve + validate its search params
-      // This has to happen serially because each route's search params
-      // can depend on the parent route's search params
-      // It must also happen before we create the match so that we can
-      // pass the search params to the route's potential key function
-      // which is used to uniquely identify the route match in state
-
-      const parentMatch = matches[index - 1];
-      const [preMatchSearch, searchError] = (() => {
-        // Validate the search params and stabilize them
-        const parentSearch = parentMatch?.search ?? locationSearch;
-        try {
-          const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
-          let search = validator?.(parentSearch) ?? {};
-          return [{
-            ...parentSearch,
-            ...search
-          }, undefined];
-        } catch (err) {
-          const searchError = new SearchParamError(err.message, {
-            cause: err
-          });
-          if (opts?.throwOnError) {
-            throw searchError;
-          }
-          return [parentSearch, searchError];
-        }
-      })();
-
-      // This is where we need to call route.options.loaderDeps() to get any additional
-      // deps that the route's loader function might need to run. We need to do this
-      // before we create the match so that we can pass the deps to the route's
-      // potential key function which is used to uniquely identify the route match in state
-
-      const loaderDeps = route.options.loaderDeps?.({
-        search: preMatchSearch
-      }) ?? '';
-      const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
-      const interpolatedPath = interpolatePath(route.fullPath, routeParams);
-      const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
-
-      // Waste not, want not. If we already have a match for this route,
-      // reuse it. This is important for layout routes, which might stick
-      // around between navigation actions that only change leaf routes.
-      const existingMatch = getRouteMatch(this.state, matchId);
-      const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
-
-      // Create a fresh route match
-      const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
-      const match = existingMatch ? {
-        ...existingMatch,
-        cause
-      } : {
-        id: matchId,
-        routeId: route.id,
-        params: routeParams,
-        pathname: joinPaths([this.basepath, interpolatedPath]),
-        updatedAt: Date.now(),
-        search: {},
-        searchError: undefined,
-        status: hasLoaders ? 'pending' : 'success',
-        showPending: false,
-        isFetching: false,
-        error: undefined,
-        paramsError: parseErrors[index],
-        loadPromise: Promise.resolve(),
-        routeContext: undefined,
-        context: undefined,
-        abortController: new AbortController(),
-        fetchCount: 0,
-        cause,
-        loaderDeps,
-        invalid: false,
-        preload: false
-      };
-
-      // Regardless of whether we're reusing an existing match or creating
-      // a new one, we need to update the match's search params
-      match.search = replaceEqualDeep(match.search, preMatchSearch);
-      // And also update the searchError if there is one
-      match.searchError = searchError;
-      matches.push(match);
-    });
-    return matches;
-  };
-  cancelMatch = id => {
-    getRouteMatch(this.state, id)?.abortController?.abort();
-  };
-  cancelMatches = () => {
-    this.state.pendingMatches?.forEach(match => {
-      this.cancelMatch(match.id);
-    });
-  };
-  buildLocation = opts => {
-    const build = (dest = {}, matches) => {
-      const relevantMatches = this.state.pendingMatches || this.state.matches;
-      const fromSearch = relevantMatches[relevantMatches.length - 1]?.search || this.latestLocation.search;
-      let pathname = this.resolvePathWithBase(dest.from ?? this.latestLocation.pathname, `${dest.to ?? ''}`);
-      const fromMatches = this.matchRoutes(this.latestLocation.pathname, fromSearch);
-      const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
-      const prevParams = {
-        ...last(fromMatches)?.params
-      };
-      let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-      if (nextParams) {
-        matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
-          nextParams = {
-            ...nextParams,
-            ...fn(nextParams)
-          };
-        });
-      }
-      pathname = interpolatePath(pathname, nextParams ?? {});
-      const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-      const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-      // Pre filters first
-      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
-
-      // Then the link/navigate function
-      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-      : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-      : {};
-
-      // Then post filters
-      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-      const search = replaceEqualDeep(fromSearch, postFilteredSearch);
-      const searchStr = this.options.stringifySearch(search);
-      const hash = dest.hash === true ? this.latestLocation.hash : dest.hash ? functionalUpdate(dest.hash, this.latestLocation.hash) : undefined;
-      const hashStr = hash ? `#${hash}` : '';
-      let nextState = dest.state === true ? this.latestLocation.state : dest.state ? functionalUpdate(dest.state, this.latestLocation.state) : this.latestLocation.state;
-      nextState = replaceEqualDeep(this.latestLocation.state, nextState);
-      return {
-        pathname,
-        search,
-        searchStr,
-        state: nextState,
-        hash: hash ?? '',
-        href: `${pathname}${searchStr}${hashStr}`,
-        unmaskOnReload: dest.unmaskOnReload
-      };
-    };
-    const buildWithMatches = (dest = {}, maskedDest) => {
-      let next = build(dest);
-      let maskedNext = maskedDest ? build(maskedDest) : undefined;
-      if (!maskedNext) {
-        let params = {};
-        let foundMask = this.options.routeMasks?.find(d => {
-          const match = matchPathname(this.basepath, next.pathname, {
-            to: d.from,
-            caseSensitive: false,
-            fuzzy: false
-          });
-          if (match) {
-            params = match;
-            return true;
-          }
-          return false;
-        });
-        if (foundMask) {
-          maskedDest = {
-            ...pick(opts, ['from']),
-            ...foundMask,
-            params
-          };
-          maskedNext = build(maskedDest);
-        }
-      }
-      const nextMatches = this.matchRoutes(next.pathname, next.search);
-      const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
-      const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
-      const final = build(dest, nextMatches);
-      if (maskedFinal) {
-        final.maskedLocation = maskedFinal;
-      }
-      return final;
-    };
-    if (opts.mask) {
-      return buildWithMatches(opts, {
-        ...pick(opts, ['from']),
-        ...opts.mask
-      });
-    }
-    return buildWithMatches(opts);
-  };
-  commitLocation = async ({
-    startTransition,
-    ...next
-  }) => {
-    if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
-    const isSameUrl = this.latestLocation.href === next.href;
-
-    // If the next urls are the same and we're not replacing,
-    // do nothing
-    if (!isSameUrl || !next.replace) {
-      let {
-        maskedLocation,
-        ...nextHistory
-      } = next;
-      if (maskedLocation) {
-        nextHistory = {
-          ...maskedLocation,
-          state: {
-            ...maskedLocation.state,
-            __tempKey: undefined,
-            __tempLocation: {
-              ...nextHistory,
-              search: nextHistory.searchStr,
-              state: {
-                ...nextHistory.state,
-                __tempKey: undefined,
-                __tempLocation: undefined,
-                key: undefined
-              }
-            }
-          }
-        };
-        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
-          nextHistory.state.__tempKey = this.tempLocationKey;
-        }
-      }
-      const apply = () => {
-        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
-      };
-      if (startTransition ?? true) {
-        this.startReactTransition(apply);
-      } else {
-        apply();
-      }
-    }
-    this.resetNextScroll = next.resetScroll ?? true;
-    return this.latestLoadPromise;
-  };
-  buildAndCommitLocation = ({
-    replace,
-    resetScroll,
-    startTransition,
-    ...rest
-  } = {}) => {
-    const location = this.buildLocation(rest);
-    return this.commitLocation({
-      ...location,
-      startTransition,
-      replace,
-      resetScroll
-    });
-  };
-  navigate = ({
-    from,
-    to,
-    ...rest
-  }) => {
-    // If this link simply reloads the current route,
-    // make sure it has a new key so it will trigger a data refresh
-
-    // If this `to` is a valid external URL, return
-    // null for LinkUtils
-    const toString = String(to);
-    // const fromString = from !== undefined ? String(from) : from
-    let isExternal;
-    try {
-      new URL(`${toString}`);
-      isExternal = true;
-    } catch (e) {}
-    invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
-    return this.buildAndCommitLocation({
-      ...rest,
-      from,
-      to
-      // to: toString,
-    });
-  };
-  loadMatches = async ({
-    checkLatest,
-    matches,
-    preload
-  }) => {
-    let latestPromise;
-    let firstBadMatchIndex;
-    const updateMatch = match => {
-      // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
-      const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
-      const isMatched = this.state.matches.find(d => d.id === match.id);
-      const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
-      this.__store.setState(s => ({
-        ...s,
-        [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
-      }));
-    };
-
-    // Check each match middleware to see if the route can be accessed
-    try {
-      for (let [index, match] of matches.entries()) {
-        const parentMatch = matches[index - 1];
-        const route = this.looseRoutesById[match.routeId];
-        const abortController = new AbortController();
-        const handleErrorAndRedirect = (err, code) => {
-          err.routerCode = code;
-          firstBadMatchIndex = firstBadMatchIndex ?? index;
-          if (isRedirect(err)) {
-            throw err;
-          }
-          try {
-            route.options.onError?.(err);
-          } catch (errorHandlerErr) {
-            err = errorHandlerErr;
-            if (isRedirect(errorHandlerErr)) {
-              throw errorHandlerErr;
-            }
-          }
-          matches[index] = match = {
-            ...match,
-            error: err,
-            status: 'error',
-            updatedAt: Date.now(),
-            abortController: new AbortController()
-          };
-        };
-        try {
-          if (match.paramsError) {
-            handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
-          }
-          if (match.searchError) {
-            handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
-          }
-          const parentContext = parentMatch?.context ?? this.options.context ?? {};
-          const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-          const pendingPromise = typeof pendingMs === 'number' && pendingMs <= 0 ? Promise.resolve() : new Promise(r => setTimeout(r, pendingMs));
-          const beforeLoadContext = (await route.options.beforeLoad?.({
-            search: match.search,
-            abortController,
-            params: match.params,
-            preload: !!preload,
-            context: parentContext,
-            location: this.state.location,
-            // TOOD: just expose state and router, etc
-            navigate: opts => this.navigate({
-              ...opts,
-              from: match.pathname
-            }),
-            buildLocation: this.buildLocation,
-            cause: preload ? 'preload' : match.cause
-          })) ?? {};
-          if (isRedirect(beforeLoadContext)) {
-            throw beforeLoadContext;
-          }
-          const context = {
-            ...parentContext,
-            ...beforeLoadContext
-          };
-          matches[index] = match = {
-            ...match,
-            routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
-            context: replaceEqualDeep(match.context, context),
-            abortController,
-            pendingPromise
-          };
-        } catch (err) {
-          handleErrorAndRedirect(err, 'BEFORE_LOAD');
-          break;
-        }
-      }
-    } catch (err) {
-      if (isRedirect(err)) {
-        if (!preload) this.navigate(err);
-        return matches;
-      }
-      throw err;
-    }
-    const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
-    const matchPromises = [];
-    validResolvedMatches.forEach((match, index) => {
-      matchPromises.push(new Promise(async resolve => {
-        const parentMatchPromise = matchPromises[index - 1];
-        const route = this.looseRoutesById[match.routeId];
-        const handleErrorAndRedirect = err => {
-          if (isRedirect(err)) {
-            if (!preload) {
-              this.navigate(err);
-            }
-            return true;
-          }
-          return false;
-        };
-        let loadPromise;
-        matches[index] = match = {
-          ...match,
-          showPending: false
-        };
-        let didShowPending = false;
-        const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-        const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-        const shouldPending = !preload && typeof pendingMs === 'number' && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
-        const loaderContext = {
-          params: match.params,
-          deps: match.loaderDeps,
-          preload: !!preload,
-          parentMatchPromise,
-          abortController: match.abortController,
-          context: match.context,
-          location: this.state.location,
-          navigate: opts => this.navigate({
-            ...opts,
-            from: match.pathname
-          }),
-          cause: preload ? 'preload' : match.cause
-        };
-        const fetch = async () => {
-          if (match.isFetching) {
-            loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
-          } else {
-            // If the user doesn't want the route to reload, just
-            // resolve with the existing loader data
-
-            if (match.fetchCount && match.status === 'success') {
-              resolve();
-            }
-
-            // Otherwise, load the route
-            matches[index] = match = {
-              ...match,
-              isFetching: true,
-              fetchCount: match.fetchCount + 1
-            };
-            const componentsPromise = Promise.all(componentTypes.map(async type => {
-              const component = route.options[type];
-              if (component?.preload) {
-                await component.preload();
-              }
-            }));
-            const loaderPromise = route.options.loader?.(loaderContext);
-            loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
-          }
-          matches[index] = match = {
-            ...match,
-            loadPromise
-          };
-          updateMatch(match);
-          try {
-            const loaderData = await loadPromise;
-            if (latestPromise = checkLatest()) return await latestPromise;
-            if (isRedirect(loaderData)) {
-              if (handleErrorAndRedirect(loaderData)) return;
-            }
-            if (didShowPending && pendingMinMs) {
-              await new Promise(r => setTimeout(r, pendingMinMs));
-            }
-            if (latestPromise = checkLatest()) return await latestPromise;
-            matches[index] = match = {
-              ...match,
-              error: undefined,
-              status: 'success',
-              isFetching: false,
-              updatedAt: Date.now(),
-              loaderData,
-              loadPromise: undefined
-            };
-          } catch (error) {
-            if (latestPromise = checkLatest()) return await latestPromise;
-            if (handleErrorAndRedirect(error)) return;
-            try {
-              route.options.onError?.(error);
-            } catch (onErrorError) {
-              error = onErrorError;
-              if (handleErrorAndRedirect(onErrorError)) return;
-            }
-            matches[index] = match = {
-              ...match,
-              error,
-              status: 'error',
-              isFetching: false
-            };
-          }
-          updateMatch(match);
-        };
-
-        // This is where all of the stale-while-revalidate magic happens
-        const age = Date.now() - match.updatedAt;
-        let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
-        : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
-
-        // Default to reloading the route all the time
-        let shouldReload;
-        const shouldReloadOption = route.options.shouldReload;
-
-        // Allow shouldReload to get the last say,
-        // if provided.
-        shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
-        matches[index] = match = {
-          ...match,
-          preload: !!preload && !this.state.matches.find(d => d.id === match.id)
-        };
-        if (match.status !== 'success') {
-          // If we need to potentially show the pending component,
-          // start a timer to show it after the pendingMs
-          if (shouldPending) {
-            match.pendingPromise?.then(async () => {
-              if (latestPromise = checkLatest()) return latestPromise;
-              didShowPending = true;
-              matches[index] = match = {
-                ...match,
-                showPending: true
-              };
-              updateMatch(match);
-              resolve();
-            });
-          }
-
-          // Critical Fetching, we need to await
-          await fetch();
-        } else if (match.invalid || (shouldReload ?? age > staleAge)) {
-          // Background Fetching, no need to wait
-          fetch();
-        }
-        resolve();
-      }));
-    });
-    await Promise.all(matchPromises);
-    return matches;
-  };
-  invalidate = () => {
-    const invalidate = d => ({
-      ...d,
-      invalid: true
-    });
-    this.__store.setState(s => ({
-      ...s,
-      matches: s.matches.map(invalidate),
-      cachedMatches: s.cachedMatches.map(invalidate),
-      pendingMatches: s.pendingMatches?.map(invalidate)
-    }));
-    this.load();
-  };
-  load = async () => {
-    const promise = new Promise(async (resolve, reject) => {
-      const next = this.latestLocation;
-      const prevLocation = this.state.resolvedLocation;
-      const pathDidChange = prevLocation.href !== next.href;
-      let latestPromise;
-
-      // Cancel any pending matches
-      this.cancelMatches();
-      this.emit({
-        type: 'onBeforeLoad',
-        fromLocation: prevLocation,
-        toLocation: next,
-        pathChanged: pathDidChange
-      });
-      let pendingMatches;
-      const previousMatches = this.state.matches;
-      this.__store.batch(() => {
-        this.cleanCache();
-
-        // Match the routes
-        pendingMatches = this.matchRoutes(next.pathname, next.search, {
-          debug: true
-        });
-
-        // Ingest the new matches
-        // If a cached moved to pendingMatches, remove it from cachedMatches
-        this.__store.setState(s => ({
-          ...s,
-          isLoading: true,
-          location: next,
-          pendingMatches,
-          cachedMatches: s.cachedMatches.filter(d => {
-            return !pendingMatches.find(e => e.id === d.id);
-          })
-        }));
-      });
-      try {
-        try {
-          // Load the matches
-          await this.loadMatches({
-            matches: pendingMatches,
-            checkLatest: () => this.checkLatest(promise)
-          });
-        } catch (err) {
-          // swallow this error, since we'll display the
-          // errors on the route components
-        }
-
-        // Only apply the latest transition
-        if (latestPromise = this.checkLatest(promise)) {
-          return latestPromise;
-        }
-        const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
-        const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
-        const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
-
-        // Commit the pending matches. If a previous match was
-        // removed, place it in the cachedMatches
-        this.__store.batch(() => {
-          this.__store.setState(s => ({
-            ...s,
-            isLoading: false,
-            matches: s.pendingMatches,
-            pendingMatches: undefined,
-            cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
-          }));
-          this.cleanCache();
-        })
-
-        //
-        ;
-        [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
-          matches.forEach(match => {
-            this.looseRoutesById[match.routeId].options[hook]?.(match);
-          });
-        });
-        this.emit({
-          type: 'onLoad',
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange
-        });
-        resolve();
-      } catch (err) {
-        // Only apply the latest transition
-        if (latestPromise = this.checkLatest(promise)) {
-          return latestPromise;
-        }
-        reject(err);
-      }
-    });
-    this.latestLoadPromise = promise;
-    return this.latestLoadPromise;
-  };
-  cleanCache = () => {
-    // This is where all of the garbage collection magic happens
-    this.__store.setState(s => {
-      return {
-        ...s,
-        cachedMatches: s.cachedMatches.filter(d => {
-          const route = this.looseRoutesById[d.routeId];
-          if (!route.options.loader) {
-            return false;
-          }
-
-          // If the route was preloaded, use the preloadGcTime
-          // otherwise, use the gcTime
-          const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1000;
-          return d.status !== 'error' && Date.now() - d.updatedAt < gcTime;
-        })
-      };
-    });
-  };
-  preloadRoute = async (navigateOpts = this.state.location) => {
-    let next = this.buildLocation(navigateOpts);
-    let matches = this.matchRoutes(next.pathname, next.search, {
-      throwOnError: true
-    });
-    const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
-    this.__store.batch(() => {
-      matches.forEach(match => {
-        if (!loadedMatchIds[match.id]) {
-          this.__store.setState(s => ({
-            ...s,
-            cachedMatches: [...s.cachedMatches, match]
-          }));
-        }
-      });
-    });
-    matches = await this.loadMatches({
-      matches,
-      preload: true,
-      checkLatest: () => undefined
-    });
-    return matches;
-  };
-  matchRoute = (location, opts) => {
-    location = {
-      ...location,
-      to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
-    };
-    const next = this.buildLocation(location);
-    if (opts?.pending && this.state.status !== 'pending') {
-      return false;
-    }
-    const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-    if (!baseLocation) {
-      return false;
-    }
-    const match = matchPathname(this.basepath, baseLocation.pathname, {
-      ...opts,
-      to: next.pathname
-    });
-    if (!match) {
-      return false;
-    }
-    if (match && (opts?.includeSearch ?? true)) {
-      return deepEqual(baseLocation.search, next.search, true) ? match : false;
-    }
-    return match;
-  };
-  injectHtml = async html => {
-    this.injectedHtml.push(html);
-  };
-  dehydrateData = (key, getData) => {
-    if (typeof document === 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-      this.injectHtml(async () => {
-        const id = `__TSR_DEHYDRATED__${strKey}`;
-        const data = typeof getData === 'function' ? await getData() : getData;
-        return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
-          ;(() => {
-            var el = document.getElementById('${id}')
-            el.parentElement.removeChild(el)
-          })()
-          </script>`;
-      });
-      return () => this.hydrateData(key);
-    }
-    return () => undefined;
-  };
-  hydrateData = key => {
-    if (typeof document !== 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-      return window[`__TSR_DEHYDRATED__${strKey}`];
-    }
-    return undefined;
-  };
-  dehydrate = () => {
-    const pickError = this.options.errorSerializer?.serialize ?? defaultSerializeError;
-    return {
-      state: {
-        dehydratedMatches: this.state.matches.map(d => ({
-          ...pick(d, ['id', 'status', 'updatedAt', 'loaderData']),
-          // If an error occurs server-side during SSRing,
-          // send a small subset of the error to the client
-          error: d.error ? {
-            data: pickError(d.error),
-            __isServerError: true
-          } : undefined
-        }))
-      }
-    };
-  };
-  hydrate = async __do_not_use_server_ctx => {
-    let _ctx = __do_not_use_server_ctx;
-    // Client hydrates from window
-    if (typeof document !== 'undefined') {
-      _ctx = window.__TSR_DEHYDRATED__;
-    }
-    invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
-    const ctx = _ctx;
-    this.dehydratedData = ctx.payload;
-    this.options.hydrate?.(ctx.payload);
-    const dehydratedState = ctx.router.state;
-    let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
-      const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
-      invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
-      if (dehydratedMatch) {
-        return {
-          ...match,
-          ...dehydratedMatch
-        };
-      }
-      return match;
-    });
-    this.__store.setState(s => {
-      return {
-        ...s,
-        matches: matches
-      };
-    });
-  };
-
-  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
-  //   state.matches
-  //     .find((d) => d.id === matchId)
-  //     ?.__promisesByKey[key]?.resolve(value)
-  // }
-}
-
-// A function that takes an import() argument which is a function and returns a new function that will
-// proxy arguments from the caller to the imported function, retaining all type
-// information along the way
-function lazyFn(fn, key) {
-  return async (...args) => {
-    const imported = await fn();
-    return imported[key || 'default'](...args);
-  };
-}
-class SearchParamError extends Error {}
-class PathParamError extends Error {}
-function getInitialRouterState(location) {
-  return {
-    isLoading: false,
-    isTransitioning: false,
-    status: 'idle',
-    resolvedLocation: {
-      ...location
-    },
-    location,
-    matches: [],
-    pendingMatches: [],
-    cachedMatches: [],
-    lastUpdated: Date.now()
-  };
-}
-function defaultSerializeError(err) {
-  if (err instanceof Error) return {
-    name: err.name,
-    message: err.message
-  };
-  return {
-    data: err
-  };
-}
-
-function defer(_promise, options) {
-  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 = {
-        data: (options?.serializeError ?? defaultSerializeError)(error),
-        __isServerError: true
-      };
-    });
-  }
-  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);
-    if (!state) throw new Error('Could not find dehydrated data');
-    promise = Promise.resolve(state.data);
-    promise.__deferredState = state;
-  }
-  if (state.status === 'pending') {
-    throw promise;
-  }
-  if (state.status === 'error') {
-    if (typeof document !== 'undefined') {
-      if (isServerSideError(state.error)) {
-        throw (router.options.errorSerializer?.deserialize ?? defaultDeserializeError)(state.error.data);
-      } else {
-        warning(false, "Encountered a server-side error that doesn't fit the expected shape");
-        throw state.error;
-      }
-    } else {
-      router.dehydrateData(key, state);
-      throw {
-        data: (router.options.errorSerializer?.serialize ?? defaultSerializeError)(state.error),
-        __isServerError: true
-      };
-    }
-  }
-  router.dehydrateData(key, state);
-  return [state.data];
-}
-function Await(props) {
-  const awaited = useAwaited(props);
-  return props.children(...awaited);
-}
-
-function useParams(opts) {
-  return useRouterState({
-    select: state => {
-      const params = last(getRenderedMatches(state))?.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
-
-// TODO: This is part of a future APi to move away from classes and
-// towards a more functional API. It's not ready yet.
-
-// type RouteApiInstance<
-//   TId extends RouteIds<RegisteredRouter['routeTree']>,
-//   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
-//   TFullSearchSchema extends Record<
-//     string,
-//     any
-//   > = TRoute['types']['fullSearchSchema'],
-//   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
-//   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
-//   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
-//   TLoaderData extends any = TRoute['types']['loaderData'],
-// > = {
-//   id: TId
-//   useMatch: <TSelected = TAllContext>(opts?: {
-//     select?: (s: TAllContext) => TSelected
-//   }) => TSelected
-
-//   useRouteContext: <TSelected = TAllContext>(opts?: {
-//     select?: (s: TAllContext) => TSelected
-//   }) => TSelected
-
-//   useSearch: <TSelected = TFullSearchSchema>(opts?: {
-//     select?: (s: TFullSearchSchema) => TSelected
-//   }) => TSelected
-
-//   useParams: <TSelected = TAllParams>(opts?: {
-//     select?: (s: TAllParams) => TSelected
-//   }) => TSelected
-
-//   useLoaderDeps: <TSelected = TLoaderDeps>(opts?: {
-//     select?: (s: TLoaderDeps) => TSelected
-//   }) => TSelected
-
-//   useLoaderData: <TSelected = TLoaderData>(opts?: {
-//     select?: (s: TLoaderData) => TSelected
-//   }) => TSelected
-// }
-
-// export function RouteApi_v2<
-//   TId extends RouteIds<RegisteredRouter['routeTree']>,
-//   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
-//   TFullSearchSchema extends Record<
-//     string,
-//     any
-//   > = TRoute['types']['fullSearchSchema'],
-//   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
-//   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
-//   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
-//   TLoaderData extends any = TRoute['types']['loaderData'],
-// >({
-//   id,
-// }: {
-//   id: TId
-// }): RouteApiInstance<
-//   TId,
-//   TRoute,
-//   TFullSearchSchema,
-//   TAllParams,
-//   TAllContext,
-//   TLoaderDeps,
-//   TLoaderData
-// > {
-//   return {
-//     id,
-
-//     useMatch: (opts) => {
-//       return useMatch({ ...opts, from: id })
-//     },
-
-//     useRouteContext: (opts) => {
-//       return useMatch({
-//         ...opts,
-//         from: id,
-//         select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-//       } as any)
-//     },
-
-//     useSearch: (opts) => {
-//       return useSearch({ ...opts, from: id } as any)
-//     },
-
-//     useParams: (opts) => {
-//       return useParams({ ...opts, from: id } as any)
-//     },
-
-//     useLoaderDeps: (opts) => {
-//       return useLoaderDeps({ ...opts, from: id } as any) as any
-//     },
-
-//     useLoaderData: (opts) => {
-//       return useLoaderData({ ...opts, from: id } as any) as any
-//     },
-//   }
-// }
-
-class RouteApi {
-  constructor({
-    id
-  }) {
-    this.id = id;
-  }
-  useMatch = opts => {
-    return useMatch({
-      select: opts?.select,
-      from: this.id
-    });
-  };
-  useRouteContext = opts => {
-    return useMatch({
-      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
-    });
-  };
-}
-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;
-
-    // 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;
-  };
-  updateLoader = options => {
-    Object.assign(this.options, options);
-    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'
-    });
-  }
-}
-
-class FileRoute {
-  constructor(path) {
-    this.path = path;
-  }
-  createRoute = options => {
-    const route = new Route(options);
-    route.isRoot = false;
-    return route;
-  };
-}
-function FileRouteLoader(_path) {
-  return loaderFn => loaderFn;
-}
-
-function lazyRouteComponent(importer, exportName) {
-  let loadPromise;
-  const load = () => {
-    if (!loadPromise) {
-      loadPromise = importer();
-    }
-    return loadPromise;
-  };
-  const lazyComp = /*#__PURE__*/React.lazy(async () => {
-    const moduleExports = await load();
-    const comp = moduleExports[exportName ?? 'default'];
-    return {
-      default: comp
-    };
-  });
-  lazyComp.preload = load;
-  return lazyComp;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const preloadWarning = 'Error preloading route! ☝️';
-function useLinkProps(options) {
-  const router = useRouter();
-  const matchPathname = useMatch({
-    strict: false,
-    select: s => s.pathname
-  });
-  const {
-    // custom props
-    children,
-    target,
-    activeProps = () => ({
-      className: 'active'
-    }),
-    inactiveProps = () => ({}),
-    activeOptions,
-    disabled,
-    hash,
-    search,
-    params,
-    to,
-    state,
-    mask,
-    preload: userPreload,
-    preloadDelay: userPreloadDelay,
-    replace,
-    startTransition,
-    resetScroll,
-    // element props
-    style,
-    className,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    ...rest
-  } = options;
-
-  // If this link simply reloads the current route,
-  // make sure it has a new key so it will trigger a data refresh
-
-  // If this `to` is a valid external URL, return
-  // null for LinkUtils
-
-  const dest = {
-    from: options.to ? matchPathname : undefined,
-    ...options
-  };
-  let type = 'internal';
-  try {
-    new URL(`${to}`);
-    type = 'external';
-  } catch {}
-  if (type === 'external') {
-    return {
-      href: to
-    };
-  }
-  const next = router.buildLocation(dest);
-  const preload = userPreload ?? router.options.defaultPreload;
-  const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
-  const isActive = useRouterState({
-    select: s => {
-      // Compare path/hash for matches
-      const currentPathSplit = s.location.pathname.split('/');
-      const nextPathSplit = next.pathname.split('/');
-      const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      // Combine the matches based on user router.options
-      const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
-      const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
-      const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
-
-      // The final "active" test
-      return pathTest && hashTest && searchTest;
-    }
-  });
-
-  // The click handler
-  const handleClick = e => {
-    if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-      e.preventDefault();
-
-      // All is well? Navigate!
-      router.commitLocation({
-        ...next,
-        replace,
-        resetScroll,
-        startTransition
-      });
-    }
-  };
-
-  // The click handler
-  const handleFocus = e => {
-    if (preload) {
-      router.preloadRoute(dest).catch(err => {
-        console.warn(err);
-        console.warn(preloadWarning);
-      });
-    }
-  };
-  const handleTouchStart = e => {
-    if (preload) {
-      router.preloadRoute(dest).catch(err => {
-        console.warn(err);
-        console.warn(preloadWarning);
-      });
-    }
-  };
-  const handleEnter = e => {
-    const target = e.target || {};
-    if (preload) {
-      if (target.preloadTimeout) {
-        return;
-      }
-      target.preloadTimeout = setTimeout(() => {
-        target.preloadTimeout = null;
-        router.preloadRoute(dest).catch(err => {
-          console.warn(err);
-          console.warn(preloadWarning);
-        });
-      }, preloadDelay);
-    }
-  };
-  const handleLeave = e => {
-    const target = e.target || {};
-    if (target.preloadTimeout) {
-      clearTimeout(target.preloadTimeout);
-      target.preloadTimeout = null;
-    }
-  };
-  const composeHandlers = handlers => e => {
-    if (e.persist) e.persist();
-    handlers.filter(Boolean).forEach(handler => {
-      if (e.defaultPrevented) return;
-      handler(e);
-    });
-  };
-
-  // Get the active props
-  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
-
-  // Get the inactive props
-  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
-  return {
-    ...resolvedActiveProps,
-    ...resolvedInactiveProps,
-    ...rest,
-    href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
-    onClick: composeHandlers([onClick, handleClick]),
-    onFocus: composeHandlers([onFocus, handleFocus]),
-    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
-    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
-    target,
-    style: {
-      ...style,
-      ...resolvedActiveProps.style,
-      ...resolvedInactiveProps.style
-    },
-    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
-    ...(disabled ? {
-      role: 'link',
-      'aria-disabled': true
-    } : undefined),
-    ['data-status']: isActive ? 'active' : undefined
-  };
-}
-const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const linkProps = useLinkProps(props);
-  return /*#__PURE__*/React.createElement("a", _extends({
-    ref: ref
-  }, linkProps, {
-    children: typeof props.children === 'function' ? props.children({
-      isActive: linkProps['data-status'] === 'active'
-    }) : props.children
-  }));
-});
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
-
-const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-const windowKey = 'window';
-const delimiter = '___';
-let weakScrolledElements = new WeakSet();
-const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
-let cache = sessionsStorage ? (() => {
-  const storageKey = 'tsr-scroll-restoration-v2';
-  const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
-    cached: {},
-    next: {}
-  };
-  return {
-    state,
-    set: updater => {
-      cache.state = functionalUpdate(updater, cache.state);
-      window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
-    }
-  };
-})() : undefined;
-const defaultGetKey = location => location.state.key;
-function useScrollRestoration(options) {
-  const router = useRouter();
-  useLayoutEffect(() => {
-    const getKey = options?.getKey || defaultGetKey;
-    const {
-      history
-    } = window;
-    if (history.scrollRestoration) {
-      history.scrollRestoration = 'manual';
-    }
-    const onScroll = event => {
-      if (weakScrolledElements.has(event.target)) return;
-      weakScrolledElements.add(event.target);
-      let elementSelector = '';
-      if (event.target === document || event.target === window) {
-        elementSelector = windowKey;
-      } else {
-        const attrId = event.target.getAttribute('data-scroll-restoration-id');
-        if (attrId) {
-          elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
-        } else {
-          elementSelector = getCssSelector(event.target);
-        }
-      }
-      if (!cache.state.next[elementSelector]) {
-        cache.set(c => ({
-          ...c,
-          next: {
-            ...c.next,
-            [elementSelector]: {
-              scrollX: NaN,
-              scrollY: NaN
-            }
-          }
-        }));
-      }
-    };
-    if (typeof document !== 'undefined') {
-      document.addEventListener('scroll', onScroll, true);
-    }
-    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
-      if (event.pathChanged) {
-        const restoreKey = getKey(event.fromLocation);
-        for (const elementSelector in cache.state.next) {
-          const entry = cache.state.next[elementSelector];
-          if (elementSelector === windowKey) {
-            entry.scrollX = window.scrollX || 0;
-            entry.scrollY = window.scrollY || 0;
-          } else if (elementSelector) {
-            const element = document.querySelector(elementSelector);
-            entry.scrollX = element?.scrollLeft || 0;
-            entry.scrollY = element?.scrollTop || 0;
-          }
-          cache.set(c => {
-            const next = {
-              ...c.next
-            };
-            delete next[elementSelector];
-            return {
-              ...c,
-              next,
-              cached: {
-                ...c.cached,
-                [[restoreKey, elementSelector].join(delimiter)]: entry
-              }
-            };
-          });
-        }
-      }
-    });
-    const unsubOnResolved = router.subscribe('onResolved', event => {
-      if (event.pathChanged) {
-        if (!router.resetNextScroll) {
-          return;
-        }
-        router.resetNextScroll = true;
-        const getKey = options?.getKey || defaultGetKey;
-        const restoreKey = getKey(event.toLocation);
-        let windowRestored = false;
-        for (const cacheKey in cache.state.cached) {
-          const entry = cache.state.cached[cacheKey];
-          const [key, elementSelector] = cacheKey.split(delimiter);
-          if (key === restoreKey) {
-            if (elementSelector === windowKey) {
-              windowRestored = true;
-              window.scrollTo(entry.scrollX, entry.scrollY);
-            } else if (elementSelector) {
-              const element = document.querySelector(elementSelector);
-              if (element) {
-                element.scrollLeft = entry.scrollX;
-                element.scrollTop = entry.scrollY;
-              }
-            }
-          }
-        }
-        if (!windowRestored) {
-          window.scrollTo(0, 0);
-        }
-        cache.set(c => ({
-          ...c,
-          next: {}
-        }));
-        weakScrolledElements = new WeakSet();
-      }
-    });
-    return () => {
-      document.removeEventListener('scroll', onScroll);
-      unsubOnBeforeLoad();
-      unsubOnResolved();
-    };
-  }, []);
-}
-function ScrollRestoration(props) {
-  useScrollRestoration(props);
-  return null;
-}
-function useElementScrollRestoration(options) {
-  const router = useRouter();
-  const getKey = options?.getKey || defaultGetKey;
-  let elementSelector = '';
-  if (options.id) {
-    elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
-  } else {
-    const element = options.getElement?.();
-    if (!element) {
-      return;
-    }
-    elementSelector = getCssSelector(element);
-  }
-  const restoreKey = getKey(router.latestLocation);
-  const cacheKey = [restoreKey, elementSelector].join(delimiter);
-  return cache.state.cached[cacheKey];
-}
-function getCssSelector(el) {
-  let path = [],
-    parent;
-  while (parent = el.parentNode) {
-    path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
-    el = parent;
-  }
-  return `${path.join(' > ')}`.toLowerCase();
-}
-
-function useBlocker(blockerFn, condition = true) {
-  const {
-    history
-  } = useRouter();
-  React.useEffect(() => {
-    if (!condition) return;
-    return history.block(blockerFn);
-  });
-}
-function Block({
-  blocker,
-  condition,
-  children
-}) {
-  useBlocker(blocker, condition);
-  return children ?? null;
-}
-
-function useNavigate(_defaultOpts) {
-  const {
-    navigate
-  } = useRouter();
-  const matchPathname = useMatch({
-    strict: false,
-    select: s => s.pathname
-  });
-  return React.useCallback(({
-    from,
-    ...rest
-  }) => {
-    return navigate({
-      from: rest?.to ? matchPathname : undefined,
-      ...rest
-    });
-  }, []);
-}
-
-// 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 {
-    navigate
-  } = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  React.useEffect(() => {
-    navigate({
-      from: props.to ? match.pathname : undefined,
-      ...props
-    });
-  }, []);
-  return null;
-}
-
-function useRouteContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
-  });
-}
-
-export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, FileRouteLoader, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultDeserializeError, defaultParseSearch, defaultSerializeError, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRenderedMatches, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainArray, isPlainObject, isRedirect, isServer, isServerSideError, 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, useLoaderDeps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
-//# sourceMappingURL=index.js.map