@tanstack/router-core 0.0.1-beta.35 → 0.0.1-beta.39

package/build/esm/index.js

@@ -12,64 +12,8 @@ import { createMemoryHistory, createBrowserHistory } from 'history';
 export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
 import invariant from 'tiny-invariant';
 export { default as invariant } from 'tiny-invariant';
+import { createStore, batch } from '@solidjs/reactivity';
 
-/**
- * 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];
 }
@@ -78,7 +22,7 @@ function warning(cond, message) {
     if (typeof console !== 'undefined') console.warn(message);
     try {
       throw new Error(message);
-    } catch (_unused) {}
+    } catch {}
   }
   return true;
 }
@@ -115,8 +59,8 @@ function trimPath(path) {
   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) => {
@@ -197,8 +141,7 @@ function interpolatePath(path, params, 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;
   }));
@@ -210,16 +153,15 @@ function matchPathname(basepath, currentPathname, matchLocation) {
   if (matchLocation.to && !pathParams) {
     return;
   }
-  return pathParams != null ? pathParams : {};
+  return pathParams ?? {};
 }
 function matchByPath(basepath, from, matchLocation) {
-  var _matchLocation$to;
   if (!from.startsWith(basepath)) {
     return undefined;
   }
   from = basepath != '/' ? from.substring(basepath.length) : from;
   const baseSegments = parsePathname(from);
-  const to = "" + ((_matchLocation$to = matchLocation.to) != null ? _matchLocation$to : '*');
+  const to = `${matchLocation.to ?? '*'}`;
   const routeSegments = parsePathname(to);
   const params = {};
   let isMatch = (() => {
@@ -320,135 +262,136 @@ function decode(str) {
   return out;
 }
 
-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.apply(this, arguments);
-}
-
-function createRoute(routeConfig, options, parent, router) {
+function createRoute(routeConfig, options, originalIndex, parent, router) {
   const {
     id,
     routeId,
     path: routePath,
     fullPath
   } = routeConfig;
-  const action = router.state.actions[id] || (() => {
-    router.state.actions[id] = {
-      submissions: [],
-      submit: async (submission, actionOpts) => {
-        var _actionOpts$invalidat;
-        if (!route) {
-          return;
-        }
-        const invalidate = (_actionOpts$invalidat = actionOpts == null ? void 0 : actionOpts.invalidate) != null ? _actionOpts$invalidat : true;
-        if (!(actionOpts != null && actionOpts.multi)) {
-          action.submissions = action.submissions.filter(d => d.isMulti);
-        }
-        const actionState = {
-          submittedAt: Date.now(),
-          status: 'pending',
-          submission,
-          isMulti: !!(actionOpts != null && actionOpts.multi)
-        };
-        action.current = actionState;
-        action.latest = actionState;
-        action.submissions.push(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.log('tanner');
-          console.error(err);
-          actionState.error = err;
-          actionState.status = 'error';
-        } finally {
-          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,
-        // }
-
-        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 })
-          router.notify();
-        }
-      }
-    };
-    return router.state.loaders[id];
-  })();
   let route = {
     routeInfo: undefined,
     routeId: id,
     routeRouteId: routeId,
+    originalIndex,
     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
-      }));
+    get action() {
+      let action = router.store.actions[id] || (() => {
+        router.setStore(s => {
+          s.actions[id] = {
+            submissions: [],
+            submit: async (submission, actionOpts) => {
+              if (!route) {
+                return;
+              }
+              const invalidate = (actionOpts == null ? void 0 : actionOpts.invalidate) ?? true;
+              const [actionStore, setActionStore] = createStore({
+                submittedAt: Date.now(),
+                status: 'pending',
+                submission,
+                isMulti: !!(actionOpts != null && actionOpts.multi)
+              });
+              router.setStore(s => {
+                if (!(actionOpts != null && actionOpts.multi)) {
+                  s.actions[id].submissions = action.submissions.filter(d => d.isMulti);
+                }
+                s.actions[id].current = actionStore;
+                s.actions[id].latest = actionStore;
+                s.actions[id].submissions.push(actionStore);
+              });
+              try {
+                const res = await (route.options.action == null ? void 0 : route.options.action(submission));
+                setActionStore(s => {
+                  s.data = res;
+                });
+                if (invalidate) {
+                  router.invalidateRoute({
+                    to: '.',
+                    fromCurrent: true
+                  });
+                  await router.reload();
+                }
+                setActionStore(s => {
+                  s.status = 'success';
+                });
+                return res;
+              } catch (err) {
+                console.error(err);
+                setActionStore(s => {
+                  s.error = err;
+                  s.status = 'error';
+                });
+              }
+            }
+          };
+        });
+        return router.store.actions[id];
+      })();
+      return action;
     },
-    matchRoute: (matchLocation, opts) => {
-      return router.matchRoute(_extends({}, matchLocation, {
-        from: fullPath
-      }), opts);
+    get loader() {
+      let loader = router.store.loaders[id] || (() => {
+        router.setStore(s => {
+          s.loaders[id] = {
+            pending: [],
+            fetch: async loaderContext => {
+              if (!route) {
+                return;
+              }
+              const loaderState = {
+                loadedAt: Date.now(),
+                loaderContext
+              };
+              router.setStore(s => {
+                s.loaders[id].current = loaderState;
+                s.loaders[id].latest = loaderState;
+                s.loaders[id].pending.push(loaderState);
+              });
+              try {
+                return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
+              } finally {
+                router.setStore(s => {
+                  s.loaders[id].pending = s.loaders[id].pending.filter(d => d !== loaderState);
+                });
+              }
+            }
+          };
+        });
+        return router.store.loaders[id];
+      })();
+      return loader;
     }
+
+    // buildLink: (options) => {
+    //   return router.buildLink({
+    //     ...options,
+    //     from: fullPath,
+    //   } as any) as any
+    // },
+
+    // navigate: (options) => {
+    //   return router.navigate({
+    //     ...options,
+    //     from: fullPath,
+    //   } as any) as any
+    // },
+
+    // matchRoute: (matchLocation, opts) => {
+    //   return router.matchRoute(
+    //     {
+    //       ...matchLocation,
+    //       from: fullPath,
+    //     } as any,
+    //     opts,
+    //   ) as any
+    // },
   };
+
   router.options.createRoute == null ? void 0 : router.options.createRoute({
     router,
     route
@@ -457,7 +400,7 @@ function createRoute(routeConfig, options, parent, router) {
 }
 
 const rootRouteId = '__root__';
-const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
+const createRouteConfig = function (options, children, isRoot, parentId, parentPath) {
   if (options === void 0) {
     options = {};
   }
@@ -497,53 +440,194 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
     addChildren: children => createRouteConfig(options, children, false, parentId, parentPath),
     createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath),
     generate: () => {
-      invariant(false, "routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. ");
+      invariant(false, `routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `);
     }
   };
 };
 
+/**
+ * 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 sharedClone(prev, next, touchAll) {
+  const things = new Map();
+  function recurse(prev, next) {
+    if (prev === next) {
+      return prev;
+    }
+    if (things.has(next)) {
+      return things.get(next);
+    }
+    const prevIsArray = Array.isArray(prev);
+    const nextIsArray = Array.isArray(next);
+    const prevIsObj = isPlainObject(prev);
+    const nextIsObj = isPlainObject(next);
+    const isArray = prevIsArray && nextIsArray;
+    const isObj = prevIsObj && nextIsObj;
+    const isSameStructure = isArray || isObj;
+
+    // Both are arrays or objects
+    if (isSameStructure) {
+      const aSize = isArray ? prev.length : Object.keys(prev).length;
+      const bItems = isArray ? next : Object.keys(next);
+      const bSize = bItems.length;
+      const copy = isArray ? [] : {};
+      let equalItems = 0;
+      for (let i = 0; i < bSize; i++) {
+        const key = isArray ? i : bItems[i];
+        if (copy[key] === prev[key]) {
+          equalItems++;
+        }
+      }
+      if (aSize === bSize && equalItems === aSize) {
+        things.set(next, prev);
+        return prev;
+      }
+      things.set(next, copy);
+      for (let i = 0; i < bSize; i++) {
+        const key = isArray ? i : bItems[i];
+        if (typeof bItems[i] === 'function') {
+          copy[key] = prev[key];
+        } else {
+          copy[key] = recurse(prev[key], next[key]);
+        }
+        if (copy[key] === prev[key]) {
+          equalItems++;
+        }
+      }
+      return copy;
+    }
+    if (nextIsArray) {
+      const copy = [];
+      things.set(next, copy);
+      for (let i = 0; i < next.length; i++) {
+        copy[i] = recurse(undefined, next[i]);
+      }
+      return copy;
+    }
+    if (nextIsObj) {
+      const copy = {};
+      things.set(next, copy);
+      const nextKeys = Object.keys(next);
+      for (let i = 0; i < nextKeys.length; i++) {
+        const key = nextKeys[i];
+        copy[key] = recurse(undefined, next[key]);
+      }
+      return copy;
+    }
+    return next;
+  }
+  return recurse(prev, 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]';
+}
+
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
 function createRouteMatch(router, route, opts) {
-  const routeMatch = _extends({}, route, opts, {
-    router,
+  let componentsPromise;
+  let dataPromise;
+  let latestId = '';
+  let resolve = () => {};
+  function setLoaderData(loaderData) {
+    batch(() => {
+      setStore(s => {
+        s.routeLoaderData = sharedClone(s.routeLoaderData, loaderData);
+      });
+      updateLoaderData();
+    });
+  }
+  function updateLoaderData() {
+    setStore(s => {
+      var _store$parentMatch;
+      s.loaderData = sharedClone(s.loaderData, {
+        ...((_store$parentMatch = store.parentMatch) == null ? void 0 : _store$parentMatch.store.loaderData),
+        ...s.routeLoaderData
+      });
+    });
+  }
+  const [store, setStore] = createStore({
     routeSearch: {},
     search: {},
-    childMatches: [],
     status: 'idle',
     routeLoaderData: {},
     loaderData: {},
     isFetching: false,
-    isInvalid: false,
+    invalid: false,
     invalidAt: Infinity,
-    // pendingActions: [],
-    getIsInvalid: () => {
+    get isInvalid() {
       const now = Date.now();
-      return routeMatch.isInvalid || routeMatch.invalidAt < now;
-    },
+      return this.invalid || this.invalidAt < now;
+    }
+  });
+  const routeMatch = {
+    ...route,
+    ...opts,
+    store,
+    // setStore,
+    router,
+    childMatches: [],
     __: {
-      abortController: new AbortController(),
-      latestId: '',
-      resolve: () => {},
-      notify: () => {
-        routeMatch.__.resolve();
-        routeMatch.router.notify();
+      setParentMatch: parentMatch => {
+        batch(() => {
+          setStore(s => {
+            s.parentMatch = parentMatch;
+          });
+          updateLoaderData();
+        });
       },
+      abortController: new AbortController(),
       validate: () => {
-        var _routeMatch$parentMat, _routeMatch$parentMat2;
+        var _store$parentMatch2;
         // 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;
+        const parentSearch = ((_store$parentMatch2 = store.parentMatch) == null ? void 0 : _store$parentMatch2.store.search) ?? router.store.currentLocation.search;
         try {
-          var _validator;
-          const prevSearch = routeMatch.routeSearch;
+          const prevSearch = store.routeSearch;
           const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-          let nextSearch = replaceEqualDeep(prevSearch, (_validator = validator == null ? void 0 : validator(parentSearch)) != null ? _validator : {});
+          let nextSearch = sharedClone(prevSearch, (validator == null ? void 0 : validator(parentSearch)) ?? {});
+          batch(() => {
+            // Invalidate route matches when search param stability changes
+            if (prevSearch !== nextSearch) {
+              setStore(s => s.invalid = true);
+            }
 
-          // Invalidate route matches when search param stability changes
-          if (prevSearch !== nextSearch) {
-            routeMatch.isInvalid = true;
-          }
-          routeMatch.routeSearch = nextSearch;
-          routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
+            // TODO: Alright, do we need batch() here?
+            setStore(s => {
+              s.routeSearch = nextSearch;
+              s.search = sharedClone(parentSearch, {
+                ...parentSearch,
+                ...nextSearch
+              });
+            });
+          });
           componentTypes.map(async type => {
             const component = routeMatch.options[type];
             if (typeof routeMatch.__[type] !== 'function') {
@@ -556,8 +640,11 @@ function createRouteMatch(router, route, opts) {
             cause: err
           });
           error.code = 'INVALID_SEARCH_PARAMS';
-          routeMatch.status = 'error';
-          routeMatch.error = error;
+          setStore(s => {
+            s.status = 'error';
+            s.error = error;
+          });
+
           // Do not proceed with loading the route
           return;
         }
@@ -568,7 +655,7 @@ function createRouteMatch(router, route, opts) {
       (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
     },
     invalidate: () => {
-      routeMatch.isInvalid = true;
+      setStore(s => s.invalid = true);
     },
     hasLoaders: () => {
       return !!(route.options.loader || componentTypes.some(d => {
@@ -583,17 +670,17 @@ function createRouteMatch(router, route, opts) {
       // 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)) {
+        if (router.store.currentMatches.find(d => d.matchId === routeMatch.matchId)) {
           return;
         }
-        router.matchCache[routeMatch.matchId] = {
+        router.store.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') {
+      if (store.status === 'success' && store.isInvalid || store.status === 'error' || store.status === 'idle') {
         const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
         await routeMatch.fetch({
           maxAge
@@ -602,29 +689,30 @@ function createRouteMatch(router, route, opts) {
     },
     fetch: async opts => {
       const loadId = '' + Date.now() + Math.random();
-      routeMatch.__.latestId = loadId;
+      latestId = loadId;
       const checkLatest = async () => {
-        if (loadId !== routeMatch.__.latestId) {
+        if (loadId !== latestId) {
           // warning(true, 'Data loader is out of date!')
           return new Promise(() => {});
         }
       };
+      batch(() => {
+        // If the match was in an error state, set it
+        // to a loading state again. Otherwise, keep it
+        // as loading or resolved
+        if (store.status === 'idle') {
+          setStore(s => s.status = 'loading');
+        }
 
-      // If 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 started loading the route, so it's no longer invalid
+        setStore(s => s.invalid = false);
+      });
+      routeMatch.__.loadPromise = new Promise(async r => {
         // We are now fetching, even if it's in the background of a
         // resolved state
-        routeMatch.isFetching = true;
-        routeMatch.__.resolve = resolve;
-        routeMatch.__.componentsPromise = (async () => {
+        setStore(s => s.isFetching = true);
+        resolve = r;
+        componentsPromise = (async () => {
           // then run all component and data loaders in parallel
           // For each component type, potentially load it asynchronously
 
@@ -636,49 +724,52 @@ function createRouteMatch(router, route, opts) {
             }
           }));
         })();
-        routeMatch.__.dataPromise = Promise.resolve().then(async () => {
+        dataPromise = Promise.resolve().then(async () => {
           try {
-            var _ref, _ref2, _opts$maxAge;
             if (routeMatch.options.loader) {
               const data = await router.loadMatchData(routeMatch);
               await checkLatest();
-              routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
+              setLoaderData(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);
-            return routeMatch.routeLoaderData;
+            setStore(s => {
+              s.error = undefined;
+              s.status = 'success';
+              s.updatedAt = Date.now();
+              s.invalidAt = s.updatedAt + ((opts == null ? void 0 : opts.maxAge) ?? routeMatch.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0);
+            });
+            return store.routeLoaderData;
           } catch (err) {
             await checkLatest();
             if (process.env.NODE_ENV !== 'production') {
               console.error(err);
             }
-            routeMatch.error = err;
-            routeMatch.status = 'error';
-            routeMatch.updatedAt = Date.now();
+            setStore(s => {
+              s.error = err;
+              s.status = 'error';
+              s.updatedAt = Date.now();
+            });
             throw err;
           }
         });
         const after = async () => {
           await checkLatest();
-          routeMatch.isFetching = false;
+          setStore(s => s.isFetching = false);
           delete routeMatch.__.loadPromise;
-          routeMatch.__.notify();
+          resolve();
         };
         try {
-          await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
+          await Promise.all([componentsPromise, dataPromise.catch(() => {})]);
           after();
-        } catch (_unused) {
+        } catch {
           after();
         }
       });
       await routeMatch.__.loadPromise;
       await checkLatest();
     }
-  });
+  };
   if (!routeMatch.hasLoaders()) {
-    routeMatch.status = 'success';
+    setStore(s => s.status = 'success');
   }
   return routeMatch;
 }
@@ -708,7 +799,9 @@ function parseSearchWith(parser) {
 }
 function stringifySearchWith(stringify) {
   return search => {
-    search = _extends({}, search);
+    search = {
+      ...search
+    };
     if (search) {
       Object.keys(search).forEach(key => {
         const val = search[key];
@@ -724,7 +817,7 @@ function stringifySearchWith(stringify) {
       });
     }
     const searchStr = encode(search).toString();
-    return searchStr ? "?" + searchStr : '';
+    return searchStr ? `?${searchStr}` : '';
   };
 }
 
@@ -737,216 +830,296 @@ const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrow
 function getInitialRouterState() {
   return {
     status: 'idle',
-    location: null,
-    matches: [],
+    latestLocation: null,
+    currentLocation: null,
+    currentMatches: [],
     actions: {},
     loaders: {},
     lastUpdated: Date.now(),
-    isFetching: false,
-    isPreloading: false
+    matchCache: {},
+    get isFetching() {
+      return this.status === 'loading' || this.currentMatches.some(d => d.store.isFetching);
+    },
+    get isPreloading() {
+      return Object.values(this.matchCache).some(d => d.match.store.isFetching && !this.currentMatches.find(dd => dd.matchId === d.match.matchId));
+    }
   };
 }
 function createRouter(userOptions) {
-  var _userOptions$stringif, _userOptions$parseSea;
-  const history = (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory();
-  const originalOptions = _extends({
+  const originalOptions = {
     defaultLoaderGcMaxAge: 5 * 60 * 1000,
     defaultLoaderMaxAge: 0,
     defaultPreloadMaxAge: 2000,
     defaultPreloadDelay: 50,
-    context: undefined
-  }, 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 = {
+    context: undefined,
+    ...userOptions,
+    stringifySearch: (userOptions == null ? void 0 : userOptions.stringifySearch) ?? defaultStringifySearch,
+    parseSearch: (userOptions == null ? void 0 : userOptions.parseSearch) ?? defaultParseSearch
+  };
+  const [store, setStore] = createStore(getInitialRouterState());
+  let navigationPromise;
+  let startedLoadingAt = Date.now();
+  let resolveNavigation = () => {};
+  function onFocus() {
+    router.load();
+  }
+  function buildRouteTree(rootRouteConfig) {
+    const recurseRoutes = (routeConfigs, parent) => {
+      return routeConfigs.map((routeConfig, i) => {
+        const routeOptions = routeConfig.options;
+        const route = createRoute(routeConfig, routeOptions, i, parent, router);
+        const existingRoute = router.routesById[route.routeId];
+        if (existingRoute) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Duplicate routes found with id: ${String(route.routeId)}`, router.routesById, route);
+          }
+          throw new Error();
+        }
+        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];
+  }
+  function parseLocation(location, previousLocation) {
+    const parsedSearch = router.options.parseSearch(location.search);
+    return {
+      pathname: location.pathname,
+      searchStr: location.search,
+      search: sharedClone(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
+      hash: location.hash.split('#').reverse()[0] ?? '',
+      href: `${location.pathname}${location.search}${location.hash}`,
+      state: location.state,
+      key: location.key
+    };
+  }
+  function navigate(location) {
+    const next = router.buildNext(location);
+    return commitLocation(next, location.replace);
+  }
+  function buildLocation(dest) {
+    var _last, _dest$__preSearchFilt, _dest$__preSearchFilt2, _dest$__postSearchFil;
+    if (dest === void 0) {
+      dest = {};
+    }
+    const fromPathname = dest.fromCurrent ? store.latestLocation.pathname : dest.from ?? store.latestLocation.pathname;
+    let pathname = resolvePath(router.basepath ?? '/', fromPathname, `${dest.to ?? '.'}`);
+    const fromMatches = router.matchRoutes(store.latestLocation.pathname, {
+      strictParseParams: true
+    });
+    const toMatches = router.matchRoutes(pathname);
+    const prevParams = {
+      ...((_last = last(fromMatches)) == null ? void 0 : _last.params)
+    };
+    let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+    if (nextParams) {
+      toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
+        Object.assign({}, nextParams, fn(nextParams));
+      });
+    }
+    pathname = interpolatePath(pathname, nextParams ?? {});
+
+    // Pre filters first
+    const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), store.latestLocation.search) : store.latestLocation.search;
+
+    // Then the link/navigate function
+    const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+    : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+    : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
+    : {};
+
+    // Then post filters
+    const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+    const search = sharedClone(store.latestLocation.search, postFilteredSearch);
+    const searchStr = router.options.stringifySearch(search);
+    let hash = dest.hash === true ? store.latestLocation.hash : functionalUpdate(dest.hash, store.latestLocation.hash);
+    hash = hash ? `#${hash}` : '';
+    return {
+      pathname,
+      search,
+      searchStr,
+      state: store.latestLocation.state,
+      hash,
+      href: `${pathname}${searchStr}${hash}`,
+      key: dest.key
+    };
+  }
+  function commitLocation(next, replace) {
+    const id = '' + Date.now() + Math.random();
+    let nextAction = 'replace';
+    if (!replace) {
+      nextAction = 'push';
+    }
+    const isSameUrl = parseLocation(router.history.location).href === next.href;
+    if (isSameUrl && !next.key) {
+      nextAction = 'replace';
+    }
+    router.history[nextAction]({
+      pathname: next.pathname,
+      hash: next.hash,
+      search: next.searchStr
+    }, {
+      id,
+      ...next.state
+    });
+    return navigationPromise = new Promise(resolve => {
+      const previousNavigationResolve = resolveNavigation;
+      resolveNavigation = () => {
+        previousNavigationResolve();
+        resolve();
+      };
+    });
+  }
+  const router = {
     types: undefined,
     // public api
-    history,
+    history: (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory(),
+    store,
+    setStore,
     options: originalOptions,
-    listeners: [],
-    // Resolved after construction
     basepath: '',
     routeTree: undefined,
     routesById: {},
-    __location: undefined,
-    //
-    resolveNavigation: () => {},
-    matchCache: {},
-    state: getInitialRouterState(),
     reset: () => {
-      router.state = getInitialRouterState();
-      router.notify();
-    },
-    startedLoadingAt: Date.now(),
-    subscribe: listener => {
-      router.listeners.push(listener);
-      return () => {
-        router.listeners = router.listeners.filter(x => x !== listener);
-      };
+      setStore(s => Object.assign(s, getInitialRouterState()));
     },
     getRoute: id => {
       return router.routesById[id];
     },
-    notify: () => {
-      const isFetching = router.state.status === 'loading' || router.state.matches.some(d => d.isFetching);
-      const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId));
-      if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
-        router.state = _extends({}, router.state, {
-          isFetching,
-          isPreloading
-        });
-      }
-      cascadeLoaderData(router.state.matches);
-      router.listeners.forEach(listener => listener(router));
-    },
     dehydrate: () => {
       return {
-        location: router.__location,
-        state: _extends({}, pick(router.state, ['status', 'location', 'lastUpdated', 'location']), {
-          matches: router.state.matches.map(match => pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
-        }),
+        store: {
+          ...pick(store, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
+          currentMatches: store.currentMatches.map(match => ({
+            matchId: match.matchId,
+            store: pick(match.store, ['status', 'routeLoaderData', 'isInvalid', 'invalidAt'])
+          }))
+        },
         context: router.options.context
       };
     },
-    hydrate: dehydratedState => {
-      // Update the location
-      router.__location = dehydratedState.location;
+    hydrate: dehydratedRouter => {
+      setStore(s => {
+        // Update the context TODO: make this part of state?
+        router.options.context = dehydratedRouter.context;
 
-      // Update the context
-      router.options.context = dehydratedState.context;
-
-      // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
-        strictParseParams: true
-      });
-      matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.state.matches[index];
-        invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
-        Object.assign(match, dehydratedMatch);
-      });
-      matches.forEach(match => match.__.validate());
-      router.state = _extends({}, router.state, dehydratedState, {
-        matches
+        // Match the routes
+        const currentMatches = router.matchRoutes(dehydratedRouter.store.latestLocation.pathname, {
+          strictParseParams: true
+        });
+        currentMatches.forEach((match, index) => {
+          const dehydratedMatch = dehydratedRouter.store.currentMatches[index];
+          invariant(dehydratedMatch && dehydratedMatch.matchId === match.matchId, 'Oh no! There was a hydration mismatch when attempting to restore the state of the router! 😬');
+          Object.assign(match, dehydratedMatch);
+        });
+        currentMatches.forEach(match => match.__.validate());
+        Object.assign(s, {
+          ...dehydratedRouter.store,
+          currentMatches
+        });
       });
     },
     mount: () => {
-      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)
-      // }
-
-      if (!router.state.matches.length) {
-        router.load();
-      }
-      const unsub = router.history.listen(event => {
-        router.load(router.__.parseLocation(event.location, router.__location));
-      });
+      // Mount only does anything on the client
+      if (!isServer) {
+        // If the router matches are empty, load the matches
+        if (!store.currentMatches.length) {
+          router.load();
+        }
+        const unsub = router.history.listen(event => {
+          router.load(parseLocation(event.location, store.latestLocation));
+        });
 
-      // addEventListener does not exist in React Native, but window does
-      // 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);
-      }
-      return () => {
-        unsub();
-        if (!isServer && window.removeEventListener) {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('visibilitychange', router.onFocus);
-          window.removeEventListener('focus', router.onFocus);
+        // addEventListener does not exist in React Native, but window does
+        // In the future, we might need to invert control here for more adapters
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (window.addEventListener) {
+          // Listen to visibilitychange and focus
+          window.addEventListener('visibilitychange', onFocus, false);
+          window.addEventListener('focus', onFocus, false);
         }
-      };
-    },
-    onFocus: () => {
-      router.load();
+        return () => {
+          unsub();
+          if (window.removeEventListener) {
+            // Be sure to unsubscribe if a new handler is set
+            window.removeEventListener('visibilitychange', onFocus);
+            window.removeEventListener('focus', onFocus);
+          }
+        };
+      }
+      return () => {};
     },
     update: opts => {
-      var _trimPath;
       const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
-      if (!router.__location || newHistory) {
+      if (!store.latestLocation || newHistory) {
         if (opts != null && opts.history) {
           router.history = opts.history;
         }
-        router.__location = router.__.parseLocation(router.history.location);
-        router.state.location = router.__location;
+        setStore(s => {
+          s.latestLocation = parseLocation(router.history.location);
+          s.currentLocation = s.latestLocation;
+        });
       }
       Object.assign(router.options, opts);
       const {
         basepath,
         routeConfig
       } = router.options;
-      router.basepath = "/" + ((_trimPath = trimPath(basepath != null ? basepath : '')) != null ? _trimPath : '');
+      router.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
       if (routeConfig) {
         router.routesById = {};
-        router.routeTree = router.__.buildRouteTree(routeConfig);
+        router.routeTree = buildRouteTree(routeConfig);
       }
       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 => {
+      [...store.currentMatches, ...(store.pendingMatches || [])].forEach(match => {
         match.cancel();
       });
     },
     load: async next => {
-      const id = Math.random();
-      router.startedLoadingAt = id;
-      if (next) {
-        // Ingest the new location
-        router.__location = next;
-      }
+      let now = Date.now();
+      const startedAt = now;
+      startedLoadingAt = startedAt;
 
       // Cancel any pending matches
       router.cancelMatches();
+      let matches;
+      batch(() => {
+        if (next) {
+          // Ingest the new location
+          setStore(s => {
+            s.latestLocation = next;
+          });
+        }
 
-      // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
-        strictParseParams: true
-      });
-      if (typeof document !== 'undefined') {
-        router.state = _extends({}, router.state, {
-          pending: {
-            matches: matches,
-            location: router.__location
-          },
-          status: 'loading'
+        // Match the routes
+        matches = router.matchRoutes(store.latestLocation.pathname, {
+          strictParseParams: true
         });
-      } else {
-        router.state = _extends({}, router.state, {
-          matches: matches,
-          location: router.__location,
-          status: 'loading'
+        console.log('set loading', matches);
+        setStore(s => {
+          s.status = 'loading';
+          s.pendingMatches = matches;
+          s.pendingLocation = store.latestLocation;
         });
-      }
+      });
 
-      // Check if each match middleware to see if the route can be accessed
+      // Load the matches
       try {
-        await Promise.all(matches.map(match => match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
-          router: router,
-          match
-        })));
+        await router.loadMatches(matches);
       } catch (err) {
-        console.info(err);
-        invariant(false, "A route's beforeLoad middleware failed! \uD83D\uDC46");
+        console.log(err);
+        invariant(false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
       }
-      router.notify();
-
-      // Load the matches
-      await router.loadMatches(matches);
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return router.navigationPromise;
+      if (startedLoadingAt !== startedAt) {
+        // Ignore side-effects of outdated side-effects
+        return navigationPromise;
       }
-      const previousMatches = router.state.matches;
+      const previousMatches = store.currentMatches;
       const exiting = [],
         staying = [];
       previousMatches.forEach(d => {
@@ -959,22 +1132,21 @@ function createRouter(userOptions) {
       const entering = matches.filter(d => {
         return !previousMatches.find(dd => dd.matchId === d.matchId);
       });
-      const now = Date.now();
+      now = Date.now();
       exiting.forEach(d => {
-        var _ref, _d$options$loaderGcMa, _ref2, _d$options$loaderMaxA;
         d.__.onExit == null ? void 0 : d.__.onExit({
           params: d.params,
-          search: d.routeSearch
+          search: d.store.routeSearch
         });
 
         // Clear idle error states when match leaves
-        if (d.status === 'error' && !d.isFetching) {
-          d.status = 'idle';
-          d.error = undefined;
+        if (d.store.status === 'error' && !d.store.isFetching) {
+          d.store.status = 'idle';
+          d.store.error = undefined;
         }
-        const gc = Math.max((_ref = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref : 0, (_ref2 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref2 : 0);
+        const gc = Math.max(d.options.loaderGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0, d.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0);
         if (gc > 0) {
-          router.matchCache[d.matchId] = {
+          store.matchCache[d.matchId] = {
             gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
             match: d
           };
@@ -983,58 +1155,64 @@ function createRouter(userOptions) {
       staying.forEach(d => {
         d.options.onTransition == null ? void 0 : d.options.onTransition({
           params: d.params,
-          search: d.routeSearch
+          search: d.store.routeSearch
         });
       });
       entering.forEach(d => {
         d.__.onExit = d.options.onLoaded == null ? void 0 : d.options.onLoaded({
           params: d.params,
-          search: d.search
+          search: d.store.search
         });
-        delete router.matchCache[d.matchId];
+        delete store.matchCache[d.matchId];
       });
-      if (router.startedLoadingAt !== id) {
+      if (startedLoadingAt !== startedAt) {
         // Ignore side-effects of match loading
         return;
       }
       matches.forEach(match => {
         // Clear actions
         if (match.action) {
+          // TODO: Check reactivity here
           match.action.current = undefined;
           match.action.submissions = [];
         }
       });
-      router.state = _extends({}, router.state, {
-        location: router.__location,
-        matches,
-        pending: undefined,
-        status: 'idle'
+      setStore(s => {
+        console.log('set', matches);
+        Object.assign(s, {
+          status: 'idle',
+          currentLocation: store.latestLocation,
+          currentMatches: matches,
+          pendingLocation: undefined,
+          pendingMatches: undefined
+        });
       });
-      router.notify();
-      router.resolveNavigation();
+      resolveNavigation();
     },
     cleanMatchCache: () => {
       const now = Date.now();
-      Object.keys(router.matchCache).forEach(matchId => {
-        const entry = router.matchCache[matchId];
+      setStore(s => {
+        Object.keys(s.matchCache).forEach(matchId => {
+          const entry = s.matchCache[matchId];
 
-        // Don't remove loading matches
-        if (entry.match.status === 'loading') {
-          return;
-        }
+          // Don't remove loading matches
+          if (entry.match.store.status === 'loading') {
+            return;
+          }
 
-        // Do not remove successful matches that are still valid
-        if (entry.gc > 0 && entry.gc > now) {
-          return;
-        }
+          // Do not remove successful matches that are still valid
+          if (entry.gc > 0 && entry.gc > now) {
+            return;
+          }
 
-        // Everything else gets removed
-        delete router.matchCache[matchId];
+          // Everything else gets removed
+          delete s.matchCache[matchId];
+        });
       });
     },
-    loadRoute: async function loadRoute(navigateOpts) {
+    loadRoute: async function (navigateOpts) {
       if (navigateOpts === void 0) {
-        navigateOpts = router.__location;
+        navigateOpts = store.latestLocation;
       }
       const next = router.buildNext(navigateOpts);
       const matches = router.matchRoutes(next.pathname, {
@@ -1043,10 +1221,9 @@ function createRouter(userOptions) {
       await router.loadMatches(matches);
       return matches;
     },
-    preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
-      var _ref3, _ref4, _loaderOpts$maxAge, _ref5, _ref6, _loaderOpts$gcMaxAge;
+    preloadRoute: async function (navigateOpts, loaderOpts) {
       if (navigateOpts === void 0) {
-        navigateOpts = router.__location;
+        navigateOpts = store.latestLocation;
       }
       const next = router.buildNext(navigateOpts);
       const matches = router.matchRoutes(next.pathname, {
@@ -1054,28 +1231,27 @@ function createRouter(userOptions) {
       });
       await router.loadMatches(matches, {
         preload: true,
-        maxAge: (_ref3 = (_ref4 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref4 : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0,
-        gcMaxAge: (_ref5 = (_ref6 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref6 : router.options.defaultLoaderGcMaxAge) != null ? _ref5 : 0
+        maxAge: loaderOpts.maxAge ?? router.options.defaultPreloadMaxAge ?? router.options.defaultLoaderMaxAge ?? 0,
+        gcMaxAge: loaderOpts.gcMaxAge ?? router.options.defaultPreloadGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0
       });
       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 existingMatches = [...store.currentMatches, ...(store.pendingMatches ?? [])];
       const recurse = async routes => {
-        var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
+        var _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 params = (parentMatch == null ? void 0 : parentMatch.params) ?? {};
+        const filteredRoutes = (router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) ?? routes;
         let foundRoutes = [];
         const findMatchInRoutes = (parentRoutes, routes) => {
           routes.some(route => {
-            var _route$childRoutes, _route$childRoutes2, _route$options$caseSe;
+            var _route$childRoutes, _route$childRoutes2;
             if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
               return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
             }
@@ -1083,20 +1259,21 @@ function createRouter(userOptions) {
             const matchParams = matchPathname(router.basepath, pathname, {
               to: route.fullPath,
               fuzzy,
-              caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
+              caseSensitive: route.options.caseSensitive ?? router.options.caseSensitive
             });
-            console.log(router.basepath, route.fullPath, fuzzy, pathname, matchParams);
             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;
+                parsedParams = (route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) ?? matchParams;
               } catch (err) {
                 if (opts != null && opts.strictParseParams) {
                   throw err;
                 }
               }
-              params = _extends({}, params, parsedParams);
+              params = {
+                ...params,
+                ...parsedParams
+              };
             }
             if (!!matchParams) {
               foundRoutes = [...parentRoutes, route];
@@ -1110,10 +1287,10 @@ function createRouter(userOptions) {
           return;
         }
         foundRoutes.forEach(foundRoute => {
-          var _router$matchCache$ma;
+          var _store$matchCache$mat;
           const interpolatedPath = interpolatePath(foundRoute.routePath, params);
           const matchId = interpolatePath(foundRoute.routeId, params, true);
-          const match = existingMatches.find(d => d.matchId === matchId) || ((_router$matchCache$ma = router.matchCache[matchId]) == null ? void 0 : _router$matchCache$ma.match) || createRouteMatch(router, foundRoute, {
+          const match = existingMatches.find(d => d.matchId === matchId) || ((_store$matchCache$mat = store.matchCache[matchId]) == null ? void 0 : _store$matchCache$mat.match) || createRouteMatch(router, foundRoute, {
             parentMatch,
             matchId,
             params,
@@ -1127,40 +1304,56 @@ function createRouter(userOptions) {
         }
       };
       recurse([router.routeTree]);
-      cascadeLoaderData(matches);
+      linkMatches(matches);
       return matches;
     },
     loadMatches: async (resolvedMatches, loaderOpts) => {
-      const matchPromises = resolvedMatches.map(async match => {
-        var _search$__data;
+      resolvedMatches.forEach(async match => {
         // Validate the match (loads search params etc)
         match.__.validate();
-        const search = match.search;
+      });
+
+      // Check each match middleware to see if the route can be accessed
+      await Promise.all(resolvedMatches.map(async match => {
+        try {
+          await (match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
+            router: router,
+            match
+          }));
+        } catch (err) {
+          if (!(loaderOpts != null && loaderOpts.preload)) {
+            match.options.onLoadError == null ? void 0 : match.options.onLoadError(err);
+          }
+          throw err;
+        }
+      }));
+      const matchPromises = resolvedMatches.map(async match => {
+        var _search$__data;
+        const search = match.store.search;
         if ((_search$__data = search.__data) != null && _search$__data.matchId && search.__data.matchId !== match.matchId) {
           return;
         }
         match.load(loaderOpts);
-        if (match.status !== 'success' && match.__.loadPromise) {
+        if (match.store.status !== 'success' && match.__.loadPromise) {
           // Wait for the first sign of activity from the match
           await match.__.loadPromise;
         }
       });
-      router.notify();
       await Promise.all(matchPromises);
     },
     loadMatchData: async routeMatch => {
       if (isServer || !router.options.useServerData) {
-        var _await$routeMatch$opt;
-        return (_await$routeMatch$opt = await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
+        return (await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
           // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
           params: routeMatch.params,
-          search: routeMatch.routeSearch,
+          search: routeMatch.store.routeSearch,
           signal: routeMatch.__.abortController.signal
-        }))) != null ? _await$routeMatch$opt : {};
+        }))) || {};
       } else {
         const next = router.buildNext({
           to: '.',
-          search: d => _extends({}, d != null ? d : {}, {
+          search: d => ({
+            ...(d ?? {}),
             __data: {
               matchId: routeMatch.matchId
             }
@@ -1189,16 +1382,15 @@ function createRouter(userOptions) {
       }
     },
     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 => {
+      [...store.currentMatches, ...(store.pendingMatches ?? [])].forEach(match => {
         if (unloadedMatchIds.includes(match.matchId)) {
           match.invalidate();
         }
       });
     },
-    reload: () => router.__.navigate({
+    reload: () => navigate({
       fromCurrent: true,
       replace: true,
       search: true
@@ -1207,27 +1399,28 @@ function createRouter(userOptions) {
       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
-      });
+      location = {
+        ...location,
+        to: location.to ? router.resolvePath(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)) {
+        if (!store.pendingLocation) {
           return false;
         }
-        return !!matchPathname(router.basepath, router.state.pending.location.pathname, _extends({}, opts, {
+        return !!matchPathname(router.basepath, store.pendingLocation.pathname, {
+          ...opts,
           to: next.pathname
-        }));
+        });
       }
-      return !!matchPathname(router.basepath, router.state.location.pathname, _extends({}, opts, {
+      return matchPathname(router.basepath, store.currentLocation.pathname, {
+        ...opts,
         to: next.pathname
-      }));
+      });
     },
-    navigate: async _ref7 => {
+    navigate: async _ref => {
       let {
         from,
         to = '.',
@@ -1235,7 +1428,7 @@ function createRouter(userOptions) {
         hash,
         replace,
         params
-      } = _ref7;
+      } = _ref;
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
 
@@ -1245,11 +1438,11 @@ function createRouter(userOptions) {
       const fromString = String(from);
       let isExternal;
       try {
-        new URL("" + toString);
+        new URL(`${toString}`);
         isExternal = true;
       } catch (e) {}
       invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
-      return router.__.navigate({
+      return navigate({
         from: fromString,
         to: toString,
         search,
@@ -1258,8 +1451,7 @@ function createRouter(userOptions) {
         params
       });
     },
-    buildLink: _ref8 => {
-      var _preload, _ref9;
+    buildLink: _ref2 => {
       let {
         from,
         to = '.',
@@ -1274,7 +1466,7 @@ function createRouter(userOptions) {
         preloadGcMaxAge: userPreloadGcMaxAge,
         preloadDelay: userPreloadDelay,
         disabled
-      } = _ref8;
+      } = _ref2;
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
 
@@ -1282,7 +1474,7 @@ function createRouter(userOptions) {
       // null for LinkUtils
 
       try {
-        new URL("" + to);
+        new URL(`${to}`);
         return {
           type: 'external',
           href: to
@@ -1297,15 +1489,15 @@ function createRouter(userOptions) {
         replace
       };
       const next = router.buildNext(nextOpts);
-      preload = (_preload = preload) != null ? _preload : router.options.defaultPreload;
-      const preloadDelay = (_ref9 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref9 : 0;
+      preload = preload ?? router.options.defaultPreload;
+      const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
 
       // Compare path/hash for matches
-      const pathIsEqual = router.state.location.pathname === next.pathname;
-      const currentPathSplit = router.state.location.pathname.split('/');
+      const pathIsEqual = store.currentLocation.pathname === next.pathname;
+      const currentPathSplit = store.currentLocation.pathname.split('/');
       const nextPathSplit = next.pathname.split('/');
       const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = router.state.location.hash === next.hash;
+      const hashIsEqual = store.currentLocation.hash === next.hash;
       // Combine the matches based on user options
       const pathTest = activeOptions != null && activeOptions.exact ? pathIsEqual : pathIsFuzzyEqual;
       const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true;
@@ -1321,8 +1513,8 @@ function createRouter(userOptions) {
             router.invalidateRoute(nextOpts);
           }
 
-          // All is well? Navigate!)
-          router.__.navigate(nextOpts);
+          // All is well? Navigate!
+          navigate(nextOpts);
         }
       };
 
@@ -1332,6 +1524,9 @@ function createRouter(userOptions) {
           router.preloadRoute(nextOpts, {
             maxAge: userPreloadMaxAge,
             gcMaxAge: userPreloadGcMaxAge
+          }).catch(err => {
+            console.log(err);
+            console.warn('Error preloading route! ☝️');
           });
         }
       };
@@ -1346,6 +1541,9 @@ function createRouter(userOptions) {
             router.preloadRoute(nextOpts, {
               maxAge: userPreloadMaxAge,
               gcMaxAge: userPreloadGcMaxAge
+            }).catch(err => {
+              console.log(err);
+              console.warn('Error preloading route! ☝️');
             });
           }, preloadDelay);
         }
@@ -1369,143 +1567,15 @@ function createRouter(userOptions) {
       };
     },
     buildNext: opts => {
-      const next = router.__.buildLocation(opts);
+      const next = 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, {
+      const __preSearchFilters = matches.map(match => match.options.preSearchFilters ?? []).flat().filter(Boolean);
+      const __postSearchFilters = matches.map(match => match.options.postSearchFilters ?? []).flat().filter(Boolean);
+      return buildLocation({
+        ...opts,
         __preSearchFilters,
         __postSearchFilters
-      }));
-    },
-    __: {
-      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) {
-              if (process.env.NODE_ENV !== 'production') {
-                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 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);
-        let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-        if (nextParams) {
-          toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
-            Object.assign({}, nextParams, fn(nextParams));
-          });
-        }
-        pathname = interpolatePath(pathname, nextParams != 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';
-        }
-        const isSameUrl = router.__.parseLocation(history.location).href === next.href;
-        if (isSameUrl && !next.key) {
-          nextAction = 'replace';
-        }
-        if (nextAction === 'replace') {
-          history.replace({
-            pathname: next.pathname,
-            hash: next.hash,
-            search: next.searchStr
-          }, _extends({
-            id
-          }, next.state));
-        } else {
-          history.push({
-            pathname: next.pathname,
-            hash: next.hash,
-            search: next.searchStr
-          }, {
-            id
-          });
-        }
-        router.navigationPromise = new Promise(resolve => {
-          const previousNavigationResolve = router.resolveNavigation;
-          router.resolveNavigation = () => {
-            previousNavigationResolve();
-            resolve();
-            delete router.navigationPromise;
-          };
-        });
-        return router.navigationPromise;
-      }
+      });
     }
   };
   router.update(userOptions);
@@ -1517,14 +1587,16 @@ function createRouter(userOptions) {
 function isCtrlEvent(e) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
-function cascadeLoaderData(matches) {
+function linkMatches(matches) {
   matches.forEach((match, index) => {
     const parent = matches[index - 1];
     if (parent) {
-      match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
+      match.__.setParentMatch(parent);
+    } else {
+      match.__.setParentMatch(undefined);
     }
   });
 }
 
-export { cleanPath, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, warning };
+export { cleanPath, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, pick, resolvePath, rootRouteId, sharedClone, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, warning };
 //# sourceMappingURL=index.js.map