@tanstack/react-router 0.0.1-beta.67 → 0.0.1-beta.69

package/build/stats-react.json

@@ -7,31 +7,31 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "a145-103",
+            "uid": "61e0-103",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
             "name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-            "uid": "a145-105"
+            "uid": "61e0-105"
           },
           {
             "name": "packages",
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "a145-107"
+                "uid": "61e0-107"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "a145-109"
+                "uid": "61e0-109"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "a145-111"
+                "uid": "61e0-111"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "a145-113"
+                "uid": "61e0-113"
               }
             ]
           }
@@ -41,155 +41,155 @@
     "isRoot": true
   },
   "nodeParts": {
-    "a145-103": {
+    "61e0-103": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "a145-102"
+      "mainUid": "61e0-102"
     },
-    "a145-105": {
+    "61e0-105": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "a145-104"
+      "mainUid": "61e0-104"
     },
-    "a145-107": {
+    "61e0-107": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "a145-106"
+      "mainUid": "61e0-106"
     },
-    "a145-109": {
-      "renderedLength": 45412,
-      "gzipLength": 10895,
+    "61e0-109": {
+      "renderedLength": 45882,
+      "gzipLength": 10946,
       "brotliLength": 0,
-      "mainUid": "a145-108"
+      "mainUid": "61e0-108"
     },
-    "a145-111": {
+    "61e0-111": {
       "renderedLength": 1571,
       "gzipLength": 594,
       "brotliLength": 0,
-      "mainUid": "a145-110"
+      "mainUid": "61e0-110"
     },
-    "a145-113": {
-      "renderedLength": 12077,
-      "gzipLength": 3154,
+    "61e0-113": {
+      "renderedLength": 12398,
+      "gzipLength": 3201,
       "brotliLength": 0,
-      "mainUid": "a145-112"
+      "mainUid": "61e0-112"
     }
   },
   "nodeMetas": {
-    "a145-102": {
+    "61e0-102": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "a145-103"
+        "index.production.js": "61e0-103"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "a145-112"
+          "uid": "61e0-112"
         }
       ]
     },
-    "a145-104": {
+    "61e0-104": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "a145-105"
+        "index.production.js": "61e0-105"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "a145-108"
+          "uid": "61e0-108"
         }
       ]
     },
-    "a145-106": {
+    "61e0-106": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "a145-107"
+        "index.production.js": "61e0-107"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "a145-108"
+          "uid": "61e0-108"
         }
       ]
     },
-    "a145-108": {
+    "61e0-108": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "a145-109"
+        "index.production.js": "61e0-109"
       },
       "imported": [
         {
-          "uid": "a145-104"
+          "uid": "61e0-104"
         },
         {
-          "uid": "a145-106"
+          "uid": "61e0-106"
         }
       ],
       "importedBy": [
         {
-          "uid": "a145-112"
+          "uid": "61e0-112"
         }
       ]
     },
-    "a145-110": {
+    "61e0-110": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "a145-111"
+        "index.production.js": "61e0-111"
       },
       "imported": [
         {
-          "uid": "a145-115"
+          "uid": "61e0-115"
         }
       ],
       "importedBy": [
         {
-          "uid": "a145-112"
+          "uid": "61e0-112"
         }
       ]
     },
-    "a145-112": {
+    "61e0-112": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "a145-113"
+        "index.production.js": "61e0-113"
       },
       "imported": [
         {
-          "uid": "a145-102"
+          "uid": "61e0-102"
         },
         {
-          "uid": "a145-114"
+          "uid": "61e0-114"
         },
         {
-          "uid": "a145-108"
+          "uid": "61e0-108"
         },
         {
-          "uid": "a145-110"
+          "uid": "61e0-110"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "a145-114": {
+    "61e0-114": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "a145-112"
+          "uid": "61e0-112"
         }
       ],
       "isExternal": true
     },
-    "a145-115": {
+    "61e0-115": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "a145-110"
+          "uid": "61e0-110"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -9,7 +9,7 @@
  * @license MIT
  */
 import * as React from 'react';
-import { RegisteredRoutesInfo, LinkOptions, ToOptions, MatchRouteOptions, RouteByPath, ResolveRelativePath, NoInfer, ValidFromPath, RegisteredRouter, AnyRootRoute, RootRoute, AnyRoutesInfo, RoutesInfo, Router, RouterOptions, DefaultRoutesInfo, RouterStore, RouteMatch, AnyRouteMatch } from '@tanstack/router';
+import { RegisteredRoutesInfo, LinkOptions, ToOptions, MatchRouteOptions, RouteByPath, ResolveRelativePath, NoInfer, ValidFromPath, NavigateOptions, RegisteredRouter, AnyRootRoute, RootRoute, AnyRoutesInfo, RoutesInfo, Router, RouterConstructorOptions, DefaultRoutesInfo, RouterOptions, RouterStore, RouteMatch, AnyRouteMatch } from '@tanstack/router';
 export * from '@tanstack/router';
 export { useStore } from '@tanstack/react-store';
 
@@ -21,16 +21,16 @@ type RouteComponent<TProps = {}> = SyncRouteComponent<TProps> & {
 declare function lazy(importer: () => Promise<{
     default: SyncRouteComponent;
 }>): RouteComponent;
-type LinkPropsOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = '.'> = LinkOptions<RegisteredRoutesInfo, TFrom, TTo> & {
+type LinkPropsOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = ''> = LinkOptions<RegisteredRoutesInfo, TFrom, TTo> & {
     activeProps?: React.AnchorHTMLAttributes<HTMLAnchorElement> | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>);
     inactiveProps?: React.AnchorHTMLAttributes<HTMLAnchorElement> | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>);
 };
-type MakeUseMatchRouteOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = '.'> = ToOptions<RegisteredRoutesInfo, TFrom, TTo> & MatchRouteOptions;
-type MakeMatchRouteOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = '.'> = ToOptions<RegisteredRoutesInfo, TFrom, TTo> & MatchRouteOptions & {
+type MakeUseMatchRouteOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = ''> = ToOptions<RegisteredRoutesInfo, TFrom, TTo> & MatchRouteOptions;
+type MakeMatchRouteOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = ''> = ToOptions<RegisteredRoutesInfo, TFrom, TTo> & MatchRouteOptions & {
     children?: ReactNode | ((params: RouteByPath<RegisteredRoutesInfo, ResolveRelativePath<TFrom, NoInfer<TTo>>>['__types']['allParams']) => ReactNode);
 };
-type MakeLinkPropsOptions<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = '.'> = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-type MakeLinkOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = '.'> = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+type MakeLinkPropsOptions<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = ''> = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type MakeLinkOptions<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = ''> = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
     children?: ReactNode | ((state: {
         isActive: boolean;
     }) => ReactNode);
@@ -56,11 +56,12 @@ type PromptProps = {
     when?: boolean | any;
     children?: ReactNode;
 };
-declare function useLinkProps<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = '.'>(options: MakeLinkPropsOptions<TFrom, TTo>): React.AnchorHTMLAttributes<HTMLAnchorElement>;
-interface LinkFn<TDefaultFrom extends RegisteredRoutesInfo['routePaths'] = '/', TDefaultTo extends string = '.'> {
+declare function useLinkProps<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = ''>(options: MakeLinkPropsOptions<TFrom, TTo>): React.AnchorHTMLAttributes<HTMLAnchorElement>;
+interface LinkFn<TDefaultFrom extends RegisteredRoutesInfo['routePaths'] = '/', TDefaultTo extends string = ''> {
     <TFrom extends RegisteredRoutesInfo['routePaths'] = TDefaultFrom, TTo extends string = TDefaultTo>(props: MakeLinkOptions<TFrom, TTo> & React.RefAttributes<HTMLAnchorElement>): ReactNode;
 }
 declare const Link: LinkFn;
+declare function Navigate<TFrom extends RegisteredRoutesInfo['routePaths'] = '/', TTo extends string = ''>(props: NavigateOptions<RegisteredRoutesInfo, TFrom, TTo>): null;
 type MatchesContextValue = AnyRouteMatch[];
 declare const matchesContext: React.Context<MatchesContextValue>;
 declare const routerContext: React.Context<{
@@ -71,7 +72,7 @@ type MatchesProviderProps = {
     children: ReactNode;
 };
 declare class ReactRouter<TRouteConfig extends AnyRootRoute = RootRoute, TRoutesInfo extends AnyRoutesInfo = RoutesInfo<TRouteConfig>> extends Router<TRouteConfig, TRoutesInfo> {
-    constructor(opts: RouterOptions<TRouteConfig>);
+    constructor(opts: RouterConstructorOptions<TRouteConfig>);
 }
 type RouterProps<TRouteConfig extends AnyRootRoute = RootRoute, TRoutesInfo extends AnyRoutesInfo = DefaultRoutesInfo> = RouterOptions<TRouteConfig> & {
     router: Router<TRouteConfig, TRoutesInfo>;
@@ -98,12 +99,12 @@ declare function useParams<TFrom extends keyof RegisteredRoutesInfo['routesById'
 }): TSelected;
 declare function useNavigate<TDefaultFrom extends keyof RegisteredRoutesInfo['routesById'] = '/'>(defaultOpts?: {
     from?: TDefaultFrom;
-}): <TFrom extends string = TDefaultFrom, TTo extends string = ".">(opts?: MakeLinkOptions<TFrom, TTo> | undefined) => Promise<void>;
-declare function useMatchRoute(): <TFrom extends ValidFromPath<AnyRoutesInfo> = "/", TTo extends string = ".">(opts: MakeUseMatchRouteOptions<TFrom, TTo>) => false | {};
-declare function MatchRoute<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = '.'>(props: MakeMatchRouteOptions<TFrom, TTo>): any;
+}): <TFrom extends string = TDefaultFrom, TTo extends string = "">(opts?: MakeLinkOptions<TFrom, TTo> | undefined) => Promise<void>;
+declare function useMatchRoute(): <TFrom extends ValidFromPath<AnyRoutesInfo> = "/", TTo extends string = "">(opts: MakeUseMatchRouteOptions<TFrom, TTo>) => false | {};
+declare function MatchRoute<TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/', TTo extends string = ''>(props: MakeMatchRouteOptions<TFrom, TTo>): any;
 declare function Outlet(): JSX.Element | null;
 declare function DefaultErrorBoundary({ error }: {
     error: any;
 }): JSX.Element;
 
-export { DefaultErrorBoundary, Link, LinkFn, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, MatchesProviderProps, Outlet, PromptProps, ReactRouter, RouteComponent, RouterProps, RouterProvider, SyncRouteComponent, lazy, matchesContext, routerContext, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterContext, useSearch };
+export { DefaultErrorBoundary, Link, LinkFn, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, MatchesProviderProps, Navigate, Outlet, PromptProps, ReactRouter, RouteComponent, RouterProps, RouterProvider, SyncRouteComponent, lazy, matchesContext, routerContext, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterContext, useSearch };

package/build/umd/index.development.js

@@ -426,7 +426,7 @@
     // Remove empty segments and '.' segments
     const split = pathname.split('/').filter(Boolean);
     segments.push(...split.map(part => {
-      if (part.startsWith('*')) {
+      if (part === '$') {
         return {
           type: 'wildcard',
           value: part
@@ -455,7 +455,7 @@
   function interpolatePath(path, params, leaveWildcard) {
     const interpolatedPathSegments = parsePathname(path);
     return joinPaths(interpolatedPathSegments.map(segment => {
-      if (segment.value === '*' && !leaveWildcard) {
+      if (segment.value === '$' && !leaveWildcard) {
         return '';
       }
       if (segment.type === 'param') {
@@ -479,7 +479,7 @@
     }
     from = basepath != '/' ? from.substring(basepath.length) : from;
     const baseSegments = parsePathname(from);
-    const to = `${matchLocation.to ?? '*'}`;
+    const to = `${matchLocation.to ?? '$'}`;
     const routeSegments = parsePathname(to);
     const params = {};
     let isMatch = (() => {
@@ -491,7 +491,7 @@
         if (routeSegment) {
           if (routeSegment.type === 'wildcard') {
             if (baseSegment?.value) {
-              params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
+              params['$'] = joinPaths(baseSegments.slice(i).map(d => d.value));
               return true;
             }
             return false;
@@ -709,7 +709,13 @@
         })
       });
       this.state = this.store.state;
-      if (!this.#hasLoaders()) {
+      componentTypes.map(async type => {
+        const component = this.route.options[type];
+        if (typeof this[type] !== 'function') {
+          this[type] = component;
+        }
+      });
+      if (this.state.status === 'idle' && !this.#hasLoaders()) {
         this.store.setState(s => ({
           ...s,
           status: 'success'
@@ -757,7 +763,7 @@
           search
         };
       } catch (err) {
-        console.error(err);
+        this.route.options.onValidateSearchError?.(err);
         const error = new Error('Invalid search params found', {
           cause: err
         });
@@ -793,6 +799,7 @@
       try {
         info = this.#resolveInfo(opts);
       } catch (err) {
+        this.route.options.onError?.(err);
         this.store.setState(s => ({
           ...s,
           status: 'error',
@@ -808,12 +815,6 @@
         context,
         routeContext
       } = info;
-      componentTypes.map(async type => {
-        const component = this.route.options[type];
-        if (typeof this[type] !== 'function') {
-          this[type] = component;
-        }
-      });
 
       // If the match is invalid, errored or idle, trigger it to load
       if (this.state.status === 'pending') {
@@ -864,8 +865,7 @@
           return;
         });
         try {
-          await componentsPromise;
-          await dataPromise;
+          await Promise.all([componentsPromise, dataPromise]);
           if (latestPromise = checkLatest()) return await latestPromise;
           this.store.setState(s => ({
             ...s,
@@ -874,6 +874,8 @@
             updatedAt: Date.now()
           }));
         } catch (err) {
+          this.route.options.onLoadError?.(err);
+          this.route.options.onError?.(err);
           this.store.setState(s => ({
             ...s,
             error: err,
@@ -1261,8 +1263,9 @@
           });
         } catch (err) {
           if (!opts?.preload) {
-            match.route.options.onLoadError?.(err);
+            match.route.options.onBeforeLoadError?.(err);
           }
+          match.route.options.onError?.(err);
           throw err;
         }
       }));
@@ -1411,6 +1414,12 @@
           });
         }
       };
+      const handleTouchStart = e => {
+        this.preloadRoute(nextOpts).catch(err => {
+          console.warn(err);
+          console.warn('Error preloading route! ☝️');
+        });
+      };
       const handleEnter = e => {
         const target = e.target || {};
         if (preload) {
@@ -1440,6 +1449,7 @@
         handleClick,
         handleEnter,
         handleLeave,
+        handleTouchStart,
         isActive,
         disabled
       };
@@ -1565,7 +1575,7 @@
         key: dest.key
       };
     };
-    #commitLocation = location => {
+    #commitLocation = async location => {
       const next = this.buildNext(location);
       const id = '' + Date.now() + Math.random();
       if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
@@ -1710,7 +1720,6 @@
       onMouseEnter,
       onMouseLeave,
       onTouchStart,
-      onTouchEnd,
       ...rest
     } = options;
     const linkInfo = router.buildLink(options);
@@ -1727,6 +1736,7 @@
       handleFocus,
       handleEnter,
       handleLeave,
+      handleTouchStart,
       isActive,
       next
     } = linkInfo;
@@ -1762,6 +1772,7 @@
       onFocus: composeHandlers([onFocus, handleFocus]),
       onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
       onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
       target,
       style: {
         ...style,
@@ -1786,6 +1797,13 @@
       }) : props.children
     }));
   });
+  function Navigate(props) {
+    const router = useRouterContext();
+    React__namespace.useLayoutEffect(() => {
+      router.navigate(props);
+    }, []);
+    return null;
+  }
   const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
   class ReactRouter extends Router {
@@ -1844,7 +1862,7 @@
   function useRoute(routeId) {
     const router = useRouterContext();
     const resolvedRoute = router.getRoute(routeId);
-    invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route config?`);
+    invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route?`);
     return resolvedRoute;
   }
   function useSearch(opts) {
@@ -1862,16 +1880,16 @@
   }
   function useNavigate(defaultOpts) {
     const router = useRouterContext();
-    return opts => {
+    return React__namespace.useCallback(opts => {
       return router.navigate({
         ...defaultOpts,
         ...opts
       });
-    };
+    }, []);
   }
   function useMatchRoute() {
     const router = useRouterContext();
-    return opts => {
+    return React__namespace.useCallback(opts => {
       const {
         pending,
         caseSensitive,
@@ -1881,7 +1899,7 @@
         pending,
         caseSensitive
       });
-    };
+    }, []);
   }
   function MatchRoute(props) {
     const matchRoute = useMatchRoute();
@@ -2050,6 +2068,7 @@
   exports.DefaultErrorBoundary = DefaultErrorBoundary;
   exports.Link = Link;
   exports.MatchRoute = MatchRoute;
+  exports.Navigate = Navigate;
   exports.Outlet = Outlet;
   exports.ReactRouter = ReactRouter;
   exports.RootRoute = RootRoute;