@tanstack/react-router 0.0.1-beta.260 → 0.0.1-beta.262

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.260",
+  "version": "0.0.1-beta.262",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.260"
+    "@tanstack/history": "0.0.1-beta.262"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/link.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMatch } from './Matches'
-import { useRouter } from './RouterProvider'
+import { useRouter, useRouterState } from './RouterProvider'
 import { Trim } from './fileRoute'
 import { LocationState, ParsedLocation } from './location'
 import { AnyRoute, ReactNode } from './route'
@@ -20,6 +20,7 @@ import {
   PickRequired,
   UnionToIntersection,
   Updater,
+  deepEqual,
   functionalUpdate,
 } from './utils'
 
@@ -352,6 +353,12 @@ export type ResolveRelativePath<TFrom, TTo = '.'> = TFrom extends string
     : never
   : never
 
+type LinkCurrentTargetElement = {
+  preloadTimeout?: null | ReturnType<typeof setTimeout>
+}
+
+const preloadWarning = 'Error preloading route! ☝️'
+
 export function useLinkProps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> = '/',
@@ -361,7 +368,7 @@ export function useLinkProps<
 >(
   options: MakeLinkPropsOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  const { buildLink } = useRouter()
+  const router = useRouter()
   const matchPathname = useMatch({
     strict: false,
     select: (s) => s.pathname,
@@ -369,7 +376,6 @@ export function useLinkProps<
 
   const {
     // custom props
-    type,
     children,
     target,
     activeProps = () => ({ className: 'active' }),
@@ -382,8 +388,8 @@ export function useLinkProps<
     to,
     state,
     mask,
-    preload,
-    preloadDelay,
+    preload: userPreload,
+    preloadDelay: userPreloadDelay,
     replace,
     startTransition,
     resetScroll,
@@ -398,25 +404,122 @@ export function useLinkProps<
     ...rest
   } = options
 
-  const linkInfo = buildLink({
+  // If this link simply reloads the current route,
+  // make sure it has a new key so it will trigger a data refresh
+
+  // If this `to` is a valid external URL, return
+  // null for LinkUtils
+
+  const dest = {
     from: options.to ? matchPathname : undefined,
     ...options,
-  } as any)
+  }
+
+  let type: 'internal' | 'external' = 'internal'
+
+  try {
+    new URL(`${to}`)
+    type = 'external'
+  } catch {}
 
-  if (linkInfo.type === 'external') {
-    const { href } = linkInfo
-    return { href }
+  if (type === 'external') {
+    return {
+      href: to,
+    }
   }
 
-  const {
-    handleClick,
-    handleFocus,
-    handleEnter,
-    handleLeave,
-    handleTouchStart,
-    isActive,
-    next,
-  } = linkInfo
+  const next = router.buildLocation(dest as any)
+
+  const preload = userPreload ?? router.options.defaultPreload
+  const preloadDelay =
+    userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
+
+  const isActive = useRouterState({
+    select: (s) => {
+      // Compare path/hash for matches
+      const currentPathSplit = s.location.pathname.split('/')
+      const nextPathSplit = next.pathname.split('/')
+      const pathIsFuzzyEqual = nextPathSplit.every(
+        (d, i) => d === currentPathSplit[i],
+      )
+      // Combine the matches based on user router.options
+      const pathTest = activeOptions?.exact
+        ? s.location.pathname === next.pathname
+        : pathIsFuzzyEqual
+      const hashTest = activeOptions?.includeHash
+        ? s.location.hash === next.hash
+        : true
+      const searchTest =
+        activeOptions?.includeSearch ?? true
+          ? deepEqual(s.location.search, next.search, true)
+          : true
+
+      // The final "active" test
+      return pathTest && hashTest && searchTest
+    },
+  })
+
+  // The click handler
+  const handleClick = (e: MouseEvent) => {
+    if (
+      !disabled &&
+      !isCtrlEvent(e) &&
+      !e.defaultPrevented &&
+      (!target || target === '_self') &&
+      e.button === 0
+    ) {
+      e.preventDefault()
+
+      // All is well? Navigate!
+      router.commitLocation({ ...next, replace, resetScroll, startTransition })
+    }
+  }
+
+  // The click handler
+  const handleFocus = (e: MouseEvent) => {
+    if (preload) {
+      router.preloadRoute(dest as any).catch((err) => {
+        console.warn(err)
+        console.warn(preloadWarning)
+      })
+    }
+  }
+
+  const handleTouchStart = (e: TouchEvent) => {
+    if (preload) {
+      router.preloadRoute(dest as any).catch((err) => {
+        console.warn(err)
+        console.warn(preloadWarning)
+      })
+    }
+  }
+
+  const handleEnter = (e: MouseEvent) => {
+    const target = (e.target || {}) as LinkCurrentTargetElement
+
+    if (preload) {
+      if (target.preloadTimeout) {
+        return
+      }
+
+      target.preloadTimeout = setTimeout(() => {
+        target.preloadTimeout = null
+        router.preloadRoute(dest as any).catch((err) => {
+          console.warn(err)
+          console.warn(preloadWarning)
+        })
+      }, preloadDelay)
+    }
+  }
+
+  const handleLeave = (e: MouseEvent) => {
+    const target = (e.target || {}) as LinkCurrentTargetElement
+
+    if (target.preloadTimeout) {
+      clearTimeout(target.preloadTimeout)
+      target.preloadTimeout = null
+    }
+  }
 
   const composeHandlers =
     (handlers: (undefined | ((e: any) => void))[]) =>
@@ -507,3 +610,7 @@ export const Link: LinkComponent = React.forwardRef((props: any, ref) => {
     />
   )
 }) as any
+
+function isCtrlEvent(e: MouseEvent) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
+}

package/src/router.ts

@@ -218,12 +218,6 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
   fn: ListenerFn<TRouterEvent>
 }
 
-type LinkCurrentTargetElement = {
-  preloadTimeout?: null | ReturnType<typeof setTimeout>
-}
-
-const preloadWarning = 'Error preloading route! ☝️'
-
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -1003,13 +997,14 @@ export class Router<
       }))
     }
 
-    const abortController = new AbortController()
+    
 
     // Check each match middleware to see if the route can be accessed
     try {
       for (let [index, match] of matches.entries()) {
         const parentMatch = matches[index - 1]
         const route = this.looseRoutesById[match.routeId]!
+        const abortController = new AbortController()
 
         const handleErrorAndRedirect = (err: any, code: string) => {
           err.routerCode = code
@@ -1034,7 +1029,7 @@ export class Router<
             error: err,
             status: 'error',
             updatedAt: Date.now(),
-            abortController,
+            abortController: new AbortController(),
           }
         }
 
@@ -1053,7 +1048,7 @@ export class Router<
           const beforeLoadContext =
             (await route.options.beforeLoad?.({
               search: match.search,
-              abortController: match.abortController,
+              abortController,
               params: match.params,
               preload: !!preload,
               context: parentContext,
@@ -1077,6 +1072,7 @@ export class Router<
           matches[index] = match = {
             ...match,
             context: replaceEqualDeep(match.context, context),
+            abortController,
           }
         } catch (err) {
           handleErrorAndRedirect(err, 'BEFORE_LOAD')
@@ -1435,136 +1431,6 @@ export class Router<
     return matches
   }
 
-  buildLink: BuildLinkFn<TRouteTree> = (dest) => {
-    // If this link simply reloads the current route,
-    // make sure it has a new key so it will trigger a data refresh
-
-    // If this `to` is a valid external URL, return
-    // null for LinkUtils
-
-    const {
-      to,
-      preload: userPreload,
-      preloadDelay: userPreloadDelay,
-      activeOptions,
-      disabled,
-      target,
-      replace,
-      resetScroll,
-      startTransition,
-    } = dest
-
-    try {
-      new URL(`${to}`)
-      return {
-        type: 'external',
-        href: to as any,
-      }
-    } catch (e) {}
-
-    const nextOpts = dest
-    const next = this.buildLocation(nextOpts as any)
-
-    const preload = userPreload ?? this.options.defaultPreload
-    const preloadDelay =
-      userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0
-
-    // Compare path/hash for matches
-    const currentPathSplit = this.latestLocation.pathname.split('/')
-    const nextPathSplit = next.pathname.split('/')
-    const pathIsFuzzyEqual = nextPathSplit.every(
-      (d, i) => d === currentPathSplit[i],
-    )
-    // Combine the matches based on user this.options
-    const pathTest = activeOptions?.exact
-      ? this.latestLocation.pathname === next.pathname
-      : pathIsFuzzyEqual
-    const hashTest = activeOptions?.includeHash
-      ? this.latestLocation.hash === next.hash
-      : true
-    const searchTest =
-      activeOptions?.includeSearch ?? true
-        ? deepEqual(this.latestLocation.search, next.search, true)
-        : true
-
-    // The final "active" test
-    const isActive = pathTest && hashTest && searchTest
-
-    // The click handler
-    const handleClick = (e: MouseEvent) => {
-      if (
-        !disabled &&
-        !isCtrlEvent(e) &&
-        !e.defaultPrevented &&
-        (!target || target === '_self') &&
-        e.button === 0
-      ) {
-        e.preventDefault()
-
-        // All is well? Navigate!
-        this.commitLocation({ ...next, replace, resetScroll, startTransition })
-      }
-    }
-
-    // The click handler
-    const handleFocus = (e: MouseEvent) => {
-      if (preload) {
-        this.preloadRoute(nextOpts as any).catch((err) => {
-          console.warn(err)
-          console.warn(preloadWarning)
-        })
-      }
-    }
-
-    const handleTouchStart = (e: TouchEvent) => {
-      if (preload) {
-        this.preloadRoute(nextOpts as any).catch((err) => {
-          console.warn(err)
-          console.warn(preloadWarning)
-        })
-      }
-    }
-
-    const handleEnter = (e: MouseEvent) => {
-      const target = (e.target || {}) as LinkCurrentTargetElement
-
-      if (preload) {
-        if (target.preloadTimeout) {
-          return
-        }
-
-        target.preloadTimeout = setTimeout(() => {
-          target.preloadTimeout = null
-          this.preloadRoute(nextOpts as any).catch((err) => {
-            console.warn(err)
-            console.warn(preloadWarning)
-          })
-        }, preloadDelay)
-      }
-    }
-
-    const handleLeave = (e: MouseEvent) => {
-      const target = (e.target || {}) as LinkCurrentTargetElement
-
-      if (target.preloadTimeout) {
-        clearTimeout(target.preloadTimeout)
-        target.preloadTimeout = null
-      }
-    }
-
-    return {
-      type: 'internal',
-      next,
-      handleFocus,
-      handleClick,
-      handleEnter,
-      handleLeave,
-      handleTouchStart,
-      isActive,
-      disabled,
-    }
-  }
-
   matchRoute: MatchRouteFn<TRouteTree> = (location, opts) => {
     location = {
       ...location,
@@ -1725,9 +1591,6 @@ export function lazyFn<
   }
 }
 
-function isCtrlEvent(e: MouseEvent) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
-}
 export class SearchParamError extends Error {}
 
 export class PathParamError extends Error {}