@tanstack/react-router 1.127.9 → 1.128.0

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,
@@ -83,8 +74,10 @@ export function useLinkProps<
     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
@@ -94,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'
@@ -106,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,
@@ -146,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
         }
@@ -177,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) => {
@@ -196,11 +221,11 @@ export function useLinkProps<
   useIntersectionObserver(
     innerRef,
     preloadViewportIoCallback,
-    { rootMargin: '100px' },
+    intersectionObserverOptions,
     { disabled: !!disabled || !(preload === 'viewport') },
   )
 
-  useLayoutEffect(() => {
+  React.useEffect(() => {
     if (hasRenderFetched.current) {
       return
     }
@@ -210,7 +235,7 @@ export function useLinkProps<
     }
   }, [disabled, doPreload, preload])
 
-  if (type === 'external') {
+  if (isExternal) {
     return {
       ...propsSafeToSpread,
       ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
@@ -230,7 +255,7 @@ export function useLinkProps<
   }
 
   // The click handler
-  const handleClick = (e: MouseEvent) => {
+  const handleClick = (e: React.MouseEvent) => {
     if (
       !disabled &&
       !isCtrlEvent(e) &&
@@ -253,6 +278,7 @@ export function useLinkProps<
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
       return router.navigate({
         ...options,
+        from,
         replace,
         resetScroll,
         hashScrollIntoView,
@@ -264,7 +290,7 @@ export function useLinkProps<
   }
 
   // The click handler
-  const handleFocus = (_: MouseEvent) => {
+  const handleFocus = (_: React.MouseEvent) => {
     if (disabled) return
     if (preload) {
       doPreload()
@@ -273,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,
@@ -330,7 +346,9 @@ export function useLinkProps<
     .filter(Boolean)
     .join(' ')
 
-  const resolvedStyle = {
+  const resolvedStyle = (style ||
+    resolvedActiveProps.style ||
+    resolvedInactiveProps.style) && {
     ...style,
     ...resolvedActiveProps.style,
     ...resolvedInactiveProps.style,
@@ -353,17 +371,35 @@ 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<
@@ -516,7 +552,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
@@ -533,7 +569,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/utils.ts

@@ -69,34 +69,26 @@ export function useIntersectionObserver<T extends Element>(
   callback: (entry: IntersectionObserverEntry | undefined) => void,
   intersectionObserverOptions: IntersectionObserverInit = {},
   options: { disabled?: boolean } = {},
-): IntersectionObserver | null {
-  const isIntersectionObserverAvailable = React.useRef(
-    typeof IntersectionObserver === 'function',
-  )
-
-  const observerRef = React.useRef<IntersectionObserver | null>(null)
-
+) {
   React.useEffect(() => {
     if (
       !ref.current ||
-      !isIntersectionObserverAvailable.current ||
-      options.disabled
+      options.disabled ||
+      typeof IntersectionObserver !== 'function'
     ) {
       return
     }
 
-    observerRef.current = new IntersectionObserver(([entry]) => {
+    const observer = new IntersectionObserver(([entry]) => {
       callback(entry)
     }, intersectionObserverOptions)
 
-    observerRef.current.observe(ref.current)
+    observer.observe(ref.current)
 
     return () => {
-      observerRef.current?.disconnect()
+      observer.disconnect()
     }
   }, [callback, intersectionObserverOptions, options.disabled, ref])
-
-  return observerRef.current
 }
 
 /**