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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.231",
+  "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.231"
+    "@tanstack/history": "0.0.1-beta.232"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

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,41 +72,33 @@ 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 =
@@ -126,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({
@@ -157,7 +152,7 @@ export function RouterProvider<
     }
   }, [router.history])
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
       router.emit({
         type: 'onResolved',
@@ -174,14 +169,10 @@ export function RouterProvider<
     }
   })
 
-  React.useLayoutEffect(() => {
-    startReactTransition(() => {
-      try {
-        router.load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
+  useLayoutEffect(() => {
+    if (!window.__TSR_DEHYDRATED__) {
+      tryLoad()
+    }
   }, [])
 
   return (
@@ -219,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/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()
     }
 
@@ -1320,6 +1314,7 @@ export class Router<
         //   ...s,
         //   status: 'idle',
         //   resolvedLocation: s.location,
+        //   matches,
         // }))
 
         //
@@ -1582,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
@@ -1662,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(),
+  }
+}