@tanstack/react-router 0.0.1-beta.235 → 0.0.1-beta.237

package/build/cjs/router.js

@@ -11,6 +11,7 @@
 'use strict';
 
 var history = require('@tanstack/history');
+var store = require('@tanstack/store');
 var searchParams = require('./searchParams.js');
 var utils = require('./utils.js');
 var RouterProvider = require('./RouterProvider.js');
@@ -52,9 +53,6 @@ class Router {
   // by the router provider once rendered. We provide these so that the
   // router can be used in a non-react environment if necessary
   startReactTransition = fn => fn();
-  setState = updater => {
-    this.state = utils.functionalUpdate(updater, this.state);
-  };
   update = newOptions => {
     this.options = {
       ...this.options,
@@ -69,10 +67,20 @@ class Router {
       this.routeTree = this.options.routeTree;
       this.buildRouteTree();
     }
-    if (!this.state) {
-      this.state = getInitialRouterState(this.latestLocation);
+    if (!this.__store) {
+      this.__store = new store.Store(getInitialRouterState(this.latestLocation), {
+        onUpdate: () => {
+          this.__store.state = {
+            ...this.state,
+            status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+          };
+        }
+      });
     }
   };
+  get state() {
+    return this.__store.state;
+  }
   buildRouteTree = () => {
     this.routesById = {};
     this.routesByPath = {};
@@ -344,7 +352,7 @@ class Router {
     RouterProvider.getRouteMatch(this.state, id)?.abortController?.abort();
   };
   cancelMatches = () => {
-    this.state.matches.forEach(match => {
+    this.state.pendingMatches?.forEach(match => {
       this.cancelMatch(match.id);
     });
   };
@@ -535,6 +543,12 @@ class Router {
   }) => {
     let latestPromise;
     let firstBadMatchIndex;
+    const updatePendingMatch = match => {
+      this.__store.setState(s => ({
+        ...s,
+        pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
+      }));
+    };
 
     // Check each match middleware to see if the route can be accessed
     try {
@@ -691,12 +705,10 @@ class Router {
           loadPromise
         };
         if (!preload) {
-          this.setState(s => ({
-            ...s,
-            matches: s.matches.map(d => d.id === match.id ? match : d)
-          }));
+          updatePendingMatch(match);
         }
         let didShowPending = false;
+        const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
         await new Promise(async resolve => {
           // If the route has a pending component and a pendingMs option,
           // forcefully show the pending component
@@ -708,17 +720,13 @@ class Router {
                 ...match,
                 showPending: true
               };
-              this.setState(s => ({
-                ...s,
-                matches: s.matches.map(d => d.id === match.id ? match : d)
-              }));
+              updatePendingMatch(match);
               resolve();
             });
           }
           try {
             const loaderData = await loadPromise;
             if (latestPromise = checkLatest()) return await latestPromise;
-            const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
             if (didShowPending && pendingMinMs) {
               await new Promise(r => setTimeout(r, pendingMinMs));
             }
@@ -748,12 +756,19 @@ class Router {
               isFetching: false,
               updatedAt: Date.now()
             };
+          } finally {
+            // If we showed the pending component, that means
+            // we already moved the pendingMatches to the matches
+            // state, so we need to update that specific match
+            if (didShowPending && pendingMinMs && match.showPending) {
+              this.__store.setState(s => ({
+                ...s,
+                matches: s.matches?.map(d => d.id === match.id ? match : d)
+              }));
+            }
           }
           if (!preload) {
-            this.setState(s => ({
-              ...s,
-              matches: s.matches.map(d => d.id === match.id ? match : d)
-            }));
+            updatePendingMatch(match);
           }
           resolve();
         });
@@ -782,24 +797,23 @@ class Router {
       });
 
       // Match the routes
-      let matches = this.matchRoutes(next.pathname, next.search, {
+      let pendingMatches = this.matchRoutes(next.pathname, next.search, {
         debug: true
       });
-      this.pendingMatches = matches;
       const previousMatches = this.state.matches;
 
       // Ingest the new matches
-      this.setState(s => ({
+      this.__store.setState(s => ({
         ...s,
-        // status: 'pending',
+        isLoading: true,
         location: next,
-        matches
+        pendingMatches
       }));
       try {
         try {
           // Load the matches
           await this.loadMatches({
-            matches,
+            matches: pendingMatches,
             checkLatest: () => this.checkLatest(promise),
             invalidate: opts?.invalidate
           });
@@ -814,14 +828,13 @@ class Router {
         }
         const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
         const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
-        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id))
-
-        // setState((s) => ({
-        //   ...s,
-        //   status: 'idle',
-        //   resolvedLocation: s.location,
-        //   matches,
-        // }))
+        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id));
+        this.__store.setState(s => ({
+          ...s,
+          isLoading: false,
+          matches: pendingMatches,
+          pendingMatches: undefined
+        }))
 
         //
         ;
@@ -976,9 +989,6 @@ class Router {
       return false;
     }
     const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-
-    // const baseLocation = state.resolvedLocation
-
     if (!baseLocation) {
       return false;
     }
@@ -1050,7 +1060,7 @@ class Router {
       }
       return match;
     });
-    this.setState(s => {
+    this.__store.setState(s => {
       return {
         ...s,
         matches: matches
@@ -1081,6 +1091,8 @@ class SearchParamError extends Error {}
 class PathParamError extends Error {}
 function getInitialRouterState(location) {
   return {
+    isLoading: false,
+    isTransitioning: false,
     status: 'idle',
     resolvedLocation: location,
     location,