@tanstack/router-core 0.0.1-beta.45 → 0.0.1-beta.49

package/build/esm/index.js

@@ -8,11 +8,154 @@
  *
  * @license MIT
  */
-import { createMemoryHistory, createBrowserHistory } from 'history';
-export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
 import invariant from 'tiny-invariant';
 export { default as invariant } from 'tiny-invariant';
-import { createStore, batch } from '@solidjs/reactivity';
+import { setAutoFreeze, produce } from 'immer';
+
+// While the public API was clearly inspired by the "history" npm package,
+// This implementation attempts to be more lightweight by
+// making assumptions about the way TanStack Router works
+
+const popStateEvent = 'popstate';
+function createHistory(opts) {
+  let currentLocation = opts.getLocation();
+  let unsub = () => {};
+  let listeners = new Set();
+  const onUpdate = () => {
+    currentLocation = opts.getLocation();
+    listeners.forEach(listener => listener());
+  };
+  return {
+    get location() {
+      return currentLocation;
+    },
+    listen: cb => {
+      if (listeners.size === 0) {
+        unsub = opts.listener(onUpdate);
+      }
+      listeners.add(cb);
+      return () => {
+        listeners.delete(cb);
+        if (listeners.size === 0) {
+          unsub();
+        }
+      };
+    },
+    push: (path, state) => {
+      opts.pushState(path, state);
+      onUpdate();
+    },
+    replace: (path, state) => {
+      opts.replaceState(path, state);
+      onUpdate();
+    },
+    go: index => {
+      opts.go(index);
+      onUpdate();
+    },
+    back: () => {
+      opts.back();
+      onUpdate();
+    },
+    forward: () => {
+      opts.forward();
+      onUpdate();
+    }
+  };
+}
+function createBrowserHistory(opts) {
+  const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.hash}${window.location.search}`);
+  const createHref = opts?.createHref ?? (path => path);
+  const getLocation = () => parseLocation(getHref(), history.state);
+  return createHistory({
+    getLocation,
+    listener: onUpdate => {
+      window.addEventListener(popStateEvent, onUpdate);
+      return () => {
+        window.removeEventListener(popStateEvent, onUpdate);
+      };
+    },
+    pushState: (path, state) => {
+      window.history.pushState({
+        ...state,
+        key: createRandomKey()
+      }, '', createHref(path));
+    },
+    replaceState: (path, state) => {
+      window.history.replaceState({
+        ...state,
+        key: createRandomKey()
+      }, '', createHref(path));
+    },
+    back: () => window.history.back(),
+    forward: () => window.history.forward(),
+    go: n => window.history.go(n)
+  });
+}
+function createHashHistory() {
+  return createBrowserHistory({
+    getHref: () => window.location.hash.substring(1),
+    createHref: path => `#${path}`
+  });
+}
+function createMemoryHistory(opts = {
+  initialEntries: ['/']
+}) {
+  const entries = opts.initialEntries;
+  let index = opts.initialIndex ?? entries.length - 1;
+  let currentState = {};
+  const getLocation = () => parseLocation(entries[index], currentState);
+  return createHistory({
+    getLocation,
+    listener: onUpdate => {
+      window.addEventListener(popStateEvent, onUpdate);
+      // We might need to handle the hashchange event in the future
+      // window.addEventListener(hashChangeEvent, onUpdate)
+      return () => {
+        window.removeEventListener(popStateEvent, onUpdate);
+      };
+    },
+    pushState: (path, state) => {
+      currentState = {
+        ...state,
+        key: createRandomKey()
+      };
+      entries.push(path);
+      index++;
+    },
+    replaceState: (path, state) => {
+      currentState = {
+        ...state,
+        key: createRandomKey()
+      };
+      entries[index] = path;
+    },
+    back: () => {
+      index--;
+    },
+    forward: () => {
+      index = Math.min(index + 1, entries.length - 1);
+    },
+    go: n => window.history.go(n)
+  });
+}
+function parseLocation(href, state) {
+  let hashIndex = href.indexOf('#');
+  let searchIndex = href.indexOf('?');
+  const pathEnd = Math.min(hashIndex, searchIndex);
+  return {
+    href,
+    pathname: pathEnd > -1 ? href.substring(0, pathEnd) : href,
+    hash: hashIndex > -1 ? href.substring(hashIndex, searchIndex) : '',
+    search: searchIndex > -1 ? href.substring(searchIndex) : '',
+    state
+  };
+}
+
+// Thanks co-pilot!
+function createRandomKey() {
+  return (Math.random() + 1).toString(36).substring(7);
+}
 
 function last(arr) {
   return arr[arr.length - 1];
@@ -73,9 +216,8 @@ function resolvePath(basepath, base, to) {
         baseSegments.push(toSegment);
       } else ;
     } else if (toSegment.value === '..') {
-      var _last;
       // Extra trailing slash? pop it off
-      if (baseSegments.length > 1 && ((_last = last(baseSegments)) == null ? void 0 : _last.value) === '/') {
+      if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
         baseSegments.pop();
       }
       baseSegments.pop();
@@ -172,14 +314,14 @@ function matchByPath(basepath, from, matchLocation) {
       const isLastBaseSegment = i === baseSegments.length - 1;
       if (routeSegment) {
         if (routeSegment.type === 'wildcard') {
-          if (baseSegment != null && baseSegment.value) {
+          if (baseSegment?.value) {
             params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
             return true;
           }
           return false;
         }
         if (routeSegment.type === 'pathname') {
-          if (routeSegment.value === '/' && !(baseSegment != null && baseSegment.value)) {
+          if (routeSegment.value === '/' && !baseSegment?.value) {
             return true;
           }
           if (baseSegment) {
@@ -196,7 +338,7 @@ function matchByPath(basepath, from, matchLocation) {
           return false;
         }
         if (routeSegment.type === 'param') {
-          if ((baseSegment == null ? void 0 : baseSegment.value) === '/') {
+          if (baseSegment?.value === '/') {
             return false;
           }
           if (baseSegment.value.charAt(0) !== '$') {
@@ -262,151 +404,25 @@ function decode(str) {
   return out;
 }
 
-function createRoute(routeConfig, options, originalIndex, parent, router) {
-  const {
-    id,
-    routeId,
-    path: routePath,
-    fullPath
-  } = routeConfig;
-  let route = {
-    routeInfo: undefined,
-    routeId: id,
-    routeRouteId: routeId,
-    originalIndex,
-    routePath,
-    fullPath,
-    options,
-    router,
-    childRoutes: undefined,
-    parentRoute: parent,
-    get action() {
-      let action = router.store.actions[id] || (() => {
-        router.setStore(s => {
-          s.actions[id] = {
-            submissions: [],
-            submit: async (submission, actionOpts) => {
-              if (!route) {
-                return;
-              }
-              const invalidate = (actionOpts == null ? void 0 : actionOpts.invalidate) ?? true;
-              const [actionStore, setActionStore] = createStore({
-                submittedAt: Date.now(),
-                status: 'pending',
-                submission,
-                isMulti: !!(actionOpts != null && actionOpts.multi)
-              });
-              router.setStore(s => {
-                if (!(actionOpts != null && actionOpts.multi)) {
-                  s.actions[id].submissions = action.submissions.filter(d => d.isMulti);
-                }
-                s.actions[id].current = actionStore;
-                s.actions[id].latest = actionStore;
-                s.actions[id].submissions.push(actionStore);
-              });
-              try {
-                const res = await (route.options.action == null ? void 0 : route.options.action(submission));
-                setActionStore(s => {
-                  s.data = res;
-                });
-                if (invalidate) {
-                  router.invalidateRoute({
-                    to: '.',
-                    fromCurrent: true
-                  });
-                  await router.reload();
-                }
-                setActionStore(s => {
-                  s.status = 'success';
-                });
-                return res;
-              } catch (err) {
-                console.error(err);
-                setActionStore(s => {
-                  s.error = err;
-                  s.status = 'error';
-                });
-              }
-            }
-          };
-        });
-        return router.store.actions[id];
-      })();
-      return action;
-    },
-    get loader() {
-      let loader = router.store.loaders[id] || (() => {
-        router.setStore(s => {
-          s.loaders[id] = {
-            pending: [],
-            fetch: async loaderContext => {
-              if (!route) {
-                return;
-              }
-              const loaderState = {
-                loadedAt: Date.now(),
-                loaderContext
-              };
-              router.setStore(s => {
-                s.loaders[id].current = loaderState;
-                s.loaders[id].latest = loaderState;
-                s.loaders[id].pending.push(loaderState);
-              });
-              try {
-                return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
-              } finally {
-                router.setStore(s => {
-                  s.loaders[id].pending = s.loaders[id].pending.filter(d => d !== loaderState);
-                });
-              }
-            }
-          };
-        });
-        return router.store.loaders[id];
-      })();
-      return loader;
-    }
-
-    // buildLink: (options) => {
-    //   return router.buildLink({
-    //     ...options,
-    //     from: fullPath,
-    //   } as any) as any
-    // },
-
-    // navigate: (options) => {
-    //   return router.navigate({
-    //     ...options,
-    //     from: fullPath,
-    //   } as any) as any
-    // },
-
-    // matchRoute: (matchLocation, opts) => {
-    //   return router.matchRoute(
-    //     {
-    //       ...matchLocation,
-    //       from: fullPath,
-    //     } as any,
-    //     opts,
-    //   ) as any
-    // },
-  };
-
-  router.options.createRoute == null ? void 0 : router.options.createRoute({
-    router,
-    route
-  });
-  return route;
+class Route {
+  constructor(routeConfig, options, originalIndex, parent, router) {
+    Object.assign(this, {
+      ...routeConfig,
+      originalIndex,
+      options,
+      getRouter: () => router,
+      childRoutes: undefined,
+      getParentRoute: () => parent
+    });
+    router.options.createRoute?.({
+      router,
+      route: this
+    });
+  }
 }
 
 const rootRouteId = '__root__';
-const createRouteConfig = function (options, children, isRoot, parentId, parentPath) {
-  if (options === void 0) {
-    options = {};
-  }
-  if (isRoot === void 0) {
-    isRoot = true;
-  }
+const createRouteConfig = (options = {}, children = [], isRoot = true, parentId, parentPath) => {
   if (isRoot) {
     options.path = rootRouteId;
   }
@@ -445,80 +461,153 @@ const createRouteConfig = function (options, children, isRoot, parentId, parentP
   };
 };
 
+setAutoFreeze(false);
+let queue = [];
+let batching = false;
+function flush() {
+  if (batching) return;
+  queue.forEach(cb => cb());
+  queue = [];
+}
+function createStore(initialState, debug) {
+  const listeners = new Set();
+  const store = {
+    state: initialState,
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setState: updater => {
+      const previous = store.state;
+      store.state = produce(d => {
+        updater(d);
+      })(previous);
+      if (debug) console.log(store.state);
+      queue.push(() => listeners.forEach(listener => listener(store.state, previous)));
+      flush();
+    }
+  };
+  return store;
+}
+function batch(cb) {
+  batching = true;
+  cb();
+  batching = false;
+  flush();
+}
+
+// /**
+//  * This function converts a store to an immutable value, which is
+//  * more complex than you think. On first read, (when prev is undefined)
+//  * every value must be recursively touched so tracking is "deep".
+//  * Every object/array structure must also be cloned to
+//  * have a new reference, otherwise it will get mutated by subsequent
+//  * store updates.
+//  *
+//  * In the case that prev is supplied, we have to do deep comparisons
+//  * between prev and next objects/array references and if they are deeply
+//  * equal, we can return the prev version for referential equality.
+//  */
+// export function storeToImmutable<T>(prev: any, next: T): T {
+//   const cache = new Map()
+
+//   // Visit all nodes
+//   // clone all next structures
+//   // from bottom up, if prev === next, return prev
+
+//   function recurse(prev: any, next: any) {
+//     if (cache.has(next)) {
+//       return cache.get(next)
+//     }
+
+//     const prevIsArray = Array.isArray(prev)
+//     const nextIsArray = Array.isArray(next)
+//     const prevIsObj = isPlainObject(prev)
+//     const nextIsObj = isPlainObject(next)
+//     const nextIsComplex = nextIsArray || nextIsObj
+
+//     const isArray = prevIsArray && nextIsArray
+//     const isObj = prevIsObj && nextIsObj
+
+//     const isSameStructure = isArray || isObj
+
+//     if (nextIsComplex) {
+//       const prevSize = isArray
+//         ? prev.length
+//         : isObj
+//         ? Object.keys(prev).length
+//         : -1
+//       const nextKeys = isArray ? next : Object.keys(next)
+//       const nextSize = nextKeys.length
+
+//       let changed = false
+//       const copy: any = nextIsArray ? [] : {}
+
+//       for (let i = 0; i < nextSize; i++) {
+//         const key = isArray ? i : nextKeys[i]
+//         const prevValue = isSameStructure ? prev[key] : undefined
+//         const nextValue = next[key]
+
+//         // Recurse the new value
+//         try {
+//           console.count(key)
+//           copy[key] = recurse(prevValue, nextValue)
+//         } catch {}
+
+//         // If the new value has changed reference,
+//         // mark the obj/array as changed
+//         if (!changed && copy[key] !== prevValue) {
+//           changed = true
+//         }
+//       }
+
+//       // No items have changed!
+//       // If something has changed, return a clone of the next obj/array
+//       if (changed || prevSize !== nextSize) {
+//         cache.set(next, copy)
+//         return copy
+//       }
+
+//       // If they are exactly the same, return the prev obj/array
+//       cache.set(next, prev)
+//       return prev
+//     }
+
+//     cache.set(next, next)
+//     return next
+//   }
+
+//   return recurse(prev, next)
+// }
+
 /**
  * This function returns `a` if `b` is deeply equal.
  * If not, it will replace any deeply equal children of `b` with those of `a`.
- * This can be used for structural sharing between JSON values for example.
+ * This can be used for structural sharing between immutable JSON values for example.
+ * Do not use this with signals
  */
-function sharedClone(prev, next, touchAll) {
-  const things = new Map();
-  function recurse(prev, next) {
-    if (prev === next) {
-      return prev;
-    }
-    if (things.has(next)) {
-      return things.get(next);
-    }
-    const prevIsArray = Array.isArray(prev);
-    const nextIsArray = Array.isArray(next);
-    const prevIsObj = isPlainObject(prev);
-    const nextIsObj = isPlainObject(next);
-    const isArray = prevIsArray && nextIsArray;
-    const isObj = prevIsObj && nextIsObj;
-    const isSameStructure = isArray || isObj;
-
-    // Both are arrays or objects
-    if (isSameStructure) {
-      const aSize = isArray ? prev.length : Object.keys(prev).length;
-      const bItems = isArray ? next : Object.keys(next);
-      const bSize = bItems.length;
-      const copy = isArray ? [] : {};
-      let equalItems = 0;
-      for (let i = 0; i < bSize; i++) {
-        const key = isArray ? i : bItems[i];
-        if (copy[key] === prev[key]) {
-          equalItems++;
-        }
-      }
-      if (aSize === bSize && equalItems === aSize) {
-        things.set(next, prev);
-        return prev;
-      }
-      things.set(next, copy);
-      for (let i = 0; i < bSize; i++) {
-        const key = isArray ? i : bItems[i];
-        if (typeof bItems[i] === 'function') {
-          copy[key] = prev[key];
-        } else {
-          copy[key] = recurse(prev[key], next[key]);
-        }
-        if (copy[key] === prev[key]) {
-          equalItems++;
-        }
-      }
-      return copy;
-    }
-    if (nextIsArray) {
-      const copy = [];
-      things.set(next, copy);
-      for (let i = 0; i < next.length; i++) {
-        copy[i] = recurse(undefined, next[i]);
-      }
-      return copy;
-    }
-    if (nextIsObj) {
-      const copy = {};
-      things.set(next, copy);
-      const nextKeys = Object.keys(next);
-      for (let i = 0; i < nextKeys.length; i++) {
-        const key = nextKeys[i];
-        copy[key] = recurse(undefined, next[key]);
+function replaceEqualDeep(prev, _next) {
+  if (prev === _next) {
+    return prev;
+  }
+  const next = _next;
+  const array = Array.isArray(prev) && Array.isArray(next);
+  if (array || isPlainObject(prev) && isPlainObject(next)) {
+    const prevSize = array ? prev.length : Object.keys(prev).length;
+    const nextItems = array ? next : Object.keys(next);
+    const nextSize = nextItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < nextSize; i++) {
+      const key = array ? i : nextItems[i];
+      copy[key] = replaceEqualDeep(prev[key], next[key]);
+      if (copy[key] === prev[key]) {
+        equalItems++;
       }
-      return copy;
     }
-    return next;
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy;
   }
-  return recurse(prev, next);
+  return next;
 }
 
 // Copied from: https://github.com/jonschlinkert/is-plain-object
@@ -550,228 +639,237 @@ function isPlainObject(o) {
 function hasObjectPrototype(o) {
   return Object.prototype.toString.call(o) === '[object Object]';
 }
+function trackDeep(obj) {
+  const seen = new Set();
+  JSON.stringify(obj, (_, value) => {
+    if (typeof value === 'function') {
+      return undefined;
+    }
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) return;
+      seen.add(value);
+    }
+    return value;
+  });
+  return obj;
+}
 
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-function createRouteMatch(router, route, opts) {
-  let componentsPromise;
-  let dataPromise;
-  let latestId = '';
-  let resolve = () => {};
-  function setLoaderData(loaderData) {
-    batch(() => {
-      setStore(s => {
-        s.routeLoaderData = sharedClone(s.routeLoaderData, loaderData);
-      });
-      updateLoaderData();
+class RouteMatch {
+  abortController = new AbortController();
+  #latestId = '';
+  #resolve = () => {};
+  onLoaderDataListeners = new Set();
+  constructor(router, route, opts) {
+    Object.assign(this, {
+      route,
+      router,
+      matchId: opts.matchId,
+      pathname: opts.pathname,
+      params: opts.params,
+      store: createStore({
+        routeSearch: {},
+        search: {},
+        status: 'idle',
+        routeLoaderData: {},
+        loaderData: {},
+        isFetching: false,
+        invalid: false,
+        invalidAt: Infinity
+      })
     });
+    if (!this.__hasLoaders()) {
+      this.store.setState(s => s.status = 'success');
+    }
   }
-  function updateLoaderData() {
-    setStore(s => {
-      var _store$parentMatch;
-      s.loaderData = sharedClone(s.loaderData, {
-        ...((_store$parentMatch = store.parentMatch) == null ? void 0 : _store$parentMatch.store.loaderData),
-        ...s.routeLoaderData
+  #setLoaderData = loaderData => {
+    batch(() => {
+      this.store.setState(s => {
+        s.routeLoaderData = loaderData;
       });
+      this.#updateLoaderData();
     });
-  }
-  const [store, setStore] = createStore({
-    routeSearch: {},
-    search: {},
-    status: 'idle',
-    routeLoaderData: {},
-    loaderData: {},
-    isFetching: false,
-    invalid: false,
-    invalidAt: Infinity,
-    get isInvalid() {
-      const now = Date.now();
-      return this.invalid || this.invalidAt < now;
-    }
-  });
-  const routeMatch = {
-    ...route,
-    ...opts,
-    store,
-    // setStore,
-    router,
-    childMatches: [],
-    __: {
-      setParentMatch: parentMatch => {
-        batch(() => {
-          setStore(s => {
-            s.parentMatch = parentMatch;
-          });
-          updateLoaderData();
-        });
-      },
-      abortController: new AbortController(),
-      validate: () => {
-        var _store$parentMatch2;
-        // Validate the search params and stabilize them
-        const parentSearch = ((_store$parentMatch2 = store.parentMatch) == null ? void 0 : _store$parentMatch2.store.search) ?? router.store.currentLocation.search;
-        try {
-          const prevSearch = store.routeSearch;
-          const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-          let nextSearch = sharedClone(prevSearch, (validator == null ? void 0 : validator(parentSearch)) ?? {});
-          batch(() => {
-            // Invalidate route matches when search param stability changes
-            if (prevSearch !== nextSearch) {
-              setStore(s => s.invalid = true);
-            }
-
-            // TODO: Alright, do we need batch() here?
-            setStore(s => {
-              s.routeSearch = nextSearch;
-              s.search = sharedClone(parentSearch, {
-                ...parentSearch,
-                ...nextSearch
-              });
-            });
-          });
-          componentTypes.map(async type => {
-            const component = routeMatch.options[type];
-            if (typeof routeMatch.__[type] !== 'function') {
-              routeMatch.__[type] = component;
-            }
-          });
-        } catch (err) {
-          console.error(err);
-          const error = new Error('Invalid search params found', {
-            cause: err
-          });
-          error.code = 'INVALID_SEARCH_PARAMS';
-          setStore(s => {
-            s.status = 'error';
-            s.error = error;
-          });
+  };
+  cancel = () => {
+    this.abortController?.abort();
+  };
+  load = async loaderOpts => {
+    const now = Date.now();
+    const minMaxAge = loaderOpts?.preload ? Math.max(loaderOpts?.maxAge, loaderOpts?.gcMaxAge) : 0;
 
-          // Do not proceed with loading the route
-          return;
-        }
+    // If this is a preload, add it to the preload cache
+    if (loaderOpts?.preload && minMaxAge > 0) {
+      // If the match is currently active, don't preload it
+      if (this.router.store.state.currentMatches.find(d => d.id === this.id)) {
+        return;
       }
-    },
-    cancel: () => {
-      var _routeMatch$__$abortC;
-      (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-    },
-    invalidate: () => {
-      setStore(s => s.invalid = true);
-    },
-    hasLoaders: () => {
-      return !!(route.options.loader || componentTypes.some(d => {
-        var _route$options$d;
-        return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
-      }));
-    },
-    load: async loaderOpts => {
-      const now = Date.now();
-      const minMaxAge = loaderOpts != null && loaderOpts.preload ? Math.max(loaderOpts == null ? void 0 : loaderOpts.maxAge, loaderOpts == null ? void 0 : loaderOpts.gcMaxAge) : 0;
-
-      // If this is a preload, add it to the preload cache
-      if (loaderOpts != null && loaderOpts.preload && minMaxAge > 0) {
-        // If the match is currently active, don't preload it
-        if (router.store.currentMatches.find(d => d.matchId === routeMatch.matchId)) {
-          return;
-        }
-        router.store.matchCache[routeMatch.matchId] = {
+      this.router.store.setState(s => {
+        s.matchCache[this.id] = {
           gc: now + loaderOpts.gcMaxAge,
-          match: routeMatch
+          match: this
         };
-      }
+      });
+    }
 
-      // If the match is invalid, errored or idle, trigger it to load
-      if (store.status === 'success' && store.isInvalid || store.status === 'error' || store.status === 'idle') {
-        const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-        await routeMatch.fetch({
-          maxAge
-        });
-      }
-    },
-    fetch: async opts => {
+    // If the match is invalid, errored or idle, trigger it to load
+    if (this.store.state.status === 'success' && this.getIsInvalid() || this.store.state.status === 'error' || this.store.state.status === 'idle') {
+      const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined;
+      await this.fetch({
+        maxAge
+      });
+    }
+  };
+  fetch = async opts => {
+    this.__loadPromise = new Promise(async resolve => {
       const loadId = '' + Date.now() + Math.random();
-      latestId = loadId;
-      const checkLatest = async () => {
-        if (loadId !== latestId) {
-          // warning(true, 'Data loader is out of date!')
-          return new Promise(() => {});
-        }
-      };
+      this.#latestId = loadId;
+      const checkLatest = () => loadId !== this.#latestId ? this.__loadPromise?.then(() => resolve()) : undefined;
+      let latestPromise;
       batch(() => {
         // If the match was in an error state, set it
         // to a loading state again. Otherwise, keep it
         // as loading or resolved
-        if (store.status === 'idle') {
-          setStore(s => s.status = 'loading');
+        if (this.store.state.status === 'idle') {
+          this.store.setState(s => s.status = 'loading');
         }
 
         // We started loading the route, so it's no longer invalid
-        setStore(s => s.invalid = false);
+        this.store.setState(s => s.invalid = false);
       });
-      routeMatch.__.loadPromise = new Promise(async r => {
-        // We are now fetching, even if it's in the background of a
-        // resolved state
-        setStore(s => s.isFetching = true);
-        resolve = r;
-        componentsPromise = (async () => {
-          // then run all component and data loaders in parallel
-          // For each component type, potentially load it asynchronously
-
-          await Promise.all(componentTypes.map(async type => {
-            var _routeMatch$__$type;
-            const component = routeMatch.options[type];
-            if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
-              routeMatch.__[type] = await router.options.loadComponent(component);
-            }
-          }));
-        })();
-        dataPromise = Promise.resolve().then(async () => {
-          try {
-            if (routeMatch.options.loader) {
-              const data = await router.loadMatchData(routeMatch);
-              await checkLatest();
-              setLoaderData(data);
-            }
-            setStore(s => {
-              s.error = undefined;
-              s.status = 'success';
-              s.updatedAt = Date.now();
-              s.invalidAt = s.updatedAt + ((opts == null ? void 0 : opts.maxAge) ?? routeMatch.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0);
-            });
-            return store.routeLoaderData;
-          } catch (err) {
-            await checkLatest();
-            if (process.env.NODE_ENV !== 'production') {
-              console.error(err);
-            }
-            setStore(s => {
-              s.error = err;
-              s.status = 'error';
-              s.updatedAt = Date.now();
-            });
-            throw err;
+
+      // We are now fetching, even if it's in the background of a
+      // resolved state
+      this.store.setState(s => s.isFetching = true);
+      this.#resolve = resolve;
+      const componentsPromise = (async () => {
+        // then run all component and data loaders in parallel
+        // For each component type, potentially load it asynchronously
+
+        await Promise.all(componentTypes.map(async type => {
+          const component = this.route.options[type];
+          if (this[type]?.preload) {
+            this[type] = await this.router.options.loadComponent(component);
           }
-        });
-        const after = async () => {
-          await checkLatest();
-          setStore(s => s.isFetching = false);
-          delete routeMatch.__.loadPromise;
-          resolve();
-        };
+        }));
+      })();
+      const dataPromise = Promise.resolve().then(async () => {
         try {
-          await Promise.all([componentsPromise, dataPromise.catch(() => {})]);
-          after();
-        } catch {
-          after();
+          if (this.route.options.loader) {
+            const data = await this.router.loadMatchData(this);
+            if (latestPromise = checkLatest()) return latestPromise;
+            this.#setLoaderData(data);
+          }
+          this.store.setState(s => {
+            s.error = undefined;
+            s.status = 'success';
+            s.updatedAt = Date.now();
+            s.invalidAt = s.updatedAt + (opts?.maxAge ?? this.route.options.loaderMaxAge ?? this.router.options.defaultLoaderMaxAge ?? 0);
+          });
+          return this.store.state.routeLoaderData;
+        } catch (err) {
+          if (latestPromise = checkLatest()) return latestPromise;
+          if (process.env.NODE_ENV !== 'production') {
+            console.error(err);
+          }
+          this.store.setState(s => {
+            s.error = err;
+            s.status = 'error';
+            s.updatedAt = Date.now();
+          });
+          throw err;
         }
       });
-      await routeMatch.__.loadPromise;
-      await checkLatest();
+      const after = async () => {
+        if (latestPromise = checkLatest()) return latestPromise;
+        this.store.setState(s => s.isFetching = false);
+        this.#resolve();
+        delete this.__loadPromise;
+      };
+      try {
+        await Promise.all([componentsPromise, dataPromise.catch(() => {})]);
+        after();
+      } catch {
+        after();
+      }
+    });
+    return this.__loadPromise;
+  };
+  invalidate = async () => {
+    this.store.setState(s => s.invalid = true);
+    if (this.router.store.state.currentMatches.find(d => d.id === this.id)) {
+      await this.load();
+    }
+  };
+  __hasLoaders = () => {
+    return !!(this.route.options.loader || componentTypes.some(d => this.route.options[d]?.preload));
+  };
+  getIsInvalid = () => {
+    const now = Date.now();
+    return this.store.state.invalid || this.store.state.invalidAt < now;
+  };
+  #updateLoaderData = () => {
+    this.store.setState(s => {
+      s.loaderData = replaceEqualDeep(s.loaderData, {
+        ...this.parentMatch?.store.state.loaderData,
+        ...s.routeLoaderData
+      });
+    });
+    this.onLoaderDataListeners.forEach(listener => listener());
+  };
+  __setParentMatch = parentMatch => {
+    if (!this.parentMatch && parentMatch) {
+      this.parentMatch = parentMatch;
+      this.parentMatch.__onLoaderData(() => {
+        this.#updateLoaderData();
+      });
+    }
+  };
+  __onLoaderData = listener => {
+    this.onLoaderDataListeners.add(listener);
+    // return () => this.onLoaderDataListeners.delete(listener)
+  };
+
+  __validate = () => {
+    // Validate the search params and stabilize them
+    const parentSearch = this.parentMatch?.store.state.search ?? this.router.store.state.latestLocation.search;
+    try {
+      const prevSearch = this.store.state.routeSearch;
+      const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
+      let nextSearch = validator?.(parentSearch) ?? {};
+      batch(() => {
+        // Invalidate route matches when search param stability changes
+        if (prevSearch !== nextSearch) {
+          this.store.setState(s => s.invalid = true);
+        }
+        this.store.setState(s => {
+          s.routeSearch = nextSearch;
+          s.search = {
+            ...parentSearch,
+            ...nextSearch
+          };
+        });
+      });
+      componentTypes.map(async type => {
+        const component = this.route.options[type];
+        if (typeof this[type] !== 'function') {
+          this[type] = component;
+        }
+      });
+    } catch (err) {
+      console.error(err);
+      const error = new Error('Invalid search params found', {
+        cause: err
+      });
+      error.code = 'INVALID_SEARCH_PARAMS';
+      this.store.setState(s => {
+        s.status = 'error';
+        s.error = error;
+      });
+
+      // Do not proceed with loading the route
+      return;
     }
   };
-  if (!routeMatch.hasLoaders()) {
-    setStore(s => s.status = 'success');
-  }
-  return routeMatch;
 }
 
 const defaultParseSearch = parseSearchWith(JSON.parse);
@@ -821,768 +919,792 @@ function stringifySearchWith(stringify) {
   };
 }
 
-var _window$document;
-// Detect if we're in the DOM
-const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement);
+const defaultFetchServerDataFn = async ({
+  router,
+  routeMatch
+}) => {
+  const next = router.buildNext({
+    to: '.',
+    search: d => ({
+      ...(d ?? {}),
+      __data: {
+        matchId: routeMatch.id
+      }
+    })
+  });
+  const res = await fetch(next.href, {
+    method: 'GET',
+    signal: routeMatch.abortController.signal
+  });
+  if (res.ok) {
+    return res.json();
+  }
+  throw new Error('Failed to fetch match data');
+};
+class Router {
+  // __location: Location<TAllRouteInfo['fullSearchSchema']>
 
-// This is the default history object if none is defined
-const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrowserHistory();
-function getInitialRouterState() {
-  return {
-    status: 'idle',
-    latestLocation: null,
-    currentLocation: null,
-    currentMatches: [],
-    actions: {},
-    loaders: {},
-    lastUpdated: Date.now(),
-    matchCache: {},
-    get isFetching() {
-      return this.status === 'loading' || this.currentMatches.some(d => d.store.isFetching);
-    },
-    get isPreloading() {
-      return Object.values(this.matchCache).some(d => d.match.store.isFetching && !this.currentMatches.find(dd => dd.matchId === d.match.matchId));
-    }
-  };
-}
-function createRouter(userOptions) {
-  const originalOptions = {
-    defaultLoaderGcMaxAge: 5 * 60 * 1000,
-    defaultLoaderMaxAge: 0,
-    defaultPreloadMaxAge: 2000,
-    defaultPreloadDelay: 50,
-    context: undefined,
-    ...userOptions,
-    stringifySearch: (userOptions == null ? void 0 : userOptions.stringifySearch) ?? defaultStringifySearch,
-    parseSearch: (userOptions == null ? void 0 : userOptions.parseSearch) ?? defaultParseSearch
-  };
-  const [store, setStore] = createStore(getInitialRouterState());
-  let navigationPromise;
-  let startedLoadingAt = Date.now();
-  let resolveNavigation = () => {};
-  function onFocus() {
-    router.load();
+  startedLoadingAt = Date.now();
+  resolveNavigation = () => {};
+  constructor(options) {
+    this.options = {
+      defaultLoaderGcMaxAge: 5 * 60 * 1000,
+      defaultLoaderMaxAge: 0,
+      defaultPreloadMaxAge: 2000,
+      defaultPreloadDelay: 50,
+      context: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch,
+      fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
+    };
+    this.history = this.options?.history ?? isServer ? createMemoryHistory() : createBrowserHistory();
+    this.store = createStore(getInitialRouterState());
+    this.basepath = '';
+    this.update(options);
+
+    // Allow frameworks to hook into the router creation
+    this.options.createRouter?.(this);
   }
-  function buildRouteTree(rootRouteConfig) {
-    const recurseRoutes = (routeConfigs, parent) => {
-      return routeConfigs.map((routeConfig, i) => {
-        const routeOptions = routeConfig.options;
-        const route = createRoute(routeConfig, routeOptions, i, parent, router);
-        const existingRoute = router.routesById[route.routeId];
-        if (existingRoute) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(`Duplicate routes found with id: ${String(route.routeId)}`, router.routesById, route);
-          }
-          throw new Error();
+  reset = () => {
+    this.store.setState(s => Object.assign(s, getInitialRouterState()));
+  };
+  mount = () => {
+    // Mount only does anything on the client
+    if (!isServer) {
+      // If the router matches are empty, load the matches
+      if (!this.store.state.currentMatches.length) {
+        this.load();
+      }
+      const unsubHistory = this.history.listen(() => {
+        this.load(this.#parseLocation(this.store.state.latestLocation));
+      });
+      const visibilityChangeEvent = 'visibilitychange';
+      const focusEvent = 'focus';
+
+      // addEventListener does not exist in React Native, but window does
+      // In the future, we might need to invert control here for more adapters
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (window.addEventListener) {
+        // Listen to visibilitychange and focus
+        window.addEventListener(visibilityChangeEvent, this.#onFocus, false);
+        window.addEventListener(focusEvent, this.#onFocus, false);
+      }
+      return () => {
+        unsubHistory();
+        if (window.removeEventListener) {
+          // Be sure to unsubscribe if a new handler is set
+
+          window.removeEventListener(visibilityChangeEvent, this.#onFocus);
+          window.removeEventListener(focusEvent, this.#onFocus);
         }
-        router.routesById[route.routeId] = route;
-        const children = routeConfig.children;
-        route.childRoutes = children != null && children.length ? recurseRoutes(children, route) : undefined;
-        return route;
+      };
+    }
+    return () => {};
+  };
+  update = opts => {
+    if (!this.store.state.latestLocation) {
+      this.store.setState(s => {
+        s.latestLocation = this.#parseLocation();
+        s.currentLocation = s.latestLocation;
       });
-    };
-    const routes = recurseRoutes([rootRouteConfig]);
-    return routes[0];
-  }
-  function parseLocation(location, previousLocation) {
-    const parsedSearch = router.options.parseSearch(location.search);
-    return {
-      pathname: location.pathname,
-      searchStr: location.search,
-      search: sharedClone(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
-      hash: location.hash.split('#').reverse()[0] ?? '',
-      href: `${location.pathname}${location.search}${location.hash}`,
-      state: location.state,
-      key: location.key
-    };
-  }
-  function navigate(location) {
-    const next = router.buildNext(location);
-    return commitLocation(next, location.replace);
-  }
-  function buildLocation(dest) {
-    var _last, _dest$__preSearchFilt, _dest$__preSearchFilt2, _dest$__postSearchFil;
-    if (dest === void 0) {
-      dest = {};
     }
-    const fromPathname = dest.fromCurrent ? store.latestLocation.pathname : dest.from ?? store.latestLocation.pathname;
-    let pathname = resolvePath(router.basepath ?? '/', fromPathname, `${dest.to ?? '.'}`);
-    const fromMatches = router.matchRoutes(store.latestLocation.pathname, {
-      strictParseParams: true
+    Object.assign(this.options, opts);
+    const {
+      basepath,
+      routeConfig
+    } = this.options;
+    this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
+    if (routeConfig) {
+      this.routesById = {};
+      this.routeTree = this.#buildRouteTree(routeConfig);
+    }
+    return this;
+  };
+  buildNext = opts => {
+    const next = this.#buildLocation(opts);
+    const matches = this.matchRoutes(next.pathname);
+    const __preSearchFilters = matches.map(match => match.route.options.preSearchFilters ?? []).flat().filter(Boolean);
+    const __postSearchFilters = matches.map(match => match.route.options.postSearchFilters ?? []).flat().filter(Boolean);
+    return this.#buildLocation({
+      ...opts,
+      __preSearchFilters,
+      __postSearchFilters
     });
-    const toMatches = router.matchRoutes(pathname);
-    const prevParams = {
-      ...((_last = last(fromMatches)) == null ? void 0 : _last.params)
-    };
-    let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-    if (nextParams) {
-      toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
-        Object.assign({}, nextParams, fn(nextParams));
-      });
-    }
-    pathname = interpolatePath(pathname, nextParams ?? {});
+  };
+  cancelMatches = () => {
+    [...this.store.state.currentMatches, ...(this.store.state.pendingMatches || [])].forEach(match => {
+      match.cancel();
+    });
+  };
+  load = async next => {
+    let now = Date.now();
+    const startedAt = now;
+    this.startedLoadingAt = startedAt;
 
-    // Pre filters first
-    const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), store.latestLocation.search) : store.latestLocation.search;
+    // Cancel any pending matches
+    this.cancelMatches();
+    let matches;
+    batch(() => {
+      if (next) {
+        // Ingest the new location
+        this.store.setState(s => {
+          s.latestLocation = next;
+        });
+      }
 
-    // Then the link/navigate function
-    const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-    : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-    : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
-    : {};
+      // Match the routes
+      matches = this.matchRoutes(this.store.state.latestLocation.pathname, {
+        strictParseParams: true
+      });
+      this.store.setState(s => {
+        s.status = 'loading';
+        s.pendingMatches = matches;
+        s.pendingLocation = this.store.state.latestLocation;
+      });
+    });
 
-    // Then post filters
-    const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-    const search = sharedClone(store.latestLocation.search, postFilteredSearch);
-    const searchStr = router.options.stringifySearch(search);
-    let hash = dest.hash === true ? store.latestLocation.hash : functionalUpdate(dest.hash, store.latestLocation.hash);
-    hash = hash ? `#${hash}` : '';
-    return {
-      pathname,
-      search,
-      searchStr,
-      state: store.latestLocation.state,
-      hash,
-      href: `${pathname}${searchStr}${hash}`,
-      key: dest.key
-    };
-  }
-  function commitLocation(next, replace) {
-    const id = '' + Date.now() + Math.random();
-    let nextAction = 'replace';
-    if (!replace) {
-      nextAction = 'push';
+    // Load the matches
+    try {
+      await this.loadMatches(matches);
+    } catch (err) {
+      console.warn(err);
+      invariant(false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
     }
-    const isSameUrl = parseLocation(router.history.location).href === next.href;
-    if (isSameUrl && !next.key) {
-      nextAction = 'replace';
+    if (this.startedLoadingAt !== startedAt) {
+      // Ignore side-effects of outdated side-effects
+      return this.navigationPromise;
     }
-    router.history[nextAction]({
-      pathname: next.pathname,
-      hash: next.hash,
-      search: next.searchStr
-    }, {
-      id,
-      ...next.state
+    const previousMatches = this.store.state.currentMatches;
+    const exiting = [],
+      staying = [];
+    previousMatches.forEach(d => {
+      if (matches.find(dd => dd.id === d.id)) {
+        staying.push(d);
+      } else {
+        exiting.push(d);
+      }
     });
-    return navigationPromise = new Promise(resolve => {
-      const previousNavigationResolve = resolveNavigation;
-      resolveNavigation = () => {
-        previousNavigationResolve();
-        resolve();
-      };
+    const entering = matches.filter(d => {
+      return !previousMatches.find(dd => dd.id === d.id);
     });
-  }
-  const router = {
-    types: undefined,
-    // public api
-    history: (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory(),
-    store,
-    setStore,
-    options: originalOptions,
-    basepath: '',
-    routeTree: undefined,
-    routesById: {},
-    reset: () => {
-      setStore(s => Object.assign(s, getInitialRouterState()));
-    },
-    getRoute: id => {
-      return router.routesById[id];
-    },
-    dehydrate: () => {
-      return {
-        store: {
-          ...pick(store, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
-          currentMatches: store.currentMatches.map(match => ({
-            matchId: match.matchId,
-            store: pick(match.store, ['status', 'routeLoaderData', 'isInvalid', 'invalidAt'])
-          }))
-        },
-        context: router.options.context
-      };
-    },
-    hydrate: dehydratedRouter => {
-      setStore(s => {
-        // Update the context TODO: make this part of state?
-        router.options.context = dehydratedRouter.context;
-
-        // Match the routes
-        const currentMatches = router.matchRoutes(dehydratedRouter.store.latestLocation.pathname, {
-          strictParseParams: true
-        });
-        currentMatches.forEach((match, index) => {
-          const dehydratedMatch = dehydratedRouter.store.currentMatches[index];
-          invariant(dehydratedMatch && dehydratedMatch.matchId === match.matchId, 'Oh no! There was a hydration mismatch when attempting to restore the state of the router! 😬');
-          Object.assign(match, dehydratedMatch);
-        });
-        currentMatches.forEach(match => match.__.validate());
-        Object.assign(s, {
-          ...dehydratedRouter.store,
-          currentMatches
-        });
+    now = Date.now();
+    exiting.forEach(d => {
+      d.__onExit?.({
+        params: d.params,
+        search: d.store.state.routeSearch
       });
-    },
-    mount: () => {
-      // Mount only does anything on the client
-      if (!isServer) {
-        // If the router matches are empty, load the matches
-        if (!store.currentMatches.length) {
-          router.load();
-        }
-        const unsub = router.history.listen(event => {
-          router.load(parseLocation(event.location, store.latestLocation));
-        });
 
-        // addEventListener does not exist in React Native, but window does
-        // In the future, we might need to invert control here for more adapters
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (window.addEventListener) {
-          // Listen to visibilitychange and focus
-          window.addEventListener('visibilitychange', onFocus, false);
-          window.addEventListener('focus', onFocus, false);
-        }
-        return () => {
-          unsub();
-          if (window.removeEventListener) {
-            // Be sure to unsubscribe if a new handler is set
-            window.removeEventListener('visibilitychange', onFocus);
-            window.removeEventListener('focus', onFocus);
-          }
-        };
-      }
-      return () => {};
-    },
-    update: opts => {
-      const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
-      if (!store.latestLocation || newHistory) {
-        if (opts != null && opts.history) {
-          router.history = opts.history;
-        }
-        setStore(s => {
-          s.latestLocation = parseLocation(router.history.location);
-          s.currentLocation = s.latestLocation;
+      // Clear non-loading error states when match leaves
+      if (d.store.state.status === 'error' && !d.store.state.isFetching) {
+        d.store.setState(s => {
+          s.status = 'idle';
+          s.error = undefined;
         });
       }
-      Object.assign(router.options, opts);
-      const {
-        basepath,
-        routeConfig
-      } = router.options;
-      router.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
-      if (routeConfig) {
-        router.routesById = {};
-        router.routeTree = buildRouteTree(routeConfig);
-      }
-      return router;
-    },
-    cancelMatches: () => {
-      [...store.currentMatches, ...(store.pendingMatches || [])].forEach(match => {
-        match.cancel();
-      });
-    },
-    load: async next => {
-      let now = Date.now();
-      const startedAt = now;
-      startedLoadingAt = startedAt;
-
-      // Cancel any pending matches
-      router.cancelMatches();
-      let matches;
-      batch(() => {
-        if (next) {
-          // Ingest the new location
-          setStore(s => {
-            s.latestLocation = next;
-          });
-        }
-
-        // Match the routes
-        matches = router.matchRoutes(store.latestLocation.pathname, {
-          strictParseParams: true
-        });
-        console.log('set loading', matches);
-        setStore(s => {
-          s.status = 'loading';
-          s.pendingMatches = matches;
-          s.pendingLocation = store.latestLocation;
-        });
-      });
-
-      // Load the matches
-      try {
-        await router.loadMatches(matches);
-      } catch (err) {
-        console.log(err);
-        invariant(false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
-      }
-      if (startedLoadingAt !== startedAt) {
-        // Ignore side-effects of outdated side-effects
-        return navigationPromise;
-      }
-      const previousMatches = store.currentMatches;
-      const exiting = [],
-        staying = [];
-      previousMatches.forEach(d => {
-        if (matches.find(dd => dd.matchId === d.matchId)) {
-          staying.push(d);
-        } else {
-          exiting.push(d);
-        }
-      });
-      const entering = matches.filter(d => {
-        return !previousMatches.find(dd => dd.matchId === d.matchId);
-      });
-      now = Date.now();
-      exiting.forEach(d => {
-        d.__.onExit == null ? void 0 : d.__.onExit({
-          params: d.params,
-          search: d.store.routeSearch
-        });
-
-        // Clear idle error states when match leaves
-        if (d.store.status === 'error' && !d.store.isFetching) {
-          d.store.status = 'idle';
-          d.store.error = undefined;
-        }
-        const gc = Math.max(d.options.loaderGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0, d.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0);
-        if (gc > 0) {
-          store.matchCache[d.matchId] = {
+      const gc = Math.max(d.route.options.loaderGcMaxAge ?? this.options.defaultLoaderGcMaxAge ?? 0, d.route.options.loaderMaxAge ?? this.options.defaultLoaderMaxAge ?? 0);
+      if (gc > 0) {
+        this.store.setState(s => {
+          s.matchCache[d.id] = {
             gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
             match: d
           };
-        }
-      });
-      staying.forEach(d => {
-        d.options.onTransition == null ? void 0 : d.options.onTransition({
-          params: d.params,
-          search: d.store.routeSearch
-        });
-      });
-      entering.forEach(d => {
-        d.__.onExit = d.options.onLoaded == null ? void 0 : d.options.onLoaded({
-          params: d.params,
-          search: d.store.search
         });
-        delete store.matchCache[d.matchId];
-      });
-      if (startedLoadingAt !== startedAt) {
-        // Ignore side-effects of match loading
-        return;
       }
-      matches.forEach(match => {
-        // Clear actions
-        if (match.action) {
-          // TODO: Check reactivity here
-          match.action.current = undefined;
-          match.action.submissions = [];
-        }
+    });
+    staying.forEach(d => {
+      d.route.options.onTransition?.({
+        params: d.params,
+        search: d.store.state.routeSearch
       });
-      setStore(s => {
-        console.log('set', matches);
-        Object.assign(s, {
-          status: 'idle',
-          currentLocation: store.latestLocation,
-          currentMatches: matches,
-          pendingLocation: undefined,
-          pendingMatches: undefined
-        });
+    });
+    entering.forEach(d => {
+      d.__onExit = d.route.options.onLoaded?.({
+        params: d.params,
+        search: d.store.state.search
       });
-      resolveNavigation();
-    },
-    cleanMatchCache: () => {
-      const now = Date.now();
-      setStore(s => {
-        Object.keys(s.matchCache).forEach(matchId => {
-          const entry = s.matchCache[matchId];
-
-          // Don't remove loading matches
-          if (entry.match.store.status === 'loading') {
-            return;
-          }
+      delete this.store.state.matchCache[d.id];
+    });
+    this.store.setState(s => {
+      Object.assign(s, {
+        status: 'idle',
+        currentLocation: this.store.state.latestLocation,
+        currentMatches: matches,
+        pendingLocation: undefined,
+        pendingMatches: undefined
+      });
+    });
+    this.options.onRouteChange?.();
+    this.resolveNavigation();
+  };
+  cleanMatchCache = () => {
+    const now = Date.now();
+    this.store.setState(s => {
+      Object.keys(s.matchCache).forEach(matchId => {
+        const entry = s.matchCache[matchId];
 
-          // Do not remove successful matches that are still valid
-          if (entry.gc > 0 && entry.gc > now) {
-            return;
-          }
+        // Don't remove loading matches
+        if (entry.match.store.state.status === 'loading') {
+          return;
+        }
 
-          // Everything else gets removed
-          delete s.matchCache[matchId];
-        });
-      });
-    },
-    loadRoute: async function (navigateOpts) {
-      if (navigateOpts === void 0) {
-        navigateOpts = store.latestLocation;
-      }
-      const next = router.buildNext(navigateOpts);
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await router.loadMatches(matches);
-      return matches;
-    },
-    preloadRoute: async function (navigateOpts, loaderOpts) {
-      if (navigateOpts === void 0) {
-        navigateOpts = store.latestLocation;
-      }
-      const next = router.buildNext(navigateOpts);
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await router.loadMatches(matches, {
-        preload: true,
-        maxAge: loaderOpts.maxAge ?? router.options.defaultPreloadMaxAge ?? router.options.defaultLoaderMaxAge ?? 0,
-        gcMaxAge: loaderOpts.gcMaxAge ?? router.options.defaultPreloadGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0
+        // Do not remove successful matches that are still valid
+        if (entry.gc > 0 && entry.gc > now) {
+          return;
+        }
+
+        // Everything else gets removed
+        delete s.matchCache[matchId];
       });
+    });
+  };
+  getRoute = id => {
+    const route = this.routesById[id];
+    invariant(route, `Route with id "${id}" not found`);
+    return route;
+  };
+  loadRoute = async (navigateOpts = this.store.state.latestLocation) => {
+    const next = this.buildNext(navigateOpts);
+    const matches = this.matchRoutes(next.pathname, {
+      strictParseParams: true
+    });
+    await this.loadMatches(matches);
+    return matches;
+  };
+  preloadRoute = async (navigateOpts = this.store.state.latestLocation, loaderOpts) => {
+    const next = this.buildNext(navigateOpts);
+    const matches = this.matchRoutes(next.pathname, {
+      strictParseParams: true
+    });
+    await this.loadMatches(matches, {
+      preload: true,
+      maxAge: loaderOpts.maxAge ?? this.options.defaultPreloadMaxAge ?? this.options.defaultLoaderMaxAge ?? 0,
+      gcMaxAge: loaderOpts.gcMaxAge ?? this.options.defaultPreloadGcMaxAge ?? this.options.defaultLoaderGcMaxAge ?? 0
+    });
+    return matches;
+  };
+  matchRoutes = (pathname, opts) => {
+    const matches = [];
+    if (!this.routeTree) {
       return matches;
-    },
-    matchRoutes: (pathname, opts) => {
-      router.cleanMatchCache();
-      const matches = [];
-      if (!router.routeTree) {
-        return matches;
-      }
-      const existingMatches = [...store.currentMatches, ...(store.pendingMatches ?? [])];
-      const recurse = async routes => {
-        var _foundRoute$childRout;
-        const parentMatch = last(matches);
-        let params = (parentMatch == null ? void 0 : parentMatch.params) ?? {};
-        const filteredRoutes = (router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) ?? routes;
-        let foundRoutes = [];
-        const findMatchInRoutes = (parentRoutes, routes) => {
-          routes.some(route => {
-            var _route$childRoutes, _route$childRoutes2;
-            if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
-              return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
-            }
-            const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length);
-            const matchParams = matchPathname(router.basepath, pathname, {
-              to: route.fullPath,
-              fuzzy,
-              caseSensitive: route.options.caseSensitive ?? router.options.caseSensitive
-            });
-            if (matchParams) {
-              let parsedParams;
-              try {
-                parsedParams = (route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) ?? matchParams;
-              } catch (err) {
-                if (opts != null && opts.strictParseParams) {
-                  throw err;
-                }
+    }
+    const existingMatches = [...this.store.state.currentMatches, ...(this.store.state.pendingMatches ?? [])];
+    const recurse = async routes => {
+      const parentMatch = last(matches);
+      let params = parentMatch?.params ?? {};
+      const filteredRoutes = this.options.filterRoutes?.(routes) ?? routes;
+      let foundRoutes = [];
+      const findMatchInRoutes = (parentRoutes, routes) => {
+        routes.some(route => {
+          if (!route.path && route.childRoutes?.length) {
+            return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
+          }
+          const fuzzy = !!(route.path !== '/' || route.childRoutes?.length);
+          const matchParams = matchPathname(this.basepath, pathname, {
+            to: route.fullPath,
+            fuzzy,
+            caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive
+          });
+          if (matchParams) {
+            let parsedParams;
+            try {
+              parsedParams = route.options.parseParams?.(matchParams) ?? matchParams;
+            } catch (err) {
+              if (opts?.strictParseParams) {
+                throw err;
               }
-              params = {
-                ...params,
-                ...parsedParams
-              };
-            }
-            if (!!matchParams) {
-              foundRoutes = [...parentRoutes, route];
             }
-            return !!foundRoutes.length;
-          });
+            params = {
+              ...params,
+              ...parsedParams
+            };
+          }
+          if (!!matchParams) {
+            foundRoutes = [...parentRoutes, route];
+          }
           return !!foundRoutes.length;
-        };
-        findMatchInRoutes([], filteredRoutes);
-        if (!foundRoutes.length) {
-          return;
-        }
-        foundRoutes.forEach(foundRoute => {
-          var _store$matchCache$mat;
-          const interpolatedPath = interpolatePath(foundRoute.routePath, params);
-          const matchId = interpolatePath(foundRoute.routeId, params, true);
-          const match = existingMatches.find(d => d.matchId === matchId) || ((_store$matchCache$mat = store.matchCache[matchId]) == null ? void 0 : _store$matchCache$mat.match) || createRouteMatch(router, foundRoute, {
-            parentMatch,
-            matchId,
-            params,
-            pathname: joinPaths([router.basepath, interpolatedPath])
-          });
-          matches.push(match);
         });
-        const foundRoute = last(foundRoutes);
-        if ((_foundRoute$childRout = foundRoute.childRoutes) != null && _foundRoute$childRout.length) {
-          recurse(foundRoute.childRoutes);
-        }
+        return !!foundRoutes.length;
       };
-      recurse([router.routeTree]);
-      linkMatches(matches);
-      return matches;
-    },
-    loadMatches: async (resolvedMatches, loaderOpts) => {
-      resolvedMatches.forEach(async match => {
-        // Validate the match (loads search params etc)
-        match.__.validate();
+      findMatchInRoutes([], filteredRoutes);
+      if (!foundRoutes.length) {
+        return;
+      }
+      foundRoutes.forEach(foundRoute => {
+        const interpolatedPath = interpolatePath(foundRoute.path, params);
+        const matchId = interpolatePath(foundRoute.id, params, true);
+        const match = existingMatches.find(d => d.id === matchId) || this.store.state.matchCache[matchId]?.match || new RouteMatch(this, foundRoute, {
+          matchId,
+          params,
+          pathname: joinPaths([this.basepath, interpolatedPath])
+        });
+        matches.push(match);
       });
+      const foundRoute = last(foundRoutes);
+      if (foundRoute.childRoutes?.length) {
+        recurse(foundRoute.childRoutes);
+      }
+    };
+    recurse([this.routeTree]);
+    linkMatches(matches);
+    return matches;
+  };
+  loadMatches = async (resolvedMatches, loaderOpts) => {
+    this.cleanMatchCache();
+    resolvedMatches.forEach(async match => {
+      // Validate the match (loads search params etc)
+      match.__validate();
+    });
 
-      // Check each match middleware to see if the route can be accessed
-      await Promise.all(resolvedMatches.map(async match => {
-        try {
-          await (match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
-            router: router,
-            match
-          }));
-        } catch (err) {
-          if (!(loaderOpts != null && loaderOpts.preload)) {
-            match.options.onLoadError == null ? void 0 : match.options.onLoadError(err);
-          }
-          throw err;
-        }
-      }));
-      const matchPromises = resolvedMatches.map(async match => {
-        var _search$__data;
-        const search = match.store.search;
-        if ((_search$__data = search.__data) != null && _search$__data.matchId && search.__data.matchId !== match.matchId) {
-          return;
-        }
-        match.load(loaderOpts);
-        if (match.store.status !== 'success' && match.__.loadPromise) {
-          // Wait for the first sign of activity from the match
-          await match.__.loadPromise;
-        }
-      });
-      await Promise.all(matchPromises);
-    },
-    loadMatchData: async routeMatch => {
-      if (isServer || !router.options.useServerData) {
-        return (await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
-          // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
-          params: routeMatch.params,
-          search: routeMatch.store.routeSearch,
-          signal: routeMatch.__.abortController.signal
-        }))) || {};
-      } else {
-        const next = router.buildNext({
-          to: '.',
-          search: d => ({
-            ...(d ?? {}),
-            __data: {
-              matchId: routeMatch.matchId
-            }
-          })
+    // Check each match middleware to see if the route can be accessed
+    await Promise.all(resolvedMatches.map(async match => {
+      try {
+        await match.route.options.beforeLoad?.({
+          router: this,
+          match
         });
+      } catch (err) {
+        if (!loaderOpts?.preload) {
+          match.route.options.onLoadError?.(err);
+        }
+        throw err;
+      }
+    }));
+    const matchPromises = resolvedMatches.map(async (match, index) => {
+      const prevMatch = resolvedMatches[1];
+      const search = match.store.state.search;
+      if (search.__data?.matchId && search.__data.matchId !== match.id) {
+        return;
+      }
+      match.load(loaderOpts);
+      if (match.store.state.status !== 'success' && match.__loadPromise) {
+        // Wait for the first sign of activity from the match
+        await match.__loadPromise;
+      }
+      if (prevMatch) {
+        await prevMatch.__loadPromise;
+      }
+    });
+    await Promise.all(matchPromises);
+  };
+  loadMatchData = async routeMatch => {
+    if (isServer || !this.options.useServerData) {
+      return (await routeMatch.route.options.loader?.({
+        // parentLoaderPromise: routeMatch.parentMatch.dataPromise,
+        params: routeMatch.params,
+        search: routeMatch.store.state.routeSearch,
+        signal: routeMatch.abortController.signal
+      })) || {};
+    } else {
+      // Refresh:
+      // '/dashboard'
+      // '/dashboard/invoices/'
+      // '/dashboard/invoices/123'
 
-        // Refresh:
-        // '/dashboard'
-        // '/dashboard/invoices/'
-        // '/dashboard/invoices/123'
-
-        // New:
-        // '/dashboard/invoices/456'
-
-        // TODO: batch requests when possible
+      // New:
+      // '/dashboard/invoices/456'
 
-        const res = await fetch(next.href, {
-          method: 'GET'
-          // signal: routeMatch.__.abortController.signal,
-        });
+      // TODO: batch requests when possible
 
-        if (res.ok) {
-          return res.json();
-        }
-        throw new Error('Failed to fetch match data');
-      }
-    },
-    invalidateRoute: opts => {
-      const next = router.buildNext(opts);
-      const unloadedMatchIds = router.matchRoutes(next.pathname).map(d => d.matchId);
-      [...store.currentMatches, ...(store.pendingMatches ?? [])].forEach(match => {
-        if (unloadedMatchIds.includes(match.matchId)) {
-          match.invalidate();
-        }
+      return this.options.fetchServerDataFn({
+        router: this,
+        routeMatch
       });
-    },
-    reload: () => navigate({
+    }
+  };
+  invalidateRoute = async opts => {
+    const next = this.buildNext(opts);
+    const unloadedMatchIds = this.matchRoutes(next.pathname).map(d => d.id);
+    await Promise.allSettled([...this.store.state.currentMatches, ...(this.store.state.pendingMatches ?? [])].map(async match => {
+      if (unloadedMatchIds.includes(match.id)) {
+        return match.invalidate();
+      }
+    }));
+  };
+  reload = () => {
+    this.navigate({
       fromCurrent: true,
       replace: true,
       search: true
-    }),
-    resolvePath: (from, path) => {
-      return resolvePath(router.basepath, from, cleanPath(path));
-    },
-    matchRoute: (location, opts) => {
-      // const location = router.buildNext(opts)
+    });
+  };
+  resolvePath = (from, path) => {
+    return resolvePath(this.basepath, from, cleanPath(path));
+  };
+  navigate = async ({
+    from,
+    to = '.',
+    search,
+    hash,
+    replace,
+    params
+  }) => {
+    // If this link simply reloads the current route,
+    // make sure it has a new key so it will trigger a data refresh
 
-      location = {
-        ...location,
-        to: location.to ? router.resolvePath(location.from ?? '', location.to) : undefined
-      };
-      const next = router.buildNext(location);
-      if (opts != null && opts.pending) {
-        if (!store.pendingLocation) {
-          return false;
-        }
-        return !!matchPathname(router.basepath, store.pendingLocation.pathname, {
-          ...opts,
-          to: next.pathname
-        });
+    // If this `to` is a valid external URL, return
+    // null for LinkUtils
+    const toString = String(to);
+    const fromString = String(from);
+    let isExternal;
+    try {
+      new URL(`${toString}`);
+      isExternal = true;
+    } catch (e) {}
+    invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+    return this.#commitLocation({
+      from: fromString,
+      to: toString,
+      search,
+      hash,
+      replace,
+      params
+    });
+  };
+  matchRoute = (location, opts) => {
+    location = {
+      ...location,
+      to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
+    };
+    const next = this.buildNext(location);
+    if (opts?.pending) {
+      if (!this.store.state.pendingLocation) {
+        return false;
       }
-      return matchPathname(router.basepath, store.currentLocation.pathname, {
+      return matchPathname(this.basepath, this.store.state.pendingLocation.pathname, {
         ...opts,
         to: next.pathname
       });
-    },
-    navigate: async _ref => {
-      let {
-        from,
-        to = '.',
-        search,
-        hash,
-        replace,
-        params
-      } = _ref;
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
-
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-      const toString = String(to);
-      const fromString = String(from);
-      let isExternal;
-      try {
-        new URL(`${toString}`);
-        isExternal = true;
-      } catch (e) {}
-      invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
-      return navigate({
-        from: fromString,
-        to: toString,
-        search,
-        hash,
-        replace,
-        params
-      });
-    },
-    buildLink: _ref2 => {
-      let {
-        from,
-        to = '.',
-        search,
-        params,
-        hash,
-        target,
-        replace,
-        activeOptions,
-        preload,
-        preloadMaxAge: userPreloadMaxAge,
-        preloadGcMaxAge: userPreloadGcMaxAge,
-        preloadDelay: userPreloadDelay,
-        disabled
-      } = _ref2;
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
-
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
+    }
+    return matchPathname(this.basepath, this.store.state.currentLocation.pathname, {
+      ...opts,
+      to: next.pathname
+    });
+  };
+  buildLink = ({
+    from,
+    to = '.',
+    search,
+    params,
+    hash,
+    target,
+    replace,
+    activeOptions,
+    preload,
+    preloadMaxAge: userPreloadMaxAge,
+    preloadGcMaxAge: userPreloadGcMaxAge,
+    preloadDelay: userPreloadDelay,
+    disabled
+  }) => {
+    // If this link simply reloads the current route,
+    // make sure it has a new key so it will trigger a data refresh
 
-      try {
-        new URL(`${to}`);
-        return {
-          type: 'external',
-          href: to
-        };
-      } catch (e) {}
-      const nextOpts = {
-        from,
-        to,
-        search,
-        params,
-        hash,
-        replace
+    // If this `to` is a valid external URL, return
+    // null for LinkUtils
+
+    try {
+      new URL(`${to}`);
+      return {
+        type: 'external',
+        href: to
       };
-      const next = router.buildNext(nextOpts);
-      preload = preload ?? router.options.defaultPreload;
-      const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
-
-      // Compare path/hash for matches
-      const pathIsEqual = store.currentLocation.pathname === next.pathname;
-      const currentPathSplit = store.currentLocation.pathname.split('/');
-      const nextPathSplit = next.pathname.split('/');
-      const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = store.currentLocation.hash === next.hash;
-      // Combine the matches based on user options
-      const pathTest = activeOptions != null && activeOptions.exact ? pathIsEqual : pathIsFuzzyEqual;
-      const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true;
-
-      // The final "active" test
-      const isActive = pathTest && hashTest;
-
-      // The click handler
-      const handleClick = e => {
-        if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-          e.preventDefault();
-          if (pathIsEqual && !search && !hash) {
-            router.invalidateRoute(nextOpts);
-          }
+    } catch (e) {}
+    const nextOpts = {
+      from,
+      to,
+      search,
+      params,
+      hash,
+      replace
+    };
+    const next = this.buildNext(nextOpts);
+    preload = preload ?? this.options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
+
+    // Compare path/hash for matches
+    const pathIsEqual = this.store.state.currentLocation.pathname === next.pathname;
+    const currentPathSplit = this.store.state.currentLocation.pathname.split('/');
+    const nextPathSplit = next.pathname.split('/');
+    const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+    const hashIsEqual = this.store.state.currentLocation.hash === next.hash;
+    // Combine the matches based on user options
+    const pathTest = activeOptions?.exact ? pathIsEqual : pathIsFuzzyEqual;
+    const hashTest = activeOptions?.includeHash ? hashIsEqual : true;
 
-          // All is well? Navigate!
-          navigate(nextOpts);
+    // The final "active" test
+    const isActive = pathTest && hashTest;
+
+    // The click handler
+    const handleClick = e => {
+      if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+        e.preventDefault();
+        if (pathIsEqual && !search && !hash) {
+          this.invalidateRoute(nextOpts);
         }
-      };
 
-      // The click handler
-      const handleFocus = e => {
-        if (preload) {
-          router.preloadRoute(nextOpts, {
+        // All is well? Navigate!
+        this.#commitLocation(nextOpts);
+      }
+    };
+
+    // The click handler
+    const handleFocus = e => {
+      if (preload) {
+        this.preloadRoute(nextOpts, {
+          maxAge: userPreloadMaxAge,
+          gcMaxAge: userPreloadGcMaxAge
+        }).catch(err => {
+          console.warn(err);
+          console.warn('Error preloading route! ☝️');
+        });
+      }
+    };
+    const handleEnter = e => {
+      const target = e.target || {};
+      if (preload) {
+        if (target.preloadTimeout) {
+          return;
+        }
+        target.preloadTimeout = setTimeout(() => {
+          target.preloadTimeout = null;
+          this.preloadRoute(nextOpts, {
             maxAge: userPreloadMaxAge,
             gcMaxAge: userPreloadGcMaxAge
           }).catch(err => {
-            console.log(err);
+            console.warn(err);
             console.warn('Error preloading route! ☝️');
           });
-        }
-      };
-      const handleEnter = e => {
-        const target = e.target || {};
-        if (preload) {
-          if (target.preloadTimeout) {
-            return;
+        }, 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,
+      isActive,
+      disabled
+    };
+  };
+  dehydrate = () => {
+    return {
+      state: {
+        ...pick(this.store.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
+        currentMatches: this.store.state.currentMatches.map(match => ({
+          matchId: match.id,
+          state: {
+            ...pick(match.store.state, ['status', 'routeLoaderData', 'invalidAt', 'invalid'])
           }
-          target.preloadTimeout = setTimeout(() => {
-            target.preloadTimeout = null;
-            router.preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge
-            }).catch(err => {
-              console.log(err);
-              console.warn('Error preloading route! ☝️');
+        }))
+      },
+      context: this.options.context
+    };
+  };
+  hydrate = dehydratedRouter => {
+    this.store.setState(s => {
+      // Update the context TODO: make this part of state?
+      this.options.context = dehydratedRouter.context;
+
+      // Match the routes
+      const currentMatches = this.matchRoutes(dehydratedRouter.state.latestLocation.pathname, {
+        strictParseParams: true
+      });
+      currentMatches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedRouter.state.currentMatches[index];
+        invariant(dehydratedMatch && dehydratedMatch.matchId === match.id, 'Oh no! There was a hydration mismatch when attempting to rethis.store the state of the router! 😬');
+        Object.assign(match, dehydratedMatch);
+      });
+      currentMatches.forEach(match => match.__validate());
+      Object.assign(s, {
+        ...dehydratedRouter.state,
+        currentMatches
+      });
+    });
+  };
+  getLoader = opts => {
+    const id = opts.from || '/';
+    const route = this.getRoute(id);
+    if (!route) return undefined;
+    let loader = this.store.state.loaders[id] || (() => {
+      this.store.setState(s => {
+        s.loaders[id] = {
+          pending: [],
+          fetch: async loaderContext => {
+            if (!route) {
+              return;
+            }
+            const loaderState = {
+              loadedAt: Date.now(),
+              loaderContext
+            };
+            this.store.setState(s => {
+              s.loaders[id].current = loaderState;
+              s.loaders[id].latest = loaderState;
+              s.loaders[id].pending.push(loaderState);
             });
-          }, preloadDelay);
-        }
-      };
-      const handleLeave = e => {
-        const target = e.target || {};
-        if (target.preloadTimeout) {
-          clearTimeout(target.preloadTimeout);
-          target.preloadTimeout = null;
+            try {
+              return await route.options.loader?.(loaderContext);
+            } finally {
+              this.store.setState(s => {
+                s.loaders[id].pending = s.loaders[id].pending.filter(d => d !== loaderState);
+              });
+            }
+          }
+        };
+      });
+      return this.store.state.loaders[id];
+    })();
+    return loader;
+  };
+  #buildRouteTree = rootRouteConfig => {
+    const recurseRoutes = (routeConfigs, parent) => {
+      return routeConfigs.map((routeConfig, i) => {
+        const routeOptions = routeConfig.options;
+        const route = new Route(routeConfig, routeOptions, i, parent, this);
+        const existingRoute = this.routesById[route.id];
+        if (existingRoute) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Duplicate routes found with id: ${String(route.id)}`, this.routesById, route);
+          }
+          throw new Error();
         }
-      };
-      return {
-        type: 'internal',
-        next,
-        handleFocus,
-        handleClick,
-        handleEnter,
-        handleLeave,
-        isActive,
-        disabled
-      };
-    },
-    buildNext: opts => {
-      const next = buildLocation(opts);
-      const matches = router.matchRoutes(next.pathname);
-      const __preSearchFilters = matches.map(match => match.options.preSearchFilters ?? []).flat().filter(Boolean);
-      const __postSearchFilters = matches.map(match => match.options.postSearchFilters ?? []).flat().filter(Boolean);
-      return buildLocation({
-        ...opts,
-        __preSearchFilters,
-        __postSearchFilters
+        this.routesById[route.id] = route;
+        const children = routeConfig.children;
+        route.childRoutes = children.length ? recurseRoutes(children, route) : undefined;
+        return route;
+      });
+    };
+    const routes = recurseRoutes([rootRouteConfig]);
+    return routes[0];
+  };
+  #parseLocation = previousLocation => {
+    let {
+      pathname,
+      search,
+      hash,
+      state
+    } = this.history.location;
+    const parsedSearch = this.options.parseSearch(search);
+    console.log({
+      pathname: pathname,
+      searchStr: search,
+      search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+      hash: hash.split('#').reverse()[0] ?? '',
+      href: `${pathname}${search}${hash}`,
+      state: state,
+      key: state?.key || '__init__'
+    });
+    return {
+      pathname: pathname,
+      searchStr: search,
+      search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+      hash: hash.split('#').reverse()[0] ?? '',
+      href: `${pathname}${search}${hash}`,
+      state: state,
+      key: state?.key || '__init__'
+    };
+  };
+  #onFocus = () => {
+    this.load();
+  };
+  #buildLocation = (dest = {}) => {
+    const fromPathname = dest.fromCurrent ? this.store.state.latestLocation.pathname : dest.from ?? this.store.state.latestLocation.pathname;
+    let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? '.'}`);
+    const fromMatches = this.matchRoutes(this.store.state.latestLocation.pathname, {
+      strictParseParams: true
+    });
+    const toMatches = this.matchRoutes(pathname);
+    const prevParams = {
+      ...last(fromMatches)?.params
+    };
+    let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+    if (nextParams) {
+      toMatches.map(d => d.route.options.stringifyParams).filter(Boolean).forEach(fn => {
+        Object.assign({}, nextParams, fn(nextParams));
       });
     }
+    pathname = interpolatePath(pathname, nextParams ?? {});
+
+    // Pre filters first
+    const preFilteredSearch = dest.__preSearchFilters?.length ? dest.__preSearchFilters?.reduce((prev, next) => next(prev), this.store.state.latestLocation.search) : this.store.state.latestLocation.search;
+
+    // Then the link/navigate function
+    const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+    : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+    : dest.__preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+    : {};
+
+    // Then post filters
+    const postFilteredSearch = dest.__postSearchFilters?.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+    const search = replaceEqualDeep(this.store.state.latestLocation.search, postFilteredSearch);
+    const searchStr = this.options.stringifySearch(search);
+    let hash = dest.hash === true ? this.store.state.latestLocation.hash : functionalUpdate(dest.hash, this.store.state.latestLocation.hash);
+    hash = hash ? `#${hash}` : '';
+    return {
+      pathname,
+      search,
+      searchStr,
+      state: this.store.state.latestLocation.state,
+      hash,
+      href: `${pathname}${searchStr}${hash}`,
+      key: dest.key
+    };
+  };
+  #commitLocation = location => {
+    const next = this.buildNext(location);
+    const id = '' + Date.now() + Math.random();
+    if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
+    let nextAction = 'replace';
+    if (!location.replace) {
+      nextAction = 'push';
+    }
+    const isSameUrl = this.store.state.latestLocation.href === next.href;
+    if (isSameUrl && !next.key) {
+      nextAction = 'replace';
+    }
+    const href = `${next.pathname}${next.searchStr}${next.hash ? `#${next.hash}` : ''}`;
+    this.history[nextAction === 'push' ? 'push' : 'replace'](href, {
+      id,
+      ...next.state
+    });
+    this.load(this.#parseLocation(this.store.state.latestLocation));
+    return this.navigationPromise = new Promise(resolve => {
+      const previousNavigationResolve = this.resolveNavigation;
+      this.resolveNavigation = () => {
+        previousNavigationResolve();
+        resolve();
+      };
+    });
   };
-  router.update(userOptions);
+}
 
-  // Allow frameworks to hook into the router creation
-  router.options.createRouter == null ? void 0 : router.options.createRouter(router);
-  return router;
+// Detect if we're in the DOM
+const isServer = typeof window === 'undefined' || !window.document.createElement;
+function getInitialRouterState() {
+  return {
+    status: 'idle',
+    latestLocation: null,
+    currentLocation: null,
+    currentMatches: [],
+    loaders: {},
+    lastUpdated: Date.now(),
+    matchCache: {},
+    get isFetching() {
+      return this.status === 'loading' || this.currentMatches.some(d => d.store.state.isFetching);
+    },
+    get isPreloading() {
+      return Object.values(this.matchCache).some(d => d.match.store.state.isFetching && !this.currentMatches.find(dd => dd.id === d.match.id));
+    }
+  };
 }
 function isCtrlEvent(e) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -1591,12 +1713,81 @@ function linkMatches(matches) {
   matches.forEach((match, index) => {
     const parent = matches[index - 1];
     if (parent) {
-      match.__.setParentMatch(parent);
-    } else {
-      match.__.setParentMatch(undefined);
+      match.__setParentMatch(parent);
     }
   });
 }
 
-export { cleanPath, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, pick, resolvePath, rootRouteId, sharedClone, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, warning };
+// createRouterAction is a constrained identify function that takes options: key, action, onSuccess, onError, onSettled, etc
+function createAction(options) {
+  const store = createStore({
+    submissions: []
+  }, options.debug);
+  return {
+    options,
+    store,
+    reset: () => {
+      store.setState(s => {
+        s.submissions = [];
+      });
+    },
+    submit: async payload => {
+      const submission = {
+        submittedAt: Date.now(),
+        status: 'pending',
+        payload: payload,
+        invalidate: () => {
+          setSubmission(s => {
+            s.isInvalid = true;
+          });
+        },
+        getIsLatest: () => store.state.submissions[store.state.submissions.length - 1]?.submittedAt === submission.submittedAt
+      };
+      const setSubmission = updater => {
+        store.setState(s => {
+          const a = s.submissions.find(d => d.submittedAt === submission.submittedAt);
+          invariant(a, 'Could not find submission in store');
+          updater(a);
+        });
+      };
+      store.setState(s => {
+        s.submissions.push(submission);
+        s.submissions.reverse();
+        s.submissions = s.submissions.slice(0, options.maxSubmissions ?? 10);
+        s.submissions.reverse();
+      });
+      const after = async () => {
+        options.onEachSettled?.(submission);
+        if (submission.getIsLatest()) await options.onLatestSettled?.(submission);
+      };
+      try {
+        const res = await options.action?.(submission.payload);
+        setSubmission(s => {
+          s.response = res;
+        });
+        await options.onEachSuccess?.(submission);
+        if (submission.getIsLatest()) await options.onLatestSuccess?.(submission);
+        await after();
+        setSubmission(s => {
+          s.status = 'success';
+        });
+        return res;
+      } catch (err) {
+        console.error(err);
+        setSubmission(s => {
+          s.error = err;
+        });
+        await options.onEachError?.(submission);
+        if (submission.getIsLatest()) await options.onLatestError?.(submission);
+        await after();
+        setSubmission(s => {
+          s.status = 'error';
+        });
+        throw err;
+      }
+    }
+  };
+}
+
+export { Route, RouteMatch, Router, batch, cleanPath, createAction, createBrowserHistory, createHashHistory, createMemoryHistory, createRouteConfig, createStore, decode, defaultFetchServerDataFn, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, stringifySearchWith, trackDeep, trimPath, trimPathLeft, trimPathRight, warning };
 //# sourceMappingURL=index.js.map