Update React on site

Closes GH-1987

Reviewed-by: Christian Murphy <[email protected]>

docs/_asset/index.client.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {hydrateRoot} from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import {createFromFetch} from 'react-server-dom-webpack'
 import {Root} from './root.client.js'
 
@@ -12,7 +12,8 @@ if ('paintWorklet' in CSS) {
 }
 
 async function main() {
-  const $root = document.querySelector('#root')
   const nljson = document.querySelector('#payload').dataset.src
-  hydrateRoot($root, <Root response={createFromFetch(fetch(nljson))} />)
+  const $root = document.querySelector('#root')
+  const root = createRoot($root)
+  root.render(<Root response={createFromFetch(fetch(nljson))} />)
 }

package.json

@@ -64,11 +64,11 @@
     "postcss-cli": "^9.0.0",
     "prettier": "^2.0.0",
     "puppeteer-core": "^13.0.0",
-    "react": "0.0.0-experimental-7ec4c5597",
-    "react-dom": "0.0.0-experimental-7ec4c5597",
+    "react": "0.0.0-experimental-1159ff619-20220324",
+    "react-dom": "0.0.0-experimental-1159ff619-20220324",
     "react-error-boundary": "^3.0.0",
-    "react-fetch": "0.0.0-experimental-7ec4c5597",
-    "react-server-dom-webpack": "0.0.0-experimental-7ec4c5597",
+    "react-fetch": "0.0.0-experimental-1159ff619-20220324",
+    "react-server-dom-webpack": "0.0.0-experimental-1159ff619-20220324",
     "react-tabs": "^4.0.0",
     "react-use-clipboard": "^1.0.0",
     "rehype-autolink-headings": "^6.0.0",
@@ -100,7 +100,7 @@
     "rimraf": "^3.0.0",
     "rodemirror": "^1.0.0",
     "type-coverage": "^2.0.0",
-    "typescript": "~4.4.0",
+    "typescript": "^4.0.0",
     "unified": "^10.0.0",
     "unist-builder": "^3.0.0",
     "unist-util-visit": "^4.0.0",
@@ -109,7 +109,7 @@
     "vfile-message": "^3.0.0",
     "vfile-reporter": "^7.0.0",
     "vfile-statistics": "^2.0.0",
-    "webpack": "^4.0.0",
+    "webpack": "^5.0.0",
     "xast-util-feed": "^1.0.0",
     "xast-util-sitemap": "^1.0.0",
     "xast-util-to-xml": "^3.0.0",

patches/react-server-dom-webpack+0.0.0-experimental-7ec4c5597.patch → patches/react-server-dom-webpack+0.0.0-experimental-1159ff619-20220324.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js
-index 184ed95..76fa48e 100644
+index ad8aaca..16dd552 100644
 --- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js
 +++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js
-@@ -68,7 +68,7 @@ module.exports = function register() {
+@@ -69,7 +69,7 @@ module.exports = function register() {
      }
    };
 
@@ -11,7 +11,7 @@ index 184ed95..76fa48e 100644
      var moduleId = url.pathToFileURL(path).href;
      var moduleReference = {
        $$typeof: MODULE_REFERENCE,
-@@ -84,11 +84,11 @@ module.exports = function register() {
+@@ -85,11 +85,11 @@ module.exports = function register() {
    Module._resolveFilename = function (request, parent, isMain, options) {
      var resolved = originalResolveFilename.apply(this, arguments);
 
@@ -27,10 +27,10 @@ index 184ed95..76fa48e 100644
          } else {
            reason = "\"" + request + "\" (which expands to \"" + resolved + "\")";
 diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js
-index 01e3fcf..39c86f1 100644
+index a78c39c..c26a388 100644
 --- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js
 +++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js
-@@ -58,7 +58,7 @@ class ReactFlightWebpackPlugin {
+@@ -61,7 +61,7 @@ class ReactFlightWebpackPlugin {
        this.clientReferences = [{
          directory: '.',
          recursive: true,
@@ -39,20 +39,20 @@ index 01e3fcf..39c86f1 100644
        }];
      } else if (typeof options.clientReferences === 'string' || !isArray(options.clientReferences)) {
        this.clientReferences = [options.clientReferences];
-@@ -146,7 +146,7 @@ class ReactFlightWebpackPlugin {
-           // TODO: Hook into deps instead of the target module.
-           // That way we know by the type of dep whether to include.
-           // It also resolves conflicts when the same module is in multiple chunks.
--          if (!/\.client\.js$/.test(mod.resource)) {
-+          if (!/\.client\.(js|md|mdx)$/.test(mod.resource)) {
-             return;
-           }
+@@ -162,7 +162,7 @@ class ReactFlightWebpackPlugin {
+             // TODO: Hook into deps instead of the target module.
+             // That way we know by the type of dep whether to include.
+             // It also resolves conflicts when the same module is in multiple chunks.
+-            if (!/\.client\.(js|ts)x?$/.test(module.resource)) {
++            if (!/\.client\.(js|ts|md)x?$/.test(module.resource)) {
+               return;
+             }
 
 diff --git a/node_modules/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js b/node_modules/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js
-index 843eb86..2741250 100644
+index 15742ac..2cfc007 100644
 --- a/node_modules/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js
 +++ b/node_modules/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js
-@@ -72,13 +72,13 @@ async function resolve(specifier, context, defaultResolve) {
+@@ -78,13 +78,13 @@ async function resolve(specifier, context, defaultResolve) {
 
    var resolved = await defaultResolve(specifier, context, defaultResolve);
 
@@ -69,7 +69,7 @@ index 843eb86..2741250 100644
          reason = "\"" + specifier + "\"";
        } else {
          reason = "\"" + specifier + "\" (which expands to \"" + resolved.url + "\")";
-@@ -233,7 +233,7 @@ async function parseExportNamesInto(transformedSource, names, parentURL, default
+@@ -239,7 +239,7 @@ async function parseExportNamesInto(transformedSource, names, parentURL, default
  async function transformSource(source, context, defaultTransformSource) {
    var transformed = await defaultTransformSource(source, context, defaultTransformSource);
 

renovate.json5

@@ -8,10 +8,9 @@
         // RSC.
         'react',
         'react-dom',
+        'react-fetch',
         'react-server-dom-webpack',
-        // `[email protected]` has a problem with tail calls.
-        'typescript',
-        // `node-loader@2` depends on Node 16+.
+        // `node-loader@2` depends on Node 16+. Our website is on Vercel/AWS which don’t support Node 16.
         '@node-loader/babel',
         '@node-loader/core'
       ],

website/generate.server.js

@@ -4,7 +4,7 @@ import path from 'path'
 import process from 'process'
 import {fileURLToPath} from 'url'
 import React from 'react'
-import {pipeToNodeWritable} from 'react-server-dom-webpack/writer'
+import {renderToPipeableStream} from 'react-server-dom-webpack/writer'
 import pAll from 'p-all'
 import {globby} from 'globby'
 import {sitemap} from 'xast-util-sitemap'
@@ -159,7 +159,8 @@ async function main() {
         navTree
       })
 
-      pipeToNodeWritable(element, writeStream, manifest)
+      const {pipe} = renderToPipeableStream(element, manifest)
+      pipe(writeStream)
     }),
     {concurrency: 6}
   )

website/prerender.js

@@ -3,7 +3,7 @@ import {promises as fs} from 'fs'
 import path from 'path'
 import {fileURLToPath} from 'url'
 import React from 'react'
-import {renderToString} from 'react-dom/server.js'
+import {renderToString} from 'react-dom/server'
 import {createFromReadableStream} from 'react-server-dom-webpack'
 import {globby} from 'globby'
 import pAll from 'p-all'