@tanstack/react-router 1.76.1 → 1.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.76.1",
+  "version": "1.77.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/link.tsx

@@ -9,6 +9,7 @@ import {
   functionalUpdate,
   useForwardedRef,
   useIntersectionObserver,
+  useLayoutEffect,
 } from './utils'
 import { exactPathTest, removeTrailingSlash } from './path'
 import type { ParsedLocation } from './location'
@@ -497,7 +498,7 @@ export interface LinkOptionsProps {
    * - `'intent'` - Preload the linked route on hover and cache it for this many milliseconds in hopes that the user will eventually navigate there.
    * - `'viewport'` - Preload the linked route when it enters the viewport
    */
-  preload?: false | 'intent' | 'viewport'
+  preload?: false | 'intent' | 'viewport' | 'render'
   /**
    * When a preload strategy is set, this delays the preload by this many milliseconds.
    * If the user exits the link before this delay, the preload will be cancelled.
@@ -589,6 +590,7 @@ export function useLinkProps<
 ): React.ComponentPropsWithRef<'a'> {
   const router = useRouter()
   const [isTransitioning, setIsTransitioning] = React.useState(false)
+  const hasRenderFetched = React.useRef(false)
   const innerRef = useForwardedRef(forwardedRef)
 
   const {
@@ -722,9 +724,19 @@ export function useLinkProps<
     innerRef,
     preloadViewportIoCallback,
     { rootMargin: '100px' },
-    { disabled: !!disabled || preload !== 'viewport' },
+    { disabled: !!disabled || !(preload === 'viewport') },
   )
 
+  useLayoutEffect(() => {
+    if (hasRenderFetched.current) {
+      return
+    }
+    if (!disabled && preload === 'render') {
+      doPreload()
+      hasRenderFetched.current = true
+    }
+  }, [disabled, doPreload, preload])
+
   if (type === 'external') {
     return {
       ...propsSafeToSpread,

package/src/path.ts

@@ -87,6 +87,7 @@ interface ResolvePathOptions {
   base: string
   to: string
   trailingSlash?: 'always' | 'never' | 'preserve'
+  caseSensitive?: boolean
 }
 
 export function resolvePath({
@@ -94,9 +95,10 @@ export function resolvePath({
   base,
   to,
   trailingSlash = 'never',
+  caseSensitive,
 }: ResolvePathOptions) {
-  base = removeBasepath(basepath, base)
-  to = removeBasepath(basepath, to)
+  base = removeBasepath(basepath, base, caseSensitive)
+  to = removeBasepath(basepath, to, caseSensitive)
 
   let baseSegments = parsePathname(base)
   const toSegments = parsePathname(to)
@@ -260,15 +262,23 @@ export function matchPathname(
   return pathParams ?? {}
 }
 
-export function removeBasepath(basepath: string, pathname: string) {
+export function removeBasepath(
+  basepath: string,
+  pathname: string,
+  caseSensitive: boolean = false,
+) {
+  // normalize basepath and pathname for case-insensitive comparison if needed
+  const normalizedBasepath = caseSensitive ? basepath : basepath.toLowerCase()
+  const normalizedPathname = caseSensitive ? pathname : pathname.toLowerCase()
+
   switch (true) {
     // default behaviour is to serve app from the root - pathname
     // left untouched
-    case basepath === '/':
+    case normalizedBasepath === '/':
       return pathname
 
-    // shortcut for removing the basepath from the equal pathname
-    case pathname === basepath:
+    // shortcut for removing the basepath if it matches the pathname
+    case normalizedPathname === normalizedBasepath:
       return ''
 
     // in case pathname is shorter than basepath - there is
@@ -280,11 +290,11 @@ export function removeBasepath(basepath: string, pathname: string) {
     // earlier, otherwise, basepath separated from pathname with
     // separator, therefore lack of separator means partial
     // segment match (`/app` should not match `/application`)
-    case pathname[basepath.length] !== '/':
+    case normalizedPathname[normalizedBasepath.length] !== '/':
       return pathname
 
-    // remove the basepath from the pathname in case there is any
-    case pathname.startsWith(basepath):
+    // remove the basepath from the pathname if it starts with it
+    case normalizedPathname.startsWith(normalizedBasepath):
       return pathname.slice(basepath.length)
 
     // otherwise, return the pathname as is
@@ -303,9 +313,13 @@ export function matchByPath(
     return undefined
   }
   // Remove the base path from the pathname
-  from = removeBasepath(basepath, from)
+  from = removeBasepath(basepath, from, matchLocation.caseSensitive)
   // Default to to $ (wildcard)
-  const to = removeBasepath(basepath, `${matchLocation.to ?? '$'}`)
+  const to = removeBasepath(
+    basepath,
+    `${matchLocation.to ?? '$'}`,
+    matchLocation.caseSensitive,
+  )
 
   // Parse the from and to
   const baseSegments = parsePathname(from)

package/src/router.ts

@@ -211,7 +211,7 @@ export interface RouterOptions<
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultpreload-property)
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/preloading)
    */
-  defaultPreload?: false | 'intent' | 'viewport'
+  defaultPreload?: false | 'intent' | 'viewport' | 'render'
   /**
    * The delay in milliseconds that a route must be hovered over or touched before it is preloaded.
    *
@@ -722,6 +722,7 @@ export class Router<
       defaultPendingMinMs: 500,
       context: undefined!,
       ...options,
+      caseSensitive: options.caseSensitive ?? false,
       notFoundMode: options.notFoundMode ?? 'fuzzy',
       stringifySearch: options.stringifySearch ?? defaultStringifySearch,
       parseSearch: options.parseSearch ?? defaultParseSearch,
@@ -1007,6 +1008,7 @@ export class Router<
       base: from,
       to: cleanPath(path),
       trailingSlash: this.options.trailingSlash,
+      caseSensitive: this.options.caseSensitive,
     })
     return resolvedPath
   }
@@ -1620,7 +1622,7 @@ export class Router<
         })
 
         if (foundMask) {
-          const { from, ...maskProps } = foundMask
+          const { from: _from, ...maskProps } = foundMask
           maskedDest = {
             ...pick(opts, ['from']),
             ...maskProps,