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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.230",
+  "version": "0.0.1-beta.232",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.230"
+    "@tanstack/history": "0.0.1-beta.232"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -94,7 +94,9 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   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) as any

package/src/RouterProvider.tsx

@@ -18,7 +18,7 @@ import {
   RouterOptions,
   RouterState,
 } from './router'
-import { NoInfer, PickAsRequired } from './utils'
+import { NoInfer, PickAsRequired, useLayoutEffect } from './utils'
 import { MatchRouteOptions } from './Matches'
 import { RouteMatch } from './Matches'
 
@@ -72,48 +72,42 @@ if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext as any
 }
 
-export class SearchParamError extends Error {}
-
-export class PathParamError extends Error {}
-
-export function getInitialRouterState(
-  location: ParsedLocation,
-): RouterState<any> {
-  return {
-    status: 'idle',
-    resolvedLocation: location,
-    location,
-    matches: [],
-    pendingMatches: [],
-    lastUpdated: Date.now(),
-  }
-}
-
 export function RouterProvider<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TDehydrated extends Record<string, any> = Record<string, any>,
 >({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>) {
   // Allow the router to update options on the router instance
-  router.updateOptions({
+  router.update({
     ...router.options,
     ...rest,
-
     context: {
       ...router.options.context,
       ...rest?.context,
     },
-  } as PickAsRequired<
-    RouterOptions<TRouteTree, TDehydrated>,
-    'stringifySearch' | 'parseSearch' | 'context'
-  >)
+  } as any)
+
+  const inner = <RouterProviderInner<TRouteTree, TDehydrated> router={router} />
+
+  if (router.options.Wrap) {
+    return <router.options.Wrap>{inner}</router.options.Wrap>
+  }
+
+  return inner
+}
 
+function RouterProviderInner<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router }: RouterProps<TRouteTree, TDehydrated>) {
   const [preState, setState] = React.useState(() => router.state)
   const [isTransitioning, startReactTransition] = React.useTransition()
+  const isAnyTransitioning =
+    isTransitioning || preState.matches.some((d) => d.status === 'pending')
 
   const state = React.useMemo<RouterState<TRouteTree>>(
     () => ({
       ...preState,
-      status: isTransitioning ? 'pending' : 'idle',
+      status: isAnyTransitioning ? 'pending' : 'idle',
       location: isTransitioning ? router.latestLocation : preState.location,
       pendingMatches: router.pendingMatches,
     }),
@@ -124,19 +118,22 @@ export function RouterProvider<
   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(() => {
     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({
@@ -155,7 +152,7 @@ export function RouterProvider<
     }
   }, [router.history])
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
       router.emit({
         type: 'onResolved',
@@ -172,14 +169,10 @@ export function RouterProvider<
     }
   })
 
-  React.useLayoutEffect(() => {
-    startReactTransition(() => {
-      try {
-        router.load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
+  useLayoutEffect(() => {
+    if (!window.__TSR_DEHYDRATED__) {
+      tryLoad()
+    }
   }, [])
 
   return (
@@ -217,7 +210,10 @@ export type RouterProps<
 export function useRouter<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >(): Router<TRouteTree> {
-  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 as any

package/src/awaited.tsx

@@ -18,7 +18,7 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
   }
 
   if (state.status === 'pending') {
-    throw promise
+    throw new Promise((r) => setTimeout(r, 1)).then(() => promise)
   }
 
   if (state.status === 'error') {

package/src/router.ts

@@ -3,6 +3,7 @@ import {
   HistoryState,
   RouterHistory,
   createBrowserHistory,
+  createMemoryHistory,
 } from '@tanstack/history'
 
 //
@@ -28,6 +29,7 @@ import {
   functionalUpdate,
   last,
   pick,
+  PickAsPartial,
 } from './utils'
 import {
   ErrorRouteComponent,
@@ -45,11 +47,9 @@ import {
   InjectedHtmlEntry,
   MatchRouteFn,
   NavigateFn,
-  PathParamError,
-  SearchParamError,
-  getInitialRouterState,
   getRouteMatch,
 } from './RouterProvider'
+
 import {
   cleanPath,
   interpolatePath,
@@ -62,7 +62,7 @@ import {
 } from './path'
 import invariant from 'tiny-invariant'
 import { isRedirect } from './redirects'
-import warning from 'tiny-warning'
+// import warning from 'tiny-warning'
 
 //
 
@@ -125,10 +125,11 @@ export interface RouterOptions<
   routeTree?: TRouteTree
   basepath?: string
   context?: TRouteTree['types']['routerContext']
-  // dehydrate?: () => TDehydrated
-  // hydrate?: (dehydrated: TDehydrated) => void
+  dehydrate?: () => TDehydrated
+  hydrate?: (dehydrated: TDehydrated) => void
   routeMasks?: RouteMask<TRouteTree>[]
   unmaskOnReload?: boolean
+  Wrap?: (props: { children: any }) => JSX.Element
 }
 
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
@@ -249,7 +250,7 @@ export class Router<
   flatRoutes!: AnyRoute[]
 
   constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>) {
-    this.updateOptions({
+    this.update({
       defaultPreloadDelay: 50,
       defaultPendingMs: 1000,
       defaultPendingMinMs: 500,
@@ -260,28 +261,17 @@ export class Router<
     })
   }
 
-  startReactTransition: (fn: () => void) => void = () => {
-    warning(
-      false,
-      'startReactTransition implementation is missing. If you see this, please file an issue.',
-    )
-  }
-
-  setState: (
-    fn: (s: RouterState<TRouteTree>) => RouterState<TRouteTree>,
-  ) => void = () => {
-    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: () => void) => void = (fn) => fn()
+  setState: (updater: NonNullableUpdater<RouterState<TRouteTree>>) => void = (
+    updater,
+  ) => {
+    this.state = functionalUpdate(updater, this.state)
   }
 
-  updateOptions = (
-    newOptions: PickAsRequired<
-      RouterOptions<TRouteTree, TDehydrated>,
-      'stringifySearch' | 'parseSearch' | 'context'
-    >,
-  ) => {
+  update = (newOptions: RouterConstructorOptions<TRouteTree, TDehydrated>) => {
     this.options = {
       ...this.options,
       ...newOptions,
@@ -293,7 +283,11 @@ export class Router<
       !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()
     }
 
@@ -1168,6 +1162,8 @@ export class Router<
             // forcefully show the pending component
             if (pendingPromise) {
               pendingPromise.then(() => {
+                if ((latestPromise = checkLatest())) return
+
                 didShowPending = true
                 matches[index] = match = {
                   ...match,
@@ -1195,6 +1191,8 @@ export class Router<
                 await new Promise((r) => setTimeout(r, pendingMinMs))
               }
 
+              if ((latestPromise = checkLatest())) return await latestPromise
+
               matches[index] = match = {
                 ...match,
                 error: undefined,
@@ -1279,7 +1277,7 @@ export class Router<
       // Ingest the new matches
       this.setState((s) => ({
         ...s,
-        status: 'pending',
+        // status: 'pending',
         location: next,
         matches,
       }))
@@ -1316,6 +1314,7 @@ export class Router<
         //   ...s,
         //   status: 'idle',
         //   resolvedLocation: s.location,
+        //   matches,
         // }))
 
         //
@@ -1578,62 +1577,69 @@ export class Router<
     return undefined
   }
 
-  // dehydrate = (): DehydratedRouter => {
-  //   return {
-  //     state: {
-  //       dehydratedMatches: this.state.matches.map((d) =>
-  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
-  //       ),
-  //     },
-  //   }
-  // }
+  dehydrate = (): DehydratedRouter => {
+    return {
+      state: {
+        dehydratedMatches: this.state.matches.map((d) =>
+          pick(d, [
+            'fetchedAt',
+            'invalid',
+            'id',
+            'status',
+            'updatedAt',
+            'loaderData',
+          ]),
+        ),
+      },
+    }
+  }
 
-  // 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,
-  //     }
-  //   })
-  // }
+  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: matches as any,
+      }
+    })
+  }
 
   // resolveMatchPromise = (matchId: string, key: string, value: any) => {
   //   state.matches
@@ -1658,3 +1664,19 @@ export function lazyFn<
 function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
+export class SearchParamError extends Error {}
+
+export class PathParamError extends Error {}
+
+export function getInitialRouterState(
+  location: ParsedLocation,
+): RouterState<any> {
+  return {
+    status: 'idle',
+    resolvedLocation: location,
+    location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now(),
+  }
+}

package/src/scroll-restoration.tsx

@@ -23,10 +23,26 @@ type Cache = {
   set: (updater: NonNullableUpdater<CacheState>) => void
 }
 
-let cache: Cache
-
 const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
 
+let cache: Cache = sessionsStorage
+  ? (() => {
+      const storageKey = 'tsr-scroll-restoration-v2'
+
+      const state: CacheState = 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 as any)
+
 export type ScrollRestorationOptions = {
   getKey?: (location: ParsedLocation) => string
 }
@@ -39,29 +55,6 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
   useLayoutEffect(() => {
     const getKey = options?.getKey || defaultGetKey
 
-    if (sessionsStorage) {
-      if (!cache) {
-        cache = (() => {
-          const storageKey = 'tsr-scroll-restoration-v2'
-
-          const state: CacheState = 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
     if (history.scrollRestoration) {
       history.scrollRestoration = 'manual'
@@ -71,10 +64,21 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
       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 as Element).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) => ({
@@ -90,20 +94,6 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
       }
     }
 
-    const getCssSelector = (el: any): string => {
-      let path = [],
-        parent
-      while ((parent = el.parentNode)) {
-        path.unshift(
-          `${el.tagName}:nth-child(${
-            ([].indexOf as any).call(parent.children, el) + 1
-          })`,
-        )
-        el = parent
-      }
-      return `${path.join(' > ')}`.toLowerCase()
-    }
-
     if (typeof document !== 'undefined') {
       document.addEventListener('scroll', onScroll, true)
     }
@@ -190,3 +180,51 @@ export function ScrollRestoration(props: ScrollRestorationOptions) {
   useScrollRestoration(props)
   return null
 }
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+) {
+  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: any): string {
+  let path = [],
+    parent
+  while ((parent = el.parentNode)) {
+    path.unshift(
+      `${el.tagName}:nth-child(${
+        ([].indexOf as any).call(parent.children, el) + 1
+      })`,
+    )
+    el = parent
+  }
+  return `${path.join(' > ')}`.toLowerCase()
+}