@tanstack/react-router 1.121.0-alpha.22 → 1.121.0-alpha.28

package/src/index.tsx

@@ -1,6 +1,3 @@
-export { default as invariant } from 'tiny-invariant'
-export { default as warning } from 'tiny-warning'
-
 export {
   defer,
   TSR_DEFERRED_PROMISE,
@@ -24,14 +21,12 @@ export {
   defaultStringifySearch,
   parseSearchWith,
   stringifySearchWith,
-  escapeJSON, // SSR
   pick,
   functionalUpdate,
   replaceEqualDeep,
   isPlainObject,
   isPlainArray,
   deepEqual,
-  shallow,
   createControlledPromise,
   retainSearchParams,
   stripSearchParams,
@@ -39,12 +34,6 @@ export {
 
 export type {
   AnyRoute,
-  StartSerializer,
-  Serializable,
-  SerializerParse,
-  SerializerParseBy,
-  SerializerStringify,
-  SerializerStringifyBy,
   DeferredPromiseState,
   DeferredPromise,
   ParsedLocation,
@@ -92,10 +81,6 @@ export type {
   SearchSerializer,
   SearchParser,
   TrailingSlashOption,
-  ExtractedEntry,
-  ExtractedStream,
-  ExtractedPromise,
-  StreamState,
   Manifest,
   RouterManagedTag,
   ControlledPromise,
@@ -124,12 +109,9 @@ export type {
   FileRoutesByPath,
   RouteById,
   RootRouteOptions,
-  SerializerExtensions,
   CreateFileRoute,
 } from '@tanstack/router-core'
 
-export type * from './serializer'
-
 export {
   createHistory,
   createBrowserHistory,
@@ -203,6 +185,7 @@ export type {
   UseNavigateResult,
   AnyRedirect,
   Redirect,
+  RedirectOptions,
   ResolvedRedirect,
   MakeRouteMatch,
   MakeRouteMatchUnion,
@@ -226,7 +209,6 @@ export type {
   ControllablePromise,
   InjectedHtmlEntry,
   RouterOptions,
-  RouterErrorSerializer,
   RouterState,
   ListenerFn,
   BuildNextOptions,
@@ -282,12 +264,12 @@ export {
 } from './route'
 export type {
   AnyRootRoute,
-  ReactNode,
-  SyncRouteComponent,
   AsyncRouteComponent,
   RouteComponent,
   ErrorRouteComponent,
   NotFoundRouteComponent,
+  DefaultRouteTypes,
+  RouteTypes,
 } from './route'
 
 export { createRouter, Router } from './router'

package/src/lazyRouteComponent.tsx

@@ -1,32 +1,13 @@
 import * as React from 'react'
-import { Outlet } from './Match'
-import { ClientOnly } from './ClientOnly'
+import { isModuleNotFoundError } from '@tanstack/router-core'
 import type { AsyncRouteComponent } from './route'
 
-// If the load fails due to module not found, it may mean a new version of
-// the build was deployed and the user's browser is still using an old version.
-// If this happens, the old version in the user's browser would have an outdated
-// URL to the lazy module.
-// In that case, we want to attempt one window refresh to get the latest.
-function isModuleNotFoundError(error: any): boolean {
-  // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
-  // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
-  // safari: "Importing a module script failed."
-  if (typeof error?.message !== 'string') return false
-  return (
-    error.message.startsWith('Failed to fetch dynamically imported module') ||
-    error.message.startsWith('error loading dynamically imported module') ||
-    error.message.startsWith('Importing a module script failed')
-  )
-}
-
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',
 >(
   importer: () => Promise<T>,
   exportName?: TKey,
-  ssr?: () => boolean,
 ): T[TKey] extends (props: infer TProps) => any
   ? AsyncRouteComponent<TProps>
   : never {
@@ -36,10 +17,6 @@ export function lazyRouteComponent<
   let reload: boolean
 
   const load = () => {
-    if (typeof document === 'undefined' && ssr?.() === false) {
-      comp = (() => null) as any
-      return Promise.resolve()
-    }
     if (!loadPromise) {
       loadPromise = importer()
         .then((res) => {
@@ -51,6 +28,11 @@ export function lazyRouteComponent<
           // there's nothing we want to do about module not found during preload.
           // Record the error, the rest is handled during the render path.
           error = err
+          // If the load fails due to module not found, it may mean a new version of
+          // the build was deployed and the user's browser is still using an old version.
+          // If this happens, the old version in the user's browser would have an outdated
+          // URL to the lazy module.
+          // In that case, we want to attempt one window refresh to get the latest.
           if (isModuleNotFoundError(error)) {
             if (
               error instanceof Error &&
@@ -91,13 +73,6 @@ export function lazyRouteComponent<
       throw load()
     }
 
-    if (ssr?.() === false) {
-      return (
-        <ClientOnly fallback={<Outlet />}>
-          {React.createElement(comp, props)}
-        </ClientOnly>
-      )
-    }
     return React.createElement(comp, props)
   }
 

package/src/link.tsx

@@ -10,17 +10,12 @@ import {
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
-import {
-  useForwardedRef,
-  useIntersectionObserver,
-  useLayoutEffect,
-} from './utils'
+import { useForwardedRef, useIntersectionObserver } from './utils'
 
 import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   Constrain,
-  LinkCurrentTargetElement,
   LinkOptions,
   RegisteredRouter,
   RoutePaths,
@@ -48,8 +43,8 @@ export function useLinkProps<
 
   const {
     // custom props
-    activeProps = () => ({ className: 'active' }),
-    inactiveProps = () => ({}),
+    activeProps,
+    inactiveProps,
     activeOptions,
     to,
     preload: userPreload,
@@ -71,10 +66,6 @@ export function useLinkProps<
     onMouseLeave,
     onTouchStart,
     ignoreBlocker,
-    ...rest
-  } = options
-
-  const {
     // prevent these from being returned
     params: _params,
     search: _search,
@@ -82,8 +73,11 @@ export function useLinkProps<
     state: _state,
     mask: _mask,
     reloadDocument: _reloadDocument,
+    unsafeRelative: _unsafeRelative,
+    from: _from,
+    _fromLocation,
     ...propsSafeToSpread
-  } = rest
+  } = options
 
   // If this link simply reloads the current route,
   // make sure it has a new key so it will trigger a data refresh
@@ -93,7 +87,7 @@ export function useLinkProps<
 
   const type: 'internal' | 'external' = React.useMemo(() => {
     try {
-      new URL(`${to}`)
+      new URL(to as any)
       return 'external'
     } catch {}
     return 'internal'
@@ -105,33 +99,41 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const nearestFrom = useMatch({
+  const from = useMatch({
     strict: false,
-    select: (match) => match.fullPath,
+    select: (match) => options.from ?? match.fullPath,
   })
 
-  const from = options.from ?? nearestFrom
-
-  // Use it as the default `from` location
-  options = { ...options, from }
-
   const next = React.useMemo(
-    () => router.buildLocation(options as any),
+    () => router.buildLocation({ ...options, from } as any),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router, options, currentSearch],
+    [
+      router,
+      currentSearch,
+      options._fromLocation,
+      from,
+      options.hash,
+      options.to,
+      options.search,
+      options.params,
+      options.state,
+      options.mask,
+      options.unsafeRelative,
+    ],
   )
 
-  const preload = React.useMemo(() => {
-    if (options.reloadDocument) {
-      return false
-    }
-    return userPreload ?? router.options.defaultPreload
-  }, [router.options.defaultPreload, userPreload, options.reloadDocument])
+  const isExternal = type === 'external'
+
+  const preload =
+    options.reloadDocument || isExternal
+      ? false
+      : (userPreload ?? router.options.defaultPreload)
   const preloadDelay =
     userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
 
   const isActive = useRouterState({
     select: (s) => {
+      if (isExternal) return false
       if (activeOptions?.exact) {
         const testExact = exactPathTest(
           s.location.pathname,
@@ -145,15 +147,17 @@ export function useLinkProps<
         const currentPathSplit = removeTrailingSlash(
           s.location.pathname,
           router.basepath,
-        ).split('/')
+        )
         const nextPathSplit = removeTrailingSlash(
           next.pathname,
           router.basepath,
-        ).split('/')
-
-        const pathIsFuzzyEqual = nextPathSplit.every(
-          (d, i) => d === currentPathSplit[i],
         )
+
+        const pathIsFuzzyEqual =
+          currentPathSplit.startsWith(nextPathSplit) &&
+          (currentPathSplit.length === nextPathSplit.length ||
+            currentPathSplit[nextPathSplit.length] === '/')
+
         if (!pathIsFuzzyEqual) {
           return false
         }
@@ -176,12 +180,34 @@ export function useLinkProps<
     },
   })
 
-  const doPreload = React.useCallback(() => {
-    router.preloadRoute(options as any).catch((err) => {
-      console.warn(err)
-      console.warn(preloadWarning)
-    })
-  }, [options, router])
+  const doPreload = React.useCallback(
+    () => {
+      router.preloadRoute({ ...options, from } as any).catch((err) => {
+        console.warn(err)
+        console.warn(preloadWarning)
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      router,
+      options.to,
+      options._fromLocation,
+      from,
+      options.search,
+      options.hash,
+      options.params,
+      options.state,
+      options.mask,
+      options.unsafeRelative,
+      options.hashScrollIntoView,
+      options.href,
+      options.ignoreBlocker,
+      options.reloadDocument,
+      options.replace,
+      options.resetScroll,
+      options.viewTransition,
+    ],
+  )
 
   const preloadViewportIoCallback = React.useCallback(
     (entry: IntersectionObserverEntry | undefined) => {
@@ -195,11 +221,11 @@ export function useLinkProps<
   useIntersectionObserver(
     innerRef,
     preloadViewportIoCallback,
-    { rootMargin: '100px' },
+    intersectionObserverOptions,
     { disabled: !!disabled || !(preload === 'viewport') },
   )
 
-  useLayoutEffect(() => {
+  React.useEffect(() => {
     if (hasRenderFetched.current) {
       return
     }
@@ -209,7 +235,7 @@ export function useLinkProps<
     }
   }, [disabled, doPreload, preload])
 
-  if (type === 'external') {
+  if (isExternal) {
     return {
       ...propsSafeToSpread,
       ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
@@ -229,7 +255,7 @@ export function useLinkProps<
   }
 
   // The click handler
-  const handleClick = (e: MouseEvent) => {
+  const handleClick = (e: React.MouseEvent) => {
     if (
       !disabled &&
       !isCtrlEvent(e) &&
@@ -250,8 +276,9 @@ export function useLinkProps<
 
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
-      return router.navigate({
+      router.navigate({
         ...options,
+        from,
         replace,
         resetScroll,
         hashScrollIntoView,
@@ -263,7 +290,7 @@ export function useLinkProps<
   }
 
   // The click handler
-  const handleFocus = (_: MouseEvent) => {
+  const handleFocus = (_: React.MouseEvent) => {
     if (disabled) return
     if (preload) {
       doPreload()
@@ -272,54 +299,44 @@ export function useLinkProps<
 
   const handleTouchStart = handleFocus
 
-  const handleEnter = (e: MouseEvent) => {
-    if (disabled) return
-    const eventTarget = (e.target || {}) as LinkCurrentTargetElement
+  const handleEnter = (e: React.MouseEvent) => {
+    if (disabled || !preload) return
 
-    if (preload) {
-      if (eventTarget.preloadTimeout) {
+    if (!preloadDelay) {
+      doPreload()
+    } else {
+      const eventTarget = e.target
+      if (timeoutMap.has(eventTarget)) {
         return
       }
-
-      if (!preloadDelay) {
+      const id = setTimeout(() => {
+        timeoutMap.delete(eventTarget)
         doPreload()
-      } else {
-        eventTarget.preloadTimeout = setTimeout(() => {
-          eventTarget.preloadTimeout = null
-          doPreload()
-        }, preloadDelay)
-      }
+      }, preloadDelay)
+      timeoutMap.set(eventTarget, id)
     }
   }
 
-  const handleLeave = (e: MouseEvent) => {
-    if (disabled) return
-    const eventTarget = (e.target || {}) as LinkCurrentTargetElement
-
-    if (eventTarget.preloadTimeout) {
-      clearTimeout(eventTarget.preloadTimeout)
-      eventTarget.preloadTimeout = null
+  const handleLeave = (e: React.MouseEvent) => {
+    if (disabled || !preload || !preloadDelay) return
+    const eventTarget = e.target
+    const id = timeoutMap.get(eventTarget)
+    if (id) {
+      clearTimeout(id)
+      timeoutMap.delete(eventTarget)
     }
   }
 
-  const composeHandlers =
-    (handlers: Array<undefined | ((e: any) => void)>) =>
-    (e: { persist?: () => void; defaultPrevented: boolean }) => {
-      e.persist?.()
-      handlers.filter(Boolean).forEach((handler) => {
-        if (e.defaultPrevented) return
-        handler!(e)
-      })
-    }
-
   // Get the active props
   const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive
-    ? (functionalUpdate(activeProps as any, {}) ?? {})
-    : {}
+    ? (functionalUpdate(activeProps as any, {}) ?? STATIC_ACTIVE_OBJECT)
+    : STATIC_EMPTY_OBJECT
 
   // Get the inactive props
   const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-    isActive ? {} : functionalUpdate(inactiveProps, {})
+    isActive
+      ? STATIC_EMPTY_OBJECT
+      : (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT)
 
   const resolvedClassName = [
     className,
@@ -329,7 +346,9 @@ export function useLinkProps<
     .filter(Boolean)
     .join(' ')
 
-  const resolvedStyle = {
+  const resolvedStyle = (style ||
+    resolvedActiveProps.style ||
+    resolvedInactiveProps.style) && {
     ...style,
     ...resolvedActiveProps.style,
     ...resolvedInactiveProps.style,
@@ -352,29 +371,41 @@ export function useLinkProps<
     onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
     disabled: !!disabled,
     target,
-    ...(Object.keys(resolvedStyle).length && { style: resolvedStyle }),
+    ...(resolvedStyle && { style: resolvedStyle }),
     ...(resolvedClassName && { className: resolvedClassName }),
-    ...(disabled && {
-      role: 'link',
-      'aria-disabled': true,
-    }),
-    ...(isActive && { 'data-status': 'active', 'aria-current': 'page' }),
-    ...(isTransitioning && { 'data-transitioning': 'transitioning' }),
+    ...(disabled && STATIC_DISABLED_PROPS),
+    ...(isActive && STATIC_ACTIVE_PROPS),
+    ...(isTransitioning && STATIC_TRANSITIONING_PROPS),
   }
 }
 
+const STATIC_EMPTY_OBJECT = {}
+const STATIC_ACTIVE_OBJECT = { className: 'active' }
+const STATIC_DISABLED_PROPS = { role: 'link', 'aria-disabled': true }
+const STATIC_ACTIVE_PROPS = { 'data-status': 'active', 'aria-current': 'page' }
+const STATIC_TRANSITIONING_PROPS = { 'data-transitioning': 'transitioning' }
+
+const timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>()
+
+const intersectionObserverOptions: IntersectionObserverInit = {
+  rootMargin: '100px',
+}
+
+const composeHandlers =
+  (handlers: Array<undefined | React.EventHandler<any>>) =>
+  (e: React.SyntheticEvent) => {
+    handlers.filter(Boolean).forEach((handler) => {
+      if (e.defaultPrevented) return
+      handler!(e)
+    })
+  }
+
 type UseLinkReactProps<TComp> = TComp extends keyof React.JSX.IntrinsicElements
   ? React.JSX.IntrinsicElements[TComp]
-  : React.PropsWithoutRef<
-      TComp extends React.ComponentType<infer TProps> ? TProps : never
-    > &
-      React.RefAttributes<
-        TComp extends
-          | React.FC<{ ref: React.Ref<infer TRef> }>
-          | React.Component<{ ref: React.Ref<infer TRef> }>
-          ? TRef
-          : never
-      >
+  : TComp extends React.ComponentType<any>
+    ? React.ComponentPropsWithoutRef<TComp> &
+        React.RefAttributes<React.ComponentRef<TComp>>
+    : never
 
 export type UseLinkPropsOptions<
   TRouter extends AnyRouter = RegisteredRouter,
@@ -515,7 +546,7 @@ export const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(
           })
         : rest.children
 
-    if (typeof _asChild === 'undefined') {
+    if (_asChild === undefined) {
       // the ReturnType of useLinkProps returns the correct type for a <a> element, not a general component that has a disabled prop
       // @ts-expect-error
       delete linkProps.disabled
@@ -532,7 +563,7 @@ export const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(
   },
 ) as any
 
-function isCtrlEvent(e: MouseEvent) {
+function isCtrlEvent(e: React.MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
 

package/src/not-found.tsx

@@ -25,7 +25,7 @@ export function CatchNotFound(props: {
           throw error
         }
       }}
-      errorComponent={({ error }: { error: Error }) => {
+      errorComponent={({ error }) => {
         if (isNotFound(error)) {
           return props.fallback?.(error)
         } else {

package/src/route.tsx

@@ -54,6 +54,14 @@ declare module '@tanstack/router-core' {
     pendingComponent?: RouteComponent
   }
 
+  export interface RootRouteOptionsExtensions {
+    shellComponent?: ({
+      children,
+    }: {
+      children: React.ReactNode
+    }) => React.ReactNode
+  }
+
   export interface RouteExtensions<
     in out TId extends string,
     in out TFullPath extends string,
@@ -534,21 +542,22 @@ export function createRouteMask<
   return opts as any
 }
 
-export type ReactNode = any
-
-export type SyncRouteComponent<TProps> =
-  | ((props: TProps) => ReactNode)
-  | React.LazyExoticComponent<(props: TProps) => ReactNode>
+export interface DefaultRouteTypes<TProps> {
+  component:
+    | ((props: TProps) => any)
+    | React.LazyExoticComponent<(props: TProps) => any>
+}
+export interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}
 
-export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+export type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {
   preload?: () => Promise<void>
 }
 
-export type RouteComponent<TProps = any> = AsyncRouteComponent<TProps>
+export type RouteComponent = AsyncRouteComponent<{}>
 
-export type ErrorRouteComponent = RouteComponent<ErrorComponentProps>
+export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>
 
-export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>
+export type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']
 
 export class NotFoundRoute<
   TParentRoute extends AnyRootRoute,

package/src/scroll-restoration.tsx

@@ -14,16 +14,23 @@ export function ScrollRestoration() {
   const resolvedKey =
     userKey !== defaultGetScrollRestorationKey(router.latestLocation)
       ? userKey
-      : null
+      : undefined
 
   if (!router.isScrollRestoring || !router.isServer) {
     return null
   }
 
+  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+    storageKey,
+    shouldScrollRestoration: true,
+  }
+  if (resolvedKey) {
+    restoreScrollOptions.key = resolvedKey
+  }
+
   return (
     <ScriptOnce
-      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
-      log={false}
+      children={`(${restoreScroll.toString()})(${JSON.stringify(restoreScrollOptions)})`}
     />
   )
 }

package/src/ssr/RouterClient.tsx

@@ -0,0 +1,22 @@
+import { hydrate } from '@tanstack/router-core/ssr/client'
+import { Await } from '../awaited'
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+
+let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
+
+export function RouterClient(props: { router: AnyRouter }) {
+  if (!hydrationPromise) {
+    if (!props.router.state.matches.length) {
+      hydrationPromise = hydrate(props.router)
+    } else {
+      hydrationPromise = Promise.resolve()
+    }
+  }
+  return (
+    <Await
+      promise={hydrationPromise}
+      children={() => <RouterProvider router={props.router} />}
+    />
+  )
+}

package/src/ssr/RouterServer.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export function RouterServer<TRouter extends AnyRouter>(props: {
+  router: TRouter
+}) {
+  return <RouterProvider router={props.router} />
+}

package/src/ssr/client.ts

@@ -0,0 +1,2 @@
+export { RouterClient } from './RouterClient'
+export * from '@tanstack/router-core/ssr/client'

package/src/ssr/defaultRenderHandler.tsx

@@ -0,0 +1,12 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { renderRouterToString } from './renderRouterToString'
+import { RouterServer } from './RouterServer'
+
+export const defaultRenderHandler = defineHandlerCallback(
+  ({ router, responseHeaders }) =>
+    renderRouterToString({
+      router,
+      responseHeaders,
+      children: <RouterServer router={router} />,
+    }),
+)