@tanstack/react-router 0.0.1-beta.223 → 0.0.1-beta.224

package/build/esm/index.js

@@ -779,274 +779,34 @@ function useLoaderData(opts) {
   return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
 }
 
-// Detect if we're in the DOM
-
-function redirect(opts) {
-  opts.isRedirect = true;
-  return opts;
-}
-function isRedirect(obj) {
-  return !!obj?.isRedirect;
-}
-
-// @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 componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-class Router {
-  // dehydratedData?: TDehydrated
-  // resetNextScroll = false
-  // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
-  constructor(options) {
-    this.options = {
-      defaultPreloadDelay: 50,
-      context: 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,
-  //     }
-  //   })
-  // }
-
-  // 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);
-  };
-}
-
+// export type RouterContext<
+//   TRouteTree extends AnyRoute,
+//   // TDehydrated extends Record<string, any>,
+// > = {
+//   buildLink: BuildLinkFn<TRouteTree>
+//   state: RouterState<TRouteTree>
+//   navigate: NavigateFn<TRouteTree>
+//   matchRoute: MatchRouteFn<TRouteTree>
+//   routeTree: TRouteTree
+//   routesById: RoutesById<TRouteTree>
+//   options: RouterOptions<TRouteTree>
+//   history: RouterHistory
+//   load: LoadFn
+//   buildLocation: BuildLocationFn<TRouteTree>
+//   subscribe: Router<TRouteTree>['subscribe']
+//   resetNextScrollRef: React.MutableRefObject<boolean>
+//   injectedHtmlRef: React.MutableRefObject<InjectedHtmlEntry[]>
+//   injectHtml: (entry: InjectedHtmlEntry) => void
+//   dehydrateData: <T>(
+//     key: any,
+//     getData: T | (() => Promise<T> | T),
+//   ) => () => void
+//   hydrateData: <T>(key: any) => T | undefined
+// }
 const routerContext = /*#__PURE__*/React.createContext(null);
 if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext;
 }
-const preloadWarning = 'Error preloading route! ☝️';
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
 class SearchParamError extends Error {}
 class PathParamError extends Error {}
 function getInitialRouterState(location) {
@@ -1063,66 +823,55 @@ function RouterProvider({
   router,
   ...rest
 }) {
-  const options = {
+  // Allow the router to update options on the router instance
+  router.updateOptions({
     ...router.options,
     ...rest,
     context: {
       ...router.options.context,
       ...rest?.context
     }
-  };
-  const history = React.useState(() => options.history ?? createBrowserHistory())[0];
-  const tempLocationKeyRef = React.useRef(`${Math.round(Math.random() * 10000000)}`);
-  const resetNextScrollRef = React.useRef(true);
-  const navigateTimeoutRef = React.useRef(null);
-  const latestLoadPromiseRef = React.useRef(Promise.resolve());
-  const checkLatest = promise => {
-    return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
-  };
-  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 latestLocationRef = React.useRef(parseLocation());
-  const [preState, setState] = React.useState(() => getInitialRouterState(latestLocationRef.current));
+  const [preState, setState] = React.useState(() => router.state);
   const [isTransitioning, startReactTransition] = React.useTransition();
-  const pendingMatchesRef = React.useRef([]);
   const state = React.useMemo(() => ({
     ...preState,
     status: isTransitioning ? 'pending' : 'idle',
-    location: isTransitioning ? latestLocationRef.current : preState.location,
-    pendingMatches: pendingMatchesRef.current
+    location: isTransitioning ? router.latestLocation : preState.location,
+    pendingMatches: router.pendingMatches
   }), [preState, isTransitioning]);
+  router.setState = setState;
+  router.state = state;
+  router.startReactTransition = startReactTransition;
+  React.useLayoutEffect(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation);
+      if (state.location !== router.latestLocation) {
+        startReactTransition(() => {
+          try {
+            router.load();
+          } catch (err) {
+            console.error(err);
+          }
+        });
+      }
+    });
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true
+    });
+    if (state.location.href !== nextLocation.href) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+    return () => {
+      unsub();
+    };
+  }, [history]);
   React.useLayoutEffect(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
       router.emit({
@@ -1131,135 +880,592 @@ function RouterProvider({
         toLocation: state.location,
         pathChanged: state.location.href !== state.resolvedLocation?.href
       });
-      pendingMatchesRef.current = [];
+      router.pendingMatches = [];
       setState(s => ({
         ...s,
         resolvedLocation: s.location
       }));
     }
   });
-  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);
-        }
-      });
-    };
-    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;
+  React.useLayoutEffect(() => {
+    startReactTransition(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
       }
-      return 1;
     });
-    return {
-      child: d,
-      trimmed,
-      parsed,
-      index: i,
-      score
+  }, []);
+  return /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, /*#__PURE__*/React.createElement(Matches, null));
+}
+function getRouteMatch(state, id) {
+  return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
+}
+function useRouterState(opts) {
+  const {
+    state
+  } = useRouter();
+  // return useStore(router.__store, opts?.select as any)
+  return opts?.select ? opts.select(state) : state;
+}
+function useRouter() {
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const value = React.useContext(resolvedContext);
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
+}
+
+function defer(_promise) {
+  const promise = _promise;
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending'
     };
-  }).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;
-    }
+    const state = promise.__deferredState;
+    promise.then(data => {
+      state.status = 'success';
+      state.data = data;
+    }).catch(error => {
+      state.status = 'error';
+      state.error = error;
+    });
+  }
+  return promise;
+}
+function isDehydratedDeferred(obj) {
+  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+}
 
-    // 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];
-      }
-    }
+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;
+  }
+  if (state.status === 'error') {
+    throw state.error;
+  }
+  router.dehydrateData(key, state);
+  return [state.data];
+}
+function Await(props) {
+  const awaited = useAwaited(props);
+  return props.children(...awaited);
+}
 
-    // 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;
-      }
-    }
+class FileRoute {
+  constructor(path) {
+    this.path = path;
+  }
+  createRoute = options => {
+    const route = new Route(options);
+    route.isRoot = false;
+    return route;
+  };
+}
 
-    // Sort by length of trimmed full path
-    if (a.trimmed !== b.trimmed) {
-      return a.trimmed > b.trimmed ? 1 : -1;
+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;
+}
 
-    // Sort by original index
-    return a.index - b.index;
-  }).map((d, i) => {
-    d.child.rank = i;
-    return d.child;
-  }), [routesByPath]);
-  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
-      });
-      if (matchedParams) {
-        routeParams = matchedParams;
-        return true;
+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 false;
-    });
-    let routeCursor = foundRoute || routesById['__root__'];
-    let matchedRoutes = [routeCursor];
-    // let includingLayouts = true
-    while (routeCursor?.parentRoute) {
-      routeCursor = routeCursor.parentRoute;
-      if (routeCursor) matchedRoutes.unshift(routeCursor);
     }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 
-    // Existing matches are matches that are already loaded along with
-    // pending matches that are still loading
+function useLinkProps(options) {
+  const {
+    buildLink
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({
+      className: 'active'
+    }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    hash,
+    search,
+    params,
+    to,
+    state,
+    mask,
+    preload,
+    preloadDelay,
+    replace,
+    startTransition,
+    resetScroll,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options;
+  const linkInfo = buildLink({
+    from: options.to ? match.pathname : undefined,
+    ...options
+  });
+  if (linkInfo.type === 'external') {
+    const {
+      href
+    } = linkInfo;
+    return {
+      href
+    };
+  }
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next
+  } = linkInfo;
+  const composeHandlers = handlers => e => {
+    if (e.persist) e.persist();
+    handlers.filter(Boolean).forEach(handler => {
+      if (e.defaultPrevented) return;
+      handler(e);
+    });
+  };
 
-    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, {
+  // 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
+  }));
+});
+
+// @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;
+}
+
+// Detect if we're in the DOM
+
+function redirect(opts) {
+  opts.isRedirect = true;
+  return opts;
+}
+function isRedirect(obj) {
+  return !!obj?.isRedirect;
+}
+
+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 componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+const preloadWarning = 'Error preloading route! ☝️';
+class Router {
+  // Option-independent properties
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+  resetNextScroll = true;
+  navigateTimeout = null;
+  latestLoadPromise = Promise.resolve();
+  subscribers = new Set();
+  pendingMatches = [];
+  injectedHtml = [];
+
+  // Must build in constructor
+
+  constructor(options) {
+    this.updateOptions({
+      defaultPreloadDelay: 50,
+      context: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch
+    });
+  }
+  startReactTransition = () => {
+    warning(false, 'startReactTransition implementation is missing. If you see this, please file an issue.');
+  };
+  setState = () => {
+    warning(false, 'setState implementation is missing. If you see this, please file an issue.');
+  };
+  updateOptions = newOptions => {
+    this.options;
+    this.options = {
+      ...this.options,
+      ...newOptions
+    };
+    this.basepath = `/${trimPath(newOptions.basepath ?? '') ?? ''}`;
+    if (!this.history || this.options.history && this.options.history !== this.history) {
+      this.history = this.options.history ?? createBrowserHistory();
+      this.latestLocation = this.parseLocation();
+    }
+    if (this.options.routeTree !== this.routeTree) {
+      this.routeTree = this.options.routeTree;
+      this.buildRouteTree();
+    }
+    if (!this.state) {
+      this.state = getInitialRouterState(this.latestLocation);
+    }
+  };
+  buildRouteTree = () => {
+    this.routesById = {};
+    this.routesByPath = {};
+    const recurseRoutes = childRoutes => {
+      childRoutes.forEach((childRoute, i) => {
+        // if (typeof childRoute === 'function') {
+        //   childRoute = (childRoute as any)()
+        // }
+        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]);
+    this.flatRoutes = Object.values(this.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;
+    });
+  };
+  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: false
+      });
+      if (matchedParams) {
+        routeParams = matchedParams;
+        return true;
+      }
+      return false;
+    });
+    let routeCursor = foundRoute || this.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) {
@@ -1277,8 +1483,8 @@ function RouterProvider({
       // 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);
-      const cause = state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
+      const existingMatch = getRouteMatch(this.state, matchId);
+      const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
       if (existingMatch) {
         return {
           ...existingMatch,
@@ -1292,7 +1498,7 @@ function RouterProvider({
         id: matchId,
         routeId: route.id,
         params: routeParams,
-        pathname: joinPaths([basepath, interpolatedPath]),
+        pathname: joinPaths([this.basepath, interpolatedPath]),
         updatedAt: Date.now(),
         routeSearch: {},
         search: {},
@@ -1317,7 +1523,7 @@ function RouterProvider({
     // so that we can use the parent match's search params and context
     matches.forEach((match, i) => {
       const parentMatch = matches[i - 1];
-      const route = looseRoutesById[match.routeId];
+      const route = this.looseRoutesById[match.routeId];
       const searchInfo = (() => {
         // Validate the search params and stabilize them
         const parentSearchInfo = {
@@ -1351,28 +1557,28 @@ function RouterProvider({
       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);
+  };
+  cancelMatch = id => {
+    getRouteMatch(this.state, id)?.abortController?.abort();
+  };
+  cancelMatches = () => {
+    this.state.matches.forEach(match => {
+      this.cancelMatch(match.id);
     });
-  });
-  const buildLocation = useStableCallback(opts => {
+  };
+  buildLocation = opts => {
     const build = (dest = {}, matches) => {
-      const from = latestLocationRef.current;
+      const from = this.latestLocation;
       const fromPathname = dest.from ?? from.pathname;
-      let pathname = resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
-      const fromMatches = matchRoutes(fromPathname, from.search);
+      let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.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 => {
+        matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
           nextParams = {
             ...nextParams,
             ...fn(nextParams)
@@ -1380,8 +1586,8 @@ function RouterProvider({
         });
       }
       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) ?? [];
+      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), from.search) : from.search;
@@ -1395,7 +1601,7 @@ function RouterProvider({
       // 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 searchStr = this.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;
@@ -1406,7 +1612,7 @@ function RouterProvider({
         searchStr,
         state: nextState,
         hash,
-        href: history.createHref(`${pathname}${searchStr}${hashStr}`),
+        href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
         unmaskOnReload: dest.unmaskOnReload
       };
     };
@@ -1415,8 +1621,8 @@ function RouterProvider({
       let maskedNext = maskedDest ? build(maskedDest) : undefined;
       if (!maskedNext) {
         let params = {};
-        let foundMask = options.routeMasks?.find(d => {
-          const match = matchPathname(basepath, next.pathname, {
+        let foundMask = this.options.routeMasks?.find(d => {
+          const match = matchPathname(this.basepath, next.pathname, {
             to: d.from,
             caseSensitive: false,
             fuzzy: false
@@ -1436,8 +1642,8 @@ function RouterProvider({
           maskedNext = build(maskedDest);
         }
       }
-      const nextMatches = matchRoutes(next.pathname, next.search);
-      const maskedMatches = maskedNext ? matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+      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) {
@@ -1452,13 +1658,13 @@ function RouterProvider({
       });
     }
     return buildWithMatches(opts);
-  });
-  const commitLocation = useStableCallback(async ({
+  };
+  commitLocation = async ({
     startTransition,
     ...next
   }) => {
-    if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
-    const isSameUrl = latestLocationRef.current.href === next.href;
+    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
@@ -1485,37 +1691,37 @@ function RouterProvider({
             }
           }
         };
-        if (nextHistory.unmaskOnReload ?? options.unmaskOnReload ?? false) {
-          nextHistory.state.__tempKey = tempLocationKeyRef.current;
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
         }
       }
       const apply = () => {
-        history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
       };
       if (startTransition ?? true) {
-        startReactTransition(apply);
+        this.startReactTransition(apply);
       } else {
         apply();
       }
     }
-    resetNextScrollRef.current = next.resetScroll ?? true;
-    return latestLoadPromiseRef.current;
-  });
-  const buildAndCommitLocation = useStableCallback(({
+    this.resetNextScroll = next.resetScroll ?? true;
+    return this.latestLoadPromise;
+  };
+  buildAndCommitLocation = ({
     replace,
     resetScroll,
     startTransition,
     ...rest
   } = {}) => {
-    const location = buildLocation(rest);
-    return commitLocation({
+    const location = this.buildLocation(rest);
+    return this.commitLocation({
       ...location,
       startTransition,
       replace,
       resetScroll
     });
-  });
-  const navigate = useStableCallback(({
+  };
+  navigate = ({
     from,
     to = '',
     ...rest
@@ -1533,13 +1739,13 @@ function RouterProvider({
       isExternal = true;
     } catch (e) {}
     invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
-    return buildAndCommitLocation({
+    return this.buildAndCommitLocation({
       ...rest,
       from: fromString,
       to: toString
     });
-  });
-  const loadMatches = useStableCallback(async ({
+  };
+  loadMatches = async ({
     checkLatest,
     matches,
     preload
@@ -1551,7 +1757,7 @@ function RouterProvider({
     try {
       for (let [index, match] of matches.entries()) {
         const parentMatch = matches[index - 1];
-        const route = looseRoutesById[match.routeId];
+        const route = this.looseRoutesById[match.routeId];
         const handleError = (err, code) => {
           err.routerCode = code;
           firstBadMatchIndex = firstBadMatchIndex ?? index;
@@ -1580,19 +1786,20 @@ function RouterProvider({
           if (match.searchError) {
             handleError(match.searchError, 'VALIDATE_SEARCH');
           }
-          const parentContext = parentMatch?.context ?? options.context ?? {};
+          const parentContext = parentMatch?.context ?? this.options.context ?? {};
           const beforeLoadContext = (await route.options.beforeLoad?.({
             search: match.search,
             abortController: match.abortController,
             params: match.params,
             preload: !!preload,
             context: parentContext,
-            location: state.location,
-            navigate: opts => navigate({
+            location: this.state.location,
+            // TOOD: just expose state and router, etc
+            navigate: opts => this.navigate({
               ...opts,
               from: match.pathname
             }),
-            buildLocation,
+            buildLocation: this.buildLocation,
             cause: match.cause
           })) ?? {};
           const context = {
@@ -1610,7 +1817,7 @@ function RouterProvider({
       }
     } catch (err) {
       if (isRedirect(err)) {
-        if (!preload) navigate(err);
+        if (!preload) this.navigate(err);
         return matches;
       }
       throw err;
@@ -1620,11 +1827,11 @@ function RouterProvider({
     validResolvedMatches.forEach((match, index) => {
       matchPromises.push((async () => {
         const parentMatchPromise = matchPromises[index - 1];
-        const route = looseRoutesById[match.routeId];
+        const route = this.looseRoutesById[match.routeId];
         const handleIfRedirect = err => {
           if (isRedirect(err)) {
             if (!preload) {
-              navigate(err);
+              this.navigate(err);
             }
             return true;
           }
@@ -1637,7 +1844,7 @@ function RouterProvider({
           invalid: false
         };
         if (match.isFetching) {
-          loadPromise = getRouteMatch(state, match.id)?.loadPromise;
+          loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
         } else {
           const loaderContext = {
             params: match.params,
@@ -1646,8 +1853,8 @@ function RouterProvider({
             parentMatchPromise,
             abortController: match.abortController,
             context: match.context,
-            location: state.location,
-            navigate: opts => navigate({
+            location: this.state.location,
+            navigate: opts => this.navigate({
               ...opts,
               from: match.pathname
             }),
@@ -1695,7 +1902,7 @@ function RouterProvider({
           loadPromise
         };
         if (!preload) {
-          setState(s => ({
+          this.setState(s => ({
             ...s,
             matches: s.matches.map(d => d.id === match.id ? match : d)
           }));
@@ -1730,7 +1937,7 @@ function RouterProvider({
           };
         }
         if (!preload) {
-          setState(s => ({
+          this.setState(s => ({
             ...s,
             matches: s.matches.map(d => d.id === match.id ? match : d)
           }));
@@ -1739,17 +1946,17 @@ function RouterProvider({
     });
     await Promise.all(matchPromises);
     return matches;
-  });
-  const load = useStableCallback(async () => {
+  };
+  load = async () => {
     const promise = new Promise(async (resolve, reject) => {
-      const next = latestLocationRef.current;
-      const prevLocation = state.resolvedLocation;
+      const next = this.latestLocation;
+      const prevLocation = this.state.resolvedLocation;
       const pathDidChange = prevLocation.href !== next.href;
       let latestPromise;
 
       // Cancel any pending matches
-      cancelMatches(state);
-      router.emit({
+      this.cancelMatches();
+      this.emit({
         type: 'onBeforeLoad',
         fromLocation: prevLocation,
         toLocation: next,
@@ -1757,14 +1964,14 @@ function RouterProvider({
       });
 
       // Match the routes
-      let matches = matchRoutes(next.pathname, next.search, {
+      let matches = this.matchRoutes(next.pathname, next.search, {
         debug: true
       });
-      pendingMatchesRef.current = matches;
-      const previousMatches = state.matches;
+      this.pendingMatches = matches;
+      const previousMatches = this.state.matches;
 
       // Ingest the new matches
-      setState(s => ({
+      this.setState(s => ({
         ...s,
         status: 'pending',
         location: next,
@@ -1773,9 +1980,9 @@ function RouterProvider({
       try {
         try {
           // Load the matches
-          await loadMatches({
+          await this.loadMatches({
             matches,
-            checkLatest: () => checkLatest(promise)
+            checkLatest: () => this.checkLatest(promise)
           });
         } catch (err) {
           // swallow this error, since we'll display the
@@ -1783,12 +1990,12 @@ function RouterProvider({
         }
 
         // Only apply the latest transition
-        if (latestPromise = checkLatest(promise)) {
+        if (latestPromise = this.checkLatest(promise)) {
           return latestPromise;
         }
-        const exitingMatchIds = previousMatches.filter(id => !pendingMatchesRef.current.includes(id));
-        const enteringMatchIds = pendingMatchesRef.current.filter(id => !previousMatches.includes(id));
-        const stayingMatchIds = previousMatches.filter(id => pendingMatchesRef.current.includes(id))
+        const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
+        const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
+        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id))
 
         // setState((s) => ({
         //   ...s,
@@ -1800,10 +2007,10 @@ function RouterProvider({
         ;
         [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matches, hook]) => {
           matches.forEach(match => {
-            looseRoutesById[match.routeId].options[hook]?.(match);
+            this.looseRoutesById[match.routeId].options[hook]?.(match);
           });
         });
-        router.emit({
+        this.emit({
           type: 'onLoad',
           fromLocation: prevLocation,
           toLocation: next,
@@ -1812,28 +2019,28 @@ function RouterProvider({
         resolve();
       } catch (err) {
         // Only apply the latest transition
-        if (latestPromise = checkLatest(promise)) {
+        if (latestPromise = this.checkLatest(promise)) {
           return latestPromise;
         }
         reject(err);
       }
     });
-    latestLoadPromiseRef.current = promise;
-    return latestLoadPromiseRef.current;
-  });
-  const preloadRoute = useStableCallback(async (navigateOpts = state.location) => {
-    let next = buildLocation(navigateOpts);
-    let matches = matchRoutes(next.pathname, next.search, {
+    this.latestLoadPromise = promise;
+    return this.latestLoadPromise;
+  };
+  preloadRoute = async (navigateOpts = this.state.location) => {
+    let next = this.buildLocation(navigateOpts);
+    let matches = this.matchRoutes(next.pathname, next.search, {
       throwOnError: true
     });
-    await loadMatches({
+    await this.loadMatches({
       matches,
       preload: true,
       checkLatest: () => undefined
     });
     return [last(matches), matches];
-  });
-  const buildLink = useStableCallback(dest => {
+  };
+  buildLink = dest => {
     // If this link simply reloads the current route,
     // make sure it has a new key so it will trigger a data refresh
 
@@ -1859,18 +2066,18 @@ function RouterProvider({
       };
     } catch (e) {}
     const nextOpts = dest;
-    const next = buildLocation(nextOpts);
-    const preload = userPreload ?? options.defaultPreload;
-    const preloadDelay = userPreloadDelay ?? options.defaultPreloadDelay ?? 0;
+    const next = this.buildLocation(nextOpts);
+    const preload = userPreload ?? this.options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
 
     // Compare path/hash for matches
-    const currentPathSplit = latestLocationRef.current.pathname.split('/');
+    const currentPathSplit = this.latestLocation.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 ? latestLocationRef.current.pathname === next.pathname : pathIsFuzzyEqual;
-    const hashTest = activeOptions?.includeHash ? latestLocationRef.current.hash === next.hash : true;
-    const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(latestLocationRef.current.search, next.search, true) : true;
+    // Combine the matches based on user this.options
+    const pathTest = activeOptions?.exact ? this.latestLocation.pathname === next.pathname : pathIsFuzzyEqual;
+    const hashTest = activeOptions?.includeHash ? this.latestLocation.hash === next.hash : true;
+    const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(this.latestLocation.search, next.search, true) : true;
 
     // The final "active" test
     const isActive = pathTest && hashTest && searchTest;
@@ -1881,7 +2088,7 @@ function RouterProvider({
         e.preventDefault();
 
         // All is well? Navigate!
-        commitLocation({
+        this.commitLocation({
           ...next,
           replace,
           resetScroll,
@@ -1893,384 +2100,184 @@ function RouterProvider({
     // The click handler
     const handleFocus = e => {
       if (preload) {
-        preloadRoute(nextOpts).catch(err => {
+        this.preloadRoute(nextOpts).catch(err => {
           console.warn(err);
           console.warn(preloadWarning);
         });
       }
     };
     const handleTouchStart = e => {
-      preloadRoute(nextOpts).catch(err => {
+      this.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(() => {
-      latestLocationRef.current = parseLocation(latestLocationRef.current);
-      if (state.location !== latestLocationRef.current) {
-        startReactTransition(() => {
-          try {
-            load();
-          } catch (err) {
-            console.error(err);
-          }
-        });
-      }
-    });
-    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 matchRoute = useStableCallback((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 ? latestLocationRef.current : state.resolvedLocation;
-
-    // const baseLocation = state.resolvedLocation
-
-    if (!baseLocation) {
-      return false;
-    }
-    const match = matchPathname(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;
-  });
-  const injectedHtmlRef = React.useRef([]);
-  const injectHtml = useStableCallback(async html => {
-    injectedHtmlRef.current.push(html);
-  });
-  const dehydrateData = useStableCallback((key, getData) => {
-    if (typeof document === 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-      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 () => hydrateData(key);
-    }
-    return () => undefined;
-  });
-  const hydrateData = useStableCallback(key => {
-    if (typeof document !== 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-      return window[`__TSR_DEHYDRATED__${strKey}`];
-    }
-    return undefined;
-  });
-  React.useLayoutEffect(() => {
-    startReactTransition(() => {
-      try {
-        load();
-      } catch (err) {
-        console.error(err);
-      }
-    });
-  }, []);
-  const routerContextValue = {
-    routeTree: router.routeTree,
-    navigate,
-    buildLink,
-    state,
-    matchRoute,
-    routesById,
-    options,
-    history,
-    load,
-    buildLocation,
-    subscribe: router.subscribe,
-    resetNextScrollRef,
-    injectedHtmlRef,
-    injectHtml,
-    dehydrateData,
-    hydrateData
-  };
-  return /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: routerContextValue
-  }, /*#__PURE__*/React.createElement(Matches, null));
-}
-function getRouteMatch(state, id) {
-  return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
-}
-function useRouterState(opts) {
-  const {
-    state
-  } = useRouter();
-  // return useStore(router.__store, opts?.select as any)
-  return opts?.select ? opts.select(state) : state;
-}
-function useRouter() {
-  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
-  const value = React.useContext(resolvedContext);
-  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
-  return value;
-}
-
-function defer(_promise) {
-  const promise = _promise;
-  if (!promise.__deferredState) {
-    promise.__deferredState = {
-      uid: Math.random().toString(36).slice(2),
-      status: 'pending'
-    };
-    const state = promise.__deferredState;
-    promise.then(data => {
-      state.status = 'success';
-      state.data = data;
-    }).catch(error => {
-      state.status = 'error';
-      state.error = error;
-    });
-  }
-  return promise;
-}
-function isDehydratedDeferred(obj) {
-  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
-}
-
-function useAwaited({
-  promise
-}) {
-  const router = useRouter();
-  let state = promise.__deferredState;
-  const key = `__TSR__DEFERRED__${state.uid}`;
-  if (isDehydratedDeferred(promise)) {
-    state = router.hydrateData(key);
-    promise = Promise.resolve(state.data);
-    promise.__deferredState = state;
-  }
-  if (state.status === 'pending') {
-    throw promise;
-  }
-  if (state.status === 'error') {
-    throw state.error;
-  }
-  router.dehydrateData(key, state);
-  return [state.data];
-}
-function Await(props) {
-  const awaited = useAwaited(props);
-  return props.children(...awaited);
-}
-
-class FileRoute {
-  constructor(path) {
-    this.path = path;
-  }
-  createRoute = options => {
-    const route = new Route(options);
-    route.isRoot = false;
-    return route;
-  };
-}
-
-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];
+    const handleEnter = e => {
+      const target = e.target || {};
+      if (preload) {
+        if (target.preloadTimeout) {
+          return;
         }
+        target.preloadTimeout = setTimeout(() => {
+          target.preloadTimeout = null;
+          this.preloadRoute(nextOpts).catch(err => {
+            console.warn(err);
+            console.warn(preloadWarning);
+          });
+        }, preloadDelay);
       }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function useLinkProps(options) {
-  const {
-    buildLink
-  } = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  const {
-    // custom props
-    type,
-    children,
-    target,
-    activeProps = () => ({
-      className: 'active'
-    }),
-    inactiveProps = () => ({}),
-    activeOptions,
-    disabled,
-    hash,
-    search,
-    params,
-    to,
-    state,
-    mask,
-    preload,
-    preloadDelay,
-    replace,
-    startTransition,
-    resetScroll,
-    // element props
-    style,
-    className,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    ...rest
-  } = options;
-  const linkInfo = buildLink({
-    from: options.to ? match.pathname : undefined,
-    ...options
-  });
-  if (linkInfo.type === 'external') {
-    const {
-      href
-    } = linkInfo;
+    };
+    const handleLeave = e => {
+      const target = e.target || {};
+      if (target.preloadTimeout) {
+        clearTimeout(target.preloadTimeout);
+        target.preloadTimeout = null;
+      }
+    };
     return {
-      href
+      type: 'internal',
+      next,
+      handleFocus,
+      handleClick,
+      handleEnter,
+      handleLeave,
+      handleTouchStart,
+      isActive,
+      disabled
     };
-  }
-  const {
-    handleClick,
-    handleFocus,
-    handleEnter,
-    handleLeave,
-    handleTouchStart,
-    isActive,
-    next
-  } = linkInfo;
-  const composeHandlers = handlers => e => {
-    if (e.persist) e.persist();
-    handlers.filter(Boolean).forEach(handler => {
-      if (e.defaultPrevented) return;
-      handler(e);
+  };
+  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;
+
+    // const baseLocation = 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;
   };
 
-  // Get the active props
-  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+  // dehydrate = (): DehydratedRouter => {
+  //   return {
+  //     state: {
+  //       dehydratedMatches: this.state.matches.map((d) =>
+  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+  //       ),
+  //     },
+  //   }
+  // }
 
-  // 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
+  // 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(
+  //     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.setState((s) => {
+  //     return {
+  //       ...s,
+  //       matches: dehydratedState.dehydratedMatches as any,
+  //     }
+  //   })
+  // }
+
+  // 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);
   };
 }
-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';
@@ -2280,11 +2287,7 @@ let cache;
 const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
 const defaultGetKey = location => location.state.key;
 function useScrollRestoration(options) {
-  const {
-    state,
-    subscribe,
-    resetNextScrollRef
-  } = useRouter();
+  const router = useRouter();
   useLayoutEffect(() => {
     const getKey = options?.getKey || defaultGetKey;
     if (sessionsStorage) {
@@ -2340,7 +2343,7 @@ function useScrollRestoration(options) {
     if (typeof document !== 'undefined') {
       document.addEventListener('scroll', onScroll, true);
     }
-    const unsubOnBeforeLoad = subscribe('onBeforeLoad', event => {
+    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
       if (event.pathChanged) {
         const restoreKey = getKey(event.fromLocation);
         for (const elementSelector in cache.state.next) {
@@ -2370,12 +2373,12 @@ function useScrollRestoration(options) {
         }
       }
     });
-    const unsubOnResolved = subscribe('onResolved', event => {
+    const unsubOnResolved = router.subscribe('onResolved', event => {
       if (event.pathChanged) {
-        if (!resetNextScrollRef.current) {
+        if (!router.resetNextScroll) {
           return;
         }
-        resetNextScrollRef.current = true;
+        router.resetNextScroll = true;
         const getKey = options?.getKey || defaultGetKey;
         const restoreKey = getKey(event.toLocation);
         let windowRestored = false;