@tanstack/react-router 0.0.1-beta.8 → 0.0.1-beta.80

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.shim));
-})(this, (function (exports, React, shim) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.withSelector));
+})(this, (function (exports, React, withSelector) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -34,40 +34,51 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  function _extends$2() {
-    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
-    return _extends$2.apply(this, arguments);
+    return _extends.apply(this, arguments);
   }
 
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
+  }
 
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
+      }
+
+      var text = "Warning: " + message;
+
+      if (typeof console !== 'undefined') {
+        console.warn(text);
+      }
 
-    return target;
+      try {
+        throw Error(text);
+      } catch (x) {}
+    }
   }
 
   /**
-   * router-core
+   * store
    *
    * Copyright (c) TanStack
    *
@@ -76,927 +87,340 @@
    *
    * @license MIT
    */
-  function _extends$1() {
-    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-    return _extends$1.apply(this, arguments);
-  }
-
-  /**
-   * Actions represent the type of change to a location value.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#action
-   */
-  var Action;
-
-  (function (Action) {
-    /**
-     * A POP indicates a change to an arbitrary index in the history stack, such
-     * as a back or forward navigation. It does not describe the direction of the
-     * navigation, only that the current index changed.
-     *
-     * Note: This is the default action for newly created history objects.
-     */
-    Action["Pop"] = "POP";
-    /**
-     * A PUSH indicates a new entry being added to the history stack, such as when
-     * a link is clicked and a new page loads. When this happens, all subsequent
-     * entries in the stack are lost.
-     */
-
-    Action["Push"] = "PUSH";
-    /**
-     * A REPLACE indicates the entry at the current index in the history stack
-     * being replaced by a new one.
-     */
-
-    Action["Replace"] = "REPLACE";
-  })(Action || (Action = {}));
-
-  var readOnly = function (obj) {
-    return Object.freeze(obj);
-  } ;
-
-  function warning$1(cond, message) {
-    if (!cond) {
-      // eslint-disable-next-line no-console
-      if (typeof console !== 'undefined') console.warn(message);
-
-      try {
-        // Welcome to debugging history!
-        //
-        // This error is thrown as a convenience so you can more easily
-        // find the source for a warning that appears in the console by
-        // enabling "pause on exceptions" in your JavaScript debugger.
-        throw new Error(message); // eslint-disable-next-line no-empty
-      } catch (e) {}
+  class Store {
+    listeners = new Set();
+    batching = false;
+    queue = [];
+    constructor(initialState, options) {
+      this.state = initialState;
+      this.options = options;
     }
+    subscribe = listener => {
+      this.listeners.add(listener);
+      const unsub = this.options?.onSubscribe?.(listener, this);
+      return () => {
+        this.listeners.delete(listener);
+        unsub?.();
+      };
+    };
+    setState = updater => {
+      const previous = this.state;
+      this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
+      if (this.state === previous) return;
+      this.options?.onUpdate?.(this.state, previous);
+      this.queue.push(() => {
+        this.listeners.forEach(listener => listener(this.state, previous));
+      });
+      this.#flush();
+    };
+    #flush = () => {
+      if (this.batching) return;
+      this.queue.forEach(cb => cb());
+      this.queue = [];
+    };
+    batch = cb => {
+      this.batching = true;
+      cb();
+      this.batching = false;
+      this.#flush();
+    };
   }
 
-  var BeforeUnloadEventType = 'beforeunload';
-  var HashChangeEventType = 'hashchange';
-  var PopStateEventType = 'popstate';
-  /**
-   * Browser history stores the location in regular URLs. This is the standard for
-   * most web apps, but it requires some configuration on the server to ensure you
-   * serve the same app at multiple URLs.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
+  /**
+   * router
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
    */
 
-  function createBrowserHistory(options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    var _options = options,
-        _options$window = _options.window,
-        window = _options$window === void 0 ? document.defaultView : _options$window;
-    var globalHistory = window.history;
-
-    function getIndexAndLocation() {
-      var _window$location = window.location,
-          pathname = _window$location.pathname,
-          search = _window$location.search,
-          hash = _window$location.hash;
-      var state = globalHistory.state || {};
-      return [state.idx, readOnly({
-        pathname: pathname,
-        search: search,
-        hash: hash,
-        state: state.usr || null,
-        key: state.key || 'default'
-      })];
-    }
-
-    var blockedPopTx = null;
-
-    function handlePop() {
-      if (blockedPopTx) {
-        blockers.call(blockedPopTx);
-        blockedPopTx = null;
-      } else {
-        var nextAction = Action.Pop;
-
-        var _getIndexAndLocation = getIndexAndLocation(),
-            nextIndex = _getIndexAndLocation[0],
-            nextLocation = _getIndexAndLocation[1];
-
-        if (blockers.length) {
-          if (nextIndex != null) {
-            var delta = index - nextIndex;
-
-            if (delta) {
-              // Revert the POP
-              blockedPopTx = {
-                action: nextAction,
-                location: nextLocation,
-                retry: function retry() {
-                  go(delta * -1);
-                }
-              };
-              go(delta);
-            }
-          } else {
-            // Trying to POP to a location with no index. We did not create
-            // this location, so we can't effectively block the navigation.
-            warning$1(false, // TODO: Write up a doc that explains our blocking strategy in
-            // detail and link to it here so people can understand better what
-            // is going on and how to avoid it.
-            "You are trying to block a POP navigation to a location that was not " + "created by the history library. The block will fail silently in " + "production, but in general you should do all navigation with the " + "history library (instead of using window.history.pushState directly) " + "to avoid this situation.") ;
-          }
-        } else {
-          applyTx(nextAction);
-        }
-      }
-    }
-
-    window.addEventListener(PopStateEventType, handlePop);
-    var action = Action.Pop;
+  // 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
 
-    var _getIndexAndLocation2 = getIndexAndLocation(),
-        index = _getIndexAndLocation2[0],
-        location = _getIndexAndLocation2[1];
-
-    var listeners = createEvents();
-    var blockers = createEvents();
-
-    if (index == null) {
-      index = 0;
-      globalHistory.replaceState(_extends$1({}, globalHistory.state, {
-        idx: index
-      }), '');
-    }
-
-    function createHref(to) {
-      return typeof to === 'string' ? to : createPath(to);
-    } // state defaults to `null` because `window.history.state` does
-
-
-    function getNextLocation(to, state) {
-      if (state === void 0) {
-        state = null;
+  const popStateEvent = 'popstate';
+  const beforeUnloadEvent = 'beforeunload';
+  const beforeUnloadListener = event => {
+    event.preventDefault();
+    // @ts-ignore
+    return event.returnValue = '';
+  };
+  const stopBlocking = () => {
+    removeEventListener(beforeUnloadEvent, beforeUnloadListener, {
+      capture: true
+    });
+  };
+  function createHistory(opts) {
+    let currentLocation = opts.getLocation();
+    let unsub = () => {};
+    let listeners = new Set();
+    let blockers = [];
+    let queue = [];
+    const tryFlush = () => {
+      if (blockers.length) {
+        blockers[0]?.(tryFlush, () => {
+          blockers = [];
+          stopBlocking();
+        });
+        return;
       }
-
-      return readOnly(_extends$1({
-        pathname: location.pathname,
-        hash: '',
-        search: ''
-      }, typeof to === 'string' ? parsePath(to) : to, {
-        state: state,
-        key: createKey()
-      }));
-    }
-
-    function getHistoryStateAndUrl(nextLocation, index) {
-      return [{
-        usr: nextLocation.state,
-        key: nextLocation.key,
-        idx: index
-      }, createHref(nextLocation)];
-    }
-
-    function allowTx(action, location, retry) {
-      return !blockers.length || (blockers.call({
-        action: action,
-        location: location,
-        retry: retry
-      }), false);
-    }
-
-    function applyTx(nextAction) {
-      action = nextAction;
-
-      var _getIndexAndLocation3 = getIndexAndLocation();
-
-      index = _getIndexAndLocation3[0];
-      location = _getIndexAndLocation3[1];
-      listeners.call({
-        action: action,
-        location: location
-      });
-    }
-
-    function push(to, state) {
-      var nextAction = Action.Push;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        push(to, state);
+      while (queue.length) {
+        queue.shift()?.();
       }
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        var _getHistoryStateAndUr = getHistoryStateAndUrl(nextLocation, index + 1),
-            historyState = _getHistoryStateAndUr[0],
-            url = _getHistoryStateAndUr[1]; // TODO: Support forced reloading
-        // try...catch because iOS limits us to 100 pushState calls :/
-
-
-        try {
-          globalHistory.pushState(historyState, '', url);
-        } catch (error) {
-          // They are going to lose state here, but there is no real
-          // way to warn them about it since the page will refresh...
-          window.location.assign(url);
+      onUpdate();
+    };
+    const queueTask = task => {
+      queue.push(task);
+      tryFlush();
+    };
+    const onUpdate = () => {
+      currentLocation = opts.getLocation();
+      listeners.forEach(listener => listener());
+    };
+    return {
+      get location() {
+        return currentLocation;
+      },
+      listen: cb => {
+        if (listeners.size === 0) {
+          unsub = opts.listener(onUpdate);
         }
-
-        applyTx(nextAction);
-      }
-    }
-
-    function replace(to, state) {
-      var nextAction = Action.Replace;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        replace(to, state);
-      }
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        var _getHistoryStateAndUr2 = getHistoryStateAndUrl(nextLocation, index),
-            historyState = _getHistoryStateAndUr2[0],
-            url = _getHistoryStateAndUr2[1]; // TODO: Support forced reloading
-
-
-        globalHistory.replaceState(historyState, '', url);
-        applyTx(nextAction);
-      }
-    }
-
-    function go(delta) {
-      globalHistory.go(delta);
-    }
-
-    var history = {
-      get action() {
-        return action;
+        listeners.add(cb);
+        return () => {
+          listeners.delete(cb);
+          if (listeners.size === 0) {
+            unsub();
+          }
+        };
       },
-
-      get location() {
-        return location;
+      push: (path, state) => {
+        queueTask(() => {
+          opts.pushState(path, state);
+        });
       },
-
-      createHref: createHref,
-      push: push,
-      replace: replace,
-      go: go,
-      back: function back() {
-        go(-1);
+      replace: (path, state) => {
+        queueTask(() => {
+          opts.replaceState(path, state);
+        });
+      },
+      go: index => {
+        queueTask(() => {
+          opts.go(index);
+        });
       },
-      forward: function forward() {
-        go(1);
+      back: () => {
+        queueTask(() => {
+          opts.back();
+        });
       },
-      listen: function listen(listener) {
-        return listeners.push(listener);
+      forward: () => {
+        queueTask(() => {
+          opts.forward();
+        });
       },
-      block: function block(blocker) {
-        var unblock = blockers.push(blocker);
-
+      createHref: str => opts.createHref(str),
+      block: cb => {
+        blockers.push(cb);
         if (blockers.length === 1) {
-          window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
+          addEventListener(beforeUnloadEvent, beforeUnloadListener, {
+            capture: true
+          });
         }
-
-        return function () {
-          unblock(); // Remove the beforeunload listener so the document may
-          // still be salvageable in the pagehide event.
-          // See https://html.spec.whatwg.org/#unloading-documents
-
+        return () => {
+          blockers = blockers.filter(b => b !== cb);
           if (!blockers.length) {
-            window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
+            stopBlocking();
           }
         };
       }
     };
-    return history;
-  }
-  /**
-   * Hash history stores the location in window.location.hash. This makes it ideal
-   * for situations where you don't want to send the location to the server for
-   * some reason, either because you do cannot configure it or the URL space is
-   * reserved for something else.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
-   */
+  }
+  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),
+      createHref: path => createHref(path)
+    });
+  }
+  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: () => {
+        return () => {};
+      },
+      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),
+      createHref: path => path
+    });
+  }
+  function parseLocation(href, state) {
+    let hashIndex = href.indexOf('#');
+    let searchIndex = href.indexOf('?');
+    return {
+      href,
+      pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
+      hash: hashIndex > -1 ? href.substring(hashIndex, searchIndex) : '',
+      search: searchIndex > -1 ? href.substring(searchIndex) : '',
+      state
+    };
+  }
 
-  function createHashHistory(options) {
-    if (options === void 0) {
-      options = {};
-    }
+  // Thanks co-pilot!
+  function createRandomKey() {
+    return (Math.random() + 1).toString(36).substring(7);
+  }
 
-    var _options2 = options,
-        _options2$window = _options2.window,
-        window = _options2$window === void 0 ? document.defaultView : _options2$window;
-    var globalHistory = window.history;
-
-    function getIndexAndLocation() {
-      var _parsePath = parsePath(window.location.hash.substr(1)),
-          _parsePath$pathname = _parsePath.pathname,
-          pathname = _parsePath$pathname === void 0 ? '/' : _parsePath$pathname,
-          _parsePath$search = _parsePath.search,
-          search = _parsePath$search === void 0 ? '' : _parsePath$search,
-          _parsePath$hash = _parsePath.hash,
-          hash = _parsePath$hash === void 0 ? '' : _parsePath$hash;
-
-      var state = globalHistory.state || {};
-      return [state.idx, readOnly({
-        pathname: pathname,
-        search: search,
-        hash: hash,
-        state: state.usr || null,
-        key: state.key || 'default'
-      })];
+  function last(arr) {
+    return arr[arr.length - 1];
+  }
+  function isFunction(d) {
+    return typeof d === 'function';
+  }
+  function functionalUpdate(updater, previous) {
+    if (isFunction(updater)) {
+      return updater(previous);
     }
+    return updater;
+  }
+  function pick(parent, keys) {
+    return keys.reduce((obj, key) => {
+      obj[key] = parent[key];
+      return obj;
+    }, {});
+  }
 
-    var blockedPopTx = null;
-
-    function handlePop() {
-      if (blockedPopTx) {
-        blockers.call(blockedPopTx);
-        blockedPopTx = null;
-      } else {
-        var nextAction = Action.Pop;
-
-        var _getIndexAndLocation4 = getIndexAndLocation(),
-            nextIndex = _getIndexAndLocation4[0],
-            nextLocation = _getIndexAndLocation4[1];
-
-        if (blockers.length) {
-          if (nextIndex != null) {
-            var delta = index - nextIndex;
-
-            if (delta) {
-              // Revert the POP
-              blockedPopTx = {
-                action: nextAction,
-                location: nextLocation,
-                retry: function retry() {
-                  go(delta * -1);
-                }
-              };
-              go(delta);
-            }
-          } else {
-            // Trying to POP to a location with no index. We did not create
-            // this location, so we can't effectively block the navigation.
-            warning$1(false, // TODO: Write up a doc that explains our blocking strategy in
-            // detail and link to it here so people can understand better
-            // what is going on and how to avoid it.
-            "You are trying to block a POP navigation to a location that was not " + "created by the history library. The block will fail silently in " + "production, but in general you should do all navigation with the " + "history library (instead of using window.history.pushState directly) " + "to avoid this situation.") ;
-          }
-        } else {
-          applyTx(nextAction);
+  /**
+   * This function returns `a` if `b` is deeply equal.
+   * If not, it will replace any deeply equal children of `b` with those of `a`.
+   * This can be used for structural sharing between immutable JSON values for example.
+   * Do not use this with signals
+   */
+  function replaceEqualDeep(prev, _next) {
+    if (prev === _next) {
+      return prev;
+    }
+    const next = _next;
+    const array = Array.isArray(prev) && Array.isArray(next);
+    if (array || isPlainObject(prev) && isPlainObject(next)) {
+      const prevSize = array ? prev.length : Object.keys(prev).length;
+      const nextItems = array ? next : Object.keys(next);
+      const nextSize = nextItems.length;
+      const copy = array ? [] : {};
+      let equalItems = 0;
+      for (let i = 0; i < nextSize; i++) {
+        const key = array ? i : nextItems[i];
+        copy[key] = replaceEqualDeep(prev[key], next[key]);
+        if (copy[key] === prev[key]) {
+          equalItems++;
         }
       }
+      return prevSize === nextSize && equalItems === prevSize ? prev : copy;
     }
+    return next;
+  }
 
-    window.addEventListener(PopStateEventType, handlePop); // popstate does not fire on hashchange in IE 11 and old (trident) Edge
-    // https://developer.mozilla.org/de/docs/Web/API/Window/popstate_event
-
-    window.addEventListener(HashChangeEventType, function () {
-      var _getIndexAndLocation5 = getIndexAndLocation(),
-          nextLocation = _getIndexAndLocation5[1]; // Ignore extraneous hashchange events.
-
-
-      if (createPath(nextLocation) !== createPath(location)) {
-        handlePop();
-      }
-    });
-    var action = Action.Pop;
-
-    var _getIndexAndLocation6 = getIndexAndLocation(),
-        index = _getIndexAndLocation6[0],
-        location = _getIndexAndLocation6[1];
-
-    var listeners = createEvents();
-    var blockers = createEvents();
-
-    if (index == null) {
-      index = 0;
-      globalHistory.replaceState(_extends$1({}, globalHistory.state, {
-        idx: index
-      }), '');
+  // Copied from: https://github.com/jonschlinkert/is-plain-object
+  function isPlainObject(o) {
+    if (!hasObjectPrototype(o)) {
+      return false;
     }
 
-    function getBaseHref() {
-      var base = document.querySelector('base');
-      var href = '';
-
-      if (base && base.getAttribute('href')) {
-        var url = window.location.href;
-        var hashIndex = url.indexOf('#');
-        href = hashIndex === -1 ? url : url.slice(0, hashIndex);
-      }
-
-      return href;
+    // If has modified constructor
+    const ctor = o.constructor;
+    if (typeof ctor === 'undefined') {
+      return true;
     }
 
-    function createHref(to) {
-      return getBaseHref() + '#' + (typeof to === 'string' ? to : createPath(to));
+    // If has modified prototype
+    const prot = ctor.prototype;
+    if (!hasObjectPrototype(prot)) {
+      return false;
     }
 
-    function getNextLocation(to, state) {
-      if (state === void 0) {
-        state = null;
-      }
-
-      return readOnly(_extends$1({
-        pathname: location.pathname,
-        hash: '',
-        search: ''
-      }, typeof to === 'string' ? parsePath(to) : to, {
-        state: state,
-        key: createKey()
-      }));
+    // If constructor does not have an Object-specific method
+    if (!prot.hasOwnProperty('isPrototypeOf')) {
+      return false;
     }
 
-    function getHistoryStateAndUrl(nextLocation, index) {
-      return [{
-        usr: nextLocation.state,
-        key: nextLocation.key,
-        idx: index
-      }, createHref(nextLocation)];
+    // Most likely a plain Object
+    return true;
+  }
+  function hasObjectPrototype(o) {
+    return Object.prototype.toString.call(o) === '[object Object]';
+  }
+  function partialDeepEqual(a, b) {
+    if (a === b) {
+      return true;
     }
-
-    function allowTx(action, location, retry) {
-      return !blockers.length || (blockers.call({
-        action: action,
-        location: location,
-        retry: retry
-      }), false);
+    if (typeof a !== typeof b) {
+      return false;
     }
-
-    function applyTx(nextAction) {
-      action = nextAction;
-
-      var _getIndexAndLocation7 = getIndexAndLocation();
-
-      index = _getIndexAndLocation7[0];
-      location = _getIndexAndLocation7[1];
-      listeners.call({
-        action: action,
-        location: location
-      });
+    if (isPlainObject(a) && isPlainObject(b)) {
+      return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
     }
-
-    function push(to, state) {
-      var nextAction = Action.Push;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        push(to, state);
-      }
-
-      warning$1(nextLocation.pathname.charAt(0) === '/', "Relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")") ;
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        var _getHistoryStateAndUr3 = getHistoryStateAndUrl(nextLocation, index + 1),
-            historyState = _getHistoryStateAndUr3[0],
-            url = _getHistoryStateAndUr3[1]; // TODO: Support forced reloading
-        // try...catch because iOS limits us to 100 pushState calls :/
-
-
-        try {
-          globalHistory.pushState(historyState, '', url);
-        } catch (error) {
-          // They are going to lose state here, but there is no real
-          // way to warn them about it since the page will refresh...
-          window.location.assign(url);
-        }
-
-        applyTx(nextAction);
-      }
+    if (Array.isArray(a) && Array.isArray(b)) {
+      return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
     }
-
-    function replace(to, state) {
-      var nextAction = Action.Replace;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        replace(to, state);
-      }
-
-      warning$1(nextLocation.pathname.charAt(0) === '/', "Relative pathnames are not supported in hash history.replace(" + JSON.stringify(to) + ")") ;
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        var _getHistoryStateAndUr4 = getHistoryStateAndUrl(nextLocation, index),
-            historyState = _getHistoryStateAndUr4[0],
-            url = _getHistoryStateAndUr4[1]; // TODO: Support forced reloading
-
-
-        globalHistory.replaceState(historyState, '', url);
-        applyTx(nextAction);
-      }
-    }
-
-    function go(delta) {
-      globalHistory.go(delta);
-    }
-
-    var history = {
-      get action() {
-        return action;
-      },
-
-      get location() {
-        return location;
-      },
-
-      createHref: createHref,
-      push: push,
-      replace: replace,
-      go: go,
-      back: function back() {
-        go(-1);
-      },
-      forward: function forward() {
-        go(1);
-      },
-      listen: function listen(listener) {
-        return listeners.push(listener);
-      },
-      block: function block(blocker) {
-        var unblock = blockers.push(blocker);
-
-        if (blockers.length === 1) {
-          window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
-        }
-
-        return function () {
-          unblock(); // Remove the beforeunload listener so the document may
-          // still be salvageable in the pagehide event.
-          // See https://html.spec.whatwg.org/#unloading-documents
-
-          if (!blockers.length) {
-            window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
-          }
-        };
-      }
-    };
-    return history;
-  }
-  /**
-   * Memory history stores the current location in memory. It is designed for use
-   * in stateful non-browser environments like tests and React Native.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#creatememoryhistory
-   */
-
-  function createMemoryHistory(options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    var _options3 = options,
-        _options3$initialEntr = _options3.initialEntries,
-        initialEntries = _options3$initialEntr === void 0 ? ['/'] : _options3$initialEntr,
-        initialIndex = _options3.initialIndex;
-    var entries = initialEntries.map(function (entry) {
-      var location = readOnly(_extends$1({
-        pathname: '/',
-        search: '',
-        hash: '',
-        state: null,
-        key: createKey()
-      }, typeof entry === 'string' ? parsePath(entry) : entry));
-      warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: " + JSON.stringify(entry) + ")") ;
-      return location;
-    });
-    var index = clamp(initialIndex == null ? entries.length - 1 : initialIndex, 0, entries.length - 1);
-    var action = Action.Pop;
-    var location = entries[index];
-    var listeners = createEvents();
-    var blockers = createEvents();
-
-    function createHref(to) {
-      return typeof to === 'string' ? to : createPath(to);
-    }
-
-    function getNextLocation(to, state) {
-      if (state === void 0) {
-        state = null;
-      }
-
-      return readOnly(_extends$1({
-        pathname: location.pathname,
-        search: '',
-        hash: ''
-      }, typeof to === 'string' ? parsePath(to) : to, {
-        state: state,
-        key: createKey()
-      }));
-    }
-
-    function allowTx(action, location, retry) {
-      return !blockers.length || (blockers.call({
-        action: action,
-        location: location,
-        retry: retry
-      }), false);
-    }
-
-    function applyTx(nextAction, nextLocation) {
-      action = nextAction;
-      location = nextLocation;
-      listeners.call({
-        action: action,
-        location: location
-      });
-    }
-
-    function push(to, state) {
-      var nextAction = Action.Push;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        push(to, state);
-      }
-
-      warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in memory history.push(" + JSON.stringify(to) + ")") ;
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        index += 1;
-        entries.splice(index, entries.length, nextLocation);
-        applyTx(nextAction, nextLocation);
-      }
-    }
-
-    function replace(to, state) {
-      var nextAction = Action.Replace;
-      var nextLocation = getNextLocation(to, state);
-
-      function retry() {
-        replace(to, state);
-      }
-
-      warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in memory history.replace(" + JSON.stringify(to) + ")") ;
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        entries[index] = nextLocation;
-        applyTx(nextAction, nextLocation);
-      }
-    }
-
-    function go(delta) {
-      var nextIndex = clamp(index + delta, 0, entries.length - 1);
-      var nextAction = Action.Pop;
-      var nextLocation = entries[nextIndex];
-
-      function retry() {
-        go(delta);
-      }
-
-      if (allowTx(nextAction, nextLocation, retry)) {
-        index = nextIndex;
-        applyTx(nextAction, nextLocation);
-      }
-    }
-
-    var history = {
-      get index() {
-        return index;
-      },
-
-      get action() {
-        return action;
-      },
-
-      get location() {
-        return location;
-      },
-
-      createHref: createHref,
-      push: push,
-      replace: replace,
-      go: go,
-      back: function back() {
-        go(-1);
-      },
-      forward: function forward() {
-        go(1);
-      },
-      listen: function listen(listener) {
-        return listeners.push(listener);
-      },
-      block: function block(blocker) {
-        return blockers.push(blocker);
-      }
-    };
-    return history;
-  } ////////////////////////////////////////////////////////////////////////////////
-  // UTILS
-  ////////////////////////////////////////////////////////////////////////////////
-
-  function clamp(n, lowerBound, upperBound) {
-    return Math.min(Math.max(n, lowerBound), upperBound);
-  }
-
-  function promptBeforeUnload(event) {
-    // Cancel the event.
-    event.preventDefault(); // Chrome (and legacy IE) requires returnValue to be set.
-
-    event.returnValue = '';
-  }
-
-  function createEvents() {
-    var handlers = [];
-    return {
-      get length() {
-        return handlers.length;
-      },
-
-      push: function push(fn) {
-        handlers.push(fn);
-        return function () {
-          handlers = handlers.filter(function (handler) {
-            return handler !== fn;
-          });
-        };
-      },
-      call: function call(arg) {
-        handlers.forEach(function (fn) {
-          return fn && fn(arg);
-        });
-      }
-    };
-  }
-
-  function createKey() {
-    return Math.random().toString(36).substr(2, 8);
-  }
-  /**
-   * Creates a string URL path from the given pathname, search, and hash components.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createpath
-   */
-
-
-  function createPath(_ref) {
-    var _ref$pathname = _ref.pathname,
-        pathname = _ref$pathname === void 0 ? '/' : _ref$pathname,
-        _ref$search = _ref.search,
-        search = _ref$search === void 0 ? '' : _ref$search,
-        _ref$hash = _ref.hash,
-        hash = _ref$hash === void 0 ? '' : _ref$hash;
-    if (search && search !== '?') pathname += search.charAt(0) === '?' ? search : '?' + search;
-    if (hash && hash !== '#') pathname += hash.charAt(0) === '#' ? hash : '#' + hash;
-    return pathname;
-  }
-  /**
-   * Parses a string URL path into its separate pathname, search, and hash components.
-   *
-   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#parsepath
-   */
-
-  function parsePath(path) {
-    var parsedPath = {};
-
-    if (path) {
-      var hashIndex = path.indexOf('#');
-
-      if (hashIndex >= 0) {
-        parsedPath.hash = path.substr(hashIndex);
-        path = path.substr(0, hashIndex);
-      }
-
-      var searchIndex = path.indexOf('?');
-
-      if (searchIndex >= 0) {
-        parsedPath.search = path.substr(searchIndex);
-        path = path.substr(0, searchIndex);
-      }
-
-      if (path) {
-        parsedPath.pathname = path;
-      }
-    }
-
-    return parsedPath;
-  }
-  var prefix = 'Invariant failed';
-  function invariant(condition, message) {
-      if (condition) {
-          return;
-      }
-      var provided = typeof message === 'function' ? message() : message;
-      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-      throw new Error(value);
-  }
-
-  // type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  //   k: infer I,
-  // ) => any
-  //   ? I
-  //   : never
-
-  /**
-   * 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.
-   */
-  function replaceEqualDeep(prev, next) {
-    if (prev === next) {
-      return prev;
-    }
-
-    const array = Array.isArray(prev) && Array.isArray(next);
-
-    if (array || isPlainObject(prev) && isPlainObject(next)) {
-      const aSize = array ? prev.length : Object.keys(prev).length;
-      const bItems = array ? next : Object.keys(next);
-      const bSize = bItems.length;
-      const copy = array ? [] : {};
-      let equalItems = 0;
-
-      for (let i = 0; i < bSize; i++) {
-        const key = array ? i : bItems[i];
-        copy[key] = replaceEqualDeep(prev[key], next[key]);
-
-        if (copy[key] === prev[key]) {
-          equalItems++;
-        }
-      }
-
-      return aSize === bSize && equalItems === aSize ? prev : copy;
-    }
-
-    return next;
-  } // Copied from: https://github.com/jonschlinkert/is-plain-object
-
-  function isPlainObject(o) {
-    if (!hasObjectPrototype(o)) {
-      return false;
-    } // If has modified constructor
-
-
-    const ctor = o.constructor;
-
-    if (typeof ctor === 'undefined') {
-      return true;
-    } // If has modified prototype
-
-
-    const prot = ctor.prototype;
-
-    if (!hasObjectPrototype(prot)) {
-      return false;
-    } // If constructor does not have an Object-specific method
-
-
-    if (!prot.hasOwnProperty('isPrototypeOf')) {
-      return false;
-    } // Most likely a plain Object
-
-
-    return true;
-  }
-
-  function hasObjectPrototype(o) {
-    return Object.prototype.toString.call(o) === '[object Object]';
-  }
-
-  function last(arr) {
-    return arr[arr.length - 1];
-  }
-  function warning(cond, message) {
-    if (cond) {
-      if (typeof console !== 'undefined') console.warn(message);
-
-      try {
-        throw new Error(message);
-      } catch (_unused) {}
-    }
-
-    return true;
-  }
-
-  function isFunction(d) {
-    return typeof d === 'function';
-  }
-
-  function functionalUpdate(updater, previous) {
-    if (isFunction(updater)) {
-      return updater(previous);
-    }
-
-    return updater;
-  }
-  function pick(parent, keys) {
-    return keys.reduce((obj, key) => {
-      obj[key] = parent[key];
-      return obj;
-    }, {});
-  }
+    return false;
+  }
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -1015,8 +439,8 @@
     return trimPathRight(trimPathLeft(path));
   }
   function resolvePath(basepath, base, to) {
-    base = base.replace(new RegExp("^" + basepath), '/');
-    to = to.replace(new RegExp("^" + basepath), '/');
+    base = base.replace(new RegExp(`^${basepath}`), '/');
+    to = to.replace(new RegExp(`^${basepath}`), '/');
     let baseSegments = parsePathname(base);
     const toSegments = parsePathname(to);
     toSegments.forEach((toSegment, index) => {
@@ -1029,13 +453,10 @@
           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();
       } else if (toSegment.value === '.') {
         return;
@@ -1050,10 +471,8 @@
     if (!pathname) {
       return [];
     }
-
     pathname = cleanPath(pathname);
     const segments = [];
-
     if (pathname.slice(0, 1) === '/') {
       pathname = pathname.substring(1);
       segments.push({
@@ -1061,34 +480,30 @@
         value: '/'
       });
     }
-
     if (!pathname) {
       return segments;
-    } // Remove empty segments and '.' segments
-
+    }
 
+    // Remove empty segments and '.' segments
     const split = pathname.split('/').filter(Boolean);
     segments.push(...split.map(part => {
-      if (part.startsWith('*')) {
+      if (part === '$' || part === '*') {
         return {
           type: 'wildcard',
           value: part
         };
       }
-
-      if (part.charAt(0) === ':') {
+      if (part.charAt(0) === '$') {
         return {
           type: 'param',
           value: part
         };
       }
-
       return {
         type: 'pathname',
         value: part
       };
     }));
-
     if (pathname.slice(-1) === '/') {
       pathname = pathname.substring(1);
       segments.push({
@@ -1096,66 +511,59 @@
         value: '/'
       });
     }
-
     return segments;
   }
   function interpolatePath(path, params, leaveWildcard) {
     const interpolatedPathSegments = parsePathname(path);
     return joinPaths(interpolatedPathSegments.map(segment => {
-      if (segment.value === '*' && !leaveWildcard) {
+      if (['$', '*'].includes(segment.value) && !leaveWildcard) {
         return '';
       }
-
       if (segment.type === 'param') {
-        var _segment$value$substr;
-
-        return (_segment$value$substr = params[segment.value.substring(1)]) != null ? _segment$value$substr : '';
+        return params[segment.value.substring(1)] ?? '';
       }
-
       return segment.value;
     }));
   }
-  function matchPathname(currentPathname, matchLocation) {
-    const pathParams = matchByPath(currentPathname, matchLocation); // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
+  function matchPathname(basepath, currentPathname, matchLocation) {
+    const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+    // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
 
     if (matchLocation.to && !pathParams) {
       return;
-    } // if (matchLocation.search && !searchMatched) {
-    //   return
-    // }
-
-
-    return pathParams != null ? pathParams : {};
+    }
+    return pathParams ?? {};
   }
-  function matchByPath(from, matchLocation) {
-    var _matchLocation$to;
-
+  function matchByPath(basepath, from, matchLocation) {
+    if (!from.startsWith(basepath)) {
+      return undefined;
+    }
+    from = basepath != '/' ? from.substring(basepath.length) : from;
     const baseSegments = parsePathname(from);
-    const routeSegments = parsePathname("" + ((_matchLocation$to = matchLocation.to) != null ? _matchLocation$to : '*'));
+    const to = `${matchLocation.to ?? '$'}`;
+    const routeSegments = parsePathname(to);
+    if (last(baseSegments)?.value === '/') {
+      baseSegments.pop();
+    }
     const params = {};
-
     let isMatch = (() => {
       for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
         const baseSegment = baseSegments[i];
         const routeSegment = routeSegments[i];
         const isLastRouteSegment = i === routeSegments.length - 1;
         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) {
               if (matchLocation.caseSensitive) {
                 if (routeSegment.value !== baseSegment.value) {
@@ -1166,41 +574,36 @@
               }
             }
           }
-
           if (!baseSegment) {
             return false;
           }
-
           if (routeSegment.type === 'param') {
-            if ((baseSegment == null ? void 0 : baseSegment.value) === '/') {
+            if (baseSegment?.value === '/') {
               return false;
             }
-
-            if (!baseSegment.value.startsWith(':')) {
+            if (baseSegment.value.charAt(0) !== '$') {
               params[routeSegment.value.substring(1)] = baseSegment.value;
             }
           }
         }
-
         if (isLastRouteSegment && !isLastBaseSegment) {
           return !!matchLocation.fuzzy;
         }
       }
-
       return true;
     })();
-
     return isMatch ? params : undefined;
   }
 
   // @ts-nocheck
+
   // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+
   function encode(obj, pfx) {
     var k,
-        i,
-        tmp,
-        str = '';
-
+      i,
+      tmp,
+      str = '';
     for (k in obj) {
       if ((tmp = obj[k]) !== void 0) {
         if (Array.isArray(tmp)) {
@@ -1214,10 +617,8 @@
         }
       }
     }
-
     return (pfx || '') + str;
   }
-
   function toValue(mix) {
     if (!mix) return '';
     var str = decodeURIComponent(mix);
@@ -1226,482 +627,153 @@
     if (str.charAt(0) === '0') return str;
     return +str * 0 === 0 ? +str : str;
   }
-
   function decode(str) {
     var tmp,
-        k,
-        out = {},
-        arr = str.split('&');
-
+      k,
+      out = {},
+      arr = str.split('&');
     while (tmp = arr.shift()) {
       tmp = tmp.split('=');
       k = tmp.shift();
-
       if (out[k] !== void 0) {
         out[k] = [].concat(out[k], toValue(tmp.shift()));
       } else {
         out[k] = toValue(tmp.shift());
       }
     }
-
     return out;
   }
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+  const rootRouteId = '__root__';
+  class Route {
+    // Set up in this.init()
 
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
+    // customId!: TCustomId
 
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  function createRoute(routeConfig, options, parent, router) {
-    const {
-      id,
-      routeId,
-      path: routePath,
-      fullPath
-    } = routeConfig;
-
-    const action = router.state.actions[id] || (() => {
-      router.state.actions[id] = {
-        pending: [],
-        submit: async (submission, actionOpts) => {
-          var _actionOpts$invalidat;
-
-          if (!route) {
-            return;
-          }
-
-          const invalidate = (_actionOpts$invalidat = actionOpts == null ? void 0 : actionOpts.invalidate) != null ? _actionOpts$invalidat : true;
-          const actionState = {
-            submittedAt: Date.now(),
-            status: 'pending',
-            submission
-          };
-          action.current = actionState;
-          action.latest = actionState;
-          action.pending.push(actionState);
-          router.state = _extends({}, router.state, {
-            currentAction: actionState,
-            latestAction: actionState
-          });
-          router.notify();
-
-          try {
-            const res = await (route.options.action == null ? void 0 : route.options.action(submission));
-            actionState.data = res;
-
-            if (invalidate) {
-              router.invalidateRoute({
-                to: '.',
-                fromCurrent: true
-              });
-              await router.reload();
-            }
-
-            actionState.status = 'success';
-            return res;
-          } catch (err) {
-            console.error(err);
-            actionState.error = err;
-            actionState.status = 'error';
-          } finally {
-            action.pending = action.pending.filter(d => d !== actionState);
-            router.removeActionQueue.push({
-              action,
-              actionState
-            });
-            router.notify();
-          }
-        }
-      };
-      return router.state.actions[id];
-    })();
-
-    const loader = router.state.loaders[id] || (() => {
-      router.state.loaders[id] = {
-        pending: [],
-        fetch: async loaderContext => {
-          if (!route) {
-            return;
-          }
-
-          const loaderState = {
-            loadedAt: Date.now(),
-            loaderContext
-          };
-          loader.current = loaderState;
-          loader.latest = loaderState;
-          loader.pending.push(loaderState); // router.state = {
-          //   ...router.state,
-          //   currentAction: loaderState,
-          //   latestAction: loaderState,
-          // }
+    // Optional
 
-          router.notify();
-
-          try {
-            return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
-          } finally {
-            loader.pending = loader.pending.filter(d => d !== loaderState); // router.removeActionQueue.push({ loader, loaderState })
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+    }
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      this.router = opts.router;
+      const allOptions = this.options;
+      const isRoot = !allOptions?.path && !allOptions?.id;
+      this.parentRoute = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
+      } else {
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+      }
+      let path = isRoot ? rootRouteId : allOptions.path;
 
-            router.notify();
-          }
-        }
-      };
-      return router.state.loaders[id];
-    })();
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
+      }
+      const customId = allOptions?.id || path;
 
-    let route = {
-      routeId: id,
-      routeRouteId: routeId,
-      routePath,
-      fullPath,
-      options,
-      router,
-      childRoutes: undefined,
-      parentRoute: parent,
-      action,
-      loader: loader,
-      buildLink: options => {
-        return router.buildLink(_extends({}, options, {
-          from: fullPath
-        }));
-      },
-      navigate: options => {
-        return router.navigate(_extends({}, options, {
-          from: fullPath
-        }));
-      },
-      matchRoute: (matchLocation, opts) => {
-        return router.matchRoute(_extends({}, matchLocation, {
-          from: fullPath
-        }), opts);
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
       }
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
+      }
+      const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([this.parentRoute.fullPath, path]));
+      this.path = path;
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
+    };
+    addChildren = children => {
+      this.children = children;
+      return this;
     };
-    router.options.createRoute == null ? void 0 : router.options.createRoute({
-      router,
-      route
-    });
-    return route;
-  }
-  function cascadeLoaderData(matches) {
-    matches.forEach((match, index) => {
-      const parent = matches[index - 1];
 
-      if (parent) {
-        match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
-      }
-    });
+    // generate = (
+    //   options: Omit<
+    //     RouteOptions<
+    //       TParentRoute,
+    //       TCustomId,
+    //       TPath,
+    //       InferFullSearchSchema<TParentRoute>,
+    //       TSearchSchema,
+    //       TFullSearchSchema,
+    //       TParentRoute['__types']['allParams'],
+    //       TParams,
+    //       TAllParams,
+    //       TParentContext,
+    //       TAllParentContext,
+    //       TRouteContext,
+    //       TContext
+    //     >,
+    //     'path'
+    //   >,
+    // ) => {
+    //   invariant(
+    //     false,
+    //     `route.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `,
+    //   )
+    // }
   }
 
-  const rootRouteId = '__root__';
-  const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    if (isRoot === void 0) {
-      isRoot = true;
-    }
-
-    if (isRoot) {
-      options.path = rootRouteId;
-    } // Strip the root from parentIds
-
-
-    if (parentId === rootRouteId) {
-      parentId = '';
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
     }
-
-    let path = isRoot ? rootRouteId : options.path; // If the path is anything other than an index path, trim it up
-
-    if (path && path !== '/') {
-      path = trimPath(path);
-    }
-
-    const routeId = path || options.id;
-    let id = joinPaths([parentId, routeId]);
-
-    if (path === rootRouteId) {
-      path = '/';
-    }
-
-    if (id !== rootRouteId) {
-      id = joinPaths(['/', id]);
-    }
-
-    const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parentPath, path]));
-    return {
-      id: id,
-      routeId: routeId,
-      path: path,
-      fullPath: fullPath,
-      options: options,
-      children,
-      createChildren: cb => createRouteConfig(options, cb(childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)), false, parentId, parentPath),
-      addChildren: children => createRouteConfig(options, children, false, parentId, parentPath),
-      createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)
+    static withRouterContext = () => {
+      return options => new RootRoute(options);
     };
-  };
-
-  const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
-  function createRouteMatch(router, route, opts) {
-    const routeMatch = _extends({}, route, opts, {
-      router,
-      routeSearch: {},
-      search: {},
-      childMatches: [],
-      status: 'idle',
-      routeLoaderData: {},
-      loaderData: {},
-      isPending: false,
-      isFetching: false,
-      isInvalid: false,
-      invalidAt: Infinity,
-      getIsInvalid: () => {
-        const now = Date.now();
-        return routeMatch.isInvalid || routeMatch.invalidAt < now;
-      },
-      __: {
-        abortController: new AbortController(),
-        latestId: '',
-        resolve: () => {},
-        notify: () => {
-          routeMatch.__.resolve();
-
-          routeMatch.router.notify();
-        },
-        startPending: () => {
-          var _routeMatch$options$p, _routeMatch$options$p2;
-
-          const pendingMs = (_routeMatch$options$p = routeMatch.options.pendingMs) != null ? _routeMatch$options$p : router.options.defaultPendingMs;
-          const pendingMinMs = (_routeMatch$options$p2 = routeMatch.options.pendingMinMs) != null ? _routeMatch$options$p2 : router.options.defaultPendingMinMs;
-
-          if (routeMatch.__.pendingTimeout || routeMatch.status !== 'loading' || typeof pendingMs === 'undefined') {
-            return;
-          }
-
-          routeMatch.__.pendingTimeout = setTimeout(() => {
-            routeMatch.isPending = true;
-
-            routeMatch.__.resolve();
-
-            if (typeof pendingMinMs !== 'undefined') {
-              routeMatch.__.pendingMinPromise = new Promise(r => routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs));
-            }
-          }, pendingMs);
-        },
-        cancelPending: () => {
-          routeMatch.isPending = false;
-          clearTimeout(routeMatch.__.pendingTimeout);
-          clearTimeout(routeMatch.__.pendingMinTimeout);
-          delete routeMatch.__.pendingMinPromise;
-        },
-        // setParentMatch: (parentMatch?: RouteMatch) => {
-        //   routeMatch.parentMatch = parentMatch
-        // },
-        // addChildMatch: (childMatch: RouteMatch) => {
-        //   if (
-        //     routeMatch.childMatches.find((d) => d.matchId === childMatch.matchId)
-        //   ) {
-        //     return
-        //   }
-        //   routeMatch.childMatches.push(childMatch)
-        // },
-        validate: () => {
-          var _routeMatch$parentMat, _routeMatch$parentMat2;
-
-          // Validate the search params and stabilize them
-          const parentSearch = (_routeMatch$parentMat = (_routeMatch$parentMat2 = routeMatch.parentMatch) == null ? void 0 : _routeMatch$parentMat2.search) != null ? _routeMatch$parentMat : router.location.search;
-
-          try {
-            const prevSearch = routeMatch.routeSearch;
-            const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-            let nextSearch = replaceEqualDeep(prevSearch, validator == null ? void 0 : validator(parentSearch)); // Invalidate route matches when search param stability changes
-
-            if (prevSearch !== nextSearch) {
-              routeMatch.isInvalid = true;
-            }
-
-            routeMatch.routeSearch = nextSearch;
-            routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
-          } catch (err) {
-            console.error(err);
-            const error = new Error('Invalid search params found', {
-              cause: err
-            });
-            error.code = 'INVALID_SEARCH_PARAMS';
-            routeMatch.status = 'error';
-            routeMatch.error = error; // Do not proceed with loading the route
-
-            return;
-          }
-        }
-      },
-      cancel: () => {
-        var _routeMatch$__$abortC;
-
-        (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-
-        routeMatch.__.cancelPending();
-      },
-      invalidate: () => {
-        routeMatch.isInvalid = true;
-      },
-      hasLoaders: () => {
-        return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
-      },
-      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.state.matches.find(d => d.matchId === routeMatch.matchId)) {
-            return;
-          }
-
-          router.matchCache[routeMatch.matchId] = {
-            gc: now + loaderOpts.gcMaxAge,
-            match: routeMatch
-          };
-        } // If the match is invalid, errored or idle, trigger it to load
-
-
-        if (routeMatch.status === 'success' && routeMatch.getIsInvalid() || routeMatch.status === 'error' || routeMatch.status === 'idle') {
-          const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-          routeMatch.fetch({
-            maxAge
-          });
-        }
-      },
-      fetch: async opts => {
-        const id = '' + Date.now() + Math.random();
-        routeMatch.__.latestId = id; // If the match was in an error state, set it
-        // to a loading state again. Otherwise, keep it
-        // as loading or resolved
-
-        if (routeMatch.status === 'idle') {
-          routeMatch.status = 'loading';
-        } // We started loading the route, so it's no longer invalid
-
-
-        routeMatch.isInvalid = false;
-        routeMatch.__.loadPromise = new Promise(async resolve => {
-          // We are now fetching, even if it's in the background of a
-          // resolved state
-          routeMatch.isFetching = true;
-          routeMatch.__.resolve = resolve;
-
-          const loaderPromise = (async () => {
-            // Load the elements and data in parallel
-            routeMatch.__.elementsPromise = (async () => {
-              // then run all element and data loaders in parallel
-              // For each element type, potentially load it asynchronously
-              await Promise.all(elementTypes.map(async type => {
-                const routeElement = routeMatch.options[type];
-
-                if (routeMatch.__[type]) {
-                  return;
-                }
-
-                routeMatch.__[type] = await router.options.createElement(routeElement);
-              }));
-            })();
-
-            routeMatch.__.dataPromise = Promise.resolve().then(async () => {
-              try {
-                var _ref, _ref2, _opts$maxAge;
-
-                if (routeMatch.options.loader) {
-                  const data = await routeMatch.options.loader({
-                    params: routeMatch.params,
-                    search: routeMatch.routeSearch,
-                    signal: routeMatch.__.abortController.signal
-                  });
-
-                  if (id !== routeMatch.__.latestId) {
-                    return routeMatch.__.loaderPromise;
-                  }
-
-                  routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-                }
-
-                routeMatch.error = undefined;
-                routeMatch.status = 'success';
-                routeMatch.updatedAt = Date.now();
-                routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
-              } catch (err) {
-                if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise;
-                }
-
-                {
-                  console.error(err);
-                }
-
-                routeMatch.error = err;
-                routeMatch.status = 'error';
-                routeMatch.updatedAt = Date.now();
-              }
-            });
-
-            try {
-              await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
-
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise;
-              }
-
-              if (routeMatch.__.pendingMinPromise) {
-                await routeMatch.__.pendingMinPromise;
-                delete routeMatch.__.pendingMinPromise;
-              }
-            } finally {
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise;
-              }
-
-              routeMatch.__.cancelPending();
-
-              routeMatch.isPending = false;
-              routeMatch.isFetching = false;
-
-              routeMatch.__.notify();
-            }
-          })();
-
-          routeMatch.__.loaderPromise = loaderPromise;
-          await loaderPromise;
-
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loaderPromise;
-          }
-
-          delete routeMatch.__.loaderPromise;
-        });
-        return await routeMatch.__.loadPromise;
-      }
-    });
-
-    if (!routeMatch.hasLoaders()) {
-      routeMatch.status = 'success';
-    }
-
-    return routeMatch;
   }
 
+  // const rootRoute = new RootRoute({
+  //   validateSearch: () => null as unknown as { root?: boolean },
+  // })
+
+  // const aRoute = new Route({
+  //   getParentRoute: () => rootRoute,
+  //   path: 'a',
+  //   validateSearch: () => null as unknown as { a?: string },
+  // })
+
+  // const bRoute = new Route({
+  //   getParentRoute: () => aRoute,
+  //   path: 'b',
+  // })
+
+  // const rootIsRoot = rootRoute.isRoot
+  // //    ^?
+  // const aIsRoot = aRoute.isRoot
+  // //    ^?
+
+  // const rId = rootRoute.id
+  // //    ^?
+  // const aId = aRoute.id
+  // //    ^?
+  // const bId = bRoute.id
+  // //    ^?
+
+  // const rPath = rootRoute.fullPath
+  // //    ^?
+  // const aPath = aRoute.fullPath
+  // //    ^?
+  // const bPath = bRoute.fullPath
+  // //    ^?
+
+  // const rSearch = rootRoute.__types.fullSearchSchema
+  // //    ^?
+  // const aSearch = aRoute.__types.fullSearchSchema
+  // //    ^?
+  // const bSearch = bRoute.__types.fullSearchSchema
+  // //    ^?
+
+  // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
+  // //    ^?
+
   const defaultParseSearch = parseSearchWith(JSON.parse);
   const defaultStringifySearch = stringifySearchWith(JSON.stringify);
   function parseSearchWith(parser) {
@@ -1709,1156 +781,1386 @@
       if (searchStr.substring(0, 1) === '?') {
         searchStr = searchStr.substring(1);
       }
+      let query = decode(searchStr);
 
-      let query = decode(searchStr); // Try to parse any query params that might be json
-
+      // 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) {//
+          } catch (err) {
+            //
           }
         }
       }
-
       return query;
     };
   }
   function stringifySearchWith(stringify) {
     return search => {
-      search = _extends({}, search);
-
+      search = {
+        ...search
+      };
       if (search) {
         Object.keys(search).forEach(key => {
           const val = search[key];
-
           if (typeof val === 'undefined' || val === undefined) {
             delete search[key];
           } else if (val && typeof val === 'object' && val !== null) {
             try {
               search[key] = stringify(val);
-            } catch (err) {// silent
+            } catch (err) {
+              // silent
             }
           }
         });
       }
-
       const searchStr = encode(search).toString();
-      return searchStr ? "?" + searchStr : '';
+      return searchStr ? `?${searchStr}` : '';
     };
   }
 
-  var _window$document;
-  // Detect if we're in the DOM
-  const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement); // This is the default history object if none is defined
-
-  const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrowserHistory();
-
-  function createRouter(userOptions) {
-    var _userOptions$stringif, _userOptions$parseSea;
-
-    const history = (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory();
-
-    const originalOptions = _extends({
-      defaultLoaderGcMaxAge: 5 * 60 * 1000,
-      defaultLoaderMaxAge: 0,
-      defaultPreloadMaxAge: 2000,
-      defaultPreloadDelay: 50
-    }, userOptions, {
-      stringifySearch: (_userOptions$stringif = userOptions == null ? void 0 : userOptions.stringifySearch) != null ? _userOptions$stringif : defaultStringifySearch,
-      parseSearch: (_userOptions$parseSea = userOptions == null ? void 0 : userOptions.parseSearch) != null ? _userOptions$parseSea : defaultParseSearch
-    });
-
-    let router = {
-      history,
-      options: originalOptions,
-      listeners: [],
-      removeActionQueue: [],
-      // Resolved after construction
-      basepath: '',
-      routeTree: undefined,
-      routesById: {},
-      location: undefined,
-      allRouteInfo: undefined,
-      //
-      navigationPromise: Promise.resolve(),
-      resolveNavigation: () => {},
-      matchCache: {},
-      state: {
-        status: 'idle',
-        location: null,
-        matches: [],
-        actions: {},
-        loaders: {},
-        lastUpdated: Date.now(),
-        isFetching: false,
-        isPreloading: false
-      },
-      startedLoadingAt: Date.now(),
-      subscribe: listener => {
-        router.listeners.push(listener);
-        return () => {
-          router.listeners = router.listeners.filter(x => x !== listener);
-        };
-      },
-      getRoute: id => {
-        return router.routesById[id];
-      },
-      notify: () => {
-        router.state = _extends({}, router.state, {
-          isFetching: router.state.status === 'loading' || router.state.matches.some(d => d.isFetching),
-          isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
-        });
-        cascadeLoaderData(router.state.matches);
-        router.listeners.forEach(listener => listener(router));
-      },
-      dehydrateState: () => {
-        return _extends({}, pick(router.state, ['status', 'location', 'lastUpdated']), {
-          matches: router.state.matches.map(match => pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
-        });
-      },
-      hydrateState: dehydratedState => {
-        // Match the routes
-        const matches = router.matchRoutes(router.location.pathname, {
-          strictParseParams: true
-        });
-        router.state = _extends({}, router.state, dehydratedState, {
-          matches: matches.map(match => {
-            const dehydratedMatch = dehydratedState.matches.find(d => d.matchId === match.matchId);
-            invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
-            Object.assign(match, dehydratedMatch);
-            return match;
-          })
-        });
-      },
-      mount: () => {
-        const next = router.__.buildLocation({
-          to: '.',
-          search: true,
-          hash: true
-        }); // If the current location isn't updated, trigger a navigation
-        // to the current location. Otherwise, load the current location.
-
-
-        if (next.href !== router.location.href) {
-          router.__.commitLocation(next, true);
+  const defaultFetchServerDataFn = async ({
+    router,
+    routeMatch
+  }) => {
+    const next = router.buildNext({
+      to: '.',
+      search: d => ({
+        ...(d ?? {}),
+        __data: {
+          matchId: routeMatch.id
         }
-
-        router.loadLocation();
-        const unsub = router.history.listen(event => {
-          console.log(event.location);
-          router.loadLocation(router.__.parseLocation(event.location, router.location));
-        }); // addEventListener does not exist in React Native, but window does
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
-        if (!isServer && window.addEventListener) {
-          // Listen to visibillitychange and focus
-          window.addEventListener('visibilitychange', router.onFocus, false);
-          window.addEventListener('focus', router.onFocus, false);
+      })
+    });
+    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 {
+    #unsubHistory;
+    startedLoadingAt = Date.now();
+    resolveNavigation = () => {};
+    constructor(options) {
+      this.options = {
+        defaultPreloadDelay: 50,
+        context: undefined,
+        ...options,
+        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+        parseSearch: options?.parseSearch ?? defaultParseSearch,
+        fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
+      };
+      this.__store = new Store(getInitialRouterState(), {
+        onUpdate: state => {
+          this.state = state;
         }
-
-        return () => {
-          unsub(); // Be sure to unsubscribe if a new handler is set
-
-          window.removeEventListener('visibilitychange', router.onFocus);
-          window.removeEventListener('focus', router.onFocus);
-        };
-      },
-      onFocus: () => {
-        router.loadLocation();
-      },
-      update: opts => {
-        const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
-
-        if (!router.location || newHistory) {
-          if (opts != null && opts.history) {
-            router.history = opts.history;
-          }
-
-          router.location = router.__.parseLocation(router.history.location);
-          router.state.location = router.location;
+      });
+      this.state = this.__store.state;
+      this.basepath = '';
+      this.update(options);
+
+      // Allow frameworks to hook into the router creation
+      this.options.Router?.(this);
+      const next = this.buildNext({
+        hash: true,
+        fromCurrent: true,
+        search: true,
+        state: true
+      });
+      if (this.state.latestLocation.href !== next.href) {
+        this.#commitLocation({
+          ...next,
+          replace: true
+        });
+      }
+    }
+    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, start loading the matches
+        if (!this.state.currentMatches.length) {
+          this.safeLoad();
         }
-
-        Object.assign(router.options, opts);
-        const {
-          basepath,
-          routeConfig
-        } = router.options;
-        router.basepath = cleanPath("/" + (basepath != null ? basepath : ''));
-
-        if (routeConfig) {
-          router.routesById = {};
-          router.routeTree = router.__.buildRouteTree(routeConfig);
+      }
+      return () => {};
+    };
+    update = opts => {
+      Object.assign(this.options, opts);
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        if (this.#unsubHistory) {
+          this.#unsubHistory();
         }
-
-        return router;
-      },
-      cancelMatches: () => {
-        var _router$state$pending, _router$state$pending2;
-        [...router.state.matches, ...((_router$state$pending = (_router$state$pending2 = router.state.pending) == null ? void 0 : _router$state$pending2.matches) != null ? _router$state$pending : [])].forEach(match => {
-          match.cancel();
+        this.history = this.options.history ?? (isServer ? createMemoryHistory() : createBrowserHistory());
+        const parsedLocation = this.#parseLocation();
+        this.__store.setState(s => ({
+          ...s,
+          latestLocation: parsedLocation,
+          currentLocation: parsedLocation
+        }));
+        this.#unsubHistory = this.history.listen(() => {
+          this.safeLoad({
+            next: this.#parseLocation(this.state.latestLocation)
+          });
         });
-      },
-      loadLocation: async next => {
-        const id = Math.random();
-        router.startedLoadingAt = id;
-
-        if (next) {
+      }
+      const {
+        basepath,
+        routeTree
+      } = this.options;
+      this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
+      if (routeTree) {
+        this.routesById = {};
+        this.routeTree = this.#buildRouteTree(routeTree);
+      }
+      return this;
+    };
+    buildNext = opts => {
+      const next = this.#buildLocation(opts);
+      const __matches = this.matchRoutes(next.pathname);
+      return this.#buildLocation({
+        ...opts,
+        __matches
+      });
+    };
+    cancelMatches = () => {
+      [...this.state.currentMatches, ...(this.state.pendingMatches || [])].forEach(match => {
+        match.cancel();
+      });
+    };
+    safeLoad = opts => {
+      this.load(opts).catch(err => {
+        console.warn(err);
+        invariant(false, 'Encountered an error during router.load()! ☝️.');
+      });
+    };
+    load = async opts => {
+      let now = Date.now();
+      const startedAt = now;
+      this.startedLoadingAt = startedAt;
+
+      // Cancel any pending matches
+      this.cancelMatches();
+      let matches;
+      this.__store.batch(() => {
+        if (opts?.next) {
           // Ingest the new location
-          router.location = next;
-        } // Clear out old actions
-
-
-        router.removeActionQueue.forEach(_ref => {
-          let {
-            action,
-            actionState
-          } = _ref;
-
-          if (router.state.currentAction === actionState) {
-            router.state.currentAction = undefined;
-          }
-
-          if (action.current === actionState) {
-            action.current = undefined;
-          }
-        });
-        router.removeActionQueue = []; // Cancel any pending matches
-
-        router.cancelMatches(); // Match the routes
+          this.__store.setState(s => ({
+            ...s,
+            latestLocation: opts.next
+          }));
+        }
 
-        const matches = router.matchRoutes(router.location.pathname, {
+        // Match the routes
+        matches = this.matchRoutes(this.state.latestLocation.pathname, {
           strictParseParams: true
         });
-        router.state = _extends({}, router.state, {
-          pending: {
-            matches: matches,
-            location: router.location
-          },
-          status: 'loading'
-        });
-        router.notify(); // Load the matches
+        this.__store.setState(s => ({
+          ...s,
+          status: 'pending',
+          pendingMatches: matches,
+          pendingLocation: this.state.latestLocation
+        }));
+      });
 
-        await router.loadMatches(matches, {
-          withPending: true
-        });
+      // Load the matches
+      await this.loadMatches(matches, this.state.pendingLocation
+      // opts
+      );
 
-        if (router.startedLoadingAt !== id) {
-          // Ignore side-effects of match loading
-          return router.navigationPromise;
+      if (this.startedLoadingAt !== startedAt) {
+        // Ignore side-effects of outdated side-effects
+        return this.navigationPromise;
+      }
+      const previousMatches = this.state.currentMatches;
+      const exiting = [],
+        staying = [];
+      previousMatches.forEach(d => {
+        if (matches.find(dd => dd.id === d.id)) {
+          staying.push(d);
+        } else {
+          exiting.push(d);
         }
-
-        const previousMatches = router.state.matches;
-        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.id === d.id);
+      });
+      now = Date.now();
+      exiting.forEach(d => {
+        d.__onExit?.({
+          params: d.params,
+          search: d.state.routeSearch
         });
-        const now = Date.now();
-        exiting.forEach(d => {
-          var _ref2, _d$options$loaderGcMa, _ref3, _d$options$loaderMaxA;
-
-          d.__.onExit == null ? void 0 : d.__.onExit({
-            params: d.params,
-            search: d.routeSearch
-          }); // Clear idle error states when match leaves
-
-          if (d.status === 'error' && !d.isFetching) {
-            d.status = 'idle';
-            d.error = undefined;
-          }
 
-          const gc = Math.max((_ref2 = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref2 : 0, (_ref3 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0);
-
-          if (gc > 0) {
-            router.matchCache[d.matchId] = {
-              gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
-              match: d
-            };
-          }
+        // Clear non-loading error states when match leaves
+        if (d.state.status === 'error') {
+          this.__store.setState(s => ({
+            ...s,
+            status: 'idle',
+            error: undefined
+          }));
+        }
+      });
+      staying.forEach(d => {
+        d.route.options.onTransition?.({
+          params: d.params,
+          search: d.state.routeSearch
         });
-        staying.forEach(d => {
-          d.options.onTransition == null ? void 0 : d.options.onTransition({
-            params: d.params,
-            search: d.routeSearch
-          });
+      });
+      entering.forEach(d => {
+        d.__onExit = d.route.options.onLoaded?.({
+          params: d.params,
+          search: d.state.search
         });
-        const entering = matches.filter(d => {
-          return !previousMatches.find(dd => dd.matchId === d.matchId);
+      });
+      const prevLocation = this.state.currentLocation;
+      this.__store.setState(s => ({
+        ...s,
+        status: 'idle',
+        currentLocation: this.state.latestLocation,
+        currentMatches: matches,
+        pendingLocation: undefined,
+        pendingMatches: undefined
+      }));
+      matches.forEach(match => {
+        match.__commit();
+      });
+      if (prevLocation.href !== this.state.currentLocation.href) {
+        this.options.onRouteChange?.();
+      }
+      this.resolveNavigation();
+    };
+    getRoute = id => {
+      const route = this.routesById[id];
+      invariant(route, `Route with id "${id}" not found`);
+      return route;
+    };
+    loadRoute = async (navigateOpts = this.state.latestLocation) => {
+      const next = this.buildNext(navigateOpts);
+      const matches = this.matchRoutes(next.pathname, {
+        strictParseParams: true
+      });
+      await this.loadMatches(matches, next);
+      return matches;
+    };
+    preloadRoute = async (navigateOpts = this.state.latestLocation) => {
+      const next = this.buildNext(navigateOpts);
+      const matches = this.matchRoutes(next.pathname, {
+        strictParseParams: true
+      });
+      await this.loadMatches(matches, next, {
+        preload: true
+      });
+      return matches;
+    };
+    matchRoutes = (pathname, opts) => {
+      const matches = [];
+      if (!this.routeTree) {
+        return matches;
+      }
+      const existingMatches = [...this.state.currentMatches, ...(this.state.pendingMatches ?? [])];
+      const findInRouteTree = async routes => {
+        const parentMatch = last(matches);
+        let params = parentMatch?.params ?? {};
+        const filteredRoutes = this.options.filterRoutes?.(routes) ?? routes;
+        let matchingRoutes = [];
+        const findMatchInRoutes = (parentRoutes, routes) => {
+          routes.some(route => {
+            const children = route.children;
+            if (!route.path && children?.length) {
+              return findMatchInRoutes([...matchingRoutes, route], children);
+            }
+            const fuzzy = !!(route.path !== '/' || children?.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) {
+              matchingRoutes = [...parentRoutes, route];
+            }
+            return !!matchingRoutes.length;
+          });
+          return !!matchingRoutes.length;
+        };
+        findMatchInRoutes([], filteredRoutes);
+        if (!matchingRoutes.length) {
+          return;
+        }
+        matchingRoutes.forEach(foundRoute => {
+          const interpolatedPath = interpolatePath(foundRoute.path, params);
+          const matchId = interpolatePath(foundRoute.id, params, true);
+          const match = existingMatches.find(d => d.id === matchId) || new RouteMatch(this, foundRoute, {
+            id: matchId,
+            params,
+            pathname: joinPaths([this.basepath, interpolatedPath])
+          });
+          matches.push(match);
         });
-        entering.forEach(d => {
-          d.__.onExit = d.options.onMatch == null ? void 0 : d.options.onMatch({
-            params: d.params,
-            search: d.search
+        const foundRoute = last(matchingRoutes);
+        const foundChildren = foundRoute.children;
+        if (foundChildren?.length) {
+          findInRouteTree(foundChildren);
+        }
+      };
+      findInRouteTree([this.routeTree]);
+      return matches;
+    };
+    loadMatches = async (resolvedMatches, location, opts) => {
+      // 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
           });
-          delete router.matchCache[d.matchId];
+        } catch (err) {
+          if (!opts?.preload) {
+            match.route.options.onBeforeLoadError?.(err);
+          }
+          match.route.options.onError?.(err);
+          throw err;
+        }
+      }));
+      const matchPromises = resolvedMatches.map(async (match, index) => {
+        const parentMatch = resolvedMatches[index - 1];
+        match.__load({
+          preload: opts?.preload,
+          location,
+          parentMatch
         });
-
-        if (matches.some(d => d.status === 'loading')) {
-          router.notify();
-          await Promise.all(matches.map(d => d.__.loaderPromise || Promise.resolve()));
+        await match.__loadPromise;
+        if (parentMatch) {
+          await parentMatch.__loadPromise;
         }
+      });
+      await Promise.all(matchPromises);
+    };
+    reload = () => {
+      this.navigate({
+        fromCurrent: true,
+        replace: true,
+        search: true
+      });
+    };
+    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
+
+      // If this `to` is a valid external URL, return
+      // null for LinkUtils
+      const toString = String(to);
+      const fromString = typeof from === 'undefined' ? from : String(from);
+      let isExternal;
+      try {
+        new URL(`${toString}`);
+        isExternal = true;
+      } catch (e) {}
+      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+      return 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);
+      const baseLocation = opts?.pending ? this.state.pendingLocation : this.state.currentLocation;
+      if (!baseLocation) {
+        return false;
+      }
+      const match = matchPathname(this.basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
+      });
+      if (!match) {
+        return false;
+      }
+      if (opts?.includeSearch ?? true) {
+        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      }
+      return match;
+    };
+    buildLink = ({
+      from,
+      to = '.',
+      search,
+      params,
+      hash,
+      target,
+      replace,
+      activeOptions,
+      preload,
+      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
+
+      // If this `to` is a valid external URL, return
+      // null for LinkUtils
 
-        if (router.startedLoadingAt !== id) {
-          // Ignore side-effects of match loading
-          return;
+      try {
+        new URL(`${to}`);
+        return {
+          type: 'external',
+          href: to
+        };
+      } 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 currentPathSplit = this.state.currentLocation.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 ? this.state.currentLocation.pathname === next.pathname : pathIsFuzzyEqual;
+      const hashTest = activeOptions?.includeHash ? this.state.currentLocation.hash === next.hash : true;
+      const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(this.state.currentLocation.search, next.search) : true;
+
+      // The final "active" test
+      const isActive = pathTest && hashTest && searchTest;
+
+      // The click handler
+      const handleClick = e => {
+        if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+          e.preventDefault();
+
+          // All is well? Navigate!
+          this.#commitLocation(nextOpts);
         }
+      };
 
-        router.state = _extends({}, router.state, {
-          location: router.location,
-          matches,
-          pending: undefined,
-          status: 'idle'
+      // The click handler
+      const handleFocus = e => {
+        if (preload) {
+          this.preloadRoute(nextOpts).catch(err => {
+            console.warn(err);
+            console.warn('Error preloading route! ☝️');
+          });
+        }
+      };
+      const handleTouchStart = e => {
+        this.preloadRoute(nextOpts).catch(err => {
+          console.warn(err);
+          console.warn('Error preloading route! ☝️');
         });
-        router.notify();
-        router.resolveNavigation();
-      },
-      cleanMatchCache: () => {
-        const now = Date.now();
-        Object.keys(router.matchCache).forEach(matchId => {
-          const entry = router.matchCache[matchId]; // Don't remove loading matches
-
-          if (entry.match.status === 'loading') {
-            return;
-          } // Do not remove successful matches that are still valid
-
-
-          if (entry.gc > 0 && entry.gc > now) {
+      };
+      const handleEnter = e => {
+        const target = e.target || {};
+        if (preload) {
+          if (target.preloadTimeout) {
             return;
-          } // Everything else gets removed
-
-
-          delete router.matchCache[matchId];
-        });
-      },
-      loadRoute: async function loadRoute(navigateOpts) {
-        if (navigateOpts === void 0) {
-          navigateOpts = router.location;
+          }
+          target.preloadTimeout = setTimeout(() => {
+            target.preloadTimeout = null;
+            this.preloadRoute(nextOpts).catch(err => {
+              console.warn(err);
+              console.warn('Error preloading route! ☝️');
+            });
+          }, preloadDelay);
         }
-
-        const next = router.buildNext(navigateOpts);
-        const matches = router.matchRoutes(next.pathname, {
-          strictParseParams: true
-        });
-        await router.loadMatches(matches);
-        return matches;
-      },
-      preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
-        var _ref4, _ref5, _loaderOpts$maxAge, _ref6, _ref7, _loaderOpts$gcMaxAge;
-
-        if (navigateOpts === void 0) {
-          navigateOpts = router.location;
+      };
+      const handleLeave = e => {
+        const target = e.target || {};
+        if (target.preloadTimeout) {
+          clearTimeout(target.preloadTimeout);
+          target.preloadTimeout = null;
         }
-
-        const next = router.buildNext(navigateOpts);
-        const matches = router.matchRoutes(next.pathname, {
+      };
+      return {
+        type: 'internal',
+        next,
+        handleFocus,
+        handleClick,
+        handleEnter,
+        handleLeave,
+        handleTouchStart,
+        isActive,
+        disabled
+      };
+    };
+    dehydrate = () => {
+      return {
+        state: {
+          ...pick(this.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
+          currentMatches: this.state.currentMatches.map(match => ({
+            id: match.id,
+            state: {
+              status: match.state.status
+            }
+          }))
+        }
+      };
+    };
+    hydrate = dehydratedRouter => {
+      this.__store.setState(s => {
+        // Match the routes
+        const currentMatches = this.matchRoutes(dehydratedRouter.state.latestLocation.pathname, {
           strictParseParams: true
         });
-        await router.loadMatches(matches, {
-          preload: true,
-          maxAge: (_ref4 = (_ref5 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref5 : router.options.defaultLoaderMaxAge) != null ? _ref4 : 0,
-          gcMaxAge: (_ref6 = (_ref7 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref7 : router.options.defaultLoaderGcMaxAge) != null ? _ref6 : 0
+        currentMatches.forEach((match, index) => {
+          const dehydratedMatch = dehydratedRouter.state.currentMatches[index];
+          invariant(dehydratedMatch && dehydratedMatch.id === match.id, 'Oh no! There was a hydration mismatch when attempting to hydrate the state of the router! 😬');
+          match.__store.setState(s => ({
+            ...s,
+            ...dehydratedMatch.state
+          }));
         });
-        return matches;
-      },
-      matchRoutes: (pathname, opts) => {
-        var _router$state$pending3, _router$state$pending4;
-
-        router.cleanMatchCache();
-        const matches = [];
-
-        if (!router.routeTree) {
-          return matches;
-        }
-
-        const existingMatches = [...router.state.matches, ...((_router$state$pending3 = (_router$state$pending4 = router.state.pending) == null ? void 0 : _router$state$pending4.matches) != null ? _router$state$pending3 : [])];
-
-        const recurse = async routes => {
-          var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
-
-          const parentMatch = last(matches);
-          let params = (_parentMatch$params = parentMatch == null ? void 0 : parentMatch.params) != null ? _parentMatch$params : {};
-          const filteredRoutes = (_router$options$filte = router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) != null ? _router$options$filte : routes;
-          let foundRoutes = [];
-
-          const findMatchInRoutes = (parentRoutes, routes) => {
-            routes.some(route => {
-              var _route$childRoutes, _route$childRoutes2, _route$options$caseSe;
-
-              if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
-                return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
+        return {
+          ...s,
+          ...dehydratedRouter.state,
+          currentMatches
+        };
+      });
+    };
+    #buildRouteTree = routeTree => {
+      const recurseRoutes = (routes, parentRoute) => {
+        routes.forEach((route, i) => {
+          route.init({
+            originalIndex: i,
+            router: this
+          });
+          const existingRoute = this.routesById[route.id];
+          invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
+          this.routesById[route.id] = route;
+          const children = route.children;
+          if (children?.length) {
+            recurseRoutes(children);
+            route.children = children.map((d, i) => {
+              const parsed = parsePathname(trimPathLeft(cleanPath(d.path ?? '/')));
+              while (parsed.length > 1 && parsed[0]?.value === '/') {
+                parsed.shift();
               }
-
-              const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length);
-              const matchParams = matchPathname(pathname, {
-                to: route.fullPath,
-                fuzzy,
-                caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
-              });
-
-              if (matchParams) {
-                let parsedParams;
-
-                try {
-                  var _route$options$parseP;
-
-                  parsedParams = (_route$options$parseP = route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) != null ? _route$options$parseP : matchParams;
-                } catch (err) {
-                  if (opts != null && opts.strictParseParams) {
-                    throw err;
-                  }
+              let score = 0;
+              parsed.forEach((d, i) => {
+                let modifier = 1;
+                while (i--) {
+                  modifier *= 0.001;
                 }
-
-                params = _extends({}, params, parsedParams);
-              }
-
-              if (!!matchParams) {
-                foundRoutes = [...parentRoutes, route];
+                if (d.type === 'pathname' && d.value !== '/') {
+                  score += 1 * modifier;
+                } else if (d.type === 'param') {
+                  score += 2 * modifier;
+                } else if (d.type === 'wildcard') {
+                  score += 3 * modifier;
+                }
+              });
+              return {
+                child: d,
+                parsed,
+                index: i,
+                score
+              };
+            }).sort((a, b) => {
+              if (a.score !== b.score) {
+                return a.score - b.score;
               }
-
-              return !!foundRoutes.length;
-            });
-            return !!foundRoutes.length;
-          };
-
-          findMatchInRoutes([], filteredRoutes);
-
-          if (!foundRoutes.length) {
-            return;
-          }
-
-          foundRoutes.forEach(foundRoute => {
-            var _router$matchCache$ma;
-
-            const interpolatedPath = interpolatePath(foundRoute.routePath, params);
-            const matchId = interpolatePath(foundRoute.routeId, params, true);
-            const match = existingMatches.find(d => d.matchId === matchId) || ((_router$matchCache$ma = router.matchCache[matchId]) == null ? void 0 : _router$matchCache$ma.match) || createRouteMatch(router, foundRoute, {
-              matchId,
-              params,
-              pathname: joinPaths([pathname, interpolatedPath])
-            });
-            matches.push(match);
-          });
-          const foundRoute = last(foundRoutes);
-
-          if ((_foundRoute$childRout = foundRoute.childRoutes) != null && _foundRoute$childRout.length) {
-            recurse(foundRoute.childRoutes);
-          }
-        };
-
-        recurse([router.routeTree]);
-        cascadeLoaderData(matches);
-        return matches;
-      },
-      loadMatches: async (resolvedMatches, loaderOpts) => {
-        const matchPromises = resolvedMatches.map(async match => {
-          // Validate the match (loads search params etc)
-          match.__.validate();
-
-          match.load(loaderOpts);
-
-          if (match.status === 'loading') {
-            // If requested, start the pending timers
-            if (loaderOpts != null && loaderOpts.withPending) match.__.startPending(); // Wait for the first sign of activity from the match
-            // This might be completion, error, or a pending state
-
-            await match.__.loadPromise;
+              return a.index - b.index;
+            }).map(d => d.child);
           }
         });
-        router.notify();
-        await Promise.all(matchPromises);
-      },
-      invalidateRoute: opts => {
-        var _router$state$pending5, _router$state$pending6;
-
-        const next = router.buildNext(opts);
-        const unloadedMatchIds = router.matchRoutes(next.pathname).map(d => d.matchId);
-        [...router.state.matches, ...((_router$state$pending5 = (_router$state$pending6 = router.state.pending) == null ? void 0 : _router$state$pending6.matches) != null ? _router$state$pending5 : [])].forEach(match => {
-          if (unloadedMatchIds.includes(match.matchId)) {
-            match.invalidate();
+      };
+      recurseRoutes([routeTree]);
+      const recurceCheckRoutes = (routes, parentRoute) => {
+        routes.forEach(route => {
+          if (route.isRoot) {
+            invariant(!parentRoute, 'Root routes can only be used as the root of a route tree.');
+          } else {
+            invariant(parentRoute ? route.parentRoute === parentRoute : true, `Expected a route with path "${route.path}" to be passed to its parent route "${route.parentRoute?.id}" in an addChildren() call, but was instead passed as a child of the "${parentRoute?.id}" route.`);
           }
-        });
-      },
-      reload: () => router.__.navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true
-      }),
-      resolvePath: (from, path) => {
-        return resolvePath(router.basepath, from, cleanPath(path));
-      },
-      matchRoute: (location, opts) => {
-        var _location$from;
-
-        // const location = router.buildNext(opts)
-        location = _extends({}, location, {
-          to: location.to ? router.resolvePath((_location$from = location.from) != null ? _location$from : '', location.to) : undefined
-        });
-        const next = router.buildNext(location);
-
-        if (opts != null && opts.pending) {
-          var _router$state$pending7;
-
-          if (!((_router$state$pending7 = router.state.pending) != null && _router$state$pending7.location)) {
-            return false;
+          if (route.children) {
+            recurceCheckRoutes(route.children, route);
           }
-
-          return !!matchPathname(router.state.pending.location.pathname, _extends({}, opts, {
-            to: next.pathname
-          }));
-        }
-
-        return !!matchPathname(router.state.location.pathname, _extends({}, opts, {
-          to: next.pathname
-        }));
-      },
-      navigate: async _ref8 => {
-        let {
-          from,
-          to = '.',
-          search,
-          hash,
-          replace,
-          params
-        } = _ref8;
-        // 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 router.__.navigate({
-          from: fromString,
-          to: toString,
-          search,
-          hash,
-          replace,
-          params
         });
-      },
-      buildLink: _ref9 => {
-        var _preload, _ref10;
-
-        let {
-          from,
-          to = '.',
-          search,
-          params,
-          hash,
-          target,
-          replace,
-          activeOptions,
-          preload,
-          preloadMaxAge: userPreloadMaxAge,
-          preloadGcMaxAge: userPreloadGcMaxAge,
-          preloadDelay: userPreloadDelay,
-          disabled
-        } = _ref9;
-
-        // 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
-        try {
-          new URL("" + to);
-          return {
-            type: 'external',
-            href: to
-          };
-        } catch (e) {}
-
-        const nextOpts = {
-          from,
-          to,
-          search,
-          params,
-          hash,
-          replace
-        };
-        const next = router.buildNext(nextOpts);
-        preload = (_preload = preload) != null ? _preload : router.options.defaultPreload;
-        const preloadDelay = (_ref10 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref10 : 0; // Compare path/hash for matches
-
-        const pathIsEqual = router.state.location.pathname === next.pathname;
-        const currentPathSplit = router.state.location.pathname.split('/');
-        const nextPathSplit = next.pathname.split('/');
-        const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-        const hashIsEqual = router.state.location.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);
-            } // All is well? Navigate!)
-
-
-            router.__.navigate(nextOpts);
-          }
-        }; // The click handler
-
-
-        const handleFocus = e => {
-          if (preload) {
-            router.preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge
-            });
-          }
-        };
-
-        const handleEnter = e => {
-          const target = e.target || {};
-
-          if (preload) {
-            if (target.preloadTimeout) {
-              return;
-            }
-
-            target.preloadTimeout = setTimeout(() => {
-              target.preloadTimeout = null;
-              router.preloadRoute(nextOpts, {
-                maxAge: userPreloadMaxAge,
-                gcMaxAge: userPreloadGcMaxAge
-              });
-            }, preloadDelay);
-          }
+      };
+      recurceCheckRoutes([routeTree], undefined);
+      return routeTree;
+    };
+    #parseLocation = previousLocation => {
+      let {
+        pathname,
+        search,
+        hash,
+        state
+      } = this.history.location;
+      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: state,
+        key: state?.key || '__init__'
+      };
+    };
+    #buildLocation = (dest = {}) => {
+      dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
+      const fromPathname = dest.fromCurrent ? this.state.latestLocation.pathname : dest.from ?? this.state.latestLocation.pathname;
+      let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
+        strictParseParams: true
+      });
+      const prevParams = {
+        ...last(fromMatches)?.params
+      };
+      let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+      if (nextParams) {
+        dest.__matches?.map(d => d.route.options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
+        });
+      }
+      pathname = interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = dest.__matches?.map(match => match.route.options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = dest.__matches?.map(match => match.route.options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.latestLocation.search) : this.state.latestLocation.search;
+
+      // Then the link/navigate function
+      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+      : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+      : {};
+
+      // Then post filters
+      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+      const search = replaceEqualDeep(this.state.latestLocation.search, postFilteredSearch);
+      const searchStr = this.options.stringifySearch(search);
+      let hash = dest.hash === true ? this.state.latestLocation.hash : functionalUpdate(dest.hash, this.state.latestLocation.hash);
+      hash = hash ? `#${hash}` : '';
+      const nextState = dest.state === true ? this.state.latestLocation.state : functionalUpdate(dest.state, this.state.latestLocation.state);
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: this.history.createHref(`${pathname}${searchStr}${hash}`),
+        key: dest.key
+      };
+    };
+    #commitLocation = async 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.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
+      });
+      return this.navigationPromise = new Promise(resolve => {
+        const previousNavigationResolve = this.resolveNavigation;
+        this.resolveNavigation = () => {
+          previousNavigationResolve();
+          resolve();
         };
+      });
+    };
+  }
 
-        const handleLeave = e => {
-          const target = e.target || {};
+  // 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: [],
+      lastUpdated: Date.now()
+    };
+  }
+  function isCtrlEvent(e) {
+    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  }
+  function redirect(opts) {
+    opts.isRedirect = true;
+    return opts;
+  }
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
+  }
 
-          if (target.preloadTimeout) {
-            clearTimeout(target.preloadTimeout);
-            target.preloadTimeout = null;
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+  class RouteMatch {
+    abortController = new AbortController();
+    constructor(router, route, opts) {
+      Object.assign(this, {
+        route,
+        router,
+        id: opts.id,
+        pathname: opts.pathname,
+        params: opts.params,
+        __store: new Store({
+          updatedAt: 0,
+          routeSearch: {},
+          search: {},
+          status: 'idle'
+        }, {
+          onUpdate: next => {
+            this.state = next;
           }
+        })
+      });
+      this.state = this.__store.state;
+      componentTypes.map(async type => {
+        const component = this.route.options[type];
+        if (typeof this[type] !== 'function') {
+          this[type] = component;
+        }
+      });
+      if (this.state.status === 'idle' && !this.#hasLoaders()) {
+        this.__store.setState(s => ({
+          ...s,
+          status: 'success'
+        }));
+      }
+    }
+    #hasLoaders = () => {
+      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
+    };
+    __commit = () => {
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = this.#resolveInfo({
+        location: this.router.state.currentLocation
+      });
+      this.context = context;
+      this.routeContext = routeContext;
+      this.__store.setState(s => ({
+        ...s,
+        routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
+        search: replaceEqualDeep(s.search, search)
+      }));
+    };
+    cancel = () => {
+      this.abortController?.abort();
+    };
+    #resolveSearchInfo = opts => {
+      // Validate the search params and stabilize them
+      const parentSearchInfo = this.parentMatch ? this.parentMatch.#resolveSearchInfo(opts) : {
+        search: opts.location.search,
+        routeSearch: opts.location.search
+      };
+      try {
+        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
+        const routeSearch = validator?.(parentSearchInfo.search) ?? {};
+        const search = {
+          ...parentSearchInfo.search,
+          ...routeSearch
         };
-
         return {
-          type: 'internal',
-          next,
-          handleFocus,
-          handleClick,
-          handleEnter,
-          handleLeave,
-          isActive,
-          disabled
+          routeSearch,
+          search
         };
-      },
-      buildNext: opts => {
-        const next = router.__.buildLocation(opts);
-
-        const matches = router.matchRoutes(next.pathname);
-
-        const __preSearchFilters = matches.map(match => {
-          var _match$options$preSea;
-
-          return (_match$options$preSea = match.options.preSearchFilters) != null ? _match$options$preSea : [];
-        }).flat().filter(Boolean);
-
-        const __postSearchFilters = matches.map(match => {
-          var _match$options$postSe;
-
-          return (_match$options$postSe = match.options.postSearchFilters) != null ? _match$options$postSe : [];
-        }).flat().filter(Boolean);
-
-        return router.__.buildLocation(_extends({}, opts, {
-          __preSearchFilters,
-          __postSearchFilters
+      } catch (err) {
+        if (isRedirect(err)) {
+          throw err;
+        }
+        this.route.options.onValidateSearchError?.(err);
+        const error = new Error('Invalid search params found', {
+          cause: err
+        });
+        error.code = 'INVALID_SEARCH_PARAMS';
+        throw error;
+      }
+    };
+    #resolveInfo = opts => {
+      const {
+        search,
+        routeSearch
+      } = this.#resolveSearchInfo(opts);
+      const routeContext = this.route.options.getContext?.({
+        parentContext: this.parentMatch?.routeContext ?? {},
+        context: this.parentMatch?.context ?? this.router?.options.context ?? {},
+        params: this.params,
+        search
+      }) || {};
+      const context = {
+        ...(this.parentMatch?.context ?? this.router?.options.context),
+        ...routeContext
+      };
+      return {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      };
+    };
+    __load = async opts => {
+      this.parentMatch = opts.parentMatch;
+      let info;
+      try {
+        info = this.#resolveInfo(opts);
+      } catch (err) {
+        if (isRedirect(err)) {
+          this.router.navigate(err);
+          return;
+        }
+        this.route.options.onError?.(err);
+        this.__store.setState(s => ({
+          ...s,
+          status: 'error',
+          error: err
         }));
-      },
-      __: {
-        buildRouteTree: rootRouteConfig => {
-          const recurseRoutes = (routeConfigs, parent) => {
-            return routeConfigs.map(routeConfig => {
-              const routeOptions = routeConfig.options;
-              const route = createRoute(routeConfig, routeOptions, parent, router);
-              const existingRoute = router.routesById[route.routeId];
-
-              if (existingRoute) {
-                {
-                  console.warn("Duplicate routes found with id: " + String(route.routeId), router.routesById, route);
-                }
-
-                throw new Error();
-              }
-              router.routesById[route.routeId] = route;
-              const children = routeConfig.children;
-              route.childRoutes = children != null && children.length ? recurseRoutes(children, route) : undefined;
-              return route;
-            });
-          };
-
-          const routes = recurseRoutes([rootRouteConfig]);
-          return routes[0];
-        },
-        parseLocation: (location, previousLocation) => {
-          var _location$hash$split$;
-
-          const parsedSearch = router.options.parseSearch(location.search);
-          return {
-            pathname: location.pathname,
-            searchStr: location.search,
-            search: replaceEqualDeep(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
-            hash: (_location$hash$split$ = location.hash.split('#').reverse()[0]) != null ? _location$hash$split$ : '',
-            href: "" + location.pathname + location.search + location.hash,
-            state: location.state,
-            key: location.key
-          };
-        },
-        navigate: location => {
-          const next = router.buildNext(location);
-          return router.__.commitLocation(next, location.replace);
-        },
-        buildLocation: function buildLocation(dest) {
-          var _dest$from, _router$basepath, _dest$to, _last, _dest$params, _dest$__preSearchFilt, _functionalUpdate, _dest$__preSearchFilt2, _dest$__postSearchFil;
-
-          if (dest === void 0) {
-            dest = {};
-          }
-
-          // const resolvedFrom: Location = {
-          //   ...router.location,
-          const fromPathname = dest.fromCurrent ? router.location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.location.pathname;
-
-          let pathname = resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
 
-          const fromMatches = router.matchRoutes(router.location.pathname, {
-            strictParseParams: true
-          });
-          const toMatches = router.matchRoutes(pathname);
-
-          const prevParams = _extends({}, (_last = last(fromMatches)) == null ? void 0 : _last.params);
+        // Do not proceed with loading the route
+        return;
+      }
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = info;
+
+      // If the match is invalid, errored or idle, trigger it to load
+      if (this.state.status === 'pending') {
+        return;
+      }
 
-          let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+      // TODO: Should load promises be tracked based on location?
+      this.__loadPromise = Promise.resolve().then(async () => {
+        const loadId = '' + Date.now() + Math.random();
+        this.#latestId = loadId;
+        const checkLatest = () => {
+          return loadId !== this.#latestId ? this.__loadPromise : undefined;
+        };
+        let latestPromise;
 
-          if (nextParams) {
-            toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
-              Object.assign({}, nextParams, fn(nextParams));
+        // If the match was in an error state, set it
+        // to a loading state again. Otherwise, keep it
+        // as loading or resolved
+        if (this.state.status === 'idle') {
+          this.__store.setState(s => ({
+            ...s,
+            status: 'pending'
+          }));
+        }
+        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 dataPromise = Promise.resolve().then(() => {
+          if (this.route.options.onLoad) {
+            return this.route.options.onLoad({
+              params: this.params,
+              routeSearch,
+              search,
+              signal: this.abortController.signal,
+              preload: !!opts?.preload,
+              routeContext: routeContext,
+              context: context
             });
           }
-
-          pathname = interpolatePath(pathname, nextParams != null ? nextParams : {}); // Pre filters first
-
-          const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search; // Then the link/navigate function
-
-          const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-          : dest.search ? (_functionalUpdate = functionalUpdate(dest.search, preFilteredSearch)) != null ? _functionalUpdate : {} // Updater
-          : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
-          : {}; // Then post filters
-
-          const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-          const search = replaceEqualDeep(router.location.search, postFilteredSearch);
-          const searchStr = router.options.stringifySearch(search);
-          let hash = dest.hash === true ? router.location.hash : functionalUpdate(dest.hash, router.location.hash);
-          hash = hash ? "#" + hash : '';
-          return {
-            pathname,
-            search,
-            searchStr,
-            state: router.location.state,
-            hash,
-            href: "" + pathname + searchStr + hash,
-            key: dest.key
-          };
-        },
-        commitLocation: (next, replace) => {
-          const id = '' + Date.now() + Math.random();
-          if (router.navigateTimeout) clearTimeout(router.navigateTimeout);
-          let nextAction = 'replace';
-
-          if (!replace) {
-            nextAction = 'push';
+          return;
+        });
+        try {
+          await Promise.all([componentsPromise, dataPromise]);
+          if (latestPromise = checkLatest()) return await latestPromise;
+          this.__store.setState(s => ({
+            ...s,
+            error: undefined,
+            status: 'success',
+            updatedAt: Date.now()
+          }));
+        } catch (err) {
+          if (isRedirect(err)) {
+            this.router.navigate(err);
+            return;
           }
+          this.route.options.onLoadError?.(err);
+          this.route.options.onError?.(err);
+          this.__store.setState(s => ({
+            ...s,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now()
+          }));
+        } finally {
+          delete this.__loadPromise;
+        }
+      });
+      return this.__loadPromise;
+    };
+    #latestId = '';
+  }
 
-          const isSameUrl = router.__.parseLocation(history.location).href === next.href;
+  /**
+   * react-store
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
 
-          if (isSameUrl && !next.key) {
-            nextAction = 'replace';
-          }
+  function useStore(store, selector = d => d, compareShallow) {
+    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
+    return slice;
+  }
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
+    }
 
-          if (nextAction === 'replace') {
-            history.replace({
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr
-            }, {
-              id
-            });
-          } else {
-            history.push({
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr
-            }, {
-              id
-            });
-          }
+    // if (objA instanceof Map && objB instanceof Map) {
+    //   if (objA.size !== objB.size) return false
 
-          router.navigationPromise = new Promise(resolve => {
-            const previousNavigationResolve = router.resolveNavigation;
+    //   for (const [key, value] of objA) {
+    //     if (!Object.is(value, objB.get(key))) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
 
-            router.resolveNavigation = () => {
-              previousNavigationResolve();
-              resolve();
-            };
-          });
-          return router.navigationPromise;
-        }
-      }
-    };
-    router.update(userOptions); // Allow frameworks to hook into the router creation
+    // if (objA instanceof Set && objB instanceof Set) {
+    //   if (objA.size !== objB.size) return false
 
-    router.options.createRouter == null ? void 0 : router.options.createRouter(router);
-    return router;
-  }
+    //   for (const value of objA) {
+    //     if (!objB.has(value)) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
 
-  function isCtrlEvent(e) {
-    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+    return true;
   }
 
-  const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
-        _excluded2 = ["pending", "caseSensitive", "children"],
-        _excluded3 = ["children", "router"];
   //
-  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null); // Detect if we're in the DOM
 
-  const isDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-  const useLayoutEffect = isDOM ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-  function MatchesProvider(props) {
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, props);
+  function lazy(importer) {
+    const lazyComp = /*#__PURE__*/React__namespace.lazy(importer);
+    const finalComp = lazyComp;
+    finalComp.preload = async () => {
+      {
+        await importer();
+      }
+    };
+    return finalComp;
   }
+  //
 
-  const useRouterSubscription = router => {
-    shim.useSyncExternalStore(cb => router.subscribe(() => cb()), () => router.state, () => router.state);
-  };
-
-  function createReactRouter(opts) {
-    const makeRouteExt = (route, router) => {
+  function useLinkProps(options) {
+    const router = useRouterContext();
+    const {
+      // custom props
+      type,
+      children,
+      target,
+      activeProps = () => ({
+        className: 'active'
+      }),
+      inactiveProps = () => ({}),
+      activeOptions,
+      disabled,
+      // fromCurrent,
+      hash,
+      search,
+      params,
+      to = '.',
+      preload,
+      preloadDelay,
+      replace,
+      // element props
+      style,
+      className,
+      onClick,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      ...rest
+    } = options;
+    const linkInfo = router.buildLink(options);
+    if (linkInfo.type === 'external') {
+      const {
+        href
+      } = linkInfo;
       return {
-        useRoute: function useRoute(subRouteId) {
-          if (subRouteId === void 0) {
-            subRouteId = '.';
-          }
-
-          const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
-          const resolvedRoute = router.getRoute(resolvedRouteId);
-          useRouterSubscription(router);
-          invariant(resolvedRoute, "Could not find a route for route \"" + resolvedRouteId + "\"! Did you forget to add it to your route config?");
-          return resolvedRoute;
-        },
-        linkProps: options => {
-          var _functionalUpdate, _functionalUpdate2;
-
-          const {
-            // custom props
-            target,
-            activeProps = () => ({
-              className: 'active'
-            }),
-            inactiveProps = () => ({}),
-            disabled,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave
-          } = options,
-                rest = _objectWithoutPropertiesLoose(options, _excluded);
-
-          const linkInfo = route.buildLink(options);
-
-          if (linkInfo.type === 'external') {
-            const {
-              href
-            } = linkInfo;
-            return {
-              href
-            };
-          }
-
-          const {
-            handleClick,
-            handleFocus,
-            handleEnter,
-            handleLeave,
-            isActive,
-            next
-          } = linkInfo;
-
-          const composeHandlers = handlers => e => {
-            e.persist();
-            handlers.forEach(handler => {
-              if (handler) handler(e);
-            });
-          }; // Get the active props
-
-
-          const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {}; // Get the inactive props
-
-          const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
-          return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
-            href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
-            onFocus: composeHandlers([handleFocus, onFocus]),
-            onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-            onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-            target,
-            style: _extends$2({}, 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
-          });
-        },
-        Link: /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
-          const linkProps = route.linkProps(props);
-          useRouterSubscription(router);
-          return /*#__PURE__*/React__namespace.createElement("a", _extends$2({
-            ref: ref
-          }, linkProps, {
-            children: typeof props.children === 'function' ? props.children({
-              isActive: linkProps['data-status'] === 'active'
-            }) : props.children
-          }));
-        }),
-        MatchRoute: opts => {
-          const {
-            pending,
-            caseSensitive
-          } = opts,
-                rest = _objectWithoutPropertiesLoose(opts, _excluded2);
-
-          const params = route.matchRoute(rest, {
-            pending,
-            caseSensitive
-          });
-
-          if (!params) {
-            return null;
-          }
-
-          return typeof opts.children === 'function' ? opts.children(params) : opts.children;
-        }
+        href
       };
+    }
+    const {
+      handleClick,
+      handleFocus,
+      handleEnter,
+      handleLeave,
+      handleTouchStart,
+      isActive,
+      next
+    } = linkInfo;
+    const reactHandleClick = e => {
+      if (React__namespace.startTransition) {
+        // This is a hack for react < 18
+        React__namespace.startTransition(() => {
+          handleClick(e);
+        });
+      } else {
+        handleClick(e);
+      }
+    };
+    const composeHandlers = handlers => e => {
+      if (e.persist) e.persist();
+      handlers.filter(Boolean).forEach(handler => {
+        if (e.defaultPrevented) return;
+        handler(e);
+      });
     };
 
-    const coreRouter = createRouter(_extends$2({}, opts, {
-      createRouter: router => {
-        const routerExt = {
-          useState: () => {
-            useRouterSubscription(router);
-            return router.state;
-          },
-          useMatch: routeId => {
-            useRouterSubscription(router);
-            invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
-
-            const runtimeMatch = _useMatch();
-
-            const match = router.state.matches.find(d => d.routeId === routeId);
-            invariant(match, "Could not find a match for route \"" + routeId + "\" being rendered in this component!");
-            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
-
-            if (!match) {
-              invariant('Match not found!');
-            }
+    // Get the active props
+    const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
 
-            return match;
-          }
-        };
-        const routeExt = makeRouteExt(router.getRoute('/'), router);
-        Object.assign(router, routerExt, routeExt);
-      },
-      createRoute: _ref => {
-        let {
-          router,
-          route
-        } = _ref;
-        const routeExt = makeRouteExt(route, router);
-        Object.assign(route, routeExt);
+    // Get the inactive props
+    const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+    return {
+      ...resolvedActiveProps,
+      ...resolvedInactiveProps,
+      ...rest,
+      href: disabled ? undefined : next.href,
+      onClick: composeHandlers([onClick, reactHandleClick]),
+      onFocus: composeHandlers([onFocus, handleFocus]),
+      onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+      onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+      target,
+      style: {
+        ...style,
+        ...resolvedActiveProps.style,
+        ...resolvedInactiveProps.style
       },
-      createElement: async element => {
-        if (typeof element === 'function') {
-          const res = await element(); // Support direct import() calls
-
-          if (typeof res === 'object' && res.default) {
-            return /*#__PURE__*/React__namespace.createElement(res.default);
-          } else {
-            return res;
+      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
+    }));
+  });
+  function Navigate(props) {
+    const router = useRouterContext();
+    React__namespace.useLayoutEffect(() => {
+      router.navigate(props);
+    }, []);
+    return null;
+  }
+  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  class ReactRouter extends Router {
+    constructor(opts) {
+      super({
+        ...opts,
+        loadComponent: async component => {
+          if (component.preload) {
+            await component.preload();
           }
+          return component;
         }
-
-        return element;
-      }
-    }));
-    return coreRouter;
+      });
+    }
   }
-  function RouterProvider(_ref2) {
-    let {
-      children,
-      router
-    } = _ref2,
-        rest = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
     router.update(rest);
-    useRouterSubscription(router);
-    useLayoutEffect(() => {
-      return router.mount();
-    }, [router]);
+    const currentMatches = useStore(router.__store, s => s.currentMatches);
+    React__namespace.useEffect(router.mount, [router]);
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
-        router
+        router: router
+      }
+    }, /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: [undefined, ...currentMatches]
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      errorComponent: ErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
       }
-    }, /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-      value: router.state.matches
-    }, children != null ? children : /*#__PURE__*/React__namespace.createElement(Outlet, null)));
+    }, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
   }
-
-  function useRouter() {
+  function useRouterContext() {
     const value = React__namespace.useContext(routerContext);
-    warning(!value, 'useRouter must be used inside a <Router> component!');
-    useRouterSubscription(value.router);
+    warning(value, 'useRouter must be used inside a <Router> component!');
+    useStore(value.router.__store);
     return value.router;
   }
-
+  function useRouter(track, shallow) {
+    const router = useRouterContext();
+    useStore(router.__store, track, shallow);
+    return router;
+  }
   function useMatches() {
     return React__namespace.useContext(matchesContext);
-  } // function useParentMatches(): RouteMatch[] {
-  //   const router = useRouter()
-  //   const match = useMatch()
-  //   const matches = router.state.matches
-  //   return matches.slice(
-  //     0,
-  //     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-  //   )
-  // }
-
-
-  function _useMatch() {
-    var _useMatches;
-
-    return (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
   }
-
+  function useMatch(opts) {
+    const router = useRouterContext();
+    const nearestMatch = useMatches()[0];
+    const match = opts?.from ? router.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
+    invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+    if (opts?.strict ?? true) {
+      invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
+    }
+    useStore(match.__store, d => opts?.track?.(match) ?? match, opts?.shallow);
+    return match;
+  }
+  function useRoute(routeId) {
+    const router = useRouterContext();
+    const resolvedRoute = router.getRoute(routeId);
+    invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route?`);
+    return resolvedRoute;
+  }
+  function useSearch(opts) {
+    const {
+      track,
+      ...matchOpts
+    } = opts;
+    const match = useMatch(matchOpts);
+    useStore(match.__store, d => opts?.track?.(d.search) ?? d.search, true);
+    return match.state.search;
+  }
+  function useParams(opts) {
+    const router = useRouterContext();
+    useStore(router.__store, d => {
+      const params = last(d.currentMatches)?.params;
+      return opts?.track?.(params) ?? params;
+    }, true);
+    return last(router.state.currentMatches)?.params;
+  }
+  function useNavigate(defaultOpts) {
+    const router = useRouterContext();
+    return React__namespace.useCallback(opts => {
+      return router.navigate({
+        ...defaultOpts,
+        ...opts
+      });
+    }, []);
+  }
+  function useMatchRoute() {
+    const router = useRouterContext();
+    return React__namespace.useCallback(opts => {
+      const {
+        pending,
+        caseSensitive,
+        ...rest
+      } = opts;
+      return router.matchRoute(rest, {
+        pending,
+        caseSensitive
+      });
+    }, []);
+  }
+  function MatchRoute(props) {
+    const matchRoute = useMatchRoute();
+    const params = matchRoute(props);
+    if (!params) {
+      return null;
+    }
+    if (typeof props.children === 'function') {
+      return props.children(params);
+    }
+    return params ? props.children : null;
+  }
   function Outlet() {
-    var _childMatch$options$c;
-
-    const router = useRouter();
-    const [, ...matches] = useMatches();
-    const childMatch = matches[0];
-    if (!childMatch) return null;
-
-    const element = (() => {
-      var _childMatch$__$errorE, _ref4;
-
-      if (!childMatch) {
-        return null;
+    const matches = useMatches().slice(1);
+    const match = matches[0];
+    if (!match) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(SubOutlet, {
+      matches: matches,
+      match: match
+    });
+  }
+  function SubOutlet({
+    matches,
+    match
+  }) {
+    const router = useRouterContext();
+    useStore(match.__store, store => [store.status, store.error], true);
+    const defaultPending = React__namespace.useCallback(() => null, []);
+    const Inner = React__namespace.useCallback(props => {
+      if (props.match.state.status === 'error') {
+        throw props.match.state.error;
       }
-
-      const errorElement = (_childMatch$__$errorE = childMatch.__.errorElement) != null ? _childMatch$__$errorE : router.options.defaultErrorElement;
-
-      if (childMatch.status === 'error') {
-        if (errorElement) {
-          return errorElement;
-        }
-
-        if (childMatch.options.useErrorBoundary || router.options.useErrorBoundary) {
-          throw childMatch.error;
-        }
-
-        return /*#__PURE__*/React__namespace.createElement(DefaultErrorBoundary, {
-          error: childMatch.error
-        });
+      if (props.match.state.status === 'success') {
+        return /*#__PURE__*/React__namespace.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
       }
-
-      if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-        if (childMatch.isPending) {
-          var _childMatch$__$pendin;
-
-          const pendingElement = (_childMatch$__$pendin = childMatch.__.pendingElement) != null ? _childMatch$__$pendin : router.options.defaultPendingElement;
-
-          if (childMatch.options.pendingMs || pendingElement) {
-            var _ref3;
-
-            return (_ref3 = pendingElement) != null ? _ref3 : null;
-          }
-        }
-
-        return null;
+      if (props.match.state.status === 'pending') {
+        throw props.match.__loadPromise;
       }
-
-      return (_ref4 = childMatch.__.element) != null ? _ref4 : router.options.defaultElement;
-    })();
-
-    const catchElement = (_childMatch$options$c = childMatch == null ? void 0 : childMatch.options.catchElement) != null ? _childMatch$options$c : router.options.defaultCatchElement;
-    return /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-      value: matches,
-      key: childMatch.matchId
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      catchElement: catchElement
-    }, element));
+      invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+    }, []);
+    const PendingComponent = match.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
+    const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
+    const ResolvedSuspenseBoundary = match.route.options.wrapInSuspense ?? true ? React__namespace.Suspense : SafeFragment;
+    const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
+    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
+      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
+      key: match.route.id,
+      errorComponent: errorComponent,
+      onCatch: () => {
+        warning(false, `Error in route match: ${match.id}`);
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Inner, {
+      match: match
+    }))));
+  }
+  function SafeFragment(props) {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
 
-  class CatchBoundary extends React__namespace.Component {
-    constructor() {
-      super(...arguments);
-      this.state = {
-        error: false
-      };
-    }
+  // This is the messiest thing ever... I'm either seriously tired (likely) or
+  // there has to be a better way to reset error boundaries when the
+  // router's location key changes.
 
+  class CatchBoundary extends React__namespace.Component {
+    state = {
+      error: false,
+      info: undefined
+    };
     componentDidCatch(error, info) {
+      this.props.onCatch(error, info);
       console.error(error);
       this.setState({
         error,
         info
       });
     }
-
     render() {
-      var _this$props$catchElem;
-
-      const catchElement = (_this$props$catchElem = this.props.catchElement) != null ? _this$props$catchElem : DefaultErrorBoundary;
-
-      if (this.state.error) {
-        return typeof catchElement === 'function' ? catchElement(this.state) : catchElement;
+      return /*#__PURE__*/React__namespace.createElement(CatchBoundaryInner, _extends({}, this.props, {
+        errorState: this.state,
+        reset: () => this.setState({})
+      }));
+    }
+  }
+  function CatchBoundaryInner(props) {
+    const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
+    const router = useRouterContext();
+    const errorComponent = props.errorComponent ?? ErrorComponent;
+    const prevKeyRef = React__namespace.useRef('');
+    React__namespace.useEffect(() => {
+      if (activeErrorState) {
+        if (router.state.currentLocation.key !== prevKeyRef.current) {
+          setActiveErrorState({});
+        }
       }
-
-      return this.props.children;
+      prevKeyRef.current = router.state.currentLocation.key;
+    }, [activeErrorState, router.state.currentLocation.key]);
+    React__namespace.useEffect(() => {
+      if (props.errorState.error) {
+        setActiveErrorState(props.errorState);
+      }
+      // props.reset()
+    }, [props.errorState.error]);
+    if (props.errorState.error && activeErrorState.error) {
+      return /*#__PURE__*/React__namespace.createElement(errorComponent, activeErrorState);
     }
-
+    return props.children;
   }
-
-  function DefaultErrorBoundary(_ref5) {
-    let {
-      error
-    } = _ref5;
+  function ErrorComponent({
+    error
+  }) {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         padding: '.5rem',
@@ -2872,89 +2174,98 @@
       style: {
         height: '.5rem'
       }
-    }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", null, error.message ? /*#__PURE__*/React__namespace.createElement("code", {
+    }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
       style: {
         fontSize: '.7em',
         border: '1px solid red',
         borderRadius: '.25rem',
         padding: '.5rem',
-        color: 'red'
-      }
-    }, error.message) : null)), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        height: '1rem'
-      }
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        fontSize: '.8em',
-        borderLeft: '3px solid rgba(127, 127, 127, 1)',
-        paddingLeft: '.5rem',
-        opacity: 0.5
+        color: 'red',
+        overflow: 'auto'
       }
-    }, "If you are the owner of this website, it's highly recommended that you configure your own custom Catch/Error boundaries for the router. You can optionally configure a boundary for each route."));
+    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)));
   }
-  function usePrompt(message, when) {
+  function useBlocker(message, condition = true) {
     const router = useRouter();
     React__namespace.useEffect(() => {
-      if (!when) return;
-      let unblock = router.history.block(transition => {
+      if (!condition) return;
+      let unblock = router.history.block((retry, cancel) => {
         if (window.confirm(message)) {
           unblock();
-          transition.retry();
+          retry();
         } else {
-          router.location.pathname = window.location.pathname;
+          cancel();
         }
       });
       return unblock;
-    }, [when, location, message]);
+    });
   }
-  function Prompt(_ref6) {
-    let {
-      message,
-      when,
-      children
-    } = _ref6;
-    usePrompt(message, when != null ? when : true);
-    return children != null ? children : null;
+  function Block({
+    message,
+    condition,
+    children
+  }) {
+    useBlocker(message, condition);
+    return children ?? null;
   }
 
-  exports.DefaultErrorBoundary = DefaultErrorBoundary;
-  exports.MatchesProvider = MatchesProvider;
+  exports.Block = Block;
+  exports.ErrorComponent = ErrorComponent;
+  exports.Link = Link;
+  exports.MatchRoute = MatchRoute;
+  exports.Navigate = Navigate;
   exports.Outlet = Outlet;
-  exports.Prompt = Prompt;
+  exports.ReactRouter = ReactRouter;
+  exports.RootRoute = RootRoute;
+  exports.Route = Route;
+  exports.RouteMatch = RouteMatch;
+  exports.Router = Router;
   exports.RouterProvider = RouterProvider;
-  exports.cascadeLoaderData = cascadeLoaderData;
   exports.cleanPath = cleanPath;
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
   exports.createMemoryHistory = createMemoryHistory;
-  exports.createReactRouter = createReactRouter;
-  exports.createRoute = createRoute;
-  exports.createRouteConfig = createRouteConfig;
-  exports.createRouteMatch = createRouteMatch;
-  exports.createRouter = createRouter;
   exports.decode = decode;
+  exports.defaultFetchServerDataFn = defaultFetchServerDataFn;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
   exports.encode = encode;
   exports.functionalUpdate = functionalUpdate;
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
+  exports.isPlainObject = isPlainObject;
+  exports.isRedirect = isRedirect;
   exports.joinPaths = joinPaths;
   exports.last = last;
+  exports.lazy = lazy;
   exports.matchByPath = matchByPath;
   exports.matchPathname = matchPathname;
+  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
+  exports.partialDeepEqual = partialDeepEqual;
   exports.pick = pick;
+  exports.redirect = redirect;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
+  exports.routerContext = routerContext;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
-  exports.usePrompt = usePrompt;
+  exports.useBlocker = useBlocker;
+  exports.useLinkProps = useLinkProps;
+  exports.useMatch = useMatch;
+  exports.useMatchRoute = useMatchRoute;
+  exports.useMatches = useMatches;
+  exports.useNavigate = useNavigate;
+  exports.useParams = useParams;
+  exports.useRoute = useRoute;
+  exports.useRouter = useRouter;
+  exports.useRouterContext = useRouterContext;
+  exports.useSearch = useSearch;
+  exports.useStore = useStore;
   exports.warning = warning;
 
   Object.defineProperty(exports, '__esModule', { value: true });