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

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.withSelector));
-})(this, (function (exports, React, withSelector) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('use-sync-external-store/shim/with-selector'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'use-sync-external-store/shim/with-selector', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.withSelector, global.React));
+})(this, (function (exports, withSelector, React) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -34,21 +34,6 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   /**
    * @tanstack/store/src/index.ts
    *
@@ -726,6 +711,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 +982,7 @@
       } = this.options;
       this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
       if (routeTree && routeTree !== this.routeTree) {
-        this.#buildRouteTree(routeTree);
+        this.#processRoutes(routeTree);
       }
       return this;
     };
@@ -1308,7 +1302,6 @@
       return matches;
     };
     loadMatches = async (resolvedMatches, opts) => {
-      this.cleanMatches();
       if (!opts?.preload) {
         resolvedMatches.forEach(match => {
           // Update each match with its latest route data
@@ -1321,10 +1314,12 @@
             error: match.error,
             paramsError: match.paramsError,
             searchError: match.searchError,
-            params: match.params
+            params: match.params,
+            preloadInvalidAt: 0
           }));
         });
       }
+      this.cleanMatches();
       let firstBadMatchIndex;
 
       // Check each match middleware to see if the route can be accessed
@@ -1460,6 +1455,7 @@
         })());
       });
       await Promise.all(matchPromises);
+      this.cleanMatches();
     };
     reload = () => {
       return this.navigate({
@@ -1639,7 +1635,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 +1650,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 +1683,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 +1707,7 @@
     //     ?.__promisesByKey[key]?.resolve(value)
     // }
 
-    #buildRouteTree = routeTree => {
+    #processRoutes = routeTree => {
       this.routeTree = routeTree;
       this.routesById = {};
       this.routesByPath = {};
@@ -1901,7 +1910,6 @@
         preloadInvalidAt,
         invalidAt
       }));
-      if (this.state.matches.find(d => d.id === id)) ;
     };
     invalidate = async opts => {
       if (opts?.matchId) {
@@ -2110,19 +2118,41 @@
     }
   }
 
-  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-  function useScrollRestoration(options) {
-    const router = useRouter();
-    useLayoutEffect(() => {
-      return watchScrollPositions(router, options);
-    }, []);
-    useLayoutEffect(() => {
-      restoreScrollPositions(router, options);
-    });
+  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 ScrollRestoration(props) {
-    useScrollRestoration(props);
-    return null;
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
   }
 
   Route.__onInit = route => {
@@ -2319,11 +2349,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();
@@ -2698,6 +2726,47 @@
     return true;
   }
 
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function useScrollRestoration(options) {
+    const router = useRouter();
+    useLayoutEffect(() => {
+      return watchScrollPositions(router, options);
+    }, []);
+    useLayoutEffect(() => {
+      restoreScrollPositions(router, options);
+    });
+  }
+  function ScrollRestoration(props) {
+    useScrollRestoration(props);
+    return null;
+  }
+
+  function useAwaited({
+    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 Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
+  }
+
+  exports.Await = Await;
   exports.Block = Block;
   exports.ErrorComponent = ErrorComponent;
   exports.FileRoute = FileRoute;
@@ -2721,10 +2790,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;
@@ -2749,6 +2820,7 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
   exports.useDehydrate = useDehydrate;
   exports.useHydrate = useHydrate;