[Incomplete] Hook up temporary references

Author: eps1lon

packages/next/src/server/app-render/action-handler.ts

@@ -398,7 +398,9 @@ export async function handleAction({
       type: 'done'
       result: RenderResult | undefined
       formState?: any
-      temporaryReferences: unknown
+      temporaryReferences:
+        | import('react-dom/server.edge').TemporaryReferencesSet
+        | undefined
     }
 > {
   const contentType = req.headers['content-type']
@@ -561,6 +563,9 @@ export async function handleAction({
     }
   }
 
+  let temporaryReferences:
+    | import('react-dom/server.edge').TemporaryReferencesSet
+    | undefined
   try {
     await actionAsyncStorage.run({ isAction: true }, async () => {
       if (
@@ -579,7 +584,7 @@ export async function handleAction({
         if (!req.body) {
           throw new Error('invariant: Missing request body.')
         }
-        const temporaryReferences = createTemporaryReferenceSet()
+        temporaryReferences = createTemporaryReferenceSet()
 
         // TODO: add body limit
 
@@ -651,7 +656,7 @@ export async function handleAction({
           decodeAction,
           decodeFormState,
         } = require(`./react-server.node`)
-        const temporaryReferences = createTemporaryReferenceSet()
+        temporaryReferences = createTemporaryReferenceSet()
 
         const { Transform } =
           require('node:stream') as typeof import('node:stream')
@@ -822,7 +827,7 @@ export async function handleAction({
       type: 'done',
       result: actionResult,
       formState,
-      temporaryReferences: undefined,
+      temporaryReferences,
     }
   } catch (err) {
     if (isRedirectError(err)) {
@@ -895,7 +900,7 @@ export async function handleAction({
             actionResult: promise,
             asNotFound: true,
           }),
-          temporaryReferences: undefined,
+          temporaryReferences,
         }
       }
       return {
@@ -930,7 +935,7 @@ export async function handleAction({
           skipFlight:
             !staticGenerationStore.pathWasRevalidated || actionWasForwarded,
         }),
-        temporaryReferences: undefined,
+        temporaryReferences,
       }
     }
 

packages/next/src/server/app-render/app-render.tsx

@@ -388,7 +388,9 @@ type RenderToStreamOptions = {
   asNotFound: boolean
   tree: LoaderTree
   formState: any
-  temporaryReferences: unknown
+  temporaryReferences:
+    | import('react-dom/server.edge').TemporaryReferencesSet
+    | undefined
 }
 
 /**
@@ -919,6 +921,7 @@ async function renderToHTMLOrFlightImpl(
       asNotFound,
       tree,
       formState,
+      temporaryReferences,
     }: RenderToStreamOptions): Promise<RenderToStreamResult> => {
       const tracingMetadata = getTracedMetadata(
         getTracer().getTracePropagationData(),
@@ -960,6 +963,7 @@ async function renderToHTMLOrFlightImpl(
         {
           onError: serverComponentsErrorHandler,
           nonce,
+          temporaryReferences,
         }
       )
 
@@ -1292,6 +1296,7 @@ async function renderToHTMLOrFlightImpl(
           {
             onError: serverComponentsErrorHandler,
             nonce,
+            temporaryReferences,
           }
         )
 
@@ -1311,6 +1316,7 @@ async function renderToHTMLOrFlightImpl(
               // Include hydration scripts in the HTML
               bootstrapScripts: [errorBootstrapScript],
               formState,
+              temporaryReferences,
             },
           })
 

packages/next/src/server/app-render/make-get-server-inserted-html.tsx

@@ -110,6 +110,7 @@ export function makeGetServerInsertedHTML({
         // Larger chunk because this isn't sent over the network.
         // Let's set it to 1MB.
         progressiveChunkSize: 1024 * 1024,
+        temporaryReferences: undefined,
       }
     )
 

packages/next/src/server/app-render/static/static-renderer.ts

@@ -49,7 +49,12 @@ export class ServerRenderer implements Renderer {
   private readonly renderToReadableStream = require('react-dom/server.edge')
     .renderToReadableStream as (typeof import('react-dom/server.edge'))['renderToReadableStream']
 
-  constructor(private readonly options: RenderToReadableStreamOptions) {}
+  constructor(
+    private readonly options: Omit<
+      RenderToReadableStreamOptions,
+      'temporaryReferences'
+    >
+  ) {}
 
   public async render(children: JSX.Element): Promise<RenderResult> {
     const stream = await this.renderToReadableStream(children, this.options)

packages/next/src/server/app-render/use-flight-response.tsx

@@ -90,7 +90,7 @@ export async function flightRenderComplete(
 export function createInlinedDataReadableStream(
   flightStream: ReadableStream<Uint8Array>,
   nonce: string | undefined,
-  formState: unknown | null
+  formState: unknown | null,
 ): ReadableStream<Uint8Array> {
   const startScriptTag = nonce
     ? `<script nonce=${JSON.stringify(nonce)}>`

packages/next/src/server/stream-utils/node-web-streams-helper.ts

@@ -168,7 +168,7 @@ export function renderToInitialFizzStream({
 }: {
   ReactDOMServer: typeof import('react-dom/server.edge')
   element: React.ReactElement
-  streamOptions?: any
+  streamOptions?: import('react-dom/server.edge').Options
 }): Promise<ReactReadableStream> {
   return getTracer().trace(AppRenderSpan.renderToReadableStream, async () =>
     ReactDOMServer.renderToReadableStream(element, streamOptions)

packages/next/types/react-dom.d.ts

@@ -31,6 +31,11 @@ declare module 'react-dom/server.edge' {
     }
   ): Promise<ReadableStream<Uint8Array>>
 
+  const REACT_TEMPORARY_REFERENCES_SIGIL: unique symbol
+  export interface TemporaryReferencesSet {
+    [REACT_TEMPORARY_REFERENCES_SIGIL]: never
+  }
+
   /**
    * Options for `renderToReadableStream`.
    *
@@ -61,6 +66,7 @@ declare module 'react-dom/server.edge' {
     formState?: unknown
     onHeaders?: (headers: Headers) => void
     maxHeadersLength?: number
+    temporaryReferences?: TemporaryReferencesSet | undefined
   }
 
   export function renderToReadableStream(