@tanstack/react-router 0.0.1-beta.219 → 0.0.1-beta.220

package/package.json

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

package/src/Matches.tsx

@@ -8,7 +8,7 @@ import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, rootRouteId } from './route'
 import { RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { NoInfer, StrictOrFrom, functionalUpdate } from './utils'
+import { NoInfer, StrictOrFrom } from './utils'
 
 export function Matches() {
   const { routesById, state } = useRouter()

package/src/RouterProvider.tsx

@@ -61,6 +61,7 @@ import {
   pick,
   replaceEqualDeep,
   useStableCallback,
+  escapeJSON,
 } from './utils'
 import { MatchRouteOptions } from './Matches'
 
@@ -116,6 +117,8 @@ export type BuildLocationFn<TRouteTree extends AnyRoute> = (
   opts: BuildNextOptions,
 ) => ParsedLocation
 
+export type InjectedHtmlEntry = string | (() => Promise<string> | string)
+
 export type RouterContext<
   TRouteTree extends AnyRoute,
   // TDehydrated extends Record<string, any>,
@@ -132,6 +135,13 @@ export type RouterContext<
   buildLocation: BuildLocationFn<TRouteTree>
   subscribe: Router<TRouteTree>['subscribe']
   resetNextScrollRef: React.MutableRefObject<boolean>
+  injectedHtmlRef: React.MutableRefObject<InjectedHtmlEntry[]>
+  injectHtml: (entry: InjectedHtmlEntry) => void
+  dehydrateData: <T>(
+    key: any,
+    getData: T | (() => Promise<T> | T),
+  ) => () => void
+  hydrateData: <T>(key: any) => T | undefined
 }
 
 export const routerContext = React.createContext<RouterContext<any>>(null!)
@@ -986,21 +996,24 @@ export function RouterProvider<
 
               // Default to reloading the route all the time
               let shouldReload = true
-              let shouldReloadDeps =
-                typeof route.options.shouldReload === 'function'
-                  ? route.options.shouldReload?.(loaderContext)
-                  : !!route.options.shouldReload
-
-              if (typeof shouldReloadDeps === 'object') {
-                // compare the deps to see if they've changed
-                shouldReload = !deepEqual(
-                  shouldReloadDeps,
-                  match.shouldReloadDeps,
-                )
 
-                match.shouldReloadDeps = shouldReloadDeps
-              } else {
-                shouldReload = !!shouldReloadDeps
+              if (cause !== 'enter') {
+                let shouldReloadDeps =
+                  typeof route.options.shouldReload === 'function'
+                    ? route.options.shouldReload?.(loaderContext)
+                    : !!(route.options.shouldReload ?? true)
+
+                if (typeof shouldReloadDeps === 'object') {
+                  // compare the deps to see if they've changed
+                  shouldReload = !deepEqual(
+                    shouldReloadDeps,
+                    match.shouldReloadDeps,
+                  )
+
+                  match.shouldReloadDeps = shouldReloadDeps
+                } else {
+                  shouldReload = !!shouldReloadDeps
+                }
               }
 
               // If the user doesn't want the route to reload, just
@@ -1377,16 +1390,6 @@ export function RouterProvider<
     }
   }, [history])
 
-  React.useLayoutEffect(() => {
-    startReactTransition(() => {
-      try {
-        load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
-  }, [])
-
   const matchRoute = useStableCallback<MatchRouteFn<TRouteTree>>(
     (location, opts) => {
       location = {
@@ -1429,6 +1432,60 @@ export function RouterProvider<
     },
   )
 
+  const injectedHtmlRef = React.useRef<InjectedHtmlEntry[]>([])
+
+  const injectHtml = useStableCallback(
+    async (html: string | (() => Promise<string> | string)) => {
+      injectedHtmlRef.current.push(html)
+    },
+  )
+
+  const dehydrateData = useStableCallback(
+    <T,>(key: any, getData: T | (() => Promise<T> | T)) => {
+      if (typeof document === 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+        injectHtml(async () => {
+          const id = `__TSR_DEHYDRATED__${strKey}`
+          const data =
+            typeof getData === 'function' ? await (getData as any)() : getData
+          return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
+            strKey,
+          )}"] = ${JSON.stringify(data)}
+        ;(() => {
+          var el = document.getElementById('${id}')
+          el.parentElement.removeChild(el)
+        })()
+        </script>`
+        })
+
+        return () => hydrateData<T>(key)
+      }
+
+      return () => undefined
+    },
+  )
+
+  const hydrateData = useStableCallback(<T extends any = unknown>(key: any) => {
+    if (typeof document !== 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+      return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+    }
+
+    return undefined
+  })
+
+  React.useLayoutEffect(() => {
+    startReactTransition(() => {
+      try {
+        load()
+      } catch (err) {
+        console.error(err)
+      }
+    })
+  }, [])
+
   const routerContextValue: RouterContext<TRouteTree> = {
     routeTree: router.routeTree,
     navigate,
@@ -1442,6 +1499,10 @@ export function RouterProvider<
     buildLocation,
     subscribe: router.subscribe,
     resetNextScrollRef,
+    injectedHtmlRef,
+    injectHtml,
+    dehydrateData,
+    hydrateData,
   }
 
   return (

package/src/awaited.tsx

@@ -1,40 +1,40 @@
-// import { DeferredPromise, isDehydratedDeferred } from '@tanstack/react-router'
-// import { useRouter } from './react'
-
-// export type AwaitOptions<T> = {
-//   promise: DeferredPromise<T>
-// }
-
-// export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
-//   const router = useRouter()
-
-//   let state = promise.__deferredState
-//   const key = `__TSR__DEFERRED__${state.uid}`
-
-//   if (isDehydratedDeferred(promise)) {
-//     state = router.hydrateData(key)!
-//     promise = Promise.resolve(state.data) as DeferredPromise<any>
-//     promise.__deferredState = state
-//   }
-
-//   if (state.status === 'pending') {
-//     throw promise
-//   }
-
-//   if (state.status === 'error') {
-//     throw state.error
-//   }
-
-//   router.dehydrateData(key, state)
-
-//   return [state.data]
-// }
-
-// export function Await<T>(
-//   props: AwaitOptions<T> & {
-//     children: (result: T) => JSX.Element
-//   },
-// ) {
-//   const awaited = useAwaited(props)
-//   return props.children(...awaited)
-// }
+import { useRouter } from './RouterProvider'
+import { DeferredPromise, isDehydratedDeferred } from './defer'
+
+export type AwaitOptions<T> = {
+  promise: DeferredPromise<T>
+}
+
+export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
+  const router = useRouter()
+
+  let state = promise.__deferredState
+  const key = `__TSR__DEFERRED__${state.uid}`
+
+  if (isDehydratedDeferred(promise)) {
+    state = router.hydrateData(key)!
+    promise = Promise.resolve(state.data) as DeferredPromise<any>
+    promise.__deferredState = state
+  }
+
+  if (state.status === 'pending') {
+    throw promise
+  }
+
+  if (state.status === 'error') {
+    throw state.error
+  }
+
+  router.dehydrateData(key, state)
+
+  return [state.data]
+}
+
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    children: (result: T) => JSX.Element
+  },
+) {
+  const awaited = useAwaited(props)
+  return props.children(...awaited)
+}

package/src/defer.ts

@@ -1,55 +1,55 @@
-// export type DeferredPromiseState<T> = { uid: string } & (
-//   | {
-//       status: 'pending'
-//       data?: T
-//       error?: unknown
-//     }
-//   | {
-//       status: 'success'
-//       data: T
-//     }
-//   | {
-//       status: 'error'
-//       data?: T
-//       error: unknown
-//     }
-// )
+export type DeferredPromiseState<T> = { uid: string } & (
+  | {
+      status: 'pending'
+      data?: T
+      error?: unknown
+    }
+  | {
+      status: 'success'
+      data: T
+    }
+  | {
+      status: 'error'
+      data?: T
+      error: unknown
+    }
+)
 
-// export type DeferredPromise<T> = Promise<T> & {
-//   __deferredState: DeferredPromiseState<T>
-// }
+export type DeferredPromise<T> = Promise<T> & {
+  __deferredState: DeferredPromiseState<T>
+}
 
-// export function defer<T>(_promise: Promise<T>) {
-//   const promise = _promise as DeferredPromise<T>
+export function defer<T>(_promise: Promise<T>) {
+  const promise = _promise as DeferredPromise<T>
 
-//   if (!promise.__deferredState) {
-//     promise.__deferredState = {
-//       uid: Math.random().toString(36).slice(2),
-//       status: 'pending',
-//     }
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending',
+    }
 
-//     const state = promise.__deferredState
+    const state = promise.__deferredState
 
-//     promise
-//       .then((data) => {
-//         state.status = 'success' as any
-//         state.data = data
-//       })
-//       .catch((error) => {
-//         state.status = 'error' as any
-//         state.error = error
-//       })
-//   }
+    promise
+      .then((data) => {
+        state.status = 'success' as any
+        state.data = data
+      })
+      .catch((error) => {
+        state.status = 'error' as any
+        state.error = error
+      })
+  }
 
-//   return promise
-// }
+  return promise
+}
 
-// export function isDehydratedDeferred(obj: any): boolean {
-//   return (
-//     typeof obj === 'object' &&
-//     obj !== null &&
-//     !(obj instanceof Promise) &&
-//     !obj.then &&
-//     '__deferredState' in obj
-//   )
-// }
+export function isDehydratedDeferred(obj: any): boolean {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    !(obj instanceof Promise) &&
+    !obj.then &&
+    '__deferredState' in obj
+  )
+}

package/src/index.tsx

@@ -2,8 +2,8 @@
 export * from '@tanstack/history'
 export { default as invariant } from 'tiny-invariant'
 export { default as warning } from 'tiny-warning'
-// export * from './awaited
-// export * from './defer'
+export * from './awaited'
+export * from './defer'
 export * from './CatchBoundary'
 export * from './fileRoute'
 export * from './history'

package/src/router.ts

@@ -281,49 +281,6 @@ export class Router<
   //   })
   // }
 
-  // TODO:
-  // injectedHtml: (string | (() => Promise<string> | string))[] = []
-
-  // TODO:
-  // injectHtml = async (html: string | (() => Promise<string> | string)) => {
-  //   this.injectedHtml.push(html)
-  // }
-
-  // TODO:
-  // dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
-  //   if (typeof document === 'undefined') {
-  //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-  //     this.injectHtml(async () => {
-  //       const id = `__TSR_DEHYDRATED__${strKey}`
-  //       const data =
-  //         typeof getData === 'function' ? await (getData as any)() : getData
-  //       return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
-  //         strKey,
-  //       )}"] = ${JSON.stringify(data)}
-  //       ;(() => {
-  //         var el = document.getElementById('${id}')
-  //         el.parentElement.removeChild(el)
-  //       })()
-  //       </script>`
-  //     })
-
-  //     return () => this.hydrateData<T>(key)
-  //   }
-
-  //   return () => undefined
-  // }
-
-  // hydrateData = <T = unknown>(key: any) => {
-  //   if (typeof document !== 'undefined') {
-  //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-  //     return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
-  //   }
-
-  //   return undefined
-  // }
-
   // resolveMatchPromise = (matchId: string, key: string, value: any) => {
   //   state.matches
   //     .find((d) => d.id === matchId)
@@ -359,13 +316,6 @@ export class Router<
   // }
 }
 
-function escapeJSON(jsonString: string) {
-  return jsonString
-    .replace(/\\/g, '\\\\') // Escape backslashes
-    .replace(/'/g, "\\'") // Escape single quotes
-    .replace(/"/g, '\\"') // Escape double quotes
-}
-
 // A function that takes an import() argument which is a function and returns a new function that will
 // proxy arguments from the caller to the imported function, retaining all type
 // information along the way

package/src/utils.ts

@@ -341,3 +341,10 @@ export function useRouteContext<
 
 export const useLayoutEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+export function escapeJSON(jsonString: string) {
+  return jsonString
+    .replace(/\\/g, '\\\\') // Escape backslashes
+    .replace(/'/g, "\\'") // Escape single quotes
+    .replace(/"/g, '\\"') // Escape double quotes
+}