@tanstack/react-router 0.0.1-beta.27 → 0.0.1-beta.270

package/build/cjs/router.js

@@ -0,0 +1,1032 @@
+/**
+ * @tanstack/react-router/src/index.tsx
+ *
+ * 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
+ */
+'use strict';
+
+var history = require('@tanstack/history');
+var store = require('@tanstack/store');
+var searchParams = require('./searchParams.js');
+var utils = require('./utils.js');
+var RouterProvider = require('./RouterProvider.js');
+var path = require('./path.js');
+var invariant = require('tiny-invariant');
+var redirects = require('./redirects.js');
+
+// import warning from 'tiny-warning'
+
+//
+
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+class Router {
+  // Option-independent properties
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+  resetNextScroll = true;
+  navigateTimeout = null;
+  latestLoadPromise = Promise.resolve();
+  subscribers = new Set();
+  pendingMatches = [];
+  injectedHtml = [];
+
+  // Must build in constructor
+
+  constructor(options) {
+    this.update({
+      defaultPreloadDelay: 50,
+      defaultPendingMs: 1000,
+      defaultPendingMinMs: 500,
+      context: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? searchParams.defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? searchParams.defaultParseSearch
+    });
+  }
+
+  // These are default implementations that can optionally be overridden
+  // by the router provider once rendered. We provide these so that the
+  // router can be used in a non-react environment if necessary
+  startReactTransition = fn => fn();
+  update = newOptions => {
+    this.options = {
+      ...this.options,
+      ...newOptions
+    };
+    this.basepath = `/${path.trimPath(newOptions.basepath ?? '') ?? ''}`;
+    if (!this.history || this.options.history && this.options.history !== this.history) {
+      this.history = this.options.history ?? (typeof document !== 'undefined' ? history.createBrowserHistory() : history.createMemoryHistory());
+      this.latestLocation = this.parseLocation();
+    }
+    if (this.options.routeTree !== this.routeTree) {
+      this.routeTree = this.options.routeTree;
+      this.buildRouteTree();
+    }
+    if (!this.__store) {
+      this.__store = new store.Store(getInitialRouterState(this.latestLocation), {
+        onUpdate: () => {
+          this.__store.state = {
+            ...this.state,
+            status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+          };
+        }
+      });
+    }
+  };
+  get state() {
+    return this.__store.state;
+  }
+  buildRouteTree = () => {
+    this.routesById = {};
+    this.routesByPath = {};
+    const notFoundRoute = this.options.notFoundRoute;
+    if (notFoundRoute) {
+      notFoundRoute.init({
+        originalIndex: 99999999999
+      });
+      this.routesById[notFoundRoute.id] = notFoundRoute;
+    }
+    const recurseRoutes = childRoutes => {
+      childRoutes.forEach((childRoute, i) => {
+        childRoute.init({
+          originalIndex: i
+        });
+        const existingRoute = this.routesById[childRoute.id];
+        invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
+        this.routesById[childRoute.id] = childRoute;
+        if (!childRoute.isRoot && childRoute.path) {
+          const trimmedFullPath = path.trimPathRight(childRoute.fullPath);
+          if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
+            this.routesByPath[trimmedFullPath] = childRoute;
+          }
+        }
+        const children = childRoute.children;
+        if (children?.length) {
+          recurseRoutes(children);
+        }
+      });
+    };
+    recurseRoutes([this.routeTree]);
+    const scoredRoutes = [];
+    Object.values(this.routesById).forEach((d, i) => {
+      if (d.isRoot || !d.path) {
+        return;
+      }
+      const trimmed = path.trimPathLeft(d.fullPath);
+      const parsed = path.parsePathname(trimmed);
+      while (parsed.length > 1 && parsed[0]?.value === '/') {
+        parsed.shift();
+      }
+      const score = parsed.map(d => {
+        if (d.type === 'param') {
+          return 0.5;
+        }
+        if (d.type === 'wildcard') {
+          return 0.25;
+        }
+        return 1;
+      });
+      scoredRoutes.push({
+        child: d,
+        trimmed,
+        parsed,
+        index: i,
+        score
+      });
+    });
+    this.flatRoutes = scoredRoutes.sort((a, b) => {
+      let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
+      if (isIndex !== 0) return isIndex;
+      const length = Math.min(a.score.length, b.score.length);
+
+      // Sort by length of score
+      if (a.score.length !== b.score.length) {
+        return b.score.length - a.score.length;
+      }
+
+      // Sort by min available score
+      for (let i = 0; i < length; i++) {
+        if (a.score[i] !== b.score[i]) {
+          return b.score[i] - a.score[i];
+        }
+      }
+
+      // Sort by min available parsed value
+      for (let i = 0; i < length; i++) {
+        if (a.parsed[i].value !== b.parsed[i].value) {
+          return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+        }
+      }
+
+      // Sort by length of trimmed full path
+      if (a.trimmed !== b.trimmed) {
+        return a.trimmed > b.trimmed ? 1 : -1;
+      }
+
+      // Sort by original index
+      return a.index - b.index;
+    }).map((d, i) => {
+      d.child.rank = i;
+      return d.child;
+    });
+  };
+  subscribe = (eventType, fn) => {
+    const listener = {
+      eventType,
+      fn
+    };
+    this.subscribers.add(listener);
+    return () => {
+      this.subscribers.delete(listener);
+    };
+  };
+  emit = routerEvent => {
+    this.subscribers.forEach(listener => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent);
+      }
+    });
+  };
+  checkLatest = promise => {
+    return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
+  };
+  parseLocation = previousLocation => {
+    const parse = ({
+      pathname,
+      search,
+      hash,
+      state
+    }) => {
+      const parsedSearch = this.options.parseSearch(search);
+      return {
+        pathname: pathname,
+        searchStr: search,
+        search: utils.replaceEqualDeep(previousLocation?.search, parsedSearch),
+        hash: hash.split('#').reverse()[0] ?? '',
+        href: `${pathname}${search}${hash}`,
+        state: utils.replaceEqualDeep(previousLocation?.state, state)
+      };
+    };
+    const location = parse(this.history.location);
+    let {
+      __tempLocation,
+      __tempKey
+    } = location.state;
+    if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
+      // Sync up the location keys
+      const parsedTempLocation = parse(__tempLocation);
+      parsedTempLocation.state.key = location.state.key;
+      delete parsedTempLocation.state.__tempLocation;
+      return {
+        ...parsedTempLocation,
+        maskedLocation: location
+      };
+    }
+    return location;
+  };
+  resolvePathWithBase = (from, path$1) => {
+    return path.resolvePath(this.basepath, from, path.cleanPath(path$1));
+  };
+  get looseRoutesById() {
+    return this.routesById;
+  }
+  matchRoutes = (pathname, locationSearch, opts) => {
+    let routeParams = {};
+    let foundRoute = this.flatRoutes.find(route => {
+      const matchedParams = path.matchPathname(this.basepath, path.trimPathRight(pathname), {
+        to: route.fullPath,
+        caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
+        fuzzy: true
+      });
+      if (matchedParams) {
+        routeParams = matchedParams;
+        return true;
+      }
+      return false;
+    });
+    let routeCursor = foundRoute || this.routesById['__root__'];
+    let matchedRoutes = [routeCursor];
+
+    // Check to see if the route needs a 404 entry
+    if (
+    // If we found a route, and it's not an index route and we have left over path
+    (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
+    // Or if we didn't find a route and we have left over path
+    path.trimPathRight(pathname)) &&
+    // And we have a 404 route configured
+    this.options.notFoundRoute) {
+      matchedRoutes.push(this.options.notFoundRoute);
+    }
+    while (routeCursor?.parentRoute) {
+      routeCursor = routeCursor.parentRoute;
+      if (routeCursor) matchedRoutes.unshift(routeCursor);
+    }
+
+    // Existing matches are matches that are already loaded along with
+    // pending matches that are still loading
+
+    const parseErrors = matchedRoutes.map(route => {
+      let parsedParamsError;
+      if (route.options.parseParams) {
+        try {
+          const parsedParams = route.options.parseParams(routeParams);
+          // Add the parsed params to the accumulated params bag
+          Object.assign(routeParams, parsedParams);
+        } catch (err) {
+          parsedParamsError = new PathParamError(err.message, {
+            cause: err
+          });
+          if (opts?.throwOnError) {
+            throw parsedParamsError;
+          }
+          return parsedParamsError;
+        }
+      }
+      return;
+    });
+    const matches = [];
+    matchedRoutes.forEach((route, index) => {
+      // Take each matched route and resolve + validate its search params
+      // This has to happen serially because each route's search params
+      // can depend on the parent route's search params
+      // It must also happen before we create the match so that we can
+      // pass the search params to the route's potential key function
+      // which is used to uniquely identify the route match in state
+
+      const parentMatch = matches[index - 1];
+      const [preMatchSearch, searchError] = (() => {
+        // Validate the search params and stabilize them
+        const parentSearch = parentMatch?.search ?? locationSearch;
+        try {
+          const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+          let search = validator?.(parentSearch) ?? {};
+          return [{
+            ...parentSearch,
+            ...search
+          }, undefined];
+        } catch (err) {
+          const searchError = new SearchParamError(err.message, {
+            cause: err
+          });
+          if (opts?.throwOnError) {
+            throw searchError;
+          }
+          return [parentSearch, searchError];
+        }
+      })();
+      const interpolatedPath = path.interpolatePath(route.fullPath, routeParams);
+      const matchId = path.interpolatePath(route.id, routeParams, true) + (route.options.key?.({
+        search: preMatchSearch,
+        location: this.state.location
+      }) ?? '');
+
+      // Waste not, want not. If we already have a match for this route,
+      // reuse it. This is important for layout routes, which might stick
+      // around between navigation actions that only change leaf routes.
+      const existingMatch = RouterProvider.getRouteMatch(this.state, matchId);
+      const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
+
+      // Create a fresh route match
+      const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+      const match = existingMatch ? {
+        ...existingMatch,
+        cause
+      } : {
+        id: matchId,
+        routeId: route.id,
+        params: routeParams,
+        pathname: path.joinPaths([this.basepath, interpolatedPath]),
+        updatedAt: Date.now(),
+        search: {},
+        searchError: undefined,
+        status: hasLoaders ? 'pending' : 'success',
+        showPending: false,
+        isFetching: false,
+        error: undefined,
+        paramsError: parseErrors[index],
+        loadPromise: Promise.resolve(),
+        routeContext: undefined,
+        context: undefined,
+        abortController: new AbortController(),
+        shouldReloadDeps: undefined,
+        fetchedAt: 0,
+        cause
+      };
+
+      // Regardless of whether we're reusing an existing match or creating
+      // a new one, we need to update the match's search params
+      match.search = utils.replaceEqualDeep(match.search, preMatchSearch);
+      // And also update the searchError if there is one
+      match.searchError = searchError;
+      matches.push(match);
+    });
+    return matches;
+  };
+  cancelMatch = id => {
+    RouterProvider.getRouteMatch(this.state, id)?.abortController?.abort();
+  };
+  cancelMatches = () => {
+    this.state.pendingMatches?.forEach(match => {
+      this.cancelMatch(match.id);
+    });
+  };
+  buildLocation = opts => {
+    const build = (dest = {}, matches) => {
+      const from = this.latestLocation;
+      const fromSearch = (this.state.pendingMatches || this.state.matches).at(-1)?.search || from.search;
+      const fromPathname = dest.from ?? from.pathname;
+      let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.matchRoutes(fromPathname, fromSearch);
+      const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
+      const prevParams = {
+        ...utils.last(fromMatches)?.params
+      };
+      let nextParams = (dest.params ?? true) === true ? prevParams : utils.functionalUpdate(dest.params, prevParams);
+      if (nextParams) {
+        matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
+        });
+      }
+      pathname = path.interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
+
+      // Then the link/navigate function
+      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+      : dest.search ? utils.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 = utils.replaceEqualDeep(fromSearch, postFilteredSearch);
+      const searchStr = this.options.stringifySearch(search);
+      const hash = dest.hash === true ? from.hash : dest.hash ? utils.functionalUpdate(dest.hash, from.hash) : from.hash;
+      const hashStr = hash ? `#${hash}` : '';
+      let nextState = dest.state === true ? from.state : dest.state ? utils.functionalUpdate(dest.state, from.state) : from.state;
+      nextState = utils.replaceEqualDeep(from.state, nextState);
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: `${pathname}${searchStr}${hashStr}`,
+        unmaskOnReload: dest.unmaskOnReload
+      };
+    };
+    const buildWithMatches = (dest = {}, maskedDest) => {
+      let next = build(dest);
+      let maskedNext = maskedDest ? build(maskedDest) : undefined;
+      if (!maskedNext) {
+        let params = {};
+        let foundMask = this.options.routeMasks?.find(d => {
+          const match = path.matchPathname(this.basepath, next.pathname, {
+            to: d.from,
+            caseSensitive: false,
+            fuzzy: false
+          });
+          if (match) {
+            params = match;
+            return true;
+          }
+          return false;
+        });
+        if (foundMask) {
+          foundMask = {
+            ...foundMask,
+            from: path.interpolatePath(foundMask.from, params)
+          };
+          maskedDest = foundMask;
+          maskedNext = build(maskedDest);
+        }
+      }
+      const nextMatches = this.matchRoutes(next.pathname, next.search);
+      const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+      const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
+      const final = build(dest, nextMatches);
+      if (maskedFinal) {
+        final.maskedLocation = maskedFinal;
+      }
+      return final;
+    };
+    if (opts.mask) {
+      return buildWithMatches(opts, {
+        ...utils.pick(opts, ['from']),
+        ...opts.mask
+      });
+    }
+    return buildWithMatches(opts);
+  };
+  commitLocation = async ({
+    startTransition,
+    ...next
+  }) => {
+    if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
+    const isSameUrl = this.latestLocation.href === next.href;
+
+    // If the next urls are the same and we're not replacing,
+    // do nothing
+    if (!isSameUrl || !next.replace) {
+      let {
+        maskedLocation,
+        ...nextHistory
+      } = next;
+      if (maskedLocation) {
+        nextHistory = {
+          ...maskedLocation,
+          state: {
+            ...maskedLocation.state,
+            __tempKey: undefined,
+            __tempLocation: {
+              ...nextHistory,
+              search: nextHistory.searchStr,
+              state: {
+                ...nextHistory.state,
+                __tempKey: undefined,
+                __tempLocation: undefined,
+                key: undefined
+              }
+            }
+          }
+        };
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
+        }
+      }
+      const apply = () => {
+        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      };
+      if (startTransition ?? true) {
+        this.startReactTransition(apply);
+      } else {
+        apply();
+      }
+    }
+    this.resetNextScroll = next.resetScroll ?? true;
+    return this.latestLoadPromise;
+  };
+  buildAndCommitLocation = ({
+    replace,
+    resetScroll,
+    startTransition,
+    ...rest
+  } = {}) => {
+    const location = this.buildLocation(rest);
+    return this.commitLocation({
+      ...location,
+      startTransition,
+      replace,
+      resetScroll
+    });
+  };
+  navigate = ({
+    from,
+    to = '',
+    ...rest
+  }) => {
+    // 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.buildAndCommitLocation({
+      ...rest,
+      from: fromString,
+      to: toString
+    });
+  };
+  loadMatches = async ({
+    checkLatest,
+    matches,
+    preload,
+    invalidate
+  }) => {
+    let latestPromise;
+    let firstBadMatchIndex;
+    const updatePendingMatch = match => {
+      this.__store.setState(s => ({
+        ...s,
+        pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
+      }));
+    };
+
+    // Check each match middleware to see if the route can be accessed
+    try {
+      for (let [index, match] of matches.entries()) {
+        const parentMatch = matches[index - 1];
+        const route = this.looseRoutesById[match.routeId];
+        const abortController = new AbortController();
+        const handleErrorAndRedirect = (err, code) => {
+          err.routerCode = code;
+          firstBadMatchIndex = firstBadMatchIndex ?? index;
+          if (redirects.isRedirect(err)) {
+            throw err;
+          }
+          try {
+            route.options.onError?.(err);
+          } catch (errorHandlerErr) {
+            err = errorHandlerErr;
+            if (redirects.isRedirect(errorHandlerErr)) {
+              throw errorHandlerErr;
+            }
+          }
+          matches[index] = match = {
+            ...match,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now(),
+            abortController: new AbortController()
+          };
+        };
+        try {
+          if (match.paramsError) {
+            handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
+          }
+          if (match.searchError) {
+            handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
+          }
+          const parentContext = parentMatch?.context ?? this.options.context ?? {};
+          const beforeLoadContext = (await route.options.beforeLoad?.({
+            search: match.search,
+            abortController,
+            params: match.params,
+            preload: !!preload,
+            context: parentContext,
+            location: this.state.location,
+            // TOOD: just expose state and router, etc
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            buildLocation: this.buildLocation,
+            cause: match.cause
+          })) ?? {};
+          if (redirects.isRedirect(beforeLoadContext)) {
+            throw beforeLoadContext;
+          }
+          const context = {
+            ...parentContext,
+            ...beforeLoadContext
+          };
+          matches[index] = match = {
+            ...match,
+            routeContext: utils.replaceEqualDeep(match.routeContext, beforeLoadContext),
+            context: utils.replaceEqualDeep(match.context, context),
+            abortController
+          };
+        } catch (err) {
+          handleErrorAndRedirect(err, 'BEFORE_LOAD');
+          break;
+        }
+      }
+    } catch (err) {
+      if (redirects.isRedirect(err)) {
+        if (!preload) this.navigate(err);
+        return matches;
+      }
+      throw err;
+    }
+    const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+    const matchPromises = [];
+    validResolvedMatches.forEach((match, index) => {
+      matchPromises.push((async () => {
+        const parentMatchPromise = matchPromises[index - 1];
+        const route = this.looseRoutesById[match.routeId];
+        const handleErrorAndRedirect = err => {
+          if (redirects.isRedirect(err)) {
+            if (!preload) {
+              this.navigate(err);
+            }
+            return true;
+          }
+          return false;
+        };
+        let loadPromise;
+        matches[index] = match = {
+          ...match,
+          fetchedAt: Date.now(),
+          showPending: false
+        };
+        const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+        let pendingPromise;
+        if (!preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent)) {
+          pendingPromise = new Promise(r => setTimeout(r, pendingMs));
+        }
+        if (match.isFetching) {
+          loadPromise = RouterProvider.getRouteMatch(this.state, match.id)?.loadPromise;
+        } else {
+          const loaderContext = {
+            params: match.params,
+            search: match.search,
+            preload: !!preload,
+            parentMatchPromise,
+            abortController: match.abortController,
+            context: match.context,
+            location: this.state.location,
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            cause: match.cause
+          };
+
+          // Default to reloading the route all the time
+          let shouldReload = true;
+          let shouldReloadDeps = typeof route.options.shouldReload === 'function' ? route.options.shouldReload?.(loaderContext) : !!(route.options.shouldReload ?? true);
+          if (match.cause === 'enter' || invalidate) {
+            match.shouldReloadDeps = shouldReloadDeps;
+          } else if (match.cause === 'stay') {
+            if (typeof shouldReloadDeps === 'object') {
+              // compare the deps to see if they've changed
+              shouldReload = !utils.deepEqual(shouldReloadDeps, match.shouldReloadDeps);
+              match.shouldReloadDeps = shouldReloadDeps;
+            } else {
+              shouldReload = !!shouldReloadDeps;
+            }
+          }
+
+          // If the user doesn't want the route to reload, just
+          // resolve with the existing loader data
+
+          if (!shouldReload) {
+            loadPromise = Promise.resolve(match.loaderData);
+          } else {
+            // Otherwise, load the route
+            matches[index] = match = {
+              ...match,
+              isFetching: true
+            };
+            const componentsPromise = Promise.all(componentTypes.map(async type => {
+              const component = route.options[type];
+              if (component?.preload) {
+                await component.preload();
+              }
+            }));
+            const loaderPromise = route.options.loader?.(loaderContext);
+            loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
+          }
+        }
+        matches[index] = match = {
+          ...match,
+          loadPromise
+        };
+        if (!preload) {
+          updatePendingMatch(match);
+        }
+        let didShowPending = false;
+        const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+        await new Promise(async resolve => {
+          // If the route has a pending component and a pendingMs option,
+          // forcefully show the pending component
+          if (pendingPromise) {
+            pendingPromise.then(() => {
+              if (latestPromise = checkLatest()) return;
+              didShowPending = true;
+              matches[index] = match = {
+                ...match,
+                showPending: true
+              };
+              updatePendingMatch(match);
+              resolve();
+            });
+          }
+          try {
+            const loaderData = await loadPromise;
+            if (latestPromise = checkLatest()) return await latestPromise;
+            if (redirects.isRedirect(loaderData)) {
+              if (handleErrorAndRedirect(loaderData)) return;
+            }
+            if (didShowPending && pendingMinMs) {
+              await new Promise(r => setTimeout(r, pendingMinMs));
+            }
+            if (latestPromise = checkLatest()) return await latestPromise;
+            matches[index] = match = {
+              ...match,
+              error: undefined,
+              status: 'success',
+              isFetching: false,
+              updatedAt: Date.now(),
+              loaderData,
+              loadPromise: undefined
+            };
+          } catch (error) {
+            if (latestPromise = checkLatest()) return await latestPromise;
+            if (handleErrorAndRedirect(error)) return;
+            try {
+              route.options.onError?.(error);
+            } catch (onErrorError) {
+              error = onErrorError;
+              if (handleErrorAndRedirect(onErrorError)) return;
+            }
+            matches[index] = match = {
+              ...match,
+              error,
+              status: 'error',
+              isFetching: false,
+              updatedAt: Date.now()
+            };
+          } finally {
+            // If we showed the pending component, that means
+            // we already moved the pendingMatches to the matches
+            // state, so we need to update that specific match
+            if (didShowPending && pendingMinMs && match.showPending) {
+              this.__store.setState(s => ({
+                ...s,
+                matches: s.matches?.map(d => d.id === match.id ? match : d)
+              }));
+            }
+          }
+          if (!preload) {
+            updatePendingMatch(match);
+          }
+          resolve();
+        });
+      })());
+    });
+    await Promise.all(matchPromises);
+    return matches;
+  };
+  invalidate = () => this.load({
+    invalidate: true
+  });
+  load = async opts => {
+    const promise = new Promise(async (resolve, reject) => {
+      const next = this.latestLocation;
+      const prevLocation = this.state.resolvedLocation;
+      const pathDidChange = prevLocation.href !== next.href;
+      let latestPromise;
+
+      // Cancel any pending matches
+      this.cancelMatches();
+      this.emit({
+        type: 'onBeforeLoad',
+        fromLocation: prevLocation,
+        toLocation: next,
+        pathChanged: pathDidChange
+      });
+
+      // Match the routes
+      let pendingMatches = this.matchRoutes(next.pathname, next.search, {
+        debug: true
+      });
+      const previousMatches = this.state.matches;
+
+      // Ingest the new matches
+      this.__store.setState(s => ({
+        ...s,
+        isLoading: true,
+        location: next,
+        pendingMatches
+      }));
+      try {
+        try {
+          // Load the matches
+          await this.loadMatches({
+            matches: pendingMatches,
+            checkLatest: () => this.checkLatest(promise),
+            invalidate: opts?.invalidate
+          });
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
+
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
+        }
+        const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
+        const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
+        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id));
+        this.__store.setState(s => ({
+          ...s,
+          isLoading: false,
+          matches: pendingMatches,
+          pendingMatches: undefined
+        }))
+
+        //
+        ;
+        [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onStay']].forEach(([matches, hook]) => {
+          matches.forEach(match => {
+            this.looseRoutesById[match.routeId].options[hook]?.(match);
+          });
+        });
+        this.emit({
+          type: 'onLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange
+        });
+        resolve();
+      } catch (err) {
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
+        }
+        reject(err);
+      }
+    });
+    this.latestLoadPromise = promise;
+    return this.latestLoadPromise;
+  };
+  preloadRoute = async (navigateOpts = this.state.location) => {
+    let next = this.buildLocation(navigateOpts);
+    let matches = this.matchRoutes(next.pathname, next.search, {
+      throwOnError: true
+    });
+    matches = await this.loadMatches({
+      matches,
+      preload: true,
+      checkLatest: () => undefined
+    });
+    return matches;
+  };
+  matchRoute = (location, opts) => {
+    location = {
+      ...location,
+      to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
+    };
+    const next = this.buildLocation(location);
+    if (opts?.pending && this.state.status !== 'pending') {
+      return false;
+    }
+    const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
+    if (!baseLocation) {
+      return false;
+    }
+    const match = path.matchPathname(this.basepath, baseLocation.pathname, {
+      ...opts,
+      to: next.pathname
+    });
+    if (!match) {
+      return false;
+    }
+    if (match && (opts?.includeSearch ?? true)) {
+      return utils.deepEqual(baseLocation.search, next.search, true) ? match : false;
+    }
+    return match;
+  };
+  injectHtml = async html => {
+    this.injectedHtml.push(html);
+  };
+  dehydrateData = (key, getData) => {
+    if (typeof document === 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+      this.injectHtml(async () => {
+        const id = `__TSR_DEHYDRATED__${strKey}`;
+        const data = typeof getData === 'function' ? await getData() : getData;
+        return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${utils.escapeJSON(strKey)}"] = ${JSON.stringify(data)}
+          ;(() => {
+            var el = document.getElementById('${id}')
+            el.parentElement.removeChild(el)
+          })()
+          </script>`;
+      });
+      return () => this.hydrateData(key);
+    }
+    return () => undefined;
+  };
+  hydrateData = key => {
+    if (typeof document !== 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+      return window[`__TSR_DEHYDRATED__${strKey}`];
+    }
+    return undefined;
+  };
+  dehydrate = () => {
+    return {
+      state: {
+        dehydratedMatches: this.state.matches.map(d => utils.pick(d, ['fetchedAt', 'id', 'status', 'updatedAt', 'loaderData']))
+      }
+    };
+  };
+  hydrate = async __do_not_use_server_ctx => {
+    let _ctx = __do_not_use_server_ctx;
+    // Client hydrates from window
+    if (typeof document !== 'undefined') {
+      _ctx = window.__TSR_DEHYDRATED__;
+    }
+    invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
+    const ctx = _ctx;
+    this.dehydratedData = ctx.payload;
+    this.options.hydrate?.(ctx.payload);
+    const dehydratedState = ctx.router.state;
+    let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+      const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
+      invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
+      if (dehydratedMatch) {
+        return {
+          ...match,
+          ...dehydratedMatch
+        };
+      }
+      return match;
+    });
+    this.__store.setState(s => {
+      return {
+        ...s,
+        matches: matches
+      };
+    });
+  };
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
+}
+
+// A function that takes an import() argument which is a function and returns a new function that will
+// proxy arguments from the caller to the imported function, retaining all type
+// information along the way
+function lazyFn(fn, key) {
+  return async (...args) => {
+    const imported = await fn();
+    return imported[key || 'default'](...args);
+  };
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
+function getInitialRouterState(location) {
+  return {
+    isLoading: false,
+    isTransitioning: false,
+    status: 'idle',
+    resolvedLocation: {
+      ...location
+    },
+    location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now()
+  };
+}
+
+exports.PathParamError = PathParamError;
+exports.Router = Router;
+exports.SearchParamError = SearchParamError;
+exports.componentTypes = componentTypes;
+exports.getInitialRouterState = getInitialRouterState;
+exports.lazyFn = lazyFn;
+//# sourceMappingURL=router.js.map