@tanstack/react-router 0.0.1-beta.166 → 0.0.1-beta.167

package/build/umd/index.development.js

@@ -726,6 +726,15 @@
 
   // The parse type here allows a zod schema to be passed directly to the validator
 
+  // T extends Record<PropertyKey, infer U>
+  //   ? {
+  //       [K in keyof T]: UseLoaderResultPromise<T[K]>
+  //     }
+  //   : UseLoaderResultPromise<T>
+
+  // export type UseLoaderResultPromise<T> = T extends Promise<infer U>
+  //   ? StreamedPromise<U>
+  //   : T
   class Route {
     // Set up in this.init()
 
@@ -988,7 +997,7 @@
       } = this.options;
       this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
       if (routeTree && routeTree !== this.routeTree) {
-        this.#buildRouteTree(routeTree);
+        this.#processRoutes(routeTree);
       }
       return this;
     };
@@ -1224,8 +1233,8 @@
           params: routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
-          invalidAt: Infinity,
-          preloadInvalidAt: Infinity,
+          invalidAt: 9999999999999,
+          preloadInvalidAt: 9999999999999,
           routeSearch: {},
           search: {},
           status: hasLoaders ? 'pending' : 'success',
@@ -1639,7 +1648,9 @@
     };
     dehydrate = () => {
       return {
-        state: pick(this.state, ['location', 'status', 'lastUpdated'])
+        state: {
+          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'invalidAt', 'id', 'loaderData', 'status', 'updatedAt']))
+        }
       };
     };
     hydrate = async __do_not_use_server_ctx => {
@@ -1652,16 +1663,27 @@
       const ctx = _ctx;
       this.dehydratedData = ctx.payload;
       this.options.hydrate?.(ctx.payload);
-      const routerState = ctx.router.state;
+      const {
+        dehydratedMatches
+      } = ctx.router.state;
+      let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+        const dehydratedMatch = dehydratedMatches.find(d => d.id === match.id);
+        invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
+        if (dehydratedMatch) {
+          return {
+            ...match,
+            ...dehydratedMatch
+          };
+        }
+        return match;
+      });
       this.__store.setState(s => {
         return {
           ...s,
-          ...routerState,
-          resolvedLocation: routerState.location
+          matches,
+          matchesById: this.#mergeMatches(s.matchesById, matches)
         };
       });
-      await this.load();
-      return;
     };
     injectedHtml = [];
     injectHtml = async html => {
@@ -1674,10 +1696,10 @@
           const id = `__TSR_DEHYDRATED__${strKey}`;
           const data = typeof getData === 'function' ? await getData() : getData;
           return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
-        ;(() => {
-          var el = document.getElementById('${id}')
-          el.parentElement.removeChild(el)
-        })()
+        // ;(() => {
+        //   var el = document.getElementById('${id}')
+        //   el.parentElement.removeChild(el)
+        // })()
         </script>`;
         });
         return () => this.hydrateData(key);
@@ -1698,7 +1720,7 @@
     //     ?.__promisesByKey[key]?.resolve(value)
     // }
 
-    #buildRouteTree = routeTree => {
+    #processRoutes = routeTree => {
       this.routeTree = routeTree;
       this.routesById = {};
       this.routesByPath = {};
@@ -1890,7 +1912,7 @@
       const route = this.getRoute(match.routeId);
       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);
+      const invalidAt = updatedAt + (opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? 9999999999999);
       this.setRouteMatch(id, s => ({
         ...s,
         error: undefined,
@@ -2110,6 +2132,28 @@
     }
   }
 
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
+      });
+    }
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
   const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   function useScrollRestoration(options) {
     const router = useRouter();
@@ -2125,6 +2169,31 @@
     return null;
   }
 
+  function useDeferred({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw promise;
+    }
+    if (state.status === 'error') {
+      throw state.error;
+    }
+    router.dehydrateData(key, state);
+    return [state.data];
+  }
+  function Deferred(props) {
+    const awaited = useDeferred(props);
+    return props.children(...awaited);
+  }
+
   Route.__onInit = route => {
     Object.assign(route, {
       useMatch: (opts = {}) => {
@@ -2319,11 +2388,9 @@
       return unsub;
     }, [router]);
     const Wrap = router.options.Wrap || React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: null
-    }, /*#__PURE__*/React__namespace.createElement(Wrap, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+    return /*#__PURE__*/React__namespace.createElement(Wrap, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: router
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null))));
+    }, /*#__PURE__*/React__namespace.createElement(Matches, null)));
   }
   function Matches() {
     const router = useRouter();
@@ -2699,6 +2766,7 @@
   }
 
   exports.Block = Block;
+  exports.Deferred = Deferred;
   exports.ErrorComponent = ErrorComponent;
   exports.FileRoute = FileRoute;
   exports.Link = Link;
@@ -2721,10 +2789,12 @@
   exports.decode = decode;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
+  exports.defer = defer;
   exports.encode = encode;
   exports.functionalUpdate = functionalUpdate;
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
+  exports.isDehydratedDeferred = isDehydratedDeferred;
   exports.isPlainObject = isPlainObject;
   exports.isRedirect = isRedirect;
   exports.joinPaths = joinPaths;
@@ -2750,6 +2820,7 @@
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
   exports.useBlocker = useBlocker;
+  exports.useDeferred = useDeferred;
   exports.useDehydrate = useDehydrate;
   exports.useHydrate = useHydrate;
   exports.useInjectHtml = useInjectHtml;