@tanstack/react-router 0.0.1-alpha.2 → 0.0.1-alpha.4

package/build/esm/index.js

@@ -880,6 +880,20 @@ function parsePath(path) {
   return parsedPath;
 }
 
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+    throw new Error(value);
+}
+
 // @ts-nocheck
 // We're inlining qss here for compression's sake, but we've included it as a hard dependency for the MIT license it requires.
 function encode(obj, pfx) {
@@ -933,7 +947,7 @@ function decode(str) {
   return out;
 }
 
-const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId) {
+const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
   if (options === void 0) {
     options = {};
   }
@@ -944,8 +958,6 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
 
   if (isRoot) {
     options.path = rootRouteId;
-  } else {
-    warning(!options.path, 'Routes must have a path property.');
   } // Strip the root from parentIds
 
 
@@ -953,13 +965,14 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
     parentId = '';
   }
 
-  let path = String(isRoot ? rootRouteId : options.path); // If the path is anything other than an index path, trim it up
+  let path = isRoot ? rootRouteId : options.path; // If the path is anything other than an index path, trim it up
 
-  if (path !== '/') {
+  if (path && path !== '/') {
     path = trimPath(path);
   }
 
-  let id = joinPaths([parentId, path]);
+  const routeId = path || options.id;
+  let id = joinPaths([parentId, routeId]);
 
   if (path === rootRouteId) {
     path = '/';
@@ -969,14 +982,15 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
     id = joinPaths(['/', id]);
   }
 
-  const fullPath = id === rootRouteId ? '/' : trimPathRight(id);
+  const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parentPath, path]));
   return {
     id: id,
+    routeId: routeId,
     path: path,
     fullPath: fullPath,
     options: options,
     children,
-    addChildren: cb => createRouteConfig(options, cb(childOptions => createRouteConfig(childOptions, undefined, false, id)), false, parentId)
+    addChildren: cb => createRouteConfig(options, cb(childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)), false, parentId, parentPath)
   };
 };
 const rootRouteId = '__root__';
@@ -1352,55 +1366,76 @@ function createRouter(userOptions) {
 
       const existingMatches = [...router.state.matches, ...((_router$state$pending3 = (_router$state$pending4 = router.state.pending) == null ? void 0 : _router$state$pending4.matches) != null ? _router$state$pending3 : [])];
 
-      const recurse = async (routes, parentMatch) => {
-        var _parentMatch$params, _router$options$filte, _router$preloadCache$, _route$childRoutes2;
+      const recurse = async routes => {
+        var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
 
+        const parentMatch = last(matches);
         let params = (_parentMatch$params = parentMatch == null ? void 0 : parentMatch.params) != null ? _parentMatch$params : {};
         const filteredRoutes = (_router$options$filte = router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) != null ? _router$options$filte : routes;
-        const route = filteredRoutes == null ? void 0 : filteredRoutes.find(route => {
-          var _route$childRoutes, _route$options$caseSe;
-
-          const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length);
-          const matchParams = matchPathname(pathname, {
-            to: route.fullPath,
-            fuzzy,
-            caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
-          });
+        let foundRoutes = [];
 
-          if (matchParams) {
-            let parsedParams;
+        const findMatchInRoutes = (parentRoutes, routes) => {
+          routes.some(route => {
+            var _route$childRoutes, _route$childRoutes2, _route$options$caseSe;
 
-            try {
-              var _route$options$parseP;
+            if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
+              return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
+            }
 
-              parsedParams = (_route$options$parseP = route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) != null ? _route$options$parseP : matchParams;
-            } catch (err) {
-              if (opts != null && opts.strictParseParams) {
-                throw err;
+            const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length);
+            const matchParams = matchPathname(pathname, {
+              to: route.fullPath,
+              fuzzy,
+              caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
+            });
+
+            if (matchParams) {
+              let parsedParams;
+
+              try {
+                var _route$options$parseP;
+
+                parsedParams = (_route$options$parseP = route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) != null ? _route$options$parseP : matchParams;
+              } catch (err) {
+                if (opts != null && opts.strictParseParams) {
+                  throw err;
+                }
               }
+
+              params = _extends$1({}, params, parsedParams);
             }
 
-            params = _extends$1({}, params, parsedParams);
-          }
+            if (!!matchParams) {
+              foundRoutes = [...parentRoutes, route];
+            }
 
-          return !!matchParams;
-        });
+            return !!foundRoutes.length;
+          });
+          return !!foundRoutes.length;
+        };
 
-        if (!route) {
+        findMatchInRoutes([], filteredRoutes);
+
+        if (!foundRoutes.length) {
           return;
         }
 
-        const interpolatedPath = interpolatePath(route.routePath, params);
-        const matchId = interpolatePath(route.routeId, params, true);
-        const match = existingMatches.find(d => d.matchId === matchId) || ((_router$preloadCache$ = router.preloadCache[matchId]) == null ? void 0 : _router$preloadCache$.match) || createRouteMatch(router, route, {
-          matchId,
-          params,
-          pathname: joinPaths([pathname, interpolatedPath])
+        foundRoutes.forEach(foundRoute => {
+          var _router$preloadCache$;
+
+          const interpolatedPath = interpolatePath(foundRoute.routePath, params);
+          const matchId = interpolatePath(foundRoute.routeId, params, true);
+          const match = existingMatches.find(d => d.matchId === matchId) || ((_router$preloadCache$ = router.preloadCache[matchId]) == null ? void 0 : _router$preloadCache$.match) || createRouteMatch(router, foundRoute, {
+            matchId,
+            params,
+            pathname: joinPaths([pathname, interpolatedPath])
+          });
+          matches.push(match);
         });
-        matches.push(match);
+        const foundRoute = last(foundRoutes);
 
-        if ((_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length) {
-          recurse(route.childRoutes, match);
+        if ((_foundRoute$childRout = foundRoute.childRoutes) != null && _foundRoute$childRout.length) {
+          recurse(foundRoute.childRoutes);
         }
       };
 
@@ -1504,14 +1539,7 @@ function createRouter(userOptions) {
         isExternal = true;
       } catch (e) {}
 
-      if (isExternal) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error('Attempting to navigate to external url with router.navigate!');
-        }
-
-        return;
-      }
-
+      invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
       return router._navigate({
         from: fromString,
         to: toString,
@@ -1666,13 +1694,14 @@ function createRoute(routeConfig, options, parent, router) {
   //       ]).replace(new RegExp(`^${rootRouteId}`), '')
   // ) as TRouteInfo['id']
   const {
-    id: routeId,
+    id,
+    routeId,
     path: routePath,
     fullPath
   } = routeConfig;
 
-  const action = router.state.actions[routeId] || (() => {
-    router.state.actions[routeId] = {
+  const action = router.state.actions[id] || (() => {
+    router.state.actions[id] = {
       pending: [],
       submit: async (submission, actionOpts) => {
         var _actionOpts$invalidat;
@@ -1723,11 +1752,12 @@ function createRoute(routeConfig, options, parent, router) {
         }
       }
     };
-    return router.state.actions[routeId];
+    return router.state.actions[id];
   })();
 
   let route = {
-    routeId,
+    routeId: id,
+    routeRouteId: routeId,
     routePath,
     fullPath,
     options,
@@ -2356,151 +2386,143 @@ const useRouterSubscription = router => {
 };
 
 function createReactRouter(opts) {
+  const makeRouteExt = (route, router) => {
+    return {
+      linkProps: options => {
+        var _functionalUpdate, _functionalUpdate2;
+
+        const {
+          // custom props
+          target,
+          activeProps = () => ({
+            className: 'active'
+          }),
+          inactiveProps = () => ({}),
+          disabled,
+          // element props
+          style,
+          className,
+          onClick,
+          onFocus,
+          onMouseEnter,
+          onMouseLeave
+        } = options,
+              rest = _objectWithoutPropertiesLoose(options, _excluded);
+
+        const linkInfo = route.buildLink(options);
+
+        if (linkInfo.type === 'external') {
+          const {
+            href
+          } = linkInfo;
+          return {
+            href
+          };
+        }
+
+        const {
+          handleClick,
+          handleFocus,
+          handleEnter,
+          handleLeave,
+          isActive,
+          next
+        } = linkInfo;
+
+        const composeHandlers = handlers => e => {
+          e.persist();
+          handlers.forEach(handler => {
+            if (handler) handler(e);
+          });
+        }; // Get the active props
+
+
+        const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps)) != null ? _functionalUpdate : {} : {}; // Get the inactive props
+
+        const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps)) != null ? _functionalUpdate2 : {};
+        return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
+          href: disabled ? undefined : next.href,
+          onClick: composeHandlers([handleClick, onClick]),
+          onFocus: composeHandlers([handleFocus, onFocus]),
+          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
+          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
+          target,
+          style: _extends$2({}, style, resolvedActiveProps.style, resolvedInactiveProps.style),
+          className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined
+        }, disabled ? {
+          role: 'link',
+          'aria-disabled': true
+        } : undefined, {
+          ['data-status']: isActive ? 'active' : undefined
+        });
+      },
+      Link: /*#__PURE__*/React.forwardRef((props, ref) => {
+        const linkProps = route.linkProps(props);
+        useRouterSubscription(router);
+        return /*#__PURE__*/React.createElement("a", _extends$2({
+          ref: ref
+        }, linkProps, {
+          children: typeof props.children === 'function' ? props.children({
+            isActive: linkProps['data-status'] === 'active'
+          }) : props.children
+        }));
+      }),
+      MatchRoute: opts => {
+        const {
+          pending,
+          caseSensitive
+        } = opts,
+              rest = _objectWithoutPropertiesLoose(opts, _excluded2);
+
+        const params = route.matchRoute(rest, {
+          pending,
+          caseSensitive
+        }); // useRouterSubscription(router)
+
+        if (!params) {
+          return null;
+        }
+
+        return typeof opts.children === 'function' ? opts.children(params) : opts.children;
+      }
+    };
+  };
+
   const coreRouter = createRouter(_extends$2({}, opts, {
     createRouter: router => {
       const routerExt = {
         useRoute: routeId => {
           const route = router.getRoute(routeId);
           useRouterSubscription(router);
-
-          if (!route) {
-            throw new Error("Could not find a route for route \"" + routeId + "\"! Did you forget to add it to your route config?");
-          }
-
+          invariant(route, "Could not find a route for route \"" + routeId + "\"! Did you forget to add it to your route config?");
           return route;
         },
         useMatch: routeId => {
-          if (routeId === rootRouteId) {
-            throw new Error("\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
-          }
+          invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
 
           const runtimeMatch = _useMatch();
 
           const match = router.state.matches.find(d => d.routeId === routeId);
-
-          if (!match) {
-            throw new Error("Could not find a match for route \"" + routeId + "\" being rendered in this component!");
-          }
-
-          if (runtimeMatch.routeId !== (match == null ? void 0 : match.routeId)) {
-            throw new Error("useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
-          }
-
+          invariant(match, "Could not find a match for route \"" + routeId + "\" being rendered in this component!");
+          invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
           useRouterSubscription(router);
 
           if (!match) {
-            throw new Error('Match not found!');
+            invariant('Match not found!');
           }
 
           return match;
         }
       };
-      Object.assign(router, routerExt);
+      const routeExt = makeRouteExt(router.getRoute('/'), router);
+      Object.assign(router, routerExt, routeExt);
     },
     createRoute: _ref => {
       let {
         router,
         route
       } = _ref;
-      const routeExt = {
-        linkProps: options => {
-          var _functionalUpdate, _functionalUpdate2;
-
-          const {
-            // custom props
-            target,
-            activeProps = () => ({
-              className: 'active'
-            }),
-            inactiveProps = () => ({}),
-            disabled,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave
-          } = options,
-                rest = _objectWithoutPropertiesLoose(options, _excluded);
-
-          const linkInfo = route.buildLink(options);
-
-          if (linkInfo.type === 'external') {
-            const {
-              href
-            } = linkInfo;
-            return {
-              href
-            };
-          }
-
-          const {
-            handleClick,
-            handleFocus,
-            handleEnter,
-            handleLeave,
-            isActive,
-            next
-          } = linkInfo;
-
-          const composeHandlers = handlers => e => {
-            e.persist();
-            handlers.forEach(handler => {
-              if (handler) handler(e);
-            });
-          }; // Get the active props
-
-
-          const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps)) != null ? _functionalUpdate : {} : {}; // Get the inactive props
-
-          const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps)) != null ? _functionalUpdate2 : {};
-          return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
-            href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
-            onFocus: composeHandlers([handleFocus, onFocus]),
-            onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-            onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-            target,
-            style: _extends$2({}, style, resolvedActiveProps.style, resolvedInactiveProps.style),
-            className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined
-          }, disabled ? {
-            role: 'link',
-            'aria-disabled': true
-          } : undefined, {
-            ['data-status']: isActive ? 'active' : undefined
-          });
-        },
-        Link: /*#__PURE__*/React.forwardRef((props, ref) => {
-          const linkProps = route.linkProps(props);
-          useRouterSubscription(router);
-          return /*#__PURE__*/React.createElement("a", _extends$2({
-            ref: ref
-          }, linkProps, {
-            children: typeof props.children === 'function' ? props.children({
-              isActive: linkProps['data-status'] === 'active'
-            }) : props.children
-          }));
-        }),
-        MatchRoute: opts => {
-          const {
-            pending,
-            caseSensitive
-          } = opts,
-                rest = _objectWithoutPropertiesLoose(opts, _excluded2);
-
-          const params = route.matchRoute(rest, {
-            pending,
-            caseSensitive
-          }); // useRouterSubscription(router)
-
-          if (!params) {
-            return null;
-          }
-
-          return typeof opts.children === 'function' ? opts.children(params) : opts.children;
-        }
-      };
+      const routeExt = makeRouteExt(route, router);
       Object.assign(route, routeExt);
     }
   }));
@@ -2682,5 +2704,5 @@ function DefaultCatchBoundary(_ref6) {
   }, "If you are the owner of this website, it's highly recommended that you configure your own custom Catch/Error boundaries for the router. You can optionally configure a boundary for each route."));
 }
 
-export { DefaultCatchBoundary, MatchesProvider, Outlet, RouterProvider, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, defaultParseSearch, defaultStringifySearch, functionalUpdate, last, matchByPath, matchPathname, parsePathname, parseSearchWith, replaceEqualDeep, _resolvePath as resolvePath, rootRouteId, stringifySearchWith, _useMatch as useMatch, useMatches, useParentMatches, useRouter, warning };
+export { DefaultCatchBoundary, MatchesProvider, Outlet, RouterProvider, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, defaultParseSearch, defaultStringifySearch, functionalUpdate, invariant, last, matchByPath, matchPathname, parsePathname, parseSearchWith, replaceEqualDeep, _resolvePath as resolvePath, rootRouteId, stringifySearchWith, _useMatch as useMatch, useMatches, useParentMatches, useRouter, warning };
 //# sourceMappingURL=index.js.map