@tanstack/react-router 1.97.14 → 1.97.17

package/src/router.ts

@@ -5,8 +5,6 @@ import {
 } from '@tanstack/history'
 import { Store, batch } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
-import warning from 'tiny-warning'
-import jsesc from 'jsesc'
 import { rootRouteId } from './root'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
@@ -30,7 +28,7 @@ import {
 } from './path'
 import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
-import { defaultTransformer } from './transformer'
+import type { StartSerializer } from './serializer'
 import type * as React from 'react'
 import type {
   HistoryLocation,
@@ -83,42 +81,15 @@ import type {
 import type { AnyRedirect, ResolvedRedirect } from './redirects'
 import type { NotFoundError } from './not-found'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
-import type { RouterTransformer } from './transformer'
 import type { AnySchema, AnyValidator } from './validators'
 
-export interface TSRGlobalMatch {
-  index: number
-  __beforeLoadContext?: string
-  loaderData?: string
-  extracted: Record<string, ClientExtractedEntry>
-}
-export interface TSRGlobal {
-  matches: Array<TSRGlobalMatch>
-  streamedValues: Record<
-    string,
-    {
-      value: any
-      parsed: any
-    }
-  >
-  cleanScripts: () => void
-  dehydrated?: any
-}
 declare global {
   interface Window {
-    __TSR__?: RegisteredTSRGlobal
-    __TSR_ROUTER_CONTEXT__?: React.Context<Router<any, any, any>>
+    __TSR_ROUTER__?: AnyRouter
   }
 }
 
-type RegisteredTSRGlobal = Register extends {
-  __TSR__: infer TTSR extends TSRGlobal
-}
-  ? TTSR
-  : TSRGlobal
-
 export interface Register {
-  // __TSR__: TSRGlobal
   // router: Router
 }
 
@@ -138,11 +109,6 @@ export type RegisteredRouter = Register extends {
   ? TRouter
   : AnyRouter
 
-export type HydrationCtx = {
-  router: DehydratedRouter
-  payload: Record<string, any>
-}
-
 export type InferRouterContext<TRouteTree extends AnyRoute> =
   TRouteTree extends RootRoute<
     any,
@@ -157,32 +123,10 @@ export type InferRouterContext<TRouteTree extends AnyRoute> =
     ? TRouterContext
     : AnyContext
 
-export interface ClientExtractedBaseEntry {
-  type: string
-  path: Array<string>
-}
-
 export type ControllablePromise<T = any> = Promise<T> & {
   resolve: (value: T) => void
   reject: (value?: any) => void
 }
-export interface ClientExtractedPromise extends ClientExtractedBaseEntry {
-  type: 'promise'
-  value?: ControllablePromise<any>
-}
-
-export interface ClientExtractedStream extends ClientExtractedBaseEntry {
-  type: 'stream'
-  value?: ReadableStream & { controller?: ReadableStreamDefaultController }
-}
-
-export type ClientExtractedEntry =
-  | ClientExtractedStream
-  | ClientExtractedPromise
-
-export type StreamState = {
-  promises: Array<ControlledPromise<string | null>>
-}
 
 export type RouterContextOptions<TRouteTree extends AnyRoute> =
   AnyContext extends InferRouterContext<TRouteTree>
@@ -195,13 +139,14 @@ export type RouterContextOptions<TRouteTree extends AnyRoute> =
 
 export type TrailingSlashOption = 'always' | 'never' | 'preserve'
 
+export type InjectedHtmlEntry = Promise<string>
+
 export interface RouterOptions<
   TRouteTree extends AnyRoute,
   TTrailingSlashOption extends TrailingSlashOption,
   TDefaultStructuralSharingOption extends boolean = false,
   TRouterHistory extends RouterHistory = RouterHistory,
   TDehydrated extends Record<string, any> = Record<string, any>,
-  TSerializedError extends Record<string, any> = Record<string, any>,
 > {
   /**
    * The history object that will be used to manage the browser history.
@@ -456,19 +401,6 @@ export interface RouterOptions<
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors#default-router-wide-not-found-handling)
    */
   defaultNotFoundComponent?: NotFoundRouteComponent
-  /**
-   * The transformer that will be used when sending data between the server and the client during SSR.
-   *
-   * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#transformer-property)
-   * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/ssr#data-transformers)
-   */
-  transformer?: RouterTransformer
-  /**
-   * The serializer object that will be used to determine how errors are serialized and deserialized between the server and the client.
-   *
-   * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#errorserializer-property)
-   */
-  errorSerializer?: RouterErrorSerializer<TSerializedError>
   /**
    * Configures how trailing slashes are treated.
    *
@@ -566,20 +498,6 @@ export interface MatchedRoutesResult {
   routeParams: Record<string, string>
 }
 
-export interface DehydratedRouterState {
-  dehydratedMatches: Array<DehydratedRouteMatch>
-}
-
-export type DehydratedRouteMatch = Pick<
-  MakeRouteMatch,
-  'id' | 'status' | 'updatedAt' | 'loaderData'
->
-
-export interface DehydratedRouter {
-  state: DehydratedRouterState
-  manifest?: Manifest
-}
-
 export interface ViewTransitionOptions {
   types: Array<string>
 }
@@ -590,15 +508,13 @@ export type RouterConstructorOptions<
   TDefaultStructuralSharingOption extends boolean,
   TRouterHistory extends RouterHistory,
   TDehydrated extends Record<string, any>,
-  TSerializedError extends Record<string, any>,
 > = Omit<
   RouterOptions<
     TRouteTree,
     TTrailingSlashOption,
     TDefaultStructuralSharingOption,
     TRouterHistory,
-    TDehydrated,
-    TSerializedError
+    TDehydrated
   >,
   'context'
 > &
@@ -682,6 +598,10 @@ export type RouterEvents = {
     pathChanged: boolean
     hrefChanged: boolean
   }
+  onInjectedHtml: {
+    type: 'onInjectedHtml'
+    promise: Promise<string>
+  }
 }
 
 export type RouterEvent = RouterEvents[keyof RouterEvents]
@@ -706,8 +626,7 @@ export function createRouter<
         TTrailingSlashOption,
         TDefaultStructuralSharingOption,
         TRouterHistory,
-        TDehydrated,
-        TSerializedError
+        TDehydrated
       >,
 ) {
   return new Router<
@@ -743,42 +662,18 @@ export class Router<
   shouldViewTransition?: boolean | ViewTransitionOptions = undefined
   isViewTransitionTypesSupported?: boolean = undefined
   subscribers = new Set<RouterListener<RouterEvent>>()
-  dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
-  manifest?: Manifest
-  AfterEachMatch?: (props: {
-    match: Pick<
-      AnyRouteMatch,
-      'id' | 'status' | 'error' | 'loadPromise' | 'minPendingPromise'
-    >
-    matchIndex: number
-  }) => any
-  serializeLoaderData?: (
-    type: '__beforeLoadContext' | 'loaderData',
-    loaderData: any,
-    ctx: {
-      router: AnyRouter
-      match: AnyRouteMatch
-    },
-  ) => any
-  serializer?: (data: any) => string
 
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
   options!: PickAsRequired<
-    Omit<
-      RouterOptions<
-        TRouteTree,
-        TTrailingSlashOption,
-        TDefaultStructuralSharingOption,
-        TRouterHistory,
-        TDehydrated,
-        TSerializedError
-      >,
-      'transformer'
-    > & {
-      transformer: RouterTransformer
-    },
+    RouterOptions<
+      TRouteTree,
+      TTrailingSlashOption,
+      TDefaultStructuralSharingOption,
+      TRouterHistory,
+      TDehydrated
+    >,
     'stringifySearch' | 'parseSearch' | 'context'
   >
   history!: TRouterHistory
@@ -800,8 +695,7 @@ export class Router<
       TTrailingSlashOption,
       TDefaultStructuralSharingOption,
       TRouterHistory,
-      TDehydrated,
-      TSerializedError
+      TDehydrated
     >,
   ) {
     this.update({
@@ -814,11 +708,10 @@ export class Router<
       notFoundMode: options.notFoundMode ?? 'fuzzy',
       stringifySearch: options.stringifySearch ?? defaultStringifySearch,
       parseSearch: options.parseSearch ?? defaultParseSearch,
-      transformer: options.transformer ?? defaultTransformer,
     })
 
     if (typeof document !== 'undefined') {
-      ;(window as any).__TSR__ROUTER__ = this
+      ;(window as any).__TSR_ROUTER__ = this
     }
   }
 
@@ -833,8 +726,7 @@ export class Router<
       TTrailingSlashOption,
       TDefaultStructuralSharingOption,
       TRouterHistory,
-      TDehydrated,
-      TSerializedError
+      TDehydrated
     >,
   ) => {
     if (newOptions.notFoundRoute) {
@@ -1623,7 +1515,7 @@ export class Router<
                 }) ?? {}),
               }
             }
-          } catch (e) {
+          } catch {
             // ignore errors here because they are already handled in matchRoutes
           }
         })
@@ -1685,7 +1577,7 @@ export class Router<
                       ) ?? {}),
                     }
                     return validatedSearch
-                  } catch (e) {
+                  } catch {
                     // ignore errors here because they are already handled in matchRoutes
                   }
                 }
@@ -2448,21 +2340,10 @@ export class Router<
                     matches,
                   }
 
-                  let beforeLoadContext =
+                  const beforeLoadContext =
                     (await route.options.beforeLoad?.(beforeLoadFnContext)) ??
                     {}
 
-                  if (this.serializeLoaderData) {
-                    beforeLoadContext = this.serializeLoaderData(
-                      '__beforeLoadContext',
-                      beforeLoadContext,
-                      {
-                        router: this,
-                        match: this.getMatch(matchId)!,
-                      },
-                    )
-                  }
-
                   if (
                     isRedirect(beforeLoadContext) ||
                     isNotFound(beforeLoadContext)
@@ -2602,20 +2483,9 @@ export class Router<
                           }))
 
                           // Kick off the loader!
-                          let loaderData =
+                          const loaderData =
                             await route.options.loader?.(getLoaderContext())
 
-                          if (this.serializeLoaderData) {
-                            loaderData = this.serializeLoaderData(
-                              'loaderData',
-                              loaderData,
-                              {
-                                router: this,
-                                match: this.getMatch(matchId)!,
-                              },
-                            )
-                          }
-
                           handleRedirectAndNotFound(
                             this.getMatch(matchId)!,
                             loaderData,
@@ -2679,6 +2549,11 @@ export class Router<
                           }))
                         }
 
+                        this.serverSsr?.onMatchSettled({
+                          router: this,
+                          match: this.getMatch(matchId)!,
+                        })
+
                         // Last but not least, wait for the the components
                         // to be preloaded before we resolve the match
                         await route._componentsPromise
@@ -3028,127 +2903,25 @@ export class Router<
     return match
   }
 
-  dehydrate = (): DehydratedRouter => {
-    const pickError =
-      this.options.errorSerializer?.serialize ?? defaultSerializeError
-
-    return {
-      state: {
-        dehydratedMatches: this.state.matches.map((d) => {
-          return {
-            ...pick(d, ['id', 'status', 'updatedAt']),
-            // If an error occurs server-side during SSRing,
-            // send a small subset of the error to the client
-            error: d.error
-              ? {
-                  data: pickError(d.error),
-                  __isServerError: true,
-                }
-              : undefined,
-            // NOTE: We don't send the loader data here, because
-            // there is a potential that it needs to be streamed.
-            // Instead, we render it next to the route match in the HTML
-            // which gives us the potential to stream it via suspense.
-          }
-        }),
-      },
-      manifest: this.manifest,
-    }
+  ssr?: {
+    manifest: Manifest | undefined
+    serializer: StartSerializer
   }
 
-  hydrate = () => {
-    // Client hydrates from window
-    let ctx: HydrationCtx | undefined
-
-    if (typeof document !== 'undefined') {
-      ctx = this.options.transformer.parse(window.__TSR__?.dehydrated) as any
-    }
-
-    invariant(
-      ctx,
-      'Expected to find a dehydrated data on window.__TSR__.dehydrated... but we did not. Please file an issue!',
-    )
-
-    this.dehydratedData = ctx.payload as any
-    this.options.hydrate?.(ctx.payload as any)
-    const dehydratedState = ctx.router.state
-
-    const matches = this.matchRoutes(this.state.location).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}!`,
-      )
-
-      return {
-        ...match,
-        ...dehydratedMatch,
-      }
-    })
-
-    this.__store.setState((s) => {
-      return {
-        ...s,
-        matches: matches as any,
-      }
-    })
-
-    this.manifest = ctx.router.manifest
+  serverSsr?: {
+    injectedHtml: Array<InjectedHtmlEntry>
+    injectHtml: (getHtml: () => string | Promise<string>) => Promise<void>
+    injectScript: (
+      getScript: () => string | Promise<string>,
+      opts?: { logScript?: boolean },
+    ) => Promise<void>
+    streamValue: (key: string, value: any) => void
+    streamedKeys: Set<string>
+    onMatchSettled: (opts: { router: AnyRouter; match: AnyRouteMatch }) => any
   }
 
-  injectedHtml: Array<() => string> = []
-  injectHtml = (html: string) => {
-    const cb = () => {
-      this.injectedHtml = this.injectedHtml.filter((d) => d !== cb)
-      return html
-    }
-
-    this.injectedHtml.push(cb)
-  }
-  injectScript = (script: string, opts?: { logScript?: boolean }) => {
-    this.injectHtml(
-      `<script class='tsr-once'>${script}${
-        process.env.NODE_ENV === 'development' && (opts?.logScript ?? true)
-          ? `; console.info(\`Injected From Server:
-${jsesc(script, { quotes: 'backtick' })}\`)`
-          : ''
-      }; if (typeof __TSR__ !== 'undefined') __TSR__.cleanScripts()</script>`,
-    )
-  }
-
-  streamedKeys: Set<string> = new Set()
-
-  getStreamedValue = <T>(key: string): T | undefined => {
-    if (this.isServer) {
-      return undefined
-    }
-
-    const streamedValue = window.__TSR__?.streamedValues[key]
-
-    if (!streamedValue) {
-      return
-    }
-
-    if (!streamedValue.parsed) {
-      streamedValue.parsed = this.options.transformer.parse(streamedValue.value)
-    }
-
-    return streamedValue.parsed
-  }
-
-  streamValue = (key: string, value: any) => {
-    warning(
-      !this.streamedKeys.has(key),
-      'Key has already been streamed: ' + key,
-    )
-
-    this.streamedKeys.add(key)
-    this.injectScript(
-      `__TSR__.streamedValues['${key}'] = { value: ${this.serializer?.(this.options.transformer.stringify(value))}}`,
-    )
+  clientSsr?: {
+    getStreamedValue: <T>(key: string) => T | undefined
   }
 
   _handleNotFound = (

package/src/routerContext.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react'
-import type { Router } from './router'
+import type { AnyRouter, Router } from './router'
+
+declare global {
+  interface Window {
+    __TSR_ROUTER_CONTEXT__?: React.Context<AnyRouter>
+  }
+}
 
 const routerContext = React.createContext<Router<any, any, any>>(null!)
 

package/src/serializer.ts

@@ -0,0 +1,24 @@
+export interface StartSerializer {
+  stringify: (obj: unknown) => string
+  parse: (str: string) => unknown
+  encode: <T>(value: T) => T
+  decode: <T>(value: T) => T
+}
+
+export type SerializerStringifyBy<T, TSerializable> = T extends TSerializable
+  ? T
+  : T extends (...args: Array<any>) => any
+    ? 'Function is not serializable'
+    : { [K in keyof T]: SerializerStringifyBy<T[K], TSerializable> }
+
+export type SerializerParseBy<T, TSerializable> = T extends TSerializable
+  ? T
+  : T extends React.JSX.Element
+    ? ReadableStream
+    : { [K in keyof T]: SerializerParseBy<T[K], TSerializable> }
+
+export type Serializable = Date | undefined | Error | FormData
+
+export type SerializerStringify<T> = SerializerStringifyBy<T, Serializable>
+
+export type SerializerParse<T> = SerializerParseBy<T, Serializable>

package/src/useRouterState.tsx

@@ -36,7 +36,7 @@ export function useRouterState<
   })
   const router = opts?.router || contextRouter
   const previousResult =
-    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>()
+    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)
 
   return useStore(router.__store, (state) => {
     if (opts?.select) {

package/src/utils.ts

@@ -470,7 +470,7 @@ export function usePrevious<T>(value: T): T | null {
  * ```
  */
 export function useIntersectionObserver<T extends Element>(
-  ref: React.RefObject<T>,
+  ref: React.RefObject<T | null>,
   callback: (entry: IntersectionObserverEntry | undefined) => void,
   intersectionObserverOptions: IntersectionObserverInit = {},
   options: { disabled?: boolean } = {},

package/dist/cjs/isServerSideError.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function isServerSideError(error) {
-  if (!(typeof error === "object" && error && "data" in error)) return false;
-  if (!("__isServerError" in error && error.__isServerError)) return false;
-  if (!(typeof error.data === "object" && error.data)) return false;
-  return error.__isServerError === true;
-}
-function defaultDeserializeError(serializedData) {
-  if ("name" in serializedData && "message" in serializedData) {
-    const error = new Error(serializedData.message);
-    error.name = serializedData.name;
-    if (process.env.NODE_ENV === "development") {
-      error.stack = serializedData.stack;
-    }
-    return error;
-  }
-  return serializedData.data;
-}
-exports.defaultDeserializeError = defaultDeserializeError;
-exports.isServerSideError = isServerSideError;
-//# sourceMappingURL=isServerSideError.cjs.map

package/dist/cjs/isServerSideError.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"isServerSideError.cjs","sources":["../../src/isServerSideError.tsx"],"sourcesContent":["export function isServerSideError(error: unknown): error is {\n  __isServerError: true\n  data: Record<string, any>\n} {\n  if (!(typeof error === 'object' && error && 'data' in error)) return false\n  if (!('__isServerError' in error && error.__isServerError)) return false\n  if (!(typeof error.data === 'object' && error.data)) return false\n\n  return error.__isServerError === true\n}\n\nexport function defaultDeserializeError(serializedData: Record<string, any>) {\n  if ('name' in serializedData && 'message' in serializedData) {\n    const error = new Error(serializedData.message)\n    error.name = serializedData.name\n    if (process.env.NODE_ENV === 'development') {\n      error.stack = serializedData.stack\n    }\n    return error\n  }\n\n  return serializedData.data\n}\n"],"names":[],"mappings":";;AAAO,SAAS,kBAAkB,OAGhC;AACA,MAAI,EAAE,OAAO,UAAU,YAAY,SAAS,UAAU,OAAe,QAAA;AACrE,MAAI,EAAE,qBAAqB,SAAS,MAAM,iBAAyB,QAAA;AACnE,MAAI,EAAE,OAAO,MAAM,SAAS,YAAY,MAAM,MAAc,QAAA;AAE5D,SAAO,MAAM,oBAAoB;AACnC;AAEO,SAAS,wBAAwB,gBAAqC;AACvE,MAAA,UAAU,kBAAkB,aAAa,gBAAgB;AAC3D,UAAM,QAAQ,IAAI,MAAM,eAAe,OAAO;AAC9C,UAAM,OAAO,eAAe;AACxB,QAAA,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAM,QAAQ,eAAe;AAAA,IAAA;AAExB,WAAA;AAAA,EAAA;AAGT,SAAO,eAAe;AACxB;;;"}

package/dist/cjs/isServerSideError.d.cts

@@ -1,5 +0,0 @@
-export declare function isServerSideError(error: unknown): error is {
-    __isServerError: true;
-    data: Record<string, any>;
-};
-export declare function defaultDeserializeError(serializedData: Record<string, any>): any;