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

package/build/esm/index.js

@@ -1032,17 +1032,15 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const preloadWarning = 'Error preloading route! ☝️';
 function useLinkProps(options) {
-  const {
-    buildLink
-  } = useRouter();
+  const router = useRouter();
   const matchPathname = useMatch({
     strict: false,
     select: s => s.pathname
   });
   const {
     // custom props
-    type,
     children,
     target,
     activeProps = () => ({
@@ -1057,8 +1055,8 @@ function useLinkProps(options) {
     to,
     state,
     mask,
-    preload,
-    preloadDelay,
+    preload: userPreload,
+    preloadDelay: userPreloadDelay,
     replace,
     startTransition,
     resetScroll,
@@ -1072,27 +1070,100 @@ function useLinkProps(options) {
     onTouchStart,
     ...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
-  });
-  if (linkInfo.type === 'external') {
-    const {
-      href
-    } = linkInfo;
+  };
+  let type = 'internal';
+  try {
+    new URL(`${to}`);
+    type = 'external';
+  } catch {}
+  if (type === 'external') {
     return {
-      href
+      href: to
     };
   }
-  const {
-    handleClick,
-    handleFocus,
-    handleEnter,
-    handleLeave,
-    handleTouchStart,
-    isActive,
-    next
-  } = linkInfo;
+  const next = router.buildLocation(dest);
+  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 => {
+    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 => {
+    if (preload) {
+      router.preloadRoute(dest).catch(err => {
+        console.warn(err);
+        console.warn(preloadWarning);
+      });
+    }
+  };
+  const handleTouchStart = e => {
+    if (preload) {
+      router.preloadRoute(dest).catch(err => {
+        console.warn(err);
+        console.warn(preloadWarning);
+      });
+    }
+  };
+  const handleEnter = e => {
+    const target = e.target || {};
+    if (preload) {
+      if (target.preloadTimeout) {
+        return;
+      }
+      target.preloadTimeout = setTimeout(() => {
+        target.preloadTimeout = null;
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }, preloadDelay);
+    }
+  };
+  const handleLeave = e => {
+    const target = e.target || {};
+    if (target.preloadTimeout) {
+      clearTimeout(target.preloadTimeout);
+      target.preloadTimeout = null;
+    }
+  };
   const composeHandlers = handlers => e => {
     if (e.persist) e.persist();
     handlers.filter(Boolean).forEach(handler => {
@@ -1140,6 +1211,9 @@ const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
     }) : props.children
   }));
 });
+function isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
 
 // @ts-nocheck
 
@@ -1269,7 +1343,6 @@ function stringifySearchWith(stringify, parser) {
 //
 
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-const preloadWarning = 'Error preloading route! ☝️';
 class Router {
   // Option-independent properties
   tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
@@ -1814,13 +1887,13 @@ class Router {
         pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
       }));
     };
-    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, code) => {
           err.routerCode = code;
           firstBadMatchIndex = firstBadMatchIndex ?? index;
@@ -1840,7 +1913,7 @@ class Router {
             error: err,
             status: 'error',
             updatedAt: Date.now(),
-            abortController
+            abortController: new AbortController()
           };
         };
         try {
@@ -1853,7 +1926,7 @@ class Router {
           const parentContext = parentMatch?.context ?? this.options.context ?? {};
           const beforeLoadContext = (await route.options.beforeLoad?.({
             search: match.search,
-            abortController: match.abortController,
+            abortController,
             params: match.params,
             preload: !!preload,
             context: parentContext,
@@ -1875,7 +1948,8 @@ class Router {
           };
           matches[index] = match = {
             ...match,
-            context: replaceEqualDeep(match.context, context)
+            context: replaceEqualDeep(match.context, context),
+            abortController
           };
         } catch (err) {
           handleErrorAndRedirect(err, 'BEFORE_LOAD');
@@ -2146,114 +2220,6 @@ class Router {
     });
     return matches;
   };
-  buildLink = 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
-      };
-    } catch (e) {}
-    const nextOpts = dest;
-    const next = this.buildLocation(nextOpts);
-    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 => {
-      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 => {
-      if (preload) {
-        this.preloadRoute(nextOpts).catch(err => {
-          console.warn(err);
-          console.warn(preloadWarning);
-        });
-      }
-    };
-    const handleTouchStart = e => {
-      if (preload) {
-        this.preloadRoute(nextOpts).catch(err => {
-          console.warn(err);
-          console.warn(preloadWarning);
-        });
-      }
-    };
-    const handleEnter = e => {
-      const target = e.target || {};
-      if (preload) {
-        if (target.preloadTimeout) {
-          return;
-        }
-        target.preloadTimeout = setTimeout(() => {
-          target.preloadTimeout = null;
-          this.preloadRoute(nextOpts).catch(err => {
-            console.warn(err);
-            console.warn(preloadWarning);
-          });
-        }, preloadDelay);
-      }
-    };
-    const handleLeave = e => {
-      const target = e.target || {};
-      if (target.preloadTimeout) {
-        clearTimeout(target.preloadTimeout);
-        target.preloadTimeout = null;
-      }
-    };
-    return {
-      type: 'internal',
-      next,
-      handleFocus,
-      handleClick,
-      handleEnter,
-      handleLeave,
-      handleTouchStart,
-      isActive,
-      disabled
-    };
-  };
   matchRoute = (location, opts) => {
     location = {
       ...location,
@@ -2359,9 +2325,6 @@ function lazyFn(fn, key) {
     return imported[key || 'default'](...args);
   };
 }
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
 class SearchParamError extends Error {}
 class PathParamError extends Error {}
 function getInitialRouterState(location) {