@tanstack/react-router 0.0.1-beta.219 → 0.0.1-beta.220

package/build/umd/index.development.js

@@ -609,6 +609,11 @@
     });
   }
   const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function escapeJSON(jsonString) {
+    return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
+    .replace(/'/g, "\\'") // Escape single quotes
+    .replace(/"/g, '\\"'); // Escape double quotes
+  }
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -794,173 +799,480 @@
     return isMatch ? params : undefined;
   }
 
-  // Detect if we're in the DOM
-
-  function redirect(opts) {
-    opts.isRedirect = true;
-    return opts;
+  function useParams(opts) {
+    return useRouterState({
+      select: state => {
+        const params = last(state.matches)?.params;
+        return opts?.select ? opts.select(params) : params;
+      }
+    });
   }
-  function isRedirect(obj) {
-    return !!obj?.isRedirect;
+
+  function useSearch(opts) {
+    return useMatch({
+      ...opts,
+      select: match => {
+        return opts?.select ? opts.select(match.search) : match.search;
+      }
+    });
   }
 
-  // @ts-nocheck
+  const rootRouteId = '__root__';
 
-  // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+  // The parse type here allows a zod schema to be passed directly to the validator
 
-  function encode(obj, pfx) {
-    var k,
-      i,
-      tmp,
-      str = '';
-    for (k in obj) {
-      if ((tmp = obj[k]) !== void 0) {
-        if (Array.isArray(tmp)) {
-          for (i = 0; i < tmp.length; i++) {
-            str && (str += '&');
-            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
-          }
-        } else {
-          str && (str += '&');
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
-        }
-      }
+  class Route {
+    // Set up in this.init()
+
+    // customId!: TCustomId
+
+    // Optional
+
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+      Route.__onInit(this);
     }
-    return (pfx || '') + str;
-  }
-  function toValue(mix) {
-    if (!mix) return '';
-    var str = decodeURIComponent(mix);
-    if (str === 'false') return false;
-    if (str === 'true') return true;
-    return +str * 0 === 0 && +str + '' === str ? +str : str;
-  }
-  function decode(str) {
-    var tmp,
-      k,
-      out = {},
-      arr = str.split('&');
-    while (tmp = arr.shift()) {
-      tmp = tmp.split('=');
-      k = tmp.shift();
-      if (out[k] !== void 0) {
-        out[k] = [].concat(out[k], toValue(tmp.shift()));
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      const options = this.options;
+      const isRoot = !options?.path && !options?.id;
+      this.parentRoute = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
       } else {
-        out[k] = toValue(tmp.shift());
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
       }
-    }
-    return out;
-  }
+      let path = isRoot ? rootRouteId : options.path;
 
-  const defaultParseSearch = parseSearchWith(JSON.parse);
-  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
-  function parseSearchWith(parser) {
-    return searchStr => {
-      if (searchStr.substring(0, 1) === '?') {
-        searchStr = searchStr.substring(1);
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
       }
-      let query = decode(searchStr);
+      const customId = options?.id || path;
 
-      // Try to parse any query params that might be json
-      for (let key in query) {
-        const value = query[key];
-        if (typeof value === 'string') {
-          try {
-            query[key] = parser(value);
-          } catch (err) {
-            //
-          }
-        }
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
       }
-      return query;
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
+      }
+      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
+      this.path = path;
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
+      this.to = fullPath;
+    };
+    addChildren = children => {
+      this.children = children;
+      return this;
+    };
+    update = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    static __onInit = route => {
+      // This is a dummy static method that should get
+      // replaced by a framework specific implementation if necessary
+    };
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useRouteContext = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
+      });
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
     };
   }
-  function stringifySearchWith(stringify, parser) {
-    function stringifyValue(val) {
-      if (typeof val === 'object' && val !== null) {
-        try {
-          return stringify(val);
-        } catch (err) {
-          // silent
-        }
-      } else if (typeof val === 'string' && typeof parser === 'function') {
-        try {
-          // Check if it's a valid parseable string.
-          // If it is, then stringify it again.
-          parser(val);
-          return stringify(val);
-        } catch (err) {
-          // silent
-        }
-      }
-      return val;
-    }
-    return search => {
-      search = {
-        ...search
-      };
-      if (search) {
-        Object.keys(search).forEach(key => {
-          const val = search[key];
-          if (typeof val === 'undefined' || val === undefined) {
-            delete search[key];
-          } else {
-            search[key] = stringifyValue(val);
-          }
-        });
-      }
-      const searchStr = encode(search).toString();
-      return searchStr ? `?${searchStr}` : '';
+  function rootRouteWithContext() {
+    return options => {
+      return new RootRoute(options);
     };
   }
-
-  //
-
-  //
-
-  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  class Router {
-    // dehydratedData?: TDehydrated
-    // resetNextScroll = false
-    // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
+  class RootRoute extends Route {
     constructor(options) {
-      this.options = {
-        defaultPreloadDelay: 50,
-        context: undefined,
-        ...options,
-        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
-        parseSearch: options?.parseSearch ?? defaultParseSearch
-      };
-      this.routeTree = this.options.routeTree;
+      super(options);
     }
-    subscribers = new Set();
-    subscribe = (eventType, fn) => {
-      const listener = {
-        eventType,
-        fn
-      };
-      this.subscribers.add(listener);
-      return () => {
-        this.subscribers.delete(listener);
-      };
-    };
-    emit = routerEvent => {
-      this.subscribers.forEach(listener => {
-        if (listener.eventType === routerEvent.type) {
-          listener.fn(routerEvent);
-        }
-      });
-    };
+  }
+  function createRouteMask(opts) {
+    return opts;
+  }
 
-    // dehydrate = (): DehydratedRouter => {
-    //   return {
-    //     state: {
-    //       dehydratedMatches: state.matches.map((d) =>
-    //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
-    //       ),
-    //     },
-    //   }
-    // }
+  //
+
+  function Matches() {
+    const {
+      routesById,
+      state
+    } = useRouter();
+    const {
+      matches
+    } = state;
+    const locationKey = useRouterState().location.state.key;
+    const route = routesById[rootRouteId];
+    const errorComponent = React__namespace.useCallback(props => {
+      return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      });
+    }, [route]);
+    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      resetKey: locationKey,
+      errorComponent: errorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+      }
+    }, matches.length ? /*#__PURE__*/React__namespace.createElement(Match, {
+      matches: matches
+    }) : null));
+  }
+  const defaultPending = () => null;
+  function SafeFragment(props) {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
+  }
+  function Match({
+    matches
+  }) {
+    const {
+      options,
+      routesById
+    } = useRouter();
+    const match = matches[0];
+    const routeId = match?.routeId;
+    const route = routesById[routeId];
+    const locationKey = useRouterState().location.state?.key;
+    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
+    const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ? React__namespace.Suspense : SafeFragment;
+    const errorComponent = routeErrorComponent ? React__namespace.useCallback(props => {
+      return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      });
+    }, [route]) : undefined;
+    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
+      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      })
+    }, errorComponent ? /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      resetKey: locationKey,
+      errorComponent: errorComponent,
+      onCatch: () => {
+        warning(false, `Error in route match: ${match.id}`);
+      }
+    }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
+      match: match
+    })) : /*#__PURE__*/React__namespace.createElement(SafeFragment, null, /*#__PURE__*/React__namespace.createElement(MatchInner, {
+      match: match
+    }))));
+  }
+  function MatchInner({
+    match
+  }) {
+    const {
+      options,
+      routesById
+    } = useRouter();
+    const route = routesById[match.routeId];
+    if (match.status === 'error') {
+      throw match.error;
+    }
+    if (match.status === 'pending') {
+      throw match.loadPromise;
+    }
+    if (match.status === 'success') {
+      let comp = route.options.component ?? options.defaultComponent;
+      if (comp) {
+        return /*#__PURE__*/React__namespace.createElement(comp, {
+          useMatch: route.useMatch,
+          useRouteContext: route.useRouteContext,
+          useSearch: route.useSearch,
+          useParams: route.useParams,
+          useLoaderData: route.useLoaderData
+        });
+      }
+      return /*#__PURE__*/React__namespace.createElement(Outlet, null);
+    }
+    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+  }
+  function Outlet() {
+    const matches = React__namespace.useContext(matchesContext).slice(1);
+    if (!matches[0]) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(Match, {
+      matches: matches
+    });
+  }
+  function useMatchRoute() {
+    const {
+      matchRoute
+    } = useRouter();
+    return React__namespace.useCallback(opts => {
+      const {
+        pending,
+        caseSensitive,
+        ...rest
+      } = opts;
+      return matchRoute(rest, {
+        pending,
+        caseSensitive
+      });
+    }, []);
+  }
+  function MatchRoute(props) {
+    const matchRoute = useMatchRoute();
+    const params = matchRoute(props);
+    if (typeof props.children === 'function') {
+      return props.children(params);
+    }
+    return !!params ? props.children : null;
+  }
+  function useMatch(opts) {
+    const nearestMatch = React__namespace.useContext(matchesContext)[0];
+    const nearestMatchRouteId = nearestMatch?.routeId;
+    const matchRouteId = useRouterState({
+      select: state => {
+        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+        return match.routeId;
+      }
+    });
+    if (opts?.strict ?? true) {
+      invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
+    }
+    const matchSelection = useRouterState({
+      select: state => {
+        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+        return opts?.select ? opts.select(match) : match;
+      }
+    });
+    return matchSelection;
+  }
+  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
+  function useMatches(opts) {
+    const contextMatches = React__namespace.useContext(matchesContext);
+    return useRouterState({
+      select: state => {
+        const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useLoaderData(opts) {
+    const match = useMatch({
+      ...opts,
+      select: undefined
+    });
+    return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
+  }
+
+  // Detect if we're in the DOM
+
+  function redirect(opts) {
+    opts.isRedirect = true;
+    return opts;
+  }
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
+  }
+
+  // @ts-nocheck
+
+  // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+
+  function encode(obj, pfx) {
+    var k,
+      i,
+      tmp,
+      str = '';
+    for (k in obj) {
+      if ((tmp = obj[k]) !== void 0) {
+        if (Array.isArray(tmp)) {
+          for (i = 0; i < tmp.length; i++) {
+            str && (str += '&');
+            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
+          }
+        } else {
+          str && (str += '&');
+          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
+        }
+      }
+    }
+    return (pfx || '') + str;
+  }
+  function toValue(mix) {
+    if (!mix) return '';
+    var str = decodeURIComponent(mix);
+    if (str === 'false') return false;
+    if (str === 'true') return true;
+    return +str * 0 === 0 && +str + '' === str ? +str : str;
+  }
+  function decode(str) {
+    var tmp,
+      k,
+      out = {},
+      arr = str.split('&');
+    while (tmp = arr.shift()) {
+      tmp = tmp.split('=');
+      k = tmp.shift();
+      if (out[k] !== void 0) {
+        out[k] = [].concat(out[k], toValue(tmp.shift()));
+      } else {
+        out[k] = toValue(tmp.shift());
+      }
+    }
+    return out;
+  }
+
+  const defaultParseSearch = parseSearchWith(JSON.parse);
+  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
+  function parseSearchWith(parser) {
+    return searchStr => {
+      if (searchStr.substring(0, 1) === '?') {
+        searchStr = searchStr.substring(1);
+      }
+      let query = decode(searchStr);
+
+      // Try to parse any query params that might be json
+      for (let key in query) {
+        const value = query[key];
+        if (typeof value === 'string') {
+          try {
+            query[key] = parser(value);
+          } catch (err) {
+            //
+          }
+        }
+      }
+      return query;
+    };
+  }
+  function stringifySearchWith(stringify, parser) {
+    function stringifyValue(val) {
+      if (typeof val === 'object' && val !== null) {
+        try {
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
+      } else if (typeof val === 'string' && typeof parser === 'function') {
+        try {
+          // Check if it's a valid parseable string.
+          // If it is, then stringify it again.
+          parser(val);
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
+      }
+      return val;
+    }
+    return search => {
+      search = {
+        ...search
+      };
+      if (search) {
+        Object.keys(search).forEach(key => {
+          const val = search[key];
+          if (typeof val === 'undefined' || val === undefined) {
+            delete search[key];
+          } else {
+            search[key] = stringifyValue(val);
+          }
+        });
+      }
+      const searchStr = encode(search).toString();
+      return searchStr ? `?${searchStr}` : '';
+    };
+  }
+
+  //
+
+  //
+
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+  class Router {
+    // dehydratedData?: TDehydrated
+    // resetNextScroll = false
+    // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
+    constructor(options) {
+      this.options = {
+        defaultPreloadDelay: 50,
+        context: undefined,
+        ...options,
+        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+        parseSearch: options?.parseSearch ?? defaultParseSearch
+      };
+      this.routeTree = this.options.routeTree;
+    }
+    subscribers = new Set();
+    subscribe = (eventType, fn) => {
+      const listener = {
+        eventType,
+        fn
+      };
+      this.subscribers.add(listener);
+      return () => {
+        this.subscribers.delete(listener);
+      };
+    };
+    emit = routerEvent => {
+      this.subscribers.forEach(listener => {
+        if (listener.eventType === routerEvent.type) {
+          listener.fn(routerEvent);
+        }
+      });
+    };
+
+    // dehydrate = (): DehydratedRouter => {
+    //   return {
+    //     state: {
+    //       dehydratedMatches: state.matches.map((d) =>
+    //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+    //       ),
+    //     },
+    //   }
+    // }
 
     // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
     //   let _ctx = __do_not_use_server_ctx
@@ -1009,49 +1321,6 @@
     //   })
     // }
 
-    // TODO:
-    // injectedHtml: (string | (() => Promise<string> | string))[] = []
-
-    // TODO:
-    // injectHtml = async (html: string | (() => Promise<string> | string)) => {
-    //   this.injectedHtml.push(html)
-    // }
-
-    // TODO:
-    // dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
-    //   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 as any)() : getData
-    //       return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
-    //         strKey,
-    //       )}"] = ${JSON.stringify(data)}
-    //       ;(() => {
-    //         var el = document.getElementById('${id}')
-    //         el.parentElement.removeChild(el)
-    //       })()
-    //       </script>`
-    //     })
-
-    //     return () => this.hydrateData<T>(key)
-    //   }
-
-    //   return () => undefined
-    // }
-
-    // hydrateData = <T = unknown>(key: any) => {
-    //   if (typeof document !== 'undefined') {
-    //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-    //     return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
-    //   }
-
-    //   return undefined
-    // }
-
     // resolveMatchPromise = (matchId: string, key: string, value: any) => {
     //   state.matches
     //     .find((d) => d.id === matchId)
@@ -1711,13 +1980,15 @@
 
             // 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;
-            if (typeof shouldReloadDeps === 'object') {
-              // compare the deps to see if they've changed
-              shouldReload = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
-              match.shouldReloadDeps = shouldReloadDeps;
-            } else {
-              shouldReload = !!shouldReloadDeps;
+            if (cause !== 'enter') {
+              let shouldReloadDeps = typeof route.options.shouldReload === 'function' ? route.options.shouldReload?.(loaderContext) : !!(route.options.shouldReload ?? true);
+              if (typeof shouldReloadDeps === 'object') {
+                // compare the deps to see if they've changed
+                shouldReload = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
+                match.shouldReloadDeps = shouldReloadDeps;
+              } else {
+                shouldReload = !!shouldReloadDeps;
+              }
             }
 
             // If the user doesn't want the route to reload, just
@@ -2018,386 +2289,158 @@
       return () => {
         unsub();
       };
-    }, [history]);
-    React__namespace.useLayoutEffect(() => {
-      startReactTransition(() => {
-        try {
-          load();
-        } catch (err) {
-          console.error(err);
-        }
-      });
-    }, []);
-    const matchRoute = useStableCallback((location, opts) => {
-      location = {
-        ...location,
-        to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
-      };
-      const next = buildLocation(location);
-      if (opts?.pending && state.status !== 'pending') {
-        return false;
-      }
-      const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
-
-      // const baseLocation = state.resolvedLocation
-
-      if (!baseLocation) {
-        return false;
-      }
-      const match = matchPathname(basepath, baseLocation.pathname, {
-        ...opts,
-        to: next.pathname
-      });
-      if (!match) {
-        return false;
-      }
-      if (match && (opts?.includeSearch ?? true)) {
-        return deepEqual(baseLocation.search, next.search, true) ? match : false;
-      }
-      return match;
-    });
-    const routerContextValue = {
-      routeTree: router.routeTree,
-      navigate,
-      buildLink,
-      state,
-      matchRoute,
-      routesById,
-      options,
-      history,
-      load,
-      buildLocation,
-      subscribe: router.subscribe,
-      resetNextScrollRef
-    };
-    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: routerContextValue
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null));
-  }
-  function getRouteMatch(state, id) {
-    return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
-  }
-  function useRouterState(opts) {
-    const {
-      state
-    } = useRouter();
-    // return useStore(router.__store, opts?.select as any)
-    return opts?.select ? opts.select(state) : state;
-  }
-  function useRouter() {
-    const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
-    const value = React__namespace.useContext(resolvedContext);
-    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
-  }
-
-  function Matches() {
-    const {
-      routesById,
-      state
-    } = useRouter();
-    const {
-      matches
-    } = state;
-    const locationKey = useRouterState().location.state.key;
-    const route = routesById[rootRouteId];
-    const errorComponent = React__namespace.useCallback(props => {
-      return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }, [route]);
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: matches
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      resetKey: locationKey,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-      }
-    }, matches.length ? /*#__PURE__*/React__namespace.createElement(Match, {
-      matches: matches
-    }) : null));
-  }
-  const defaultPending = () => null;
-  function SafeFragment(props) {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
-  }
-  function Match({
-    matches
-  }) {
-    const {
-      options,
-      routesById
-    } = useRouter();
-    const match = matches[0];
-    const routeId = match?.routeId;
-    const route = routesById[routeId];
-    const locationKey = useRouterState().location.state?.key;
-    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
-    const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
-    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ? React__namespace.Suspense : SafeFragment;
-    const errorComponent = routeErrorComponent ? React__namespace.useCallback(props => {
-      return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }, [route]) : undefined;
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: matches
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      })
-    }, errorComponent ? /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      resetKey: locationKey,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in route match: ${match.id}`);
-      }
-    }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      match: match
-    })) : /*#__PURE__*/React__namespace.createElement(SafeFragment, null, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      match: match
-    }))));
-  }
-  function MatchInner({
-    match
-  }) {
-    const {
-      options,
-      routesById
-    } = useRouter();
-    const route = routesById[match.routeId];
-    if (match.status === 'error') {
-      throw match.error;
-    }
-    if (match.status === 'pending') {
-      throw match.loadPromise;
-    }
-    if (match.status === 'success') {
-      let comp = route.options.component ?? options.defaultComponent;
-      if (comp) {
-        return /*#__PURE__*/React__namespace.createElement(comp, {
-          useMatch: route.useMatch,
-          useRouteContext: route.useRouteContext,
-          useSearch: route.useSearch,
-          useParams: route.useParams,
-          useLoaderData: route.useLoaderData
-        });
+    }, [history]);
+    const matchRoute = useStableCallback((location, opts) => {
+      location = {
+        ...location,
+        to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
+      };
+      const next = buildLocation(location);
+      if (opts?.pending && state.status !== 'pending') {
+        return false;
       }
-      return /*#__PURE__*/React__namespace.createElement(Outlet, null);
-    }
-    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-  }
-  function Outlet() {
-    const matches = React__namespace.useContext(matchesContext).slice(1);
-    if (!matches[0]) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement(Match, {
-      matches: matches
-    });
-  }
-  function useMatchRoute() {
-    const {
-      matchRoute
-    } = useRouter();
-    return React__namespace.useCallback(opts => {
-      const {
-        pending,
-        caseSensitive,
-        ...rest
-      } = opts;
-      return matchRoute(rest, {
-        pending,
-        caseSensitive
+      const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
+
+      // const baseLocation = state.resolvedLocation
+
+      if (!baseLocation) {
+        return false;
+      }
+      const match = matchPathname(basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
       });
-    }, []);
-  }
-  function MatchRoute(props) {
-    const matchRoute = useMatchRoute();
-    const params = matchRoute(props);
-    if (typeof props.children === 'function') {
-      return props.children(params);
-    }
-    return !!params ? props.children : null;
-  }
-  function useMatch(opts) {
-    const nearestMatch = React__namespace.useContext(matchesContext)[0];
-    const nearestMatchRouteId = nearestMatch?.routeId;
-    const matchRouteId = useRouterState({
-      select: state => {
-        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
-        return match.routeId;
+      if (!match) {
+        return false;
       }
+      if (match && (opts?.includeSearch ?? true)) {
+        return deepEqual(baseLocation.search, next.search, true) ? match : false;
+      }
+      return match;
     });
-    if (opts?.strict ?? true) {
-      invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
-    }
-    const matchSelection = useRouterState({
-      select: state => {
-        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
-        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-        return opts?.select ? opts.select(match) : match;
+    const injectedHtmlRef = React__namespace.useRef([]);
+    const injectHtml = useStableCallback(async html => {
+      injectedHtmlRef.current.push(html);
+    });
+    const dehydrateData = useStableCallback((key, getData) => {
+      if (typeof document === 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        injectHtml(async () => {
+          const id = `__TSR_DEHYDRATED__${strKey}`;
+          const data = typeof getData === 'function' ? await getData() : getData;
+          return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
+        ;(() => {
+          var el = document.getElementById('${id}')
+          el.parentElement.removeChild(el)
+        })()
+        </script>`;
+        });
+        return () => hydrateData(key);
       }
+      return () => undefined;
     });
-    return matchSelection;
-  }
-  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useMatches(opts) {
-    const contextMatches = React__namespace.useContext(matchesContext);
-    return useRouterState({
-      select: state => {
-        const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
-        return opts?.select ? opts.select(matches) : matches;
+    const hydrateData = useStableCallback(key => {
+      if (typeof document !== 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        return window[`__TSR_DEHYDRATED__${strKey}`];
       }
+      return undefined;
     });
+    React__namespace.useLayoutEffect(() => {
+      startReactTransition(() => {
+        try {
+          load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    }, []);
+    const routerContextValue = {
+      routeTree: router.routeTree,
+      navigate,
+      buildLink,
+      state,
+      matchRoute,
+      routesById,
+      options,
+      history,
+      load,
+      buildLocation,
+      subscribe: router.subscribe,
+      resetNextScrollRef,
+      injectedHtmlRef,
+      injectHtml,
+      dehydrateData,
+      hydrateData
+    };
+    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: routerContextValue
+    }, /*#__PURE__*/React__namespace.createElement(Matches, null));
   }
-  function useLoaderData(opts) {
-    const match = useMatch({
-      ...opts,
-      select: undefined
-    });
-    return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
+  function getRouteMatch(state, id) {
+    return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
   }
-
-  function useParams(opts) {
-    return useRouterState({
-      select: state => {
-        const params = last(state.matches)?.params;
-        return opts?.select ? opts.select(params) : params;
-      }
-    });
+  function useRouterState(opts) {
+    const {
+      state
+    } = useRouter();
+    // return useStore(router.__store, opts?.select as any)
+    return opts?.select ? opts.select(state) : state;
   }
-
-  function useSearch(opts) {
-    return useMatch({
-      ...opts,
-      select: match => {
-        return opts?.select ? opts.select(match.search) : match.search;
-      }
-    });
+  function useRouter() {
+    const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+    const value = React__namespace.useContext(resolvedContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
   }
 
-  const rootRouteId = '__root__';
-
-  // The parse type here allows a zod schema to be passed directly to the validator
-
-  class Route {
-    // Set up in this.init()
-
-    // customId!: TCustomId
-
-    // Optional
-
-    constructor(options) {
-      this.options = options || {};
-      this.isRoot = !options?.getParentRoute;
-      Route.__onInit(this);
-    }
-    init = opts => {
-      this.originalIndex = opts.originalIndex;
-      const options = this.options;
-      const isRoot = !options?.path && !options?.id;
-      this.parentRoute = this.options?.getParentRoute?.();
-      if (isRoot) {
-        this.path = rootRouteId;
-      } else {
-        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
-      }
-      let path = isRoot ? rootRouteId : options.path;
-
-      // If the path is anything other than an index path, trim it up
-      if (path && path !== '/') {
-        path = trimPath(path);
-      }
-      const customId = options?.id || path;
-
-      // Strip the parentId prefix from the first level of children
-      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
-      if (path === rootRouteId) {
-        path = '/';
-      }
-      if (id !== rootRouteId) {
-        id = joinPaths(['/', id]);
-      }
-      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
-      this.path = path;
-      this.id = id;
-      // this.customId = customId as TCustomId
-      this.fullPath = fullPath;
-      this.to = fullPath;
-    };
-    addChildren = children => {
-      this.children = children;
-      return this;
-    };
-    update = options => {
-      Object.assign(this.options, options);
-      return this;
-    };
-    static __onInit = route => {
-      // This is a dummy static method that should get
-      // replaced by a framework specific implementation if necessary
-    };
-    useMatch = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id
-      });
-    };
-    useRouteContext = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
-      });
-    };
-    useSearch = opts => {
-      return useSearch({
-        ...opts,
-        from: this.id
-      });
-    };
-    useParams = opts => {
-      return useParams({
-        ...opts,
-        from: this.id
-      });
-    };
-    useLoaderData = opts => {
-      return useLoaderData({
-        ...opts,
-        from: this.id
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
       });
-    };
+    }
+    return promise;
   }
-  function rootRouteWithContext() {
-    return options => {
-      return new RootRoute(options);
-    };
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
   }
-  class RootRoute extends Route {
-    constructor(options) {
-      super(options);
+
+  function useAwaited({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw promise;
+    }
+    if (state.status === 'error') {
+      throw state.error;
     }
+    router.dehydrateData(key, state);
+    return [state.data];
   }
-  function createRouteMask(opts) {
-    return opts;
+  function Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
   }
 
-  //
-
   class FileRoute {
     constructor(path) {
       this.path = path;
@@ -2755,6 +2798,7 @@
     return null;
   }
 
+  exports.Await = Await;
   exports.Block = Block;
   exports.CatchBoundary = CatchBoundary;
   exports.CatchBoundaryImpl = CatchBoundaryImpl;
@@ -2783,12 +2827,15 @@
   exports.deepEqual = deepEqual;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
+  exports.defer = defer;
   exports.encode = encode;
+  exports.escapeJSON = escapeJSON;
   exports.functionalUpdate = functionalUpdate;
   exports.getInitialRouterState = getInitialRouterState;
   exports.getRouteMatch = getRouteMatch;
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
+  exports.isDehydratedDeferred = isDehydratedDeferred;
   exports.isPlainObject = isPlainObject;
   exports.isRedirect = isRedirect;
   exports.isServer = isServer;
@@ -2814,6 +2861,7 @@
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
   exports.typedNavigate = typedNavigate;
+  exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
   exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;