@tanstack/react-router 0.0.1-beta.50 → 0.0.1-beta.52

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "4de6-81",
+            "uid": "7dac-81",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "4de6-83"
+                "uid": "7dac-83"
               },
               {
                 "name": "immer@9.0.16/node_modules/immer/dist/immer.esm.mjs",
-                "uid": "4de6-85"
+                "uid": "7dac-85"
               }
             ]
           },
@@ -28,17 +28,17 @@
             "children": [
               {
                 "name": "router-core/build/esm/index.js",
-                "uid": "4de6-87"
+                "uid": "7dac-87"
               },
               {
                 "name": "react-router/src",
                 "children": [
                   {
-                    "uid": "4de6-89",
+                    "uid": "7dac-89",
                     "name": "useStore.ts"
                   },
                   {
-                    "uid": "4de6-91",
+                    "uid": "7dac-91",
                     "name": "index.tsx"
                   }
                 ]
@@ -51,155 +51,155 @@
     "isRoot": true
   },
   "nodeParts": {
-    "4de6-81": {
+    "7dac-81": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "4de6-80"
+      "mainUid": "7dac-80"
     },
-    "4de6-83": {
+    "7dac-83": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "4de6-82"
+      "mainUid": "7dac-82"
     },
-    "4de6-85": {
+    "7dac-85": {
       "renderedLength": 8203,
       "gzipLength": 3238,
       "brotliLength": 0,
-      "mainUid": "4de6-84"
+      "mainUid": "7dac-84"
     },
-    "4de6-87": {
-      "renderedLength": 56576,
-      "gzipLength": 13412,
+    "7dac-87": {
+      "renderedLength": 56528,
+      "gzipLength": 13417,
       "brotliLength": 0,
-      "mainUid": "4de6-86"
+      "mainUid": "7dac-86"
     },
-    "4de6-89": {
+    "7dac-89": {
       "renderedLength": 1347,
       "gzipLength": 484,
       "brotliLength": 0,
-      "mainUid": "4de6-88"
+      "mainUid": "7dac-88"
     },
-    "4de6-91": {
-      "renderedLength": 12620,
-      "gzipLength": 3340,
+    "7dac-91": {
+      "renderedLength": 12608,
+      "gzipLength": 3327,
       "brotliLength": 0,
-      "mainUid": "4de6-90"
+      "mainUid": "7dac-90"
     }
   },
   "nodeMetas": {
-    "4de6-80": {
+    "7dac-80": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "4de6-81"
+        "index.production.js": "7dac-81"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "4de6-90"
+          "uid": "7dac-90"
         }
       ]
     },
-    "4de6-82": {
+    "7dac-82": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "4de6-83"
+        "index.production.js": "7dac-83"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "4de6-86"
+          "uid": "7dac-86"
         }
       ]
     },
-    "4de6-84": {
+    "7dac-84": {
       "id": "/node_modules/.pnpm/immer@9.0.16/node_modules/immer/dist/immer.esm.mjs",
       "moduleParts": {
-        "index.production.js": "4de6-85"
+        "index.production.js": "7dac-85"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "4de6-86"
+          "uid": "7dac-86"
         }
       ]
     },
-    "4de6-86": {
+    "7dac-86": {
       "id": "/packages/router-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "4de6-87"
+        "index.production.js": "7dac-87"
       },
       "imported": [
         {
-          "uid": "4de6-82"
+          "uid": "7dac-82"
         },
         {
-          "uid": "4de6-84"
+          "uid": "7dac-84"
         }
       ],
       "importedBy": [
         {
-          "uid": "4de6-90"
+          "uid": "7dac-90"
         }
       ]
     },
-    "4de6-88": {
+    "7dac-88": {
       "id": "/packages/react-router/src/useStore.ts",
       "moduleParts": {
-        "index.production.js": "4de6-89"
+        "index.production.js": "7dac-89"
       },
       "imported": [
         {
-          "uid": "4de6-93"
+          "uid": "7dac-93"
         }
       ],
       "importedBy": [
         {
-          "uid": "4de6-90"
+          "uid": "7dac-90"
         }
       ]
     },
-    "4de6-90": {
+    "7dac-90": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "4de6-91"
+        "index.production.js": "7dac-91"
       },
       "imported": [
         {
-          "uid": "4de6-80"
+          "uid": "7dac-80"
         },
         {
-          "uid": "4de6-92"
+          "uid": "7dac-92"
         },
         {
-          "uid": "4de6-86"
+          "uid": "7dac-86"
         },
         {
-          "uid": "4de6-88"
+          "uid": "7dac-88"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "4de6-92": {
+    "7dac-92": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "4de6-90"
+          "uid": "7dac-90"
         }
       ],
       "isExternal": true
     },
-    "4de6-93": {
+    "7dac-93": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "4de6-88"
+          "uid": "7dac-88"
         }
       ],
       "isExternal": true

package/build/umd/index.development.js

@@ -167,13 +167,8 @@
     const getLocation = () => parseLocation(entries[index], currentState);
     return createHistory({
       getLocation,
-      listener: onUpdate => {
-        window.addEventListener(popStateEvent, onUpdate);
-        // We might need to handle the hashchange event in the future
-        // window.addEventListener(hashChangeEvent, onUpdate)
-        return () => {
-          window.removeEventListener(popStateEvent, onUpdate);
-        };
+      listener: () => {
+        return () => {};
       },
       pushState: (path, state) => {
         currentState = {
@@ -724,7 +719,7 @@
       Object.assign(this, {
         route,
         router,
-        matchId: opts.matchId,
+        id: opts.id,
         pathname: opts.pathname,
         params: opts.params,
         store: createStore({
@@ -742,7 +737,7 @@
         this.store.setState(s => s.status = 'success');
       }
     }
-    #setLoaderData = loaderData => {
+    setLoaderData = loaderData => {
       batch(() => {
         this.store.setState(s => {
           s.routeLoaderData = loaderData;
@@ -817,7 +812,7 @@
             if (this.route.options.loader) {
               const data = await this.router.loadMatchData(this);
               if (latestPromise = checkLatest()) return latestPromise;
-              this.#setLoaderData(data);
+              this.setLoaderData(data);
             }
             this.store.setState(s => {
               s.error = undefined;
@@ -1002,8 +997,7 @@
     throw new Error('Failed to fetch match data');
   };
   class Router {
-    // __location: Location<TAllRouteInfo['fullSearchSchema']>
-
+    #unsubHistory;
     startedLoadingAt = Date.now();
     resolveNavigation = () => {};
     constructor(options) {
@@ -1018,13 +1012,12 @@
         parseSearch: options?.parseSearch ?? defaultParseSearch,
         fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
       };
-      this.history = this.options?.history ?? createBrowserHistory();
       this.store = createStore(getInitialRouterState());
       this.basepath = '';
       this.update(options);
 
       // Allow frameworks to hook into the router creation
-      this.options.createRouter?.(this);
+      this.options.Router?.(this);
     }
     reset = () => {
       this.store.setState(s => Object.assign(s, getInitialRouterState()));
@@ -1036,9 +1029,6 @@
         if (!this.store.state.currentMatches.length) {
           this.load();
         }
-        const unsubHistory = this.history.listen(() => {
-          this.load(this.#parseLocation(this.store.state.latestLocation));
-        });
         const visibilityChangeEvent = 'visibilitychange';
         const focusEvent = 'focus';
 
@@ -1051,7 +1041,6 @@
           window.addEventListener(focusEvent, this.#onFocus, false);
         }
         return () => {
-          unsubHistory();
           if (window.removeEventListener) {
             // Be sure to unsubscribe if a new handler is set
 
@@ -1063,13 +1052,20 @@
       return () => {};
     };
     update = opts => {
-      if (!this.store.state.latestLocation) {
+      Object.assign(this.options, opts);
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        if (this.#unsubHistory) {
+          this.#unsubHistory();
+        }
+        this.history = this.options.history ?? (isServer ? createMemoryHistory() : createBrowserHistory());
         this.store.setState(s => {
           s.latestLocation = this.#parseLocation();
           s.currentLocation = s.latestLocation;
         });
+        this.#unsubHistory = this.history.listen(() => {
+          this.load(this.#parseLocation(this.store.state.latestLocation));
+        });
       }
-      Object.assign(this.options, opts);
       const {
         basepath,
         routeConfig
@@ -1294,7 +1290,7 @@
           const interpolatedPath = interpolatePath(foundRoute.path, params);
           const matchId = interpolatePath(foundRoute.id, params, true);
           const match = existingMatches.find(d => d.id === matchId) || this.store.state.matchCache[matchId]?.match || new RouteMatch(this, foundRoute, {
-            matchId,
+            id: matchId,
             params,
             pathname: joinPaths([this.basepath, interpolatedPath])
           });
@@ -1366,10 +1362,11 @@
 
         // TODO: batch requests when possible
 
-        return this.options.fetchServerDataFn({
+        const res = await this.options.fetchServerDataFn({
           router: this,
           routeMatch
         });
+        return res;
       }
     };
     invalidateRoute = async opts => {
@@ -1560,7 +1557,7 @@
         state: {
           ...pick(this.store.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
           currentMatches: this.store.state.currentMatches.map(match => ({
-            matchId: match.id,
+            id: match.id,
             state: {
               ...pick(match.store.state, ['status', 'routeLoaderData', 'invalidAt', 'invalid'])
             }
@@ -1580,8 +1577,11 @@
         });
         currentMatches.forEach((match, index) => {
           const dehydratedMatch = dehydratedRouter.state.currentMatches[index];
-          invariant(dehydratedMatch && dehydratedMatch.matchId === match.id, 'Oh no! There was a hydration mismatch when attempting to rethis.store the state of the router! 😬');
-          Object.assign(match, dehydratedMatch);
+          invariant(dehydratedMatch && dehydratedMatch.id === match.id, 'Oh no! There was a hydration mismatch when attempting to rethis.store the state of the router! 😬');
+          match.store.setState(s => {
+            Object.assign(s, dehydratedMatch.state);
+          });
+          match.setLoaderData(dehydratedMatch.state.routeLoaderData);
         });
         currentMatches.forEach(match => match.__validate());
         Object.assign(s, {
@@ -1727,7 +1727,9 @@
         id,
         ...next.state
       });
-      this.load(this.#parseLocation(this.store.state.latestLocation));
+
+      // this.load(this.#parseLocation(this.store.state.latestLocation))
+
       return this.navigationPromise = new Promise(resolve => {
         const previousNavigationResolve = this.resolveNavigation;
         this.resolveNavigation = () => {
@@ -1769,7 +1771,7 @@
     });
   }
 
-  // createRouterAction is a constrained identify function that takes options: key, action, onSuccess, onError, onSettled, etc
+  // RouterAction is a constrained identify function that takes options: key, action, onSuccess, onError, onSettled, etc
   function createAction(options) {
     const store = createStore({
       submissions: []
@@ -2026,7 +2028,7 @@
     ...rest
   }) {
     router.update(rest);
-    const [,, currentMatches] = useStore(router.store, s => [s.status, s.pendingMatches, s.currentMatches], true);
+    const currentMatches = useStore(router.store, s => s.currentMatches, undefined);
     React__namespace.useEffect(router.mount, [router]);
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
@@ -2193,11 +2195,11 @@
 
     // React.useEffect(() => {
     //   if (activeErrorState) {
-    //     let prevKey = router.store.currentLocation.key
+    //     let prevKey = router.store.state.currentLocation.key
     //     return createRoot((dispose) => {
     //       createEffect(() => {
-    //         if (router.store.currentLocation.key !== prevKey) {
-    //           prevKey = router.store.currentLocation.key
+    //         if (router.store.state.currentLocation.key !== prevKey) {
+    //           prevKey = router.store.state.currentLocation.key
     //           setActiveErrorState({} as any)
     //         }
     //       })