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

package/build/esm/index.js

@@ -282,6 +282,11 @@ function useRouteContext(opts) {
   });
 }
 const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.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('/'));
@@ -467,173 +472,480 @@ function matchByPath(basepath, from, matchLocation) {
   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.useCallback(props => {
+    return /*#__PURE__*/React.createElement(ErrorComponent, {
+      ...props,
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    });
+  }, [route]);
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(CatchBoundary, {
+    resetKey: locationKey,
+    errorComponent: errorComponent,
+    onCatch: () => {
+      warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+    }
+  }, matches.length ? /*#__PURE__*/React.createElement(Match, {
+    matches: matches
+  }) : null));
+}
+const defaultPending = () => null;
+function SafeFragment(props) {
+  return /*#__PURE__*/React.createElement(React.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.Suspense : SafeFragment;
+  const errorComponent = routeErrorComponent ? React.useCallback(props => {
+    return /*#__PURE__*/React.createElement(routeErrorComponent, {
+      ...props,
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    });
+  }, [route]) : undefined;
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
+    fallback: /*#__PURE__*/React.createElement(PendingComponent, {
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    })
+  }, errorComponent ? /*#__PURE__*/React.createElement(CatchBoundary, {
+    resetKey: locationKey,
+    errorComponent: errorComponent,
+    onCatch: () => {
+      warning(false, `Error in route match: ${match.id}`);
+    }
+  }, /*#__PURE__*/React.createElement(MatchInner, {
+    match: match
+  })) : /*#__PURE__*/React.createElement(SafeFragment, null, /*#__PURE__*/React.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.createElement(comp, {
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams,
+        useLoaderData: route.useLoaderData
+      });
+    }
+    return /*#__PURE__*/React.createElement(Outlet, null);
+  }
+  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+}
+function Outlet() {
+  const matches = React.useContext(matchesContext).slice(1);
+  if (!matches[0]) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Match, {
+    matches: matches
+  });
+}
+function useMatchRoute() {
+  const {
+    matchRoute
+  } = useRouter();
+  return React.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.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.createContext(null);
+function useMatches(opts) {
+  const contextMatches = React.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
@@ -682,49 +994,6 @@ class Router {
   //   })
   // }
 
-  // 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)
@@ -1384,13 +1653,15 @@ function RouterProvider({
 
           // 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
@@ -1691,386 +1962,158 @@ function RouterProvider({
     return () => {
       unsub();
     };
-  }, [history]);
-  React.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.createElement(routerContext.Provider, {
-    value: routerContextValue
-  }, /*#__PURE__*/React.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.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.useCallback(props => {
-    return /*#__PURE__*/React.createElement(ErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]);
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: matches
-  }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-    }
-  }, matches.length ? /*#__PURE__*/React.createElement(Match, {
-    matches: matches
-  }) : null));
-}
-const defaultPending = () => null;
-function SafeFragment(props) {
-  return /*#__PURE__*/React.createElement(React.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.Suspense : SafeFragment;
-  const errorComponent = routeErrorComponent ? React.useCallback(props => {
-    return /*#__PURE__*/React.createElement(routeErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]) : undefined;
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: matches
-  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
-    fallback: /*#__PURE__*/React.createElement(PendingComponent, {
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    })
-  }, errorComponent ? /*#__PURE__*/React.createElement(CatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(false, `Error in route match: ${match.id}`);
-    }
-  }, /*#__PURE__*/React.createElement(MatchInner, {
-    match: match
-  })) : /*#__PURE__*/React.createElement(SafeFragment, null, /*#__PURE__*/React.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.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.createElement(Outlet, null);
-  }
-  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-}
-function Outlet() {
-  const matches = React.useContext(matchesContext).slice(1);
-  if (!matches[0]) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Match, {
-    matches: matches
-  });
-}
-function useMatchRoute() {
-  const {
-    matchRoute
-  } = useRouter();
-  return React.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.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.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.createContext(null);
-function useMatches(opts) {
-  const contextMatches = React.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.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.createElement(routerContext.Provider, {
+    value: routerContextValue
+  }, /*#__PURE__*/React.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.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;
@@ -2428,5 +2471,5 @@ function Navigate(props) {
   return null;
 }
 
-export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
+export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useAwaited, useBlocker, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map