@tanstack/react-router 0.0.1-beta.204 → 0.0.1-beta.205

package/build/esm/index.js

@@ -8,13 +8,396 @@
  *
  * @license MIT
  */
-import { useStore } from '@tanstack/react-store';
-export { useStore } from '@tanstack/react-store';
-import { Route, functionalUpdate, rootRouteId, last, pick, watchScrollPositions, restoreScrollPositions, isDehydratedDeferred } from '@tanstack/router-core';
-export * from '@tanstack/router-core';
-import * as React from 'react';
+import { createBrowserHistory } 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';
+
+// 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]>>
+//
+
+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 `a` if `b` 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 = Array.isArray(prev) && Array.isArray(next);
+  if (array || isPlainObject(prev) && isPlainObject(next)) {
+    const prevSize = array ? prev.length : Object.keys(prev).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];
+      copy[key] = replaceEqualDeep(prev[key], next[key]);
+      if (copy[key] === prev[key]) {
+        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 partialDeepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
+  }
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
+  }
+  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 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)] ?? '';
+    }
+    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 matchByPath(basepath, from, matchLocation) {
+  // Remove the base path from the pathname
+  from = basepath != '/' ? from.substring(basepath.length) : 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) {
+            params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
+            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) {
+        return !!matchLocation.fuzzy;
+      }
+    }
+    return true;
+  })();
+  return isMatch ? params : undefined;
+}
+
+// @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;
+}
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -31,42 +414,1170 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-Route.__onInit = route => {
-  Object.assign(route, {
-    useMatch: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id
+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);
+        }
       });
-    },
-    useLoader: (opts = {}) => {
-      return useLoader({
-        ...opts,
-        from: route.id
+    }
+    const searchStr = encode(search).toString();
+    return searchStr ? `?${searchStr}` : '';
+  };
+}
+
+//
+
+//
+
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+class Router {
+  // dehydratedData?: TDehydrated
+  // resetNextScroll = false
+  // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
+  constructor(options) {
+    this.options = {
+      defaultPreloadDelay: 50,
+      meta: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch
+    };
+    this.routeTree = this.options.routeTree;
+  }
+  subscribers = new Set();
+  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);
+      }
+    });
+  };
+
+  // dehydrate = (): DehydratedRouter => {
+  //   return {
+  //     state: {
+  //       dehydratedMatches: state.matches.map((d) =>
+  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+  //       ),
+  //     },
+  //   }
+  // }
+
+  // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+  //   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 as any
+  //   this.options.hydrate?.(ctx.payload as any)
+  //   const dehydratedState = ctx.router.state
+
+  //   let matches = this.matchRoutes(
+  //     state.location.pathname,
+  //     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.setState((s) => {
+  //     return {
+  //       ...s,
+  //       matches: dehydratedState.dehydratedMatches as any,
+  //     }
+  //   })
+  // }
+
+  // TODO:
+  // injectedHtml: (string | (() => Promise<string> | string))[] = []
+
+  // TODO:
+  // injectHtml = async (html: string | (() => Promise<string> | string)) => {
+  //   this.injectedHtml.push(html)
+  // }
+
+  // TODO:
+  // dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
+  //   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 as any)() : 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<T>(key)
+  //   }
+
+  //   return () => undefined
+  // }
+
+  // hydrateData = <T = unknown>(key: any) => {
+  //   if (typeof document !== 'undefined') {
+  //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+  //     return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+  //   }
+
+  //   return undefined
+  // }
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
+
+  // setRouteMatch = (
+  //   id: string,
+  //   pending: boolean,
+  //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+  // ) => {
+  //   const key = pending ? 'pendingMatches' : 'matches'
+
+  //   this.setState((prev) => {
+  //     return {
+  //       ...prev,
+  //       [key]: prev[key].map((d) => {
+  //         if (d.id === id) {
+  //           return functionalUpdate(updater, d)
+  //         }
+
+  //         return d
+  //       }),
+  //     }
+  //   })
+  // }
+
+  // setPendingRouteMatch = (
+  //   id: string,
+  //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+  // ) => {
+  //   this.setRouteMatch(id, true, updater)
+  // }
+}
+
+// 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);
+  };
+}
+
+// Detect if we're in the DOM
+
+function redirect(opts) {
+  opts.isRedirect = true;
+  return opts;
+}
+function isRedirect(obj) {
+  return !!obj?.isRedirect;
+}
+
+const preloadWarning = 'Error preloading route! ☝️';
+const routerContext = /*#__PURE__*/React.createContext(null);
+function getInitialRouterState(location) {
+  return {
+    status: 'idle',
+    isFetching: false,
+    resolvedLocation: location,
+    location: location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now()
+  };
+}
+function RouterProvider({
+  router,
+  ...rest
+}) {
+  const options = {
+    ...router.options,
+    ...rest,
+    meta: {
+      ...router.options.meta,
+      ...rest?.meta
+    }
+  };
+  const history = React.useState(() => options.history ?? createBrowserHistory())[0];
+  const tempLocationKeyRef = React.useRef(`${Math.round(Math.random() * 10000000)}`);
+  const resetNextScrollRef = React.useRef(false);
+  const navigateTimeoutRef = React.useRef(null);
+  const parseLocation = useStableCallback(previousLocation => {
+    const parse = ({
+      pathname,
+      search,
+      hash,
+      state
+    }) => {
+      const parsedSearch = 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(history.location);
+    let {
+      __tempLocation,
+      __tempKey
+    } = location.state;
+    if (__tempLocation && (!__tempKey || __tempKey === tempLocationKeyRef.current)) {
+      // 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;
+  });
+  const [state, setState] = React.useState(() => getInitialRouterState(parseLocation()));
+  const basepath = `/${trimPath(options.basepath ?? '') ?? ''}`;
+  const resolvePathWithBase = useStableCallback((from, path) => {
+    return resolvePath(basepath, from, cleanPath(path));
+  });
+  const [routesById, routesByPath] = React.useMemo(() => {
+    const routesById = {};
+    const routesByPath = {};
+    const recurseRoutes = routes => {
+      routes.forEach((route, i) => {
+        route.init({
+          originalIndex: i
+        });
+        const existingRoute = routesById[route.id];
+        invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
+        routesById[route.id] = route;
+        if (!route.isRoot && route.path) {
+          const trimmedFullPath = trimPathRight(route.fullPath);
+          if (!routesByPath[trimmedFullPath] || route.fullPath.endsWith('/')) {
+            routesByPath[trimmedFullPath] = route;
+          }
+        }
+        const children = route.children;
+        if (children?.length) {
+          recurseRoutes(children);
+        }
       });
-    },
-    useRouteContext: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
+    };
+    recurseRoutes([router.routeTree]);
+    return [routesById, routesByPath];
+  }, []);
+  const looseRoutesById = routesById;
+  const flatRoutes = React.useMemo(() => Object.values(routesByPath).map((d, i) => {
+    const trimmed = trimPath(d.fullPath);
+    const parsed = parsePathname(trimmed);
+    while (parsed.length > 1 && parsed[0]?.value === '/') {
+      parsed.shift();
+    }
+    const score = parsed.map(d => {
+      if (d.type === 'param') {
+        return 0.5;
+      }
+      if (d.type === 'wildcard') {
+        return 0.25;
+      }
+      return 1;
+    });
+    return {
+      child: d,
+      trimmed,
+      parsed,
+      index: i,
+      score
+    };
+  }).sort((a, b) => {
+    let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
+    if (isIndex !== 0) return isIndex;
+    const length = Math.min(a.score.length, b.score.length);
+
+    // Sort by length of score
+    if (a.score.length !== b.score.length) {
+      return b.score.length - a.score.length;
+    }
+
+    // Sort by min available score
+    for (let i = 0; i < length; i++) {
+      if (a.score[i] !== b.score[i]) {
+        return b.score[i] - a.score[i];
+      }
+    }
+
+    // Sort by min available parsed value
+    for (let i = 0; i < length; i++) {
+      if (a.parsed[i].value !== b.parsed[i].value) {
+        return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+      }
+    }
+
+    // Sort by length of trimmed full path
+    if (a.trimmed !== b.trimmed) {
+      return a.trimmed > b.trimmed ? 1 : -1;
+    }
+
+    // Sort by original index
+    return a.index - b.index;
+  }).map((d, i) => {
+    d.child.rank = i;
+    return d.child;
+  }), [routesByPath]);
+  const latestLoadPromiseRef = React.useRef(Promise.resolve());
+  const matchRoutes = useStableCallback((pathname, locationSearch, opts) => {
+    let routeParams = {};
+    let foundRoute = flatRoutes.find(route => {
+      const matchedParams = matchPathname(basepath, trimPathRight(pathname), {
+        to: route.fullPath,
+        caseSensitive: route.options.caseSensitive ?? options.caseSensitive,
+        fuzzy: false
       });
-    },
-    useSearch: (opts = {}) => {
-      return useSearch({
-        ...opts,
-        from: route.id
+      if (matchedParams) {
+        routeParams = matchedParams;
+        return true;
+      }
+      return false;
+    });
+    let routeCursor = foundRoute || routesById['__root__'];
+    let matchedRoutes = [routeCursor];
+    // let includingLayouts = true
+    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.map((route, index) => {
+      const interpolatedPath = interpolatePath(route.path, routeParams);
+      const matchId = interpolatePath(route.id, routeParams, true);
+
+      // 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(state, matchId);
+      if (existingMatch) {
+        return {
+          ...existingMatch
+        };
+      }
+
+      // Create a fresh route match
+      const hasLoaders = !!(route.options.load || componentTypes.some(d => route.options[d]?.preload));
+      const routeMatch = {
+        id: matchId,
+        routeId: route.id,
+        params: routeParams,
+        pathname: joinPaths([basepath, interpolatedPath]),
+        updatedAt: Date.now(),
+        routeSearch: {},
+        search: {},
+        status: hasLoaders ? 'pending' : 'success',
+        isFetching: false,
+        invalid: false,
+        error: undefined,
+        paramsError: parseErrors[index],
+        searchError: undefined,
+        loadPromise: Promise.resolve(),
+        meta: undefined,
+        abortController: new AbortController(),
+        fetchedAt: 0
+      };
+      return routeMatch;
+    });
+
+    // Take each match and resolve its search params and meta
+    // This has to happen after the matches are created or found
+    // so that we can use the parent match's search params and meta
+    matches.forEach((match, i) => {
+      const parentMatch = matches[i - 1];
+      const route = looseRoutesById[match.routeId];
+      const searchInfo = (() => {
+        // Validate the search params and stabilize them
+        const parentSearchInfo = {
+          search: parentMatch?.search ?? locationSearch,
+          routeSearch: parentMatch?.routeSearch ?? locationSearch
+        };
+        try {
+          const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+          let routeSearch = validator?.(parentSearchInfo.search) ?? {};
+          let search = {
+            ...parentSearchInfo.search,
+            ...routeSearch
+          };
+          routeSearch = replaceEqualDeep(match.routeSearch, routeSearch);
+          search = replaceEqualDeep(match.search, search);
+          return {
+            routeSearch,
+            search,
+            searchDidChange: match.routeSearch !== routeSearch
+          };
+        } catch (err) {
+          match.searchError = new SearchParamError(err.message, {
+            cause: err
+          });
+          if (opts?.throwOnError) {
+            throw match.searchError;
+          }
+          return parentSearchInfo;
+        }
+      })();
+      Object.assign(match, searchInfo);
+    });
+    return matches;
+  });
+  const cancelMatch = useStableCallback(id => {
+    getRouteMatch(state, id)?.abortController?.abort();
+  });
+  const cancelMatches = useStableCallback(state => {
+    state.matches.forEach(match => {
+      cancelMatch(match.id);
+    });
+  });
+  const buildLocation = useStableCallback((opts = {}) => {
+    const build = (dest = {}, matches) => {
+      const from = state.location;
+      const fromPathname = dest.from ?? from.pathname;
+      let pathname = resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = matchRoutes(fromPathname, from.search);
+      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 => looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
+        });
+      }
+      pathname = interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = stayingMatches?.map(match => looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = stayingMatches?.map(match => looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
+
+      // 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(from.search, postFilteredSearch);
+      const searchStr = options.stringifySearch(search);
+      const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+      const hashStr = hash ? `#${hash}` : '';
+      let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+      nextState = replaceEqualDeep(from.state, nextState);
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: history.createHref(`${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 = options.routeMasks?.find(d => {
+          const match = matchPathname(basepath, next.pathname, {
+            to: d.from,
+            caseSensitive: false,
+            fuzzy: false
+          });
+          if (match) {
+            params = match;
+            return true;
+          }
+          return false;
+        });
+        if (foundMask) {
+          foundMask = {
+            ...foundMask,
+            from: interpolatePath(foundMask.from, params)
+          };
+          maskedDest = foundMask;
+          maskedNext = build(maskedDest);
+        }
+      }
+      const nextMatches = matchRoutes(next.pathname, next.search);
+      const maskedMatches = maskedNext ? 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
       });
-    },
-    useParams: (opts = {}) => {
-      return useParams({
-        ...opts,
-        from: route.id
+    }
+    return buildWithMatches(opts);
+  });
+  const commitLocation = useStableCallback(async next => {
+    if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
+    const isSameUrl = state.location.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 ?? options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = tempLocationKeyRef.current;
+        }
+      }
+      history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+    }
+    resetNextScrollRef.current = next.resetScroll ?? true;
+    return latestLoadPromiseRef.current;
+  });
+  const buildAndCommitLocation = useStableCallback(({
+    replace,
+    resetScroll,
+    ...rest
+  } = {}) => {
+    const location = buildLocation(rest);
+    return commitLocation({
+      ...location,
+      replace,
+      resetScroll
+    });
+  });
+  const navigate = useStableCallback(({
+    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 = typeof from === 'undefined' ? from : String(from);
+    let isExternal;
+    try {
+      new URL(`${toString}`);
+      isExternal = true;
+    } catch (e) {}
+    invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+    return buildAndCommitLocation({
+      ...rest,
+      from: fromString,
+      to: toString
+    });
+  });
+  const loadMatches = useStableCallback(async ({
+    matches,
+    preload
+  }) => {
+    let firstBadMatchIndex;
+
+    // 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 = looseRoutesById[match.routeId];
+        const handleError = (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()
+          };
+        };
+        try {
+          if (match.paramsError) {
+            handleError(match.paramsError, 'PARSE_PARAMS');
+          }
+          if (match.searchError) {
+            handleError(match.searchError, 'VALIDATE_SEARCH');
+          }
+          const parentMeta = parentMatch?.meta ?? options.meta ?? {};
+          const beforeLoadMeta = (await route.options.beforeLoad?.({
+            search: match.search,
+            abortController: match.abortController,
+            params: match.params,
+            preload: !!preload,
+            meta: parentMeta,
+            location: state.location
+          })) ?? {};
+          const meta = {
+            ...parentMeta,
+            ...beforeLoadMeta
+          };
+          matches[index] = match = {
+            ...match,
+            meta: replaceEqualDeep(match.meta, meta)
+          };
+        } catch (err) {
+          handleError(err, 'BEFORE_LOAD');
+          break;
+        }
+      }
+    } catch (err) {
+      if (isRedirect(err)) {
+        if (!preload) navigate(err);
+        return;
+      }
+      throw err;
+    }
+    const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+    const matchPromises = [];
+    validResolvedMatches.forEach((match, index) => {
+      matchPromises.push((async () => {
+        const parentMatchPromise = matchPromises[index - 1];
+        const route = looseRoutesById[match.routeId];
+        if (match.isFetching) {
+          return getRouteMatch(state, match.id)?.loadPromise;
+        }
+        const fetchedAt = Date.now();
+        const checkLatest = () => {
+          const latest = getRouteMatch(state, match.id);
+          return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
+        };
+        const handleIfRedirect = err => {
+          if (isRedirect(err)) {
+            if (!preload) {
+              navigate(err);
+            }
+            return true;
+          }
+          return false;
+        };
+        const load = async () => {
+          let latestPromise;
+          try {
+            const componentsPromise = Promise.all(componentTypes.map(async type => {
+              const component = route.options[type];
+              if (component?.preload) {
+                await component.preload();
+              }
+            }));
+            const loaderPromise = route.options.load?.({
+              params: match.params,
+              search: match.search,
+              preload: !!preload,
+              parentMatchPromise,
+              abortController: match.abortController,
+              meta: match.meta
+            });
+            await Promise.all([componentsPromise, loaderPromise]);
+            if (latestPromise = checkLatest()) return await latestPromise;
+            matches[index] = match = {
+              ...match,
+              error: undefined,
+              status: 'success',
+              isFetching: false,
+              updatedAt: Date.now()
+            };
+          } catch (error) {
+            if (latestPromise = checkLatest()) return await latestPromise;
+            if (handleIfRedirect(error)) return;
+            try {
+              route.options.onError?.(error);
+            } catch (onErrorError) {
+              error = onErrorError;
+              if (handleIfRedirect(onErrorError)) return;
+            }
+            matches[index] = match = {
+              ...match,
+              error,
+              status: 'error',
+              isFetching: false,
+              updatedAt: Date.now()
+            };
+          }
+        };
+        let loadPromise;
+        matches[index] = match = {
+          ...match,
+          isFetching: true,
+          fetchedAt,
+          invalid: false
+        };
+        loadPromise = load();
+        matches[index] = match = {
+          ...match,
+          loadPromise
+        };
+        await loadPromise;
+      })());
+    });
+    await Promise.all(matchPromises);
+  });
+  const load = useStableCallback(async opts => {
+    const promise = new Promise(async (resolve, reject) => {
+      const prevLocation = state.resolvedLocation;
+      const pathDidChange = !!(opts?.next && prevLocation.href !== opts.next.href);
+      let latestPromise;
+      const checkLatest = () => {
+        return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
+      };
+
+      // Cancel any pending matches
+      cancelMatches(state);
+      router.emit({
+        type: 'onBeforeLoad',
+        from: prevLocation,
+        to: opts?.next ?? state.location,
+        pathChanged: pathDidChange
+      });
+      if (opts?.next) {
+        // Ingest the new location
+        setState(s => ({
+          ...s,
+          location: opts.next
+        }));
+      }
+
+      // Match the routes
+      const matches = matchRoutes(state.location.pathname, state.location.search, {
+        throwOnError: opts?.throwOnError,
+        debug: true
+      });
+      setState(s => ({
+        ...s,
+        status: 'pending',
+        matches
+      }));
+      try {
+        // Load the matches
+        try {
+          await loadMatches({
+            matches
+          });
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
+
+        // Only apply the latest transition
+        if (latestPromise = checkLatest()) {
+          return latestPromise;
+        }
+
+        // TODO:
+        // const exitingMatchIds = previousMatches.filter(
+        //   (id) => !state.pendingMatches.includes(id),
+        // )
+        // const enteringMatchIds = state.pendingMatches.filter(
+        //   (id) => !previousMatches.includes(id),
+        // )
+        // const stayingMatchIds = previousMatches.filter((id) =>
+        //   state.pendingMatches.includes(id),
+        // )
+
+        setState(s => ({
+          ...s,
+          status: 'idle',
+          resolvedLocation: s.location
+        }));
+
+        // TODO:
+        // ;(
+        //   [
+        //     [exitingMatchIds, 'onLeave'],
+        //     [enteringMatchIds, 'onEnter'],
+        //     [stayingMatchIds, 'onTransition'],
+        //   ] as const
+        // ).forEach(([matches, hook]) => {
+        //   matches.forEach((match) => {
+        //     const route = this.getRoute(match.routeId)
+        //     route.options[hook]?.(match)
+        //   })
+        // })
+        router.emit({
+          type: 'onLoad',
+          from: prevLocation,
+          to: state.location,
+          pathChanged: pathDidChange
+        });
+        resolve();
+      } catch (err) {
+        // Only apply the latest transition
+        if (latestPromise = checkLatest()) {
+          return latestPromise;
+        }
+        reject(err);
+      }
+    });
+    latestLoadPromiseRef.current = promise;
+    return latestLoadPromiseRef.current;
+  });
+  const safeLoad = React.useCallback(async () => {
+    try {
+      return load();
+    } catch (err) {
+      // Don't do anything
+    }
+  }, []);
+  const preloadRoute = useStableCallback(async (navigateOpts = state.location) => {
+    let next = buildLocation(navigateOpts);
+    let matches = matchRoutes(next.pathname, next.search, {
+      throwOnError: true
+    });
+    await loadMatches({
+      matches,
+      preload: true
+    });
+    return [last(matches), matches];
+  });
+  const buildLink = useStableCallback((state, dest) => {
+    // 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 {
+      to,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
+      activeOptions,
+      disabled,
+      target,
+      replace,
+      resetScroll
+    } = dest;
+    try {
+      new URL(`${to}`);
+      return {
+        type: 'external',
+        href: to
+      };
+    } catch (e) {}
+    const nextOpts = dest;
+    const next = buildLocation(nextOpts);
+    const preload = userPreload ?? options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? options.defaultPreloadDelay ?? 0;
+
+    // Compare path/hash for matches
+    const currentPathSplit = state.location.pathname.split('/');
+    const nextPathSplit = next.pathname.split('/');
+    const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+    // Combine the matches based on user options
+    const pathTest = activeOptions?.exact ? state.location.pathname === next.pathname : pathIsFuzzyEqual;
+    const hashTest = activeOptions?.includeHash ? state.location.hash === next.hash : true;
+    const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(state.location.search, next.search) : true;
+
+    // The final "active" test
+    const isActive = 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!
+        commitLocation({
+          ...next,
+          replace,
+          resetScroll
+        });
+      }
+    };
+
+    // The click handler
+    const handleFocus = e => {
+      if (preload) {
+        preloadRoute(nextOpts).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }
+    };
+    const handleTouchStart = e => {
+      preloadRoute(nextOpts).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;
+          preloadRoute(nextOpts).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;
+      }
+    };
+    return {
+      type: 'internal',
+      next,
+      handleFocus,
+      handleClick,
+      handleEnter,
+      handleLeave,
+      handleTouchStart,
+      isActive,
+      disabled
+    };
+  });
+  React.useLayoutEffect(() => {
+    const unsub = history.subscribe(() => {
+      React.startTransition(() => {
+        setState(s => ({
+          ...s,
+          location: parseLocation(state.location)
+        }));
+      });
+    });
+    const nextLocation = buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true
+    });
+    if (state.location.href !== nextLocation.href) {
+      commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+    return () => {
+      unsub();
+    };
+  }, [history]);
+  const initialLoad = React.useRef(true);
+  if (initialLoad.current) {
+    initialLoad.current = false;
+    safeLoad();
+  }
+  React.useLayoutEffect(() => {
+    if (state.resolvedLocation !== state.location) {
+      safeLoad();
+    }
+  }, [state.location]);
+  React.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
+  const matchRoute = useStableCallback((state, location, opts) => {
+    location = {
+      ...location,
+      to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
+    };
+    const next = buildLocation(location);
+    if (opts?.pending && state.status !== 'pending') {
+      return false;
     }
+    const baseLocation = opts?.pending ? state.location : state.resolvedLocation;
+    if (!baseLocation) {
+      return false;
+    }
+    const match = matchPathname(basepath, baseLocation.pathname, {
+      ...opts,
+      to: next.pathname
+    });
+    if (!match) {
+      return false;
+    }
+    if (opts?.includeSearch ?? true) {
+      return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+    }
+    return match;
   });
-};
+  const routerContextValue = {
+    routeTree: router.routeTree,
+    navigate,
+    buildLink,
+    state,
+    matchRoute,
+    routesById,
+    options,
+    history,
+    load
+  };
+  return /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: routerContextValue
+  }, /*#__PURE__*/React.createElement(Matches, null));
+}
+function isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
+function getRouteMatch(state, id) {
+  return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
+}
+
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 //
 
@@ -91,7 +1602,10 @@ function lazyRouteComponent(importer, exportName) {
 //
 
 function useLinkProps(options) {
-  const router = useRouter();
+  const {
+    buildLink,
+    state: routerState
+  } = useRouter();
   const match = useMatch({
     strict: false
   });
@@ -125,7 +1639,7 @@ function useLinkProps(options) {
     onTouchStart,
     ...rest
   } = options;
-  const linkInfo = router.buildLink({
+  const linkInfo = buildLink(routerState, {
     from: options.to ? match.pathname : undefined,
     ...options
   });
@@ -201,92 +1715,48 @@ const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 function Navigate(props) {
-  const router = useRouter();
+  const {
+    navigate
+  } = useRouter();
   const match = useMatch({
     strict: false
   });
-  useLayoutEffect$1(() => {
-    router.navigate({
+  useLayoutEffect(() => {
+    navigate({
       from: props.to ? match.pathname : undefined,
       ...props
     });
   }, []);
   return null;
 }
-const matchIdsContext = /*#__PURE__*/React.createContext(null);
-const routerContext = /*#__PURE__*/React.createContext(null);
-function useRouterState(opts) {
-  const router = useRouter();
-  return useStore(router.__store, opts?.select);
-}
-function RouterProvider({
-  router,
-  ...rest
-}) {
-  router.update(rest);
-  React.useEffect(() => {
-    let unsub;
-    React.startTransition(() => {
-      unsub = router.mount();
-    });
-    return unsub;
-  }, [router]);
-  const Wrap = router.options.Wrap || React.Fragment;
-  return /*#__PURE__*/React.createElement(Wrap, null, /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: router
-  }, /*#__PURE__*/React.createElement(Matches, null)));
-}
-function Matches() {
-  const router = useRouter();
-  const matchIds = useRouterState({
-    select: state => {
-      return state.renderedMatchIds;
-    }
-  });
-  const locationKey = useRouterState({
-    select: d => d.resolvedLocation.state?.key
-  });
-  const route = router.getRoute(rootRouteId);
-  const errorComponent = React.useCallback(props => {
-    return /*#__PURE__*/React.createElement(ErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]);
-  return /*#__PURE__*/React.createElement(matchIdsContext.Provider, {
-    value: [undefined, ...matchIds]
-  }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-    }
-  }, /*#__PURE__*/React.createElement(Outlet, null)));
-}
+const matchesContext = /*#__PURE__*/React.createContext(null);
 function useRouter() {
   const value = React.useContext(routerContext);
-  warning(value, 'useRouter must be used inside a <Router> component!');
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
   return value;
 }
+function useRouterState(opts) {
+  const {
+    state
+  } = useRouter();
+  // return useStore(router.__store, opts?.select as any)
+  return opts?.select ? opts.select(state) : state;
+}
 function useMatches(opts) {
-  const matchIds = React.useContext(matchIdsContext);
+  const contextMatches = React.useContext(matchesContext);
   return useRouterState({
     select: state => {
-      const matches = state.renderedMatches.slice(state.renderedMatches.findIndex(d => d.id === matchIds[0]));
+      const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
       return opts?.select ? opts.select(matches) : matches;
     }
   });
 }
 function useMatch(opts) {
-  const router = useRouter();
-  const nearestMatchId = React.useContext(matchIdsContext)[0];
-  const nearestMatchRouteId = router.getRouteMatch(nearestMatchId)?.routeId;
+  const nearestMatch = React.useContext(matchesContext)[0];
+  const nearestMatchRouteId = nearestMatch?.routeId;
   const matchRouteId = useRouterState({
     select: state => {
-      const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
+      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
       return match.routeId;
     }
   });
@@ -295,29 +1765,17 @@ function useMatch(opts) {
   }
   const matchSelection = useRouterState({
     select: state => {
-      const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
+      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
       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 useLoader(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts?.select(match.loaderData) : match.loaderData
-  });
-}
-function useRouterContext(opts) {
+function useRouteMeta(opts) {
   return useMatch({
     ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
-  });
-}
-function useRouteContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
+    select: match => opts?.select ? opts.select(match.meta) : match.meta
   });
 }
 function useSearch(opts) {
@@ -331,18 +1789,20 @@ function useSearch(opts) {
 function useParams(opts) {
   return useRouterState({
     select: state => {
-      const params = last(state.renderedMatches)?.params;
+      const params = last(state.matches)?.params;
       return opts?.select ? opts.select(params) : params;
     }
   });
 }
 function useNavigate(defaultOpts) {
-  const router = useRouter();
+  const {
+    navigate
+  } = useRouter();
   const match = useMatch({
     strict: false
   });
   return React.useCallback(opts => {
-    return router.navigate({
+    return navigate({
       from: opts?.to ? match.pathname : undefined,
       ...defaultOpts,
       ...opts
@@ -350,19 +1810,62 @@ function useNavigate(defaultOpts) {
   }, []);
 }
 function useMatchRoute() {
-  const router = useRouter();
+  const {
+    state,
+    matchRoute
+  } = useRouter();
   return React.useCallback(opts => {
     const {
       pending,
       caseSensitive,
       ...rest
     } = opts;
-    return router.matchRoute(rest, {
+    return matchRoute(state, rest, {
       pending,
       caseSensitive
     });
   }, []);
 }
+function Matches() {
+  const {
+    routesById,
+    state
+  } = useRouter();
+
+  // const matches = useRouterState({
+  //   select: (state) => {
+  //     return state.matches
+  //   },
+  // })
+
+  const {
+    matches
+  } = state;
+  const locationKey = useRouterState({
+    select: d => d.resolvedLocation.state?.key
+  });
+  const route = routesById[rootRouteId];
+  const errorComponent = React.useCallback(props => {
+    return /*#__PURE__*/React.createElement(ErrorComponent, {
+      ...props,
+      useMatch: route.useMatch,
+      useRouteMeta: route.useRouteMeta,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    });
+  }, [route]);
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(CatchBoundary, {
+    resetKey: locationKey,
+    errorComponent: errorComponent,
+    onCatch: () => {
+      warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+    }
+  }, matches.length ? /*#__PURE__*/React.createElement(Match, {
+    matches: matches
+  }) : null));
+}
 function MatchRoute(props) {
   const matchRoute = useMatchRoute();
   const params = matchRoute(props);
@@ -372,44 +1875,47 @@ function MatchRoute(props) {
   return !!params ? props.children : null;
 }
 function Outlet() {
-  const matchIds = React.useContext(matchIdsContext).slice(1);
-  if (!matchIds[0]) {
+  const matches = React.useContext(matchesContext).slice(1);
+  if (!matches[0]) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Match, {
-    matchIds: matchIds
+    matches: matches
   });
 }
 const defaultPending = () => null;
 function Match({
-  matchIds
+  matches
 }) {
-  const router = useRouter();
-  const matchId = matchIds[0];
-  const routeId = router.getRouteMatch(matchId).routeId;
-  const route = router.getRoute(routeId);
+  const {
+    options,
+    routesById
+  } = useRouter();
+  const match = matches[0];
+  const routeId = match?.routeId;
+  const route = routesById[routeId];
   const locationKey = useRouterState({
     select: s => s.resolvedLocation.state?.key
   });
-  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+  const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
+  const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
   const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React.Suspense : SafeFragment;
   const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
   const errorComponent = React.useCallback(props => {
     return /*#__PURE__*/React.createElement(routeErrorComponent, {
       ...props,
       useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
+      useRouteMeta: route.useRouteMeta,
       useSearch: route.useSearch,
       useParams: route.useParams
     });
   }, [route]);
-  return /*#__PURE__*/React.createElement(matchIdsContext.Provider, {
-    value: matchIds
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
   }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
     fallback: /*#__PURE__*/React.createElement(PendingComponent, {
       useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
+      useRouteMeta: route.useRouteMeta,
       useSearch: route.useSearch,
       useParams: route.useParams
     })
@@ -417,44 +1923,32 @@ function Match({
     resetKey: locationKey,
     errorComponent: errorComponent,
     onCatch: () => {
-      warning(false, `Error in route match: ${matchId}`);
+      warning(false, `Error in route match: ${match.id}`);
     }
   }, /*#__PURE__*/React.createElement(MatchInner, {
-    matchId: matchId,
-    PendingComponent: PendingComponent
+    match: match
   }))));
 }
 function MatchInner({
-  matchId,
-  PendingComponent
+  match
 }) {
-  const router = useRouter();
-  const match = useRouterState({
-    select: d => {
-      const match = d.matchesById[matchId];
-      return pick(match, ['status', 'loadPromise', 'routeId', 'error']);
-    }
-  });
-  const route = router.getRoute(match.routeId);
+  const {
+    options,
+    routesById
+  } = useRouter();
+  const route = routesById[match.routeId];
   if (match.status === 'error') {
     throw match.error;
   }
   if (match.status === 'pending') {
-    return /*#__PURE__*/React.createElement(PendingComponent, {
-      useLoader: route.useLoader,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
+    throw match.loadPromise;
   }
   if (match.status === 'success') {
-    let comp = route.options.component ?? router.options.defaultComponent;
+    let comp = route.options.component ?? options.defaultComponent;
     if (comp) {
       return /*#__PURE__*/React.createElement(comp, {
-        useLoader: route.useLoader,
         useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
+        useRouteMeta: route.useRouteMeta,
         useSearch: route.useSearch,
         useParams: route.useParams
       });
@@ -466,24 +1960,37 @@ function MatchInner({
 function SafeFragment(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 }
-function useInjectHtml() {
-  const router = useRouter();
-  return React.useCallback(html => {
-    router.injectHtml(html);
-  }, []);
-}
-function useDehydrate() {
-  const router = useRouter();
-  return React.useCallback(function dehydrate(key, data) {
-    return router.dehydrateData(key, data);
-  }, []);
-}
-function useHydrate() {
-  const router = useRouter();
-  return function hydrate(key) {
-    return router.hydrateData(key);
-  };
-}
+
+// export function useInjectHtml() {
+//   const { } = useRouter()
+
+//   return React.useCallback(
+//     (html: string | (() => Promise<string> | string)) => {
+//       router.injectHtml(html)
+//     },
+//     [],
+//   )
+// }
+
+// export function useDehydrate() {
+//   const { } = useRouter()
+
+//   return React.useCallback(function dehydrate<T>(
+//     key: any,
+//     data: T | (() => Promise<T> | T),
+//   ) {
+//     return router.dehydrateData(key, data)
+//   },
+//   [])
+// }
+
+// export function useHydrate() {
+//   const { } = useRouter()
+
+//   return function hydrate<T = unknown>(key: any) {
+//     return router.hydrateData(key) as T
+//   }
+// }
 
 // This is the messiest thing ever... I'm either seriously tired (likely) or
 // there has to be a better way to reset error boundaries when the
@@ -574,10 +2081,12 @@ function ErrorComponent({
   }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
 }
 function useBlocker(message, condition = true) {
-  const router = useRouter();
+  const {
+    history
+  } = useRouter();
   React.useEffect(() => {
     if (!condition) return;
-    let unblock = router.history.block((retry, cancel) => {
+    let unblock = history.block((retry, cancel) => {
       if (window.confirm(message)) {
         unblock();
         retry();
@@ -613,45 +2122,124 @@ function shallow(objA, objB) {
   return true;
 }
 
-const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-function useScrollRestoration(options) {
-  const router = useRouter();
-  useLayoutEffect(() => {
-    return watchScrollPositions(router, options);
-  }, []);
-  useLayoutEffect(() => {
-    restoreScrollPositions(router, options);
-  });
-}
-function ScrollRestoration(props) {
-  useScrollRestoration(props);
-  return null;
-}
+const rootRouteId = '__root__';
 
-function useAwaited({
-  promise
-}) {
-  const router = useRouter();
-  let state = promise.__deferredState;
-  const key = `__TSR__DEFERRED__${state.uid}`;
-  if (isDehydratedDeferred(promise)) {
-    state = router.hydrateData(key);
-    promise = Promise.resolve(state.data);
-    promise.__deferredState = state;
-  }
-  if (state.status === 'pending') {
-    throw promise;
+// export type MetaOptions = keyof PickRequired<RouteMeta> extends never
+//   ? {
+//       meta?: RouteMeta
+//     }
+//   : {
+//       meta: RouteMeta
+//     }
+// The parse type here allows a zod schema to be passed directly to the validator
+class Route {
+  // Set up in this.init()
+
+  // customId!: TCustomId
+
+  // Optional
+
+  constructor(options) {
+    this.options = options || {};
+    this.isRoot = !options?.getParentRoute;
+    Route.__onInit(this);
   }
-  if (state.status === 'error') {
-    throw state.error;
+  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;
+  };
+  update = options => {
+    Object.assign(this.options, options);
+    return this;
+  };
+  static __onInit = route => {
+    // This is a dummy static method that should get
+    // replaced by a framework specific implementation if necessary
+  };
+  useMatch = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useRouteMeta = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: d => opts?.select ? opts.select(d.meta) : d.meta
+    });
+  };
+  useSearch = opts => {
+    return useSearch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useParams = opts => {
+    return useParams({
+      ...opts,
+      from: this.id
+    });
+  };
+}
+class RouterMeta {
+  constructor() {}
+  createRootRoute = options => {
+    return new RootRoute(options);
+  };
+}
+class RootRoute extends Route {
+  constructor(options) {
+    super(options);
   }
-  router.dehydrateData(key, state);
-  return [state.data];
 }
-function Await(props) {
-  const awaited = useAwaited(props);
-  return props.children(...awaited);
+function createRouteMask(opts) {
+  return opts;
+}
+
+class FileRoute {
+  constructor(path) {
+    this.path = path;
+  }
+  createRoute = options => {
+    const route = new Route(options);
+    route.isRoot = false;
+    return route;
+  };
 }
 
-export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, Link, MatchRoute, Navigate, Outlet, RouterProvider, ScrollRestoration, lazyRouteComponent, matchIdsContext, routerContext, shallow, useAwaited, useBlocker, useDehydrate, useHydrate, useInjectHtml, useLinkProps, useLoader, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterContext, useRouterState, useScrollRestoration, useSearch };
+export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterMeta, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteMeta, useRouter, useRouterState, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map