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

package/build/types/RouterProvider.d.ts

@@ -24,11 +24,6 @@ export type MatchRouteFn<TRouteTree extends AnyRoute> = <TFrom extends RoutePath
 export type BuildLocationFn<TRouteTree extends AnyRoute> = (opts: BuildNextOptions) => ParsedLocation;
 export type InjectedHtmlEntry = string | (() => Promise<string> | string);
 export declare const routerContext: React.Context<Router<any, Record<string, any>>>;
-export declare class SearchParamError extends Error {
-}
-export declare class PathParamError extends Error {
-}
-export declare function getInitialRouterState(location: ParsedLocation): RouterState<any>;
 export declare function RouterProvider<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TDehydrated extends Record<string, any> = Record<string, any>>({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>): React.JSX.Element;
 export declare function getRouteMatch<TRouteTree extends AnyRoute>(state: RouterState<TRouteTree>, id: string): undefined | RouteMatch<TRouteTree>;
 export declare function useRouterState<TSelected = RouterState<RegisteredRouter['routeTree']>>(opts?: {

package/build/types/router.d.ts

@@ -46,8 +46,13 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     routeTree?: TRouteTree;
     basepath?: string;
     context?: TRouteTree['types']['routerContext'];
+    dehydrate?: () => TDehydrated;
+    hydrate?: (dehydrated: TDehydrated) => void;
     routeMasks?: RouteMask<TRouteTree>[];
     unmaskOnReload?: boolean;
+    Wrap?: (props: {
+        children: any;
+    }) => JSX.Element;
 }
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     status: 'pending' | 'idle';
@@ -128,8 +133,8 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     flatRoutes: AnyRoute[];
     constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>);
     startReactTransition: (fn: () => void) => void;
-    setState: (fn: (s: RouterState<TRouteTree>) => RouterState<TRouteTree>) => void;
-    updateOptions: (newOptions: PickAsRequired<RouterOptions<TRouteTree, TDehydrated>, 'stringifySearch' | 'parseSearch' | 'context'>) => void;
+    setState: (updater: NonNullableUpdater<RouterState<TRouteTree>>) => void;
+    update: (newOptions: RouterConstructorOptions<TRouteTree, TDehydrated>) => void;
     buildRouteTree: () => void;
     subscribe: <TType extends keyof RouterEvents>(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void;
     emit: (routerEvent: RouterEvent) => void;
@@ -163,5 +168,12 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;
     dehydrateData: <T>(key: any, getData: T | (() => T | Promise<T>)) => () => T | undefined;
     hydrateData: <T extends unknown = unknown>(key: any) => T | undefined;
+    dehydrate: () => DehydratedRouter;
+    hydrate: (__do_not_use_server_ctx?: HydrationCtx) => Promise<void>;
 }
 export declare function lazyFn<T extends Record<string, (...args: any[]) => any>, TKey extends keyof T = 'default'>(fn: () => Promise<T>, key?: TKey): (...args: Parameters<T[TKey]>) => Promise<ReturnType<T[TKey]>>;
+export declare class SearchParamError extends Error {
+}
+export declare class PathParamError extends Error {
+}
+export declare function getInitialRouterState(location: ParsedLocation): RouterState<any>;

package/build/umd/index.development.js

@@ -1123,24 +1123,12 @@
   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: {
@@ -1148,6 +1136,17 @@
         ...rest?.context
       }
     });
+    const inner = /*#__PURE__*/React__namespace.createElement(RouterProviderInner, {
+      router: router
+    });
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, inner);
+    }
+    return inner;
+  }
+  function RouterProviderInner({
+    router
+  }) {
     const [preState, setState] = React__namespace.useState(() => router.state);
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
     const isAnyTransitioning = isTransitioning || preState.matches.some(d => d.status === 'pending');
@@ -1160,18 +1159,21 @@
     router.setState = setState;
     router.state = state;
     router.startReactTransition = startReactTransition;
-    React__namespace.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,
@@ -1189,7 +1191,7 @@
         unsub();
       };
     }, [router.history]);
-    React__namespace.useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       if (!isTransitioning && state.resolvedLocation !== state.location) {
         router.emit({
           type: 'onResolved',
@@ -1204,14 +1206,10 @@
         }));
       }
     });
-    React__namespace.useLayoutEffect(() => {
-      startReactTransition(() => {
-        try {
-          router.load();
-        } catch (err) {
-          console.error(err);
-        }
-      });
+    useLayoutEffect$1(() => {
+      if (!window.__TSR_DEHYDRATED__) {
+        tryLoad();
+      }
     }, []);
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: router
@@ -1228,7 +1226,7 @@
     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__namespace.useContext(resolvedContext);
     warning(value, 'useRouter must be used inside a <RouterProvider> component!');
     return value;
@@ -1554,6 +1552,8 @@
     };
   }
 
+  // import warning from 'tiny-warning'
+
   //
 
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
@@ -1571,7 +1571,7 @@
     // Must build in constructor
 
     constructor(options) {
-      this.updateOptions({
+      this.update({
         defaultPreloadDelay: 50,
         defaultPendingMs: 1000,
         defaultPendingMinMs: 500,
@@ -1581,20 +1581,22 @@
         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) {
@@ -2352,6 +2354,7 @@
           //   ...s,
           //   status: 'idle',
           //   resolvedLocation: s.location,
+          //   matches,
           // }))
 
           //
@@ -2552,63 +2555,42 @@
       }
       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
@@ -2629,6 +2611,18 @@
   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__namespace.useLayoutEffect : React__namespace.useEffect;
   const windowKey = 'window';