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

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/types/scroll-restoration.d.ts

@@ -4,3 +4,15 @@ export type ScrollRestorationOptions = {
 };
 export declare function useScrollRestoration(options?: ScrollRestorationOptions): void;
 export declare function ScrollRestoration(props: ScrollRestorationOptions): null;
+export declare function useElementScrollRestoration(options: ({
+    id: string;
+    getElement?: () => Element | undefined | null;
+} | {
+    id?: string;
+    getElement: () => Element | undefined | null;
+}) & {
+    getKey?: (location: ParsedLocation) => string;
+}): {
+    scrollX: number;
+    scrollY: number;
+} | undefined;

package/build/umd/index.development.js

@@ -976,7 +976,10 @@
     const match = matches[0];
     const routeId = match?.routeId;
     const route = routesById[routeId];
-    const locationKey = useRouterState().location.state?.key;
+    const router = useRouter();
+    const locationKey = router.latestLocation.state?.key;
+    // const locationKey = useRouterState().location.state?.key
+
     const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
     const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.createElement(PendingComponent, {
       useMatch: route.useMatch,
@@ -1120,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: {
@@ -1145,29 +1136,44 @@
         ...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');
     const state = React__namespace.useMemo(() => ({
       ...preState,
-      status: isTransitioning ? 'pending' : 'idle',
+      status: isAnyTransitioning ? 'pending' : 'idle',
       location: isTransitioning ? router.latestLocation : preState.location,
       pendingMatches: router.pendingMatches
     }), [preState, isTransitioning]);
     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,
@@ -1185,7 +1191,7 @@
         unsub();
       };
     }, [router.history]);
-    React__namespace.useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       if (!isTransitioning && state.resolvedLocation !== state.location) {
         router.emit({
           type: 'onResolved',
@@ -1200,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
@@ -1224,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;
@@ -1264,7 +1266,7 @@
       promise.__deferredState = state;
     }
     if (state.status === 'pending') {
-      throw promise;
+      throw new Promise(r => setTimeout(r, 1)).then(() => promise);
     }
     if (state.status === 'error') {
       throw state.error;
@@ -1550,6 +1552,8 @@
     };
   }
 
+  // import warning from 'tiny-warning'
+
   //
 
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
@@ -1567,7 +1571,7 @@
     // Must build in constructor
 
     constructor(options) {
-      this.updateOptions({
+      this.update({
         defaultPreloadDelay: 50,
         defaultPendingMs: 1000,
         defaultPendingMinMs: 500,
@@ -1577,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) {
@@ -2230,6 +2236,7 @@
             // forcefully show the pending component
             if (pendingPromise) {
               pendingPromise.then(() => {
+                if (latestPromise = checkLatest()) return;
                 didShowPending = true;
                 matches[index] = match = {
                   ...match,
@@ -2249,6 +2256,7 @@
               if (didShowPending && pendingMinMs) {
                 await new Promise(r => setTimeout(r, pendingMinMs));
               }
+              if (latestPromise = checkLatest()) return await latestPromise;
               matches[index] = match = {
                 ...match,
                 error: undefined,
@@ -2317,7 +2325,7 @@
         // Ingest the new matches
         this.setState(s => ({
           ...s,
-          status: 'pending',
+          // status: 'pending',
           location: next,
           matches
         }));
@@ -2346,6 +2354,7 @@
           //   ...s,
           //   status: 'idle',
           //   resolvedLocation: s.location,
+          //   matches,
           // }))
 
           //
@@ -2546,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
@@ -2623,36 +2611,43 @@
   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';
   const delimiter = '___';
   let weakScrolledElements = new WeakSet();
-  let cache;
   const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+  let cache = sessionsStorage ? (() => {
+    const storageKey = 'tsr-scroll-restoration-v2';
+    const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
+      cached: {},
+      next: {}
+    };
+    return {
+      state,
+      set: updater => {
+        cache.state = functionalUpdate(updater, cache.state);
+        window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
+      }
+    };
+  })() : undefined;
   const defaultGetKey = location => location.state.key;
   function useScrollRestoration(options) {
     const router = useRouter();
     useLayoutEffect(() => {
       const getKey = options?.getKey || defaultGetKey;
-      if (sessionsStorage) {
-        if (!cache) {
-          cache = (() => {
-            const storageKey = 'tsr-scroll-restoration-v2';
-            const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
-              cached: {},
-              next: {}
-            };
-            return {
-              state,
-              set: updater => {
-                cache.state = functionalUpdate(updater, cache.state);
-                window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
-              }
-            };
-          })();
-        }
-      }
       const {
         history
       } = window;
@@ -2662,7 +2657,17 @@
       const onScroll = event => {
         if (weakScrolledElements.has(event.target)) return;
         weakScrolledElements.add(event.target);
-        const elementSelector = event.target === document || event.target === window ? windowKey : getCssSelector(event.target);
+        let elementSelector = '';
+        if (event.target === document || event.target === window) {
+          elementSelector = windowKey;
+        } else {
+          const attrId = event.target.getAttribute('data-scroll-restoration-id');
+          if (attrId) {
+            elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
+          } else {
+            elementSelector = getCssSelector(event.target);
+          }
+        }
         if (!cache.state.next[elementSelector]) {
           cache.set(c => ({
             ...c,
@@ -2676,15 +2681,6 @@
           }));
         }
       };
-      const getCssSelector = el => {
-        let path = [],
-          parent;
-        while (parent = el.parentNode) {
-          path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
-          el = parent;
-        }
-        return `${path.join(' > ')}`.toLowerCase();
-      };
       if (typeof document !== 'undefined') {
         document.addEventListener('scroll', onScroll, true);
       }
@@ -2764,6 +2760,32 @@
     useScrollRestoration(props);
     return null;
   }
+  function useElementScrollRestoration(options) {
+    const router = useRouter();
+    const getKey = options?.getKey || defaultGetKey;
+    let elementSelector = '';
+    if (options.id) {
+      elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
+    } else {
+      const element = options.getElement?.();
+      if (!element) {
+        return;
+      }
+      elementSelector = getCssSelector(element);
+    }
+    const restoreKey = getKey(router.latestLocation);
+    const cacheKey = [restoreKey, elementSelector].join(delimiter);
+    return cache.state.cached[cacheKey];
+  }
+  function getCssSelector(el) {
+    let path = [],
+      parent;
+    while (parent = el.parentNode) {
+      path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+      el = parent;
+    }
+    return `${path.join(' > ')}`.toLowerCase();
+  }
 
   function useBlocker(message, condition = true) {
     const {
@@ -2889,6 +2911,7 @@
   exports.typedNavigate = typedNavigate;
   exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
+  exports.useElementScrollRestoration = useElementScrollRestoration;
   exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;
   exports.useLoaderData = useLoaderData;