@tanstack/router-core 1.121.0-alpha.22 → 1.121.0-alpha.28

package/src/ssr/transformStreamWithRouter.ts

@@ -0,0 +1,259 @@
+import { ReadableStream } from 'node:stream/web'
+import { Readable } from 'node:stream'
+import { createControlledPromise } from '../utils'
+import type { AnyRouter } from '../router'
+
+export function transformReadableStreamWithRouter(
+  router: AnyRouter,
+  routerStream: ReadableStream,
+) {
+  return transformStreamWithRouter(router, routerStream)
+}
+
+export function transformPipeableStreamWithRouter(
+  router: AnyRouter,
+  routerStream: Readable,
+) {
+  return Readable.fromWeb(
+    transformStreamWithRouter(router, Readable.toWeb(routerStream)),
+  )
+}
+
+// regex pattern for matching closing body and html tags
+const patternBodyStart = /(<body)/
+const patternBodyEnd = /(<\/body>)/
+const patternHtmlEnd = /(<\/html>)/
+const patternHeadStart = /(<head.*?>)/
+// regex pattern for matching closing tags
+const patternClosingTag = /(<\/[a-zA-Z][\w:.-]*?>)/g
+
+const textDecoder = new TextDecoder()
+
+type ReadablePassthrough = {
+  stream: ReadableStream
+  write: (chunk: string) => void
+  end: (chunk?: string) => void
+  destroy: (error: unknown) => void
+  destroyed: boolean
+}
+
+function createPassthrough() {
+  let controller: ReadableStreamDefaultController<any>
+  const encoder = new TextEncoder()
+  const stream = new ReadableStream({
+    start(c) {
+      controller = c
+    },
+  })
+
+  const res: ReadablePassthrough = {
+    stream,
+    write: (chunk) => {
+      controller.enqueue(encoder.encode(chunk))
+    },
+    end: (chunk) => {
+      if (chunk) {
+        controller.enqueue(encoder.encode(chunk))
+      }
+      controller.close()
+      res.destroyed = true
+    },
+    destroy: (error) => {
+      controller.error(error)
+    },
+    destroyed: false,
+  }
+
+  return res
+}
+
+async function readStream(
+  stream: ReadableStream,
+  opts: {
+    onData?: (chunk: ReadableStreamReadValueResult<any>) => void
+    onEnd?: () => void
+    onError?: (error: unknown) => void
+  },
+) {
+  try {
+    const reader = stream.getReader()
+    let chunk
+    while (!(chunk = await reader.read()).done) {
+      opts.onData?.(chunk)
+    }
+    opts.onEnd?.()
+  } catch (error) {
+    opts.onError?.(error)
+  }
+}
+
+export function transformStreamWithRouter(
+  router: AnyRouter,
+  appStream: ReadableStream,
+) {
+  const finalPassThrough = createPassthrough()
+
+  let isAppRendering = true as boolean
+  let routerStreamBuffer = ''
+  let pendingClosingTags = ''
+  let bodyStarted = false as boolean
+  let headStarted = false as boolean
+  let leftover = ''
+  let leftoverHtml = ''
+
+  function getBufferedRouterStream() {
+    const html = routerStreamBuffer
+    routerStreamBuffer = ''
+    return html
+  }
+
+  function decodeChunk(chunk: unknown): string {
+    if (chunk instanceof Uint8Array) {
+      return textDecoder.decode(chunk)
+    }
+    return String(chunk)
+  }
+
+  const injectedHtmlDonePromise = createControlledPromise<void>()
+
+  let processingCount = 0
+
+  // Process any already-injected HTML
+  router.serverSsr!.injectedHtml.forEach((promise) => {
+    handleInjectedHtml(promise)
+  })
+
+  // Listen for any new injected HTML
+  const stopListeningToInjectedHtml = router.subscribe(
+    'onInjectedHtml',
+    (e) => {
+      handleInjectedHtml(e.promise)
+    },
+  )
+
+  function handleInjectedHtml(promise: Promise<string>) {
+    processingCount++
+
+    promise
+      .then((html) => {
+        if (!bodyStarted) {
+          routerStreamBuffer += html
+        } else {
+          finalPassThrough.write(html)
+        }
+      })
+      .catch(injectedHtmlDonePromise.reject)
+      .finally(() => {
+        processingCount--
+
+        if (!isAppRendering && processingCount === 0) {
+          stopListeningToInjectedHtml()
+          injectedHtmlDonePromise.resolve()
+        }
+      })
+  }
+
+  injectedHtmlDonePromise
+    .then(() => {
+      const finalHtml =
+        leftoverHtml + getBufferedRouterStream() + pendingClosingTags
+
+      finalPassThrough.end(finalHtml)
+    })
+    .catch((err) => {
+      console.error('Error reading routerStream:', err)
+      finalPassThrough.destroy(err)
+    })
+
+  // Transform the appStream
+  readStream(appStream, {
+    onData: (chunk) => {
+      const text = decodeChunk(chunk.value)
+
+      let chunkString = leftover + text
+      const bodyEndMatch = chunkString.match(patternBodyEnd)
+      const htmlEndMatch = chunkString.match(patternHtmlEnd)
+
+      if (!bodyStarted) {
+        const bodyStartMatch = chunkString.match(patternBodyStart)
+        if (bodyStartMatch) {
+          bodyStarted = true
+        }
+      }
+
+      if (!headStarted) {
+        const headStartMatch = chunkString.match(patternHeadStart)
+        if (headStartMatch) {
+          headStarted = true
+          const index = headStartMatch.index!
+          const headTag = headStartMatch[0]
+          const remaining = chunkString.slice(index + headTag.length)
+          finalPassThrough.write(
+            chunkString.slice(0, index) + headTag + getBufferedRouterStream(),
+          )
+          // make sure to only write `remaining` until the next closing tag
+          chunkString = remaining
+        }
+      }
+
+      if (!bodyStarted) {
+        finalPassThrough.write(chunkString)
+        leftover = ''
+        return
+      }
+
+      // If either the body end or html end is in the chunk,
+      // We need to get all of our data in asap
+      if (
+        bodyEndMatch &&
+        htmlEndMatch &&
+        bodyEndMatch.index! < htmlEndMatch.index!
+      ) {
+        const bodyEndIndex = bodyEndMatch.index!
+        pendingClosingTags = chunkString.slice(bodyEndIndex)
+
+        finalPassThrough.write(
+          chunkString.slice(0, bodyEndIndex) + getBufferedRouterStream(),
+        )
+
+        leftover = ''
+        return
+      }
+
+      let result: RegExpExecArray | null
+      let lastIndex = 0
+      while ((result = patternClosingTag.exec(chunkString)) !== null) {
+        lastIndex = result.index + result[0].length
+      }
+
+      if (lastIndex > 0) {
+        const processed =
+          chunkString.slice(0, lastIndex) +
+          getBufferedRouterStream() +
+          leftoverHtml
+
+        finalPassThrough.write(processed)
+        leftover = chunkString.slice(lastIndex)
+      } else {
+        leftover = chunkString
+        leftoverHtml += getBufferedRouterStream()
+      }
+    },
+    onEnd: () => {
+      // Mark the app as done rendering
+      isAppRendering = false
+      router.serverSsr!.setRenderFinished()
+
+      // If there are no pending promises, resolve the injectedHtmlDonePromise
+      if (processingCount === 0) {
+        injectedHtmlDonePromise.resolve()
+      }
+    },
+    onError: (error) => {
+      console.error('Error reading appStream:', error)
+      finalPassThrough.destroy(error)
+    },
+  })
+
+  return finalPassThrough.stream
+}

package/src/ssr/tsrScript.ts

@@ -0,0 +1,7 @@
+self.$_TSR = {
+  c: () => {
+    document.querySelectorAll('.\\$tsr').forEach((o) => {
+      o.remove()
+    })
+  },
+}

package/src/utils.ts

@@ -421,60 +421,14 @@ export function createControlledPromise<T>(onResolve?: (value: T) => void) {
   return controlledPromise
 }
 
-/**
- *
- * @deprecated use `jsesc` instead
- */
-export function escapeJSON(jsonString: string) {
-  return jsonString
-    .replace(/\\/g, '\\\\') // Escape backslashes
-    .replace(/'/g, "\\'") // Escape single quotes
-    .replace(/"/g, '\\"') // Escape double quotes
-}
-
-export function shallow<T>(objA: T, objB: T) {
-  if (Object.is(objA, objB)) {
-    return true
-  }
-
-  if (
-    typeof objA !== 'object' ||
-    objA === null ||
-    typeof objB !== 'object' ||
-    objB === null
-  ) {
-    return false
-  }
-
-  const keysA = Object.keys(objA)
-  if (keysA.length !== Object.keys(objB).length) {
-    return false
-  }
-
-  for (const item of keysA) {
-    if (
-      !Object.prototype.hasOwnProperty.call(objB, item) ||
-      !Object.is(objA[item as keyof T], objB[item as keyof T])
-    ) {
-      return false
-    }
-  }
-  return true
-}
-
-/**
- * Checks if a string contains URI-encoded special characters (e.g., %3F, %20).
- *
- * @param {string} inputString The string to check.
- * @returns {boolean} True if the string contains URI-encoded characters, false otherwise.
- * @example
- * ```typescript
- * const str1 = "foo%3Fbar";
- * const hasEncodedChars = hasUriEncodedChars(str1); // returns true
- * ```
- */
-export function hasUriEncodedChars(inputString: string): boolean {
-  // This regex looks for a percent sign followed by two hexadecimal digits
-  const pattern = /%[0-9A-Fa-f]{2}/
-  return pattern.test(inputString)
+export function isModuleNotFoundError(error: any): boolean {
+  // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // safari: "Importing a module script failed."
+  if (typeof error?.message !== 'string') return false
+  return (
+    error.message.startsWith('Failed to fetch dynamically imported module') ||
+    error.message.startsWith('error loading dynamically imported module') ||
+    error.message.startsWith('Importing a module script failed')
+  )
 }

package/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+declare module '*?script-string' {
+  const content: string
+  export default content
+}

package/dist/cjs/serializer.d.cts

@@ -1,22 +0,0 @@
-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 : unknown extends SerializerExtensions['ReadableStream'] ? {
-    [K in keyof T]: SerializerParseBy<T[K], TSerializable>;
-} : T extends SerializerExtensions['ReadableStream'] ? ReadableStream : {
-    [K in keyof T]: SerializerParseBy<T[K], TSerializable>;
-};
-export interface DefaultSerializerExtensions {
-    ReadableStream: unknown;
-}
-export interface SerializerExtensions extends DefaultSerializerExtensions {
-}
-export type Serializable = Date | undefined | Error | FormData | bigint;
-export type SerializerStringify<T> = SerializerStringifyBy<T, Serializable>;
-export type SerializerParse<T> = SerializerParseBy<T, Serializable>;

package/dist/esm/serializer.d.ts

@@ -1,22 +0,0 @@
-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 : unknown extends SerializerExtensions['ReadableStream'] ? {
-    [K in keyof T]: SerializerParseBy<T[K], TSerializable>;
-} : T extends SerializerExtensions['ReadableStream'] ? ReadableStream : {
-    [K in keyof T]: SerializerParseBy<T[K], TSerializable>;
-};
-export interface DefaultSerializerExtensions {
-    ReadableStream: unknown;
-}
-export interface SerializerExtensions extends DefaultSerializerExtensions {
-}
-export type Serializable = Date | undefined | Error | FormData | bigint;
-export type SerializerStringify<T> = SerializerStringifyBy<T, Serializable>;
-export type SerializerParse<T> = SerializerParseBy<T, Serializable>;

package/src/serializer.ts

@@ -1,32 +0,0 @@
-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
-  : unknown extends SerializerExtensions['ReadableStream']
-    ? { [K in keyof T]: SerializerParseBy<T[K], TSerializable> }
-    : T extends SerializerExtensions['ReadableStream']
-      ? ReadableStream
-      : { [K in keyof T]: SerializerParseBy<T[K], TSerializable> }
-
-export interface DefaultSerializerExtensions {
-  ReadableStream: unknown
-}
-
-export interface SerializerExtensions extends DefaultSerializerExtensions {}
-
-export type Serializable = Date | undefined | Error | FormData | bigint
-
-export type SerializerStringify<T> = SerializerStringifyBy<T, Serializable>
-
-export type SerializerParse<T> = SerializerParseBy<T, Serializable>