feat(gatsby): enable async rendering with react 18

packages/gatsby/cache-dir/server-utils/writable-as-promise.js

@@ -0,0 +1,35 @@
+import { Writable } from "stream"
+
+export class WritableAsPromise extends Writable {
+  constructor() {
+    super()
+
+    this._output = ``
+    this._deferred = {
+      promise: null,
+      resolve: null,
+      reject: null,
+    }
+    this._deferred.promise = new Promise((resolve, reject) => {
+      this._deferred.resolve = resolve
+      this._deferred.reject = reject
+    })
+  }
+
+  _write(chunk, enc, cb) {
+    this._output += chunk.toString()
+
+    cb()
+  }
+
+  end() {
+    this._deferred.resolve(this._output)
+
+    this.destroy()
+  }
+
+  // disguise us as a promise
+  then(resolve, reject) {
+    return this._deferred.promise.then(resolve, reject)
+  }
+}

packages/gatsby/cache-dir/static-entry.js

@@ -1,6 +1,10 @@
 const React = require(`react`)
 const path = require(`path`)
-const { renderToString, renderToStaticMarkup } = require(`react-dom/server`)
+const {
+  renderToString,
+  renderToStaticMarkup,
+  pipeToNodeWritable,
+} = require(`react-dom/server`)
 const { ServerLocation, Router, isRedirect } = require(`@gatsbyjs/reach-router`)
 const { merge, flattenDeep, replace } = require(`lodash`)
 const { StaticQueryContext } = require(`gatsby`)
@@ -260,7 +264,27 @@ export default async function staticPage({
     // If no one stepped up, we'll handle it.
     if (!bodyHtml) {
       try {
-        bodyHtml = renderToString(bodyComponent)
+        // react 18 enabled
+        if (pipeToNodeWritable) {
+          const {
+            WritableAsPromise,
+          } = require(`./server-utils/writable-as-promise`)
+          const writableStream = new WritableAsPromise()
+          const { startWriting } = pipeToNodeWritable(
+            bodyComponent,
+            writableStream,
+            {
+              onCompleteAll() {
+                startWriting()
+              },
+              onError() {},
+            }
+          )
+
+          bodyHtml = await writableStream
+        } else {
+          bodyHtml = renderToString(bodyComponent)
+        }
       } catch (e) {
         // ignore @reach/router redirect errors
         if (!isRedirect(e)) throw e