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

package/build/types/router.d.ts

@@ -10,7 +10,7 @@ import { AnyRouteMatch, RouteMatch } from './Matches';
 import { ParsedLocation } from './location';
 import { LocationState } from './location';
 import { SearchSerializer, SearchParser } from './searchParams';
-import { BuildLinkFn, BuildLocationFn, CommitLocationOptions, InjectedHtmlEntry, MatchRouteFn, NavigateFn } from './RouterProvider';
+import { BuildLocationFn, CommitLocationOptions, InjectedHtmlEntry, MatchRouteFn, NavigateFn } from './RouterProvider';
 declare global {
     interface Window {
         __TSR_DEHYDRATED__?: HydrationCtx;
@@ -167,7 +167,6 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
         invalidate?: boolean;
     }) => Promise<void>;
     preloadRoute: (navigateOpts?: BuildNextOptions) => Promise<RouteMatch<AnyRoute, any>[]>;
-    buildLink: BuildLinkFn<TRouteTree>;
     matchRoute: MatchRouteFn<TRouteTree>;
     injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;
     dehydrateData: <T>(key: any, getData: T | (() => T | Promise<T>)) => () => T | undefined;

package/build/umd/index.development.js

@@ -1643,17 +1643,15 @@
     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 = () => ({
@@ -1668,8 +1666,8 @@
       to,
       state,
       mask,
-      preload,
-      preloadDelay,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
       replace,
       startTransition,
       resetScroll,
@@ -1683,27 +1681,100 @@
       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 => {
@@ -1751,6 +1822,9 @@
       }) : props.children
     }));
   });
+  function isCtrlEvent(e) {
+    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  }
 
   // @ts-nocheck
 
@@ -1880,7 +1954,6 @@
   //
 
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  const preloadWarning = 'Error preloading route! ☝️';
   class Router {
     // Option-independent properties
     tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
@@ -2425,13 +2498,13 @@
           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;
@@ -2451,7 +2524,7 @@
               error: err,
               status: 'error',
               updatedAt: Date.now(),
-              abortController
+              abortController: new AbortController()
             };
           };
           try {
@@ -2464,7 +2537,7 @@
             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,
@@ -2486,7 +2559,8 @@
             };
             matches[index] = match = {
               ...match,
-              context: replaceEqualDeep(match.context, context)
+              context: replaceEqualDeep(match.context, context),
+              abortController
             };
           } catch (err) {
             handleErrorAndRedirect(err, 'BEFORE_LOAD');
@@ -2757,114 +2831,6 @@
       });
       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,
@@ -2970,9 +2936,6 @@
       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) {