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

package/build/umd/index.development.js

@@ -59,6 +59,24 @@
       throw new Error(value);
   }
 
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
+      }
+
+      var text = "Warning: " + message;
+
+      if (typeof console !== 'undefined') {
+        console.warn(text);
+      }
+
+      try {
+        throw Error(text);
+      } catch (x) {}
+    }
+  }
+
   /**
    * store
    *
@@ -261,15 +279,6 @@
   function last(arr) {
     return arr[arr.length - 1];
   }
-  function warning(cond, message) {
-    if (cond) {
-      if (typeof console !== 'undefined') console.warn(message);
-      try {
-        throw new Error(message);
-      } catch {}
-    }
-    return true;
-  }
   function isFunction(d) {
     return typeof d === 'function';
   }
@@ -481,6 +490,9 @@
     const baseSegments = parsePathname(from);
     const to = `${matchLocation.to ?? '$'}`;
     const routeSegments = parsePathname(to);
+    if (last(baseSegments)?.value === '/') {
+      baseSegments.pop();
+    }
     const params = {};
     let isMatch = (() => {
       for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
@@ -686,211 +698,6 @@
   // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
   // //    ^?
 
-  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  class RouteMatch {
-    abortController = new AbortController();
-    onLoaderDataListeners = new Set();
-    constructor(router, route, opts) {
-      Object.assign(this, {
-        route,
-        router,
-        id: opts.id,
-        pathname: opts.pathname,
-        params: opts.params,
-        store: new Store({
-          updatedAt: 0,
-          routeSearch: {},
-          search: {},
-          status: 'idle'
-        }, {
-          onUpdate: next => {
-            this.state = next;
-          }
-        })
-      });
-      this.state = this.store.state;
-      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'
-        }));
-      }
-    }
-    #hasLoaders = () => {
-      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
-    };
-    __commit = () => {
-      const {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      } = this.#resolveInfo({
-        location: this.router.state.currentLocation
-      });
-      this.context = context;
-      this.routeContext = routeContext;
-      this.store.setState(s => ({
-        ...s,
-        routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
-        search: replaceEqualDeep(s.search, search)
-      }));
-    };
-    cancel = () => {
-      this.abortController?.abort();
-    };
-    #resolveSearchInfo = opts => {
-      // Validate the search params and stabilize them
-      const parentSearchInfo = this.parentMatch ? this.parentMatch.#resolveSearchInfo(opts) : {
-        search: opts.location.search,
-        routeSearch: opts.location.search
-      };
-      try {
-        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
-        const routeSearch = validator?.(parentSearchInfo.search) ?? {};
-        const search = {
-          ...parentSearchInfo.search,
-          ...routeSearch
-        };
-        return {
-          routeSearch,
-          search
-        };
-      } catch (err) {
-        this.route.options.onValidateSearchError?.(err);
-        const error = new Error('Invalid search params found', {
-          cause: err
-        });
-        error.code = 'INVALID_SEARCH_PARAMS';
-        throw error;
-      }
-    };
-    #resolveInfo = opts => {
-      const {
-        search,
-        routeSearch
-      } = this.#resolveSearchInfo(opts);
-      const routeContext = this.route.options.getContext?.({
-        parentContext: this.parentMatch?.routeContext ?? {},
-        context: this.parentMatch?.context ?? this.router?.options.context ?? {},
-        params: this.params,
-        search
-      }) || {};
-      const context = {
-        ...(this.parentMatch?.context ?? this.router?.options.context),
-        ...routeContext
-      };
-      return {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      };
-    };
-    __load = async opts => {
-      this.parentMatch = opts.parentMatch;
-      let info;
-      try {
-        info = this.#resolveInfo(opts);
-      } catch (err) {
-        this.route.options.onError?.(err);
-        this.store.setState(s => ({
-          ...s,
-          status: 'error',
-          error: err
-        }));
-
-        // Do not proceed with loading the route
-        return;
-      }
-      const {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      } = info;
-
-      // If the match is invalid, errored or idle, trigger it to load
-      if (this.state.status === 'pending') {
-        return;
-      }
-
-      // TODO: Should load promises be tracked based on location?
-      this.__loadPromise = Promise.resolve().then(async () => {
-        const loadId = '' + Date.now() + Math.random();
-        this.#latestId = loadId;
-        const checkLatest = () => {
-          return loadId !== this.#latestId ? this.__loadPromise : undefined;
-        };
-        let latestPromise;
-
-        // If the match was in an error state, set it
-        // to a loading state again. Otherwise, keep it
-        // as loading or resolved
-        if (this.state.status === 'idle') {
-          this.store.setState(s => ({
-            ...s,
-            status: 'pending'
-          }));
-        }
-        const componentsPromise = (async () => {
-          // then run all component and data loaders in parallel
-          // For each component type, potentially load it asynchronously
-
-          await Promise.all(componentTypes.map(async type => {
-            const component = this.route.options[type];
-            if (this[type]?.preload) {
-              this[type] = await this.router.options.loadComponent(component);
-            }
-          }));
-        })();
-        const dataPromise = Promise.resolve().then(() => {
-          if (this.route.options.onLoad) {
-            return this.route.options.onLoad({
-              params: this.params,
-              routeSearch,
-              search,
-              signal: this.abortController.signal,
-              preload: !!opts?.preload,
-              routeContext: routeContext,
-              context: context
-            });
-          }
-          return;
-        });
-        try {
-          await Promise.all([componentsPromise, dataPromise]);
-          if (latestPromise = checkLatest()) return await latestPromise;
-          this.store.setState(s => ({
-            ...s,
-            error: undefined,
-            status: 'success',
-            updatedAt: Date.now()
-          }));
-        } catch (err) {
-          this.route.options.onLoadError?.(err);
-          this.route.options.onError?.(err);
-          this.store.setState(s => ({
-            ...s,
-            error: err,
-            status: 'error',
-            updatedAt: Date.now()
-          }));
-        } finally {
-          delete this.__loadPromise;
-        }
-      });
-      return this.__loadPromise;
-    };
-    #latestId = '';
-  }
-
   const defaultParseSearch = parseSearchWith(JSON.parse);
   const defaultStringifySearch = stringifySearchWith(JSON.stringify);
   function parseSearchWith(parser) {
@@ -991,9 +798,9 @@
     mount = () => {
       // Mount only does anything on the client
       if (!isServer) {
-        // If the router matches are empty, load the matches
+        // If the router matches are empty, start loading the matches
         if (!this.state.currentMatches.length) {
-          this.load();
+          this.safeLoad();
         }
         const visibilityChangeEvent = 'visibilitychange';
         const focusEvent = 'focus';
@@ -1031,7 +838,7 @@
           currentLocation: parsedLocation
         }));
         this.#unsubHistory = this.history.listen(() => {
-          this.load({
+          this.safeLoad({
             next: this.#parseLocation(this.state.latestLocation)
           });
         });
@@ -1063,6 +870,12 @@
         match.cancel();
       });
     };
+    safeLoad = opts => {
+      this.load(opts).catch(err => {
+        console.warn(err);
+        invariant(false, 'Encountered an error during router.load()! ☝️.');
+      });
+    };
     load = async opts => {
       let now = Date.now();
       const startedAt = now;
@@ -1093,14 +906,10 @@
       });
 
       // Load the matches
-      try {
-        await this.loadMatches(matches, this.state.pendingLocation
-        // opts
-        );
-      } catch (err) {
-        console.warn(err);
-        invariant(false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
-      }
+      await this.loadMatches(matches, this.state.pendingLocation
+      // opts
+      );
+
       if (this.startedLoadingAt !== startedAt) {
         // Ignore side-effects of outdated side-effects
         return this.navigationPromise;
@@ -1529,7 +1338,7 @@
       };
     };
     #onFocus = () => {
-      this.load();
+      this.safeLoad();
     };
     #buildLocation = (dest = {}) => {
       dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
@@ -1592,9 +1401,6 @@
         id,
         ...next.state
       });
-
-      // this.load(this.#parseLocation(this.state.latestLocation))
-
       return this.navigationPromise = new Promise(resolve => {
         const previousNavigationResolve = this.resolveNavigation;
         this.resolveNavigation = () => {
@@ -1619,6 +1425,229 @@
   function isCtrlEvent(e) {
     return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   }
+  function redirect(opts) {
+    opts.isRedirect = true;
+    return opts;
+  }
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
+  }
+
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+  class RouteMatch {
+    abortController = new AbortController();
+    onLoaderDataListeners = new Set();
+    constructor(router, route, opts) {
+      Object.assign(this, {
+        route,
+        router,
+        id: opts.id,
+        pathname: opts.pathname,
+        params: opts.params,
+        store: new Store({
+          updatedAt: 0,
+          routeSearch: {},
+          search: {},
+          status: 'idle'
+        }, {
+          onUpdate: next => {
+            this.state = next;
+          }
+        })
+      });
+      this.state = this.store.state;
+      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'
+        }));
+      }
+    }
+    #hasLoaders = () => {
+      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
+    };
+    __commit = () => {
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = this.#resolveInfo({
+        location: this.router.state.currentLocation
+      });
+      this.context = context;
+      this.routeContext = routeContext;
+      this.store.setState(s => ({
+        ...s,
+        routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
+        search: replaceEqualDeep(s.search, search)
+      }));
+    };
+    cancel = () => {
+      this.abortController?.abort();
+    };
+    #resolveSearchInfo = opts => {
+      // Validate the search params and stabilize them
+      const parentSearchInfo = this.parentMatch ? this.parentMatch.#resolveSearchInfo(opts) : {
+        search: opts.location.search,
+        routeSearch: opts.location.search
+      };
+      try {
+        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
+        const routeSearch = validator?.(parentSearchInfo.search) ?? {};
+        const search = {
+          ...parentSearchInfo.search,
+          ...routeSearch
+        };
+        return {
+          routeSearch,
+          search
+        };
+      } catch (err) {
+        if (isRedirect(err)) {
+          throw err;
+        }
+        this.route.options.onValidateSearchError?.(err);
+        const error = new Error('Invalid search params found', {
+          cause: err
+        });
+        error.code = 'INVALID_SEARCH_PARAMS';
+        throw error;
+      }
+    };
+    #resolveInfo = opts => {
+      const {
+        search,
+        routeSearch
+      } = this.#resolveSearchInfo(opts);
+      const routeContext = this.route.options.getContext?.({
+        parentContext: this.parentMatch?.routeContext ?? {},
+        context: this.parentMatch?.context ?? this.router?.options.context ?? {},
+        params: this.params,
+        search
+      }) || {};
+      const context = {
+        ...(this.parentMatch?.context ?? this.router?.options.context),
+        ...routeContext
+      };
+      return {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      };
+    };
+    __load = async opts => {
+      this.parentMatch = opts.parentMatch;
+      let info;
+      try {
+        info = this.#resolveInfo(opts);
+      } catch (err) {
+        if (isRedirect(err)) {
+          this.router.navigate(err);
+          return;
+        }
+        this.route.options.onError?.(err);
+        this.store.setState(s => ({
+          ...s,
+          status: 'error',
+          error: err
+        }));
+
+        // Do not proceed with loading the route
+        return;
+      }
+      const {
+        routeSearch,
+        search,
+        context,
+        routeContext
+      } = info;
+
+      // If the match is invalid, errored or idle, trigger it to load
+      if (this.state.status === 'pending') {
+        return;
+      }
+
+      // TODO: Should load promises be tracked based on location?
+      this.__loadPromise = Promise.resolve().then(async () => {
+        const loadId = '' + Date.now() + Math.random();
+        this.#latestId = loadId;
+        const checkLatest = () => {
+          return loadId !== this.#latestId ? this.__loadPromise : undefined;
+        };
+        let latestPromise;
+
+        // If the match was in an error state, set it
+        // to a loading state again. Otherwise, keep it
+        // as loading or resolved
+        if (this.state.status === 'idle') {
+          this.store.setState(s => ({
+            ...s,
+            status: 'pending'
+          }));
+        }
+        const componentsPromise = (async () => {
+          // then run all component and data loaders in parallel
+          // For each component type, potentially load it asynchronously
+
+          await Promise.all(componentTypes.map(async type => {
+            const component = this.route.options[type];
+            if (this[type]?.preload) {
+              this[type] = await this.router.options.loadComponent(component);
+            }
+          }));
+        })();
+        const dataPromise = Promise.resolve().then(() => {
+          if (this.route.options.onLoad) {
+            return this.route.options.onLoad({
+              params: this.params,
+              routeSearch,
+              search,
+              signal: this.abortController.signal,
+              preload: !!opts?.preload,
+              routeContext: routeContext,
+              context: context
+            });
+          }
+          return;
+        });
+        try {
+          await Promise.all([componentsPromise, dataPromise]);
+          if (latestPromise = checkLatest()) return await latestPromise;
+          this.store.setState(s => ({
+            ...s,
+            error: undefined,
+            status: 'success',
+            updatedAt: Date.now()
+          }));
+        } catch (err) {
+          if (isRedirect(err)) {
+            this.router.navigate(err);
+            return;
+          }
+          this.route.options.onLoadError?.(err);
+          this.route.options.onError?.(err);
+          this.store.setState(s => ({
+            ...s,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now()
+          }));
+        } finally {
+          delete this.__loadPromise;
+        }
+      });
+      return this.__loadPromise;
+    };
+    #latestId = '';
+  }
 
   /**
    * react-store
@@ -1826,12 +1855,17 @@
     router.update(rest);
     const currentMatches = useStore(router.store, s => s.currentMatches);
     React__namespace.useEffect(router.mount, [router]);
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
         router: router
       }
     }, /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
       value: [undefined, ...currentMatches]
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      errorComponent: ErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+      }
     }, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
   }
   function useRouterContext() {
@@ -1944,23 +1978,24 @@
     }, []);
     const PendingComponent = match.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
     const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
+    const ResolvedSuspenseBoundary = match.route.options.wrapInSuspense ?? true ? React__namespace.Suspense : SafeFragment;
+    const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
       value: matches
-    }, match.route.options.wrapInSuspense ?? true ? /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
       fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      key: match.route.id,
-      errorComponent: errorComponent,
-      match: match
-    }, /*#__PURE__*/React__namespace.createElement(Inner, {
-      match: match
-    }))) : /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
       key: match.route.id,
       errorComponent: errorComponent,
-      match: match
+      onCatch: () => {
+        warning(false, `Error in route match: ${match.id}`);
+      }
     }, /*#__PURE__*/React__namespace.createElement(Inner, {
       match: match
-    })));
+    }))));
+  }
+  function SafeFragment(props) {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
 
   // This is the messiest thing ever... I'm either seriously tired (likely) or
@@ -1973,7 +2008,7 @@
       info: undefined
     };
     componentDidCatch(error, info) {
-      console.error(`Error in route match: ${this.props.match.id}`);
+      this.props.onCatch(error, info);
       console.error(error);
       this.setState({
         error,
@@ -1990,7 +2025,7 @@
   function CatchBoundaryInner(props) {
     const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
     const router = useRouterContext();
-    const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
+    const errorComponent = props.errorComponent ?? ErrorComponent;
     const prevKeyRef = React__namespace.useRef('');
     React__namespace.useEffect(() => {
       if (activeErrorState) {
@@ -2011,7 +2046,7 @@
     }
     return props.children;
   }
-  function DefaultErrorBoundary({
+  function ErrorComponent({
     error
   }) {
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -2065,7 +2100,7 @@
   //   return (children ?? null) as ReactNode
   // }
 
-  exports.DefaultErrorBoundary = DefaultErrorBoundary;
+  exports.ErrorComponent = ErrorComponent;
   exports.Link = Link;
   exports.MatchRoute = MatchRoute;
   exports.Navigate = Navigate;
@@ -2089,6 +2124,7 @@
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
   exports.isPlainObject = isPlainObject;
+  exports.isRedirect = isRedirect;
   exports.joinPaths = joinPaths;
   exports.last = last;
   exports.lazy = lazy;
@@ -2099,6 +2135,7 @@
   exports.parseSearchWith = parseSearchWith;
   exports.partialDeepEqual = partialDeepEqual;
   exports.pick = pick;
+  exports.redirect = redirect;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;