@tanstack/router-core 0.0.1-beta.4 → 0.0.1-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",

package/src/router.ts

@@ -45,6 +45,7 @@ import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   functionalUpdate,
   last,
+  pick,
   PickAsRequired,
   PickRequired,
   replaceEqualDeep,
@@ -172,7 +173,6 @@ export interface RouterState {
   location: Location
   matches: RouteMatch[]
   lastUpdated: number
-  loaderData: unknown
   currentAction?: ActionState
   latestAction?: ActionState
   actions: Record<string, Action>
@@ -225,6 +225,22 @@ type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
+interface DehydratedRouterState
+  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {
+  matches: DehydratedRouteMatch[]
+}
+
+interface DehydratedRouteMatch
+  extends Pick<
+    RouteMatch<any, any>,
+    | 'matchId'
+    | 'status'
+    | 'routeLoaderData'
+    | 'loaderData'
+    | 'isInvalid'
+    | 'invalidAt'
+  > {}
+
 export interface Router<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
@@ -303,6 +319,8 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
+  dehydrateState: () => DehydratedRouterState
+  hydrateState: (state: DehydratedRouterState) => void
   __: {
     buildRouteTree: (
       routeConfig: RouteConfig,
@@ -366,7 +384,6 @@ export function createRouter<
       matches: [],
       actions: {},
       loaders: {},
-      loaderData: {} as any,
       lastUpdated: Date.now(),
       isFetching: false,
       isPreloading: false,
@@ -398,6 +415,47 @@ export function createRouter<
       router.listeners.forEach((listener) => listener(router))
     },
 
+    dehydrateState: () => {
+      const {} = router.state
+
+      return {
+        ...pick(router.state, ['status', 'location', 'lastUpdated']),
+        matches: router.state.matches.map((match) =>
+          pick(match, [
+            'matchId',
+            'status',
+            'routeLoaderData',
+            'loaderData',
+            'isInvalid',
+            'invalidAt',
+          ]),
+        ),
+      }
+    },
+
+    hydrateState: (dehydratedState) => {
+      // Match the routes
+      const matches = router.matchRoutes(router.location.pathname, {
+        strictParseParams: true,
+      })
+
+      router.state = {
+        ...router.state,
+        ...dehydratedState,
+        matches: matches.map((match) => {
+          const dehydratedMatch = dehydratedState.matches.find(
+            (d: any) => d.matchId === match.matchId,
+          )
+          invariant(
+            dehydratedMatch,
+            'Oh no! Dehydrated route matches did not match the active state of the router 😬',
+          )
+          Object.assign(match, dehydratedMatch)
+          return match
+        }),
+      }
+    },
+
     mount: () => {
       const next = router.__.buildLocation({
         to: '.',
@@ -409,11 +467,12 @@ export function createRouter<
       // to the current location. Otherwise, load the current location.
       if (next.href !== router.location.href) {
         router.__.commitLocation(next, true)
-      } else {
-        router.loadLocation()
       }
 
-      const unsub = history.listen((event) => {
+      router.loadLocation()
+
+      const unsub = router.history.listen((event) => {
+        console.log(event.location)
         router.loadLocation(
           router.__.parseLocation(event.location, router.location),
         )
@@ -440,6 +499,15 @@ export function createRouter<
     },
 
     update: (opts) => {
+      const newHistory = opts?.history !== router.history
+      if (!router.location || newHistory) {
+        if (opts?.history) {
+          router.history = opts.history
+        }
+        router.location = router.__.parseLocation(router.history.location)
+        router.state.location = router.location
+      }
+
       Object.assign(router.options, opts)
 
       const { basepath, routeConfig } = router.options
@@ -487,7 +555,7 @@ export function createRouter<
       router.cancelMatches()
 
       // Match the routes
-      const matches = router.matchRoutes(location.pathname, {
+      const matches = router.matchRoutes(router.location.pathname, {
         strictParseParams: true,
       })
 
@@ -1011,12 +1079,6 @@ export function createRouter<
           return routeConfigs.map((routeConfig) => {
             const routeOptions = routeConfig.options
             const route = createRoute(routeConfig, routeOptions, parent, router)
-
-            // {
-            //   pendingMs: routeOptions.pendingMs ?? router.defaultPendingMs,
-            //   pendingMinMs: routeOptions.pendingMinMs ?? router.defaultPendingMinMs,
-            // }
-
             const existingRoute = (router.routesById as any)[route.routeId]
 
             if (existingRoute) {
@@ -1211,9 +1273,6 @@ export function createRouter<
     },
   }
 
-  router.location = router.__.parseLocation(history.location)
-  router.state.location = router.location
-
   router.update(userOptions)
 
   // Allow frameworks to hook into the router creation

package/src/utils.ts

@@ -155,3 +155,9 @@ export function functionalUpdate<TResult>(
 
   return updater
 }
+
+export function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K> {
+  return keys.reduce((obj: any, key: K) => {
+    obj[key] = parent[key]
+  }, {} as any)
+}