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

package/build/umd/index.development.js

@@ -1106,274 +1106,34 @@
     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__namespace.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) {
@@ -1390,66 +1150,55 @@
     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__namespace.useState(() => options.history ?? createBrowserHistory())[0];
-    const tempLocationKeyRef = React__namespace.useRef(`${Math.round(Math.random() * 10000000)}`);
-    const resetNextScrollRef = React__namespace.useRef(true);
-    const navigateTimeoutRef = React__namespace.useRef(null);
-    const latestLoadPromiseRef = React__namespace.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__namespace.useRef(parseLocation());
-    const [preState, setState] = React__namespace.useState(() => getInitialRouterState(latestLocationRef.current));
+    const [preState, setState] = React__namespace.useState(() => router.state);
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
-    const pendingMatchesRef = React__namespace.useRef([]);
     const state = React__namespace.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__namespace.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__namespace.useLayoutEffect(() => {
       if (!isTransitioning && state.resolvedLocation !== state.location) {
         router.emit({
@@ -1458,135 +1207,592 @@
           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__namespace.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__namespace.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__namespace.useLayoutEffect(() => {
+      startReactTransition(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
         }
-        return 1;
       });
-      return {
-        child: d,
-        trimmed,
-        parsed,
-        index: i,
-        score
+    }, []);
+    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: router
+    }, /*#__PURE__*/React__namespace.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__namespace.useContext(resolvedContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
       };
-    }).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__namespace.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__namespace.forwardRef((props, ref) => {
+    const linkProps = useLinkProps(props);
+    return /*#__PURE__*/React__namespace.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) {
@@ -1604,10 +1810,12 @@
         // 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 existingMatch = getRouteMatch(this.state, matchId);
+        const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
         if (existingMatch) {
           return {
-            ...existingMatch
+            ...existingMatch,
+            cause
           };
         }
 
@@ -1617,7 +1825,7 @@
           id: matchId,
           routeId: route.id,
           params: routeParams,
-          pathname: joinPaths([basepath, interpolatedPath]),
+          pathname: joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
           routeSearch: {},
           search: {},
@@ -1631,7 +1839,8 @@
           context: undefined,
           abortController: new AbortController(),
           shouldReloadDeps: undefined,
-          fetchedAt: 0
+          fetchedAt: 0,
+          cause
         };
         return routeMatch;
       });
@@ -1641,7 +1850,7 @@
       // 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 = {
@@ -1675,28 +1884,28 @@
         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)
@@ -1704,8 +1913,8 @@
           });
         }
         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;
@@ -1719,7 +1928,7 @@
         // 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;
@@ -1730,7 +1939,7 @@
           searchStr,
           state: nextState,
           hash,
-          href: history.createHref(`${pathname}${searchStr}${hashStr}`),
+          href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
           unmaskOnReload: dest.unmaskOnReload
         };
       };
@@ -1739,8 +1948,8 @@
         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
@@ -1760,8 +1969,8 @@
             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) {
@@ -1776,13 +1985,13 @@
         });
       }
       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
@@ -1809,37 +2018,37 @@
               }
             }
           };
-          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
@@ -1857,13 +2066,13 @@
         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
@@ -1875,7 +2084,7 @@
       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;
@@ -1904,19 +2113,21 @@
             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 = {
               ...parentContext,
@@ -1933,7 +2144,7 @@
         }
       } catch (err) {
         if (isRedirect(err)) {
-          if (!preload) navigate(err);
+          if (!preload) this.navigate(err);
           return matches;
         }
         throw err;
@@ -1943,11 +2154,11 @@
       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;
             }
@@ -1960,9 +2171,8 @@
             invalid: false
           };
           if (match.isFetching) {
-            loadPromise = getRouteMatch(state, match.id)?.loadPromise;
+            loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
           } else {
-            const cause = state.matches.find(d => d.id === match.id) ? 'stay' : 'enter';
             const loaderContext = {
               params: match.params,
               search: match.search,
@@ -1970,20 +2180,20 @@
               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
               }),
-              cause
+              cause: match.cause
             };
 
             // Default to reloading the route all the time
             let shouldReload = true;
             let shouldReloadDeps = typeof route.options.shouldReload === 'function' ? route.options.shouldReload?.(loaderContext) : !!(route.options.shouldReload ?? true);
-            if (cause === 'enter') {
+            if (match.cause === 'enter') {
               match.shouldReloadDeps = shouldReloadDeps;
-            } else if (cause === 'stay') {
+            } else if (match.cause === 'stay') {
               if (typeof shouldReloadDeps === 'object') {
                 // compare the deps to see if they've changed
                 shouldReload = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
@@ -2019,7 +2229,7 @@
             loadPromise
           };
           if (!preload) {
-            setState(s => ({
+            this.setState(s => ({
               ...s,
               matches: s.matches.map(d => d.id === match.id ? match : d)
             }));
@@ -2054,7 +2264,7 @@
             };
           }
           if (!preload) {
-            setState(s => ({
+            this.setState(s => ({
               ...s,
               matches: s.matches.map(d => d.id === match.id ? match : d)
             }));
@@ -2063,17 +2273,17 @@
       });
       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,
@@ -2081,14 +2291,14 @@
         });
 
         // 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,
@@ -2097,9 +2307,9 @@
         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
@@ -2107,12 +2317,12 @@
           }
 
           // 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,
@@ -2124,10 +2334,10 @@
           ;
           [[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,
@@ -2136,28 +2346,28 @@
           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
 
@@ -2183,18 +2393,18 @@
         };
       } 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;
@@ -2205,7 +2415,7 @@
           e.preventDefault();
 
           // All is well? Navigate!
-          commitLocation({
+          this.commitLocation({
             ...next,
             replace,
             resetScroll,
@@ -2217,384 +2427,184 @@
       // 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__namespace.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__namespace.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__namespace.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__namespace.createElement(routerContext.Provider, {
-      value: routerContextValue
-    }, /*#__PURE__*/React__namespace.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__namespace.useContext(resolvedContext);
-    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
-  }
-
-  function defer(_promise) {
-    const promise = _promise;
-    if (!promise.__deferredState) {
-      promise.__deferredState = {
-        uid: Math.random().toString(36).slice(2),
-        status: 'pending'
-      };
-      const state = promise.__deferredState;
-      promise.then(data => {
-        state.status = 'success';
-        state.data = data;
-      }).catch(error => {
-        state.status = 'error';
-        state.error = error;
-      });
-    }
-    return promise;
-  }
-  function isDehydratedDeferred(obj) {
-    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
-  }
-
-  function useAwaited({
-    promise
-  }) {
-    const router = useRouter();
-    let state = promise.__deferredState;
-    const key = `__TSR__DEFERRED__${state.uid}`;
-    if (isDehydratedDeferred(promise)) {
-      state = router.hydrateData(key);
-      promise = Promise.resolve(state.data);
-      promise.__deferredState = state;
-    }
-    if (state.status === 'pending') {
-      throw 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__namespace.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__namespace.forwardRef((props, ref) => {
-    const linkProps = useLinkProps(props);
-    return /*#__PURE__*/React__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
   const windowKey = 'window';
@@ -2604,11 +2614,7 @@
   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) {
@@ -2664,7 +2670,7 @@
       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) {
@@ -2694,12 +2700,12 @@
           }
         }
       });
-      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;