@tanstack/react-router 0.0.1-beta.231 → 0.0.1-beta.232

package/build/esm/index.js

@@ -8,7 +8,7 @@
  *
  * @license MIT
  */
-import { createBrowserHistory } from '@tanstack/history';
+import { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
 export * from '@tanstack/history';
 import invariant from 'tiny-invariant';
 export { default as invariant } from 'tiny-invariant';
@@ -797,24 +797,12 @@ const routerContext = /*#__PURE__*/React.createContext(null);
 if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext;
 }
-class SearchParamError extends Error {}
-class PathParamError extends Error {}
-function getInitialRouterState(location) {
-  return {
-    status: 'idle',
-    resolvedLocation: location,
-    location,
-    matches: [],
-    pendingMatches: [],
-    lastUpdated: Date.now()
-  };
-}
 function RouterProvider({
   router,
   ...rest
 }) {
   // Allow the router to update options on the router instance
-  router.updateOptions({
+  router.update({
     ...router.options,
     ...rest,
     context: {
@@ -822,6 +810,17 @@ function RouterProvider({
       ...rest?.context
     }
   });
+  const inner = /*#__PURE__*/React.createElement(RouterProviderInner, {
+    router: router
+  });
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.createElement(router.options.Wrap, null, inner);
+  }
+  return inner;
+}
+function RouterProviderInner({
+  router
+}) {
   const [preState, setState] = React.useState(() => router.state);
   const [isTransitioning, startReactTransition] = React.useTransition();
   const isAnyTransitioning = isTransitioning || preState.matches.some(d => d.status === 'pending');
@@ -834,18 +833,21 @@ function RouterProvider({
   router.setState = setState;
   router.state = state;
   router.startReactTransition = startReactTransition;
-  React.useLayoutEffect(() => {
+  const tryLoad = () => {
+    if (state.location !== router.latestLocation) {
+      startReactTransition(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    }
+  };
+  useLayoutEffect$1(() => {
     const unsub = router.history.subscribe(() => {
       router.latestLocation = router.parseLocation(router.latestLocation);
-      if (state.location !== router.latestLocation) {
-        startReactTransition(() => {
-          try {
-            router.load();
-          } catch (err) {
-            console.error(err);
-          }
-        });
-      }
+      tryLoad();
     });
     const nextLocation = router.buildLocation({
       search: true,
@@ -863,7 +865,7 @@ function RouterProvider({
       unsub();
     };
   }, [router.history]);
-  React.useLayoutEffect(() => {
+  useLayoutEffect$1(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
       router.emit({
         type: 'onResolved',
@@ -878,14 +880,10 @@ function RouterProvider({
       }));
     }
   });
-  React.useLayoutEffect(() => {
-    startReactTransition(() => {
-      try {
-        router.load();
-      } catch (err) {
-        console.error(err);
-      }
-    });
+  useLayoutEffect$1(() => {
+    if (!window.__TSR_DEHYDRATED__) {
+      tryLoad();
+    }
   }, []);
   return /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: router
@@ -902,7 +900,7 @@ function useRouterState(opts) {
   return opts?.select ? opts.select(state) : state;
 }
 function useRouter() {
-  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
   const value = React.useContext(resolvedContext);
   warning(value, 'useRouter must be used inside a <RouterProvider> component!');
   return value;
@@ -1228,6 +1226,8 @@ function stringifySearchWith(stringify, parser) {
   };
 }
 
+// import warning from 'tiny-warning'
+
 //
 
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
@@ -1245,7 +1245,7 @@ class Router {
   // Must build in constructor
 
   constructor(options) {
-    this.updateOptions({
+    this.update({
       defaultPreloadDelay: 50,
       defaultPendingMs: 1000,
       defaultPendingMinMs: 500,
@@ -1255,20 +1255,22 @@ class Router {
       parseSearch: options?.parseSearch ?? defaultParseSearch
     });
   }
-  startReactTransition = () => {
-    warning(false, 'startReactTransition implementation is missing. If you see this, please file an issue.');
-  };
-  setState = () => {
-    warning(false, 'setState implementation is missing. If you see this, please file an issue.');
+
+  // These are default implementations that can optionally be overridden
+  // 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 = functionalUpdate(updater, this.state);
   };
-  updateOptions = newOptions => {
+  update = newOptions => {
     this.options = {
       ...this.options,
       ...newOptions
     };
     this.basepath = `/${trimPath(newOptions.basepath ?? '') ?? ''}`;
     if (!this.history || this.options.history && this.options.history !== this.history) {
-      this.history = this.options.history ?? createBrowserHistory();
+      this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory());
       this.latestLocation = this.parseLocation();
     }
     if (this.options.routeTree !== this.routeTree) {
@@ -2026,6 +2028,7 @@ class Router {
         //   ...s,
         //   status: 'idle',
         //   resolvedLocation: s.location,
+        //   matches,
         // }))
 
         //
@@ -2226,63 +2229,42 @@ class Router {
     }
     return undefined;
   };
-
-  // dehydrate = (): DehydratedRouter => {
-  //   return {
-  //     state: {
-  //       dehydratedMatches: this.state.matches.map((d) =>
-  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
-  //       ),
-  //     },
-  //   }
-  // }
-
-  // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
-  //   let _ctx = __do_not_use_server_ctx
-  //   // Client hydrates from window
-  //   if (typeof document !== 'undefined') {
-  //     _ctx = window.__TSR_DEHYDRATED__
-  //   }
-
-  //   invariant(
-  //     _ctx,
-  //     'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?',
-  //   )
-
-  //   const ctx = _ctx
-  //   this.dehydratedData = ctx.payload as any
-  //   this.options.hydrate?.(ctx.payload as any)
-  //   const dehydratedState = ctx.router.state
-
-  //   let matches = this.matchRoutes(
-  //     this.state.location.pathname,
-  //     this.state.location.search,
-  //   ).map((match) => {
-  //     const dehydratedMatch = dehydratedState.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.setState((s) => {
-  //     return {
-  //       ...s,
-  //       matches: dehydratedState.dehydratedMatches as any,
-  //     }
-  //   })
-  // }
+  dehydrate = () => {
+    return {
+      state: {
+        dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt', 'loaderData']))
+      }
+    };
+  };
+  hydrate = async __do_not_use_server_ctx => {
+    let _ctx = __do_not_use_server_ctx;
+    // Client hydrates from window
+    if (typeof document !== 'undefined') {
+      _ctx = window.__TSR_DEHYDRATED__;
+    }
+    invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
+    const ctx = _ctx;
+    this.dehydratedData = ctx.payload;
+    this.options.hydrate?.(ctx.payload);
+    const dehydratedState = ctx.router.state;
+    let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+      const dehydratedMatch = dehydratedState.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.setState(s => {
+      return {
+        ...s,
+        matches: matches
+      };
+    });
+  };
 
   // resolveMatchPromise = (matchId: string, key: string, value: any) => {
   //   state.matches
@@ -2303,6 +2285,18 @@ function lazyFn(fn, key) {
 function isCtrlEvent(e) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
+function getInitialRouterState(location) {
+  return {
+    status: 'idle',
+    resolvedLocation: location,
+    location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now()
+  };
+}
 
 const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 const windowKey = 'window';