@tanstack/react-start-client 1.114.2 → 1.114.4

package/src/ssr-client.tsx

@@ -1,246 +0,0 @@
-import { isPlainObject } from '@tanstack/router-core'
-
-import invariant from 'tiny-invariant'
-
-import { startSerializer } from './serializer'
-import type {
-  AnyRouter,
-  ControllablePromise,
-  MakeRouteMatch,
-} from '@tanstack/react-router'
-
-import type {
-  DeferredPromiseState,
-  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

@@ -1,147 +0,0 @@
-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)
-  })
-})