Flush styled-jsx during streaming

package.json

@@ -123,7 +123,7 @@
     "react": "17.0.2",
     "react-18": "npm:react@next",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:react-dom@next",
+    "react-dom-18": "npm:@gmonaco/react-dom@latest",
     "react-ssr-prepass": "1.0.8",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",

packages/next/server/render-result.ts

@@ -1,15 +1,19 @@
 import { ServerResponse } from 'http'
-import { Writable } from 'stream'
 
-export type NodeWritablePiper = (
-  res: Writable,
-  next: (err?: Error) => void
-) => void
+export interface Stream {
+  write(chunk: Uint8Array): void
+  buffer(shouldBuffer: boolean): void
+  flush(): void
+  close(error?: Error): void
+  subscribe(callback: (ready: boolean) => void): () => void
+}
+
+export type StreamWriter = (stream: Stream, next: (err?: Error) => void) => void
 
 export default class RenderResult {
-  _result: string | NodeWritablePiper
+  _result: string | StreamWriter
 
-  constructor(response: string | NodeWritablePiper) {
+  constructor(response: string | StreamWriter) {
     this._result = response
   }
 
@@ -28,9 +32,66 @@ export default class RenderResult {
         'invariant: static responses cannot be piped. This is a bug in Next.js'
       )
     }
+
     const response = this._result
+    const maybeFlush =
+      typeof (res as any).flush === 'function'
+        ? () => (res as any).flush()
+        : () => {}
+
+    type Subscriber = (ready: boolean) => void
+    const subscribers: Set<Subscriber> = new Set()
+    let ready: boolean = true
+    const setReady = (isReady: boolean) => {
+      if (isReady !== ready) {
+        ready = isReady
+        subscribers.forEach((callback) => callback(ready))
+      }
+    }
+    const drainHandler = () => {
+      setReady(true)
+    }
+    res.on('drain', drainHandler)
+
     return new Promise((resolve, reject) => {
-      response(res, (err) => (err ? reject(err) : resolve()))
+      response(
+        {
+          write(chunk) {
+            setReady(res.write(chunk))
+          },
+          buffer(shouldBuffer) {
+            const method = shouldBuffer ? 'cork' : 'uncork'
+            res[method]()
+          },
+          flush() {
+            maybeFlush()
+          },
+          close(err) {
+            if (err) {
+              res.destroy(err)
+            } else {
+              res.end()
+            }
+          },
+          subscribe(callback) {
+            subscribers.add(callback)
+            callback(ready)
+            return () => {
+              subscribers.delete(callback)
+            }
+          },
+        },
+        (err) => {
+          subscribers.clear()
+          res.removeListener('drain', drainHandler)
+
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
+        }
+      )
     })
   }