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

package/build/umd/index.development.js

@@ -900,6 +900,15 @@
 
     return parsedPath;
   }
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      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.
@@ -954,7 +963,7 @@
     return out;
   }
 
-  const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId) {
+  const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
     if (options === void 0) {
       options = {};
     }
@@ -965,8 +974,6 @@
 
     if (isRoot) {
       options.path = rootRouteId;
-    } else {
-      warning(!options.path, 'Routes must have a path property.');
     } // Strip the root from parentIds
 
 
@@ -974,13 +981,14 @@
       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 = '/';
@@ -990,14 +998,15 @@
       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__';
@@ -1373,55 +1382,76 @@
 
         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);
           }
         };
 
@@ -1525,12 +1555,7 @@
           isExternal = true;
         } catch (e) {}
 
-        if (isExternal) {
-          {
-            throw new Error('Attempting to navigate to external url with router.navigate!');
-          }
-        }
-
+        invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
         return router._navigate({
           from: fromString,
           to: toString,
@@ -1685,13 +1710,14 @@
     //       ]).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;
@@ -1742,11 +1768,12 @@
           }
         }
       };
-      return router.state.actions[routeId];
+      return router.state.actions[id];
     })();
 
     let route = {
-      routeId,
+      routeId: id,
+      routeRouteId: routeId,
       routePath,
       fullPath,
       options,
@@ -2375,151 +2402,143 @@
   };
 
   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__namespace.forwardRef((props, ref) => {
+          const linkProps = route.linkProps(props);
+          useRouterSubscription(router);
+          return /*#__PURE__*/React__namespace.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__namespace.forwardRef((props, ref) => {
-            const linkProps = route.linkProps(props);
-            useRouterSubscription(router);
-            return /*#__PURE__*/React__namespace.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);
       }
     }));
@@ -2716,6 +2735,7 @@
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
   exports.functionalUpdate = functionalUpdate;
+  exports.invariant = invariant;
   exports.last = last;
   exports.matchByPath = matchByPath;
   exports.matchPathname = matchPathname;