@tanstack/router-core 0.0.1-beta.159 → 0.0.1-beta.160

package/build/esm/index.js

@@ -549,8 +549,6 @@ function decode(str) {
 
 const rootRouteId = '__root__';
 
-// | ParseParamsObj<TPath, TParams>
-
 // The parse type here allows a zod schema to be passed directly to the validator
 
 class Route {
@@ -717,25 +715,27 @@ class Router {
     this.__store = new Store(getInitialRouterState(), {
       onUpdate: () => {
         const prev = this.state;
-        this.state = this.__store.state;
-        const matchesByIdChanged = prev.matchesById !== this.state.matchesById;
+        const next = this.__store.state;
+        console.log(Object.values(next.matchesById).find(d => d.status === 'error'));
+        const matchesByIdChanged = prev.matchesById !== next.matchesById;
         let matchesChanged;
         let pendingMatchesChanged;
         if (!matchesByIdChanged) {
-          matchesChanged = prev.matchIds.length !== this.state.matchIds.length || prev.matchIds.some((d, i) => d !== this.state.matchIds[i]);
-          pendingMatchesChanged = prev.pendingMatchIds.length !== this.state.pendingMatchIds.length || prev.pendingMatchIds.some((d, i) => d !== this.state.pendingMatchIds[i]);
+          matchesChanged = prev.matchIds.length !== next.matchIds.length || prev.matchIds.some((d, i) => d !== next.matchIds[i]);
+          pendingMatchesChanged = prev.pendingMatchIds.length !== next.pendingMatchIds.length || prev.pendingMatchIds.some((d, i) => d !== next.pendingMatchIds[i]);
         }
         if (matchesByIdChanged || matchesChanged) {
-          this.state.matches = this.state.matchIds.map(id => {
-            return this.state.matchesById[id];
+          next.matches = next.matchIds.map(id => {
+            return next.matchesById[id];
           });
         }
         if (matchesByIdChanged || pendingMatchesChanged) {
-          this.state.pendingMatches = this.state.pendingMatchIds.map(id => {
-            return this.state.matchesById[id];
+          next.pendingMatches = next.pendingMatchIds.map(id => {
+            return next.matchesById[id];
           });
         }
-        this.state.isFetching = [...this.state.matches, ...this.state.pendingMatches].some(d => d.isFetching);
+        next.isFetching = [...next.matches, ...next.pendingMatches].some(d => d.isFetching);
+        this.state = next;
       },
       defaultPriority: 'low'
     });
@@ -816,11 +816,12 @@ class Router {
   cancelMatch = id => {
     this.getRouteMatch(id)?.abortController?.abort();
   };
-  safeLoad = opts => {
-    return this.load(opts).catch(err => {
-      // console.warn(err)
-      // invariant(false, 'Encountered an error during router.load()! ☝️.')
-    });
+  safeLoad = async opts => {
+    try {
+      return this.load(opts);
+    } catch (err) {
+      // Don't do anything
+    }
   };
   latestLoadPromise = Promise.resolve();
   load = async opts => {
@@ -857,11 +858,16 @@ class Router {
       });
       try {
         // Load the matches
-        await this.loadMatches(pendingMatches);
+        try {
+          await this.loadMatches(pendingMatches);
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
 
         // Only apply the latest transition
         if (latestPromise = checkLatest()) {
-          return await latestPromise;
+          return latestPromise;
         }
         const prevLocation = this.state.resolvedLocation;
         this.__store.setState(s => ({
@@ -878,7 +884,7 @@ class Router {
       } catch (err) {
         // Only apply the latest transition
         if (latestPromise = checkLatest()) {
-          return await latestPromise;
+          return latestPromise;
         }
         reject(err);
       }
@@ -1137,6 +1143,7 @@ class Router {
               throw errorHandlerErr;
             }
           }
+          console.log('set error');
           this.setRouteMatch(match.id, s => ({
             ...s,
             error: err,
@@ -1189,19 +1196,8 @@ class Router {
           const latest = this.getRouteMatch(match.id);
           return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
         };
-        const loadPromise = (async () => {
+        const load = async () => {
           let latestPromise;
-          const componentsPromise = Promise.all(componentTypes.map(async type => {
-            const component = route.options[type];
-            if (component?.preload) {
-              await component.preload();
-            }
-          }));
-          const loaderPromise = route.options.loader?.({
-            ...match,
-            preload: !!opts?.preload,
-            parentMatchPromise
-          });
           const handleError = err => {
             if (isRedirect(err)) {
               if (!opts?.preload) {
@@ -1212,33 +1208,46 @@ class Router {
             return false;
           };
           try {
+            const componentsPromise = Promise.all(componentTypes.map(async type => {
+              const component = route.options[type];
+              if (component?.preload) {
+                await component.preload();
+              }
+            }));
+            const loaderPromise = route.options.loader?.({
+              ...match,
+              preload: !!opts?.preload,
+              parentMatchPromise
+            });
             const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
             if (latestPromise = checkLatest()) return await latestPromise;
             this.setRouteMatchData(match.id, () => loader, opts);
-          } catch (err) {
+          } catch (loaderError) {
             if (latestPromise = checkLatest()) return await latestPromise;
-            if (handleError(err)) {
-              return;
-            }
-            const errorHandler = route.options.onLoadError ?? route.options.onError;
-            let caughtError = err;
+            handleError(loaderError);
+            let error = loaderError;
             try {
-              errorHandler?.(err);
-            } catch (errorHandlerErr) {
-              caughtError = errorHandlerErr;
-              if (handleError(errorHandlerErr)) {
-                return;
+              if (route.options.onLoadError) {
+                route.options.onLoadError?.(loaderError);
+              } else {
+                route.options.onError?.(loaderError);
               }
+            } catch (errorHandlerErr) {
+              error = errorHandlerErr;
+              handleError(error);
             }
+            console.log('set error');
             this.setRouteMatch(match.id, s => ({
               ...s,
-              error: caughtError,
+              error: error,
               status: 'error',
               isFetching: false,
               updatedAt: Date.now()
             }));
+            console.log(this.getRouteMatch(match.id)?.status);
           }
-        })();
+        };
+        const loadPromise = load();
         this.setRouteMatch(match.id, s => ({
           ...s,
           status: s.status !== 'success' ? 'pending' : s.status,
@@ -1662,13 +1671,18 @@ class Router {
     return this.state.matchesById[id];
   };
   setRouteMatch = (id, updater) => {
-    this.__store.setState(prev => ({
-      ...prev,
-      matchesById: {
-        ...prev.matchesById,
-        [id]: updater(prev.matchesById[id])
+    this.__store.setState(prev => {
+      if (!prev.matchesById[id]) {
+        console.warn(`No match found with id: ${id}`);
       }
-    }));
+      return {
+        ...prev,
+        matchesById: {
+          ...prev.matchesById,
+          [id]: updater(prev.matchesById[id])
+        }
+      };
+    });
   };
   setRouteMatchData = (id, updater, opts) => {
     const match = this.getRouteMatch(id);
@@ -1677,6 +1691,7 @@ class Router {
     const updatedAt = opts?.updatedAt ?? Date.now();
     const preloadInvalidAt = updatedAt + (opts?.maxAge ?? route.options.preloadMaxAge ?? this.options.defaultPreloadMaxAge ?? 5000);
     const invalidAt = updatedAt + (opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? Infinity);
+    console.log('set success');
     this.setRouteMatch(id, s => ({
       ...s,
       error: undefined,