@tanstack/react-router 1.45.0 → 1.45.3

package/dist/cjs/router.d.cts

@@ -259,6 +259,12 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TTrailingSlashOption
      * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#trailingslash-property)
      */
     trailingSlash?: TTrailingSlashOption;
+    /**
+     * Defaults to `typeof document !== 'undefined'`
+     * While usually automatic, sometimes it can be useful to force the router into a server-side state, e.g. when using the router in a non-browser environment that has access to a global.document object.
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#isserver property)
+     */
+    isServer?: boolean;
 }
 export interface RouterTransformer {
     stringify: (obj: unknown) => string;
@@ -270,6 +276,7 @@ export interface RouterErrorSerializer<TSerializedError> {
 }
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute, TRouteMatch = MakeRouteMatch<TRouteTree>> {
     status: 'pending' | 'idle';
+    loadedAt: number;
     isLoading: boolean;
     isTransitioning: boolean;
     matches: Array<TRouteMatch>;
@@ -345,7 +352,6 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     tempLocationKey: string | undefined;
     resetNextScroll: boolean;
     shouldViewTransition?: boolean;
-    latestLoadPromise: Promise<void>;
     subscribers: Set<RouterListener<RouterEvent>>;
     dehydratedData?: TDehydrated;
     viewTransitionPromise?: ControlledPromise<true>;
@@ -370,18 +376,17 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     routesById: RoutesById<TRouteTree>;
     routesByPath: RoutesByPath<TRouteTree>;
     flatRoutes: Array<AnyRoute>;
+    isServer: boolean;
     /**
      * @deprecated Use the `createRouter` function instead
      */
     constructor(options: RouterConstructorOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>);
-    isServer: boolean;
     startReactTransition: (fn: () => void) => void;
     update: (newOptions: RouterConstructorOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>) => void;
     get state(): RouterState<TRouteTree, MakeRouteMatch<TRouteTree>>;
     buildRouteTree: () => void;
     subscribe: <TType extends keyof RouterEvents>(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void;
     emit: (routerEvent: RouterEvent) => void;
-    checkLatest: (promise: Promise<void>) => void;
     parseLocation: (previousLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>) => ParsedLocation<FullSearchSchema<TRouteTree>>;
     resolvePathWithBase: (from: string, path: string) => string;
     get looseRoutesById(): Record<string, AnyRoute>;
@@ -392,17 +397,22 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     cancelMatch: (id: string) => void;
     cancelMatches: () => void;
     buildLocation: BuildLocationFn;
-    commitLocation: ({ startTransition, viewTransition, ignoreBlocker, ...next }: ParsedLocation & CommitLocationOptions) => Promise<void>;
-    buildAndCommitLocation: ({ replace, resetScroll, startTransition, viewTransition, ignoreBlocker, ...rest }?: BuildNextOptions & CommitLocationOptions) => Promise<void>;
+    commitLocationPromise: undefined | ControlledPromise<void>;
+    commitLocation: ({ viewTransition, ignoreBlocker, ...next }: ParsedLocation & CommitLocationOptions) => Promise<void>;
+    buildAndCommitLocation: ({ replace, resetScroll, viewTransition, ignoreBlocker, ...rest }?: BuildNextOptions & CommitLocationOptions) => Promise<void>;
     navigate: NavigateFn;
+    latestLoadPromise: undefined | Promise<void>;
     load: () => Promise<void>;
-    startViewTransition: (fn: () => Promise<void>) => Promise<void>;
-    loadMatches: ({ checkLatest, location, matches, preload, onReady, }: {
-        checkLatest: () => void;
+    startViewTransition: (fn: () => Promise<void>) => void;
+    updateMatch: (id: string, updater: (match: AnyRouteMatch) => AnyRouteMatch) => AnyRouteMatch;
+    getMatch: (matchId: string) => MakeRouteMatch<TRouteTree> | undefined;
+    loadMatches: ({ location, matches, preload, onReady, updateMatch, }: {
         location: ParsedLocation;
         matches: Array<AnyRouteMatch>;
         preload?: boolean;
         onReady?: () => Promise<void>;
+        updateMatch?: (id: string, updater: (match: AnyRouteMatch) => AnyRouteMatch) => void;
+        getMatch?: (matchId: string) => AnyRouteMatch | undefined;
     }) => Promise<Array<MakeRouteMatch>>;
     invalidate: () => Promise<void>;
     resolveRedirect: (err: AnyRedirect) => ResolvedRedirect;
@@ -410,13 +420,15 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     preloadRoute: <TFrom extends RoutePaths<TRouteTree> | string = string, TTo extends string = "", TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom, TMaskTo extends string = "">(opts: NavigateOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<Array<AnyRouteMatch> | undefined>;
     matchRoute: <TFrom extends RoutePaths<TRouteTree> = "/", TTo extends string = "", TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>>(location: ToOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo>, opts?: MatchRouteOptions) => false | RouteById<TRouteTree, TResolved>["types"]["allParams"];
     dehydrate: () => DehydratedRouter;
-    hydrate: () => Promise<void>;
+    hydrate: () => void;
     injectedHtml: Array<() => string>;
     injectHtml: (html: string) => void;
     streamedKeys: Set<string>;
     getStreamedValue: <T>(key: string) => T | undefined;
     streamValue: (key: string, value: any) => void;
-    handleNotFound: (matches: Array<AnyRouteMatch>, err: NotFoundError) => void;
+    _handleNotFound: (matches: Array<AnyRouteMatch>, err: NotFoundError, { updateMatch, }?: {
+        updateMatch?: (id: string, updater: (match: AnyRouteMatch) => AnyRouteMatch) => void;
+    }) => void;
     hasNotFoundMatch: () => boolean;
 }
 export declare function lazyFn<T extends Record<string, (...args: Array<any>) => any>, TKey extends keyof T = 'default'>(fn: () => Promise<T>, key?: TKey): (...args: Parameters<T[TKey]>) => Promise<Awaited<ReturnType<T[TKey]>>>;

package/dist/esm/CatchBoundary.d.ts

@@ -2,7 +2,7 @@ import { ErrorRouteComponent } from './route.js';
 import { ErrorInfo } from 'react';
 import * as React from 'react';
 export declare function CatchBoundary(props: {
-    getResetKey: () => string;
+    getResetKey: () => number | string;
     children: React.ReactNode;
     errorComponent?: ErrorRouteComponent;
     onCatch?: (error: Error, errorInfo: ErrorInfo) => void;

package/dist/esm/CatchBoundary.js

@@ -45,7 +45,7 @@ class CatchBoundaryImpl extends React.Component {
   }
   render() {
     return this.props.children({
-      error: this.state.error,
+      error: this.state.resetKey !== this.props.getResetKey() ? null : this.state.error,
       reset: () => {
         this.reset();
       }

package/dist/esm/CatchBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { ErrorRouteComponent } from './route'\nimport type { ErrorInfo } from 'react'\n\nexport function CatchBoundary(props: {\n  getResetKey: () => string\n  children: React.ReactNode\n  errorComponent?: ErrorRouteComponent\n  onCatch?: (error: Error, errorInfo: ErrorInfo) => void\n}) {\n  const errorComponent = props.errorComponent ?? ErrorComponent\n\n  return (\n    <CatchBoundaryImpl\n      getResetKey={props.getResetKey}\n      onCatch={props.onCatch}\n      children={({ error, reset }) => {\n        if (error) {\n          return React.createElement(errorComponent, {\n            error,\n            reset,\n          })\n        }\n\n        return props.children\n      }}\n    />\n  )\n}\n\nclass CatchBoundaryImpl extends React.Component<{\n  getResetKey: () => string\n  children: (props: {\n    error: Error | null\n    reset: () => void\n  }) => React.ReactNode\n  onCatch?: (error: Error, errorInfo: ErrorInfo) => void\n}> {\n  state = { error: null } as { error: Error | null; resetKey: string }\n  static getDerivedStateFromProps(props: any) {\n    return { resetKey: props.getResetKey() }\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n  reset() {\n    this.setState({ error: null })\n  }\n  componentDidUpdate(\n    prevProps: Readonly<{\n      getResetKey: () => string\n      children: (props: { error: any; reset: () => void }) => any\n      onCatch?: ((error: any, info: any) => void) | undefined\n    }>,\n    prevState: any,\n  ): void {\n    if (prevState.error && prevState.resetKey !== this.state.resetKey) {\n      this.reset()\n    }\n  }\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    if (this.props.onCatch) {\n      this.props.onCatch(error, errorInfo)\n    }\n  }\n  render() {\n    return this.props.children({\n      error: this.state.error,\n      reset: () => {\n        this.reset()\n      },\n    })\n  }\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')\n\n  return (\n    <div style={{ padding: '.5rem', maxWidth: '100%' }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>\n        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>\n        <button\n          style={{\n            appearance: 'none',\n            fontSize: '.6em',\n            border: '1px solid currentColor',\n            padding: '.1rem .2rem',\n            fontWeight: 'bold',\n            borderRadius: '.25rem',\n          }}\n          onClick={() => setShow((d) => !d)}\n        >\n          {show ? 'Hide Error' : 'Show Error'}\n        </button>\n      </div>\n      <div style={{ height: '.25rem' }} />\n      {show ? (\n        <div>\n          <pre\n            style={{\n              fontSize: '.7em',\n              border: '1px solid red',\n              borderRadius: '.25rem',\n              padding: '.3rem',\n              color: 'red',\n              overflow: 'auto',\n            }}\n          >\n            {error.message ? <code>{error.message}</code> : null}\n          </pre>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAIO,SAAS,cAAc,OAK3B;AACK,QAAA,iBAAiB,MAAM,kBAAkB;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,SAAS,MAAM;AAAA,MACf,UAAU,CAAC,EAAE,OAAO,YAAY;AAC9B,YAAI,OAAO;AACF,iBAAA,MAAM,cAAc,gBAAgB;AAAA,YACzC;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QACH;AAEA,eAAO,MAAM;AAAA,MACf;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM,0BAA0B,MAAM,UAOnC;AAAA,EAPH,cAAA;AAAA,UAAA,GAAA,SAAA;AAQU,SAAA,QAAA,EAAE,OAAO,KAAK;AAAA,EAAA;AAAA,EACtB,OAAO,yBAAyB,OAAY;AAC1C,WAAO,EAAE,UAAU,MAAM,YAAc,EAAA;AAAA,EACzC;AAAA,EACA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,MAAM;AAAA,EACjB;AAAA,EACA,QAAQ;AACN,SAAK,SAAS,EAAE,OAAO,KAAM,CAAA;AAAA,EAC/B;AAAA,EACA,mBACE,WAKA,WACM;AACN,QAAI,UAAU,SAAS,UAAU,aAAa,KAAK,MAAM,UAAU;AACjE,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB,OAAc,WAAsB;AAChD,QAAA,KAAK,MAAM,SAAS;AACjB,WAAA,MAAM,QAAQ,OAAO,SAAS;AAAA,IACrC;AAAA,EACF;AAAA,EACA,SAAS;AACA,WAAA,KAAK,MAAM,SAAS;AAAA,MACzB,OAAO,KAAK,MAAM;AAAA,MAClB,OAAO,MAAM;AACX,aAAK,MAAM;AAAA,MACb;AAAA,IAAA,CACD;AAAA,EACH;AACF;AAEgB,SAAA,eAAe,EAAE,SAAyB;AAClD,QAAA,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,QAAQ,IAAI,aAAa,YAAY;AAG1E,SAAA,qBAAC,SAAI,OAAO,EAAE,SAAS,SAAS,UAAU,OACxC,GAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAA,GACxD,UAAA;AAAA,MAAA,oBAAC,YAAO,OAAO,EAAE,UAAU,UAAU,UAAqB,yBAAA;AAAA,MAC1D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,cAAc;AAAA,UAChB;AAAA,UACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAE/B,iBAAO,eAAe;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA,GACF;AAAA,wBACC,OAAI,EAAA,OAAO,EAAE,QAAQ,YAAY;AAAA,IACjC,2BACE,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QAEC,gBAAM,UAAU,oBAAC,QAAM,EAAA,UAAA,MAAM,QAAQ,CAAA,IAAU;AAAA,MAAA;AAAA,OAEpD,IACE;AAAA,EACN,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { ErrorRouteComponent } from './route'\nimport type { ErrorInfo } from 'react'\n\nexport function CatchBoundary(props: {\n  getResetKey: () => number | string\n  children: React.ReactNode\n  errorComponent?: ErrorRouteComponent\n  onCatch?: (error: Error, errorInfo: ErrorInfo) => void\n}) {\n  const errorComponent = props.errorComponent ?? ErrorComponent\n\n  return (\n    <CatchBoundaryImpl\n      getResetKey={props.getResetKey}\n      onCatch={props.onCatch}\n      children={({ error, reset }) => {\n        if (error) {\n          return React.createElement(errorComponent, {\n            error,\n            reset,\n          })\n        }\n\n        return props.children\n      }}\n    />\n  )\n}\n\nclass CatchBoundaryImpl extends React.Component<{\n  getResetKey: () => number | string\n  children: (props: {\n    error: Error | null\n    reset: () => void\n  }) => React.ReactNode\n  onCatch?: (error: Error, errorInfo: ErrorInfo) => void\n}> {\n  state = { error: null } as { error: Error | null; resetKey: string }\n  static getDerivedStateFromProps(props: any) {\n    return { resetKey: props.getResetKey() }\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n  reset() {\n    this.setState({ error: null })\n  }\n  componentDidUpdate(\n    prevProps: Readonly<{\n      getResetKey: () => string\n      children: (props: { error: any; reset: () => void }) => any\n      onCatch?: ((error: any, info: any) => void) | undefined\n    }>,\n    prevState: any,\n  ): void {\n    if (prevState.error && prevState.resetKey !== this.state.resetKey) {\n      this.reset()\n    }\n  }\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    if (this.props.onCatch) {\n      this.props.onCatch(error, errorInfo)\n    }\n  }\n  render() {\n    // If the resetKey has changed, don't render the error\n    return this.props.children({\n      error:\n        this.state.resetKey !== this.props.getResetKey()\n          ? null\n          : this.state.error,\n      reset: () => {\n        this.reset()\n      },\n    })\n  }\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')\n\n  return (\n    <div style={{ padding: '.5rem', maxWidth: '100%' }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>\n        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>\n        <button\n          style={{\n            appearance: 'none',\n            fontSize: '.6em',\n            border: '1px solid currentColor',\n            padding: '.1rem .2rem',\n            fontWeight: 'bold',\n            borderRadius: '.25rem',\n          }}\n          onClick={() => setShow((d) => !d)}\n        >\n          {show ? 'Hide Error' : 'Show Error'}\n        </button>\n      </div>\n      <div style={{ height: '.25rem' }} />\n      {show ? (\n        <div>\n          <pre\n            style={{\n              fontSize: '.7em',\n              border: '1px solid red',\n              borderRadius: '.25rem',\n              padding: '.3rem',\n              color: 'red',\n              overflow: 'auto',\n            }}\n          >\n            {error.message ? <code>{error.message}</code> : null}\n          </pre>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAIO,SAAS,cAAc,OAK3B;AACK,QAAA,iBAAiB,MAAM,kBAAkB;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,SAAS,MAAM;AAAA,MACf,UAAU,CAAC,EAAE,OAAO,YAAY;AAC9B,YAAI,OAAO;AACF,iBAAA,MAAM,cAAc,gBAAgB;AAAA,YACzC;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QACH;AAEA,eAAO,MAAM;AAAA,MACf;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM,0BAA0B,MAAM,UAOnC;AAAA,EAPH,cAAA;AAAA,UAAA,GAAA,SAAA;AAQU,SAAA,QAAA,EAAE,OAAO,KAAK;AAAA,EAAA;AAAA,EACtB,OAAO,yBAAyB,OAAY;AAC1C,WAAO,EAAE,UAAU,MAAM,YAAc,EAAA;AAAA,EACzC;AAAA,EACA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,MAAM;AAAA,EACjB;AAAA,EACA,QAAQ;AACN,SAAK,SAAS,EAAE,OAAO,KAAM,CAAA;AAAA,EAC/B;AAAA,EACA,mBACE,WAKA,WACM;AACN,QAAI,UAAU,SAAS,UAAU,aAAa,KAAK,MAAM,UAAU;AACjE,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB,OAAc,WAAsB;AAChD,QAAA,KAAK,MAAM,SAAS;AACjB,WAAA,MAAM,QAAQ,OAAO,SAAS;AAAA,IACrC;AAAA,EACF;AAAA,EACA,SAAS;AAEA,WAAA,KAAK,MAAM,SAAS;AAAA,MACzB,OACE,KAAK,MAAM,aAAa,KAAK,MAAM,gBAC/B,OACA,KAAK,MAAM;AAAA,MACjB,OAAO,MAAM;AACX,aAAK,MAAM;AAAA,MACb;AAAA,IAAA,CACD;AAAA,EACH;AACF;AAEgB,SAAA,eAAe,EAAE,SAAyB;AAClD,QAAA,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,QAAQ,IAAI,aAAa,YAAY;AAG1E,SAAA,qBAAC,SAAI,OAAO,EAAE,SAAS,SAAS,UAAU,OACxC,GAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAA,GACxD,UAAA;AAAA,MAAA,oBAAC,YAAO,OAAO,EAAE,UAAU,UAAU,UAAqB,yBAAA;AAAA,MAC1D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,cAAc;AAAA,UAChB;AAAA,UACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAE/B,iBAAO,eAAe;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA,GACF;AAAA,wBACC,OAAI,EAAA,OAAO,EAAE,QAAQ,YAAY;AAAA,IACjC,2BACE,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QAEC,gBAAM,UAAU,oBAAC,QAAM,EAAA,UAAA,MAAM,QAAQ,CAAA,IAAU;AAAA,MAAA;AAAA,OAEpD,IACE;AAAA,EACN,EAAA,CAAA;AAEJ;"}

package/dist/esm/Match.js

@@ -43,7 +43,7 @@ function Match({ matchId }) {
   const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
   const ResolvedNotFoundBoundary = routeNotFoundComponent ? CatchNotFound : SafeFragment;
   const resetKey = useRouterState({
-    select: (s) => s.resolvedLocation.state.key
+    select: (s) => s.loadedAt
   });
   return /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsx(
     ResolvedCatchBoundary,
@@ -79,20 +79,21 @@ function MatchInner({ matchId }) {
     }
   });
   const route = router.routesById[routeId];
-  const [match, matchIndex] = useRouterState({
+  const matchIndex = useRouterState({
     select: (s) => {
-      const matchIndex2 = s.matches.findIndex((d) => d.id === matchId);
-      const match2 = s.matches[matchIndex2];
-      return [
-        pick(match2, [
-          "id",
-          "status",
-          "error",
-          "loadPromise",
-          "minPendingPromise"
-        ]),
-        matchIndex2
-      ];
+      return s.matches.findIndex((d) => d.id === matchId);
+    }
+  });
+  const match = useRouterState({
+    select: (s) => {
+      const match2 = s.matches[matchIndex];
+      return pick(match2, [
+        "id",
+        "status",
+        "error",
+        "loadPromise",
+        "minPendingPromise"
+      ]);
     }
   });
   const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent;
@@ -133,31 +134,20 @@ function MatchInner({ matchId }) {
   if (match.status === "pending") {
     const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
     if (pendingMinMs && !match.minPendingPromise) {
-      match.minPendingPromise = createControlledPromise();
       if (!router.isServer) {
+        const minPendingPromise = createControlledPromise();
         Promise.resolve().then(() => {
-          router.__store.setState((s) => ({
-            ...s,
-            matches: s.matches.map(
-              (d) => d.id === match.id ? { ...d, minPendingPromise: createControlledPromise() } : d
-            )
+          router.updateMatch(match.id, (prev) => ({
+            ...prev,
+            minPendingPromise
           }));
         });
         setTimeout(() => {
-          router.__store.setState((s) => {
-            return {
-              ...s,
-              matches: s.matches.map(
-                (d) => {
-                  var _a2;
-                  return d.id === match.id ? {
-                    ...d,
-                    minPendingPromise: ((_a2 = d.minPendingPromise) == null ? void 0 : _a2.resolve(), void 0)
-                  } : d;
-                }
-              )
-            };
-          });
+          minPendingPromise.resolve();
+          router.updateMatch(match.id, (prev) => ({
+            ...prev,
+            minPendingPromise: void 0
+          }));
         }, pendingMinMs);
       }
     }

package/dist/esm/Match.js.map

@@ -1 +1 @@
-{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { type AnyRoute } from './route'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\n\nexport function Match({ matchId }: { matchId: string }) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.resolvedLocation.state.key!,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n}\nfunction MatchInner({ matchId }: { matchId: string }): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const [match, matchIndex] = useRouterState({\n    select: (s) => {\n      const matchIndex = s.matches.findIndex((d) => d.id === matchId)\n      const match = s.matches[matchIndex]!\n      return [\n        pick(match, [\n          'id',\n          'status',\n          'error',\n          'loadPromise',\n          'minPendingPromise',\n        ]),\n        matchIndex,\n      ] as const\n    },\n  })\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      match.minPendingPromise = createControlledPromise()\n\n      if (!router.isServer) {\n        Promise.resolve().then(() => {\n          router.__store.setState((s) => ({\n            ...s,\n            matches: s.matches.map((d) =>\n              d.id === match.id\n                ? { ...d, minPendingPromise: createControlledPromise() }\n                : d,\n            ),\n          }))\n        })\n\n        setTimeout(() => {\n          // We've handled the minPendingPromise, so we can delete it\n          router.__store.setState((s) => {\n            return {\n              ...s,\n              matches: s.matches.map((d) =>\n                d.id === match.id\n                  ? {\n                      ...d,\n                      minPendingPromise:\n                        (d.minPendingPromise?.resolve(), undefined),\n                    }\n                  : d,\n              ),\n            }\n          })\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  const Comp = route.options.component ?? router.options.defaultComponent\n\n  const out = Comp ? <Comp /> : <Outlet />\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n}\n\nexport const Outlet = React.memo(function Outlet() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["matchIndex","match"],"mappings":";;;;;;;;;;;;;;;;AAkBgB;;AACd;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACU;AAIxC;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AACA;;AACE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAA2C;AAEjCA;AACAC;AACC;AAAA;AACO;AACV;AACA;AACA;AACA;AACA;AACD;AACDD;AAAA;AAEJ;AAGF;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEF;AAEI;AACM;AACC;AAAyB;AAC3B;AACgB;AAGb;AACN;AACA;AAGJ;AAES;AACE;AAAA;AACF;AACgB;;AACjB;AACI;AACK;AAEgC;AAErC;AAAA;AACN;AAAA;AAEH;AACY;AACjB;AAGF;AAAY;AAGd;AAEA;AAEA;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;"}
+{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { type AnyRoute } from './route'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\n\nexport function Match({ matchId }: { matchId: string }) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n}\nfunction MatchInner({ matchId }: { matchId: string }): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const matchIndex = useRouterState({\n    select: (s) => {\n      return s.matches.findIndex((d) => d.id === matchId)\n    },\n  })\n\n  const match = useRouterState({\n    select: (s) => {\n      const match = s.matches[matchIndex]!\n      return pick(match, [\n        'id',\n        'status',\n        'error',\n        'loadPromise',\n        'minPendingPromise',\n      ])\n    },\n  })\n\n  // function useChangedDiff(value: any) {\n  //   const ref = React.useRef(value)\n  //   const changed = ref.current !== value\n  //   if (changed) {\n  //     console.log(\n  //       'Changed:',\n  //       value,\n  //       Object.fromEntries(\n  //         Object.entries(value).filter(\n  //           ([key, val]) => val !== ref.current[key],\n  //         ),\n  //       ),\n  //     )\n  //   }\n  //   ref.current = value\n  // }\n\n  // useChangedDiff(match)\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      if (!router.isServer) {\n        const minPendingPromise = createControlledPromise<void>()\n\n        Promise.resolve().then(() => {\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise,\n          }))\n        })\n\n        setTimeout(() => {\n          minPendingPromise.resolve()\n\n          // We've handled the minPendingPromise, so we can delete it\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise: undefined,\n          }))\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  const Comp = route.options.component ?? router.options.defaultComponent\n\n  const out = Comp ? <Comp /> : <Outlet />\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n}\n\nexport const Outlet = React.memo(function Outlet() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match"],"mappings":";;;;;;;;;;;;;;;;AAkBgB;;AACd;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AACA;;AACE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAAkC;AAE9B;AAAkD;AACpD;AAGF;AAA6B;AAEnBA;AACN;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACD;AACH;AAsBF;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEE;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AACjB;AAGF;AAAY;AAGd;AAEA;AAEA;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;"}

package/dist/esm/Matches.d.ts

@@ -16,8 +16,10 @@ export interface RouteMatch<TRouteId, TAllParams, TFullSearchSchema, TLoaderData
     paramsError: unknown;
     searchError: unknown;
     updatedAt: number;
-    loadPromise: ControlledPromise<void>;
-    loaderPromise: Promise<TLoaderData>;
+    componentsPromise?: Promise<Array<void>>;
+    loadPromise?: ControlledPromise<void>;
+    beforeLoadPromise?: ControlledPromise<void>;
+    loaderPromise?: ControlledPromise<void>;
     loaderData?: TLoaderData;
     routeContext: TRouteContext;
     context: TAllContext;

package/dist/esm/Matches.js

@@ -26,7 +26,7 @@ function MatchesInner() {
     }
   });
   const resetKey = useRouterState({
-    select: (s) => s.resolvedLocation.state.key
+    select: (s) => s.loadedAt
   });
   return /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(
     CatchBoundary,

package/dist/esm/Matches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { type AnyRouter, type RegisteredRouter } from './router'\nimport { Transitioner } from './Transitioner'\nimport {\n  type AnyRoute,\n  type ReactNode,\n  type StaticDataRouteOption,\n} from './route'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type { ResolveRelativePath, ToOptions } from './link'\nimport type {\n  AllContext,\n  AllLoaderData,\n  AllParams,\n  FullSearchSchema,\n  ParseRoute,\n  RouteById,\n  RouteByPath,\n  RouteIds,\n  RoutePaths,\n} from './routeInfo'\nimport type { ControlledPromise, DeepPartial, NoInfer } from './utils'\n\nexport interface RouteMatch<\n  TRouteId,\n  TAllParams,\n  TFullSearchSchema,\n  TLoaderData,\n  TAllContext,\n  TRouteContext,\n  TLoaderDeps,\n> {\n  id: string\n  routeId: TRouteId\n  index: number\n  pathname: string\n  params: TAllParams\n  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n  isFetching: false | 'beforeLoad' | 'loader'\n  error: unknown\n  paramsError: unknown\n  searchError: unknown\n  updatedAt: number\n  loadPromise: ControlledPromise<void>\n  loaderPromise: Promise<TLoaderData>\n  loaderData?: TLoaderData\n  routeContext: TRouteContext\n  context: TAllContext\n  search: TFullSearchSchema\n  fetchCount: number\n  abortController: AbortController\n  cause: 'preload' | 'enter' | 'stay'\n  loaderDeps: TLoaderDeps\n  preload: boolean\n  invalid: boolean\n  meta?: Array<React.JSX.IntrinsicElements['meta']>\n  links?: Array<React.JSX.IntrinsicElements['link']>\n  scripts?: Array<React.JSX.IntrinsicElements['script']>\n  headers?: Record<string, string>\n  globalNotFound?: boolean\n  staticData: StaticDataRouteOption\n  minPendingPromise?: ControlledPromise<void>\n}\n\nexport type MakeRouteMatch<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId = ParseRoute<TRouteTree>['id'],\n  TStrict extends boolean = true,\n  TTypes extends AnyRoute['types'] = RouteById<TRouteTree, TRouteId>['types'],\n  TAllParams = TStrict extends false\n    ? AllParams<TRouteTree>\n    : TTypes['allParams'],\n  TFullSearchSchema = TStrict extends false\n    ? FullSearchSchema<TRouteTree>\n    : TTypes['fullSearchSchema'],\n  TLoaderData = TStrict extends false\n    ? AllLoaderData<TRouteTree>\n    : TTypes['loaderData'],\n  TAllContext = TStrict extends false\n    ? AllContext<TRouteTree>\n    : TTypes['allContext'],\n  TRouteContext = TTypes['routeContext'],\n  TLoaderDeps = TTypes['loaderDeps'],\n> = RouteMatch<\n  TRouteId,\n  TAllParams,\n  TFullSearchSchema,\n  TLoaderData,\n  TAllContext,\n  TRouteContext,\n  TLoaderDeps\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n  const router = useRouter()\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const ResolvedSuspense = !router.state.matches.length\n    ? React.Suspense\n    : SafeFragment\n\n  const inner = (\n    <ResolvedSuspense fallback={pendingElement}>\n      <Transitioner />\n      <MatchesInner />\n    </ResolvedSuspense>\n  )\n\n  return router.options.InnerWrap ? (\n    <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n  ) : (\n    inner\n  )\n}\n\nfunction MatchesInner() {\n  const matchId = useRouterState({\n    select: (s) => {\n      return s.matches[0]?.id\n    },\n  })\n\n  const resetKey = useRouterState({\n    select: (s) => s.resolvedLocation.state.key!,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <CatchBoundary\n        getResetKey={() => resetKey}\n        errorComponent={ErrorComponent}\n        onCatch={(error) => {\n          warning(\n            false,\n            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n          )\n          warning(false, error.message || error.toString())\n        }}\n      >\n        {matchId ? <Match matchId={matchId} /> : null}\n      </CatchBoundary>\n    </matchContext.Provider>\n  )\n}\n\nexport interface MatchRouteOptions {\n  pending?: boolean\n  caseSensitive?: boolean\n  includeSearch?: boolean\n  fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n  TOptions extends ToOptions<\n    TRouter,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > = ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n  TRelaxedOptions = Omit<TOptions, 'search' | 'params'> &\n    DeepPartial<Pick<TOptions, 'search' | 'params'>>,\n> = TRelaxedOptions & MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n  const router = useRouter()\n\n  return React.useCallback(\n    <\n      TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n      TTo extends string = '',\n      TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n      TMaskTo extends string = '',\n      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,\n    >(\n      opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n    ):\n      | false\n      | RouteByPath<TRouter['routeTree'], TResolved>['types']['allParams'] => {\n      const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n      return router.matchRoute(rest as any, {\n        pending,\n        caseSensitive,\n        fuzzy,\n        includeSearch,\n      })\n    },\n    [router],\n  )\n}\n\nexport type MakeMatchRouteOptions<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n  // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n  children?:\n    | ((\n        params?: RouteByPath<\n          TRouter['routeTree'],\n          ResolveRelativePath<TFrom, NoInfer<TTo>>\n        >['types']['allParams'],\n      ) => ReactNode)\n    | React.ReactNode\n}\n\nexport function MatchRoute<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n  const matchRoute = useMatchRoute()\n  const params = matchRoute(props as any)\n\n  if (typeof props.children === 'function') {\n    return (props.children as any)(params)\n  }\n\n  return params ? props.children : null\n}\n\nexport function useMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  return useRouterState({\n    select: (state) => {\n      const matches = state.matches\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n\nexport function useParentMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  const contextMatchId = React.useContext(matchContext)\n\n  return useMatches({\n    select: (matches) => {\n      matches = matches.slice(\n        0,\n        matches.findIndex((d) => d.id === contextMatchId),\n      )\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n\nexport function useChildMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  const contextMatchId = React.useContext(matchContext)\n\n  return useMatches({\n    select: (matches) => {\n      matches = matches.slice(\n        matches.findIndex((d) => d.id === contextMatchId) + 1,\n      )\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqGO,SAAS,UAAU;AACxB,QAAM,SAAS;AAET,QAAA,iBAAiB,OAAO,QAAQ,8CACnC,OAAO,QAAQ,yBAAf,CAAuC,CAAA,IACtC;AAEJ,QAAM,mBAAmB,CAAC,OAAO,MAAM,QAAQ,SAC3C,MAAM,WACN;AAEJ,QAAM,QACJ,qBAAC,kBAAiB,EAAA,UAAU,gBAC1B,UAAA;AAAA,IAAA,oBAAC,cAAa,EAAA;AAAA,wBACb,cAAa,EAAA;AAAA,EAChB,EAAA,CAAA;AAGK,SAAA,OAAO,QAAQ,YACpB,oBAAC,OAAO,QAAQ,WAAf,EAA0B,UAAA,MAAM,CAAA,IAEjC;AAEJ;AAEA,SAAS,eAAe;AACtB,QAAM,UAAU,eAAe;AAAA,IAC7B,QAAQ,CAAC,MAAM;;AACN,cAAA,OAAE,QAAQ,CAAC,MAAX,mBAAc;AAAA,IACvB;AAAA,EAAA,CACD;AAED,QAAM,WAAW,eAAe;AAAA,IAC9B,QAAQ,CAAC,MAAM,EAAE,iBAAiB,MAAM;AAAA,EAAA,CACzC;AAED,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,SAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,gBAAgB;AAAA,MAChB,SAAS,CAAC,UAAU;AAClB;AAAA,UACE;AAAA,UACA;AAAA,QAAA;AAEF,gBAAQ,OAAO,MAAM,WAAW,MAAM,UAAU;AAAA,MAClD;AAAA,MAEC,UAAU,UAAA,oBAAC,OAAM,EAAA,QAAkB,CAAA,IAAK;AAAA,IAAA;AAAA,EAE7C,EAAA,CAAA;AAEJ;AA4BO,SAAS,gBAA8D;AAC5E,QAAM,SAAS;AAEf,SAAO,MAAM;AAAA,IACX,CAOE,SAGwE;AACxE,YAAM,EAAE,SAAS,eAAe,OAAO,eAAe,GAAG,KAAS,IAAA;AAE3D,aAAA,OAAO,WAAW,MAAa;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAEX;AAsBO,SAAS,WAQd,OAA4E;AAC5E,QAAM,aAAa;AACb,QAAA,SAAS,WAAW,KAAY;AAElC,MAAA,OAAO,MAAM,aAAa,YAAY;AAChC,WAAA,MAAM,SAAiB,MAAM;AAAA,EACvC;AAEO,SAAA,SAAS,MAAM,WAAW;AACnC;AAEO,SAAS,WAKd,MAA2D;AAC3D,SAAO,eAAe;AAAA,IACpB,QAAQ,CAAC,UAAU;AACjB,YAAM,UAAU,MAAM;AACtB,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;AAEO,SAAS,iBAKd,MAA2D;AACrD,QAAA,iBAAiB,MAAM,WAAW,YAAY;AAEpD,SAAO,WAAW;AAAA,IAChB,QAAQ,CAAC,YAAY;AACnB,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,cAAc;AAAA,MAAA;AAElD,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;AAEO,SAAS,gBAKd,MAA2D;AACrD,QAAA,iBAAiB,MAAM,WAAW,YAAY;AAEpD,SAAO,WAAW;AAAA,IAChB,QAAQ,CAAC,YAAY;AACnB,gBAAU,QAAQ;AAAA,QAChB,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,cAAc,IAAI;AAAA,MAAA;AAEtD,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { type AnyRouter, type RegisteredRouter } from './router'\nimport { Transitioner } from './Transitioner'\nimport {\n  type AnyRoute,\n  type ReactNode,\n  type StaticDataRouteOption,\n} from './route'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type { ResolveRelativePath, ToOptions } from './link'\nimport type {\n  AllContext,\n  AllLoaderData,\n  AllParams,\n  FullSearchSchema,\n  ParseRoute,\n  RouteById,\n  RouteByPath,\n  RouteIds,\n  RoutePaths,\n} from './routeInfo'\nimport type { ControlledPromise, DeepPartial, NoInfer } from './utils'\n\nexport interface RouteMatch<\n  TRouteId,\n  TAllParams,\n  TFullSearchSchema,\n  TLoaderData,\n  TAllContext,\n  TRouteContext,\n  TLoaderDeps,\n> {\n  id: string\n  routeId: TRouteId\n  index: number\n  pathname: string\n  params: TAllParams\n  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n  isFetching: false | 'beforeLoad' | 'loader'\n  error: unknown\n  paramsError: unknown\n  searchError: unknown\n  updatedAt: number\n  componentsPromise?: Promise<Array<void>>\n  loadPromise?: ControlledPromise<void>\n  beforeLoadPromise?: ControlledPromise<void>\n  loaderPromise?: ControlledPromise<void>\n  loaderData?: TLoaderData\n  routeContext: TRouteContext\n  context: TAllContext\n  search: TFullSearchSchema\n  fetchCount: number\n  abortController: AbortController\n  cause: 'preload' | 'enter' | 'stay'\n  loaderDeps: TLoaderDeps\n  preload: boolean\n  invalid: boolean\n  meta?: Array<React.JSX.IntrinsicElements['meta']>\n  links?: Array<React.JSX.IntrinsicElements['link']>\n  scripts?: Array<React.JSX.IntrinsicElements['script']>\n  headers?: Record<string, string>\n  globalNotFound?: boolean\n  staticData: StaticDataRouteOption\n  minPendingPromise?: ControlledPromise<void>\n}\n\nexport type MakeRouteMatch<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId = ParseRoute<TRouteTree>['id'],\n  TStrict extends boolean = true,\n  TTypes extends AnyRoute['types'] = RouteById<TRouteTree, TRouteId>['types'],\n  TAllParams = TStrict extends false\n    ? AllParams<TRouteTree>\n    : TTypes['allParams'],\n  TFullSearchSchema = TStrict extends false\n    ? FullSearchSchema<TRouteTree>\n    : TTypes['fullSearchSchema'],\n  TLoaderData = TStrict extends false\n    ? AllLoaderData<TRouteTree>\n    : TTypes['loaderData'],\n  TAllContext = TStrict extends false\n    ? AllContext<TRouteTree>\n    : TTypes['allContext'],\n  TRouteContext = TTypes['routeContext'],\n  TLoaderDeps = TTypes['loaderDeps'],\n> = RouteMatch<\n  TRouteId,\n  TAllParams,\n  TFullSearchSchema,\n  TLoaderData,\n  TAllContext,\n  TRouteContext,\n  TLoaderDeps\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n  const router = useRouter()\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const ResolvedSuspense = !router.state.matches.length\n    ? React.Suspense\n    : SafeFragment\n\n  const inner = (\n    <ResolvedSuspense fallback={pendingElement}>\n      <Transitioner />\n      <MatchesInner />\n    </ResolvedSuspense>\n  )\n\n  return router.options.InnerWrap ? (\n    <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n  ) : (\n    inner\n  )\n}\n\nfunction MatchesInner() {\n  const matchId = useRouterState({\n    select: (s) => {\n      return s.matches[0]?.id\n    },\n  })\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <CatchBoundary\n        getResetKey={() => resetKey}\n        errorComponent={ErrorComponent}\n        onCatch={(error) => {\n          warning(\n            false,\n            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n          )\n          warning(false, error.message || error.toString())\n        }}\n      >\n        {matchId ? <Match matchId={matchId} /> : null}\n      </CatchBoundary>\n    </matchContext.Provider>\n  )\n}\n\nexport interface MatchRouteOptions {\n  pending?: boolean\n  caseSensitive?: boolean\n  includeSearch?: boolean\n  fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n  TOptions extends ToOptions<\n    TRouter,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > = ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n  TRelaxedOptions = Omit<TOptions, 'search' | 'params'> &\n    DeepPartial<Pick<TOptions, 'search' | 'params'>>,\n> = TRelaxedOptions & MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n  const router = useRouter()\n\n  return React.useCallback(\n    <\n      TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n      TTo extends string = '',\n      TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n      TMaskTo extends string = '',\n      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,\n    >(\n      opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n    ):\n      | false\n      | RouteByPath<TRouter['routeTree'], TResolved>['types']['allParams'] => {\n      const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n      return router.matchRoute(rest as any, {\n        pending,\n        caseSensitive,\n        fuzzy,\n        includeSearch,\n      })\n    },\n    [router],\n  )\n}\n\nexport type MakeMatchRouteOptions<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n  // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n  children?:\n    | ((\n        params?: RouteByPath<\n          TRouter['routeTree'],\n          ResolveRelativePath<TFrom, NoInfer<TTo>>\n        >['types']['allParams'],\n      ) => ReactNode)\n    | React.ReactNode\n}\n\nexport function MatchRoute<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<\n    TRouter['routeTree']\n  >,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,\n  TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n  const matchRoute = useMatchRoute()\n  const params = matchRoute(props as any)\n\n  if (typeof props.children === 'function') {\n    return (props.children as any)(params)\n  }\n\n  return params ? props.children : null\n}\n\nexport function useMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  return useRouterState({\n    select: (state) => {\n      const matches = state.matches\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n\nexport function useParentMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  const contextMatchId = React.useContext(matchContext)\n\n  return useMatches({\n    select: (matches) => {\n      matches = matches.slice(\n        0,\n        matches.findIndex((d) => d.id === contextMatchId),\n      )\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n\nexport function useChildMatches<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],\n  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId>,\n  T = Array<TRouteMatch>,\n>(opts?: { select?: (matches: Array<TRouteMatch>) => T }): T {\n  const contextMatchId = React.useContext(matchContext)\n\n  return useMatches({\n    select: (matches) => {\n      matches = matches.slice(\n        matches.findIndex((d) => d.id === contextMatchId) + 1,\n      )\n      return opts?.select\n        ? opts.select(matches as Array<TRouteMatch>)\n        : (matches as T)\n    },\n  })\n}\n"],"names":[],"mappings":";;;;;;;;;;AAuGO,SAAS,UAAU;AACxB,QAAM,SAAS;AAET,QAAA,iBAAiB,OAAO,QAAQ,8CACnC,OAAO,QAAQ,yBAAf,CAAuC,CAAA,IACtC;AAEJ,QAAM,mBAAmB,CAAC,OAAO,MAAM,QAAQ,SAC3C,MAAM,WACN;AAEJ,QAAM,QACJ,qBAAC,kBAAiB,EAAA,UAAU,gBAC1B,UAAA;AAAA,IAAA,oBAAC,cAAa,EAAA;AAAA,wBACb,cAAa,EAAA;AAAA,EAChB,EAAA,CAAA;AAGK,SAAA,OAAO,QAAQ,YACpB,oBAAC,OAAO,QAAQ,WAAf,EAA0B,UAAA,MAAM,CAAA,IAEjC;AAEJ;AAEA,SAAS,eAAe;AACtB,QAAM,UAAU,eAAe;AAAA,IAC7B,QAAQ,CAAC,MAAM;;AACN,cAAA,OAAE,QAAQ,CAAC,MAAX,mBAAc;AAAA,IACvB;AAAA,EAAA,CACD;AAED,QAAM,WAAW,eAAe;AAAA,IAC9B,QAAQ,CAAC,MAAM,EAAE;AAAA,EAAA,CAClB;AAED,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,SAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,gBAAgB;AAAA,MAChB,SAAS,CAAC,UAAU;AAClB;AAAA,UACE;AAAA,UACA;AAAA,QAAA;AAEF,gBAAQ,OAAO,MAAM,WAAW,MAAM,UAAU;AAAA,MAClD;AAAA,MAEC,UAAU,UAAA,oBAAC,OAAM,EAAA,QAAkB,CAAA,IAAK;AAAA,IAAA;AAAA,EAE7C,EAAA,CAAA;AAEJ;AA4BO,SAAS,gBAA8D;AAC5E,QAAM,SAAS;AAEf,SAAO,MAAM;AAAA,IACX,CAOE,SAGwE;AACxE,YAAM,EAAE,SAAS,eAAe,OAAO,eAAe,GAAG,KAAS,IAAA;AAE3D,aAAA,OAAO,WAAW,MAAa;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAEX;AAsBO,SAAS,WAQd,OAA4E;AAC5E,QAAM,aAAa;AACb,QAAA,SAAS,WAAW,KAAY;AAElC,MAAA,OAAO,MAAM,aAAa,YAAY;AAChC,WAAA,MAAM,SAAiB,MAAM;AAAA,EACvC;AAEO,SAAA,SAAS,MAAM,WAAW;AACnC;AAEO,SAAS,WAKd,MAA2D;AAC3D,SAAO,eAAe;AAAA,IACpB,QAAQ,CAAC,UAAU;AACjB,YAAM,UAAU,MAAM;AACtB,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;AAEO,SAAS,iBAKd,MAA2D;AACrD,QAAA,iBAAiB,MAAM,WAAW,YAAY;AAEpD,SAAO,WAAW;AAAA,IAChB,QAAQ,CAAC,YAAY;AACnB,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,cAAc;AAAA,MAAA;AAElD,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;AAEO,SAAS,gBAKd,MAA2D;AACrD,QAAA,iBAAiB,MAAM,WAAW,YAAY;AAEpD,SAAO,WAAW;AAAA,IAChB,QAAQ,CAAC,YAAY;AACnB,gBAAU,QAAQ;AAAA,QAChB,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,cAAc,IAAI;AAAA,MAAA;AAEtD,cAAO,6BAAM,UACT,KAAK,OAAO,OAA6B,IACxC;AAAA,IACP;AAAA,EAAA,CACD;AACH;"}

package/dist/esm/RouterProvider.d.ts

@@ -1,9 +1,7 @@
 import { NavigateOptions, ToOptions } from './link.js';
 import { ParsedLocation } from './location.js';
-import { AnyRoute } from './route.js';
 import { RoutePaths } from './routeInfo.js';
-import { AnyRouter, RegisteredRouter, Router, RouterOptions, RouterState } from './router.js';
-import { MakeRouteMatch } from './Matches.js';
+import { AnyRouter, RegisteredRouter, Router, RouterOptions } from './router.js';
 import * as React from 'react';
 export interface CommitLocationOptions {
     replace?: boolean;
@@ -32,7 +30,6 @@ export declare function RouterContextProvider<TRouter extends AnyRouter = Regist
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function RouterProvider<TRouter extends AnyRouter = RegisteredRouter, TDehydrated extends Record<string, any> = Record<string, any>>({ router, ...rest }: RouterProps<TRouter, TDehydrated>): import("react/jsx-runtime").JSX.Element;
-export declare function getRouteMatch<TRouteTree extends AnyRoute>(state: RouterState<TRouteTree>, id: string): undefined | MakeRouteMatch<TRouteTree>;
 export type RouterProps<TRouter extends AnyRouter = RegisteredRouter, TDehydrated extends Record<string, any> = Record<string, any>> = Omit<RouterOptions<TRouter['routeTree'], NonNullable<TRouter['options']['trailingSlash']>, TDehydrated>, 'context'> & {
     router: Router<TRouter['routeTree'], NonNullable<TRouter['options']['trailingSlash']>>;
     context?: Partial<RouterOptions<TRouter['routeTree'], NonNullable<TRouter['options']['trailingSlash']>, TDehydrated>['context']>;

package/dist/esm/RouterProvider.js

@@ -24,16 +24,8 @@ function RouterContextProvider({
 function RouterProvider({ router, ...rest }) {
   return /* @__PURE__ */ jsx(RouterContextProvider, { router, ...rest, children: /* @__PURE__ */ jsx(Matches, {}) });
 }
-function getRouteMatch(state, id) {
-  return [
-    ...state.cachedMatches,
-    ...state.pendingMatches ?? [],
-    ...state.matches
-  ].find((d) => d.id === id);
-}
 export {
   RouterContextProvider,
-  RouterProvider,
-  getRouteMatch
+  RouterProvider
 };
 //# sourceMappingURL=RouterProvider.js.map

package/dist/esm/RouterProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["// eslint-disable-next-line ts/consistent-type-imports\nimport * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type { NavigateOptions, ToOptions } from './link'\nimport type { ParsedLocation } from './location'\nimport type { AnyRoute } from './route'\nimport type { RoutePaths } from './routeInfo'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  Router,\n  RouterOptions,\n  RouterState,\n} from './router'\n\nimport type { MakeRouteMatch } from './Matches'\n\nexport interface CommitLocationOptions {\n  replace?: boolean\n  resetScroll?: boolean\n  viewTransition?: boolean\n  /**\n   * @deprecated All navigations use React transitions under the hood now\n   **/\n  startTransition?: boolean\n  ignoreBlocker?: boolean\n}\n\nexport interface MatchLocation {\n  to?: string | number | null\n  fuzzy?: boolean\n  caseSensitive?: boolean\n  from?: string\n}\n\nexport type NavigateFn = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n    __isRedirect?: boolean\n  },\n) => Promise<void>\n\nexport type BuildLocationFn = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n    leaveParams?: boolean\n  },\n) => ParsedLocation\n\nexport type InjectedHtmlEntry = string | (() => Promise<string> | string)\n\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  // Allow the router to update options on the router instance\n  router.update({\n    ...router.options,\n    ...rest,\n    context: {\n      ...router.options.context,\n      ...rest.context,\n    },\n  } as any)\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router}>{children}</routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport function getRouteMatch<TRouteTree extends AnyRoute>(\n  state: RouterState<TRouteTree>,\n  id: string,\n): undefined | MakeRouteMatch<TRouteTree> {\n  return [\n    ...state.cachedMatches,\n    ...(state.pendingMatches ?? []),\n    ...state.matches,\n  ].find((d) => d.id === id)\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: Router<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>\n  >\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":[],"mappings":";;;AA8DO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AAED,SAAO,OAAO;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,OAAO,QAAQ;AAAA,MAClB,GAAG,KAAK;AAAA,IACV;AAAA,EAAA,CACM;AAER,QAAM,gBAAgB;AAEtB,QAAM,WACH,oBAAA,cAAc,UAAd,EAAuB,OAAO,QAAS,SAAS,CAAA;AAG/C,MAAA,OAAO,QAAQ,MAAM;AACvB,WAAQ,oBAAA,OAAO,QAAQ,MAAf,EAAqB,UAAS,SAAA,CAAA;AAAA,EACxC;AAEO,SAAA;AACT;AAEO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,6BACG,uBAAsB,EAAA,QAAiB,GAAG,MACzC,UAAA,oBAAC,UAAQ,CAAA,EACX,CAAA;AAEJ;AAEgB,SAAA,cACd,OACA,IACwC;AACjC,SAAA;AAAA,IACL,GAAG,MAAM;AAAA,IACT,GAAI,MAAM,kBAAkB,CAAC;AAAA,IAC7B,GAAG,MAAM;AAAA,EAAA,EACT,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAC3B;"}
+{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["// eslint-disable-next-line ts/consistent-type-imports\nimport * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type { NavigateOptions, ToOptions } from './link'\nimport type { ParsedLocation } from './location'\nimport type { AnyRoute } from './route'\nimport type { RoutePaths } from './routeInfo'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  Router,\n  RouterOptions,\n  RouterState,\n} from './router'\n\nimport type { MakeRouteMatch } from './Matches'\n\nexport interface CommitLocationOptions {\n  replace?: boolean\n  resetScroll?: boolean\n  viewTransition?: boolean\n  /**\n   * @deprecated All navigations use React transitions under the hood now\n   **/\n  startTransition?: boolean\n  ignoreBlocker?: boolean\n}\n\nexport interface MatchLocation {\n  to?: string | number | null\n  fuzzy?: boolean\n  caseSensitive?: boolean\n  from?: string\n}\n\nexport type NavigateFn = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n    __isRedirect?: boolean\n  },\n) => Promise<void>\n\nexport type BuildLocationFn = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n    leaveParams?: boolean\n  },\n) => ParsedLocation\n\nexport type InjectedHtmlEntry = string | (() => Promise<string> | string)\n\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  // Allow the router to update options on the router instance\n  router.update({\n    ...router.options,\n    ...rest,\n    context: {\n      ...router.options.context,\n      ...rest.context,\n    },\n  } as any)\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router}>{children}</routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: Router<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>\n  >\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":[],"mappings":";;;AA8DO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AAED,SAAO,OAAO;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,OAAO,QAAQ;AAAA,MAClB,GAAG,KAAK;AAAA,IACV;AAAA,EAAA,CACM;AAER,QAAM,gBAAgB;AAEtB,QAAM,WACH,oBAAA,cAAc,UAAd,EAAuB,OAAO,QAAS,SAAS,CAAA;AAG/C,MAAA,OAAO,QAAQ,MAAM;AACvB,WAAQ,oBAAA,OAAO,QAAQ,MAAf,EAAqB,UAAS,SAAA,CAAA;AAAA,EACxC;AAEO,SAAA;AACT;AAEO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,6BACG,uBAAsB,EAAA,QAAiB,GAAG,MACzC,UAAA,oBAAC,UAAQ,CAAA,EACX,CAAA;AAEJ;"}

package/dist/esm/Transitioner.js

@@ -2,6 +2,10 @@ import * as React from "react";
 import { pick, usePrevious, useLayoutEffect } from "./utils.js";
 import { useRouter } from "./useRouter.js";
 import { useRouterState } from "./useRouterState.js";
+import "@tanstack/history";
+import "tiny-invariant";
+import "tiny-warning";
+import { trimPathRight } from "./path.js";
 function Transitioner() {
   const router = useRouter();
   const mountLoadForRouter = React.useRef({ router, mounted: false });
@@ -27,7 +31,7 @@ function Transitioner() {
       hash: true,
       state: true
     });
-    if (router.state.location.href !== nextLocation.href) {
+    if (trimPathRight(router.latestLocation.href) !== trimPathRight(nextLocation.href)) {
       router.commitLocation({ ...nextLocation, replace: true });
     }
     return () => {

package/dist/esm/Transitioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { pick, useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n  const routerState = useRouterState({\n    select: (s) =>\n      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),\n  })\n\n  const [isTransitioning, startReactTransition_] = React.useTransition()\n  // Track pending state changes\n  const hasPendingMatches = useRouterState({\n    select: (s) => s.matches.some((d) => d.status === 'pending'),\n  })\n\n  const previousIsLoading = usePrevious(routerState.isLoading)\n\n  const isAnyPending =\n    routerState.isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  if (!router.isServer) {\n    router.startReactTransition = startReactTransition_\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n    })\n\n    if (router.state.location.href !== nextLocation.href) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      window.__TSR__?.dehydrated ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !routerState.isLoading) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n    }\n  }, [previousIsLoading, router, routerState.isLoading])\n\n  useLayoutEffect(() => {\n    // The router was pending and now it's not\n    if (previousIsAnyPending && !isAnyPending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onResolved',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      router.__store.setState((s) => ({\n        ...s,\n        status: 'idle',\n        resolvedLocation: s.location,\n      }))\n\n      if ((document as any).querySelector) {\n        if (router.state.location.hash !== '') {\n          const el = document.getElementById(router.state.location.hash)\n          if (el) {\n            el.scrollIntoView()\n          }\n        }\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,eAAe;AAC7B,QAAM,SAAS;AACf,QAAM,qBAAqB,MAAM,OAAO,EAAE,QAAQ,SAAS,OAAO;AAClE,QAAM,cAAc,eAAe;AAAA,IACjC,QAAQ,CAAC,MACP,KAAK,GAAG,CAAC,aAAa,YAAY,oBAAoB,iBAAiB,CAAC;AAAA,EAAA,CAC3E;AAED,QAAM,CAAC,iBAAiB,qBAAqB,IAAI,MAAM,cAAc;AAErE,QAAM,oBAAoB,eAAe;AAAA,IACvC,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS;AAAA,EAAA,CAC5D;AAEK,QAAA,oBAAoB,YAAY,YAAY,SAAS;AAErD,QAAA,eACJ,YAAY,aAAa,mBAAmB;AACxC,QAAA,uBAAuB,YAAY,YAAY;AAEjD,MAAA,CAAC,OAAO,UAAU;AACpB,WAAO,uBAAuB;AAAA,EAChC;AAIA,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,IAAI;AAE5C,UAAA,eAAe,OAAO,cAAc;AAAA,MACxC,IAAI,OAAO,eAAe;AAAA,MAC1B,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,CACR;AAED,QAAI,OAAO,MAAM,SAAS,SAAS,aAAa,MAAM;AACpD,aAAO,eAAe,EAAE,GAAG,cAAc,SAAS,MAAM;AAAA,IAC1D;AAEA,WAAO,MAAM;AACL;IAAA;AAAA,EAEP,GAAA,CAAC,QAAQ,OAAO,OAAO,CAAC;AAG3B,kBAAgB,MAAM;;AAElB,UAAA,YAAO,YAAP,mBAAgB,eACf,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,SAC7B;AACA;AAAA,IACF;AACA,uBAAmB,UAAU,EAAE,QAAQ,SAAS,KAAK;AAErD,UAAM,UAAU,YAAY;AACtB,UAAA;AACF,cAAM,OAAO;eACN,KAAK;AACZ,gBAAQ,MAAM,GAAG;AAAA,MACnB;AAAA,IAAA;AAGM;EAAA,GACP,CAAC,MAAM,CAAC;AAEX,kBAAgB,MAAM;AAEhB,QAAA,qBAAqB,CAAC,YAAY,WAAW;AACzC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,KACC,CAAC,mBAAmB,QAAQ,YAAY,SAAS,CAAC;AAErD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACnC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MACpB,EAAA;AAEF,UAAK,SAAiB,eAAe;AACnC,YAAI,OAAO,MAAM,SAAS,SAAS,IAAI;AACrC,gBAAM,KAAK,SAAS,eAAe,OAAO,MAAM,SAAS,IAAI;AAC7D,cAAI,IAAI;AACN,eAAG,eAAe;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACC,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}
+{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { pick, useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport { trimPathRight } from '.'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n  const routerState = useRouterState({\n    select: (s) =>\n      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),\n  })\n\n  const [isTransitioning, startReactTransition_] = React.useTransition()\n  // Track pending state changes\n  const hasPendingMatches = useRouterState({\n    select: (s) => s.matches.some((d) => d.status === 'pending'),\n  })\n\n  const previousIsLoading = usePrevious(routerState.isLoading)\n\n  const isAnyPending =\n    routerState.isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  if (!router.isServer) {\n    router.startReactTransition = startReactTransition_\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n    })\n\n    if (\n      trimPathRight(router.latestLocation.href) !==\n      trimPathRight(nextLocation.href)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      window.__TSR__?.dehydrated ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !routerState.isLoading) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n    }\n  }, [previousIsLoading, router, routerState.isLoading])\n\n  useLayoutEffect(() => {\n    // The router was pending and now it's not\n    if (previousIsAnyPending && !isAnyPending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onResolved',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      router.__store.setState((s) => ({\n        ...s,\n        status: 'idle',\n        resolvedLocation: s.location,\n      }))\n\n      if ((document as any).querySelector) {\n        if (router.state.location.hash !== '') {\n          const el = document.getElementById(router.state.location.hash)\n          if (el) {\n            el.scrollIntoView()\n          }\n        }\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"names":[],"mappings":";;;;;;;;AAMO,SAAS,eAAe;AAC7B,QAAM,SAAS;AACf,QAAM,qBAAqB,MAAM,OAAO,EAAE,QAAQ,SAAS,OAAO;AAClE,QAAM,cAAc,eAAe;AAAA,IACjC,QAAQ,CAAC,MACP,KAAK,GAAG,CAAC,aAAa,YAAY,oBAAoB,iBAAiB,CAAC;AAAA,EAAA,CAC3E;AAED,QAAM,CAAC,iBAAiB,qBAAqB,IAAI,MAAM,cAAc;AAErE,QAAM,oBAAoB,eAAe;AAAA,IACvC,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS;AAAA,EAAA,CAC5D;AAEK,QAAA,oBAAoB,YAAY,YAAY,SAAS;AAErD,QAAA,eACJ,YAAY,aAAa,mBAAmB;AACxC,QAAA,uBAAuB,YAAY,YAAY;AAEjD,MAAA,CAAC,OAAO,UAAU;AACpB,WAAO,uBAAuB;AAAA,EAChC;AAIA,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,IAAI;AAE5C,UAAA,eAAe,OAAO,cAAc;AAAA,MACxC,IAAI,OAAO,eAAe;AAAA,MAC1B,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,CACR;AAGC,QAAA,cAAc,OAAO,eAAe,IAAI,MACxC,cAAc,aAAa,IAAI,GAC/B;AACA,aAAO,eAAe,EAAE,GAAG,cAAc,SAAS,MAAM;AAAA,IAC1D;AAEA,WAAO,MAAM;AACL;IAAA;AAAA,EAEP,GAAA,CAAC,QAAQ,OAAO,OAAO,CAAC;AAG3B,kBAAgB,MAAM;;AAElB,UAAA,YAAO,YAAP,mBAAgB,eACf,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,SAC7B;AACA;AAAA,IACF;AACA,uBAAmB,UAAU,EAAE,QAAQ,SAAS,KAAK;AAErD,UAAM,UAAU,YAAY;AACtB,UAAA;AACF,cAAM,OAAO;eACN,KAAK;AACZ,gBAAQ,MAAM,GAAG;AAAA,MACnB;AAAA,IAAA;AAGM;EAAA,GACP,CAAC,MAAM,CAAC;AAEX,kBAAgB,MAAM;AAEhB,QAAA,qBAAqB,CAAC,YAAY,WAAW;AACzC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,KACC,CAAC,mBAAmB,QAAQ,YAAY,SAAS,CAAC;AAErD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACnC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MACpB,EAAA;AAEF,UAAK,SAAiB,eAAe;AACnC,YAAI,OAAO,MAAM,SAAS,SAAS,IAAI;AACrC,gBAAM,KAAK,SAAS,eAAe,OAAO,MAAM,SAAS,IAAI;AAC7D,cAAI,IAAI;AACN,eAAG,eAAe;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACC,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}

package/dist/esm/index.d.ts

@@ -24,7 +24,7 @@ export { rootRouteId, type RootRouteId } from './root.js';
 export { RouteApi, getRouteApi, Route, createRoute, RootRoute, rootRouteWithContext, createRootRoute, createRootRouteWithContext, createRouteMask, NotFoundRoute, type AnyPathParams, type SearchSchemaInput, type AnySearchSchema, type AnyContext, type RouteContext, type PreloadableObj, type RoutePathOptions, type StaticDataRouteOption, type RoutePathOptionsIntersection, type RouteOptions, type FileBaseRouteOptions, type BaseRouteOptions, type UpdatableRouteOptions, type UpdatableStaticRouteOption, type MetaDescriptor, type RouteLinkEntry, type ParseParamsFn, type SearchSchemaValidator, type SearchSchemaValidatorObj, type SearchSchemaValidatorFn, type RouteLoaderFn, type LoaderFnContext, type SearchFilter, type ResolveId, type InferFullSearchSchema, type InferFullSearchSchemaInput, type ResolveFullSearchSchema, type ResolveFullSearchSchemaInput, type AnyRoute, type RouteConstraints, type AnyRootRoute, type ResolveFullPath, type RouteMask, type ErrorRouteProps, type ErrorComponentProps, type NotFoundRouteProps, type ReactNode, type SyncRouteComponent, type AsyncRouteComponent, type RouteComponent, type ErrorRouteComponent, type NotFoundRouteComponent, type TrimPath, type TrimPathLeft, type TrimPathRight, type RootRouteOptions, type AnyRouteWithContext, } from './route.js';
 export { type ParseRoute, type RoutesById, type RouteById, type RouteIds, type RoutesByPath, type RouteByPath, type RoutePaths, type FullSearchSchema, type AllParams, } from './routeInfo.js';
 export { componentTypes, createRouter, Router, lazyFn, SearchParamError, PathParamError, getInitialRouterState, defaultSerializeError, type Register, type AnyRouter, type RegisteredRouter, type HydrationCtx, type RouterContextOptions, type TrailingSlashOption, type RouterOptions, type RouterTransformer, type RouterErrorSerializer, type RouterState, type ListenerFn, type BuildNextOptions, type DehydratedRouterState, type DehydratedRouteMatch, type DehydratedRouter, type RouterConstructorOptions, type RouterEvents, type RouterEvent, type RouterListener, type AnyRouterWithContext, } from './router.js';
-export { RouterProvider, RouterContextProvider, getRouteMatch, type RouterProps, type CommitLocationOptions, type MatchLocation, type NavigateFn, type BuildLocationFn, type InjectedHtmlEntry, } from './RouterProvider.js';
+export { RouterProvider, RouterContextProvider, type RouterProps, type CommitLocationOptions, type MatchLocation, type NavigateFn, type BuildLocationFn, type InjectedHtmlEntry, } from './RouterProvider.js';
 export { useScrollRestoration, useElementScrollRestoration, ScrollRestoration, type ScrollRestorationOptions, } from './scroll-restoration.js';
 export { defaultParseSearch, defaultStringifySearch, parseSearchWith, stringifySearchWith, type SearchSerializer, type SearchParser, } from './searchParams.js';
 export { useBlocker, Block } from './useBlocker.js';

package/dist/esm/index.js

@@ -21,7 +21,7 @@ import { isRedirect, redirect } from "./redirects.js";
 import { rootRouteId } from "./root.js";
 import { NotFoundRoute, RootRoute, Route, RouteApi, createRootRoute, createRootRouteWithContext, createRoute, createRouteMask, getRouteApi, rootRouteWithContext } from "./route.js";
 import { PathParamError, Router, SearchParamError, componentTypes, createRouter, defaultSerializeError, getInitialRouterState, lazyFn } from "./router.js";
-import { RouterContextProvider, RouterProvider, getRouteMatch } from "./RouterProvider.js";
+import { RouterContextProvider, RouterProvider } from "./RouterProvider.js";
 import { ScrollRestoration, useElementScrollRestoration, useScrollRestoration } from "./scroll-restoration.js";
 import { defaultParseSearch, defaultStringifySearch, parseSearchWith, stringifySearchWith } from "./searchParams.js";
 import { Block, useBlocker } from "./useBlocker.js";
@@ -90,7 +90,6 @@ export {
   functionalUpdate,
   getInitialRouterState,
   getRouteApi,
-  getRouteMatch,
   getRouterContext,
   interpolatePath,
   default2 as invariant,