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

package/build/types/index.d.ts

@@ -133,7 +133,7 @@ interface RouterOptions<TRouteConfig extends AnyRouteConfig, TRouterContext> {
     routeConfig?: TRouteConfig;
     basepath?: string;
     useServerData?: boolean;
-    createRouter?: (router: AnyRouter) => void;
+    Router?: (router: AnyRouter) => void;
     createRoute?: (opts: {
         route: AnyRoute;
         router: AnyRouter;
@@ -221,7 +221,7 @@ interface DehydratedRouter<TRouterContext = unknown> {
 }
 type MatchCache = Record<string, MatchCacheEntry>;
 interface DehydratedRouteMatch {
-    matchId: string;
+    id: string;
     state: Pick<RouteMatchStore<any, any>, 'status' | 'routeLoaderData' | 'invalid' | 'invalidAt'>;
 }
 interface RouterContext {
@@ -316,10 +316,11 @@ declare class RouteMatch<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRoute
         search: TRouteInfo['fullSearchSchema'];
     }) => void);
     constructor(router: AnyRouter, route: Route<TAllRouteInfo, TRouteInfo>, opts: {
-        matchId: string;
+        id: string;
         params: TRouteInfo['allParams'];
         pathname: string;
     });
+    setLoaderData: (loaderData: TRouteInfo['routeLoaderData']) => void;
     cancel: () => void;
     load: (loaderOpts?: {
         preload: true;

package/build/umd/index.development.js

@@ -119,13 +119,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 = {
@@ -678,7 +673,7 @@
         Object.assign(this, {
           route,
           router,
-          matchId: opts.matchId,
+          id: opts.id,
           pathname: opts.pathname,
           params: opts.params,
           store: createStore({
@@ -696,7 +691,7 @@
           this.store.setState(s => s.status = 'success');
         }
       }
-      #setLoaderData = loaderData => {
+      setLoaderData = loaderData => {
         batch(() => {
           this.store.setState(s => {
             s.routeLoaderData = loaderData;
@@ -771,7 +766,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;
@@ -956,8 +951,7 @@
       throw new Error('Failed to fetch match data');
     };
     class Router {
-      // __location: Location<TAllRouteInfo['fullSearchSchema']>
-
+      #unsubHistory;
       startedLoadingAt = Date.now();
       resolveNavigation = () => {};
       constructor(options) {
@@ -972,13 +966,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()));
@@ -990,9 +983,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';
 
@@ -1005,7 +995,6 @@
             window.addEventListener(focusEvent, this.#onFocus, false);
           }
           return () => {
-            unsubHistory();
             if (window.removeEventListener) {
               // Be sure to unsubscribe if a new handler is set
 
@@ -1017,13 +1006,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
@@ -1248,7 +1244,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])
             });
@@ -1320,10 +1316,11 @@
 
           // TODO: batch requests when possible
 
-          return this.options.fetchServerDataFn({
+          const res = await this.options.fetchServerDataFn({
             router: this,
             routeMatch
           });
+          return res;
         }
       };
       invalidateRoute = async opts => {
@@ -1514,7 +1511,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'])
               }
@@ -1534,8 +1531,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, {
@@ -1681,7 +1681,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 = () => {
@@ -1723,7 +1725,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: []