@tanstack/start-client-core 1.114.4

package/src/ssr-client.tsx

@@ -0,0 +1,243 @@
+import { isPlainObject } from '@tanstack/router-core'
+
+import invariant from 'tiny-invariant'
+
+import { startSerializer } from './serializer'
+import type {
+  AnyRouter,
+  ControllablePromise,
+  DeferredPromiseState,
+  MakeRouteMatch,
+  Manifest,
+  RouteContextOptions,
+} from '@tanstack/router-core'
+
+declare global {
+  interface Window {
+    __TSR_SSR__?: StartSsrGlobal
+  }
+}
+
+export interface StartSsrGlobal {
+  matches: Array<SsrMatch>
+  streamedValues: Record<
+    string,
+    {
+      value: any
+      parsed: any
+    }
+  >
+  cleanScripts: () => void
+  dehydrated?: any
+  initMatch: (match: SsrMatch) => void
+  resolvePromise: (opts: {
+    matchId: string
+    id: number
+    promiseState: DeferredPromiseState<any>
+  }) => void
+  injectChunk: (opts: { matchId: string; id: number; chunk: string }) => void
+  closeStream: (opts: { matchId: string; id: number }) => void
+}
+
+export interface SsrMatch {
+  id: string
+  __beforeLoadContext: string
+  loaderData?: string
+  error?: string
+  extracted?: Array<ClientExtractedEntry>
+  updatedAt: MakeRouteMatch['updatedAt']
+  status: MakeRouteMatch['status']
+}
+
+export type ClientExtractedEntry =
+  | ClientExtractedStream
+  | ClientExtractedPromise
+
+export interface ClientExtractedPromise extends ClientExtractedBaseEntry {
+  type: 'promise'
+  value?: ControllablePromise<any>
+}
+
+export interface ClientExtractedStream extends ClientExtractedBaseEntry {
+  type: 'stream'
+  value?: ReadableStream & { controller?: ReadableStreamDefaultController }
+}
+
+export interface ClientExtractedBaseEntry {
+  type: string
+  path: Array<string>
+}
+
+export interface ResolvePromiseState {
+  matchId: string
+  id: number
+  promiseState: DeferredPromiseState<any>
+}
+
+export interface DehydratedRouter {
+  manifest: Manifest | undefined
+  dehydratedData: any
+}
+
+export function hydrate(router: AnyRouter) {
+  invariant(
+    window.__TSR_SSR__?.dehydrated,
+    'Expected to find a dehydrated data on window.__TSR_SSR__.dehydrated... but we did not. Please file an issue!',
+  )
+
+  const { manifest, dehydratedData } = startSerializer.parse(
+    window.__TSR_SSR__.dehydrated,
+  ) as DehydratedRouter
+
+  router.ssr = {
+    manifest,
+    serializer: startSerializer,
+  }
+
+  router.clientSsr = {
+    getStreamedValue: <T,>(key: string): T | undefined => {
+      if (router.isServer) {
+        return undefined
+      }
+
+      const streamedValue = window.__TSR_SSR__?.streamedValues[key]
+
+      if (!streamedValue) {
+        return
+      }
+
+      if (!streamedValue.parsed) {
+        streamedValue.parsed = router.ssr!.serializer.parse(streamedValue.value)
+      }
+
+      return streamedValue.parsed
+    },
+  }
+
+  // Hydrate the router state
+  const matches = router.matchRoutes(router.state.location)
+  // kick off loading the route chunks
+  const routeChunkPromise = Promise.all(
+    matches.map((match) => {
+      const route = router.looseRoutesById[match.routeId]!
+      return router.loadRouteChunk(route)
+    }),
+  )
+  // Right after hydration and before the first render, we need to rehydrate each match
+  // First step is to reyhdrate loaderData and __beforeLoadContext
+  matches.forEach((match) => {
+    const dehydratedMatch = window.__TSR_SSR__!.matches.find(
+      (d) => d.id === match.id,
+    )
+
+    if (dehydratedMatch) {
+      Object.assign(match, dehydratedMatch)
+
+      // Handle beforeLoadContext
+      if (dehydratedMatch.__beforeLoadContext) {
+        match.__beforeLoadContext = router.ssr!.serializer.parse(
+          dehydratedMatch.__beforeLoadContext,
+        ) as any
+      }
+
+      // Handle loaderData
+      if (dehydratedMatch.loaderData) {
+        match.loaderData = router.ssr!.serializer.parse(
+          dehydratedMatch.loaderData,
+        )
+      }
+
+      // Handle error
+      if (dehydratedMatch.error) {
+        match.error = router.ssr!.serializer.parse(dehydratedMatch.error)
+      }
+
+      // Handle extracted
+      ;(match as unknown as SsrMatch).extracted?.forEach((ex) => {
+        deepMutableSetByPath(match, ['loaderData', ...ex.path], ex.value)
+      })
+    } else {
+      Object.assign(match, {
+        status: 'success',
+        updatedAt: Date.now(),
+      })
+    }
+
+    return match
+  })
+
+  router.__store.setState((s) => {
+    return {
+      ...s,
+      matches,
+    }
+  })
+
+  // Allow the user to handle custom hydration data
+  router.options.hydrate?.(dehydratedData)
+
+  // now that all necessary data is hydrated:
+  // 1) fully reconstruct the route context
+  // 2) execute `head()` and `scripts()` for each match
+  router.state.matches.forEach((match) => {
+    const route = router.looseRoutesById[match.routeId]!
+
+    const parentMatch = router.state.matches[match.index - 1]
+    const parentContext = parentMatch?.context ?? router.options.context ?? {}
+
+    // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
+    // so run it again and merge route context
+    const contextFnContext: RouteContextOptions<any, any, any, any> = {
+      deps: match.loaderDeps,
+      params: match.params,
+      context: parentContext,
+      location: router.state.location,
+      navigate: (opts: any) =>
+        router.navigate({ ...opts, _fromLocation: router.state.location }),
+      buildLocation: router.buildLocation,
+      cause: match.cause,
+      abortController: match.abortController,
+      preload: false,
+      matches,
+    }
+    match.__routeContext = route.options.context?.(contextFnContext) ?? {}
+
+    match.context = {
+      ...parentContext,
+      ...match.__routeContext,
+      ...match.__beforeLoadContext,
+    }
+
+    const assetContext = {
+      matches: router.state.matches,
+      match,
+      params: match.params,
+      loaderData: match.loaderData,
+    }
+    const headFnContent = route.options.head?.(assetContext)
+
+    const scripts = route.options.scripts?.(assetContext)
+
+    match.meta = headFnContent?.meta
+    match.links = headFnContent?.links
+    match.headScripts = headFnContent?.scripts
+    match.scripts = scripts
+  })
+
+  return routeChunkPromise
+}
+
+function deepMutableSetByPath<T>(obj: T, path: Array<string>, value: any) {
+  // mutable set by path retaining array and object references
+  if (path.length === 1) {
+    ;(obj as any)[path[0]!] = value
+  }
+
+  const [key, ...rest] = path
+
+  if (Array.isArray(obj)) {
+    deepMutableSetByPath(obj[Number(key)], rest, value)
+  } else if (isPlainObject(obj)) {
+    deepMutableSetByPath((obj as any)[key!], rest, value)
+  }
+}

package/src/tests/transformer.test.tsx

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest'
+
+import { startSerializer as tf } from '../serializer'
+
+describe('transformer.stringify', () => {
+  it('should stringify dates', () => {
+    const date = new Date('2021-08-19T20:00:00.000Z')
+    expect(tf.stringify(date)).toMatchInlineSnapshot(`
+      "{"$date":"2021-08-19T20:00:00.000Z"}"
+    `)
+  })
+
+  it('should stringify undefined', () => {
+    expect(tf.stringify(undefined)).toMatchInlineSnapshot(`"{"$undefined":0}"`)
+  })
+
+  it('should stringify object foo="bar"', () => {
+    expect(tf.stringify({ foo: 'bar' })).toMatchInlineSnapshot(`
+      "{"foo":"bar"}"
+    `)
+  })
+
+  it('should stringify object foo=undefined', () => {
+    expect(tf.stringify({ foo: undefined })).toMatchInlineSnapshot(
+      `"{"foo":{"$undefined":0}}"`,
+    )
+  })
+
+  it('should stringify object foo=Date', () => {
+    const date = new Date('2021-08-19T20:00:00.000Z')
+    expect(tf.stringify({ foo: date })).toMatchInlineSnapshot(`
+      "{"foo":{"$date":"2021-08-19T20:00:00.000Z"}}"
+    `)
+  })
+
+  it('should stringify empty FormData', () => {
+    const formData = new FormData()
+    expect(tf.stringify(formData)).toMatchInlineSnapshot(`"{"$formData":{}}"`)
+  })
+
+  it('should stringify FormData with key-value pairs of foo="bar",name="Sean"', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('name', 'Sean')
+    expect(tf.stringify(formData)).toMatchInlineSnapshot(
+      `"{"$formData":{"foo":"bar","name":"Sean"}}"`,
+    )
+  })
+  it('should stringify FormData with multiple values for the same key', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('foo', 'baz')
+    expect(tf.stringify(formData)).toMatchInlineSnapshot(
+      `"{"$formData":{"foo":["bar","baz"]}}"`,
+    )
+  })
+
+  it('should stringify bigint', () => {
+    const bigint = BigInt('9007199254740992')
+    expect(tf.stringify(bigint)).toMatchInlineSnapshot(
+      `"{"$bigint":"9007199254740992"}"`,
+    )
+  })
+  it('should stringify object foo=bigint', () => {
+    const bigint = BigInt('9007199254740992')
+    expect(tf.stringify({ foo: bigint })).toMatchInlineSnapshot(
+      `"{"foo":{"$bigint":"9007199254740992"}}"`,
+    )
+  })
+})
+
+describe('transformer.parse', () => {
+  it('should parse dates', () => {
+    const date = new Date('2021-08-19T20:00:00.000Z')
+    const str = tf.stringify(date)
+    expect(tf.parse(str)).toEqual(date)
+  })
+
+  it('should parse undefined', () => {
+    const str = tf.stringify(undefined)
+    expect(tf.parse(str)).toBeUndefined()
+  })
+
+  it('should parse object foo="bar"', () => {
+    const obj = { foo: 'bar' }
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
+  })
+
+  it('should parse object foo=undefined', () => {
+    const obj = { foo: undefined }
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
+  })
+
+  it('should parse object foo=Date', () => {
+    const date = new Date('2021-08-19T20:00:00.000Z')
+    const obj = { foo: date }
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
+  })
+
+  it('should parse empty FormData', () => {
+    const formData = new FormData()
+    const str = tf.stringify(formData)
+    const parsed = tf.parse(str) as FormData
+    expect(parsed).toBeInstanceOf(FormData)
+    expect([...parsed.entries()]).toEqual([])
+  })
+
+  it('should parse FormData with key-value pairs of foo="bar",name="Sean"', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('name', 'Sean')
+    const str = tf.stringify(formData)
+    const parsed = tf.parse(str) as FormData
+    expect(parsed).toBeInstanceOf(FormData)
+    expect([...parsed.entries()]).toEqual([
+      ['foo', 'bar'],
+      ['name', 'Sean'],
+    ])
+  })
+  it('should parse FormData with multiple values for the same key', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('foo', 'baz')
+    const str = tf.stringify(formData)
+    const parsed = tf.parse(str) as FormData
+    expect(parsed).toBeInstanceOf(FormData)
+    expect([...parsed.entries()]).toEqual([
+      ['foo', 'bar'],
+      ['foo', 'baz'],
+    ])
+  })
+
+  it('should parse bigint', () => {
+    const bigint = BigInt('9007199254740992')
+    const str = tf.stringify(bigint)
+    expect(tf.parse(str)).toEqual(bigint)
+  })
+  it('should parse object foo=bigint', () => {
+    const bigint = BigInt('9007199254740992')
+    const obj = { foo: bigint }
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
+  })
+})