@tanstack/react-router 1.31.16 → 1.31.17

package/dist/cjs/RouterProvider.cjs

@@ -145,10 +145,13 @@ function getRouteMatch(state, id) {
 }
 function usePrevious(value) {
   const ref = React__namespace.useRef(value);
-  React__namespace.useEffect(() => {
+  if (ref.current !== value) {
+    const prevValue = ref.current;
     ref.current = value;
-  });
-  return ref.current;
+    return prevValue;
+  } else {
+    return ref.current;
+  }
 }
 exports.RouterContextProvider = RouterContextProvider;
 exports.RouterProvider = RouterProvider;

package/dist/cjs/RouterProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RouterProvider.cjs","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport { Matches } from './Matches'\nimport { pick, useLayoutEffect } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\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}\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) => Promise<void>\n\nexport type BuildLocationFn<TRouteTree extends AnyRoute> = <\n  TTo extends string,\n  TFrom extends RoutePaths<TRouteTree> | string = string,\n  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<\n    Router<TRouteTree, 'never'>,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > & {\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 pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const provider = (\n    <React.Suspense fallback={pendingElement}>\n      <routerContext.Provider value={router}>\n        {children}\n        <Transitioner />\n      </routerContext.Provider>\n    </React.Suspense>\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\nfunction 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  router.startReactTransition = startReactTransition_\n\n  const tryLoad = async () => {\n    try {\n      await router.load()\n    } catch (err) {\n      console.error(err)\n    }\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  useLayoutEffect(() => {\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 (routerState.location.href !== nextLocation.href) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    tryLoad()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      // if (router.viewTransitionPromise) {\n      //   console.log('resolving view transition promise')\n      // }\n\n      // router.viewTransitionPromise?.resolve(true)\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\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\nfunction usePrevious<T>(value: T) {\n  const ref = React.useRef<T>(value)\n  React.useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}\n"],"names":["routerContext","getRouterContext","jsx","React","jsxs","Matches","useRouter","useRouterState","pick","useLayoutEffect"],"mappings":"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"}
+{"version":3,"file":"RouterProvider.cjs","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport { Matches } from './Matches'\nimport { pick, useLayoutEffect } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\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}\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) => Promise<void>\n\nexport type BuildLocationFn<TRouteTree extends AnyRoute> = <\n  TTo extends string,\n  TFrom extends RoutePaths<TRouteTree> | string = string,\n  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<\n    Router<TRouteTree, 'never'>,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > & {\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 pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const provider = (\n    <React.Suspense fallback={pendingElement}>\n      <routerContext.Provider value={router}>\n        {children}\n        <Transitioner />\n      </routerContext.Provider>\n    </React.Suspense>\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\nfunction 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  router.startReactTransition = startReactTransition_\n\n  const tryLoad = async () => {\n    try {\n      await router.load()\n    } catch (err) {\n      console.error(err)\n    }\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  useLayoutEffect(() => {\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 (routerState.location.href !== nextLocation.href) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    tryLoad()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      // if (router.viewTransitionPromise) {\n      //   console.log('resolving view transition promise')\n      // }\n\n      // router.viewTransitionPromise?.resolve(true)\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\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\nfunction usePrevious<T>(value: T): T {\n  const ref = React.useRef<T>(value)\n\n  if (ref.current !== value) {\n    const prevValue = ref.current\n    ref.current = value\n    return prevValue\n  } else {\n    return ref.current\n  }\n}\n"],"names":["routerContext","getRouterContext","jsx","React","jsxs","Matches","useRouter","useRouterState","pick","useLayoutEffect"],"mappings":"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"}

package/dist/esm/RouterProvider.js

@@ -126,10 +126,13 @@ function getRouteMatch(state, id) {
 }
 function usePrevious(value) {
   const ref = React.useRef(value);
-  React.useEffect(() => {
+  if (ref.current !== value) {
+    const prevValue = ref.current;
     ref.current = value;
-  });
-  return ref.current;
+    return prevValue;
+  } else {
+    return ref.current;
+  }
 }
 export {
   RouterContextProvider,

package/dist/esm/RouterProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport { Matches } from './Matches'\nimport { pick, useLayoutEffect } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\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}\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) => Promise<void>\n\nexport type BuildLocationFn<TRouteTree extends AnyRoute> = <\n  TTo extends string,\n  TFrom extends RoutePaths<TRouteTree> | string = string,\n  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<\n    Router<TRouteTree, 'never'>,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > & {\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 pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const provider = (\n    <React.Suspense fallback={pendingElement}>\n      <routerContext.Provider value={router}>\n        {children}\n        <Transitioner />\n      </routerContext.Provider>\n    </React.Suspense>\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\nfunction 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  router.startReactTransition = startReactTransition_\n\n  const tryLoad = async () => {\n    try {\n      await router.load()\n    } catch (err) {\n      console.error(err)\n    }\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  useLayoutEffect(() => {\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 (routerState.location.href !== nextLocation.href) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    tryLoad()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      // if (router.viewTransitionPromise) {\n      //   console.log('resolving view transition promise')\n      // }\n\n      // router.viewTransitionPromise?.resolve(true)\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\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\nfunction usePrevious<T>(value: T) {\n  const ref = React.useRef<T>(value)\n  React.useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport { Matches } from './Matches'\nimport { pick, useLayoutEffect } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\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}\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) => Promise<void>\n\nexport type BuildLocationFn<TRouteTree extends AnyRoute> = <\n  TTo extends string,\n  TFrom extends RoutePaths<TRouteTree> | string = string,\n  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,\n  TMaskTo extends string = '',\n>(\n  opts: ToOptions<\n    Router<TRouteTree, 'never'>,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > & {\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 pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  const provider = (\n    <React.Suspense fallback={pendingElement}>\n      <routerContext.Provider value={router}>\n        {children}\n        <Transitioner />\n      </routerContext.Provider>\n    </React.Suspense>\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\nfunction 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  router.startReactTransition = startReactTransition_\n\n  const tryLoad = async () => {\n    try {\n      await router.load()\n    } catch (err) {\n      console.error(err)\n    }\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  useLayoutEffect(() => {\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 (routerState.location.href !== nextLocation.href) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    tryLoad()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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',\n        fromLocation,\n        toLocation,\n        pathChanged,\n      })\n\n      // if (router.viewTransitionPromise) {\n      //   console.log('resolving view transition promise')\n      // }\n\n      // router.viewTransitionPromise?.resolve(true)\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\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\nfunction usePrevious<T>(value: T): T {\n  const ref = React.useRef<T>(value)\n\n  if (ref.current !== value) {\n    const prevValue = ref.current\n    ref.current = value\n    return prevValue\n  } else {\n    return ref.current\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.31.16",
+  "version": "1.31.17",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/RouterProvider.tsx

@@ -276,10 +276,14 @@ export type RouterProps<
   >
 }
 
-function usePrevious<T>(value: T) {
+function usePrevious<T>(value: T): T {
   const ref = React.useRef<T>(value)
-  React.useEffect(() => {
+
+  if (ref.current !== value) {
+    const prevValue = ref.current
     ref.current = value
-  })
-  return ref.current
+    return prevValue
+  } else {
+    return ref.current
+  }
 }