From e6b5f7ea2ed21eb549550a4963455fea541e8738 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 9 Dec 2021 16:06:44 +0900
Subject: [PATCH 01/87] Start react-server-dom-vite as a copy of the Webpack
 implementation

---
 .eslintrc.js                                  |   8 +
 ReactVersions.js                              |   1 +
 ...FlightClientHostConfig.dom-browser-vite.js |  12 +
 .../ReactFlightClientHostConfig.dom-vite.js   |  12 +
 .../ReactFiberHostConfig.dom-browser-vite.js  |  10 +
 .../forks/ReactFiberHostConfig.dom-vite.js    |  10 +
 packages/react-server-dom-vite/README.md      |   5 +
 .../react-server-dom-vite/esm/package.json    |   3 +
 .../esm/react-server-dom-vite-node-loader.js  |  10 +
 packages/react-server-dom-vite/index.js       |  10 +
 .../react-server-dom-vite/node-register.js    |  10 +
 .../npm/esm/package.json                      |   3 +
 packages/react-server-dom-vite/npm/index.js   |   7 +
 .../npm/node-register.js                      |   3 +
 packages/react-server-dom-vite/npm/plugin.js  |   3 +
 .../npm/writer.browser.server.js              |   7 +
 packages/react-server-dom-vite/npm/writer.js  |   6 +
 .../npm/writer.node.server.js                 |   7 +
 packages/react-server-dom-vite/package.json   |  66 +++
 packages/react-server-dom-vite/plugin.js      |  10 +
 .../ReactFlightClientWebpackBundlerConfig.js  |  74 +++
 .../src/ReactFlightDOMClient.js               |  84 +++
 .../src/ReactFlightDOMServerBrowser.js        |  51 ++
 .../src/ReactFlightDOMServerNode.js           |  59 ++
 .../ReactFlightServerWebpackBundlerConfig.js  |  48 ++
 .../src/ReactFlightWebpackNodeLoader.js       | 267 +++++++++
 .../src/ReactFlightWebpackNodeRegister.js     |  95 +++
 .../src/ReactFlightWebpackPlugin.js           | 358 ++++++++++++
 .../src/__tests__/ReactFlightDOM-test.js      | 548 ++++++++++++++++++
 .../__tests__/ReactFlightDOMBrowser-test.js   | 343 +++++++++++
 .../writer.browser.server.js                  |  10 +
 packages/react-server-dom-vite/writer.js      |  13 +
 .../writer.node.server.js                     |  10 +
 ...eactFlightServerConfig.dom-browser-vite.js |  11 +
 .../forks/ReactFlightServerConfig.dom-vite.js |  11 +
 ...eactServerFormatConfig.dom-browser-vite.js |  10 +
 .../forks/ReactServerFormatConfig.dom-vite.js |  10 +
 ...eactServerStreamConfig.dom-browser-vite.js |  10 +
 .../forks/ReactServerStreamConfig.dom-vite.js |  10 +
 scripts/rollup/bundles.js                     |  64 ++
 scripts/rollup/validate/index.js              |   2 +
 scripts/shared/inlinedHostConfigs.js          |  43 ++
 42 files changed, 2334 insertions(+)
 create mode 100644 packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
 create mode 100644 packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
 create mode 100644 packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser-vite.js
 create mode 100644 packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-vite.js
 create mode 100644 packages/react-server-dom-vite/README.md
 create mode 100644 packages/react-server-dom-vite/esm/package.json
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
 create mode 100644 packages/react-server-dom-vite/index.js
 create mode 100644 packages/react-server-dom-vite/node-register.js
 create mode 100644 packages/react-server-dom-vite/npm/esm/package.json
 create mode 100644 packages/react-server-dom-vite/npm/index.js
 create mode 100644 packages/react-server-dom-vite/npm/node-register.js
 create mode 100644 packages/react-server-dom-vite/npm/plugin.js
 create mode 100644 packages/react-server-dom-vite/npm/writer.browser.server.js
 create mode 100644 packages/react-server-dom-vite/npm/writer.js
 create mode 100644 packages/react-server-dom-vite/npm/writer.node.server.js
 create mode 100644 packages/react-server-dom-vite/package.json
 create mode 100644 packages/react-server-dom-vite/plugin.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightDOMClient.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js
 create mode 100644 packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
 create mode 100644 packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
 create mode 100644 packages/react-server-dom-vite/writer.browser.server.js
 create mode 100644 packages/react-server-dom-vite/writer.js
 create mode 100644 packages/react-server-dom-vite/writer.node.server.js
 create mode 100644 packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
 create mode 100644 packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
 create mode 100644 packages/react-server/src/forks/ReactServerFormatConfig.dom-browser-vite.js
 create mode 100644 packages/react-server/src/forks/ReactServerFormatConfig.dom-vite.js
 create mode 100644 packages/react-server/src/forks/ReactServerStreamConfig.dom-browser-vite.js
 create mode 100644 packages/react-server/src/forks/ReactServerStreamConfig.dom-vite.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 0bc90137a5c..659a893fcf1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -144,6 +144,7 @@ module.exports = {
         'packages/react-fs/**/*.js',
         'packages/react-refresh/**/*.js',
         'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-server-dom-vite/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',
@@ -255,6 +256,13 @@ module.exports = {
         __webpack_require__: 'readonly',
       },
     },
+    {
+      files: ['packages/react-server-dom-vite/**/*.js'],
+      globals: {
+        __webpack_chunk_load__: 'readonly',
+        __webpack_require__: 'readonly',
+      },
+    },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {
diff --git a/ReactVersions.js b/ReactVersions.js
index 32dde5ab521..dba58625916 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -48,6 +48,7 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
+  'react-server-dom-vite',
 ];
 
 module.exports = {
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
new file mode 100644
index 00000000000..7e17cffce53
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
new file mode 100644
index 00000000000..7e17cffce53
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser-vite.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser-vite.js
new file mode 100644
index 00000000000..d830c8501be
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/client/ReactDOMHostConfig';
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-vite.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-vite.js
new file mode 100644
index 00000000000..d830c8501be
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/client/ReactDOMHostConfig';
diff --git a/packages/react-server-dom-vite/README.md b/packages/react-server-dom-vite/README.md
new file mode 100644
index 00000000000..fd0771f4d7b
--- /dev/null
+++ b/packages/react-server-dom-vite/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-vite
+
+Experimental React Flight bindings for DOM using Vite.
+
+**Use it at your own risk.**
diff --git a/packages/react-server-dom-vite/esm/package.json b/packages/react-server-dom-vite/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
new file mode 100644
index 00000000000..d7a01f6f221
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightWebpackNodeLoader.js';
diff --git a/packages/react-server-dom-vite/index.js b/packages/react-server-dom-vite/index.js
new file mode 100644
index 00000000000..67e9a28e029
--- /dev/null
+++ b/packages/react-server-dom-vite/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-vite/node-register.js b/packages/react-server-dom-vite/node-register.js
new file mode 100644
index 00000000000..03754438bf3
--- /dev/null
+++ b/packages/react-server-dom-vite/node-register.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightWebpackNodeRegister';
diff --git a/packages/react-server-dom-vite/npm/esm/package.json b/packages/react-server-dom-vite/npm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-vite/npm/index.js b/packages/react-server-dom-vite/npm/index.js
new file mode 100644
index 00000000000..8000702be9e
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-vite.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-vite.development.js');
+}
diff --git a/packages/react-server-dom-vite/npm/node-register.js b/packages/react-server-dom-vite/npm/node-register.js
new file mode 100644
index 00000000000..5d1503fe004
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/node-register.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-vite-node-register.js');
diff --git a/packages/react-server-dom-vite/npm/plugin.js b/packages/react-server-dom-vite/npm/plugin.js
new file mode 100644
index 00000000000..ffb0bbe2988
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/plugin.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-vite-plugin.js');
diff --git a/packages/react-server-dom-vite/npm/writer.browser.server.js b/packages/react-server-dom-vite/npm/writer.browser.server.js
new file mode 100644
index 00000000000..65ab3bb72ba
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/writer.browser.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-vite-writer.browser.production.min.server.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-vite-writer.browser.development.server.js');
+}
diff --git a/packages/react-server-dom-vite/npm/writer.js b/packages/react-server-dom-vite/npm/writer.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/writer.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-vite/npm/writer.node.server.js b/packages/react-server-dom-vite/npm/writer.node.server.js
new file mode 100644
index 00000000000..ee69b99c15b
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/writer.node.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-vite-writer.node.production.min.server.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-vite-writer.node.development.server.js');
+}
diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
new file mode 100644
index 00000000000..3b5b9cd2156
--- /dev/null
+++ b/packages/react-server-dom-vite/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "react-server-dom-vite",
+  "description": "React Server Components bindings for DOM using Vite. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "0.1.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "plugin.js",
+    "writer.js",
+    "writer.browser.server.js",
+    "writer.node.server.js",
+    "node-register.js",
+    "cjs/",
+    "umd/",
+    "esm/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./plugin": "./plugin.js",
+    "./writer": {
+      "react-server": {
+        "node": "./writer.node.server.js",
+        "browser": "./writer.browser.server.js"
+      },
+      "default": "./writer.js"
+    },
+    "./writer.node.server": "./writer.node.server.js",
+    "./writer.browser.server": "./writer.browser.server.js",
+    "./node-loader": "./esm/react-server-dom-vite-node-loader.js",
+    "./node-register": "./node-register.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-vite"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "webpack": "^5.59.0"
+  },
+  "dependencies": {
+    "acorn": "^6.2.1",
+    "neo-async": "^2.6.1",
+    "loose-envify": "^1.1.0",
+    "object-assign": "^4.1.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  }
+}
diff --git a/packages/react-server-dom-vite/plugin.js b/packages/react-server-dom-vite/plugin.js
new file mode 100644
index 00000000000..64c004e7e0f
--- /dev/null
+++ b/packages/react-server-dom-vite/plugin.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {default} from './src/ReactFlightWebpackPlugin';
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
new file mode 100644
index 00000000000..f3c4e1bf1c1
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export opaque type ModuleMetaData = {
+  id: string,
+  chunks: Array<string>,
+  name: string,
+};
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ModuleReference<T> = ModuleMetaData;
+
+export function resolveModuleReference<T>(
+  moduleData: ModuleMetaData,
+): ModuleReference<T> {
+  return moduleData;
+}
+
+// The chunk cache contains all the chunks we've preloaded so far.
+// If they're still pending they're a thenable. This map also exists
+// in Webpack but unfortunately it's not exposed so we have to
+// replicate it in user space. null means that it has already loaded.
+const chunkCache: Map<string, null | Promise<any> | Error> = new Map();
+
+// Start preloading the modules since we might need them soon.
+// This function doesn't suspend.
+export function preloadModule<T>(moduleData: ModuleReference<T>): void {
+  const chunks = moduleData.chunks;
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkId = chunks[i];
+    const entry = chunkCache.get(chunkId);
+    if (entry === undefined) {
+      const thenable = __webpack_chunk_load__(chunkId);
+      const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
+      const reject = chunkCache.set.bind(chunkCache, chunkId);
+      thenable.then(resolve, reject);
+      chunkCache.set(chunkId, thenable);
+    }
+  }
+}
+
+// Actually require the module or suspend if it's not yet ready.
+// Increase priority if necessary.
+export function requireModule<T>(moduleData: ModuleReference<T>): T {
+  const chunks = moduleData.chunks;
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkId = chunks[i];
+    const entry = chunkCache.get(chunkId);
+    if (entry !== null) {
+      // We assume that preloadModule has been called before.
+      // So we don't expect to see entry being undefined here, that's an error.
+      // Let's throw either an error or the Promise.
+      throw entry;
+    }
+  }
+  const moduleExports = __webpack_require__(moduleData.id);
+  if (moduleData.name === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (moduleData.name === '') {
+    // This is a placeholder value that represents that the caller accessed the
+    // default property of this if it was an ESM interop module.
+    return moduleExports.__esModule ? moduleExports.default : moduleExports;
+  }
+  return moduleExports[moduleData.name];
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMClient.js b/packages/react-server-dom-vite/src/ReactFlightDOMClient.js
new file mode 100644
index 00000000000..9c9d17c11f5
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMClient.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Response as FlightResponse} from 'react-client/src/ReactFlightClientStream';
+
+import {
+  createResponse,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClientStream';
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  function progress({done, value}) {
+    if (done) {
+      close(response);
+      return;
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, buffer);
+    return reader.read().then(progress, error);
+  }
+  function error(e) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress, error);
+}
+
+function createFromReadableStream(stream: ReadableStream): FlightResponse {
+  const response: FlightResponse = createResponse();
+  startReadingFromStream(response, stream);
+  return response;
+}
+
+function createFromFetch(
+  promiseForResponse: Promise<Response>,
+): FlightResponse {
+  const response: FlightResponse = createResponse();
+  promiseForResponse.then(
+    function(r) {
+      startReadingFromStream(response, (r.body: any));
+    },
+    function(e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return response;
+}
+
+function createFromXHR(request: XMLHttpRequest): FlightResponse {
+  const response: FlightResponse = createResponse();
+  let processedLength = 0;
+  function progress(e: ProgressEvent): void {
+    const chunk = request.responseText;
+    processStringChunk(response, chunk, processedLength);
+    processedLength = chunk.length;
+  }
+  function load(e: ProgressEvent): void {
+    progress(e);
+    close(response);
+  }
+  function error(e: ProgressEvent): void {
+    reportGlobalError(response, new TypeError('Network error'));
+  }
+  request.addEventListener('progress', progress);
+  request.addEventListener('load', load);
+  request.addEventListener('error', error);
+  request.addEventListener('abort', error);
+  request.addEventListener('timeout', error);
+  return response;
+}
+
+export {createFromXHR, createFromFetch, createFromReadableStream};
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
new file mode 100644
index 00000000000..9d632dfb071
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/src/ReactFlightServer';
+
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
+function renderToReadableStream(
+  model: ReactModel,
+  webpackMap: BundlerConfig,
+  options?: Options,
+): ReadableStream {
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+  );
+  const stream = new ReadableStream({
+    start(controller) {
+      startWork(request);
+    },
+    pull(controller) {
+      // Pull is called immediately even if the stream is not passed to anything.
+      // That's buffering too early. We want to start buffering once the stream
+      // is actually used by something so we can give it the best result possible
+      // at that point.
+      if (stream.locked) {
+        startFlowing(request, controller);
+      }
+    },
+    cancel(reason) {},
+  });
+  return stream;
+}
+
+export {renderToReadableStream};
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..5f992d4b03e
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
+import type {Writable} from 'stream';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/src/ReactFlightServer';
+
+function createDrainHandler(destination, request) {
+  return () => startFlowing(request, destination);
+}
+
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
+type Controls = {|
+  pipe<T: Writable>(destination: T): T,
+|};
+
+function renderToPipeableStream(
+  model: ReactModel,
+  webpackMap: BundlerConfig,
+  options?: Options,
+): Controls {
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      return destination;
+    },
+  };
+}
+
+export {renderToPipeableStream};
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js
new file mode 100644
index 00000000000..c8469eeba80
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type WebpackMap = {
+  [filepath: string]: {
+    [name: string]: ModuleMetaData,
+  },
+};
+
+export type BundlerConfig = WebpackMap;
+
+// eslint-disable-next-line no-unused-vars
+export type ModuleReference<T> = {
+  $$typeof: Symbol,
+  filepath: string,
+  name: string,
+};
+
+export type ModuleMetaData = {
+  id: string,
+  chunks: Array<string>,
+  name: string,
+};
+
+export type ModuleKey = string;
+
+const MODULE_TAG = Symbol.for('react.module.reference');
+
+export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
+  return reference.filepath + '#' + reference.name;
+}
+
+export function isModuleReference(reference: Object): boolean {
+  return reference.$$typeof === MODULE_TAG;
+}
+
+export function resolveModuleMetaData<T>(
+  config: BundlerConfig,
+  moduleReference: ModuleReference<T>,
+): ModuleMetaData {
+  return config[moduleReference.filepath][moduleReference.name];
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
new file mode 100644
index 00000000000..db618f0eb17
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import acorn from 'acorn';
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => {url: string} | Promise<{url: string}>;
+
+type GetSourceContext = {
+  format: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type TransformSourceContext = {
+  format: string,
+  url: string,
+};
+
+type TransformSourceFunction = (
+  Source,
+  TransformSourceContext,
+  TransformSourceFunction,
+) => Promise<{source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+let warnedAboutConditionsFlag = false;
+
+let stashedGetSource: null | GetSourceFunction = null;
+let stashedResolve: null | ResolveFunction = null;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<{url: string}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedResolve = defaultResolve;
+
+  if (!context.conditions.includes('react-server')) {
+    context = {
+      ...context,
+      conditions: [...context.conditions, 'react-server'],
+    };
+    if (!warnedAboutConditionsFlag) {
+      warnedAboutConditionsFlag = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.warn(
+        'You did not run Node.js with the `--conditions react-server` flag. ' +
+          'Any "react-server" override will only work with ESM imports.',
+      );
+    }
+  }
+  const resolved = await defaultResolve(specifier, context, defaultResolve);
+  if (resolved.url.endsWith('.server.js')) {
+    const parentURL = context.parentURL;
+    if (parentURL && !parentURL.endsWith('.server.js')) {
+      let reason;
+      if (specifier.endsWith('.server.js')) {
+        reason = `"${specifier}"`;
+      } else {
+        reason = `"${specifier}" (which expands to "${resolved.url}")`;
+      }
+      throw new Error(
+        `Cannot import ${reason} from "${parentURL}". ` +
+          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
+          'That way nobody accidentally sends these to the client by indirectly importing it.',
+      );
+    }
+  }
+  return resolved;
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+) {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
+function addExportNames(names, node) {
+  switch (node.type) {
+    case 'Identifier':
+      names.push(node.name);
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addExportNames(names, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element) addExportNames(names, element);
+      }
+      return;
+    case 'Property':
+      addExportNames(names, node.value);
+      return;
+    case 'AssignmentPattern':
+      addExportNames(names, node.left);
+      return;
+    case 'RestElement':
+      addExportNames(names, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addExportNames(names, node.expression);
+      return;
+  }
+}
+
+function resolveClientImport(
+  specifier: string,
+  parentURL: string,
+): {url: string} | Promise<{url: string}> {
+  // Resolve an import specifier as if it was loaded by the client. This doesn't use
+  // the overrides that this loader does but instead reverts to the default.
+  // This resolution algorithm will not necessarily have the same configuration
+  // as the actual client loader. It should mostly work and if it doesn't you can
+  // always convert to explicit exported names instead.
+  const conditions = ['node', 'import'];
+  if (stashedResolve === null) {
+    throw new Error(
+      'Expected resolve to have been called before transformSource',
+    );
+  }
+  return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  return defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+}
+
+async function parseExportNamesInto(
+  transformedSource: string,
+  names: Array<string>,
+  parentURL: string,
+  defaultTransformSource,
+): Promise<void> {
+  const {body} = acorn.parse(transformedSource, {
+    ecmaVersion: '2019',
+    sourceType: 'module',
+  });
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        if (node.exported) {
+          addExportNames(names, node.exported);
+          continue;
+        } else {
+          const {url} = await resolveClientImport(node.source.value, parentURL);
+          const {source} = await loadClientImport(url, defaultTransformSource);
+          if (typeof source !== 'string') {
+            throw new Error('Expected the transformed source to be a string.');
+          }
+          parseExportNamesInto(source, names, url, defaultTransformSource);
+          continue;
+        }
+      case 'ExportDefaultDeclaration':
+        names.push('default');
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addExportNames(names, declarations[j].id);
+            }
+          } else {
+            addExportNames(names, node.declaration.id);
+          }
+        }
+        if (node.specificers) {
+          const specificers = node.specificers;
+          for (let j = 0; j < specificers.length; j++) {
+            addExportNames(names, specificers[j].exported);
+          }
+        }
+        continue;
+    }
+  }
+}
+
+export async function transformSource(
+  source: Source,
+  context: TransformSourceContext,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource,
+  );
+  if (context.format === 'module' && context.url.endsWith('.client.js')) {
+    const transformedSource = transformed.source;
+    if (typeof transformedSource !== 'string') {
+      throw new Error('Expected source to have been transformed to a string.');
+    }
+
+    const names = [];
+    await parseExportNamesInto(
+      transformedSource,
+      names,
+      context.url,
+      defaultTransformSource,
+    );
+
+    let newSrc =
+      "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
+    for (let i = 0; i < names.length; i++) {
+      const name = names[i];
+      if (name === 'default') {
+        newSrc += 'export default ';
+      } else {
+        newSrc += 'export const ' + name + ' = ';
+      }
+      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
+      newSrc += JSON.stringify(context.url);
+      newSrc += ', name: ';
+      newSrc += JSON.stringify(name);
+      newSrc += '};\n';
+    }
+
+    return {source: newSrc};
+  }
+  return transformed;
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
new file mode 100644
index 00000000000..a5f889d3eb1
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const url = require('url');
+
+// $FlowFixMe
+const Module = require('module');
+
+module.exports = function register() {
+  const MODULE_REFERENCE = Symbol.for('react.module.reference');
+  const proxyHandlers = {
+    get: function(target, name, receiver) {
+      switch (name) {
+        // These names are read by the Flight runtime if you end up using the exports object.
+        case '$$typeof':
+          // These names are a little too common. We should probably have a way to
+          // have the Flight runtime extract the inner target instead.
+          return target.$$typeof;
+        case 'filepath':
+          return target.filepath;
+        case 'name':
+          return target.name;
+        // We need to special case this because createElement reads it if we pass this
+        // reference.
+        case 'defaultProps':
+          return undefined;
+        case '__esModule':
+          // Something is conditionally checking which export to use. We'll pretend to be
+          // an ESM compat module but then we'll check again on the client.
+          target.default = {
+            $$typeof: MODULE_REFERENCE,
+            filepath: target.filepath,
+            // This a placeholder value that tells the client to conditionally use the
+            // whole object or just the default export.
+            name: '',
+          };
+          return true;
+      }
+      let cachedReference = target[name];
+      if (!cachedReference) {
+        cachedReference = target[name] = {
+          $$typeof: MODULE_REFERENCE,
+          filepath: target.filepath,
+          name: name,
+        };
+      }
+      return cachedReference;
+    },
+    set: function() {
+      throw new Error('Cannot assign to a client module from a server module.');
+    },
+  };
+
+  (require: any).extensions['.client.js'] = function(module, path) {
+    const moduleId = url.pathToFileURL(path).href;
+    const moduleReference: {[string]: any} = {
+      $$typeof: MODULE_REFERENCE,
+      filepath: moduleId,
+      name: '*', // Represents the whole object instead of a particular import.
+    };
+    module.exports = new Proxy(moduleReference, proxyHandlers);
+  };
+
+  const originalResolveFilename = Module._resolveFilename;
+
+  Module._resolveFilename = function(request, parent, isMain, options) {
+    const resolved = originalResolveFilename.apply(this, arguments);
+    if (resolved.endsWith('.server.js')) {
+      if (
+        parent &&
+        parent.filename &&
+        !parent.filename.endsWith('.server.js')
+      ) {
+        let reason;
+        if (request.endsWith('.server.js')) {
+          reason = `"${request}"`;
+        } else {
+          reason = `"${request}" (which expands to "${resolved}")`;
+        }
+        throw new Error(
+          `Cannot import ${reason} from "${parent.filename}". ` +
+            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
+            'That way nobody accidentally sends these to the client by indirectly importing it.',
+        );
+      }
+    }
+    return resolved;
+  };
+};
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js
new file mode 100644
index 00000000000..0c49d293733
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js
@@ -0,0 +1,358 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {join} from 'path';
+import {pathToFileURL} from 'url';
+
+import asyncLib from 'neo-async';
+
+import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
+import NullDependency from 'webpack/lib/dependencies/NullDependency';
+import Template from 'webpack/lib/Template';
+import {
+  sources,
+  WebpackError,
+  Compilation,
+  AsyncDependenciesBlock,
+} from 'webpack';
+
+import isArray from 'shared/isArray';
+
+class ClientReferenceDependency extends ModuleDependency {
+  constructor(request) {
+    super(request);
+  }
+
+  get type() {
+    return 'client-reference';
+  }
+}
+
+// This is the module that will be used to anchor all client references to.
+// I.e. it will have all the client files as async deps from this point on.
+// We use the Flight client implementation because you can't get to these
+// without the client runtime so it's the first time in the loading sequence
+// you might want them.
+const clientImportName = 'react-server-dom-webpack';
+const clientFileName = require.resolve('../');
+
+type ClientReferenceSearchPath = {
+  directory: string,
+  recursive?: boolean,
+  include: RegExp,
+  exclude?: RegExp,
+};
+
+type ClientReferencePath = string | ClientReferenceSearchPath;
+
+type Options = {
+  isServer: boolean,
+  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
+  chunkName?: string,
+  manifestFilename?: string,
+};
+
+const PLUGIN_NAME = 'React Server Plugin';
+
+export default class ReactFlightWebpackPlugin {
+  clientReferences: $ReadOnlyArray<ClientReferencePath>;
+  chunkName: string;
+  manifestFilename: string;
+
+  constructor(options: Options) {
+    if (!options || typeof options.isServer !== 'boolean') {
+      throw new Error(
+        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',
+      );
+    }
+    if (options.isServer) {
+      throw new Error('TODO: Implement the server compiler.');
+    }
+    if (!options.clientReferences) {
+      this.clientReferences = [
+        {
+          directory: '.',
+          recursive: true,
+          include: /\.client\.(js|ts|jsx|tsx)$/,
+        },
+      ];
+    } else if (
+      typeof options.clientReferences === 'string' ||
+      !isArray(options.clientReferences)
+    ) {
+      this.clientReferences = [(options.clientReferences: $FlowFixMe)];
+    } else {
+      this.clientReferences = options.clientReferences;
+    }
+    if (typeof options.chunkName === 'string') {
+      this.chunkName = options.chunkName;
+      if (!/\[(index|request)\]/.test(this.chunkName)) {
+        this.chunkName += '[index]';
+      }
+    } else {
+      this.chunkName = 'client[index]';
+    }
+    this.manifestFilename =
+      options.manifestFilename || 'react-client-manifest.json';
+  }
+
+  apply(compiler: any) {
+    const _this = this;
+    let resolvedClientReferences;
+    let clientFileNameFound = false;
+
+    // Find all client files on the file system
+    compiler.hooks.beforeCompile.tapAsync(
+      PLUGIN_NAME,
+      ({contextModuleFactory}, callback) => {
+        const contextResolver = compiler.resolverFactory.get('context', {});
+
+        _this.resolveAllClientFiles(
+          compiler.context,
+          contextResolver,
+          compiler.inputFileSystem,
+          contextModuleFactory,
+          function(err, resolvedClientRefs) {
+            if (err) {
+              callback(err);
+              return;
+            }
+
+            resolvedClientReferences = resolvedClientRefs;
+            callback();
+          },
+        );
+      },
+    );
+
+    compiler.hooks.thisCompilation.tap(
+      PLUGIN_NAME,
+      (compilation, {normalModuleFactory}) => {
+        compilation.dependencyFactories.set(
+          ClientReferenceDependency,
+          normalModuleFactory,
+        );
+        compilation.dependencyTemplates.set(
+          ClientReferenceDependency,
+          new NullDependency.Template(),
+        );
+
+        const handler = parser => {
+          // We need to add all client references as dependency of something in the graph so
+          // Webpack knows which entries need to know about the relevant chunks and include the
+          // map in their runtime. The things that actually resolves the dependency is the Flight
+          // client runtime. So we add them as a dependency of the Flight client runtime.
+          // Anything that imports the runtime will be made aware of these chunks.
+          parser.hooks.program.tap(PLUGIN_NAME, () => {
+            const module = parser.state.module;
+
+            if (module.resource !== clientFileName) {
+              return;
+            }
+
+            clientFileNameFound = true;
+
+            if (resolvedClientReferences) {
+              for (let i = 0; i < resolvedClientReferences.length; i++) {
+                const dep = resolvedClientReferences[i];
+
+                const chunkName = _this.chunkName
+                  .replace(/\[index\]/g, '' + i)
+                  .replace(/\[request\]/g, Template.toPath(dep.userRequest));
+
+                const block = new AsyncDependenciesBlock(
+                  {
+                    name: chunkName,
+                  },
+                  null,
+                  dep.request,
+                );
+
+                block.addDependency(dep);
+                module.addBlock(block);
+              }
+            }
+          });
+        };
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/auto')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/esm')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/dynamic')
+          .tap('HarmonyModulesPlugin', handler);
+      },
+    );
+
+    compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+        },
+        function() {
+          if (clientFileNameFound === false) {
+            compilation.warnings.push(
+              new WebpackError(
+                `Client runtime at ${clientImportName} was not found. React Server Components module map file ${_this.manifestFilename} was not created.`,
+              ),
+            );
+            return;
+          }
+
+          const json = {};
+          compilation.chunkGroups.forEach(function(chunkGroup) {
+            const chunkIds = chunkGroup.chunks.map(function(c) {
+              return c.id;
+            });
+
+            function recordModule(id, module) {
+              // 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)) {
+                return;
+              }
+
+              const moduleProvidedExports = compilation.moduleGraph
+                .getExportsInfo(module)
+                .getProvidedExports();
+
+              const moduleExports = {};
+              ['', '*']
+                .concat(
+                  Array.isArray(moduleProvidedExports)
+                    ? moduleProvidedExports
+                    : [],
+                )
+                .forEach(function(name) {
+                  moduleExports[name] = {
+                    id,
+                    chunks: chunkIds,
+                    name: name,
+                  };
+                });
+              const href = pathToFileURL(module.resource).href;
+
+              if (href !== undefined) {
+                json[href] = moduleExports;
+              }
+            }
+
+            chunkGroup.chunks.forEach(function(chunk) {
+              const chunkModules = compilation.chunkGraph.getChunkModulesIterable(
+                chunk,
+              );
+
+              Array.from(chunkModules).forEach(function(module) {
+                const moduleId = compilation.chunkGraph.getModuleId(module);
+
+                recordModule(moduleId, module);
+                // If this is a concatenation, register each child to the parent ID.
+                if (module.modules) {
+                  module.modules.forEach(concatenatedMod => {
+                    recordModule(moduleId, concatenatedMod);
+                  });
+                }
+              });
+            });
+          });
+
+          const output = JSON.stringify(json, null, 2);
+          compilation.emitAsset(
+            _this.manifestFilename,
+            new sources.RawSource(output, false),
+          );
+        },
+      );
+    });
+  }
+
+  // This attempts to replicate the dynamic file path resolution used for other wildcard
+  // resolution in Webpack is using.
+  resolveAllClientFiles(
+    context: string,
+    contextResolver: any,
+    fs: any,
+    contextModuleFactory: any,
+    callback: (
+      err: null | Error,
+      result?: $ReadOnlyArray<ClientReferenceDependency>,
+    ) => void,
+  ) {
+    asyncLib.map(
+      this.clientReferences,
+      (
+        clientReferencePath: string | ClientReferenceSearchPath,
+        cb: (
+          err: null | Error,
+          result?: $ReadOnlyArray<ClientReferenceDependency>,
+        ) => void,
+      ): void => {
+        if (typeof clientReferencePath === 'string') {
+          cb(null, [new ClientReferenceDependency(clientReferencePath)]);
+          return;
+        }
+        const clientReferenceSearch: ClientReferenceSearchPath = clientReferencePath;
+        contextResolver.resolve(
+          {},
+          context,
+          clientReferencePath.directory,
+          {},
+          (err, resolvedDirectory) => {
+            if (err) return cb(err);
+            const options = {
+              resource: resolvedDirectory,
+              resourceQuery: '',
+              recursive:
+                clientReferenceSearch.recursive === undefined
+                  ? true
+                  : clientReferenceSearch.recursive,
+              regExp: clientReferenceSearch.include,
+              include: undefined,
+              exclude: clientReferenceSearch.exclude,
+            };
+            contextModuleFactory.resolveDependencies(
+              fs,
+              options,
+              (err2: null | Error, deps: Array<ModuleDependency>) => {
+                if (err2) return cb(err2);
+                const clientRefDeps = deps.map(dep => {
+                  // use userRequest instead of request. request always end with undefined which is wrong
+                  const request = join(resolvedDirectory, dep.userRequest);
+                  const clientRefDep = new ClientReferenceDependency(request);
+                  clientRefDep.userRequest = dep.userRequest;
+                  return clientRefDep;
+                });
+                cb(null, clientRefDeps);
+              },
+            );
+          },
+        );
+      },
+      (
+        err: null | Error,
+        result: $ReadOnlyArray<$ReadOnlyArray<ClientReferenceDependency>>,
+      ): void => {
+        if (err) return callback(err);
+        const flat = [];
+        for (let i = 0; i < result.length; i++) {
+          flat.push.apply(flat, result[i]);
+        }
+        callback(null, flat);
+      },
+    );
+  }
+}
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
new file mode 100644
index 00000000000..bcae6c50f7c
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -0,0 +1,548 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextDecoder = require('util').TextDecoder;
+
+// Don't wait before processing work on the server.
+// TODO: we can replace this with FlightServer.act().
+global.setImmediate = cb => cb();
+
+let webpackModuleIdx = 0;
+let webpackModules = {};
+let webpackMap = {};
+global.__webpack_require__ = function(id) {
+  return webpackModules[id];
+};
+
+let act;
+let Stream;
+let React;
+let ReactDOM;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
+
+describe('ReactFlightDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    webpackModules = {};
+    webpackMap = {};
+    act = require('jest-react').act;
+    Stream = require('stream');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
+    ReactServerDOMReader = require('react-server-dom-webpack');
+  });
+
+  function getTestStream() {
+    const writable = new Stream.PassThrough();
+    const readable = new ReadableStream({
+      start(controller) {
+        writable.on('data', chunk => {
+          controller.enqueue(chunk);
+        });
+        writable.on('end', () => {
+          controller.close();
+        });
+      },
+    });
+    return {
+      readable,
+      writable,
+    };
+  }
+
+  function moduleReference(moduleExport) {
+    const idx = webpackModuleIdx++;
+    webpackModules[idx] = {
+      d: moduleExport,
+    };
+    webpackMap['path/' + idx] = {
+      default: {
+        id: '' + idx,
+        chunks: [],
+        name: 'd',
+      },
+    };
+    const MODULE_TAG = Symbol.for('react.module.reference');
+    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
+  }
+
+  async function waitForSuspense(fn) {
+    while (true) {
+      try {
+        return fn();
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          await promise;
+        } else {
+          throw promise;
+        }
+      }
+    }
+  }
+
+  it('should resolve HTML using Node streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <App />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+    await waitForSuspense(() => {
+      const model = response.readRoot();
+      expect(model).toEqual({
+        html: (
+          <div>
+            <span>hello</span>
+            <span>world</span>
+          </div>
+        ),
+      });
+    });
+  });
+
+  it('should resolve the root', async () => {
+    const {Suspense} = React;
+
+    // Model
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+    function RootModel() {
+      return {
+        html: <HTML />,
+      };
+    }
+
+    // View
+    function Message({response}) {
+      return <section>{response.readRoot().html}</section>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <RootModel />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe(
+      '<section><div><span>hello</span><span>world</span></div></section>',
+    );
+  });
+
+  it('should not get confused by $', async () => {
+    const {Suspense} = React;
+
+    // Model
+    function RootModel() {
+      return {text: '$1'};
+    }
+
+    // View
+    function Message({response}) {
+      return <p>{response.readRoot().text}</p>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <RootModel />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>$1</p>');
+  });
+
+  it('should not get confused by @', async () => {
+    const {Suspense} = React;
+
+    // Model
+    function RootModel() {
+      return {text: '@div'};
+    }
+
+    // View
+    function Message({response}) {
+      return <p>{response.readRoot().text}</p>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <RootModel />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>@div</p>');
+  });
+
+  it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
+    const {Suspense} = React;
+
+    // Client Components
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    }
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    function makeDelayedText() {
+      let error, _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          error = e;
+          promise = null;
+          reject(e);
+        };
+      });
+      function DelayedText({children}, data) {
+        if (promise) {
+          throw promise;
+        }
+        if (error) {
+          throw error;
+        }
+        return <Text>{children}</Text>;
+      }
+      return [DelayedText, _resolve, _reject];
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText();
+    const [Name, resolveName] = makeDelayedText();
+    const [Posts, resolvePosts] = makeDelayedText();
+    const [Photos, resolvePhotos] = makeDelayedText();
+    const [Games, , rejectGames] = makeDelayedText();
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+    function ProfileGames({games}) {
+      return <div>{games}</div>;
+    }
+
+    const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
+
+    function ProfileContent() {
+      return (
+        <>
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+          <MyErrorBoundaryClient>
+            <Suspense fallback={<p>(loading games)</p>}>
+              <ProfileGames games={<Games>:games:</Games>} />
+            </Suspense>
+          </MyErrorBoundaryClient>
+        </>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    function ProfilePage({response}) {
+      return response.readRoot().rootContent;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      model,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <ProfilePage response={response} />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // This isn't enough to show anything.
+    await act(async () => {
+      resolveFriends();
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await act(async () => {
+      resolveName();
+    });
+    // Advance time enough to trigger a nested fallback.
+    jest.advanceTimersByTime(500);
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>(loading games)</p>',
+    );
+
+    expect(reportedErrors).toEqual([]);
+
+    const theError = new Error('Game over');
+    // Let's *fail* loading games.
+    await act(async () => {
+      rejectGames(theError);
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
+    // We can now show the sidebar.
+    await act(async () => {
+      resolvePhotos();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // Show everything.
+    await act(async () => {
+      resolvePosts();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should preserve state of client components on refetch', async () => {
+    const {Suspense} = React;
+
+    // Client
+
+    function Page({response}) {
+      return response.readRoot();
+    }
+
+    function Input() {
+      return <input />;
+    }
+
+    const InputClient = moduleReference(Input);
+
+    // Server
+
+    function App({color}) {
+      // Verify both DOM and Client children.
+      return (
+        <div style={{color}}>
+          <input />
+          <InputClient />
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    const stream1 = getTestStream();
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <App color="red" />,
+      webpackMap,
+    );
+    pipe(stream1.writable);
+    const response1 = ReactServerDOMReader.createFromReadableStream(
+      stream1.readable,
+    );
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <Page response={response1} />
+        </Suspense>,
+      );
+    });
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].tagName).toBe('DIV');
+    expect(container.children[0].style.color).toBe('red');
+
+    // Change the DOM state for both inputs.
+    const inputA = container.children[0].children[0];
+    expect(inputA.tagName).toBe('INPUT');
+    inputA.value = 'hello';
+    const inputB = container.children[0].children[1];
+    expect(inputB.tagName).toBe('INPUT');
+    inputB.value = 'goodbye';
+
+    const stream2 = getTestStream();
+    const {pipe: pipe2} = ReactServerDOMWriter.renderToPipeableStream(
+      <App color="blue" />,
+      webpackMap,
+    );
+    pipe2(stream2.writable);
+    const response2 = ReactServerDOMReader.createFromReadableStream(
+      stream2.readable,
+    );
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <Page response={response2} />
+        </Suspense>,
+      );
+    });
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].tagName).toBe('DIV');
+    expect(container.children[0].style.color).toBe('blue');
+
+    // Verify we didn't destroy the DOM for either input.
+    expect(inputA === container.children[0].children[0]).toBe(true);
+    expect(inputA.tagName).toBe('INPUT');
+    expect(inputA.value).toBe('hello');
+    expect(inputB === container.children[0].children[1]).toBe(true);
+    expect(inputB.tagName).toBe('INPUT');
+    expect(inputB.value).toBe('goodbye');
+  });
+});
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
new file mode 100644
index 00000000000..8b82caac6bc
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -0,0 +1,343 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let webpackModuleIdx = 0;
+let webpackModules = {};
+let webpackMap = {};
+global.__webpack_require__ = function(id) {
+  return webpackModules[id];
+};
+
+let act;
+let React;
+let ReactDOM;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
+
+describe('ReactFlightDOMBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    webpackModules = {};
+    webpackMap = {};
+    act = require('jest-react').act;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
+    ReactServerDOMReader = require('react-server-dom-webpack');
+  });
+
+  function moduleReference(moduleExport) {
+    const idx = webpackModuleIdx++;
+    webpackModules[idx] = {
+      d: moduleExport,
+    };
+    webpackMap['path/' + idx] = {
+      default: {
+        id: '' + idx,
+        chunks: [],
+        name: 'd',
+      },
+    };
+    const MODULE_TAG = Symbol.for('react.module.reference');
+    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
+  }
+
+  async function waitForSuspense(fn) {
+    while (true) {
+      try {
+        return fn();
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          await promise;
+        } else {
+          throw promise;
+        }
+      }
+    }
+  }
+
+  it('should resolve HTML using W3C streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<App />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+    await waitForSuspense(() => {
+      const model = response.readRoot();
+      expect(model).toEqual({
+        html: (
+          <div>
+            <span>hello</span>
+            <span>world</span>
+          </div>
+        ),
+      });
+    });
+  });
+
+  it('should resolve HTML using W3C streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<App />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+    await waitForSuspense(() => {
+      const model = response.readRoot();
+      expect(model).toEqual({
+        html: (
+          <div>
+            <span>hello</span>
+            <span>world</span>
+          </div>
+        ),
+      });
+    });
+  });
+
+  it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
+    const {Suspense} = React;
+
+    // Client Components
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    }
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    function makeDelayedText() {
+      let error, _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          error = e;
+          promise = null;
+          reject(e);
+        };
+      });
+      function DelayedText({children}, data) {
+        if (promise) {
+          throw promise;
+        }
+        if (error) {
+          throw error;
+        }
+        return <Text>{children}</Text>;
+      }
+      return [DelayedText, _resolve, _reject];
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText();
+    const [Name, resolveName] = makeDelayedText();
+    const [Posts, resolvePosts] = makeDelayedText();
+    const [Photos, resolvePhotos] = makeDelayedText();
+    const [Games, , rejectGames] = makeDelayedText();
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+    function ProfileGames({games}) {
+      return <div>{games}</div>;
+    }
+
+    const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
+
+    function ProfileContent() {
+      return (
+        <>
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+          <MyErrorBoundaryClient>
+            <Suspense fallback={<p>(loading games)</p>}>
+              <ProfileGames games={<Games>:games:</Games>} />
+            </Suspense>
+          </MyErrorBoundaryClient>
+        </>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    function ProfilePage({response}) {
+      return response.readRoot().rootContent;
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      model,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <ProfilePage response={response} />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // This isn't enough to show anything.
+    await act(async () => {
+      resolveFriends();
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await act(async () => {
+      resolveName();
+    });
+    // Advance time enough to trigger a nested fallback.
+    jest.advanceTimersByTime(500);
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>(loading games)</p>',
+    );
+
+    expect(reportedErrors).toEqual([]);
+
+    const theError = new Error('Game over');
+    // Let's *fail* loading games.
+    await act(async () => {
+      rejectGames(theError);
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
+    // We can now show the sidebar.
+    await act(async () => {
+      resolvePhotos();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // Show everything.
+    await act(async () => {
+      resolvePosts();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([]);
+  });
+});
diff --git a/packages/react-server-dom-vite/writer.browser.server.js b/packages/react-server-dom-vite/writer.browser.server.js
new file mode 100644
index 00000000000..2329292ffc6
--- /dev/null
+++ b/packages/react-server-dom-vite/writer.browser.server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-vite/writer.js b/packages/react-server-dom-vite/writer.js
new file mode 100644
index 00000000000..00db7f503fa
--- /dev/null
+++ b/packages/react-server-dom-vite/writer.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-vite/writer.node.server.js b/packages/react-server-dom-vite/writer.node.server.js
new file mode 100644
index 00000000000..352e53b0cc6
--- /dev/null
+++ b/packages/react-server-dom-vite/writer.node.server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMServerNode';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
new file mode 100644
index 00000000000..5c7b69fb713
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactFlightServerConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
new file mode 100644
index 00000000000..5c7b69fb713
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactFlightServerConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser-vite.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser-vite.js
new file mode 100644
index 00000000000..c6e482efeb6
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-vite.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-vite.js
new file mode 100644
index 00000000000..c6e482efeb6
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser-vite.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser-vite.js
new file mode 100644
index 00000000000..24cee99c318
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactServerStreamConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-vite.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-vite.js
new file mode 100644
index 00000000000..7b6480120ee
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactServerStreamConfigNode';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 02f0c68f6ba..2b1b275cf40 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -387,6 +387,70 @@ const bundles = [
     externals: ['url', 'module'],
   },
 
+  /******* React Server DOM Vite Writer *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-vite/writer.browser.server',
+    global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-vite/writer.node.server',
+    global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server DOM Vite Reader *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-vite',
+    global: 'ReactServerDOMReader',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server DOM Vite Plugin *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-vite/plugin',
+    global: 'ReactServerWebpackPlugin',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['fs', 'path', 'url', 'neo-async'],
+  },
+
+  /******* React Server DOM Vite Node.js Loader *******/
+  {
+    bundleTypes: [NODE_ESM],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-vite/node-loader',
+    global: 'ReactServerWebpackNodeLoader',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['acorn'],
+  },
+
+  /******* React Server DOM Vite Node.js CommonJS Loader *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-vite/node-register',
+    global: 'ReactFlightWebpackNodeRegister',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['url', 'module'],
+  },
+
   /******* React Server DOM Relay Writer *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 34faf6ed734..14542f49cc6 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -32,6 +32,8 @@ function getFormat(filepath) {
     if (
       filepath.includes('react-server-dom-webpack-plugin') ||
       filepath.includes('react-server-dom-webpack-node-register') ||
+      filepath.includes('react-server-dom-vite-plugin') ||
+      filepath.includes('react-server-dom-vite-node-register') ||
       filepath.includes('react-suspense-test-utils')
     ) {
       return 'cjs2015';
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index f6d349502f6..6196e82b809 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -66,6 +66,49 @@ module.exports = [
     isFlowTyped: true,
     isServerSupported: true,
   },
+  {
+    shortName: 'dom-vite',
+    entryPoints: [
+      'react-dom',
+      'react-dom/testing',
+      'react-dom/src/server/ReactDOMFizzServerNode',
+      'react-server-dom-vite/writer.node.server',
+      'react-server-dom-vite',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-server-dom-vite',
+      'react-server-dom-vite/writer',
+      'react-server-dom-vite/writer.node.server',
+      'react-server-dom-vite/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
+      'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-interactions',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-browser-vite',
+    entryPoints: [
+      'react-dom',
+      'react-dom/testing',
+      'react-dom/src/server/ReactDOMFizzServerBrowser',
+      'react-server-dom-vite/writer.browser.server',
+      'react-server-dom-vite',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/testing',
+      'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
+      'react-server-dom-vite',
+      'react-server-dom-vite/writer.browser.server',
+      'react-server-dom-vite/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
+      'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
   {
     shortName: 'art',
     entryPoints: ['react-art'],

From 6d06e0ca9ae9bf5291eaee1f57484c69a9332f6c Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 9 Dec 2021 16:18:34 +0900
Subject: [PATCH 02/87] Remove Node register/loader in Vite

---
 .../react-server-dom-vite/esm/package.json    |   3 -
 .../esm/react-server-dom-vite-node-loader.js  |  10 -
 .../react-server-dom-vite/node-register.js    |  10 -
 .../npm/esm/package.json                      |   3 -
 .../npm/node-register.js                      |   3 -
 packages/react-server-dom-vite/package.json   |  14 +-
 .../src/ReactFlightWebpackNodeLoader.js       | 267 ------------------
 .../src/ReactFlightWebpackNodeRegister.js     |  95 -------
 packages/react-server-dom-vite/writer.js      |  13 -
 scripts/rollup/bundles.js                     |  22 --
 scripts/rollup/validate/index.js              |   1 -
 11 files changed, 3 insertions(+), 438 deletions(-)
 delete mode 100644 packages/react-server-dom-vite/esm/package.json
 delete mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
 delete mode 100644 packages/react-server-dom-vite/node-register.js
 delete mode 100644 packages/react-server-dom-vite/npm/esm/package.json
 delete mode 100644 packages/react-server-dom-vite/npm/node-register.js
 delete mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
 delete mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
 delete mode 100644 packages/react-server-dom-vite/writer.js

diff --git a/packages/react-server-dom-vite/esm/package.json b/packages/react-server-dom-vite/esm/package.json
deleted file mode 100644
index 3dbc1ca591c..00000000000
--- a/packages/react-server-dom-vite/esm/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "type": "module"
-}
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
deleted file mode 100644
index d7a01f6f221..00000000000
--- a/packages/react-server-dom-vite/esm/react-server-dom-vite-node-loader.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from '../src/ReactFlightWebpackNodeLoader.js';
diff --git a/packages/react-server-dom-vite/node-register.js b/packages/react-server-dom-vite/node-register.js
deleted file mode 100644
index 03754438bf3..00000000000
--- a/packages/react-server-dom-vite/node-register.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from './src/ReactFlightWebpackNodeRegister';
diff --git a/packages/react-server-dom-vite/npm/esm/package.json b/packages/react-server-dom-vite/npm/esm/package.json
deleted file mode 100644
index 3dbc1ca591c..00000000000
--- a/packages/react-server-dom-vite/npm/esm/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "type": "module"
-}
diff --git a/packages/react-server-dom-vite/npm/node-register.js b/packages/react-server-dom-vite/npm/node-register.js
deleted file mode 100644
index 5d1503fe004..00000000000
--- a/packages/react-server-dom-vite/npm/node-register.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./cjs/react-server-dom-vite-node-register.js');
diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 3b5b9cd2156..8f1947e26c6 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -14,28 +14,20 @@
     "build-info.json",
     "index.js",
     "plugin.js",
-    "writer.js",
     "writer.browser.server.js",
     "writer.node.server.js",
-    "node-register.js",
     "cjs/",
-    "umd/",
-    "esm/"
+    "umd/"
   ],
   "exports": {
     ".": "./index.js",
     "./plugin": "./plugin.js",
     "./writer": {
-      "react-server": {
-        "node": "./writer.node.server.js",
-        "browser": "./writer.browser.server.js"
-      },
-      "default": "./writer.js"
+      "node": "./writer.node.server.js",
+      "default": "./writer.browser.server.js"
     },
     "./writer.node.server": "./writer.node.server.js",
     "./writer.browser.server": "./writer.browser.server.js",
-    "./node-loader": "./esm/react-server-dom-vite-node-loader.js",
-    "./node-register": "./node-register.js",
     "./package.json": "./package.json"
   },
   "main": "index.js",
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
deleted file mode 100644
index db618f0eb17..00000000000
--- a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeLoader.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import acorn from 'acorn';
-
-type ResolveContext = {
-  conditions: Array<string>,
-  parentURL: string | void,
-};
-
-type ResolveFunction = (
-  string,
-  ResolveContext,
-  ResolveFunction,
-) => {url: string} | Promise<{url: string}>;
-
-type GetSourceContext = {
-  format: string,
-};
-
-type GetSourceFunction = (
-  string,
-  GetSourceContext,
-  GetSourceFunction,
-) => Promise<{source: Source}>;
-
-type TransformSourceContext = {
-  format: string,
-  url: string,
-};
-
-type TransformSourceFunction = (
-  Source,
-  TransformSourceContext,
-  TransformSourceFunction,
-) => Promise<{source: Source}>;
-
-type Source = string | ArrayBuffer | Uint8Array;
-
-let warnedAboutConditionsFlag = false;
-
-let stashedGetSource: null | GetSourceFunction = null;
-let stashedResolve: null | ResolveFunction = null;
-
-export async function resolve(
-  specifier: string,
-  context: ResolveContext,
-  defaultResolve: ResolveFunction,
-): Promise<{url: string}> {
-  // We stash this in case we end up needing to resolve export * statements later.
-  stashedResolve = defaultResolve;
-
-  if (!context.conditions.includes('react-server')) {
-    context = {
-      ...context,
-      conditions: [...context.conditions, 'react-server'],
-    };
-    if (!warnedAboutConditionsFlag) {
-      warnedAboutConditionsFlag = true;
-      // eslint-disable-next-line react-internal/no-production-logging
-      console.warn(
-        'You did not run Node.js with the `--conditions react-server` flag. ' +
-          'Any "react-server" override will only work with ESM imports.',
-      );
-    }
-  }
-  const resolved = await defaultResolve(specifier, context, defaultResolve);
-  if (resolved.url.endsWith('.server.js')) {
-    const parentURL = context.parentURL;
-    if (parentURL && !parentURL.endsWith('.server.js')) {
-      let reason;
-      if (specifier.endsWith('.server.js')) {
-        reason = `"${specifier}"`;
-      } else {
-        reason = `"${specifier}" (which expands to "${resolved.url}")`;
-      }
-      throw new Error(
-        `Cannot import ${reason} from "${parentURL}". ` +
-          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-          'That way nobody accidentally sends these to the client by indirectly importing it.',
-      );
-    }
-  }
-  return resolved;
-}
-
-export async function getSource(
-  url: string,
-  context: GetSourceContext,
-  defaultGetSource: GetSourceFunction,
-) {
-  // We stash this in case we end up needing to resolve export * statements later.
-  stashedGetSource = defaultGetSource;
-  return defaultGetSource(url, context, defaultGetSource);
-}
-
-function addExportNames(names, node) {
-  switch (node.type) {
-    case 'Identifier':
-      names.push(node.name);
-      return;
-    case 'ObjectPattern':
-      for (let i = 0; i < node.properties.length; i++)
-        addExportNames(names, node.properties[i]);
-      return;
-    case 'ArrayPattern':
-      for (let i = 0; i < node.elements.length; i++) {
-        const element = node.elements[i];
-        if (element) addExportNames(names, element);
-      }
-      return;
-    case 'Property':
-      addExportNames(names, node.value);
-      return;
-    case 'AssignmentPattern':
-      addExportNames(names, node.left);
-      return;
-    case 'RestElement':
-      addExportNames(names, node.argument);
-      return;
-    case 'ParenthesizedExpression':
-      addExportNames(names, node.expression);
-      return;
-  }
-}
-
-function resolveClientImport(
-  specifier: string,
-  parentURL: string,
-): {url: string} | Promise<{url: string}> {
-  // Resolve an import specifier as if it was loaded by the client. This doesn't use
-  // the overrides that this loader does but instead reverts to the default.
-  // This resolution algorithm will not necessarily have the same configuration
-  // as the actual client loader. It should mostly work and if it doesn't you can
-  // always convert to explicit exported names instead.
-  const conditions = ['node', 'import'];
-  if (stashedResolve === null) {
-    throw new Error(
-      'Expected resolve to have been called before transformSource',
-    );
-  }
-  return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
-}
-
-async function loadClientImport(
-  url: string,
-  defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
-  if (stashedGetSource === null) {
-    throw new Error(
-      'Expected getSource to have been called before transformSource',
-    );
-  }
-  // TODO: Validate that this is another module by calling getFormat.
-  const {source} = await stashedGetSource(
-    url,
-    {format: 'module'},
-    stashedGetSource,
-  );
-  return defaultTransformSource(
-    source,
-    {format: 'module', url},
-    defaultTransformSource,
-  );
-}
-
-async function parseExportNamesInto(
-  transformedSource: string,
-  names: Array<string>,
-  parentURL: string,
-  defaultTransformSource,
-): Promise<void> {
-  const {body} = acorn.parse(transformedSource, {
-    ecmaVersion: '2019',
-    sourceType: 'module',
-  });
-  for (let i = 0; i < body.length; i++) {
-    const node = body[i];
-    switch (node.type) {
-      case 'ExportAllDeclaration':
-        if (node.exported) {
-          addExportNames(names, node.exported);
-          continue;
-        } else {
-          const {url} = await resolveClientImport(node.source.value, parentURL);
-          const {source} = await loadClientImport(url, defaultTransformSource);
-          if (typeof source !== 'string') {
-            throw new Error('Expected the transformed source to be a string.');
-          }
-          parseExportNamesInto(source, names, url, defaultTransformSource);
-          continue;
-        }
-      case 'ExportDefaultDeclaration':
-        names.push('default');
-        continue;
-      case 'ExportNamedDeclaration':
-        if (node.declaration) {
-          if (node.declaration.type === 'VariableDeclaration') {
-            const declarations = node.declaration.declarations;
-            for (let j = 0; j < declarations.length; j++) {
-              addExportNames(names, declarations[j].id);
-            }
-          } else {
-            addExportNames(names, node.declaration.id);
-          }
-        }
-        if (node.specificers) {
-          const specificers = node.specificers;
-          for (let j = 0; j < specificers.length; j++) {
-            addExportNames(names, specificers[j].exported);
-          }
-        }
-        continue;
-    }
-  }
-}
-
-export async function transformSource(
-  source: Source,
-  context: TransformSourceContext,
-  defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
-  const transformed = await defaultTransformSource(
-    source,
-    context,
-    defaultTransformSource,
-  );
-  if (context.format === 'module' && context.url.endsWith('.client.js')) {
-    const transformedSource = transformed.source;
-    if (typeof transformedSource !== 'string') {
-      throw new Error('Expected source to have been transformed to a string.');
-    }
-
-    const names = [];
-    await parseExportNamesInto(
-      transformedSource,
-      names,
-      context.url,
-      defaultTransformSource,
-    );
-
-    let newSrc =
-      "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
-    for (let i = 0; i < names.length; i++) {
-      const name = names[i];
-      if (name === 'default') {
-        newSrc += 'export default ';
-      } else {
-        newSrc += 'export const ' + name + ' = ';
-      }
-      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
-      newSrc += JSON.stringify(context.url);
-      newSrc += ', name: ';
-      newSrc += JSON.stringify(name);
-      newSrc += '};\n';
-    }
-
-    return {source: newSrc};
-  }
-  return transformed;
-}
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
deleted file mode 100644
index a5f889d3eb1..00000000000
--- a/packages/react-server-dom-vite/src/ReactFlightWebpackNodeRegister.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-const url = require('url');
-
-// $FlowFixMe
-const Module = require('module');
-
-module.exports = function register() {
-  const MODULE_REFERENCE = Symbol.for('react.module.reference');
-  const proxyHandlers = {
-    get: function(target, name, receiver) {
-      switch (name) {
-        // These names are read by the Flight runtime if you end up using the exports object.
-        case '$$typeof':
-          // These names are a little too common. We should probably have a way to
-          // have the Flight runtime extract the inner target instead.
-          return target.$$typeof;
-        case 'filepath':
-          return target.filepath;
-        case 'name':
-          return target.name;
-        // We need to special case this because createElement reads it if we pass this
-        // reference.
-        case 'defaultProps':
-          return undefined;
-        case '__esModule':
-          // Something is conditionally checking which export to use. We'll pretend to be
-          // an ESM compat module but then we'll check again on the client.
-          target.default = {
-            $$typeof: MODULE_REFERENCE,
-            filepath: target.filepath,
-            // This a placeholder value that tells the client to conditionally use the
-            // whole object or just the default export.
-            name: '',
-          };
-          return true;
-      }
-      let cachedReference = target[name];
-      if (!cachedReference) {
-        cachedReference = target[name] = {
-          $$typeof: MODULE_REFERENCE,
-          filepath: target.filepath,
-          name: name,
-        };
-      }
-      return cachedReference;
-    },
-    set: function() {
-      throw new Error('Cannot assign to a client module from a server module.');
-    },
-  };
-
-  (require: any).extensions['.client.js'] = function(module, path) {
-    const moduleId = url.pathToFileURL(path).href;
-    const moduleReference: {[string]: any} = {
-      $$typeof: MODULE_REFERENCE,
-      filepath: moduleId,
-      name: '*', // Represents the whole object instead of a particular import.
-    };
-    module.exports = new Proxy(moduleReference, proxyHandlers);
-  };
-
-  const originalResolveFilename = Module._resolveFilename;
-
-  Module._resolveFilename = function(request, parent, isMain, options) {
-    const resolved = originalResolveFilename.apply(this, arguments);
-    if (resolved.endsWith('.server.js')) {
-      if (
-        parent &&
-        parent.filename &&
-        !parent.filename.endsWith('.server.js')
-      ) {
-        let reason;
-        if (request.endsWith('.server.js')) {
-          reason = `"${request}"`;
-        } else {
-          reason = `"${request}" (which expands to "${resolved}")`;
-        }
-        throw new Error(
-          `Cannot import ${reason} from "${parent.filename}". ` +
-            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-            'That way nobody accidentally sends these to the client by indirectly importing it.',
-        );
-      }
-    }
-    return resolved;
-  };
-};
diff --git a/packages/react-server-dom-vite/writer.js b/packages/react-server-dom-vite/writer.js
deleted file mode 100644
index 00db7f503fa..00000000000
--- a/packages/react-server-dom-vite/writer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-throw new Error(
-  'The React Server Writer cannot be used outside a react-server environment. ' +
-    'You must configure Node.js using the `--conditions react-server` flag.',
-);
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 2b1b275cf40..4d2a30c8d44 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -429,28 +429,6 @@ const bundles = [
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
-  /******* React Server DOM Vite Node.js Loader *******/
-  {
-    bundleTypes: [NODE_ESM],
-    moduleType: RENDERER_UTILS,
-    entry: 'react-server-dom-vite/node-loader',
-    global: 'ReactServerWebpackNodeLoader',
-    minifyWithProdErrorCodes: false,
-    wrapWithModuleBoundaries: false,
-    externals: ['acorn'],
-  },
-
-  /******* React Server DOM Vite Node.js CommonJS Loader *******/
-  {
-    bundleTypes: [NODE_ES2015],
-    moduleType: RENDERER_UTILS,
-    entry: 'react-server-dom-vite/node-register',
-    global: 'ReactFlightWebpackNodeRegister',
-    minifyWithProdErrorCodes: false,
-    wrapWithModuleBoundaries: false,
-    externals: ['url', 'module'],
-  },
-
   /******* React Server DOM Relay Writer *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 14542f49cc6..41523eb2b4e 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -33,7 +33,6 @@ function getFormat(filepath) {
       filepath.includes('react-server-dom-webpack-plugin') ||
       filepath.includes('react-server-dom-webpack-node-register') ||
       filepath.includes('react-server-dom-vite-plugin') ||
-      filepath.includes('react-server-dom-vite-node-register') ||
       filepath.includes('react-suspense-test-utils')
     ) {
       return 'cjs2015';

From 1357205b653911bda8afb4f8756889866bea7886 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 10 Dec 2021 18:33:38 +0900
Subject: [PATCH 03/87] Add Vite Flight writer and reader

---
 ...FlightClientHostConfig.dom-browser-vite.js |  2 +-
 .../ReactFlightClientHostConfig.dom-vite.js   |  2 +-
 packages/react-server-dom-vite/npm/writer.js  |  5 +-
 .../src/ReactFlightClientViteBundlerConfig.js | 73 ++++++++++++++++++
 .../ReactFlightClientWebpackBundlerConfig.js  | 74 -------------------
 .../src/ReactFlightDOMServerBrowser.js        |  4 +-
 .../src/ReactFlightDOMServerNode.js           |  4 +-
 ... => ReactFlightServerViteBundlerConfig.js} | 16 ++--
 packages/react-server-dom-vite/writer.js      | 10 +++
 ...eactFlightServerConfig.dom-browser-vite.js |  2 +-
 .../forks/ReactFlightServerConfig.dom-vite.js |  2 +-
 11 files changed, 96 insertions(+), 98 deletions(-)
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
 delete mode 100644 packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
 rename packages/react-server-dom-vite/src/{ReactFlightServerWebpackBundlerConfig.js => ReactFlightServerViteBundlerConfig.js} (75%)
 create mode 100644 packages/react-server-dom-vite/writer.js

diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
index 7e17cffce53..f9c8283ccd0 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js
@@ -9,4 +9,4 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-server-dom-vite/src/ReactFlightClientViteBundlerConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
index 7e17cffce53..f9c8283ccd0 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js
@@ -9,4 +9,4 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-server-dom-vite/src/ReactFlightClientViteBundlerConfig';
diff --git a/packages/react-server-dom-vite/npm/writer.js b/packages/react-server-dom-vite/npm/writer.js
index 13a632e6411..28888954b94 100644
--- a/packages/react-server-dom-vite/npm/writer.js
+++ b/packages/react-server-dom-vite/npm/writer.js
@@ -1,6 +1,3 @@
 'use strict';
 
-throw new Error(
-  'The React Server Writer cannot be used outside a react-server environment. ' +
-    'You must configure Node.js using the `--conditions react-server` flag.'
-);
+module.exports = require('./writer.node.server.js');
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
new file mode 100644
index 00000000000..8710abd3ebb
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export opaque type ModuleMetaData = {
+  id: string,
+  name: string,
+};
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ModuleReference<T> = ModuleMetaData;
+
+export function resolveModuleReference<T>(
+  moduleData: ModuleMetaData,
+): ModuleReference<T> {
+  return moduleData;
+}
+
+// Vite import globs will be injected here.
+const allClientComponents: any = {
+  __INJECTED_CLIENT_IMPORTERS__: null,
+};
+
+export function importClientComponent(moduleId: string): Promise<any> {
+  const modImport = allClientComponents[moduleId];
+
+  if (!modImport) {
+    return Promise.reject(
+      new Error(`Could not find client component ${moduleId}`),
+    );
+  }
+
+  return modImport();
+}
+
+// The module cache contains all the modules we've preloaded so far.
+// If they're still pending they're a thenable.
+const moduleCache: Map<string, Object | Promise<Object> | Error> = new Map();
+
+// Start preloading the modules since we might need them soon.
+// This function doesn't suspend.
+export function preloadModule<T>({id}: ModuleReference<T>): void {
+  if (moduleCache.has(id)) return;
+
+  function cacheResult(mod: any) {
+    moduleCache.set(id, mod);
+    return mod;
+  }
+
+  // Store the original promise first, then override cache with its result.
+  const promise = importClientComponent(id);
+  cacheResult(promise);
+  promise.then(cacheResult, cacheResult);
+}
+
+// Actually require the module or suspend if it's not yet ready.
+// Increase priority if necessary.
+export function requireModule<T>({id, name}: ModuleReference<T>): T {
+  const mod = moduleCache.get(id);
+
+  if (!mod || mod instanceof Promise || mod instanceof Error) {
+    // This module is still being downloaded or
+    // it has errored out. Pass it to Suspense.
+    throw mod;
+  }
+
+  return mod[name];
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
deleted file mode 100644
index f3c4e1bf1c1..00000000000
--- a/packages/react-server-dom-vite/src/ReactFlightClientWebpackBundlerConfig.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export opaque type ModuleMetaData = {
-  id: string,
-  chunks: Array<string>,
-  name: string,
-};
-
-// eslint-disable-next-line no-unused-vars
-export opaque type ModuleReference<T> = ModuleMetaData;
-
-export function resolveModuleReference<T>(
-  moduleData: ModuleMetaData,
-): ModuleReference<T> {
-  return moduleData;
-}
-
-// The chunk cache contains all the chunks we've preloaded so far.
-// If they're still pending they're a thenable. This map also exists
-// in Webpack but unfortunately it's not exposed so we have to
-// replicate it in user space. null means that it has already loaded.
-const chunkCache: Map<string, null | Promise<any> | Error> = new Map();
-
-// Start preloading the modules since we might need them soon.
-// This function doesn't suspend.
-export function preloadModule<T>(moduleData: ModuleReference<T>): void {
-  const chunks = moduleData.chunks;
-  for (let i = 0; i < chunks.length; i++) {
-    const chunkId = chunks[i];
-    const entry = chunkCache.get(chunkId);
-    if (entry === undefined) {
-      const thenable = __webpack_chunk_load__(chunkId);
-      const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
-      const reject = chunkCache.set.bind(chunkCache, chunkId);
-      thenable.then(resolve, reject);
-      chunkCache.set(chunkId, thenable);
-    }
-  }
-}
-
-// Actually require the module or suspend if it's not yet ready.
-// Increase priority if necessary.
-export function requireModule<T>(moduleData: ModuleReference<T>): T {
-  const chunks = moduleData.chunks;
-  for (let i = 0; i < chunks.length; i++) {
-    const chunkId = chunks[i];
-    const entry = chunkCache.get(chunkId);
-    if (entry !== null) {
-      // We assume that preloadModule has been called before.
-      // So we don't expect to see entry being undefined here, that's an error.
-      // Let's throw either an error or the Promise.
-      throw entry;
-    }
-  }
-  const moduleExports = __webpack_require__(moduleData.id);
-  if (moduleData.name === '*') {
-    // This is a placeholder value that represents that the caller imported this
-    // as a CommonJS module as is.
-    return moduleExports;
-  }
-  if (moduleData.name === '') {
-    // This is a placeholder value that represents that the caller accessed the
-    // default property of this if it was an ESM interop module.
-    return moduleExports.__esModule ? moduleExports.default : moduleExports;
-  }
-  return moduleExports[moduleData.name];
-}
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index 9d632dfb071..18de14a5749 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -8,7 +8,6 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
-import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
 
 import {
   createRequest,
@@ -22,12 +21,11 @@ type Options = {
 
 function renderToReadableStream(
   model: ReactModel,
-  webpackMap: BundlerConfig,
   options?: Options,
 ): ReadableStream {
   const request = createRequest(
     model,
-    webpackMap,
+    {}, // Manifest, not used
     options ? options.onError : undefined,
   );
   const stream = new ReadableStream({
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index 5f992d4b03e..a432c9b3325 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -8,7 +8,6 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
-import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
 import type {Writable} from 'stream';
 
 import {
@@ -31,12 +30,11 @@ type Controls = {|
 
 function renderToPipeableStream(
   model: ReactModel,
-  webpackMap: BundlerConfig,
   options?: Options,
 ): Controls {
   const request = createRequest(
     model,
-    webpackMap,
+    {}, // Manifest, not used
     options ? options.onError : undefined,
   );
   let hasStartedFlowing = false;
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
similarity index 75%
rename from packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js
rename to packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index c8469eeba80..5a5205e88c2 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -7,13 +7,7 @@
  * @flow
  */
 
-type WebpackMap = {
-  [filepath: string]: {
-    [name: string]: ModuleMetaData,
-  },
-};
-
-export type BundlerConfig = WebpackMap;
+export type BundlerConfig = {};
 
 // eslint-disable-next-line no-unused-vars
 export type ModuleReference<T> = {
@@ -24,7 +18,6 @@ export type ModuleReference<T> = {
 
 export type ModuleMetaData = {
   id: string,
-  chunks: Array<string>,
   name: string,
 };
 
@@ -37,12 +30,15 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
 }
 
 export function isModuleReference(reference: Object): boolean {
-  return reference.$$typeof === MODULE_TAG;
+  return (reference.$$typeof_rsc || reference.$$typeof) === MODULE_TAG;
 }
 
 export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
-  return config[moduleReference.filepath][moduleReference.name];
+  return {
+    id: moduleReference.filepath,
+    name: moduleReference.name,
+  };
 }
diff --git a/packages/react-server-dom-vite/writer.js b/packages/react-server-dom-vite/writer.js
new file mode 100644
index 00000000000..53a1be138e1
--- /dev/null
+++ b/packages/react-server-dom-vite/writer.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+module.exports = require('./writer.node.server.js');
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
index 5c7b69fb713..a61bcb02e50 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-vite.js
@@ -8,4 +8,4 @@
  */
 
 export * from '../ReactFlightServerConfigStream';
-export * from 'react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-server-dom-vite/src/ReactFlightServerViteBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
index 5c7b69fb713..a61bcb02e50 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-vite.js
@@ -8,4 +8,4 @@
  */
 
 export * from '../ReactFlightServerConfigStream';
-export * from 'react-server-dom-vite/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-server-dom-vite/src/ReactFlightServerViteBundlerConfig';

From 502adb43a75b376c35005a92798e0cc4c40cb26f Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 10 Dec 2021 19:15:41 +0900
Subject: [PATCH 04/87] Add Vite Flight plugin

---
 .../react-server-dom-vite/esm/package.json    |   3 +
 .../esm/react-server-dom-vite-client-proxy.js |  10 +
 .../npm/esm/package.json                      |   3 +
 packages/react-server-dom-vite/package.json   |  16 +-
 packages/react-server-dom-vite/plugin.js      |   2 +-
 .../react-server-dom-vite/src/ClientProxy.js  |  55 +++
 .../src/ReactFlightVitePlugin.js              | 210 ++++++++++
 .../src/ReactFlightWebpackPlugin.js           | 358 ------------------
 scripts/flow/config/flowconfig                |   2 +
 scripts/rollup/bundles.js                     |  19 +-
 yarn.lock                                     |   5 +
 11 files changed, 308 insertions(+), 375 deletions(-)
 create mode 100644 packages/react-server-dom-vite/esm/package.json
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js
 create mode 100644 packages/react-server-dom-vite/npm/esm/package.json
 create mode 100644 packages/react-server-dom-vite/src/ClientProxy.js
 create mode 100644 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
 delete mode 100644 packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js

diff --git a/packages/react-server-dom-vite/esm/package.json b/packages/react-server-dom-vite/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js
new file mode 100644
index 00000000000..849df4d2aa6
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ClientProxy.js';
diff --git a/packages/react-server-dom-vite/npm/esm/package.json b/packages/react-server-dom-vite/npm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-vite/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 8f1947e26c6..9e57445349b 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -17,7 +17,8 @@
     "writer.browser.server.js",
     "writer.node.server.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "esm/"
   ],
   "exports": {
     ".": "./index.js",
@@ -28,6 +29,7 @@
     },
     "./writer.node.server": "./writer.node.server.js",
     "./writer.browser.server": "./writer.browser.server.js",
+    "./client-proxy": "./esm/react-server-dom-vite-client-proxy.js",
     "./package.json": "./package.json"
   },
   "main": "index.js",
@@ -42,17 +44,9 @@
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "webpack": "^5.59.0"
+    "vite": "^2.7.1"
   },
   "dependencies": {
-    "acorn": "^6.2.1",
-    "neo-async": "^2.6.1",
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
-  },
-  "browserify": {
-    "transform": [
-      "loose-envify"
-    ]
+    "es-module-lexer": "^0.9.3"
   }
 }
diff --git a/packages/react-server-dom-vite/plugin.js b/packages/react-server-dom-vite/plugin.js
index 64c004e7e0f..e2ae517a99c 100644
--- a/packages/react-server-dom-vite/plugin.js
+++ b/packages/react-server-dom-vite/plugin.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {default} from './src/ReactFlightWebpackPlugin';
+export {default} from './src/ReactFlightVitePlugin';
diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
new file mode 100644
index 00000000000..6e28cb6b1bb
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {createElement} from 'react';
+
+type ClientProxy = {
+  id: string,
+  name: string,
+  named: boolean,
+  component: mixed,
+};
+
+export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
+  if (
+    !component ||
+    (typeof component !== 'function' &&
+      !Object.prototype.hasOwnProperty.call(component, 'render'))
+  ) {
+    // This is not a React component, return it as is.
+    return component;
+  }
+
+  // Use object syntax here to make sure the function name
+  // comes from the meta params for better error stacks.
+  const render = {
+    [name]: (props: any) => createElement(component, props),
+  }[name];
+
+  // React accesses the `render` function directly when encountring this type
+  const componentRef = Object.create(null);
+  componentRef.$$typeof = Symbol.for('react.forward_ref');
+  componentRef.render = render;
+
+  // This custom type is checked in RSC renderer
+  const rscDescriptor = Object.create(null);
+  rscDescriptor.$$typeof_rsc = Symbol.for('react.module.reference');
+  rscDescriptor.filepath = id;
+  rscDescriptor.name = named ? name : 'default';
+
+  return new Proxy(componentRef, {
+    get: (target, prop) =>
+      // 1. Let React access the element/ref and type in SSR
+      (target: any)[prop] ??
+      // 2. Check descriptor properties for RSC requests
+      (rscDescriptor: any)[prop] ??
+      // 3. Fallback to custom component properties such as `ImageComponent.Fragment`
+      (component: any)[prop],
+  });
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
new file mode 100644
index 00000000000..24d79d4d6ce
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// $FlowFixMe[module-missing]
+import {init, parse} from 'es-module-lexer';
+// $FlowFixMe[module-missing]
+import {normalizePath, transformWithEsbuild} from 'vite';
+
+import {promises as fs} from 'fs';
+import path from 'path';
+
+type PluginOptions = {
+  clientComponentPaths?: string[],
+  isServerComponentImporterAllowed?: (
+    importer: string,
+    source: string,
+  ) => boolean,
+};
+
+export default function ReactFlightVitePlugin({
+  clientComponentPaths = [],
+  isServerComponentImporterAllowed = importer => false,
+}: PluginOptions = {}) {
+  let config;
+
+  return {
+    name: 'vite-plugin-react-server-components',
+
+    enforce: 'pre',
+
+    config: () => ({
+      optimizeDeps: {
+        include: ['react-server-dom-vite', 'react-server-dom-vite/writer'],
+      },
+    }),
+
+    configResolved(_config: any) {
+      config = _config;
+    },
+
+    async resolveId(source: string, importer: string) {
+      if (!importer) return null;
+
+      /**
+       * Throw errors when non-Server Components try to load Server Components.
+       */
+      if (
+        /\.server(\.[jt]sx?)?$/.test(source) &&
+        !(
+          /\.server\.[jt]sx?$/.test(importer) ||
+          isServerComponentImporterAllowed(importer, source)
+        )
+      ) {
+        throw new Error(
+          `Cannot import ${source} from "${importer}". ` +
+            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
+            'That way nobody accidentally sends these to the client by indirectly importing it.',
+        );
+      }
+    },
+
+    async load(id: string, options: {ssr?: boolean} = {}) {
+      if (!options.ssr) return null;
+
+      // Wrapped components won't match this becase they end in ?no-proxy
+      if (/\.client\.[jt]sx?$/.test(id)) {
+        return proxyClientComponent(id);
+      }
+
+      return null;
+    },
+
+    transform(code: string, id: string) {
+      /**
+       * In order to allow dynamic component imports from RSC, we use Vite's import.meta.glob.
+       * This hook replaces the glob placeholders with resolved paths to all client components.
+       *
+       * NOTE: Glob import paths MUST be relative to the importer file in
+       * order to get the `?v=xxx` querystring from Vite added to the import URL.
+       * If the paths are relative to the root instead, Vite won't add the querystring
+       * and we will have duplicated files in the browser (with duplicated contexts, etc).
+       */
+      if (/\/react-server-dom-vite.js/.test(id)) {
+        const CLIENT_COMPONENT_GLOB = '**/*.client.[jt]s?(x)';
+
+        const importerPath = path.dirname(id);
+        const importerToRootPath = normalizePath(
+          path.relative(importerPath, config.root),
+        );
+        const [importerToRootNested] =
+          importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [];
+
+        const userPrefix = path.normalize(
+          path.join(
+            importerPath,
+            importerToRootNested.replace(/\/?$/, path.sep),
+          ),
+        );
+        const userGlob = path.join(
+          importerToRootPath,
+          'src',
+          CLIENT_COMPONENT_GLOB,
+        );
+
+        const importers = [[userGlob, userPrefix]];
+
+        for (const componentPath of clientComponentPaths) {
+          const libPrefix = componentPath + path.sep;
+          const libGlob = path.join(
+            path.relative(importerPath, componentPath),
+            CLIENT_COMPONENT_GLOB,
+          );
+
+          importers.push([libGlob, libPrefix]);
+        }
+
+        const injectedGlobs = `Object.assign(Object.create(null), ${importers
+          .map(
+            ([glob, prefix]) =>
+              `__vncp(import.meta.glob('${glob}'), '${prefix}')`,
+          )
+          .join(', ')});`;
+
+        return code.replace(
+          /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/,
+          injectedGlobs + serializedNormalizePaths(),
+        );
+      }
+    },
+  };
+}
+
+const serializedNormalizePaths = () => `
+function __vncp(obj, prefix) {
+  const nestedRE = /\\.\\.\\//gm;
+  return Object.keys(obj).reduce(function (acc, key) {
+    acc[prefix + key.replace(nestedRE, '')] = obj[key];
+    return acc;
+  }, {});
+}
+`;
+
+export async function proxyClientComponent(id: string, src?: string) {
+  const DEFAULT_EXPORT = 'default';
+
+  // Modify the import ID to avoid infinite wraps
+  const importFrom = `${id}?no-proxy`;
+
+  await init;
+
+  if (!src) {
+    src = await fs.readFile(id, 'utf-8');
+  }
+
+  const {code} = await transformWithEsbuild(src, id);
+  const [, exportStatements] = parse(code);
+
+  // Classify exports in components to wrap vs. everything else (e.g. GQL Fragments)
+  const otherExports: string[] = [];
+  const componentExports: string[] = [];
+  for (const key of exportStatements) {
+    if (
+      key !== DEFAULT_EXPORT &&
+      /^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(key)
+    ) {
+      otherExports.push(key);
+    } else {
+      componentExports.push(key);
+    }
+  }
+
+  if (componentExports.length === 0) {
+    return `export * from '${importFrom}';\n`;
+  }
+
+  let proxyCode =
+    `import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';\n` +
+    `import * as allImports from '${importFrom}';\n\n`;
+
+  // Re-export other stuff directly without wrapping
+  if (otherExports.length > 0) {
+    proxyCode += `export {${otherExports.join(', ')}} from '${importFrom}';\n`;
+  }
+
+  // Wrap components in Client Proxy
+  componentExports.forEach(key => {
+    const isDefault = key === DEFAULT_EXPORT;
+    const componentName = isDefault
+      ? id
+          .split('/')
+          .pop()
+          .split('.')
+          .shift()
+      : key;
+
+    proxyCode += `export ${
+      isDefault ? DEFAULT_EXPORT : `const ${componentName} =`
+    } wrapInClientProxy({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${String(
+      !isDefault,
+    )} });\n`;
+  });
+
+  return proxyCode;
+}
diff --git a/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js
deleted file mode 100644
index 0c49d293733..00000000000
--- a/packages/react-server-dom-vite/src/ReactFlightWebpackPlugin.js
+++ /dev/null
@@ -1,358 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {join} from 'path';
-import {pathToFileURL} from 'url';
-
-import asyncLib from 'neo-async';
-
-import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
-import NullDependency from 'webpack/lib/dependencies/NullDependency';
-import Template from 'webpack/lib/Template';
-import {
-  sources,
-  WebpackError,
-  Compilation,
-  AsyncDependenciesBlock,
-} from 'webpack';
-
-import isArray from 'shared/isArray';
-
-class ClientReferenceDependency extends ModuleDependency {
-  constructor(request) {
-    super(request);
-  }
-
-  get type() {
-    return 'client-reference';
-  }
-}
-
-// This is the module that will be used to anchor all client references to.
-// I.e. it will have all the client files as async deps from this point on.
-// We use the Flight client implementation because you can't get to these
-// without the client runtime so it's the first time in the loading sequence
-// you might want them.
-const clientImportName = 'react-server-dom-webpack';
-const clientFileName = require.resolve('../');
-
-type ClientReferenceSearchPath = {
-  directory: string,
-  recursive?: boolean,
-  include: RegExp,
-  exclude?: RegExp,
-};
-
-type ClientReferencePath = string | ClientReferenceSearchPath;
-
-type Options = {
-  isServer: boolean,
-  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
-  chunkName?: string,
-  manifestFilename?: string,
-};
-
-const PLUGIN_NAME = 'React Server Plugin';
-
-export default class ReactFlightWebpackPlugin {
-  clientReferences: $ReadOnlyArray<ClientReferencePath>;
-  chunkName: string;
-  manifestFilename: string;
-
-  constructor(options: Options) {
-    if (!options || typeof options.isServer !== 'boolean') {
-      throw new Error(
-        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',
-      );
-    }
-    if (options.isServer) {
-      throw new Error('TODO: Implement the server compiler.');
-    }
-    if (!options.clientReferences) {
-      this.clientReferences = [
-        {
-          directory: '.',
-          recursive: true,
-          include: /\.client\.(js|ts|jsx|tsx)$/,
-        },
-      ];
-    } else if (
-      typeof options.clientReferences === 'string' ||
-      !isArray(options.clientReferences)
-    ) {
-      this.clientReferences = [(options.clientReferences: $FlowFixMe)];
-    } else {
-      this.clientReferences = options.clientReferences;
-    }
-    if (typeof options.chunkName === 'string') {
-      this.chunkName = options.chunkName;
-      if (!/\[(index|request)\]/.test(this.chunkName)) {
-        this.chunkName += '[index]';
-      }
-    } else {
-      this.chunkName = 'client[index]';
-    }
-    this.manifestFilename =
-      options.manifestFilename || 'react-client-manifest.json';
-  }
-
-  apply(compiler: any) {
-    const _this = this;
-    let resolvedClientReferences;
-    let clientFileNameFound = false;
-
-    // Find all client files on the file system
-    compiler.hooks.beforeCompile.tapAsync(
-      PLUGIN_NAME,
-      ({contextModuleFactory}, callback) => {
-        const contextResolver = compiler.resolverFactory.get('context', {});
-
-        _this.resolveAllClientFiles(
-          compiler.context,
-          contextResolver,
-          compiler.inputFileSystem,
-          contextModuleFactory,
-          function(err, resolvedClientRefs) {
-            if (err) {
-              callback(err);
-              return;
-            }
-
-            resolvedClientReferences = resolvedClientRefs;
-            callback();
-          },
-        );
-      },
-    );
-
-    compiler.hooks.thisCompilation.tap(
-      PLUGIN_NAME,
-      (compilation, {normalModuleFactory}) => {
-        compilation.dependencyFactories.set(
-          ClientReferenceDependency,
-          normalModuleFactory,
-        );
-        compilation.dependencyTemplates.set(
-          ClientReferenceDependency,
-          new NullDependency.Template(),
-        );
-
-        const handler = parser => {
-          // We need to add all client references as dependency of something in the graph so
-          // Webpack knows which entries need to know about the relevant chunks and include the
-          // map in their runtime. The things that actually resolves the dependency is the Flight
-          // client runtime. So we add them as a dependency of the Flight client runtime.
-          // Anything that imports the runtime will be made aware of these chunks.
-          parser.hooks.program.tap(PLUGIN_NAME, () => {
-            const module = parser.state.module;
-
-            if (module.resource !== clientFileName) {
-              return;
-            }
-
-            clientFileNameFound = true;
-
-            if (resolvedClientReferences) {
-              for (let i = 0; i < resolvedClientReferences.length; i++) {
-                const dep = resolvedClientReferences[i];
-
-                const chunkName = _this.chunkName
-                  .replace(/\[index\]/g, '' + i)
-                  .replace(/\[request\]/g, Template.toPath(dep.userRequest));
-
-                const block = new AsyncDependenciesBlock(
-                  {
-                    name: chunkName,
-                  },
-                  null,
-                  dep.request,
-                );
-
-                block.addDependency(dep);
-                module.addBlock(block);
-              }
-            }
-          });
-        };
-
-        normalModuleFactory.hooks.parser
-          .for('javascript/auto')
-          .tap('HarmonyModulesPlugin', handler);
-
-        normalModuleFactory.hooks.parser
-          .for('javascript/esm')
-          .tap('HarmonyModulesPlugin', handler);
-
-        normalModuleFactory.hooks.parser
-          .for('javascript/dynamic')
-          .tap('HarmonyModulesPlugin', handler);
-      },
-    );
-
-    compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
-      compilation.hooks.processAssets.tap(
-        {
-          name: PLUGIN_NAME,
-          stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
-        },
-        function() {
-          if (clientFileNameFound === false) {
-            compilation.warnings.push(
-              new WebpackError(
-                `Client runtime at ${clientImportName} was not found. React Server Components module map file ${_this.manifestFilename} was not created.`,
-              ),
-            );
-            return;
-          }
-
-          const json = {};
-          compilation.chunkGroups.forEach(function(chunkGroup) {
-            const chunkIds = chunkGroup.chunks.map(function(c) {
-              return c.id;
-            });
-
-            function recordModule(id, module) {
-              // 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)) {
-                return;
-              }
-
-              const moduleProvidedExports = compilation.moduleGraph
-                .getExportsInfo(module)
-                .getProvidedExports();
-
-              const moduleExports = {};
-              ['', '*']
-                .concat(
-                  Array.isArray(moduleProvidedExports)
-                    ? moduleProvidedExports
-                    : [],
-                )
-                .forEach(function(name) {
-                  moduleExports[name] = {
-                    id,
-                    chunks: chunkIds,
-                    name: name,
-                  };
-                });
-              const href = pathToFileURL(module.resource).href;
-
-              if (href !== undefined) {
-                json[href] = moduleExports;
-              }
-            }
-
-            chunkGroup.chunks.forEach(function(chunk) {
-              const chunkModules = compilation.chunkGraph.getChunkModulesIterable(
-                chunk,
-              );
-
-              Array.from(chunkModules).forEach(function(module) {
-                const moduleId = compilation.chunkGraph.getModuleId(module);
-
-                recordModule(moduleId, module);
-                // If this is a concatenation, register each child to the parent ID.
-                if (module.modules) {
-                  module.modules.forEach(concatenatedMod => {
-                    recordModule(moduleId, concatenatedMod);
-                  });
-                }
-              });
-            });
-          });
-
-          const output = JSON.stringify(json, null, 2);
-          compilation.emitAsset(
-            _this.manifestFilename,
-            new sources.RawSource(output, false),
-          );
-        },
-      );
-    });
-  }
-
-  // This attempts to replicate the dynamic file path resolution used for other wildcard
-  // resolution in Webpack is using.
-  resolveAllClientFiles(
-    context: string,
-    contextResolver: any,
-    fs: any,
-    contextModuleFactory: any,
-    callback: (
-      err: null | Error,
-      result?: $ReadOnlyArray<ClientReferenceDependency>,
-    ) => void,
-  ) {
-    asyncLib.map(
-      this.clientReferences,
-      (
-        clientReferencePath: string | ClientReferenceSearchPath,
-        cb: (
-          err: null | Error,
-          result?: $ReadOnlyArray<ClientReferenceDependency>,
-        ) => void,
-      ): void => {
-        if (typeof clientReferencePath === 'string') {
-          cb(null, [new ClientReferenceDependency(clientReferencePath)]);
-          return;
-        }
-        const clientReferenceSearch: ClientReferenceSearchPath = clientReferencePath;
-        contextResolver.resolve(
-          {},
-          context,
-          clientReferencePath.directory,
-          {},
-          (err, resolvedDirectory) => {
-            if (err) return cb(err);
-            const options = {
-              resource: resolvedDirectory,
-              resourceQuery: '',
-              recursive:
-                clientReferenceSearch.recursive === undefined
-                  ? true
-                  : clientReferenceSearch.recursive,
-              regExp: clientReferenceSearch.include,
-              include: undefined,
-              exclude: clientReferenceSearch.exclude,
-            };
-            contextModuleFactory.resolveDependencies(
-              fs,
-              options,
-              (err2: null | Error, deps: Array<ModuleDependency>) => {
-                if (err2) return cb(err2);
-                const clientRefDeps = deps.map(dep => {
-                  // use userRequest instead of request. request always end with undefined which is wrong
-                  const request = join(resolvedDirectory, dep.userRequest);
-                  const clientRefDep = new ClientReferenceDependency(request);
-                  clientRefDep.userRequest = dep.userRequest;
-                  return clientRefDep;
-                });
-                cb(null, clientRefDeps);
-              },
-            );
-          },
-        );
-      },
-      (
-        err: null | Error,
-        result: $ReadOnlyArray<$ReadOnlyArray<ClientReferenceDependency>>,
-      ): void => {
-        if (err) return callback(err);
-        const flat = [];
-        for (let i = 0; i < result.length; i++) {
-          flat.push.apply(flat, result[i]);
-        }
-        callback(null, flat);
-      },
-    );
-  }
-}
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index c0647c95468..b1ba82ebd96 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -10,6 +10,8 @@
 
 .*/node_modules/@snyk/.*
 .*/node_modules/y18n/.*
+.*/node_modules/vite/.*
+.*/node_modules/es-module-lexer/.*
 .*/node_modules/chrome-devtools-frontend/.*
 .*/node_modules/devtools-timeline-model/.*
 .*/node_modules/create-react-class/.*
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 4d2a30c8d44..8f51258a060 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -392,7 +392,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite/writer.browser.server',
-    global: 'ReactServerDOMWriter',
+    global: 'ReactServerDOMViteWriter',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
@@ -401,7 +401,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite/writer.node.server',
-    global: 'ReactServerDOMWriter',
+    global: 'ReactServerDOMViteWriter',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
@@ -412,7 +412,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite',
-    global: 'ReactServerDOMReader',
+    global: 'ReactServerDOMViteReader',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
@@ -423,10 +423,19 @@ const bundles = [
     bundleTypes: [NODE_ES2015],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-vite/plugin',
-    global: 'ReactServerWebpackPlugin',
+    global: 'ReactServerVitePlugin',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['fs', 'path', 'url', 'neo-async'],
+    externals: ['fs', 'path', 'vite', 'es-module-lexer'],
+  },
+  {
+    bundleTypes: [NODE_ESM],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-vite/client-proxy',
+    global: 'ReactServerViteClientProxy',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
   },
 
   /******* React Server DOM Relay Writer *******/
diff --git a/yarn.lock b/yarn.lock
index f376e74f8c5..a595b368ad8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6740,6 +6740,11 @@ es-abstract@^1.18.0-next.0:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-module-lexer@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
+  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
+
 es-to-primitive@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"

From 870e149ee962d215c1035cbc54ed5138477658b5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 17:06:15 +0900
Subject: [PATCH 05/87] Generate ESM version of Vite plugin dependencies

---
 .../esm/react-server-dom-vite-plugin.js       | 10 ++++++++
 ...t-server-dom-vite-writer.browser.server.js | 10 ++++++++
 ...eact-server-dom-vite-writer.node.server.js | 10 ++++++++
 .../esm/react-server-dom-vite.js              | 10 ++++++++
 packages/react-server-dom-vite/package.json   | 25 ++++++++++++++-----
 scripts/rollup/bundles.js                     |  8 +++---
 scripts/shared/inlinedHostConfigs.js          |  3 ++-
 7 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-plugin.js
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
 create mode 100644 packages/react-server-dom-vite/esm/react-server-dom-vite.js

diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-plugin.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-plugin.js
new file mode 100644
index 00000000000..968c1337961
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite-plugin.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightVitePlugin.js';
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
new file mode 100644
index 00000000000..62569596a7d
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js b/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
new file mode 100644
index 00000000000..e3c91aad0ee
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightDOMServerNode.js';
diff --git a/packages/react-server-dom-vite/esm/react-server-dom-vite.js b/packages/react-server-dom-vite/esm/react-server-dom-vite.js
new file mode 100644
index 00000000000..e0ba0b20822
--- /dev/null
+++ b/packages/react-server-dom-vite/esm/react-server-dom-vite.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 9e57445349b..6ca66c5e331 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -21,14 +21,27 @@
     "esm/"
   ],
   "exports": {
-    ".": "./index.js",
-    "./plugin": "./plugin.js",
+    ".": {
+      "require": "./index.js",
+      "import": "./esm/react-server-dom-vite.js"
+    },
+    "./plugin": {
+      "require": "./plugin.js",
+      "import": "./esm/react-server-dom-vite-plugin.js"
+    },
     "./writer": {
-      "node": "./writer.node.server.js",
-      "default": "./writer.browser.server.js"
+      "require": "./writer.node.server.js",
+      "node": "./esm/react-server-dom-vite-writer.node.server.js",
+      "default": "./esm/react-server-dom-vite-writer.browser.server.js"
+    },
+    "./writer.node.server": {
+      "require": "./writer.node.server.js",
+      "import": "./esm/react-server-dom-vite-writer.node.server.js"
+    },
+    "./writer.browser.server":  {
+      "require": "./writer.browser.server.js",
+      "import": "./esm/react-server-dom-vite-writer.browser.server.js"
     },
-    "./writer.node.server": "./writer.node.server.js",
-    "./writer.browser.server": "./writer.browser.server.js",
     "./client-proxy": "./esm/react-server-dom-vite-client-proxy.js",
     "./package.json": "./package.json"
   },
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 8f51258a060..355547e3e2c 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -389,7 +389,7 @@ const bundles = [
 
   /******* React Server DOM Vite Writer *******/
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    bundleTypes: [NODE_ESM, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite/writer.browser.server',
     global: 'ReactServerDOMViteWriter',
@@ -398,7 +398,7 @@ const bundles = [
     externals: ['react'],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD],
+    bundleTypes: [NODE_ESM, NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite/writer.node.server',
     global: 'ReactServerDOMViteWriter',
@@ -409,7 +409,7 @@ const bundles = [
 
   /******* React Server DOM Vite Reader *******/
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    bundleTypes: [NODE_ESM, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-vite',
     global: 'ReactServerDOMViteReader',
@@ -420,7 +420,7 @@ const bundles = [
 
   /******* React Server DOM Vite Plugin *******/
   {
-    bundleTypes: [NODE_ES2015],
+    bundleTypes: [NODE_ESM, NODE_ES2015],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-vite/plugin',
     global: 'ReactServerVitePlugin',
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 6196e82b809..2a011567f13 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -103,7 +103,8 @@ module.exports = [
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-vite',
       'react-server-dom-vite/writer.browser.server',
-      'react-server-dom-vite/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
+      'react-server-dom-vite/src/ReactFlightDOMServerBrowser.js', // react-server-dom-vite/writer.browser.server
+      'react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js',
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
     ],
     isFlowTyped: true,

From 804699ae06921a8b40349bad369101b7b80c96ef Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 17:08:34 +0900
Subject: [PATCH 06/87] Allow convention filenames as server entry

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 24d79d4d6ce..11eed2c4427 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -53,8 +53,9 @@ export default function ReactFlightVitePlugin({
       if (
         /\.server(\.[jt]sx?)?$/.test(source) &&
         !(
-          /\.server\.[jt]sx?$/.test(importer) ||
-          isServerComponentImporterAllowed(importer, source)
+          /(\.server\.[jt]sx?|entry-server\.[jt]sx?|\/index\.html)$/.test(
+            importer,
+          ) || isServerComponentImporterAllowed(importer, source)
         )
       ) {
         throw new Error(

From 3dc612472063584dac2ce87f3ecc602d80fe5a95 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 19:19:07 +0900
Subject: [PATCH 07/87] Fix checking if variable is a React component

---
 .../react-server-dom-vite/src/ClientProxy.js  | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 6e28cb6b1bb..3df4a04f91b 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -16,12 +16,20 @@ type ClientProxy = {
   component: mixed,
 };
 
+function isReactComponent(component: any) {
+  if (component) {
+    return (
+      typeof component === 'function' ||
+      typeof component.render === 'function' ||
+      component.$$typeof === Symbol.for('react.element')
+    );
+  }
+
+  return false;
+}
+
 export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
-  if (
-    !component ||
-    (typeof component !== 'function' &&
-      !Object.prototype.hasOwnProperty.call(component, 'render'))
-  ) {
+  if (!isReactComponent(component)) {
     // This is not a React component, return it as is.
     return component;
   }
@@ -32,6 +40,10 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
     [name]: (props: any) => createElement(component, props),
   }[name];
 
+  if (__DEV__) {
+    render.displayName = name;
+  }
+
   // React accesses the `render` function directly when encountring this type
   const componentRef = Object.create(null);
   componentRef.$$typeof = Symbol.for('react.forward_ref');

From d15c9185d7eaab47aae79563fb8c16eef37de9e0 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 19:35:14 +0900
Subject: [PATCH 08/87] Tests for Vite plugin

---
 packages/react-server-dom-vite/package.json   |   3 +
 .../src/ReactFlightClientViteBundlerConfig.js |   8 +-
 .../src/__tests__/ReactFlightDOM-test.js      |  71 +++-----
 .../__tests__/ReactFlightDOMBrowser-test.js   |  50 +++---
 .../ReactFlightDOMClientProxy-test.js         |  50 ++++++
 .../ReactFlightDOMVitePlugin-test.js          |  88 ++++++++++
 yarn.lock                                     | 153 +++++++++++++++++-
 7 files changed, 343 insertions(+), 80 deletions(-)
 create mode 100644 packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
 create mode 100644 packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 6ca66c5e331..0bab6e7c051 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -61,5 +61,8 @@
   },
   "dependencies": {
     "es-module-lexer": "^0.9.3"
+  },
+  "devDependencies": {
+    "vite": "^2.7.1"
   }
 }
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
index 8710abd3ebb..08c5817480f 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -26,7 +26,13 @@ const allClientComponents: any = {
   __INJECTED_CLIENT_IMPORTERS__: null,
 };
 
-export function importClientComponent(moduleId: string): Promise<any> {
+// Mock client component imports during testing
+declare var jest: {};
+if (typeof jest !== 'undefined') {
+  global.allClientComponents = allClientComponents;
+}
+
+function importClientComponent(moduleId: string): Promise<any> {
   const modImport = allClientComponents[moduleId];
 
   if (!modImport) {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index bcae6c50f7c..fe3798d813a 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -17,12 +17,8 @@ global.TextDecoder = require('util').TextDecoder;
 // TODO: we can replace this with FlightServer.act().
 global.setImmediate = cb => cb();
 
-let webpackModuleIdx = 0;
-let webpackModules = {};
-let webpackMap = {};
-global.__webpack_require__ = function(id) {
-  return webpackModules[id];
-};
+let viteModuleIdx = 0;
+let viteModules = {};
 
 let act;
 let Stream;
@@ -34,14 +30,16 @@ let ReactServerDOMReader;
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
     jest.resetModules();
-    webpackModules = {};
-    webpackMap = {};
     act = require('jest-react').act;
     Stream = require('stream');
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
-    ReactServerDOMReader = require('react-server-dom-webpack');
+    ReactServerDOMWriter = require('react-server-dom-vite/writer.node.server');
+    ReactServerDOMReader = require('react-server-dom-vite');
+
+    // Reset modules
+    viteModules = global.allClientComponents;
+    Object.keys(viteModules).forEach(key => delete viteModules[key]);
   });
 
   function getTestStream() {
@@ -63,19 +61,14 @@ describe('ReactFlightDOM', () => {
   }
 
   function moduleReference(moduleExport) {
-    const idx = webpackModuleIdx++;
-    webpackModules[idx] = {
-      d: moduleExport,
-    };
-    webpackMap['path/' + idx] = {
-      default: {
-        id: '' + idx,
-        chunks: [],
-        name: 'd',
-      },
-    };
+    const idx = viteModuleIdx++;
+    viteModules[idx] = () =>
+      Promise.resolve({
+        default: moduleExport,
+      });
+
     const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
+    return {$$typeof: MODULE_TAG, filepath: idx, name: 'default'};
   }
 
   async function waitForSuspense(fn) {
@@ -113,10 +106,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
-      <App />,
-      webpackMap,
-    );
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(<App />);
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
     await waitForSuspense(() => {
@@ -166,10 +156,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
-      <RootModel />,
-      webpackMap,
-    );
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(<RootModel />);
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
@@ -204,10 +191,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
-      <RootModel />,
-      webpackMap,
-    );
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(<RootModel />);
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
@@ -240,10 +224,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
-      <RootModel />,
-      webpackMap,
-    );
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(<RootModel />);
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
@@ -375,15 +356,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
-      model,
-      webpackMap,
-      {
-        onError(x) {
-          reportedErrors.push(x);
-        },
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(model, {
+      onError(x) {
+        reportedErrors.push(x);
       },
-    );
+    });
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
@@ -492,7 +469,6 @@ describe('ReactFlightDOM', () => {
     const stream1 = getTestStream();
     const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="red" />,
-      webpackMap,
     );
     pipe(stream1.writable);
     const response1 = ReactServerDOMReader.createFromReadableStream(
@@ -520,7 +496,6 @@ describe('ReactFlightDOM', () => {
     const stream2 = getTestStream();
     const {pipe: pipe2} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="blue" />,
-      webpackMap,
     );
     pipe2(stream2.writable);
     const response2 = ReactServerDOMReader.createFromReadableStream(
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 8b82caac6bc..89b1ba4d077 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -14,12 +14,8 @@ global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStr
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
-let webpackModuleIdx = 0;
-let webpackModules = {};
-let webpackMap = {};
-global.__webpack_require__ = function(id) {
-  return webpackModules[id];
-};
+let viteModuleIdx = 0;
+let viteModules = {};
 
 let act;
 let React;
@@ -30,29 +26,27 @@ let ReactServerDOMReader;
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
-    webpackModules = {};
-    webpackMap = {};
+    viteModules = {};
     act = require('jest-react').act;
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
-    ReactServerDOMReader = require('react-server-dom-webpack');
+    ReactServerDOMWriter = require('react-server-dom-vite/writer.browser.server');
+    ReactServerDOMReader = require('react-server-dom-vite');
+
+    // Reset modules
+    viteModules = global.allClientComponents;
+    Object.keys(viteModules).forEach(key => delete viteModules[key]);
   });
 
   function moduleReference(moduleExport) {
-    const idx = webpackModuleIdx++;
-    webpackModules[idx] = {
-      d: moduleExport,
-    };
-    webpackMap['path/' + idx] = {
-      default: {
-        id: '' + idx,
-        chunks: [],
-        name: 'd',
-      },
-    };
+    const idx = viteModuleIdx++;
+    viteModules[idx] = () =>
+      Promise.resolve({
+        default: moduleExport,
+      });
+
     const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
+    return {$$typeof: MODULE_TAG, filepath: idx, name: 'default'};
   }
 
   async function waitForSuspense(fn) {
@@ -258,15 +252,11 @@ describe('ReactFlightDOMBrowser', () => {
       return response.readRoot().rootContent;
     }
 
-    const stream = ReactServerDOMWriter.renderToReadableStream(
-      model,
-      webpackMap,
-      {
-        onError(x) {
-          reportedErrors.push(x);
-        },
+    const stream = ReactServerDOMWriter.renderToReadableStream(model, {
+      onError(x) {
+        reportedErrors.push(x);
       },
-    );
+    });
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     const container = document.createElement('div');
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
new file mode 100644
index 00000000000..492c295d940
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ClientProxy;
+
+const id = '/path/to/Counter.jsx';
+const name = 'Counter';
+
+describe('ReactFlightDOMClientProxy', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ClientProxy = require('../ClientProxy');
+  });
+
+  it('should wrap client components in a proxy', async () => {
+    const result = ClientProxy.wrapInClientProxy({
+      id,
+      name,
+      named: false,
+      component: <div>MyCounter</div>,
+    });
+
+    expect(typeof result).toEqual('object');
+    expect(typeof result.render).toEqual('function');
+    expect(result.render.displayName).toEqual(name);
+    expect(result.filepath).toEqual(id);
+    expect(result.name).toEqual('default');
+  });
+
+  it('should not wrap anything that is not a React component', () => {
+    const result = ClientProxy.wrapInClientProxy({
+      id,
+      name,
+      named: true,
+      component: '42',
+    });
+
+    expect(result).toEqual('42');
+  });
+});
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
new file mode 100644
index 00000000000..4bdb4a88443
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let proxyClientComponent;
+
+describe('ReactFlightVitePlugin', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    proxyClientComponent = require('../ReactFlightVitePlugin')
+      .proxyClientComponent;
+  });
+
+  it('wraps default exports for dev', async () => {
+    expect(
+      await proxyClientComponent(
+        '/path/to/Counter.client.jsx',
+        `export default function() {}`,
+      ),
+    )
+      .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
+import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
+
+export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
+`);
+  });
+
+  it('wraps named exports', async () => {
+    expect(
+      await proxyClientComponent(
+        '/path/to/Counter.client.jsx',
+        `export function Counter() {}\nexport const Clicker = () => {};`,
+      ),
+    )
+      .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
+import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
+
+export const Counter = wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['Counter'], named: true });
+export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counter.client.jsx', component: allImports['Clicker'], named: true });
+`);
+  });
+
+  it('combines default and named exports', async () => {
+    expect(
+      await proxyClientComponent(
+        '/path/to/Counter.client.jsx',
+        `export default function() {}\nexport const Clicker = () => {};`,
+      ),
+    )
+      .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
+import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
+
+export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
+export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counter.client.jsx', component: allImports['Clicker'], named: true });
+`);
+  });
+
+  it('does not wrap non-component exports', async () => {
+    expect(
+      await proxyClientComponent(
+        '/path/to/Counter.client.jsx',
+        `export default function() {}\nexport const MyFragment = 'fragment myFragment on MyQuery { id }';`,
+      ),
+    )
+      .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
+import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
+
+export {MyFragment} from '/path/to/Counter.client.jsx?no-proxy';
+export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
+`);
+  });
+
+  it('can export non-component only', async () => {
+    expect(
+      await proxyClientComponent(
+        '/path/to/Counter.client.jsx',
+        `export const LocalizationContext = {}; export const useMyStuff = () => {}; export const MY_CONSTANT = 42;`,
+      ),
+    ).toBe(`export * from '/path/to/Counter.client.jsx?no-proxy';\n`);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index a595b368ad8..7c08f9534af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6795,6 +6795,114 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
+esbuild-android-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
+  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
+
+esbuild-darwin-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
+  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
+
+esbuild-darwin-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
+  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
+
+esbuild-freebsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
+  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
+
+esbuild-freebsd-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
+  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
+
+esbuild-linux-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
+  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
+
+esbuild-linux-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
+  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
+
+esbuild-linux-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
+  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
+
+esbuild-linux-arm@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
+  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
+
+esbuild-linux-mips64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
+  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
+
+esbuild-linux-ppc64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
+  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
+
+esbuild-netbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
+  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
+
+esbuild-openbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
+  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
+
+esbuild-sunos-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
+  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
+
+esbuild-windows-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
+  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
+
+esbuild-windows-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
+  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
+
+esbuild-windows-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
+  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
+
+esbuild@^0.13.12:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
+  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.15"
+    esbuild-darwin-64 "0.13.15"
+    esbuild-darwin-arm64 "0.13.15"
+    esbuild-freebsd-64 "0.13.15"
+    esbuild-freebsd-arm64 "0.13.15"
+    esbuild-linux-32 "0.13.15"
+    esbuild-linux-64 "0.13.15"
+    esbuild-linux-arm "0.13.15"
+    esbuild-linux-arm64 "0.13.15"
+    esbuild-linux-mips64le "0.13.15"
+    esbuild-linux-ppc64le "0.13.15"
+    esbuild-netbsd-64 "0.13.15"
+    esbuild-openbsd-64 "0.13.15"
+    esbuild-sunos-64 "0.13.15"
+    esbuild-windows-32 "0.13.15"
+    esbuild-windows-64 "0.13.15"
+    esbuild-windows-arm64 "0.13.15"
+
 escalade@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
@@ -8095,6 +8203,11 @@ fsevents@^2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
   integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -11762,6 +11875,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.1.30:
+  version "3.1.30"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -13204,6 +13322,15 @@ postcss@^6.0.1, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^8.3.11:
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
+  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+  dependencies:
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -14147,7 +14274,7 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.18.1:
+resolve@^1.18.1, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -14343,6 +14470,13 @@ rollup@^1.19.4:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rollup@^2.59.0:
+  version "2.61.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.61.1.tgz#1a5491f84543cf9e4caf6c61222d9a3f8f2ba454"
+  integrity sha512-BbTXlEvB8d+XFbK/7E5doIcRtxWPRiqr0eb5vQ0+2paMM04Ye4PZY5nHOQef2ix24l/L0SpLd5hwcH15QHPdvA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
@@ -14934,6 +15068,11 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
+source-map-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -16536,6 +16675,18 @@ vinyl@2.x:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+vite@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.1.tgz#be50ad13214290ecbebbe5ad389ed423cb5f137e"
+  integrity sha512-TDXXhcu5lyQ6uosK4ZWaOyB4VzOiizk0biitRzDzaEtgSUi8rVYPc4k1xgOjLSf0OuceDJmojFKXHOX9DB1WuQ==
+  dependencies:
+    esbuild "^0.13.12"
+    postcss "^8.3.11"
+    resolve "^1.20.0"
+    rollup "^2.59.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 vlq@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"

From 7def21a7a018e26528d090a7eb353d29dd9b40e8 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 21:19:45 +0900
Subject: [PATCH 09/87] Do not optimize lib by default

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 11eed2c4427..b8e796034b0 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -34,12 +34,6 @@ export default function ReactFlightVitePlugin({
 
     enforce: 'pre',
 
-    config: () => ({
-      optimizeDeps: {
-        include: ['react-server-dom-vite', 'react-server-dom-vite/writer'],
-      },
-    }),
-
     configResolved(_config: any) {
       config = _config;
     },

From 979a86b154c558dc07bdf981ca8a17e0dd3d8fc6 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 23:18:32 +0900
Subject: [PATCH 10/87] Fix lint issues

---
 .../src/ReactFlightVitePlugin.js                  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index b8e796034b0..0c549996339 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -105,7 +105,7 @@ export default function ReactFlightVitePlugin({
 
         const importers = [[userGlob, userPrefix]];
 
-        for (const componentPath of clientComponentPaths) {
+        clientComponentPaths.forEach(componentPath => {
           const libPrefix = componentPath + path.sep;
           const libGlob = path.join(
             path.relative(importerPath, componentPath),
@@ -113,7 +113,7 @@ export default function ReactFlightVitePlugin({
           );
 
           importers.push([libGlob, libPrefix]);
-        }
+        });
 
         const injectedGlobs = `Object.assign(Object.create(null), ${importers
           .map(
@@ -159,7 +159,7 @@ export async function proxyClientComponent(id: string, src?: string) {
   // Classify exports in components to wrap vs. everything else (e.g. GQL Fragments)
   const otherExports: string[] = [];
   const componentExports: string[] = [];
-  for (const key of exportStatements) {
+  exportStatements.forEach(key => {
     if (
       key !== DEFAULT_EXPORT &&
       /^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(key)
@@ -168,7 +168,7 @@ export async function proxyClientComponent(id: string, src?: string) {
     } else {
       componentExports.push(key);
     }
-  }
+  });
 
   if (componentExports.length === 0) {
     return `export * from '${importFrom}';\n`;
@@ -196,9 +196,10 @@ export async function proxyClientComponent(id: string, src?: string) {
 
     proxyCode += `export ${
       isDefault ? DEFAULT_EXPORT : `const ${componentName} =`
-    } wrapInClientProxy({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${String(
-      !isDefault,
-    )} });\n`;
+    } wrapInClientProxy({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      String(!isDefault)
+    } });\n`;
   });
 
   return proxyCode;

From 80d0e39dc1cfe4fc944ae66d9b52cbb13e9d820d Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Dec 2021 23:21:51 +0900
Subject: [PATCH 11/87] Fix tests in production

---
 .../src/__tests__/ReactFlightDOMClientProxy-test.js          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 492c295d940..04b76c02d84 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -32,9 +32,12 @@ describe('ReactFlightDOMClientProxy', () => {
 
     expect(typeof result).toEqual('object');
     expect(typeof result.render).toEqual('function');
-    expect(result.render.displayName).toEqual(name);
     expect(result.filepath).toEqual(id);
     expect(result.name).toEqual('default');
+
+    if (process.env.NODE_ENV !== 'production') {
+      expect(result.render.displayName).toEqual(name);
+    }
   });
 
   it('should not wrap anything that is not a React component', () => {

From 61e2600a2df26c363fb8ef948001298bd4154af0 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 14 Dec 2021 00:02:30 +0900
Subject: [PATCH 12/87] Use ClientProxy in main tests

---
 .../src/__tests__/ReactFlightDOM-test.js               | 10 ++++++++--
 .../src/__tests__/ReactFlightDOMBrowser-test.js        | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index fe3798d813a..cbb884a8016 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -26,6 +26,7 @@ let React;
 let ReactDOM;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
+let ClientProxy;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -36,6 +37,7 @@ describe('ReactFlightDOM', () => {
     ReactDOM = require('react-dom');
     ReactServerDOMWriter = require('react-server-dom-vite/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-vite');
+    ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
 
     // Reset modules
     viteModules = global.allClientComponents;
@@ -67,8 +69,12 @@ describe('ReactFlightDOM', () => {
         default: moduleExport,
       });
 
-    const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: idx, name: 'default'};
+    return ClientProxy.wrapInClientProxy({
+      component: moduleExport,
+      id: idx,
+      name: 'default',
+      named: false,
+    });
   }
 
   async function waitForSuspense(fn) {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 89b1ba4d077..47e0b06ad96 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -22,6 +22,7 @@ let React;
 let ReactDOM;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
+let ClientProxy;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
@@ -32,6 +33,7 @@ describe('ReactFlightDOMBrowser', () => {
     ReactDOM = require('react-dom');
     ReactServerDOMWriter = require('react-server-dom-vite/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-vite');
+    ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
 
     // Reset modules
     viteModules = global.allClientComponents;
@@ -45,8 +47,12 @@ describe('ReactFlightDOMBrowser', () => {
         default: moduleExport,
       });
 
-    const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: idx, name: 'default'};
+    return ClientProxy.wrapInClientProxy({
+      component: moduleExport,
+      id: idx,
+      name: 'default',
+      named: false,
+    });
   }
 
   async function waitForSuspense(fn) {

From f79d872c636a17ee94ee3f15b9b13f2cd283df01 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 14 Dec 2021 12:57:22 +0900
Subject: [PATCH 13/87] Do not check component name for classification

---
 .../src/ReactFlightVitePlugin.js              | 25 +------------------
 .../ReactFlightDOMVitePlugin-test.js          | 24 ------------------
 2 files changed, 1 insertion(+), 48 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 0c549996339..6d39c5562c6 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -156,35 +156,12 @@ export async function proxyClientComponent(id: string, src?: string) {
   const {code} = await transformWithEsbuild(src, id);
   const [, exportStatements] = parse(code);
 
-  // Classify exports in components to wrap vs. everything else (e.g. GQL Fragments)
-  const otherExports: string[] = [];
-  const componentExports: string[] = [];
-  exportStatements.forEach(key => {
-    if (
-      key !== DEFAULT_EXPORT &&
-      /^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(key)
-    ) {
-      otherExports.push(key);
-    } else {
-      componentExports.push(key);
-    }
-  });
-
-  if (componentExports.length === 0) {
-    return `export * from '${importFrom}';\n`;
-  }
-
   let proxyCode =
     `import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';\n` +
     `import * as allImports from '${importFrom}';\n\n`;
 
-  // Re-export other stuff directly without wrapping
-  if (otherExports.length > 0) {
-    proxyCode += `export {${otherExports.join(', ')}} from '${importFrom}';\n`;
-  }
-
   // Wrap components in Client Proxy
-  componentExports.forEach(key => {
+  exportStatements.forEach(key => {
     const isDefault = key === DEFAULT_EXPORT;
     const componentName = isDefault
       ? id
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index 4bdb4a88443..bead3071a2a 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -61,28 +61,4 @@ export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client
 export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counter.client.jsx', component: allImports['Clicker'], named: true });
 `);
   });
-
-  it('does not wrap non-component exports', async () => {
-    expect(
-      await proxyClientComponent(
-        '/path/to/Counter.client.jsx',
-        `export default function() {}\nexport const MyFragment = 'fragment myFragment on MyQuery { id }';`,
-      ),
-    )
-      .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
-import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
-
-export {MyFragment} from '/path/to/Counter.client.jsx?no-proxy';
-export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
-`);
-  });
-
-  it('can export non-component only', async () => {
-    expect(
-      await proxyClientComponent(
-        '/path/to/Counter.client.jsx',
-        `export const LocalizationContext = {}; export const useMyStuff = () => {}; export const MY_CONSTANT = 42;`,
-      ),
-    ).toBe(`export * from '/path/to/Counter.client.jsx?no-proxy';\n`);
-  });
 });

From 90818844e9b660d0924f098c8d47776e4f808523 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 14 Dec 2021 14:36:34 +0900
Subject: [PATCH 14/87] Cleanup eslintrc

---
 .eslintrc.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 659a893fcf1..8951f6a3484 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -256,13 +256,6 @@ module.exports = {
         __webpack_require__: 'readonly',
       },
     },
-    {
-      files: ['packages/react-server-dom-vite/**/*.js'],
-      globals: {
-        __webpack_chunk_load__: 'readonly',
-        __webpack_require__: 'readonly',
-      },
-    },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {

From d6a895ad0aa8199c8609e53fe5d239862c0dab74 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 14 Dec 2021 19:02:57 +0900
Subject: [PATCH 15/87] Fix lint-build

---
 packages/react-server-dom-vite/src/ClientProxy.js | 4 ++--
 scripts/rollup/validate/index.js                  | 7 ++++++-
 scripts/shared/inlinedHostConfigs.js              | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 3df4a04f91b..8717aab7c27 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -58,9 +58,9 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   return new Proxy(componentRef, {
     get: (target, prop) =>
       // 1. Let React access the element/ref and type in SSR
-      (target: any)[prop] ??
+      (target: any)[prop] ||
       // 2. Check descriptor properties for RSC requests
-      (rscDescriptor: any)[prop] ??
+      (rscDescriptor: any)[prop] ||
       // 3. Fallback to custom component properties such as `ImageComponent.Fragment`
       (component: any)[prop],
   });
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 41523eb2b4e..fba31a9bbd4 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -28,11 +28,16 @@ function getFormat(filepath) {
     }
     return 'rn';
   }
+  if (filepath.includes('react-server-dom-vite')) {
+    if (filepath.includes('umd')) {
+      return 'umd';
+    }
+    return 'esm';
+  }
   if (filepath.includes('cjs')) {
     if (
       filepath.includes('react-server-dom-webpack-plugin') ||
       filepath.includes('react-server-dom-webpack-node-register') ||
-      filepath.includes('react-server-dom-vite-plugin') ||
       filepath.includes('react-suspense-test-utils')
     ) {
       return 'cjs2015';
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 2a011567f13..4146e57ca07 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -81,7 +81,7 @@ module.exports = [
       'react-server-dom-vite',
       'react-server-dom-vite/writer',
       'react-server-dom-vite/writer.node.server',
-      'react-server-dom-vite/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
+      'react-server-dom-vite/src/ReactFlightDOMServerNode.js', // react-server-dom-vite/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
       'react-interactions',
     ],

From d55651658740ceffc3f6fa3c0853ed50a58650b3 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 13:23:01 +0900
Subject: [PATCH 16/87] fix: use component name convention to avoid wrapping
 hooks

---
 .../react-server-dom-vite/src/ClientProxy.js   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 8717aab7c27..a72035dd6d0 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -16,20 +16,18 @@ type ClientProxy = {
   component: mixed,
 };
 
-function isReactComponent(component: any) {
-  if (component) {
-    return (
-      typeof component === 'function' ||
-      typeof component.render === 'function' ||
-      component.$$typeof === Symbol.for('react.element')
-    );
-  }
+function isReactComponent(component: any, name: string) {
+  if (!component) return false;
 
-  return false;
+  return (
+    (typeof component === 'function' && /^[A-Z]/.test(name)) ||
+    typeof component.render === 'function' ||
+    component.$$typeof === Symbol.for('react.element')
+  );
 }
 
 export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
-  if (!isReactComponent(component)) {
+  if (!isReactComponent(component, name)) {
     // This is not a React component, return it as is.
     return component;
   }

From 6c5efee27ab01c5400a109c379529e0d47cbe192 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 13:26:54 +0900
Subject: [PATCH 17/87] fix: paths in Windows

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 6d39c5562c6..e9d26109db8 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -47,7 +47,7 @@ export default function ReactFlightVitePlugin({
       if (
         /\.server(\.[jt]sx?)?$/.test(source) &&
         !(
-          /(\.server\.[jt]sx?|entry-server\.[jt]sx?|\/index\.html)$/.test(
+          /(\.server\.[jt]sx?|entry-server\.[jt]sx?|index\.html)$/.test(
             importer,
           ) || isServerComponentImporterAllowed(importer, source)
         )
@@ -118,7 +118,9 @@ export default function ReactFlightVitePlugin({
         const injectedGlobs = `Object.assign(Object.create(null), ${importers
           .map(
             ([glob, prefix]) =>
-              `__vncp(import.meta.glob('${glob}'), '${prefix}')`,
+              `__vncp(import.meta.glob('${normalizePath(
+                glob,
+              )}'), '${normalizePath(prefix)}')`,
           )
           .join(', ')});`;
 

From 490f8f274fe3afd905db8076d85d7e3f944a1d76 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 13:39:14 +0900
Subject: [PATCH 18/87] feat: avoid bundling all client components in server

---
 packages/react-server-dom-vite/src/ClientProxy.js    | 12 ++++++++++++
 .../src/ReactFlightVitePlugin.js                     | 12 ++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index a72035dd6d0..726c63ac44b 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -9,6 +9,12 @@
 
 import {createElement} from 'react';
 
+declare var globalThis: any;
+
+// This is a store of components discovered during RSC
+// to load them later when consuming the response in SSR.
+globalThis.__COMPONENT_INDEX = {};
+
 type ClientProxy = {
   id: string,
   name: string,
@@ -53,6 +59,12 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   rscDescriptor.filepath = id;
   rscDescriptor.name = named ? name : 'default';
 
+  if (!globalThis.__COMPONENT_INDEX[id]) {
+    // Store a loader function to find components during SSR when consuming RSC
+    globalThis.__COMPONENT_INDEX[id] = () =>
+      Promise.resolve({[rscDescriptor.name]: component});
+  }
+
   return new Proxy(componentRef, {
     get: (target, prop) =>
       // 1. Let React access the element/ref and type in SSR
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index e9d26109db8..7eaa0af9888 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -71,7 +71,7 @@ export default function ReactFlightVitePlugin({
       return null;
     },
 
-    transform(code: string, id: string) {
+    transform(code: string, id: string, options: {ssr?: boolean} = {}) {
       /**
        * In order to allow dynamic component imports from RSC, we use Vite's import.meta.glob.
        * This hook replaces the glob placeholders with resolved paths to all client components.
@@ -82,6 +82,14 @@ export default function ReactFlightVitePlugin({
        * and we will have duplicated files in the browser (with duplicated contexts, etc).
        */
       if (/\/react-server-dom-vite.js/.test(id)) {
+        const INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
+
+        if (options && options.ssr) {
+          // In SSR, directly use components already discovered by RSC
+          // instead of globs to avoid bundling unused components.
+          return code.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
+        }
+
         const CLIENT_COMPONENT_GLOB = '**/*.client.[jt]s?(x)';
 
         const importerPath = path.dirname(id);
@@ -125,7 +133,7 @@ export default function ReactFlightVitePlugin({
           .join(', ')});`;
 
         return code.replace(
-          /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/,
+          INJECTING_RE,
           injectedGlobs + serializedNormalizePaths(),
         );
       }

From 1c865effb94eeeed411e5210761d3286f93e8a0a Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 14:03:46 +0900
Subject: [PATCH 19/87] feat: use hashes for client component ids instead of
 absolute paths

---
 .../src/ReactFlightVitePlugin.js              | 94 +++++++++++++------
 1 file changed, 66 insertions(+), 28 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 7eaa0af9888..e1f017f72b3 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -23,6 +23,8 @@ type PluginOptions = {
   ) => boolean,
 };
 
+const rscViteFileRE = /\/react-server-dom-vite.js/;
+
 export default function ReactFlightVitePlugin({
   clientComponentPaths = [],
   isServerComponentImporterAllowed = importer => false,
@@ -36,6 +38,10 @@ export default function ReactFlightVitePlugin({
 
     configResolved(_config: any) {
       config = _config;
+
+      // By pushing this plugin at the end of the existing array,
+      // we enforce running it *after* Vite resolves import.meta.glob.
+      config.plugins.push(hashImportsPlugin);
     },
 
     async resolveId(source: string, importer: string) {
@@ -81,7 +87,7 @@ export default function ReactFlightVitePlugin({
        * If the paths are relative to the root instead, Vite won't add the querystring
        * and we will have duplicated files in the browser (with duplicated contexts, etc).
        */
-      if (/\/react-server-dom-vite.js/.test(id)) {
+      if (rscViteFileRE.test(id)) {
         const INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
 
         if (options && options.ssr) {
@@ -126,44 +132,57 @@ export default function ReactFlightVitePlugin({
         const injectedGlobs = `Object.assign(Object.create(null), ${importers
           .map(
             ([glob, prefix]) =>
-              `__vncp(import.meta.glob('${normalizePath(
-                glob,
-              )}'), '${normalizePath(prefix)}')`,
+              // Mark the globs to modify the result after Vite resolves them.
+              // The prefix is used later to turn relative imports
+              // into absolute imports, and then into hashes.
+              `/* HASH_BEGIN ${normalizePath(prefix)} */ ` +
+              `import.meta.glob('${normalizePath(glob)}') /* HASH_END */`,
           )
           .join(', ')});`;
 
-        return code.replace(
-          INJECTING_RE,
-          injectedGlobs + serializedNormalizePaths(),
-        );
+        return code.replace(INJECTING_RE, injectedGlobs);
       }
     },
   };
 }
 
-const serializedNormalizePaths = () => `
-function __vncp(obj, prefix) {
-  const nestedRE = /\\.\\.\\//gm;
-  return Object.keys(obj).reduce(function (acc, key) {
-    acc[prefix + key.replace(nestedRE, '')] = obj[key];
-    return acc;
-  }, {});
+const btoa = hash => Buffer.from(String(hash), 'binary').toString('base64');
+// Quick, lossy hash function: https://stackoverflow.com/a/8831937/4468962
+// Prevents leaking path information in the browser, and minifies RSC responses.
+function hashCode(value) {
+  let hash = 0;
+  for (var i = 0; i < value.length; i++) {
+    var char = value.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+
+  return btoa(hash).replace(/=+/, '');
 }
-`;
 
-export async function proxyClientComponent(id: string, src?: string) {
+const getComponentFilename = filepath =>
+  filepath
+    .split('/')
+    .pop()
+    .split('.')
+    .shift();
+
+const getComponentId = filepath =>
+  `${getComponentFilename(filepath)}-${hashCode(filepath)}`;
+
+export async function proxyClientComponent(filepath: string, src?: string) {
   const DEFAULT_EXPORT = 'default';
 
   // Modify the import ID to avoid infinite wraps
-  const importFrom = `${id}?no-proxy`;
+  const importFrom = `${filepath}?no-proxy`;
 
   await init;
 
   if (!src) {
-    src = await fs.readFile(id, 'utf-8');
+    src = await fs.readFile(filepath, 'utf-8');
   }
 
-  const {code} = await transformWithEsbuild(src, id);
+  const {code} = await transformWithEsbuild(src, filepath);
   const [, exportStatements] = parse(code);
 
   let proxyCode =
@@ -173,17 +192,13 @@ export async function proxyClientComponent(id: string, src?: string) {
   // Wrap components in Client Proxy
   exportStatements.forEach(key => {
     const isDefault = key === DEFAULT_EXPORT;
-    const componentName = isDefault
-      ? id
-          .split('/')
-          .pop()
-          .split('.')
-          .shift()
-      : key;
+    const componentName = isDefault ? getComponentFilename(filepath) : key;
 
     proxyCode += `export ${
       isDefault ? DEFAULT_EXPORT : `const ${componentName} =`
-    } wrapInClientProxy({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${
+    } wrapInClientProxy({ name: '${componentName}', id: '${getComponentId(
+      filepath,
+    )}', component: allImports['${key}'], named: ${
       // eslint-disable-next-line react-internal/safe-string-coercion
       String(!isDefault)
     } });\n`;
@@ -191,3 +206,26 @@ export async function proxyClientComponent(id: string, src?: string) {
 
   return proxyCode;
 }
+
+const hashImportsPlugin = {
+  name: 'vite-plugin-react-server-components-hash-imports',
+  enforce: 'post',
+  transform(code, id) {
+    // Turn relative import paths to lossy hashes
+    if (rscViteFileRE.test(id)) {
+      const nestedRE = /\.\.\//gm;
+
+      return code.replace(
+        /\/\*\s*HASH_BEGIN\s*(.+?)\s*\*\/\s*(.+?)\/\*\s*HASH_END\s*\*\//gms,
+        function(_, prefix, imports) {
+          return imports
+            .trim()
+            .replace(/"([^"]+?)":/gms, function(__, relativePath) {
+              const absolutePath = prefix + relativePath.replace(nestedRE, '');
+              return `"${getComponentId(absolutePath)}":`;
+            });
+        },
+      );
+    }
+  },
+};

From d96498aa5e594666796433b159ecb564f1623055 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 14:24:42 +0900
Subject: [PATCH 20/87] refactor: rename variables in ClientProxy

---
 .../react-server-dom-vite/src/ClientProxy.js  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 726c63ac44b..75ab891bbc3 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -32,45 +32,45 @@ function isReactComponent(component: any, name: string) {
   );
 }
 
+// A ClientProxy behaves as a module reference for the Flight
+// runtime (RSC) and as a real component for the Fizz runtime (SSR).
+// Note that this is not used in browser environments.
 export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   if (!isReactComponent(component, name)) {
-    // This is not a React component, return it as is.
+    // This is not a React component, do not wrap it.
     return component;
   }
 
-  // Use object syntax here to make sure the function name
-  // comes from the meta params for better error stacks.
-  const render = {
-    [name]: (props: any) => createElement(component, props),
-  }[name];
+  const render = (props: any) => createElement(component, props);
+  Object.defineProperty(render, 'name', {value: name});
 
   if (__DEV__) {
     render.displayName = name;
   }
 
-  // React accesses the `render` function directly when encountring this type
+  // Fizz runtime accesses the `render` method directly when encountering a forward_ref
   const componentRef = Object.create(null);
   componentRef.$$typeof = Symbol.for('react.forward_ref');
   componentRef.render = render;
 
-  // This custom type is checked in RSC renderer
-  const rscDescriptor = Object.create(null);
-  rscDescriptor.$$typeof_rsc = Symbol.for('react.module.reference');
-  rscDescriptor.filepath = id;
-  rscDescriptor.name = named ? name : 'default';
+  // Flight runtime will check this custom typeof to decide wether this is a module ref
+  const moduleRef = Object.create(null);
+  moduleRef.$$typeof_rsc = Symbol.for('react.module.reference');
+  moduleRef.filepath = id;
+  moduleRef.name = named ? name : 'default';
 
   if (!globalThis.__COMPONENT_INDEX[id]) {
     // Store a loader function to find components during SSR when consuming RSC
     globalThis.__COMPONENT_INDEX[id] = () =>
-      Promise.resolve({[rscDescriptor.name]: component});
+      Promise.resolve({[moduleRef.name]: component});
   }
 
   return new Proxy(componentRef, {
     get: (target, prop) =>
       // 1. Let React access the element/ref and type in SSR
       (target: any)[prop] ||
-      // 2. Check descriptor properties for RSC requests
-      (rscDescriptor: any)[prop] ||
+      // 2. Check module properties for RSC requests
+      (moduleRef: any)[prop] ||
       // 3. Fallback to custom component properties such as `ImageComponent.Fragment`
       (component: any)[prop],
   });

From a96cd6e99684a4489f130b7d2bf9c120a9878ce5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 15:28:38 +0900
Subject: [PATCH 21/87] fix: multiple exports from the same client component
 file

---
 packages/react-server-dom-vite/src/ClientProxy.js    | 12 +++++++-----
 .../src/ReactFlightClientViteBundlerConfig.js        |  4 +++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 75ab891bbc3..5d311246056 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -9,6 +9,7 @@
 
 import {createElement} from 'react';
 
+/*global globalThis*/
 declare var globalThis: any;
 
 // This is a store of components discovered during RSC
@@ -59,11 +60,12 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   moduleRef.filepath = id;
   moduleRef.name = named ? name : 'default';
 
-  if (!globalThis.__COMPONENT_INDEX[id]) {
-    // Store a loader function to find components during SSR when consuming RSC
-    globalThis.__COMPONENT_INDEX[id] = () =>
-      Promise.resolve({[moduleRef.name]: component});
-  }
+  // Store component in a global index during RSC to use them later in SSR
+  globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
+    globalThis.__COMPONENT_INDEX[id] || Object.create(null),
+    moduleRef.name,
+    {value: component},
+  );
 
   return new Proxy(componentRef, {
     get: (target, prop) =>
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
index 08c5817480f..48523e234a7 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -41,7 +41,9 @@ function importClientComponent(moduleId: string): Promise<any> {
     );
   }
 
-  return modImport();
+  return typeof modImport === 'function'
+    ? modImport()
+    : Promise.resolve(modImport);
 }
 
 // The module cache contains all the modules we've preloaded so far.

From 61f760629f9acb0d5b30969878ce08bc0fd76aa2 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 15:39:55 +0900
Subject: [PATCH 22/87] fix: regexp flag in ESLint

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index e1f017f72b3..4a5f30a0b3c 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -216,11 +216,11 @@ const hashImportsPlugin = {
       const nestedRE = /\.\.\//gm;
 
       return code.replace(
-        /\/\*\s*HASH_BEGIN\s*(.+?)\s*\*\/\s*(.+?)\/\*\s*HASH_END\s*\*\//gms,
+        /\/\*\s*HASH_BEGIN\s*(.+?)\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm,
         function(_, prefix, imports) {
           return imports
             .trim()
-            .replace(/"([^"]+?)":/gms, function(__, relativePath) {
+            .replace(/"([^"]+?)":/gm, function(__, relativePath) {
               const absolutePath = prefix + relativePath.replace(nestedRE, '');
               return `"${getComponentId(absolutePath)}":`;
             });

From a3678956d7ebbc11338adb97228a0657808087d7 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 16:54:37 +0900
Subject: [PATCH 23/87] fix: non-string ids, component name and linter

---
 .../react-server-dom-vite/src/ClientProxy.js  |  3 ++-
 .../src/ReactFlightVitePlugin.js              | 19 +++++++------
 .../src/__tests__/ReactFlightDOM-test.js      |  4 +--
 .../__tests__/ReactFlightDOMBrowser-test.js   |  4 +--
 .../ReactFlightDOMVitePlugin-test.js          | 27 +++++++++++++------
 5 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 5d311246056..b1b2d8231ff 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -9,8 +9,9 @@
 
 import {createElement} from 'react';
 
-/*global globalThis*/
 declare var globalThis: any;
+// eslint-disable-next-line no-unused-vars
+/*global globalThis*/
 
 // This is a store of components discovered during RSC
 // to load them later when consuming the response in SSR.
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 4a5f30a0b3c..0b65bcf71e0 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -146,28 +146,31 @@ export default function ReactFlightVitePlugin({
   };
 }
 
-const btoa = hash => Buffer.from(String(hash), 'binary').toString('base64');
+const btoa = (hash: number) =>
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  Buffer.from(String(hash), 'binary').toString('base64');
+
 // Quick, lossy hash function: https://stackoverflow.com/a/8831937/4468962
 // Prevents leaking path information in the browser, and minifies RSC responses.
-function hashCode(value) {
+function hashCode(value: string) {
   let hash = 0;
-  for (var i = 0; i < value.length; i++) {
-    var char = value.charCodeAt(i);
+  for (let i = 0; i < value.length; i++) {
+    const char = value.charCodeAt(i);
     hash = (hash << 5) - hash + char;
-    hash = hash & hash;
+    hash &= hash;
   }
 
   return btoa(hash).replace(/=+/, '');
 }
 
-const getComponentFilename = filepath =>
+const getComponentFilename = (filepath: string) =>
   filepath
     .split('/')
     .pop()
     .split('.')
     .shift();
 
-const getComponentId = filepath =>
+export const getComponentId = (filepath: string) =>
   `${getComponentFilename(filepath)}-${hashCode(filepath)}`;
 
 export async function proxyClientComponent(filepath: string, src?: string) {
@@ -210,7 +213,7 @@ export async function proxyClientComponent(filepath: string, src?: string) {
 const hashImportsPlugin = {
   name: 'vite-plugin-react-server-components-hash-imports',
   enforce: 'post',
-  transform(code, id) {
+  transform(code: string, id: string) {
     // Turn relative import paths to lossy hashes
     if (rscViteFileRE.test(id)) {
       const nestedRE = /\.\.\//gm;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index cbb884a8016..0c043be138b 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -63,7 +63,7 @@ describe('ReactFlightDOM', () => {
   }
 
   function moduleReference(moduleExport) {
-    const idx = viteModuleIdx++;
+    const idx = String(viteModuleIdx++);
     viteModules[idx] = () =>
       Promise.resolve({
         default: moduleExport,
@@ -72,7 +72,7 @@ describe('ReactFlightDOM', () => {
     return ClientProxy.wrapInClientProxy({
       component: moduleExport,
       id: idx,
-      name: 'default',
+      name: moduleExport.name || 'MyComponent',
       named: false,
     });
   }
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 47e0b06ad96..748a1a4184d 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -41,7 +41,7 @@ describe('ReactFlightDOMBrowser', () => {
   });
 
   function moduleReference(moduleExport) {
-    const idx = viteModuleIdx++;
+    const idx = String(viteModuleIdx++);
     viteModules[idx] = () =>
       Promise.resolve({
         default: moduleExport,
@@ -50,7 +50,7 @@ describe('ReactFlightDOMBrowser', () => {
     return ClientProxy.wrapInClientProxy({
       component: moduleExport,
       id: idx,
-      name: 'default',
+      name: moduleExport.name || 'MyComponent',
       named: false,
     });
   }
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index bead3071a2a..3d5c4da8ae1 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -9,13 +9,14 @@
 
 'use strict';
 
-let proxyClientComponent;
+let proxyClientComponent, getComponentId;
 
 describe('ReactFlightVitePlugin', () => {
   beforeEach(() => {
     jest.resetModules();
-    proxyClientComponent = require('../ReactFlightVitePlugin')
-      .proxyClientComponent;
+    const plugin = require('../ReactFlightVitePlugin');
+    proxyClientComponent = plugin.proxyClientComponent;
+    getComponentId = plugin.getComponentId;
   });
 
   it('wraps default exports for dev', async () => {
@@ -28,7 +29,9 @@ describe('ReactFlightVitePlugin', () => {
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
+export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+      '/path/to/Counter.client.jsx',
+    )}', component: allImports['default'], named: false });
 `);
   });
 
@@ -42,8 +45,12 @@ export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export const Counter = wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['Counter'], named: true });
-export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counter.client.jsx', component: allImports['Clicker'], named: true });
+export const Counter = wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+      '/path/to/Counter.client.jsx',
+    )}', component: allImports['Counter'], named: true });
+export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
+      '/path/to/Counter.client.jsx',
+    )}', component: allImports['Clicker'], named: true });
 `);
   });
 
@@ -57,8 +64,12 @@ export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counte
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export default wrapInClientProxy({ name: 'Counter', id: '/path/to/Counter.client.jsx', component: allImports['default'], named: false });
-export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '/path/to/Counter.client.jsx', component: allImports['Clicker'], named: true });
+export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+      '/path/to/Counter.client.jsx',
+    )}', component: allImports['default'], named: false });
+export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
+      '/path/to/Counter.client.jsx',
+    )}', component: allImports['Clicker'], named: true });
 `);
   });
 });

From 127ec64bba53c5841be43ae04f7e5cfb42c663c8 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 2 Feb 2022 17:25:42 +0900
Subject: [PATCH 24/87] fix: Flow ignored path

---
 scripts/shared/inlinedHostConfigs.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 4146e57ca07..bc70ca1aabc 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -81,6 +81,7 @@ module.exports = [
       'react-server-dom-vite',
       'react-server-dom-vite/writer',
       'react-server-dom-vite/writer.node.server',
+      'react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js',
       'react-server-dom-vite/src/ReactFlightDOMServerNode.js', // react-server-dom-vite/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
       'react-interactions',

From ca00cbcc98849431472c03382925d0a628e0e916 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 10 Feb 2022 18:38:22 +0900
Subject: [PATCH 25/87] fix: allow registering components more than once in HMR

---
 packages/react-server-dom-vite/src/ClientProxy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index b1b2d8231ff..e2493cd2604 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -65,7 +65,7 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
     globalThis.__COMPONENT_INDEX[id] || Object.create(null),
     moduleRef.name,
-    {value: component},
+    {value: component, writable: true},
   );
 
   return new Proxy(componentRef, {

From aa6ee986839dd901bd112280f3ebc66d98ca3a52 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 10 Feb 2022 18:43:10 +0900
Subject: [PATCH 26/87] fix: remove hardcoded src directory  when finding
 client components

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 0b65bcf71e0..e0b1d678888 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -111,11 +111,7 @@ export default function ReactFlightVitePlugin({
             importerToRootNested.replace(/\/?$/, path.sep),
           ),
         );
-        const userGlob = path.join(
-          importerToRootPath,
-          'src',
-          CLIENT_COMPONENT_GLOB,
-        );
+        const userGlob = path.join(importerToRootPath, CLIENT_COMPONENT_GLOB);
 
         const importers = [[userGlob, userPrefix]];
 

From 80d701fdda48b8e57e7442b7e6e59df8021945ba Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 25 Feb 2022 18:29:54 +0900
Subject: [PATCH 27/87] Update tests and config like in Webpack

---
 packages/react-server-dom-vite/package.json   |   1 -
 .../__tests__/ReactFlightDOMBrowser-test.js   | 170 ++++++++++++++----
 scripts/shared/inlinedHostConfigs.js          |   8 +-
 3 files changed, 144 insertions(+), 35 deletions(-)

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 0bab6e7c051..3c5e3718326 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "plugin.js",
     "writer.browser.server.js",
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 748a1a4184d..fdb2abf3c3f 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -69,6 +69,31 @@ describe('ReactFlightDOMBrowser', () => {
     }
   }
 
+  function makeDelayedText(Model) {
+    let error, _resolve, _reject;
+    let promise = new Promise((resolve, reject) => {
+      _resolve = () => {
+        promise = null;
+        resolve();
+      };
+      _reject = e => {
+        error = e;
+        promise = null;
+        reject(e);
+      };
+    });
+    function DelayedText({children}, data) {
+      if (promise) {
+        throw promise;
+      }
+      if (error) {
+        throw error;
+      }
+      return <Model>{children}</Model>;
+    }
+    return [DelayedText, _resolve, _reject];
+  }
+
   it('should resolve HTML using W3C streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -174,36 +199,11 @@ describe('ReactFlightDOMBrowser', () => {
       return children;
     }
 
-    function makeDelayedText() {
-      let error, _resolve, _reject;
-      let promise = new Promise((resolve, reject) => {
-        _resolve = () => {
-          promise = null;
-          resolve();
-        };
-        _reject = e => {
-          error = e;
-          promise = null;
-          reject(e);
-        };
-      });
-      function DelayedText({children}, data) {
-        if (promise) {
-          throw promise;
-        }
-        if (error) {
-          throw error;
-        }
-        return <Text>{children}</Text>;
-      }
-      return [DelayedText, _resolve, _reject];
-    }
-
-    const [Friends, resolveFriends] = makeDelayedText();
-    const [Name, resolveName] = makeDelayedText();
-    const [Posts, resolvePosts] = makeDelayedText();
-    const [Photos, resolvePhotos] = makeDelayedText();
-    const [Games, , rejectGames] = makeDelayedText();
+    const [Friends, resolveFriends] = makeDelayedText(Text);
+    const [Name, resolveName] = makeDelayedText(Text);
+    const [Posts, resolvePosts] = makeDelayedText(Text);
+    const [Photos, resolvePhotos] = makeDelayedText(Text);
+    const [Games, , rejectGames] = makeDelayedText(Text);
 
     // View
     function ProfileDetails({avatar}) {
@@ -336,4 +336,114 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(reportedErrors).toEqual([]);
   });
+
+  it('should close the stream upon completion when rendering to W3C streams', async () => {
+    const {Suspense} = React;
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText(Text);
+    const [Name, resolveName] = makeDelayedText(Text);
+    const [Posts, resolvePosts] = makeDelayedText(Text);
+    const [Photos, resolvePhotos] = makeDelayedText(Text);
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+
+    function ProfileContent() {
+      return (
+        <Suspense fallback="(loading everything)">
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(model);
+
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+
+    let flightResponse = '';
+    let isDone = false;
+
+    reader.read().then(function progress({done, value}) {
+      if (done) {
+        isDone = true;
+        return;
+      }
+
+      flightResponse += decoder.decode(value);
+
+      return reader.read().then(progress);
+    });
+
+    // Advance time enough to trigger a nested fallback.
+    jest.advanceTimersByTime(500);
+
+    await act(async () => {});
+
+    expect(flightResponse).toContain('(loading everything)');
+    expect(flightResponse).toContain('(loading sidebar)');
+    expect(flightResponse).toContain('(loading posts)');
+    expect(flightResponse).not.toContain(':friends:');
+    expect(flightResponse).not.toContain(':name:');
+
+    await act(async () => {
+      resolveFriends();
+    });
+
+    expect(flightResponse).toContain(':friends:');
+
+    await act(async () => {
+      resolveName();
+    });
+
+    expect(flightResponse).toContain(':name:');
+
+    await act(async () => {
+      resolvePhotos();
+    });
+
+    expect(flightResponse).toContain(':photos:');
+
+    await act(async () => {
+      resolvePosts();
+    });
+
+    expect(flightResponse).toContain(':posts:');
+
+    // Final pending chunk is written; stream should be closed.
+    expect(isDone).toBeTruthy();
+  });
 });
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 5a4f4886b4c..d2a2a767a08 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -70,8 +70,8 @@ module.exports = [
     shortName: 'dom-vite',
     entryPoints: [
       'react-dom',
-      'react-dom/testing',
-      'react-dom/src/server/ReactDOMFizzServerNode',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/ReactDOMFizzServerNode.js',
       'react-server-dom-vite/writer.node.server',
       'react-server-dom-vite',
     ],
@@ -93,14 +93,14 @@ module.exports = [
     shortName: 'dom-browser-vite',
     entryPoints: [
       'react-dom',
-      'react-dom/testing',
+      'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser',
       'react-server-dom-vite/writer.browser.server',
       'react-server-dom-vite',
     ],
     paths: [
       'react-dom',
-      'react-dom/testing',
+      'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-vite',
       'react-server-dom-vite/writer.browser.server',

From 0371ee819f25d5285fcfd6d1b886632a7d6889e9 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 16 Mar 2022 18:54:26 +0900
Subject: [PATCH 28/87] Support non-PascalCase filenames for client components

---
 packages/react-server-dom-vite/src/ClientProxy.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index e2493cd2604..80cd8a7f272 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -24,11 +24,11 @@ type ClientProxy = {
   component: mixed,
 };
 
-function isReactComponent(component: any, name: string) {
+function isReactComponent(component: any, name: string, isNamed: boolean) {
   if (!component) return false;
 
   return (
-    (typeof component === 'function' && /^[A-Z]/.test(name)) ||
+    (typeof component === 'function' && (!isNamed || /^[A-Z]/.test(name))) ||
     typeof component.render === 'function' ||
     component.$$typeof === Symbol.for('react.element')
   );
@@ -38,7 +38,7 @@ function isReactComponent(component: any, name: string) {
 // runtime (RSC) and as a real component for the Fizz runtime (SSR).
 // Note that this is not used in browser environments.
 export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
-  if (!isReactComponent(component, name)) {
+  if (!isReactComponent(component, name, named)) {
     // This is not a React component, do not wrap it.
     return component;
   }

From a3f715a1c82f14f93cf91a7ea82071b249d032c8 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 16 Mar 2022 19:07:20 +0900
Subject: [PATCH 29/87] Switch to ReactDOMClient

---
 .../src/__tests__/ReactFlightDOM-test.js           | 14 +++++++-------
 .../src/__tests__/ReactFlightDOMBrowser-test.js    |  6 +++---
 scripts/shared/inlinedHostConfigs.js               | 10 ++++++++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index 0c043be138b..2aae86f1a98 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -23,7 +23,7 @@ let viteModules = {};
 let act;
 let Stream;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let ClientProxy;
@@ -34,7 +34,7 @@ describe('ReactFlightDOM', () => {
     act = require('jest-react').act;
     Stream = require('stream');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-vite/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-vite');
     ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
@@ -167,7 +167,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -202,7 +202,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -235,7 +235,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -371,7 +371,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
@@ -470,7 +470,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const stream1 = getTestStream();
     const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index fdb2abf3c3f..2b29542535c 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -19,7 +19,7 @@ let viteModules = {};
 
 let act;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let ClientProxy;
@@ -30,7 +30,7 @@ describe('ReactFlightDOMBrowser', () => {
     viteModules = {};
     act = require('jest-react').act;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-vite/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-vite');
     ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
@@ -266,7 +266,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 407ba5f73a2..a9013698621 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -87,6 +87,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-server-dom-vite',
       'react-server-dom-vite/writer',
@@ -94,6 +95,10 @@ module.exports = [
       'react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js',
       'react-server-dom-vite/src/ReactFlightDOMServerNode.js', // react-server-dom-vite/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
       'react-interactions',
     ],
     isFlowTyped: true,
@@ -110,6 +115,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-vite',
@@ -117,6 +123,10 @@ module.exports = [
       'react-server-dom-vite/src/ReactFlightDOMServerBrowser.js', // react-server-dom-vite/writer.browser.server
       'react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js',
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
     ],
     isFlowTyped: true,
     isServerSupported: true,

From fc44ec64976b0b3a9c71898a12d624fd6d568348 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 16 Mar 2022 19:12:14 +0900
Subject: [PATCH 30/87] Add ServerContext properties

---
 packages/react-server-dom-vite/package.json                    | 1 -
 .../react-server-dom-vite/src/ReactFlightDOMServerBrowser.js   | 3 +++
 packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js | 3 +++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 3c5e3718326..990ec26b09b 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -55,7 +55,6 @@
   },
   "peerDependencies": {
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
     "vite": "^2.7.1"
   },
   "dependencies": {
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index 18de14a5749..fcb354c914e 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
 import {
   createRequest,
@@ -22,11 +23,13 @@ type Options = {
 function renderToReadableStream(
   model: ReactModel,
   options?: Options,
+  context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
     model,
     {}, // Manifest, not used
     options ? options.onError : undefined,
+    context,
   );
   const stream = new ReadableStream({
     start(controller) {
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index a432c9b3325..70a31b7b411 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -9,6 +9,7 @@
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
 import type {Writable} from 'stream';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
 import {
   createRequest,
@@ -31,11 +32,13 @@ type Controls = {|
 function renderToPipeableStream(
   model: ReactModel,
   options?: Options,
+  context?: Array<[string, ServerContextJSONValue]>,
 ): Controls {
   const request = createRequest(
     model,
     {}, // Manifest, not used
     options ? options.onError : undefined,
+    context,
   );
   let hasStartedFlowing = false;
   startWork(request);

From e2c7076fb045a7bd80913e1d1b61e8e979d537d7 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 23 Mar 2022 14:56:01 +0900
Subject: [PATCH 31/87] Remove stream.lock

---
 .../src/ReactFlightDOMServerBrowser.js                   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index fcb354c914e..c454729ee2d 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -32,17 +32,12 @@ function renderToReadableStream(
     context,
   );
   const stream = new ReadableStream({
+    type: 'bytes',
     start(controller) {
       startWork(request);
     },
     pull(controller) {
-      // Pull is called immediately even if the stream is not passed to anything.
-      // That's buffering too early. We want to start buffering once the stream
-      // is actually used by something so we can give it the best result possible
-      // at that point.
-      if (stream.locked) {
-        startFlowing(request, controller);
-      }
+      startFlowing(request, controller);
     },
     cancel(reason) {},
   });

From 5404a5f06514da975a0b5fc55a36d0cdfd4acf5c Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 24 Mar 2022 14:26:06 +0900
Subject: [PATCH 32/87] Replace isModuleReference with getModuleReference in
 Flight runtime

---
 .../src/ReactNoopFlightServer.js              |  7 +-
 .../ReactFlightDOMRelayServerHostConfig.js    |  4 +-
 .../src/ReactFlightServerViteBundlerConfig.js |  7 +-
 .../ReactFlightServerWebpackBundlerConfig.js  |  4 +-
 .../ReactFlightNativeRelayServerHostConfig.js |  4 +-
 .../react-server/src/ReactFlightServer.js     | 95 ++++++++++---------
 .../ReactFlightServerBundlerConfigCustom.js   |  2 +-
 scripts/jest/setupHostConfigs.js              |  2 +-
 8 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 1c607befe74..1bbd2437880 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -45,8 +45,11 @@ const ReactNoopFlightServer = ReactFlightServer({
   stringToPrecomputedChunk(content: string): string {
     return content;
   },
-  isModuleReference(reference: Object): boolean {
-    return reference.$$typeof === Symbol.for('react.module.reference');
+  getModuleReference(reference: any): Object | undefined {
+    return reference &&
+      reference.$$typeof === Symbol.for('react.module.reference')
+      ? reference
+      : undefined;
   },
   getModuleKey(reference: Object): Object {
     return reference;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index a29a6449d8b..c971c275a75 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -38,8 +38,8 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightDOMRelayServerIntegration';
 
-export function isModuleReference(reference: Object): boolean {
-  return reference instanceof JSResourceReference;
+export function getModuleReference(reference: any): Object | undefined {
+  return reference instanceof JSResourceReference ? reference : undefined;
 }
 
 export type ModuleKey = ModuleReference<any>;
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index 5a5205e88c2..abc558a36b5 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -29,8 +29,11 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function isModuleReference(reference: Object): boolean {
-  return (reference.$$typeof_rsc || reference.$$typeof) === MODULE_TAG;
+export function getModuleReference(reference: any): Object | undefined {
+  return reference &&
+    (reference.$$typeof_rsc || reference.$$typeof) === MODULE_TAG
+    ? reference
+    : undefined;
 }
 
 export function resolveModuleMetaData<T>(
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index c8469eeba80..d9ab2f5a798 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -36,8 +36,8 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function isModuleReference(reference: Object): boolean {
-  return reference.$$typeof === MODULE_TAG;
+export function getModuleReference(reference: any): Object | undefined {
+  return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
 }
 
 export function resolveModuleMetaData<T>(
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index b07c084eaa6..35d65f60b13 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -35,8 +35,8 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightNativeRelayServerIntegration';
 
-export function isModuleReference(reference: Object): boolean {
-  return reference instanceof JSResourceReferenceImpl;
+export function getModuleReference(reference: any): Object | undefined {
+  return reference instanceof JSResourceReferenceImpl ? reference : undefined;
 }
 
 export type ModuleKey = ModuleReference<any>;
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index e08f308a32f..2bbd0f5cf59 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -36,7 +36,7 @@ import {
   processErrorChunk,
   resolveModuleMetaData,
   getModuleKey,
-  isModuleReference,
+  getModuleReference,
 } from './ReactFlightServerConfig';
 
 import {Dispatcher, getCurrentCache, setCurrentCache} from './ReactFlightHooks';
@@ -177,6 +177,13 @@ function attemptResolveElement(
       'Refs cannot be used in server components, nor passed to client components.',
     );
   }
+
+  const moduleReference = getModuleReference(type);
+  if (moduleReference) {
+    // This is a reference to a client component.
+    return [REACT_ELEMENT_TYPE, moduleReference, key, props];
+  }
+
   if (typeof type === 'function') {
     // This is a server-side component.
     return type(props);
@@ -195,10 +202,6 @@ function attemptResolveElement(
     // Any built-in works as long as its props are serializable.
     return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
-    if (isModuleReference(type)) {
-      // This is a reference to a client component.
-      return [REACT_ELEMENT_TYPE, type, key, props];
-    }
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE: {
         const payload = type._payload;
@@ -534,48 +537,50 @@ export function resolveModelToJSON(
     return null;
   }
 
-  if (typeof value === 'object') {
-    if (isModuleReference(value)) {
-      const moduleReference: ModuleReference<any> = (value: any);
-      const moduleKey: ModuleKey = getModuleKey(moduleReference);
-      const writtenModules = request.writtenModules;
-      const existingId = writtenModules.get(moduleKey);
-      if (existingId !== undefined) {
-        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-          // If we're encoding the "type" of an element, we can refer
-          // to that by a lazy reference instead of directly since React
-          // knows how to deal with lazy values. This lets us suspend
-          // on this component rather than its parent until the code has
-          // loaded.
-          return serializeByRefID(existingId);
-        }
-        return serializeByValueID(existingId);
+  const moduleReference: ModuleReference<any> = getModuleReference(value);
+  if (moduleReference) {
+    const moduleKey: ModuleKey = getModuleKey(moduleReference);
+    const writtenModules = request.writtenModules;
+    const existingId = writtenModules.get(moduleKey);
+    if (existingId !== undefined) {
+      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+        // If we're encoding the "type" of an element, we can refer
+        // to that by a lazy reference instead of directly since React
+        // knows how to deal with lazy values. This lets us suspend
+        // on this component rather than its parent until the code has
+        // loaded.
+        return serializeByRefID(existingId);
       }
-      try {
-        const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
-          request.bundlerConfig,
-          moduleReference,
-        );
-        request.pendingChunks++;
-        const moduleId = request.nextChunkId++;
-        emitModuleChunk(request, moduleId, moduleMetaData);
-        writtenModules.set(moduleKey, moduleId);
-        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-          // If we're encoding the "type" of an element, we can refer
-          // to that by a lazy reference instead of directly since React
-          // knows how to deal with lazy values. This lets us suspend
-          // on this component rather than its parent until the code has
-          // loaded.
-          return serializeByRefID(moduleId);
-        }
-        return serializeByValueID(moduleId);
-      } catch (x) {
-        request.pendingChunks++;
-        const errorId = request.nextChunkId++;
-        emitErrorChunk(request, errorId, x);
-        return serializeByValueID(errorId);
+      return serializeByValueID(existingId);
+    }
+    try {
+      const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
+        request.bundlerConfig,
+        moduleReference,
+      );
+      request.pendingChunks++;
+      const moduleId = request.nextChunkId++;
+      emitModuleChunk(request, moduleId, moduleMetaData);
+      writtenModules.set(moduleKey, moduleId);
+      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+        // If we're encoding the "type" of an element, we can refer
+        // to that by a lazy reference instead of directly since React
+        // knows how to deal with lazy values. This lets us suspend
+        // on this component rather than its parent until the code has
+        // loaded.
+        return serializeByRefID(moduleId);
       }
-    } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
+      return serializeByValueID(moduleId);
+    } catch (x) {
+      request.pendingChunks++;
+      const errorId = request.nextChunkId++;
+      emitErrorChunk(request, errorId, x);
+      return serializeByValueID(errorId);
+    }
+  }
+
+  if (typeof value === 'object') {
+    if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
       const providerKey = ((value: any): ReactProviderType<any>)._context
         ._globalName;
       const writtenProviders = request.writtenProviders;
diff --git a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
index eba05dab334..dcd7acdbb4f 100644
--- a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
+++ b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
@@ -13,6 +13,6 @@ export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
 export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
 export opaque type ModuleKey: any = mixed; // eslint-disable-line no-undef
-export const isModuleReference = $$$hostConfig.isModuleReference;
+export const getModuleReference = $$$hostConfig.getModuleReference;
 export const getModuleKey = $$$hostConfig.getModuleKey;
 export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 1dc72761e03..b2bb548599e 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -82,7 +82,7 @@ jest.mock('react-server/flight', () => {
     jest.mock(shimServerStreamConfigPath, () => config);
     jest.mock(shimServerFormatConfigPath, () => config);
     jest.mock('react-server/src/ReactFlightServerBundlerConfigCustom', () => ({
-      isModuleReference: config.isModuleReference,
+      getModuleReference: config.getModuleReference,
       getModuleKey: config.getModuleKey,
       resolveModuleMetaData: config.resolveModuleMetaData,
     }));

From 615449e07cc7f599fe8bac73c2ac6b00a5ac494e Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 25 Mar 2022 18:33:44 +0900
Subject: [PATCH 33/87] Wrap every object and function export in proxies

---
 .../react-server-dom-vite/src/ClientProxy.js  | 107 +++++++++++-------
 .../src/ReactFlightServerViteBundlerConfig.js |   5 +-
 .../ReactFlightDOMClientProxy-test.js         |  81 +++++++++----
 3 files changed, 125 insertions(+), 68 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 80cd8a7f272..31b6bdf7a44 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -7,16 +7,12 @@
  * @flow
  */
 
-import {createElement} from 'react';
+import {useState} from 'react';
 
 declare var globalThis: any;
 // eslint-disable-next-line no-unused-vars
 /*global globalThis*/
 
-// This is a store of components discovered during RSC
-// to load them later when consuming the response in SSR.
-globalThis.__COMPONENT_INDEX = {};
-
 type ClientProxy = {
   id: string,
   name: string,
@@ -24,57 +20,82 @@ type ClientProxy = {
   component: mixed,
 };
 
-function isReactComponent(component: any, name: string, isNamed: boolean) {
-  if (!component) return false;
+// Store of components discovered during RSC to load
+// them later when consuming the response in SSR.
+globalThis.__COMPONENT_INDEX = {};
+
+export const MODULE_TAG = Symbol.for('react.module.reference');
+export const FN_RSC_ERROR =
+  'Functions exported from client components cannot be called or used as constructors from a server component.';
+
+// TODO what's a better way to detect Flight runtime?
+// const cacheType = () => new Map();
+export function isRsc() {
+  try {
+    useState();
+    return false;
+  } catch (e) {
+    return true;
+  }
+}
 
-  return (
-    (typeof component === 'function' && (!isNamed || /^[A-Z]/.test(name))) ||
-    typeof component.render === 'function' ||
-    component.$$typeof === Symbol.for('react.element')
+function createModuleReference(id, component, name, isNamed) {
+  const moduleRef = Object.create(null);
+  moduleRef.$$typeof = MODULE_TAG;
+  moduleRef.filepath = id;
+  moduleRef.name = isNamed ? name : 'default';
+
+  // Store component in a global index during RSC to use it later in SSR
+  globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
+    globalThis.__COMPONENT_INDEX[id] || Object.create(null),
+    moduleRef.name,
+    {value: component, writable: true},
   );
+
+  return moduleRef;
 }
 
 // A ClientProxy behaves as a module reference for the Flight
 // runtime (RSC) and as a real component for the Fizz runtime (SSR).
 // Note that this is not used in browser environments.
 export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
-  if (!isReactComponent(component, name, named)) {
-    // This is not a React component, do not wrap it.
+  const type = typeof component;
+
+  if (component === null || (type !== 'object' && type !== 'function')) {
     return component;
   }
 
-  const render = (props: any) => createElement(component, props);
-  Object.defineProperty(render, 'name', {value: name});
-
-  if (__DEV__) {
-    render.displayName = name;
+  if (component.$$typeof) {
+    // Make $$typeof configurable to bypass proxy invariance where
+    // it cannot return a different type from its original target.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get#invariants
+    component = Object.create(component, {
+      $$typeof: {
+        value: component.$$typeof,
+        configurable: true,
+      },
+    });
   }
 
-  // Fizz runtime accesses the `render` method directly when encountering a forward_ref
-  const componentRef = Object.create(null);
-  componentRef.$$typeof = Symbol.for('react.forward_ref');
-  componentRef.render = render;
-
-  // Flight runtime will check this custom typeof to decide wether this is a module ref
-  const moduleRef = Object.create(null);
-  moduleRef.$$typeof_rsc = Symbol.for('react.module.reference');
-  moduleRef.filepath = id;
-  moduleRef.name = named ? name : 'default';
+  const moduleRef = createModuleReference(id, component, name, named);
+  const get = (target, prop, receiver) =>
+    Reflect.get(isRsc() ? moduleRef : target, prop, receiver);
 
-  // Store component in a global index during RSC to use them later in SSR
-  globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
-    globalThis.__COMPONENT_INDEX[id] || Object.create(null),
-    moduleRef.name,
-    {value: component, writable: true},
+  return new Proxy(
+    component,
+    type === 'object'
+      ? {get}
+      : {
+          get,
+          apply() {
+            if (isRsc()) throw new Error(FN_RSC_ERROR + ` Calling "${name}".`);
+            return Reflect.apply(...arguments);
+          },
+          construct() {
+            if (isRsc())
+              throw new Error(FN_RSC_ERROR + ` Instantiating "${name}".`);
+            return Reflect.construct(...arguments);
+          },
+        },
   );
-
-  return new Proxy(componentRef, {
-    get: (target, prop) =>
-      // 1. Let React access the element/ref and type in SSR
-      (target: any)[prop] ||
-      // 2. Check module properties for RSC requests
-      (moduleRef: any)[prop] ||
-      // 3. Fallback to custom component properties such as `ImageComponent.Fragment`
-      (component: any)[prop],
-  });
 }
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index abc558a36b5..194152f2cf4 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -30,10 +30,7 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
 }
 
 export function getModuleReference(reference: any): Object | undefined {
-  return reference &&
-    (reference.$$typeof_rsc || reference.$$typeof) === MODULE_TAG
-    ? reference
-    : undefined;
+  return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
 }
 
 export function resolveModuleMetaData<T>(
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 04b76c02d84..c2ee61bb79c 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -15,6 +15,17 @@ let ClientProxy;
 const id = '/path/to/Counter.jsx';
 const name = 'Counter';
 
+jest.mock('react', () => {
+  const actualModule = jest.requireActual('react');
+  return {
+    ...actualModule,
+    useState: jest.fn(() => undefined),
+  };
+});
+
+const wrapInClientProxy = component =>
+  ClientProxy.wrapInClientProxy({id, name, named: false, component});
+
 describe('ReactFlightDOMClientProxy', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -22,32 +33,60 @@ describe('ReactFlightDOMClientProxy', () => {
     ClientProxy = require('../ClientProxy');
   });
 
-  it('should wrap client components in a proxy', async () => {
-    const result = ClientProxy.wrapInClientProxy({
-      id,
-      name,
-      named: false,
-      component: <div>MyCounter</div>,
-    });
+  it('does not affect the exports in non-RSC environments', () => {
+    React.useState.mockReturnValue(undefined);
+
+    const wrappedElement = wrapInClientProxy(<div>test</div>);
+    expect(wrappedElement).toHaveProperty(
+      '$$typeof',
+      Symbol.for('react.element'),
+    );
+
+    const wrappedComponent = wrapInClientProxy(() => <div>test</div>);
+    expect(typeof wrappedComponent).toEqual('function');
+    expect(wrappedComponent).not.toHaveProperty('$$typeof');
+
+    [(42, '42', null, undefined)].forEach(value =>
+      expect(wrapInClientProxy(value)).toEqual(value),
+    );
+  });
+
+  it('does not allow calling exported functions or reading properties in RSC', () => {
+    const myFn = () => true;
+    myFn.myProp = true;
 
-    expect(typeof result).toEqual('object');
-    expect(typeof result.render).toEqual('function');
-    expect(result.filepath).toEqual(id);
-    expect(result.name).toEqual('default');
+    React.useState.mockReturnValue(undefined);
+    const wrappedFnSsr = wrapInClientProxy(myFn);
+    expect(wrappedFnSsr.myProp).toEqual(true);
+    expect(wrappedFnSsr()).toEqual(true);
 
-    if (process.env.NODE_ENV !== 'production') {
-      expect(result.render.displayName).toEqual(name);
-    }
+    React.useState.mockImplementation(() => {
+      throw new Error('Not supported in RSC');
+    });
+    const wrappedFnRsc = wrapInClientProxy(myFn);
+    expect(wrappedFnRsc.myProp).toEqual(undefined);
+    expect(() => wrappedFnRsc()).toThrowError(ClientProxy.FN_RSC_ERROR);
+    expect(() => new wrappedFnRsc()).toThrowError(ClientProxy.FN_RSC_ERROR);
   });
 
-  it('should not wrap anything that is not a React component', () => {
-    const result = ClientProxy.wrapInClientProxy({
-      id,
-      name,
-      named: true,
-      component: '42',
+  it('wraps client components and elements in a proxy during RSC', async () => {
+    React.useState.mockImplementation(() => {
+      throw new Error('Not supported in RSC');
     });
 
-    expect(result).toEqual('42');
+    const wrappedElement = wrapInClientProxy(<div>MyCounter</div>);
+    expect(wrappedElement).toHaveProperty('$$typeof', ClientProxy.MODULE_TAG);
+
+    expect(typeof wrappedElement).toEqual('object');
+    expect(wrappedElement).toHaveProperty('filepath', id);
+    expect(wrappedElement).toHaveProperty('name', 'default');
+
+    const wrappedComponent = wrapInClientProxy(() => <div>MyCounter</div>);
+
+    expect(wrappedComponent).toHaveProperty('$$typeof', ClientProxy.MODULE_TAG);
+
+    expect(typeof wrappedComponent).toEqual('function');
+    expect(wrappedComponent).toHaveProperty('filepath', id);
+    expect(wrappedComponent).toHaveProperty('name', 'default');
   });
 });

From 8da486601b12e07f110aef24bdabdfc52c106e8e Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 25 Mar 2022 18:36:57 +0900
Subject: [PATCH 34/87] Register module reference for long strings globally

---
 .../react-server-dom-vite/src/ClientProxy.js  | 10 ++++++++++
 .../src/ReactFlightServerViteBundlerConfig.js |  4 ++++
 .../ReactFlightDOMClientProxy-test.js         | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 31b6bdf7a44..e3cd722ae4d 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -24,7 +24,12 @@ type ClientProxy = {
 // them later when consuming the response in SSR.
 globalThis.__COMPONENT_INDEX = {};
 
+// Store to get module references for long strings
+// when rendering in RSC (strings cannot be wrapped Proxy).
+globalThis.__STRING_REFERENCE_INDEX = {};
+
 export const MODULE_TAG = Symbol.for('react.module.reference');
+export const STRING_SIZE_LIMIT = 64;
 export const FN_RSC_ERROR =
   'Functions exported from client components cannot be called or used as constructors from a server component.';
 
@@ -62,6 +67,11 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
   const type = typeof component;
 
   if (component === null || (type !== 'object' && type !== 'function')) {
+    if (type === 'string' && component.length >= STRING_SIZE_LIMIT) {
+      const moduleRef = createModuleReference(id, component, name, named);
+      globalThis.__STRING_REFERENCE_INDEX[component] = moduleRef;
+    }
+
     return component;
   }
 
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index 194152f2cf4..59b3995fd96 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -30,6 +30,10 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
 }
 
 export function getModuleReference(reference: any): Object | undefined {
+  /*global globalThis*/
+  if (typeof reference === 'string')
+    return globalThis.__STRING_REFERENCE_INDEX[reference];
+
   return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
 }
 
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index c2ee61bb79c..9448f7e19a4 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -89,4 +89,23 @@ describe('ReactFlightDOMClientProxy', () => {
     expect(wrappedComponent).toHaveProperty('filepath', id);
     expect(wrappedComponent).toHaveProperty('name', 'default');
   });
+
+  it('registers module references for long strings globally', () => {
+    // eslint-disable-next-line no-unused-vars
+    /*global globalThis*/
+
+    const shortString = 'a'.repeat(ClientProxy.STRING_SIZE_LIMIT - 1);
+    const wrappedShortString = wrapInClientProxy(shortString);
+    expect(shortString).toEqual(wrappedShortString);
+    expect(globalThis.__STRING_REFERENCE_INDEX[shortString]).toEqual(undefined);
+
+    const longString = 'a'.repeat(ClientProxy.STRING_SIZE_LIMIT);
+    const wrappedLongString = wrapInClientProxy(longString);
+    expect(longString).toEqual(wrappedLongString);
+    expect(globalThis.__STRING_REFERENCE_INDEX[longString]).toMatchObject({
+      $$typeof: ClientProxy.MODULE_TAG,
+      filepath: id,
+      name: 'default',
+    });
+  });
 });

From c006f086c66d4791fff5eba337314a2d0bae7595 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 1 Apr 2022 18:31:24 +0900
Subject: [PATCH 35/87] Check error message in isRsc utility to fix forwardRefs

---
 packages/react-server-dom-vite/src/ClientProxy.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index e3cd722ae4d..4f80cbc6048 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -34,13 +34,12 @@ export const FN_RSC_ERROR =
   'Functions exported from client components cannot be called or used as constructors from a server component.';
 
 // TODO what's a better way to detect Flight runtime?
-// const cacheType = () => new Map();
 export function isRsc() {
   try {
     useState();
     return false;
-  } catch (e) {
-    return true;
+  } catch (error) {
+    return error.message.endsWith('Server Components.');
   }
 }
 

From 84933d3bbaab202a1ad7c726ca4a60d067ad7923 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 1 Apr 2022 18:46:44 +0900
Subject: [PATCH 36/87] Fix Flow and ESLint

---
 packages/react-noop-renderer/src/ReactNoopFlightServer.js     | 2 +-
 .../src/ReactFlightDOMRelayServerHostConfig.js                | 2 +-
 packages/react-server-dom-vite/src/ClientProxy.js             | 4 ++--
 .../src/ReactFlightServerViteBundlerConfig.js                 | 2 +-
 .../src/ReactFlightServerWebpackBundlerConfig.js              | 2 +-
 .../src/ReactFlightNativeRelayServerHostConfig.js             | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 1bbd2437880..af198b46c95 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -45,7 +45,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   stringToPrecomputedChunk(content: string): string {
     return content;
   },
-  getModuleReference(reference: any): Object | undefined {
+  getModuleReference(reference: any): ?Object {
     return reference &&
       reference.$$typeof === Symbol.for('react.module.reference')
       ? reference
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index c971c275a75..d1e9ab1f277 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -38,7 +38,7 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightDOMRelayServerIntegration';
 
-export function getModuleReference(reference: any): Object | undefined {
+export function getModuleReference(reference: any): ?Object {
   return reference instanceof JSResourceReference ? reference : undefined;
 }
 
diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 4f80cbc6048..d4cd09f2b73 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
+/* eslint-disable no-undef */
+
 import {useState} from 'react';
 
 declare var globalThis: any;
-// eslint-disable-next-line no-unused-vars
-/*global globalThis*/
 
 type ClientProxy = {
   id: string,
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index 59b3995fd96..e7d0c31899d 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -29,7 +29,7 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function getModuleReference(reference: any): Object | undefined {
+export function getModuleReference(reference: any): ?Object {
   /*global globalThis*/
   if (typeof reference === 'string')
     return globalThis.__STRING_REFERENCE_INDEX[reference];
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index d9ab2f5a798..9715765bd23 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -36,7 +36,7 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function getModuleReference(reference: any): Object | undefined {
+export function getModuleReference(reference: any): ?Object {
   return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
 }
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 35d65f60b13..803d056114b 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -35,7 +35,7 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightNativeRelayServerIntegration';
 
-export function getModuleReference(reference: any): Object | undefined {
+export function getModuleReference(reference: any): ?Object {
   return reference instanceof JSResourceReferenceImpl ? reference : undefined;
 }
 

From f96d2216a7537964d0d9c3dfc34d029a4aba4488 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 1 Apr 2022 18:47:36 +0900
Subject: [PATCH 37/87] Remove unnecessary test and code

---
 packages/react-server-dom-vite/src/ClientProxy.js   | 12 ------------
 .../src/__tests__/ReactFlightDOMClientProxy-test.js | 13 +++----------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index d4cd09f2b73..aa065c10ffc 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -74,18 +74,6 @@ export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
     return component;
   }
 
-  if (component.$$typeof) {
-    // Make $$typeof configurable to bypass proxy invariance where
-    // it cannot return a different type from its original target.
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get#invariants
-    component = Object.create(component, {
-      $$typeof: {
-        value: component.$$typeof,
-        configurable: true,
-      },
-    });
-  }
-
   const moduleRef = createModuleReference(id, component, name, named);
   const get = (target, prop, receiver) =>
     Reflect.get(isRsc() ? moduleRef : target, prop, receiver);
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 9448f7e19a4..94cf251779b 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -61,7 +61,7 @@ describe('ReactFlightDOMClientProxy', () => {
     expect(wrappedFnSsr()).toEqual(true);
 
     React.useState.mockImplementation(() => {
-      throw new Error('Not supported in RSC');
+      throw new Error('Not supported in Server Components.');
     });
     const wrappedFnRsc = wrapInClientProxy(myFn);
     expect(wrappedFnRsc.myProp).toEqual(undefined);
@@ -69,18 +69,11 @@ describe('ReactFlightDOMClientProxy', () => {
     expect(() => new wrappedFnRsc()).toThrowError(ClientProxy.FN_RSC_ERROR);
   });
 
-  it('wraps client components and elements in a proxy during RSC', async () => {
+  it('wraps client components in a proxy during RSC', async () => {
     React.useState.mockImplementation(() => {
-      throw new Error('Not supported in RSC');
+      throw new Error('Not supported in Server Components.');
     });
 
-    const wrappedElement = wrapInClientProxy(<div>MyCounter</div>);
-    expect(wrappedElement).toHaveProperty('$$typeof', ClientProxy.MODULE_TAG);
-
-    expect(typeof wrappedElement).toEqual('object');
-    expect(wrappedElement).toHaveProperty('filepath', id);
-    expect(wrappedElement).toHaveProperty('name', 'default');
-
     const wrappedComponent = wrapInClientProxy(() => <div>MyCounter</div>);
 
     expect(wrappedComponent).toHaveProperty('$$typeof', ClientProxy.MODULE_TAG);

From b772f2217efd6b1c89c354bdf18077517a9c9ee9 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 1 Apr 2022 23:15:53 +0900
Subject: [PATCH 38/87] Fix Flow and ESLint (one more try)

---
 packages/react-server-dom-vite/src/ClientProxy.js | 2 --
 packages/react-server/src/ReactFlightServer.js    | 2 +-
 scripts/rollup/validate/eslintrc.esm.js           | 3 +++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index aa065c10ffc..fdeadeccf18 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-/* eslint-disable no-undef */
-
 import {useState} from 'react';
 
 declare var globalThis: any;
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 2bbd0f5cf59..7d36db6c2c5 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -537,7 +537,7 @@ export function resolveModelToJSON(
     return null;
   }
 
-  const moduleReference: ModuleReference<any> = getModuleReference(value);
+  const moduleReference: ?ModuleReference<any> = getModuleReference(value);
   if (moduleReference) {
     const moduleKey: ModuleKey = getModuleKey(moduleReference);
     const writtenModules = request.writtenModules;
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index 23eb027071a..a95f0b4c39e 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -40,6 +40,9 @@ module.exports = {
     __webpack_chunk_load__: 'readonly',
     __webpack_require__: 'readonly',
 
+    // Flight Vite
+    globalThis: 'readonly',
+
     // jest
     expect: 'readonly',
     jest: 'readonly',

From 2ca81aa808d3625a7eb3aaf7dced0d163febdc23 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Sat, 2 Apr 2022 00:58:18 +0900
Subject: [PATCH 39/87] Fix Flow

---
 packages/react-server-dom-vite/src/ClientProxy.js              | 2 +-
 .../src/ReactFlightServerViteBundlerConfig.js                  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index fdeadeccf18..606649310c5 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -15,7 +15,7 @@ type ClientProxy = {
   id: string,
   name: string,
   named: boolean,
-  component: mixed,
+  component: any,
 };
 
 // Store of components discovered during RSC to load
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index e7d0c31899d..a1765e07210 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+declare var globalThis: any;
+
 export type BundlerConfig = {};
 
 // eslint-disable-next-line no-unused-vars
@@ -30,7 +32,6 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
 }
 
 export function getModuleReference(reference: any): ?Object {
-  /*global globalThis*/
   if (typeof reference === 'string')
     return globalThis.__STRING_REFERENCE_INDEX[reference];
 

From b7350b8d7c8920439ce461e9e60fac833c0f790b Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Sat, 2 Apr 2022 01:35:35 +0900
Subject: [PATCH 40/87] Rename variables

---
 .../react-server-dom-vite/src/ClientProxy.js  | 28 +++++++++----------
 .../src/ReactFlightVitePlugin.js              |  4 +--
 .../src/__tests__/ReactFlightDOM-test.js      |  4 +--
 .../__tests__/ReactFlightDOMBrowser-test.js   |  4 +--
 .../ReactFlightDOMClientProxy-test.js         |  4 +--
 .../ReactFlightDOMVitePlugin-test.js          | 10 +++----
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 606649310c5..899fd83b9d5 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -14,8 +14,8 @@ declare var globalThis: any;
 type ClientProxy = {
   id: string,
   name: string,
-  named: boolean,
-  component: any,
+  isDefault: boolean,
+  value: any,
 };
 
 // Store of components discovered during RSC to load
@@ -41,17 +41,17 @@ export function isRsc() {
   }
 }
 
-function createModuleReference(id, component, name, isNamed) {
+function createModuleReference(id, value, name, isDefault) {
   const moduleRef = Object.create(null);
   moduleRef.$$typeof = MODULE_TAG;
   moduleRef.filepath = id;
-  moduleRef.name = isNamed ? name : 'default';
+  moduleRef.name = isDefault ? 'default' : name;
 
   // Store component in a global index during RSC to use it later in SSR
   globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
     globalThis.__COMPONENT_INDEX[id] || Object.create(null),
     moduleRef.name,
-    {value: component, writable: true},
+    {value, writable: true},
   );
 
   return moduleRef;
@@ -60,24 +60,24 @@ function createModuleReference(id, component, name, isNamed) {
 // A ClientProxy behaves as a module reference for the Flight
 // runtime (RSC) and as a real component for the Fizz runtime (SSR).
 // Note that this is not used in browser environments.
-export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
-  const type = typeof component;
+export function wrapInClientProxy({id, name, isDefault, value}: ClientProxy) {
+  const type = typeof value;
 
-  if (component === null || (type !== 'object' && type !== 'function')) {
-    if (type === 'string' && component.length >= STRING_SIZE_LIMIT) {
-      const moduleRef = createModuleReference(id, component, name, named);
-      globalThis.__STRING_REFERENCE_INDEX[component] = moduleRef;
+  if (value === null || (type !== 'object' && type !== 'function')) {
+    if (type === 'string' && value.length >= STRING_SIZE_LIMIT) {
+      const moduleRef = createModuleReference(id, value, name, isDefault);
+      globalThis.__STRING_REFERENCE_INDEX[value] = moduleRef;
     }
 
-    return component;
+    return value;
   }
 
-  const moduleRef = createModuleReference(id, component, name, named);
+  const moduleRef = createModuleReference(id, value, name, isDefault);
   const get = (target, prop, receiver) =>
     Reflect.get(isRsc() ? moduleRef : target, prop, receiver);
 
   return new Proxy(
-    component,
+    value,
     type === 'object'
       ? {get}
       : {
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index e0b1d678888..e81c8e0afae 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -197,9 +197,9 @@ export async function proxyClientComponent(filepath: string, src?: string) {
       isDefault ? DEFAULT_EXPORT : `const ${componentName} =`
     } wrapInClientProxy({ name: '${componentName}', id: '${getComponentId(
       filepath,
-    )}', component: allImports['${key}'], named: ${
+    )}', value: allImports['${key}'], isDefault: ${
       // eslint-disable-next-line react-internal/safe-string-coercion
-      String(!isDefault)
+      String(isDefault)
     } });\n`;
   });
 
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index 2aae86f1a98..a6585fc2338 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -70,10 +70,10 @@ describe('ReactFlightDOM', () => {
       });
 
     return ClientProxy.wrapInClientProxy({
-      component: moduleExport,
+      value: moduleExport,
       id: idx,
       name: moduleExport.name || 'MyComponent',
-      named: false,
+      isDefault: true,
     });
   }
 
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 2b29542535c..3d048efaa41 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -48,10 +48,10 @@ describe('ReactFlightDOMBrowser', () => {
       });
 
     return ClientProxy.wrapInClientProxy({
-      component: moduleExport,
+      value: moduleExport,
       id: idx,
       name: moduleExport.name || 'MyComponent',
-      named: false,
+      isDefault: true,
     });
   }
 
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 94cf251779b..18d20f340e7 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -23,8 +23,8 @@ jest.mock('react', () => {
   };
 });
 
-const wrapInClientProxy = component =>
-  ClientProxy.wrapInClientProxy({id, name, named: false, component});
+const wrapInClientProxy = value =>
+  ClientProxy.wrapInClientProxy({id, name, isDefault: true, value});
 
 describe('ReactFlightDOMClientProxy', () => {
   beforeEach(() => {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index 3d5c4da8ae1..244505cbc69 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -31,7 +31,7 @@ import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
 export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
-    )}', component: allImports['default'], named: false });
+    )}', value: allImports['default'], isDefault: true });
 `);
   });
 
@@ -47,10 +47,10 @@ import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
 export const Counter = wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
-    )}', component: allImports['Counter'], named: true });
+    )}', value: allImports['Counter'], isDefault: false });
 export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
-    )}', component: allImports['Clicker'], named: true });
+    )}', value: allImports['Clicker'], isDefault: false });
 `);
   });
 
@@ -66,10 +66,10 @@ import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
 export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
-    )}', component: allImports['default'], named: false });
+    )}', value: allImports['default'], isDefault: true });
 export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
-    )}', component: allImports['Clicker'], named: true });
+    )}', value: allImports['Clicker'], isDefault: false });
 `);
   });
 });

From db797896ab490350f315bd9aa5c9cda2d5c0903e Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 7 Apr 2022 21:29:26 +0200
Subject: [PATCH 41/87] Fix absolute path for hashes

---
 .../src/ReactFlightVitePlugin.js              | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index e81c8e0afae..2f1ef1e9232 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -102,36 +102,25 @@ export default function ReactFlightVitePlugin({
         const importerToRootPath = normalizePath(
           path.relative(importerPath, config.root),
         );
-        const [importerToRootNested] =
-          importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [];
-
-        const userPrefix = path.normalize(
-          path.join(
-            importerPath,
-            importerToRootNested.replace(/\/?$/, path.sep),
-          ),
-        );
+
         const userGlob = path.join(importerToRootPath, CLIENT_COMPONENT_GLOB);
 
-        const importers = [[userGlob, userPrefix]];
+        const importers = [userGlob];
 
         clientComponentPaths.forEach(componentPath => {
-          const libPrefix = componentPath + path.sep;
-          const libGlob = path.join(
-            path.relative(importerPath, componentPath),
-            CLIENT_COMPONENT_GLOB,
+          importers.push(
+            path.join(
+              path.relative(importerPath, componentPath),
+              CLIENT_COMPONENT_GLOB,
+            ),
           );
-
-          importers.push([libGlob, libPrefix]);
         });
 
         const injectedGlobs = `Object.assign(Object.create(null), ${importers
           .map(
-            ([glob, prefix]) =>
+            glob =>
               // Mark the globs to modify the result after Vite resolves them.
-              // The prefix is used later to turn relative imports
-              // into absolute imports, and then into hashes.
-              `/* HASH_BEGIN ${normalizePath(prefix)} */ ` +
+              `/* HASH_BEGIN */ ` +
               `import.meta.glob('${normalizePath(glob)}') /* HASH_END */`,
           )
           .join(', ')});`;
@@ -212,15 +201,17 @@ const hashImportsPlugin = {
   transform(code: string, id: string) {
     // Turn relative import paths to lossy hashes
     if (rscViteFileRE.test(id)) {
-      const nestedRE = /\.\.\//gm;
-
       return code.replace(
-        /\/\*\s*HASH_BEGIN\s*(.+?)\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm,
-        function(_, prefix, imports) {
+        /\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm,
+        function(_, imports) {
           return imports
             .trim()
             .replace(/"([^"]+?)":/gm, function(__, relativePath) {
-              const absolutePath = prefix + relativePath.replace(nestedRE, '');
+              const absolutePath = path.resolve(
+                path.dirname(id.split('?')[0]),
+                relativePath,
+              );
+
               return `"${getComponentId(absolutePath)}":`;
             });
         },

From 3eaadde66750369b9164d0270e03938132dd5cb8 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 8 Apr 2022 12:58:56 +0200
Subject: [PATCH 42/87] Fix absolute path in Windows

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 2f1ef1e9232..3a70df928d0 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -212,7 +212,7 @@ const hashImportsPlugin = {
                 relativePath,
               );
 
-              return `"${getComponentId(absolutePath)}":`;
+              return `"${getComponentId(normalizePath(absolutePath))}":`;
             });
         },
       );

From a4609acbd2e6588339a5eee94d0b4d367e5d3f45 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 8 Apr 2022 15:18:10 +0200
Subject: [PATCH 43/87] Do not return moduleReference for strings in
 attemptResolveElement

---
 packages/react-server/src/ReactFlightServer.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 7d36db6c2c5..5f0a3274ba3 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -178,10 +178,9 @@ function attemptResolveElement(
     );
   }
 
-  const moduleReference = getModuleReference(type);
-  if (moduleReference) {
+  if (getModuleReference(type)) {
     // This is a reference to a client component.
-    return [REACT_ELEMENT_TYPE, moduleReference, key, props];
+    return [REACT_ELEMENT_TYPE, type, key, props];
   }
 
   if (typeof type === 'function') {

From bb2397be621c398f50bebcac900ee7f3712b596f Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 14 Apr 2022 15:18:04 +0200
Subject: [PATCH 44/87] Improve client component discovery

---
 .../src/ReactFlightVitePlugin.js              | 81 ++++++++++++++-----
 1 file changed, 60 insertions(+), 21 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 3a70df928d0..c5164c0536e 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -16,32 +16,68 @@ import {promises as fs} from 'fs';
 import path from 'path';
 
 type PluginOptions = {
-  clientComponentPaths?: string[],
   isServerComponentImporterAllowed?: (
     importer: string,
     source: string,
   ) => boolean,
+  findClientComponentsForDev?: (
+    config: any,
+    server: any,
+  ) => string[] | Promise<string[]>,
+  findClientComponentsForClientBuild?: (
+    config: any,
+  ) => string[] | Promise<string[]>,
+  isClientComponent?: (id: string) => boolean,
 };
 
 const rscViteFileRE = /\/react-server-dom-vite.js/;
 
 export default function ReactFlightVitePlugin({
-  clientComponentPaths = [],
   isServerComponentImporterAllowed = importer => false,
+  isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id),
+  findClientComponentsForDev,
+  findClientComponentsForClientBuild,
 }: PluginOptions = {}) {
   let config;
+  let server;
+  let timeout;
+  let absoluteImporterPath;
+  let discoveredClientComponents = [];
+
+  if (!findClientComponentsForDev) {
+    findClientComponentsForDev = () =>
+      Array.from(server.moduleGraph.fileToModulesMap.keys()).filter(
+        isClientComponent,
+      );
+  }
 
   return {
     name: 'vite-plugin-react-server-components',
 
     enforce: 'pre',
 
-    configResolved(_config: any) {
+    configureServer(_server) {
+      server = _server;
+    },
+
+    async configResolved(_config: any) {
       config = _config;
 
       // By pushing this plugin at the end of the existing array,
       // we enforce running it *after* Vite resolves import.meta.glob.
       config.plugins.push(hashImportsPlugin);
+
+      if (config.command === 'build' && !config.build.ssr) {
+        if (findClientComponentsForClientBuild) {
+          discoveredClientComponents = await findClientComponentsForClientBuild(
+            config,
+          );
+        } else {
+          throw new Error(
+            '[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build',
+          );
+        }
+      }
     },
 
     async resolveId(source: string, importer: string) {
@@ -70,7 +106,24 @@ export default function ReactFlightVitePlugin({
       if (!options.ssr) return null;
 
       // Wrapped components won't match this becase they end in ?no-proxy
-      if (/\.client\.[jt]sx?$/.test(id)) {
+      if (isClientComponent(id) && !/[&?]no-proxy($|&)/.test(id)) {
+        if (config.command === 'serve') {
+          // Refresh the list of discovered client components
+          // every time a new one is processed.
+          clearTimeout(timeout);
+          timeout = setTimeout(async () => {
+            discoveredClientComponents = findClientComponentsForDev
+              ? await findClientComponentsForDev(config, server)
+              : [];
+
+            if (absoluteImporterPath) {
+              // Signal Vite that this file needs to be
+              // refreshed in both server and browser.
+              server.watcher.emit('change', absoluteImporterPath);
+            }
+          }, 100);
+        }
+
         return proxyClientComponent(id);
       }
 
@@ -89,6 +142,7 @@ export default function ReactFlightVitePlugin({
        */
       if (rscViteFileRE.test(id)) {
         const INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
+        absoluteImporterPath = id.split('?')[0];
 
         if (options && options.ssr) {
           // In SSR, directly use components already discovered by RSC
@@ -96,26 +150,11 @@ export default function ReactFlightVitePlugin({
           return code.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
         }
 
-        const CLIENT_COMPONENT_GLOB = '**/*.client.[jt]s?(x)';
-
         const importerPath = path.dirname(id);
-        const importerToRootPath = normalizePath(
-          path.relative(importerPath, config.root),
+        const importers = discoveredClientComponents.map(absolutePath =>
+          normalizePath(path.relative(importerPath, absolutePath)),
         );
 
-        const userGlob = path.join(importerToRootPath, CLIENT_COMPONENT_GLOB);
-
-        const importers = [userGlob];
-
-        clientComponentPaths.forEach(componentPath => {
-          importers.push(
-            path.join(
-              path.relative(importerPath, componentPath),
-              CLIENT_COMPONENT_GLOB,
-            ),
-          );
-        });
-
         const injectedGlobs = `Object.assign(Object.create(null), ${importers
           .map(
             glob =>

From da787c27ac24c2433a920fec31ba300e5c017cf5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 14 Apr 2022 15:37:54 +0200
Subject: [PATCH 45/87] Fix flow

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index c5164c0536e..5e9243e8117 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -56,7 +56,7 @@ export default function ReactFlightVitePlugin({
 
     enforce: 'pre',
 
-    configureServer(_server) {
+    configureServer(_server: any) {
       server = _server;
     },
 

From 902e7a845d18cd6f2472c3c891174517dcb3fdfc Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 15 Apr 2022 19:07:56 +0200
Subject: [PATCH 46/87] Fix importer HMR, make hooks synchronous and change
 parameters

---
 .../src/ReactFlightVitePlugin.js              | 156 ++++++++++--------
 1 file changed, 85 insertions(+), 71 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 5e9243e8117..ca565de56e6 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -20,14 +20,10 @@ type PluginOptions = {
     importer: string,
     source: string,
   ) => boolean,
-  findClientComponentsForDev?: (
-    config: any,
-    server: any,
-  ) => string[] | Promise<string[]>,
   findClientComponentsForClientBuild?: (
     config: any,
   ) => string[] | Promise<string[]>,
-  isClientComponent?: (id: string) => boolean,
+  isClientComponent?: (id: string) => boolean | Promise<boolean>,
 };
 
 const rscViteFileRE = /\/react-server-dom-vite.js/;
@@ -35,52 +31,57 @@ const rscViteFileRE = /\/react-server-dom-vite.js/;
 export default function ReactFlightVitePlugin({
   isServerComponentImporterAllowed = importer => false,
   isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id),
-  findClientComponentsForDev,
   findClientComponentsForClientBuild,
 }: PluginOptions = {}) {
   let config;
   let server;
-  let timeout;
+  let invalidateTimeout;
   let absoluteImporterPath;
-  let discoveredClientComponents = [];
 
-  if (!findClientComponentsForDev) {
-    findClientComponentsForDev = () =>
-      Array.from(server.moduleGraph.fileToModulesMap.keys()).filter(
-        isClientComponent,
-      );
+  function invalidateImporter() {
+    clearTimeout(invalidateTimeout);
+    invalidateTimeout = setTimeout(
+      () => server.watcher.emit('change', absoluteImporterPath),
+      100,
+    );
+  }
+
+  function wrapIfClientComponent(id: string) {
+    const handle = (isClient: boolean) => {
+      if (!isClient) return null;
+
+      if (server) {
+        const moduleNode = server.moduleGraph.getModuleById(id);
+        if (!moduleNode.__isClientComponent) {
+          moduleNode.__isClientComponent = true;
+          if (absoluteImporterPath) invalidateImporter();
+        }
+      }
+
+      return proxyClientComponent(id.split('?')[0]);
+    };
+
+    const tmp = isClientComponent(id);
+    return typeof tmp === 'boolean' ? handle(tmp) : tmp.then(handle);
   }
 
   return {
     name: 'vite-plugin-react-server-components',
-
     enforce: 'pre',
 
     configureServer(_server: any) {
       server = _server;
     },
 
-    async configResolved(_config: any) {
+    configResolved(_config: any) {
       config = _config;
 
       // By pushing this plugin at the end of the existing array,
       // we enforce running it *after* Vite resolves import.meta.glob.
       config.plugins.push(hashImportsPlugin);
-
-      if (config.command === 'build' && !config.build.ssr) {
-        if (findClientComponentsForClientBuild) {
-          discoveredClientComponents = await findClientComponentsForClientBuild(
-            config,
-          );
-        } else {
-          throw new Error(
-            '[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build',
-          );
-        }
-      }
     },
 
-    async resolveId(source: string, importer: string) {
+    resolveId(source: string, importer: string) {
       if (!importer) return null;
 
       /**
@@ -89,9 +90,8 @@ export default function ReactFlightVitePlugin({
       if (
         /\.server(\.[jt]sx?)?$/.test(source) &&
         !(
-          /(\.server\.[jt]sx?|entry-server\.[jt]sx?|index\.html)$/.test(
-            importer,
-          ) || isServerComponentImporterAllowed(importer, source)
+          /(\.server\.[jt]sx?|index\.html)$/.test(importer) ||
+          isServerComponentImporterAllowed(importer, source)
         )
       ) {
         throw new Error(
@@ -102,32 +102,10 @@ export default function ReactFlightVitePlugin({
       }
     },
 
-    async load(id: string, options: {ssr?: boolean} = {}) {
-      if (!options.ssr) return null;
-
-      // Wrapped components won't match this becase they end in ?no-proxy
-      if (isClientComponent(id) && !/[&?]no-proxy($|&)/.test(id)) {
-        if (config.command === 'serve') {
-          // Refresh the list of discovered client components
-          // every time a new one is processed.
-          clearTimeout(timeout);
-          timeout = setTimeout(async () => {
-            discoveredClientComponents = findClientComponentsForDev
-              ? await findClientComponentsForDev(config, server)
-              : [];
-
-            if (absoluteImporterPath) {
-              // Signal Vite that this file needs to be
-              // refreshed in both server and browser.
-              server.watcher.emit('change', absoluteImporterPath);
-            }
-          }, 100);
-        }
-
-        return proxyClientComponent(id);
-      }
-
-      return null;
+    load(id: string, options: {ssr?: boolean} = {}) {
+      return options.ssr && shouldCheckClientComponent(id)
+        ? wrapIfClientComponent(id)
+        : null;
     },
 
     transform(code: string, id: string, options: {ssr?: boolean} = {}) {
@@ -142,7 +120,6 @@ export default function ReactFlightVitePlugin({
        */
       if (rscViteFileRE.test(id)) {
         const INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
-        absoluteImporterPath = id.split('?')[0];
 
         if (options && options.ssr) {
           // In SSR, directly use components already discovered by RSC
@@ -150,21 +127,36 @@ export default function ReactFlightVitePlugin({
           return code.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
         }
 
-        const importerPath = path.dirname(id);
-        const importers = discoveredClientComponents.map(absolutePath =>
-          normalizePath(path.relative(importerPath, absolutePath)),
-        );
+        const injectGlobs = (clientComponents: string[]) => {
+          const importerPath = path.dirname(id);
+          const importers = clientComponents.map(absolutePath =>
+            normalizePath(path.relative(importerPath, absolutePath)),
+          );
+
+          const injectedGlobs = `Object.assign(Object.create(null), ${importers
+            .map(
+              glob =>
+                // Mark the globs to modify the result after Vite resolves them.
+                `/* HASH_BEGIN */ ` +
+                `import.meta.glob('${normalizePath(glob)}') /* HASH_END */`,
+            )
+            .join(', ')});`;
+
+          return code.replace(INJECTING_RE, injectedGlobs);
+        };
 
-        const injectedGlobs = `Object.assign(Object.create(null), ${importers
-          .map(
-            glob =>
-              // Mark the globs to modify the result after Vite resolves them.
-              `/* HASH_BEGIN */ ` +
-              `import.meta.glob('${normalizePath(glob)}') /* HASH_END */`,
-          )
-          .join(', ')});`;
+        if (config.command === 'serve') {
+          absoluteImporterPath = id.split('?')[0];
+          return injectGlobs(findClientComponentsForDev(server));
+        }
+
+        if (!findClientComponentsForClientBuild) {
+          throw new Error(
+            '[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build',
+          );
+        }
 
-        return code.replace(INJECTING_RE, injectedGlobs);
+        return findClientComponentsForClientBuild(config).then(injectGlobs);
       }
     },
   };
@@ -234,6 +226,25 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   return proxyCode;
 }
 
+function shouldCheckClientComponent(id: string) {
+  return /\.[jt]sx?($|\?)/.test(id) && !/[&?]no-proxy($|&)/.test(id);
+}
+
+function findClientComponentsForDev(server: any) {
+  const clientComponents = [];
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const set of server.moduleGraph.fileToModulesMap.values()) {
+    const clientModule = Array.from(set).find(
+      moduleNode => moduleNode.__isClientComponent,
+    );
+
+    if (clientModule) clientComponents.push(clientModule.file);
+  }
+
+  return clientComponents;
+}
+
 const hashImportsPlugin = {
   name: 'vite-plugin-react-server-components-hash-imports',
   enforce: 'post',
@@ -258,3 +269,6 @@ const hashImportsPlugin = {
     }
   },
 };
+
+// This can be used in custom findClientComponentsForClientBuild implementations
+ReactFlightVitePlugin.findClientComponentsFromServer = findClientComponentsForDev;

From 465af3eb6e3414b442846c4501bed7d29235bb43 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 15 Apr 2022 19:39:50 +0200
Subject: [PATCH 47/87] Fix sync function call

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index ca565de56e6..569479bdc71 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -156,7 +156,8 @@ export default function ReactFlightVitePlugin({
           );
         }
 
-        return findClientComponentsForClientBuild(config).then(injectGlobs);
+        const tmp = findClientComponentsForClientBuild(config);
+        return Array.isArray(tmp) ? injectGlobs(tmp) : tmp.then(injectGlobs);
       }
     },
   };

From 8d2bbbd6d8f98c6b645ea87c222663ed4fadf171 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 18 Apr 2022 18:31:12 +0200
Subject: [PATCH 48/87] Add special proxy getters for extending behavior

---
 packages/react-server-dom-vite/src/ClientProxy.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 899fd83b9d5..0ae510c0a1c 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -73,8 +73,12 @@ export function wrapInClientProxy({id, name, isDefault, value}: ClientProxy) {
   }
 
   const moduleRef = createModuleReference(id, value, name, isDefault);
-  const get = (target, prop, receiver) =>
-    Reflect.get(isRsc() ? moduleRef : target, prop, receiver);
+  const get = (target, prop, receiver) => {
+    if (prop === '$$unwrappedValue') return value;
+    if (prop === '$$moduleReference') return moduleRef;
+
+    return Reflect.get(isRsc() ? moduleRef : target, prop, receiver);
+  };
 
   return new Proxy(
     value,

From 5f0a159e6668ebc79a1d3604313f0800903b597e Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 9 May 2022 23:51:02 +0900
Subject: [PATCH 49/87] Add flight-vite fixture

---
 fixtures/flight-vite/.env                    |    1 +
 fixtures/flight-vite/.gitignore              |   25 +
 fixtures/flight-vite/index.html              |   12 +
 fixtures/flight-vite/package.json            |   47 +
 fixtures/flight-vite/public/.gitkeep         |    0
 fixtures/flight-vite/server/api.js           |   22 +
 fixtures/flight-vite/server/index.server.js  |   39 +
 fixtures/flight-vite/server/package.json     |    4 +
 fixtures/flight-vite/server/rsc.server.js    |    9 +
 fixtures/flight-vite/src/App.server.jsx      |   28 +
 fixtures/flight-vite/src/Container.jsx       |    5 +
 fixtures/flight-vite/src/Counter.client.jsx  |   12 +
 fixtures/flight-vite/src/Counter2.client.jsx |    3 +
 fixtures/flight-vite/src/ShowMore.client.jsx |   11 +
 fixtures/flight-vite/src/index.jsx           |   16 +
 fixtures/flight-vite/vite.config.js          |   64 +
 fixtures/flight-vite/yarn.lock               | 2700 ++++++++++++++++++
 17 files changed, 2998 insertions(+)
 create mode 100644 fixtures/flight-vite/.env
 create mode 100644 fixtures/flight-vite/.gitignore
 create mode 100644 fixtures/flight-vite/index.html
 create mode 100644 fixtures/flight-vite/package.json
 create mode 100644 fixtures/flight-vite/public/.gitkeep
 create mode 100644 fixtures/flight-vite/server/api.js
 create mode 100644 fixtures/flight-vite/server/index.server.js
 create mode 100644 fixtures/flight-vite/server/package.json
 create mode 100644 fixtures/flight-vite/server/rsc.server.js
 create mode 100644 fixtures/flight-vite/src/App.server.jsx
 create mode 100644 fixtures/flight-vite/src/Container.jsx
 create mode 100644 fixtures/flight-vite/src/Counter.client.jsx
 create mode 100644 fixtures/flight-vite/src/Counter2.client.jsx
 create mode 100644 fixtures/flight-vite/src/ShowMore.client.jsx
 create mode 100644 fixtures/flight-vite/src/index.jsx
 create mode 100644 fixtures/flight-vite/vite.config.js
 create mode 100644 fixtures/flight-vite/yarn.lock

diff --git a/fixtures/flight-vite/.env b/fixtures/flight-vite/.env
new file mode 100644
index 00000000000..7d910f1484c
--- /dev/null
+++ b/fixtures/flight-vite/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/fixtures/flight-vite/.gitignore b/fixtures/flight-vite/.gitignore
new file mode 100644
index 00000000000..0852d35565e
--- /dev/null
+++ b/fixtures/flight-vite/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+.eslintcache
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/fixtures/flight-vite/index.html b/fixtures/flight-vite/index.html
new file mode 100644
index 00000000000..77438023ae0
--- /dev/null
+++ b/fixtures/flight-vite/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Flight</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/fixtures/flight-vite/package.json b/fixtures/flight-vite/package.json
new file mode 100644
index 00000000000..74b0ac864e3
--- /dev/null
+++ b/fixtures/flight-vite/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "flight-vite",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
+    "@vitejs/plugin-react": "^1.3.2",
+    "eslint": "^7.11.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-testing-library": "^3.9.2",
+    "express": "^4.17.1",
+    "sass-loader": "8.0.2",
+    "vite": "^2.9.8"
+  },
+  "scripts": {
+    "prestart": "cp -r ../../build/node_modules/* ./node_modules/",
+    "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
+    "start": "vite",
+    "start:prod": "node dist/server",
+    "build": "yarn build:client && yarn build:server",
+    "build:client": "vite build --outDir dist/client --manifest ",
+    "build:server": "vite build --outDir dist/server --ssr ./server && sed -e 's/module/commonjs/' server/package.json > dist/server/package.json"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/fixtures/flight-vite/public/.gitkeep b/fixtures/flight-vite/public/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/fixtures/flight-vite/server/api.js b/fixtures/flight-vite/server/api.js
new file mode 100644
index 00000000000..29178169a3a
--- /dev/null
+++ b/fixtures/flight-vite/server/api.js
@@ -0,0 +1,22 @@
+export default [
+  {
+    route: '/todos',
+    method: 'GET',
+    handler(req, res) {
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      res.setHeader('Content-Type', 'application/json');
+      res.end(
+        JSON.stringify([
+          {
+            id: 1,
+            text: 'Shave yaks',
+          },
+          {
+            id: 2,
+            text: 'Eat kale',
+          },
+        ])
+      );
+    },
+  },
+];
diff --git a/fixtures/flight-vite/server/index.server.js b/fixtures/flight-vite/server/index.server.js
new file mode 100644
index 00000000000..8ef78264869
--- /dev/null
+++ b/fixtures/flight-vite/server/index.server.js
@@ -0,0 +1,39 @@
+import express from 'express';
+import apiRoutes from './api';
+import handleRSC from './rsc.server.js';
+import path from 'path';
+
+const app = express();
+
+app.use(express.static(path.resolve(process.cwd(), 'dist/client')));
+
+apiRoutes.forEach(({route, handler, method}) =>
+  app[method.toLowerCase()](route, handler)
+);
+
+app.get('/__react', handleRSC);
+
+app.listen(3000, () => {
+  console.log('Flight Server listening on port 3000...');
+});
+
+app.on('error', function(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/fixtures/flight-vite/server/package.json b/fixtures/flight-vite/server/package.json
new file mode 100644
index 00000000000..21dacb0b213
--- /dev/null
+++ b/fixtures/flight-vite/server/package.json
@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "main": "./index.server.js"
+}
diff --git a/fixtures/flight-vite/server/rsc.server.js b/fixtures/flight-vite/server/rsc.server.js
new file mode 100644
index 00000000000..516a1b579ab
--- /dev/null
+++ b/fixtures/flight-vite/server/rsc.server.js
@@ -0,0 +1,9 @@
+import {renderToPipeableStream} from 'react-server-dom-vite/writer';
+import React from 'react';
+import App from '../src/App.server.jsx';
+
+export default function(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  const {pipe} = renderToPipeableStream(React.createElement(App));
+  pipe(res);
+}
diff --git a/fixtures/flight-vite/src/App.server.jsx b/fixtures/flight-vite/src/App.server.jsx
new file mode 100644
index 00000000000..b189aef6c4d
--- /dev/null
+++ b/fixtures/flight-vite/src/App.server.jsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {fetch} from 'react-fetch';
+
+import Container from './Container';
+
+import {Counter} from './Counter.client';
+import {Counter as Counter2} from './Counter2.client';
+
+import ShowMore from './ShowMore.client';
+
+export default function App() {
+  const todos = fetch('http://localhost:3000/todos').json();
+  return (
+    <Container>
+      <h1>Hello, world</h1>
+      <Counter />
+      <Counter2 />
+      <ul>
+        {todos.map(todo => (
+          <li key={todo.id}>{todo.text}</li>
+        ))}
+      </ul>
+      <ShowMore>
+        <p>Lorem ipsum</p>
+      </ShowMore>
+    </Container>
+  );
+}
diff --git a/fixtures/flight-vite/src/Container.jsx b/fixtures/flight-vite/src/Container.jsx
new file mode 100644
index 00000000000..49875403c8c
--- /dev/null
+++ b/fixtures/flight-vite/src/Container.jsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function Container({children}) {
+  return <div>{children}</div>;
+}
diff --git a/fixtures/flight-vite/src/Counter.client.jsx b/fixtures/flight-vite/src/Counter.client.jsx
new file mode 100644
index 00000000000..e68a2f73e3a
--- /dev/null
+++ b/fixtures/flight-vite/src/Counter.client.jsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import Container from './Container';
+
+export function Counter() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <Container>
+      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+    </Container>
+  );
+}
diff --git a/fixtures/flight-vite/src/Counter2.client.jsx b/fixtures/flight-vite/src/Counter2.client.jsx
new file mode 100644
index 00000000000..017e0331cb5
--- /dev/null
+++ b/fixtures/flight-vite/src/Counter2.client.jsx
@@ -0,0 +1,3 @@
+// TODO support export * from xyz
+import {Counter as _Counter} from './Counter.client';
+export const Counter = _Counter;
diff --git a/fixtures/flight-vite/src/ShowMore.client.jsx b/fixtures/flight-vite/src/ShowMore.client.jsx
new file mode 100644
index 00000000000..d8ff151725e
--- /dev/null
+++ b/fixtures/flight-vite/src/ShowMore.client.jsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import Container from './Container';
+
+export default function ShowMore({children}) {
+  const [show, setShow] = React.useState(false);
+  if (!show) {
+    return <button onClick={() => setShow(true)}>Show More</button>;
+  }
+  return <Container>{children}</Container>;
+}
diff --git a/fixtures/flight-vite/src/index.jsx b/fixtures/flight-vite/src/index.jsx
new file mode 100644
index 00000000000..cf9d9b57a5d
--- /dev/null
+++ b/fixtures/flight-vite/src/index.jsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {Suspense} from 'react';
+import {createRoot} from 'react-dom/client';
+import {createFromFetch} from 'react-server-dom-vite';
+
+let data = createFromFetch(fetch('http://localhost:3000/__react'));
+
+function Content() {
+  return data.readRoot();
+}
+
+createRoot(document.getElementById('root')).render(
+  <Suspense fallback={<h1>Loading...</h1>}>
+    <Content />
+  </Suspense>
+);
diff --git a/fixtures/flight-vite/vite.config.js b/fixtures/flight-vite/vite.config.js
new file mode 100644
index 00000000000..a5bd233bd56
--- /dev/null
+++ b/fixtures/flight-vite/vite.config.js
@@ -0,0 +1,64 @@
+import {defineConfig, createServer} from 'vite';
+import react from '@vitejs/plugin-react';
+import rsc from 'react-server-dom-vite/plugin';
+import apiRoutes from './server/api.js';
+
+const RSC_ENTRY = '/server/rsc.server.js';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  ssr: {
+    noExternal: [/react-server-dom-vite/],
+  },
+  optimizeDeps: {
+    // Turn CJS deps into ESM
+    include: [
+      'react',
+      'react-dom/client',
+      // https://github.com/vitejs/vite/issues/6215
+      'react/jsx-runtime',
+      'react-fetch',
+    ],
+  },
+  plugins: [
+    react(),
+    rsc({
+      async findClientComponentsForClientBuild() {
+        // In client build, create a local server to discover client componets
+        const server = await createServer({
+          clearScreen: false,
+          server: {middlewareMode: 'ssr'},
+        });
+
+        // Load server entry to discover client components early
+        await server.ssrLoadModule(RSC_ENTRY);
+        await server.close();
+
+        // At this point, the server has loaded all the components in the module graph
+        return rsc.findClientComponentsFromServer(server);
+      },
+    }),
+
+    // Custom plugin
+    {
+      name: 'my-dev-server',
+      configureServer(server) {
+        apiRoutes.forEach(({route, handler}) =>
+          server.middlewares.use(route, handler)
+        );
+
+        return () => {
+          server.middlewares.use(async function(req, res, next) {
+            if (!/^\/__react($|\?)/.test(req.originalUrl)) {
+              return next();
+            }
+
+            const {default: handleRSC} = await server.ssrLoadModule(RSC_ENTRY);
+
+            return handleRSC(req, res);
+          });
+        };
+      },
+    },
+  ],
+});
diff --git a/fixtures/flight-vite/yarn.lock b/fixtures/flight-vite/yarn.lock
new file mode 100644
index 00000000000..6307a9046d6
--- /dev/null
+++ b/fixtures/flight-vite/yarn.lock
@@ -0,0 +1,2700 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
+"@babel/compat-data@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
+  integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==
+
+"@babel/core@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
+  integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-compilation-targets" "^7.17.10"
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helpers" "^7.17.9"
+    "@babel/parser" "^7.17.10"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.10"
+    "@babel/types" "^7.17.10"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
+"@babel/generator@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
+  integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==
+  dependencies:
+    "@babel/types" "^7.17.10"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-compilation-targets@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe"
+  integrity sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-transforms@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
+  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
+"@babel/helper-simple-access@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
+  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
+"@babel/helpers@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
+  integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.9"
+    "@babel/types" "^7.17.0"
+
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
+  integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
+
+"@babel/plugin-syntax-jsx@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-development@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
+  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-self@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
+  integrity sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-source@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz#1879c3f23629d287cc6186a6c683154509ec70c0"
+  integrity sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
+  integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz#3d02d0161f0fbf3ada8e88159375af97690f4055"
+  integrity sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw==
+  dependencies:
+    core-js-pure "^3.20.2"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
+  integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.10"
+    "@babel/types" "^7.17.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
+  integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+
+"@jridgewell/set-array@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
+  integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.10.tgz#db436f0917d655393851bc258918c00226c9b183"
+  integrity sha512-Q0YbBd6OTsXm8Y21+YUSDXupHnodNC2M4O18jtd3iwJ3+vMZNdKGols0a9G6JOK0dcJ3IdUUHoh908ZI6qhk8Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
+"@typescript-eslint/eslint-plugin@^4.5.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
+  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "4.33.0"
+    "@typescript-eslint/scope-manager" "4.33.0"
+    debug "^4.3.1"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.1.8"
+    regexpp "^3.1.0"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/experimental-utils@4.33.0", "@typescript-eslint/experimental-utils@^4.0.1":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
+  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
+  dependencies:
+    "@types/json-schema" "^7.0.7"
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/experimental-utils@^3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
+  integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser@^4.5.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
+  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
+    debug "^4.3.1"
+
+"@typescript-eslint/scope-manager@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
+  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+
+"@typescript-eslint/types@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
+  integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
+
+"@typescript-eslint/types@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
+  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
+
+"@typescript-eslint/typescript-estree@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
+  integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==
+  dependencies:
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/visitor-keys" "3.10.1"
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/typescript-estree@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
+  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/visitor-keys@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
+  integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/visitor-keys@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
+  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    eslint-visitor-keys "^2.0.0"
+
+"@vitejs/plugin-react@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz#2fcf0b6ce9bcdcd4cec5c760c199779d5657ece1"
+  integrity sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA==
+  dependencies:
+    "@babel/core" "^7.17.10"
+    "@babel/plugin-transform-react-jsx" "^7.17.3"
+    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
+    "@babel/plugin-transform-react-jsx-self" "^7.16.7"
+    "@babel/plugin-transform-react-jsx-source" "^7.16.7"
+    "@rollup/pluginutils" "^4.2.1"
+    react-refresh "^0.13.0"
+    resolve "^1.22.0"
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^7.4.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
+array-includes@^3.1.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.flat@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
+  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+axe-core@^4.3.5:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
+  integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.10.3"
+    raw-body "2.5.1"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.20.2:
+  version "4.20.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf"
+  integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==
+  dependencies:
+    caniuse-lite "^1.0.30001332"
+    electron-to-chromium "^1.4.118"
+    escalade "^3.1.1"
+    node-releases "^2.0.3"
+    picocolors "^1.0.0"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001338"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz#b5dd7a7941a51a16480bdf6ff82bded1628eec0d"
+  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+confusing-browser-globals@^1.0.10:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
+core-js-pure@^3.20.2:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.22.4.tgz#a992210f4cad8b32786b8654563776c56b0e0d0a"
+  integrity sha512-4iF+QZkpzIz0prAFuepmxwJ2h5t4agvE8WPYqs2mjLJMNNwJOnpch76w2Q7bUfCPEv/V7wpvOfog0w273M+ZSw==
+
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+damerau-levenshtein@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+debug@2.6.9, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.4.118:
+  version "1.4.137"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f"
+  integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.0.tgz#b2d526489cceca004588296334726329e0a6bfb6"
+  integrity sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.4.1"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+esbuild-android-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz#5b94a1306df31d55055f64a62ff6b763a47b7f64"
+  integrity sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw==
+
+esbuild-android-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.38.tgz#78acc80773d16007de5219ccce544c036abd50b8"
+  integrity sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA==
+
+esbuild-darwin-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.38.tgz#e02b1291f629ebdc2aa46fabfacc9aa28ff6aa46"
+  integrity sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA==
+
+esbuild-darwin-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.38.tgz#01eb6650ec010b18c990e443a6abcca1d71290a9"
+  integrity sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==
+
+esbuild-freebsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.38.tgz#790b8786729d4aac7be17648f9ea8e0e16475b5e"
+  integrity sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig==
+
+esbuild-freebsd-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.38.tgz#b66340ab28c09c1098e6d9d8ff656db47d7211e6"
+  integrity sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ==
+
+esbuild-linux-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.38.tgz#7927f950986fd39f0ff319e92839455912b67f70"
+  integrity sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g==
+
+esbuild-linux-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.38.tgz#4893d07b229d9cfe34a2b3ce586399e73c3ac519"
+  integrity sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q==
+
+esbuild-linux-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.38.tgz#8442402e37d0b8ae946ac616784d9c1a2041056a"
+  integrity sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA==
+
+esbuild-linux-arm@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.38.tgz#d5dbf32d38b7f79be0ec6b5fb2f9251fd9066986"
+  integrity sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA==
+
+esbuild-linux-mips64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.38.tgz#95081e42f698bbe35d8ccee0e3a237594b337eb5"
+  integrity sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ==
+
+esbuild-linux-ppc64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.38.tgz#dceb0a1b186f5df679618882a7990bd422089b47"
+  integrity sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q==
+
+esbuild-linux-riscv64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.38.tgz#61fb8edb75f475f9208c4a93ab2bfab63821afd2"
+  integrity sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ==
+
+esbuild-linux-s390x@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.38.tgz#34c7126a4937406bf6a5e69100185fd702d12fe0"
+  integrity sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ==
+
+esbuild-netbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.38.tgz#322ea9937d9e529183ee281c7996b93eb38a5d95"
+  integrity sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q==
+
+esbuild-openbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.38.tgz#1ca29bb7a2bf09592dcc26afdb45108f08a2cdbd"
+  integrity sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ==
+
+esbuild-sunos-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.38.tgz#c9446f7d8ebf45093e7bb0e7045506a88540019b"
+  integrity sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA==
+
+esbuild-windows-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.38.tgz#f8e9b4602fd0ccbd48e5c8d117ec0ba4040f2ad1"
+  integrity sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw==
+
+esbuild-windows-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.38.tgz#280f58e69f78535f470905ce3e43db1746518107"
+  integrity sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw==
+
+esbuild-windows-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.38.tgz#d97e9ac0f95a4c236d9173fa9f86c983d6a53f54"
+  integrity sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw==
+
+esbuild@^0.14.27:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.38.tgz#99526b778cd9f35532955e26e1709a16cca2fb30"
+  integrity sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA==
+  optionalDependencies:
+    esbuild-android-64 "0.14.38"
+    esbuild-android-arm64 "0.14.38"
+    esbuild-darwin-64 "0.14.38"
+    esbuild-darwin-arm64 "0.14.38"
+    esbuild-freebsd-64 "0.14.38"
+    esbuild-freebsd-arm64 "0.14.38"
+    esbuild-linux-32 "0.14.38"
+    esbuild-linux-64 "0.14.38"
+    esbuild-linux-arm "0.14.38"
+    esbuild-linux-arm64 "0.14.38"
+    esbuild-linux-mips64le "0.14.38"
+    esbuild-linux-ppc64le "0.14.38"
+    esbuild-linux-riscv64 "0.14.38"
+    esbuild-linux-s390x "0.14.38"
+    esbuild-netbsd-64 "0.14.38"
+    esbuild-openbsd-64 "0.14.38"
+    esbuild-sunos-64 "0.14.38"
+    esbuild-windows-32 "0.14.38"
+    esbuild-windows-64 "0.14.38"
+    esbuild-windows-arm64 "0.14.38"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-react-app@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
+  integrity sha512-bpoAAC+YRfzq0dsTk+6v9aHm/uqnDwayNAXleMypGl6CpxI9oXXscVHo4fk3eJPIn+rsbtNetB4r/ZIidFIE8A==
+  dependencies:
+    confusing-browser-globals "^1.0.10"
+
+eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-module-utils@^2.7.3:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
+  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
+  dependencies:
+    debug "^3.2.7"
+    find-up "^2.1.0"
+
+eslint-plugin-flowtype@^5.2.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.10.0.tgz#7764cc63940f215bf3f0bd2d9a1293b2b9b2b4bb"
+  integrity sha512-vcz32f+7TP+kvTUyMXZmCnNujBQZDNmcqPImw8b9PZ+16w1Qdm6ryRuYZYVaG9xRqqmAPr2Cs9FAX5gN+x/bjw==
+  dependencies:
+    lodash "^4.17.15"
+    string-natural-compare "^3.0.1"
+
+eslint-plugin-import@^2.22.1:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
+    has "^1.0.3"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-plugin-jest@^24.1.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.7.0.tgz#206ac0833841e59e375170b15f8d0955219c4889"
+  integrity sha512-wUxdF2bAZiYSKBclsUMrYHH6WxiBreNjyDxbRv345TIvPeoCEgPNEn3Sa+ZrSqsf1Dl9SqqSREXMHExlMMu1DA==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^4.0.1"
+
+eslint-plugin-jsx-a11y@^6.3.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
+  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    aria-query "^4.2.2"
+    array-includes "^3.1.4"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.3.5"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.7"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.2.1"
+    language-tags "^1.0.5"
+    minimatch "^3.0.4"
+
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
+
+eslint-plugin-react@^7.21.5:
+  version "7.29.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
+  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flatmap "^1.2.5"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.0"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.6"
+
+eslint-plugin-testing-library@^3.9.2:
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.2.tgz#609ec2b0369da7cf2e6d9edff5da153cc31d87bd"
+  integrity sha512-WAmOCt7EbF1XM8XfbCKAEzAPnShkNSwcIsAD2jHdsMUT9mZJPjLCG7pMzbcC8kK366NOuGip8HKLDC+Xk4yIdA==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^3.10.1"
+
+eslint-scope@^5.0.0, eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint@^7.11.0:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+express@^4.17.1:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.0"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.5.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.2.0"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.10.3"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
+  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3, glob@^7.1.6:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.6.0, globals@^13.9.0:
+  version "13.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.14.0.tgz#daf3ff9b4336527cf56e98330b6f64bea9aff9df"
+  integrity sha512-ERO68sOYwm5UuLvSJTY7w7NP2c8S4UcXs3X1GBX8cwOr+ShOcDBbCY5mH4zxz0jsYCdJ8ve8Mv9n2YGJMB1aeg==
+  dependencies:
+    type-fest "^0.20.2"
+
+globby@^11.0.3:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+ignore@^5.1.8, ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.4, is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
+is-core-module@^2.2.0, is-core-module@^2.8.1:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
+  integrity sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==
+  dependencies:
+    array-includes "^3.1.4"
+    object.assign "^4.1.2"
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+language-subtag-registry@~0.3.2:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
+  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+loader-utils@^1.2.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
+lodash@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+minimatch@^3.0.4, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nanoid@^3.3.3:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+neo-async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+node-releases@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
+  integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-inspect@^1.12.0, object-inspect@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
+  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6, path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.2.2, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss@^8.4.13:
+  version "8.4.13"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
+  integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==
+  dependencies:
+    nanoid "^3.3.3"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+  dependencies:
+    side-channel "^1.0.4"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-refresh@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
+  integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regexp.prototype.flags@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
+regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.20.0, resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup@^2.59.0:
+  version "2.72.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.72.1.tgz#861c94790537b10008f0ca0fbc60e631aabdd045"
+  integrity sha512-NTc5UGy/NWFGpSqF1lFY8z9Adri6uhyMLI6LvPAXdBKoPRFhIIiBUpt+Qg2awixqO3xvzSijjhnb4+QEZwJmxA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sass-loader@8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
+    semver "^6.3.0"
+
+schema-utils@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.2.1, semver@^7.3.2, semver@^7.3.5:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.18.0"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string.prototype.matchall@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+table@^6.0.9:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
+  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tsutils@^3.17.1, tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vite@^2.9.8:
+  version "2.9.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.8.tgz#2c2cb0790beb0fbe4b8c0995b80fe691a91c2545"
+  integrity sha512-zsBGwn5UT3YS0NLSJ7hnR54+vUKfgzMUh/Z9CxF1YKEBVIe213+63jrFLmZphgGI5zXwQCSmqIdbPuE8NJywPw==
+  dependencies:
+    esbuild "^0.14.27"
+    postcss "^8.4.13"
+    resolve "^1.22.0"
+    rollup "^2.59.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

From 7e91c67ddc78d057d6a4379c34bb202ae526b785 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 23 May 2022 12:41:27 +0900
Subject: [PATCH 50/87] Fix sourcemaps

---
 packages/react-server-dom-vite/package.json   |  3 +-
 .../src/ReactFlightVitePlugin.js              | 29 ++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 990ec26b09b..fb41bffc2ab 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -58,7 +58,8 @@
     "vite": "^2.7.1"
   },
   "dependencies": {
-    "es-module-lexer": "^0.9.3"
+    "es-module-lexer": "^0.9.3",
+    "magic-string": "^0.25.2"
   },
   "devDependencies": {
     "vite": "^2.7.1"
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 569479bdc71..b9e0473e6ed 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -9,6 +9,7 @@
 
 // $FlowFixMe[module-missing]
 import {init, parse} from 'es-module-lexer';
+import MagicString from 'magic-string';
 // $FlowFixMe[module-missing]
 import {normalizePath, transformWithEsbuild} from 'vite';
 
@@ -120,11 +121,19 @@ export default function ReactFlightVitePlugin({
        */
       if (rscViteFileRE.test(id)) {
         const INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
+        const s = new MagicString(code);
+
+        id = id.split('?')[0];
 
         if (options && options.ssr) {
           // In SSR, directly use components already discovered by RSC
           // instead of globs to avoid bundling unused components.
-          return code.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
+          s.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
+
+          return {
+            code: s.toString(),
+            map: s.generateMap({file: id, source: id}),
+          };
         }
 
         const injectGlobs = (clientComponents: string[]) => {
@@ -142,11 +151,16 @@ export default function ReactFlightVitePlugin({
             )
             .join(', ')});`;
 
-          return code.replace(INJECTING_RE, injectedGlobs);
+          s.replace(INJECTING_RE, injectedGlobs);
+
+          return {
+            code: s.toString(),
+            map: s.generateMap({file: id, source: id}),
+          };
         };
 
         if (config.command === 'serve') {
-          absoluteImporterPath = id.split('?')[0];
+          absoluteImporterPath = id;
           return injectGlobs(findClientComponentsForDev(server));
         }
 
@@ -252,7 +266,9 @@ const hashImportsPlugin = {
   transform(code: string, id: string) {
     // Turn relative import paths to lossy hashes
     if (rscViteFileRE.test(id)) {
-      return code.replace(
+      const s = new MagicString(code);
+
+      s.replace(
         /\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm,
         function(_, imports) {
           return imports
@@ -267,6 +283,11 @@ const hashImportsPlugin = {
             });
         },
       );
+
+      return {
+        code: s.toString(),
+        map: s.generateMap({file: id, source: id}),
+      };
     }
   },
 };

From 3c6c15158709b08852e7248706cc7150a5c2d415 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 25 May 2022 13:05:07 +0900
Subject: [PATCH 51/87] Do not create module references for nested client
 components

---
 .../src/ReactFlightVitePlugin.js              | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index b9e0473e6ed..32571f34ae5 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -28,6 +28,7 @@ type PluginOptions = {
 };
 
 const rscViteFileRE = /\/react-server-dom-vite.js/;
+const noProxyRE = /[&?]no-proxy($|&)/;
 
 export default function ReactFlightVitePlugin({
   isServerComponentImporterAllowed = importer => false,
@@ -104,9 +105,25 @@ export default function ReactFlightVitePlugin({
     },
 
     load(id: string, options: {ssr?: boolean} = {}) {
-      return options.ssr && shouldCheckClientComponent(id)
-        ? wrapIfClientComponent(id)
-        : null;
+      if (!options.ssr || !shouldCheckClientComponent(id)) return;
+
+      if (server) {
+        const mod = server.moduleGraph.idToModuleMap.get(
+          id.replace('/@fs', ''),
+        );
+
+        if (mod && mod.importers) {
+          if (
+            Array.from(mod.importers).every(impMod => noProxyRE.test(impMod.id))
+          ) {
+            // This module is only imported from client components
+            // so we don't need to create a module reference
+            return;
+          }
+        }
+      }
+
+      return wrapIfClientComponent(id);
     },
 
     transform(code: string, id: string, options: {ssr?: boolean} = {}) {
@@ -242,7 +259,7 @@ export async function proxyClientComponent(filepath: string, src?: string) {
 }
 
 function shouldCheckClientComponent(id: string) {
-  return /\.[jt]sx?($|\?)/.test(id) && !/[&?]no-proxy($|&)/.test(id);
+  return /\.[jt]sx?($|\?)/.test(id) && !noProxyRE.test(id);
 }
 
 function findClientComponentsForDev(server: any) {

From 7c0da17bfab1fe718a557f205253638a283b7ea0 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 27 May 2022 10:39:10 +0900
Subject: [PATCH 52/87] Refactor variables and drop parameter

---
 .../src/ReactFlightVitePlugin.js              | 49 +++++++------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 32571f34ae5..1243c845233 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -24,49 +24,30 @@ type PluginOptions = {
   findClientComponentsForClientBuild?: (
     config: any,
   ) => string[] | Promise<string[]>,
-  isClientComponent?: (id: string) => boolean | Promise<boolean>,
 };
 
 const rscViteFileRE = /\/react-server-dom-vite.js/;
 const noProxyRE = /[&?]no-proxy($|&)/;
 
+const isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id);
+
 export default function ReactFlightVitePlugin({
   isServerComponentImporterAllowed = importer => false,
-  isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id),
   findClientComponentsForClientBuild,
 }: PluginOptions = {}) {
   let config;
   let server;
   let invalidateTimeout;
-  let absoluteImporterPath;
+  let globImporterPath;
 
-  function invalidateImporter() {
+  function invalidateGlobImporter() {
     clearTimeout(invalidateTimeout);
     invalidateTimeout = setTimeout(
-      () => server.watcher.emit('change', absoluteImporterPath),
+      () => server.watcher.emit('change', globImporterPath),
       100,
     );
   }
 
-  function wrapIfClientComponent(id: string) {
-    const handle = (isClient: boolean) => {
-      if (!isClient) return null;
-
-      if (server) {
-        const moduleNode = server.moduleGraph.getModuleById(id);
-        if (!moduleNode.__isClientComponent) {
-          moduleNode.__isClientComponent = true;
-          if (absoluteImporterPath) invalidateImporter();
-        }
-      }
-
-      return proxyClientComponent(id.split('?')[0]);
-    };
-
-    const tmp = isClientComponent(id);
-    return typeof tmp === 'boolean' ? handle(tmp) : tmp.then(handle);
-  }
-
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
@@ -105,7 +86,7 @@ export default function ReactFlightVitePlugin({
     },
 
     load(id: string, options: {ssr?: boolean} = {}) {
-      if (!options.ssr || !shouldCheckClientComponent(id)) return;
+      if (!options.ssr || !isClientComponent(id) || noProxyRE.test(id)) return;
 
       if (server) {
         const mod = server.moduleGraph.idToModuleMap.get(
@@ -121,9 +102,17 @@ export default function ReactFlightVitePlugin({
             return;
           }
         }
+
+        // Mark module as a client component.
+        const moduleNode = server.moduleGraph.getModuleById(id);
+        if (!moduleNode.meta) moduleNode.meta = {};
+        if (!moduleNode.meta.isClientComponent) {
+          moduleNode.meta.isClientComponent = true;
+          if (globImporterPath) invalidateGlobImporter();
+        }
       }
 
-      return wrapIfClientComponent(id);
+      return proxyClientComponent(id.split('?')[0]);
     },
 
     transform(code: string, id: string, options: {ssr?: boolean} = {}) {
@@ -177,7 +166,7 @@ export default function ReactFlightVitePlugin({
         };
 
         if (config.command === 'serve') {
-          absoluteImporterPath = id;
+          globImporterPath = id;
           return injectGlobs(findClientComponentsForDev(server));
         }
 
@@ -258,17 +247,13 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   return proxyCode;
 }
 
-function shouldCheckClientComponent(id: string) {
-  return /\.[jt]sx?($|\?)/.test(id) && !noProxyRE.test(id);
-}
-
 function findClientComponentsForDev(server: any) {
   const clientComponents = [];
 
   // eslint-disable-next-line no-for-of-loops/no-for-of-loops
   for (const set of server.moduleGraph.fileToModulesMap.values()) {
     const clientModule = Array.from(set).find(
-      moduleNode => moduleNode.__isClientComponent,
+      moduleNode => moduleNode.meta && moduleNode.meta.isClientComponent,
     );
 
     if (clientModule) clientComponents.push(clientModule.file);

From d90e49c8c5681ba5ddbd634d120bdd09baaba295 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 27 May 2022 11:49:50 +0900
Subject: [PATCH 53/87] Add Viteception for client build and refactor code

---
 fixtures/flight-vite/vite.config.js           | 17 +------
 .../src/ReactFlightVitePlugin.js              | 51 +++++++++++++------
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/fixtures/flight-vite/vite.config.js b/fixtures/flight-vite/vite.config.js
index a5bd233bd56..110ec720bc9 100644
--- a/fixtures/flight-vite/vite.config.js
+++ b/fixtures/flight-vite/vite.config.js
@@ -22,22 +22,7 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    rsc({
-      async findClientComponentsForClientBuild() {
-        // In client build, create a local server to discover client componets
-        const server = await createServer({
-          clearScreen: false,
-          server: {middlewareMode: 'ssr'},
-        });
-
-        // Load server entry to discover client components early
-        await server.ssrLoadModule(RSC_ENTRY);
-        await server.close();
-
-        // At this point, the server has loaded all the components in the module graph
-        return rsc.findClientComponentsFromServer(server);
-      },
-    }),
+    rsc({serverBuildEntries: [RSC_ENTRY]}),
 
     // Custom plugin
     {
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 1243c845233..17ea7e9cf92 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -11,19 +11,17 @@
 import {init, parse} from 'es-module-lexer';
 import MagicString from 'magic-string';
 // $FlowFixMe[module-missing]
-import {normalizePath, transformWithEsbuild} from 'vite';
+import {normalizePath, transformWithEsbuild, createServer} from 'vite';
 
 import {promises as fs} from 'fs';
 import path from 'path';
 
 type PluginOptions = {
+  serverBuildEntries: string[],
   isServerComponentImporterAllowed?: (
     importer: string,
     source: string,
   ) => boolean,
-  findClientComponentsForClientBuild?: (
-    config: any,
-  ) => string[] | Promise<string[]>,
 };
 
 const rscViteFileRE = /\/react-server-dom-vite.js/;
@@ -32,8 +30,8 @@ const noProxyRE = /[&?]no-proxy($|&)/;
 const isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id);
 
 export default function ReactFlightVitePlugin({
+  serverBuildEntries,
   isServerComponentImporterAllowed = importer => false,
-  findClientComponentsForClientBuild,
 }: PluginOptions = {}) {
   let config;
   let server;
@@ -167,17 +165,18 @@ export default function ReactFlightVitePlugin({
 
         if (config.command === 'serve') {
           globImporterPath = id;
-          return injectGlobs(findClientComponentsForDev(server));
+          return injectGlobs(findClientBoundaries(server.moduleGraph));
         }
 
-        if (!findClientComponentsForClientBuild) {
+        if (!serverBuildEntries) {
           throw new Error(
-            '[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build',
+            '[react-server-dom-vite] Parameter serverBuildEntries is required for client build',
           );
         }
 
-        const tmp = findClientComponentsForClientBuild(config);
-        return Array.isArray(tmp) ? injectGlobs(tmp) : tmp.then(injectGlobs);
+        return findClientBoundariesForClientBuild(serverBuildEntries).then(
+          injectGlobs,
+        );
       }
     },
   };
@@ -247,19 +246,41 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   return proxyCode;
 }
 
-function findClientComponentsForDev(server: any) {
-  const clientComponents = [];
+function findClientBoundaries(moduleGraph: any) {
+  const clientBoundaries = [];
 
   // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-  for (const set of server.moduleGraph.fileToModulesMap.values()) {
+  for (const set of moduleGraph.fileToModulesMap.values()) {
     const clientModule = Array.from(set).find(
       moduleNode => moduleNode.meta && moduleNode.meta.isClientComponent,
     );
 
-    if (clientModule) clientComponents.push(clientModule.file);
+    if (clientModule) {
+      clientBoundaries.push(clientModule.file);
+    }
   }
 
-  return clientComponents;
+  return clientBoundaries;
+}
+
+async function findClientBoundariesForClientBuild(serverEntries: string[]) {
+  // Viteception
+  const server = await createServer({
+    clearScreen: false,
+    server: {middlewareMode: 'ssr'},
+  });
+
+  try {
+    // Load server entries to discover client components
+    await Promise.all(serverEntries.map(server.ssrLoadModule));
+  } catch (error) {
+    error.message = 'Could not load server build entries: ' + error.message;
+    throw error;
+  }
+
+  await server.close();
+
+  return findClientBoundaries(server.moduleGraph);
 }
 
 const hashImportsPlugin = {

From 210e67f000ed71ec04a3659ff2f884e3f3437b4c Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 27 May 2022 12:09:34 +0900
Subject: [PATCH 54/87] Update magic-string to use replace utility

---
 packages/react-server-dom-vite/package.json | 2 +-
 yarn.lock                                   | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index fb41bffc2ab..8d6b4635793 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "es-module-lexer": "^0.9.3",
-    "magic-string": "^0.25.2"
+    "magic-string": "^0.26.2"
   },
   "devDependencies": {
     "vite": "^2.7.1"
diff --git a/yarn.lock b/yarn.lock
index 7c08f9534af..e6f86e7149b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11320,6 +11320,13 @@ magic-string@^0.25.2:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+magic-string@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
+  integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^1.0.0, make-dir@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"

From fb2c71237107756a00969eaf772b72fd60aeac14 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 27 May 2022 13:04:34 +0900
Subject: [PATCH 55/87] Augment Vite module graph and improve client component
 bundling

---
 .../src/ReactFlightVitePlugin.js              | 137 +++++++++++++++++-
 1 file changed, 131 insertions(+), 6 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 17ea7e9cf92..88f163819d6 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -54,7 +54,8 @@ export default function ReactFlightVitePlugin({
       server = _server;
     },
 
-    configResolved(_config: any) {
+    async configResolved(_config: any) {
+      await init;
       config = _config;
 
       // By pushing this plugin at the end of the existing array,
@@ -114,6 +115,12 @@ export default function ReactFlightVitePlugin({
     },
 
     transform(code: string, id: string, options: {ssr?: boolean} = {}) {
+      // Add more information for this module in the graph.
+      // It will be used later to discover client boundaries.
+      if (server && options.ssr && /\.[jt]sx?($|\?)/.test(id)) {
+        augmentModuleGraph(server.moduleGraph, id, code);
+      }
+
       /**
        * In order to allow dynamic component imports from RSC, we use Vite's import.meta.glob.
        * This hook replaces the glob placeholders with resolved paths to all client components.
@@ -215,8 +222,6 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   // Modify the import ID to avoid infinite wraps
   const importFrom = `${filepath}?no-proxy`;
 
-  await init;
-
   if (!src) {
     src = await fs.readFile(filepath, 'utf-8');
   }
@@ -255,7 +260,7 @@ function findClientBoundaries(moduleGraph: any) {
       moduleNode => moduleNode.meta && moduleNode.meta.isClientComponent,
     );
 
-    if (clientModule) {
+    if (clientModule && isDirectImportInServer(clientModule)) {
       clientBoundaries.push(clientModule.file);
     }
   }
@@ -315,5 +320,125 @@ const hashImportsPlugin = {
   },
 };
 
-// This can be used in custom findClientComponentsForClientBuild implementations
-ReactFlightVitePlugin.findClientComponentsFromServer = findClientComponentsForDev;
+/**
+ * A client module should behave as a client boundary
+ * if it is imported by the server before encountering
+ * another boundary in the process.
+ * Traverse the module graph upwards to find non client
+ * components that import the current module.
+ */
+function isDirectImportInServer(currentMod, originalMod) {
+  // TODO: this should use recursion in any module that exports
+  // the original one, not only in full facade files.
+  if (!originalMod || (currentMod.meta || {}).isFacade) {
+    return Array.from(currentMod.importers).some(importer =>
+      // eslint-disable-next-line no-unused-vars
+      isDirectImportInServer(importer, originalMod || currentMod),
+    );
+  }
+
+  // Not enough information: safer to assume it is
+  // imported in server to create a new boundary.
+  if (!currentMod.meta || !originalMod.meta) return true;
+
+  // If current module is a client component, stop checking
+  // parents since this can be the actual boundary.
+  if (isClientComponent(currentMod.file)) return false;
+
+  // If current module is not a client component, assume
+  // it is a server component on a shared component
+  // that will be imported in the server to be safe.
+  // However, due to the lack of tree-shaking in the dev module graph,
+  // we need to manually make sure this module is importing something from
+  // the original module before marking it as client boundary.
+  // -- TODO: this only checks namedExports right now. It should
+  // consider default exports and variable renaming in facade modules.
+  return currentMod.meta.imports.some(imp => {
+    return (
+      imp.action === 'import' &&
+      (imp.from === originalMod.file ||
+        (imp.variables || []).some(([name]) =>
+          originalMod.meta.namedExports.includes(name),
+        ))
+    );
+  });
+}
+
+function resolveModPath(
+  modPath: string,
+  dirname: string,
+  retryExtension?: string,
+) {
+  let absolutePath: string;
+  try {
+    absolutePath = modPath.startsWith('.')
+      ? path.resolve(dirname, modPath)
+      : modPath;
+
+    return require.resolve(
+      (modPath.startsWith('.') ? path.resolve(dirname, modPath) : modPath) +
+        (retryExtension || ''),
+    );
+  } catch (error) {
+    if (!/\.[jt]sx?$/.test(absolutePath) && retryExtension !== '.tsx') {
+      // Node cannot infer .[jt]sx extensions.
+      // Append them here and retry a couple of times.
+      return resolveModPath(
+        absolutePath,
+        dirname,
+        retryExtension ? '.tsx' : '.jsx',
+      );
+    }
+  }
+}
+
+function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
+  const currentModule = moduleGraph.getModuleById(id);
+  if (!currentModule) return;
+
+  const [source] = id.split('?');
+  const dirname = path.dirname(source);
+  const [rawImports, namedExports, isFacade] = parse(code);
+
+  // This is currently not used but it should be considered
+  // to improve the crawling in `isDirectImportInServer`.
+  const imports = [];
+  rawImports.forEach(
+    ({
+      s: startMod,
+      e: endMod,
+      d: dynamicImportIndex,
+      ss: startStatement,
+      se: endStatement,
+    }) => {
+      if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
+
+      const modPath = code.slice(startMod, endMod);
+      const resolvedPath = resolveModPath(modPath.split('?')[0], dirname);
+      if (!resolvedPath) return; // Virtual modules or other exceptions
+
+      const [action, variables] = code
+        .slice(startStatement, endStatement)
+        .split(/\s+from\s+['"]/m)[0]
+        .split(/\s+(.+)/m);
+
+      imports.push({
+        action, // 'import' or 'export'
+        variables: variables // [['originalName', 'alias']]
+          .replace(/[{}]/gm, '')
+          .trim()
+          .split(/\s*,\s*/m)
+          .map(s => s.split(/\s+as\s+/m))
+          .filter(Boolean),
+        from: resolvedPath, // '/absolute/path'
+        originalFrom: modPath, // './path' or '3plib/subpath'
+      });
+    },
+  );
+
+  if (!currentModule.meta) {
+    currentModule.meta = {};
+  }
+
+  Object.assign(currentModule.meta, {isFacade, namedExports, imports});
+}

From a7bb1310af898099fbf4283006a499bdb2aca1a6 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 14:29:03 +0900
Subject: [PATCH 56/87] Revert to isModuleReference

---
 .../src/ReactNoopFlightServer.js              |  7 +-
 .../ReactFlightDOMRelayServerHostConfig.js    |  4 +-
 .../src/ReactFlightServerViteBundlerConfig.js |  7 +-
 .../ReactFlightServerWebpackBundlerConfig.js  |  4 +-
 .../ReactFlightNativeRelayServerHostConfig.js |  4 +-
 .../react-server/src/ReactFlightServer.js     | 93 +++++++++----------
 .../ReactFlightServerBundlerConfigCustom.js   |  2 +-
 scripts/jest/setupHostConfigs.js              |  2 +-
 8 files changed, 57 insertions(+), 66 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index af198b46c95..1c607befe74 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -45,11 +45,8 @@ const ReactNoopFlightServer = ReactFlightServer({
   stringToPrecomputedChunk(content: string): string {
     return content;
   },
-  getModuleReference(reference: any): ?Object {
-    return reference &&
-      reference.$$typeof === Symbol.for('react.module.reference')
-      ? reference
-      : undefined;
+  isModuleReference(reference: Object): boolean {
+    return reference.$$typeof === Symbol.for('react.module.reference');
   },
   getModuleKey(reference: Object): Object {
     return reference;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index d1e9ab1f277..a29a6449d8b 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -38,8 +38,8 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightDOMRelayServerIntegration';
 
-export function getModuleReference(reference: any): ?Object {
-  return reference instanceof JSResourceReference ? reference : undefined;
+export function isModuleReference(reference: Object): boolean {
+  return reference instanceof JSResourceReference;
 }
 
 export type ModuleKey = ModuleReference<any>;
diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index a1765e07210..9175cfa70b5 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -31,11 +31,8 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function getModuleReference(reference: any): ?Object {
-  if (typeof reference === 'string')
-    return globalThis.__STRING_REFERENCE_INDEX[reference];
-
-  return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
+export function isModuleReference(reference: Object): boolean {
+  return reference.$$typeof === MODULE_TAG;
 }
 
 export function resolveModuleMetaData<T>(
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index 9715765bd23..c8469eeba80 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -36,8 +36,8 @@ export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
   return reference.filepath + '#' + reference.name;
 }
 
-export function getModuleReference(reference: any): ?Object {
-  return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
+export function isModuleReference(reference: Object): boolean {
+  return reference.$$typeof === MODULE_TAG;
 }
 
 export function resolveModuleMetaData<T>(
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 803d056114b..b07c084eaa6 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -35,8 +35,8 @@ export type {
   ModuleMetaData,
 } from 'ReactFlightNativeRelayServerIntegration';
 
-export function getModuleReference(reference: any): ?Object {
-  return reference instanceof JSResourceReferenceImpl ? reference : undefined;
+export function isModuleReference(reference: Object): boolean {
+  return reference instanceof JSResourceReferenceImpl;
 }
 
 export type ModuleKey = ModuleReference<any>;
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 5f0a3274ba3..36092bfb1d6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -36,7 +36,7 @@ import {
   processErrorChunk,
   resolveModuleMetaData,
   getModuleKey,
-  getModuleReference,
+  isModuleReference,
 } from './ReactFlightServerConfig';
 
 import {Dispatcher, getCurrentCache, setCurrentCache} from './ReactFlightHooks';
@@ -178,11 +178,6 @@ function attemptResolveElement(
     );
   }
 
-  if (getModuleReference(type)) {
-    // This is a reference to a client component.
-    return [REACT_ELEMENT_TYPE, type, key, props];
-  }
-
   if (typeof type === 'function') {
     // This is a server-side component.
     return type(props);
@@ -201,6 +196,10 @@ function attemptResolveElement(
     // Any built-in works as long as its props are serializable.
     return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    }
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE: {
         const payload = type._payload;
@@ -536,50 +535,48 @@ export function resolveModelToJSON(
     return null;
   }
 
-  const moduleReference: ?ModuleReference<any> = getModuleReference(value);
-  if (moduleReference) {
-    const moduleKey: ModuleKey = getModuleKey(moduleReference);
-    const writtenModules = request.writtenModules;
-    const existingId = writtenModules.get(moduleKey);
-    if (existingId !== undefined) {
-      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-        // If we're encoding the "type" of an element, we can refer
-        // to that by a lazy reference instead of directly since React
-        // knows how to deal with lazy values. This lets us suspend
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeByRefID(existingId);
+  if (typeof value === 'object') {
+    if (isModuleReference(value)) {
+      const moduleReference: ModuleReference<any> = (value: any);
+      const moduleKey: ModuleKey = getModuleKey(moduleReference);
+      const writtenModules = request.writtenModules;
+      const existingId = writtenModules.get(moduleKey);
+      if (existingId !== undefined) {
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+          // If we're encoding the "type" of an element, we can refer
+          // to that by a lazy reference instead of directly since React
+          // knows how to deal with lazy values. This lets us suspend
+          // on this component rather than its parent until the code has
+          // loaded.
+          return serializeByRefID(existingId);
+        }
+        return serializeByValueID(existingId);
       }
-      return serializeByValueID(existingId);
-    }
-    try {
-      const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
-        request.bundlerConfig,
-        moduleReference,
-      );
-      request.pendingChunks++;
-      const moduleId = request.nextChunkId++;
-      emitModuleChunk(request, moduleId, moduleMetaData);
-      writtenModules.set(moduleKey, moduleId);
-      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-        // If we're encoding the "type" of an element, we can refer
-        // to that by a lazy reference instead of directly since React
-        // knows how to deal with lazy values. This lets us suspend
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeByRefID(moduleId);
+      try {
+        const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
+          request.bundlerConfig,
+          moduleReference,
+        );
+        request.pendingChunks++;
+        const moduleId = request.nextChunkId++;
+        emitModuleChunk(request, moduleId, moduleMetaData);
+        writtenModules.set(moduleKey, moduleId);
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+          // If we're encoding the "type" of an element, we can refer
+          // to that by a lazy reference instead of directly since React
+          // knows how to deal with lazy values. This lets us suspend
+          // on this component rather than its parent until the code has
+          // loaded.
+          return serializeByRefID(moduleId);
+        }
+        return serializeByValueID(moduleId);
+      } catch (x) {
+        request.pendingChunks++;
+        const errorId = request.nextChunkId++;
+        emitErrorChunk(request, errorId, x);
+        return serializeByValueID(errorId);
       }
-      return serializeByValueID(moduleId);
-    } catch (x) {
-      request.pendingChunks++;
-      const errorId = request.nextChunkId++;
-      emitErrorChunk(request, errorId, x);
-      return serializeByValueID(errorId);
-    }
-  }
-
-  if (typeof value === 'object') {
-    if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
+    } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
       const providerKey = ((value: any): ReactProviderType<any>)._context
         ._globalName;
       const writtenProviders = request.writtenProviders;
diff --git a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
index dcd7acdbb4f..eba05dab334 100644
--- a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
+++ b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
@@ -13,6 +13,6 @@ export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
 export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
 export opaque type ModuleKey: any = mixed; // eslint-disable-line no-undef
-export const getModuleReference = $$$hostConfig.getModuleReference;
+export const isModuleReference = $$$hostConfig.isModuleReference;
 export const getModuleKey = $$$hostConfig.getModuleKey;
 export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index b2bb548599e..1dc72761e03 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -82,7 +82,7 @@ jest.mock('react-server/flight', () => {
     jest.mock(shimServerStreamConfigPath, () => config);
     jest.mock(shimServerFormatConfigPath, () => config);
     jest.mock('react-server/src/ReactFlightServerBundlerConfigCustom', () => ({
-      getModuleReference: config.getModuleReference,
+      isModuleReference: config.isModuleReference,
       getModuleKey: config.getModuleKey,
       resolveModuleMetaData: config.resolveModuleMetaData,
     }));

From 095b4f623586535cf13512c725f39d7193025432 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 14:31:22 +0900
Subject: [PATCH 57/87] Support strings and functions with proxies

---
 .../src/ReactFlightServerViteBundlerConfig.js     |  9 +++++++++
 packages/react-server/src/ReactFlightServer.js    | 15 ++++++++-------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
index 9175cfa70b5..993f7af983e 100644
--- a/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightServerViteBundlerConfig.js
@@ -28,10 +28,16 @@ export type ModuleKey = string;
 const MODULE_TAG = Symbol.for('react.module.reference');
 
 export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
+  if (typeof reference === 'string')
+    reference = globalThis.__STRING_REFERENCE_INDEX[reference];
+
   return reference.filepath + '#' + reference.name;
 }
 
 export function isModuleReference(reference: Object): boolean {
+  if (typeof reference === 'string')
+    return !!globalThis.__STRING_REFERENCE_INDEX[reference];
+
   return reference.$$typeof === MODULE_TAG;
 }
 
@@ -39,6 +45,9 @@ export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
+  if (typeof moduleReference === 'string')
+    moduleReference = globalThis.__STRING_REFERENCE_INDEX[moduleReference];
+
   return {
     id: moduleReference.filepath,
     name: moduleReference.name,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 36092bfb1d6..4094fedc1d0 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -178,6 +178,11 @@ function attemptResolveElement(
     );
   }
 
+  if (type != null && isModuleReference(type)) {
+    // This is a reference to a client component.
+    return [REACT_ELEMENT_TYPE, type, key, props];
+  }
+
   if (typeof type === 'function') {
     // This is a server-side component.
     return type(props);
@@ -196,10 +201,6 @@ function attemptResolveElement(
     // Any built-in works as long as its props are serializable.
     return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
-    if (isModuleReference(type)) {
-      // This is a reference to a client component.
-      return [REACT_ELEMENT_TYPE, type, key, props];
-    }
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE: {
         const payload = type._payload;
@@ -531,11 +532,11 @@ export function resolveModelToJSON(
     }
   }
 
-  if (value === null) {
-    return null;
+  if (value == null) {
+    return value;
   }
 
-  if (typeof value === 'object') {
+  if (typeof value === 'object' || isModuleReference(value)) {
     if (isModuleReference(value)) {
       const moduleReference: ModuleReference<any> = (value: any);
       const moduleKey: ModuleKey = getModuleKey(moduleReference);

From 58696e2930f2a9fd171562d4c43adc4fb125d73f Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 17:27:34 +0900
Subject: [PATCH 58/87] Fix Windows paths

---
 .../src/ReactFlightVitePlugin.js                | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 88f163819d6..65a299a1121 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -372,12 +372,11 @@ function resolveModPath(
   let absolutePath: string;
   try {
     absolutePath = modPath.startsWith('.')
-      ? path.resolve(dirname, modPath)
+      ? normalizePath(path.resolve(dirname, modPath))
       : modPath;
 
-    return require.resolve(
-      (modPath.startsWith('.') ? path.resolve(dirname, modPath) : modPath) +
-        (retryExtension || ''),
+    return normalizePath(
+      require.resolve(absolutePath + (retryExtension || '')),
     );
   } catch (error) {
     if (!/\.[jt]sx?$/.test(absolutePath) && retryExtension !== '.tsx') {
@@ -397,7 +396,7 @@ function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
   if (!currentModule) return;
 
   const [source] = id.split('?');
-  const dirname = path.dirname(source);
+  const dirname = normalizePath(path.dirname(source));
   const [rawImports, namedExports, isFacade] = parse(code);
 
   // This is currently not used but it should be considered
@@ -417,9 +416,9 @@ function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
       const resolvedPath = resolveModPath(modPath.split('?')[0], dirname);
       if (!resolvedPath) return; // Virtual modules or other exceptions
 
-      const [action, variables] = code
+      const [action, variables = ''] = code
         .slice(startStatement, endStatement)
-        .split(/\s+from\s+['"]/m)[0]
+        .split(/\s+(from\s+)?['"]/m)[0]
         .split(/\s+(.+)/m);
 
       imports.push({
@@ -428,8 +427,8 @@ function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
           .replace(/[{}]/gm, '')
           .trim()
           .split(/\s*,\s*/m)
-          .map(s => s.split(/\s+as\s+/m))
-          .filter(Boolean),
+          .filter(Boolean)
+          .map(s => s.split(/\s+as\s+/m)),
         from: resolvedPath, // '/absolute/path'
         originalFrom: modPath, // './path' or '3plib/subpath'
       });

From b80d02eb99f4aa353f59222c7ff7c1956b6aa30d Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 18:17:43 +0900
Subject: [PATCH 59/87] Add tree-shaking hints

---
 .../src/ReactFlightVitePlugin.js                 | 16 ++++++++++++++--
 .../__tests__/ReactFlightDOMVitePlugin-test.js   | 13 +++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 65a299a1121..0a239ad60e8 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -66,6 +66,18 @@ export default function ReactFlightVitePlugin({
     resolveId(source: string, importer: string) {
       if (!importer) return null;
 
+      if (noProxyRE.test(source)) {
+        const [id, query] = source.split('?');
+        return this.resolve(id, importer, {skipSelf: true}).then(result => {
+          if (!result) return null;
+          return {
+            ...result,
+            id: result.id + (query ? `?${query}` : ''),
+            moduleSideEffects: false,
+          };
+        });
+      }
+
       /**
        * Throw errors when non-Server Components try to load Server Components.
        */
@@ -240,7 +252,7 @@ export async function proxyClientComponent(filepath: string, src?: string) {
 
     proxyCode += `export ${
       isDefault ? DEFAULT_EXPORT : `const ${componentName} =`
-    } wrapInClientProxy({ name: '${componentName}', id: '${getComponentId(
+    } /* @__PURE__ */wrapInClientProxy({ name: '${componentName}', id: '${getComponentId(
       filepath,
     )}', value: allImports['${key}'], isDefault: ${
       // eslint-disable-next-line react-internal/safe-string-coercion
@@ -248,7 +260,7 @@ export async function proxyClientComponent(filepath: string, src?: string) {
     } });\n`;
   });
 
-  return proxyCode;
+  return {code: proxyCode, moduleSideEffects: false};
 }
 
 function findClientBoundaries(moduleGraph: any) {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index 244505cbc69..e29bf63705c 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -15,7 +15,8 @@ describe('ReactFlightVitePlugin', () => {
   beforeEach(() => {
     jest.resetModules();
     const plugin = require('../ReactFlightVitePlugin');
-    proxyClientComponent = plugin.proxyClientComponent;
+    proxyClientComponent = (...args) =>
+      plugin.proxyClientComponent(...args).then(result => result.code);
     getComponentId = plugin.getComponentId;
   });
 
@@ -29,7 +30,7 @@ describe('ReactFlightVitePlugin', () => {
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+export default /* @__PURE__ */wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
     )}', value: allImports['default'], isDefault: true });
 `);
@@ -45,10 +46,10 @@ export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export const Counter = wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+export const Counter = /* @__PURE__ */wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
     )}', value: allImports['Counter'], isDefault: false });
-export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
+export const Clicker = /* @__PURE__ */wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
     )}', value: allImports['Clicker'], isDefault: false });
 `);
@@ -64,10 +65,10 @@ export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentI
       .toBe(`import {wrapInClientProxy} from 'react-server-dom-vite/client-proxy';
 import * as allImports from '/path/to/Counter.client.jsx?no-proxy';
 
-export default wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
+export default /* @__PURE__ */wrapInClientProxy({ name: 'Counter', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
     )}', value: allImports['default'], isDefault: true });
-export const Clicker = wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
+export const Clicker = /* @__PURE__ */wrapInClientProxy({ name: 'Clicker', id: '${getComponentId(
       '/path/to/Counter.client.jsx',
     )}', value: allImports['Clicker'], isDefault: false });
 `);

From 8e1cf134cb2b42509a253f3ca3fd11b89a0ec76b Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 19:19:09 +0900
Subject: [PATCH 60/87] Sync changes with upstream

---
 .../src/ReactFlightClientViteBundlerConfig.js                 | 4 ++++
 .../react-server-dom-vite/src/ReactFlightDOMServerNode.js     | 4 ++--
 scripts/rollup/bundles.js                                     | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
index 48523e234a7..c1a1c1e6e39 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+import type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
+export type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
+
 export opaque type ModuleMetaData = {
   id: string,
   name: string,
@@ -16,6 +19,7 @@ export opaque type ModuleMetaData = {
 export opaque type ModuleReference<T> = ModuleMetaData;
 
 export function resolveModuleReference<T>(
+  bundlerConfig: BundlerConfig,
   moduleData: ModuleMetaData,
 ): ModuleReference<T> {
   return moduleData;
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index 70a31b7b411..bb08a38adfd 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -25,7 +25,7 @@ type Options = {
   onError?: (error: mixed) => void,
 };
 
-type Controls = {|
+type PipeableStream = {|
   pipe<T: Writable>(destination: T): T,
 |};
 
@@ -33,7 +33,7 @@ function renderToPipeableStream(
   model: ReactModel,
   options?: Options,
   context?: Array<[string, ServerContextJSONValue]>,
-): Controls {
+): PipeableStream {
   const request = createRequest(
     model,
     {}, // Manifest, not used
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 567deae1309..db6a59e2045 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -411,7 +411,7 @@ const bundles = [
     global: 'ReactServerDOMViteWriter',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react'],
+    externals: ['react', 'util'],
   },
 
   /******* React Server DOM Vite Reader *******/

From d5071ac51fb17786b88e080bf3d4f1dc3fc3a6a3 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 31 May 2022 19:35:42 +0900
Subject: [PATCH 61/87] Fix race condition in unit tests

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 0a239ad60e8..81ba999bb25 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -234,6 +234,8 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   // Modify the import ID to avoid infinite wraps
   const importFrom = `${filepath}?no-proxy`;
 
+  await init;
+
   if (!src) {
     src = await fs.readFile(filepath, 'utf-8');
   }

From 4900414faf2fcffc428b4610198cd9144aec384f Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 6 Jun 2022 13:36:01 +0900
Subject: [PATCH 62/87] Use isModuleReference in function branch

---
 packages/react-server/src/ReactFlightServer.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 4094fedc1d0..46d533dbf4d 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -178,12 +178,11 @@ function attemptResolveElement(
     );
   }
 
-  if (type != null && isModuleReference(type)) {
-    // This is a reference to a client component.
-    return [REACT_ELEMENT_TYPE, type, key, props];
-  }
-
   if (typeof type === 'function') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    }
     // This is a server-side component.
     return type(props);
   } else if (typeof type === 'string') {
@@ -201,6 +200,10 @@ function attemptResolveElement(
     // Any built-in works as long as its props are serializable.
     return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    }
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE: {
         const payload = type._payload;

From ca2b9787972a715c6f70f44be7dcb255de643958 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 6 Jun 2022 13:36:42 +0900
Subject: [PATCH 63/87] Fix Flow

---
 packages/react-server/src/ReactFlightServer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 46d533dbf4d..b96624932ad 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -613,7 +613,7 @@ export function resolveModelToJSON(
             describeKeyForErrorMessage(key),
             describeObjectForErrorMessage(parent),
           );
-        } else if (!isSimpleObject(value)) {
+        } else if (typeof value === 'object' && !isSimpleObject(value)) {
           console.error(
             'Only plain objects can be passed to client components from server components. ' +
               'Classes or other objects with methods are not supported. ' +

From 02707c822a11f4c37ac9e8f9bacfb4df882b2d33 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 6 Jun 2022 19:03:24 +0900
Subject: [PATCH 64/87] Fix Flow

---
 packages/react-server-dom-vite/src/ReactFlightDOMClient.js  | 6 +++---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMClient.js b/packages/react-server-dom-vite/src/ReactFlightDOMClient.js
index 9c9d17c11f5..d17be7081ed 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMClient.js
@@ -38,7 +38,7 @@ function startReadingFromStream(
 }
 
 function createFromReadableStream(stream: ReadableStream): FlightResponse {
-  const response: FlightResponse = createResponse();
+  const response: FlightResponse = createResponse({});
   startReadingFromStream(response, stream);
   return response;
 }
@@ -46,7 +46,7 @@ function createFromReadableStream(stream: ReadableStream): FlightResponse {
 function createFromFetch(
   promiseForResponse: Promise<Response>,
 ): FlightResponse {
-  const response: FlightResponse = createResponse();
+  const response: FlightResponse = createResponse({});
   promiseForResponse.then(
     function(r) {
       startReadingFromStream(response, (r.body: any));
@@ -59,7 +59,7 @@ function createFromFetch(
 }
 
 function createFromXHR(request: XMLHttpRequest): FlightResponse {
-  const response: FlightResponse = createResponse();
+  const response: FlightResponse = createResponse({});
   let processedLength = 0;
   function progress(e: ProgressEvent): void {
     const chunk = request.responseText;
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 81ba999bb25..016985bc18c 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -383,7 +383,7 @@ function resolveModPath(
   dirname: string,
   retryExtension?: string,
 ) {
-  let absolutePath: string;
+  let absolutePath = '';
   try {
     absolutePath = modPath.startsWith('.')
       ? normalizePath(path.resolve(dirname, modPath))

From b8982cd912236297027493ef74c68c075d71ad1f Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 7 Jun 2022 11:33:50 +0900
Subject: [PATCH 65/87] Add highWaterMark default

---
 .../src/ReactFlightDOMServerBrowser.js        | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index c454729ee2d..64c421b3c68 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -31,16 +31,20 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     context,
   );
-  const stream = new ReadableStream({
-    type: 'bytes',
-    start(controller) {
-      startWork(request);
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start(controller) {
+        startWork(request);
+      },
+      pull(controller) {
+        startFlowing(request, controller);
+      },
+      cancel(reason) {},
     },
-    pull(controller) {
-      startFlowing(request, controller);
-    },
-    cancel(reason) {},
-  });
+    // $FlowFixMe size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
   return stream;
 }
 

From 9336728ad1ee1fdd9c43a98fa57032c040d2bba5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 9 Jun 2022 10:44:50 +0900
Subject: [PATCH 66/87] Resolve aliases in RSC using Rollup

---
 .../src/ReactFlightVitePlugin.js              | 43 ++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 016985bc18c..d1185288440 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -37,6 +37,7 @@ export default function ReactFlightVitePlugin({
   let server;
   let invalidateTimeout;
   let globImporterPath;
+  let resolveAlias;
 
   function invalidateGlobImporter() {
     clearTimeout(invalidateTimeout);
@@ -58,6 +59,17 @@ export default function ReactFlightVitePlugin({
       await init;
       config = _config;
 
+      const aliasPlugin = config.plugins.find(
+        plugin => plugin.name === 'alias',
+      );
+
+      if (aliasPlugin) {
+        resolveAlias = aliasPlugin.resolveId.bind({
+          // Mock Rollup instance
+          resolve: id => ({then: () => (id ? {id} : null)}),
+        });
+      }
+
       // By pushing this plugin at the end of the existing array,
       // we enforce running it *after* Vite resolves import.meta.glob.
       config.plugins.push(hashImportsPlugin);
@@ -130,7 +142,13 @@ export default function ReactFlightVitePlugin({
       // Add more information for this module in the graph.
       // It will be used later to discover client boundaries.
       if (server && options.ssr && /\.[jt]sx?($|\?)/.test(id)) {
-        augmentModuleGraph(server.moduleGraph, id, code);
+        augmentModuleGraph(
+          server.moduleGraph,
+          id,
+          code,
+          config.root,
+          resolveAlias,
+        );
       }
 
       /**
@@ -405,7 +423,13 @@ function resolveModPath(
   }
 }
 
-function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
+function augmentModuleGraph(
+  moduleGraph: any,
+  id: string,
+  code: string,
+  root: string,
+  resolveAlias: any,
+) {
   const currentModule = moduleGraph.getModuleById(id);
   if (!currentModule) return;
 
@@ -426,8 +450,17 @@ function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
     }) => {
       if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
 
-      const modPath = code.slice(startMod, endMod);
-      const resolvedPath = resolveModPath(modPath.split('?')[0], dirname);
+      const rawModPath = code.slice(startMod, endMod);
+      let modPath = rawModPath.split('?')[0];
+
+      if (resolveAlias) {
+        const resolvedAliasPath = resolveAlias(modPath, 'rsc_importer', {});
+        if (resolvedAliasPath && resolvedAliasPath.id) {
+          modPath = normalizePath(path.join(root, resolvedAliasPath.id));
+        }
+      }
+
+      const resolvedPath = resolveModPath(modPath, dirname);
       if (!resolvedPath) return; // Virtual modules or other exceptions
 
       const [action, variables = ''] = code
@@ -444,7 +477,7 @@ function augmentModuleGraph(moduleGraph: any, id: string, code: string) {
           .filter(Boolean)
           .map(s => s.split(/\s+as\s+/m)),
         from: resolvedPath, // '/absolute/path'
-        originalFrom: modPath, // './path' or '3plib/subpath'
+        originalFrom: rawModPath, // './path' or '3plib/subpath'
       });
     },
   );

From ffc564af8740235b57f19880d8fea85470fae552 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 13 Jun 2022 10:08:08 +0900
Subject: [PATCH 67/87] Improve isRsc performance

---
 .../react-server-dom-vite/src/ClientProxy.js  | 10 ++--------
 .../src/ReactFlightDOMServerBrowser.js        | 14 ++++++++++++-
 .../src/ReactFlightDOMServerNode.js           | 14 ++++++++++++-
 .../ReactFlightDOMClientProxy-test.js         | 20 ++++++++++---------
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index 0ae510c0a1c..ab312099fec 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {useState} from 'react';
+import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as ReactSharedInternals} from 'react';
 
 declare var globalThis: any;
 
@@ -31,14 +31,8 @@ export const STRING_SIZE_LIMIT = 64;
 export const FN_RSC_ERROR =
   'Functions exported from client components cannot be called or used as constructors from a server component.';
 
-// TODO what's a better way to detect Flight runtime?
 export function isRsc() {
-  try {
-    useState();
-    return false;
-  } catch (error) {
-    return error.message.endsWith('Server Components.');
-  }
+  return !!ReactSharedInternals.ReactCurrentDispatcher.current.isRsc;
 }
 
 function createModuleReference(id, value, name, isDefault) {
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index 64c421b3c68..ebc29741aa0 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -10,6 +10,8 @@
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
 import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
+import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as ReactSharedInternals} from 'react';
+
 import {
   createRequest,
   startWork,
@@ -26,7 +28,17 @@ function renderToReadableStream(
   context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
-    model,
+    // Wrap root in a dummy element that simply adds a flag
+    // to the current dispatcher to check later in the proxies.
+    {
+      ...model,
+      $$typeof: Symbol.for('react.element'),
+      props: {children: model},
+      type: () => {
+        ReactSharedInternals.ReactCurrentDispatcher.current.isRsc = true;
+        return model;
+      },
+    },
     {}, // Manifest, not used
     options ? options.onError : undefined,
     context,
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index bb08a38adfd..93896e54d1a 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -11,6 +11,8 @@ import type {ReactModel} from 'react-server/src/ReactFlightServer';
 import type {Writable} from 'stream';
 import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
+import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as ReactSharedInternals} from 'react';
+
 import {
   createRequest,
   startWork,
@@ -35,7 +37,17 @@ function renderToPipeableStream(
   context?: Array<[string, ServerContextJSONValue]>,
 ): PipeableStream {
   const request = createRequest(
-    model,
+    // Wrap root in a dummy element that simply adds a flag
+    // to the current dispatcher to check later in the proxies.
+    {
+      ...model,
+      $$typeof: Symbol.for('react.element'),
+      props: {children: model},
+      type: () => {
+        ReactSharedInternals.ReactCurrentDispatcher.current.isRsc = true;
+        return model;
+      },
+    },
     {}, // Manifest, not used
     options ? options.onError : undefined,
     context,
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 18d20f340e7..35356869579 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -15,11 +15,17 @@ let ClientProxy;
 const id = '/path/to/Counter.jsx';
 const name = 'Counter';
 
+const mockedDispatcher = {isRsc: true};
+
 jest.mock('react', () => {
   const actualModule = jest.requireActual('react');
   return {
     ...actualModule,
-    useState: jest.fn(() => undefined),
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
+      ReactCurrentDispatcher: {
+        current: mockedDispatcher,
+      },
+    },
   };
 });
 
@@ -34,7 +40,7 @@ describe('ReactFlightDOMClientProxy', () => {
   });
 
   it('does not affect the exports in non-RSC environments', () => {
-    React.useState.mockReturnValue(undefined);
+    mockedDispatcher.isRsc = undefined;
 
     const wrappedElement = wrapInClientProxy(<div>test</div>);
     expect(wrappedElement).toHaveProperty(
@@ -55,14 +61,12 @@ describe('ReactFlightDOMClientProxy', () => {
     const myFn = () => true;
     myFn.myProp = true;
 
-    React.useState.mockReturnValue(undefined);
+    mockedDispatcher.isRsc = undefined;
     const wrappedFnSsr = wrapInClientProxy(myFn);
     expect(wrappedFnSsr.myProp).toEqual(true);
     expect(wrappedFnSsr()).toEqual(true);
 
-    React.useState.mockImplementation(() => {
-      throw new Error('Not supported in Server Components.');
-    });
+    mockedDispatcher.isRsc = true;
     const wrappedFnRsc = wrapInClientProxy(myFn);
     expect(wrappedFnRsc.myProp).toEqual(undefined);
     expect(() => wrappedFnRsc()).toThrowError(ClientProxy.FN_RSC_ERROR);
@@ -70,9 +74,7 @@ describe('ReactFlightDOMClientProxy', () => {
   });
 
   it('wraps client components in a proxy during RSC', async () => {
-    React.useState.mockImplementation(() => {
-      throw new Error('Not supported in Server Components.');
-    });
+    mockedDispatcher.isRsc = true;
 
     const wrappedComponent = wrapInClientProxy(() => <div>MyCounter</div>);
 

From 7b64e758e12df6987613b6d05f107d0a0abf7651 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 12:12:35 +0900
Subject: [PATCH 68/87] Support options.identifierPrefix

---
 .../src/ReactFlightDOMServerBrowser.js                      | 6 ++++--
 .../react-server-dom-vite/src/ReactFlightDOMServerNode.js   | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index ebc29741aa0..e5af872ec72 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -20,12 +20,13 @@ import {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 function renderToReadableStream(
   model: ReactModel,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
     // Wrap root in a dummy element that simply adds a flag
@@ -41,7 +42,8 @@ function renderToReadableStream(
     },
     {}, // Manifest, not used
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   const stream = new ReadableStream(
     {
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index 93896e54d1a..2c95221ac34 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -25,6 +25,8 @@ function createDrainHandler(destination, request) {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 type PipeableStream = {|
@@ -34,7 +36,6 @@ type PipeableStream = {|
 function renderToPipeableStream(
   model: ReactModel,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): PipeableStream {
   const request = createRequest(
     // Wrap root in a dummy element that simply adds a flag
@@ -50,7 +51,8 @@ function renderToPipeableStream(
     },
     {}, // Manifest, not used
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);

From c8a747d83c6dfbb340075ce7ef43990533c12ddb Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 16:17:23 +0900
Subject: [PATCH 69/87] Remove unnecessary throttling to fix importer cache in
 dev

---
 .../src/ReactFlightVitePlugin.js                  | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index d1185288440..edc51f9e340 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -35,18 +35,9 @@ export default function ReactFlightVitePlugin({
 }: PluginOptions = {}) {
   let config;
   let server;
-  let invalidateTimeout;
   let globImporterPath;
   let resolveAlias;
 
-  function invalidateGlobImporter() {
-    clearTimeout(invalidateTimeout);
-    invalidateTimeout = setTimeout(
-      () => server.watcher.emit('change', globImporterPath),
-      100,
-    );
-  }
-
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
@@ -131,7 +122,11 @@ export default function ReactFlightVitePlugin({
         if (!moduleNode.meta) moduleNode.meta = {};
         if (!moduleNode.meta.isClientComponent) {
           moduleNode.meta.isClientComponent = true;
-          if (globImporterPath) invalidateGlobImporter();
+          if (globImporterPath) {
+            // Invalidate glob importer file to account for the
+            // newly discovered client component.
+            server.watcher.emit('change', globImporterPath);
+          }
         }
       }
 

From 4d88b358a09e813ce3e98a1c4e061e1f9f5974a4 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 17:30:35 +0900
Subject: [PATCH 70/87] Refactor: change parameter order

---
 .../react-server-dom-vite/src/ReactFlightVitePlugin.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index edc51f9e340..bf95a3cbfcf 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -354,13 +354,13 @@ const hashImportsPlugin = {
  * Traverse the module graph upwards to find non client
  * components that import the current module.
  */
-function isDirectImportInServer(currentMod, originalMod) {
+function isDirectImportInServer(originalMod, currentMod) {
   // TODO: this should use recursion in any module that exports
   // the original one, not only in full facade files.
-  if (!originalMod || (currentMod.meta || {}).isFacade) {
-    return Array.from(currentMod.importers).some(importer =>
+  if (!currentMod || (currentMod.meta || {}).isFacade) {
+    return Array.from((currentMod || originalMod).importers).some(importer =>
       // eslint-disable-next-line no-unused-vars
-      isDirectImportInServer(importer, originalMod || currentMod),
+      isDirectImportInServer(originalMod, importer),
     );
   }
 

From d046c03dfb8413e4bce0691aa15584cb830c6d11 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 18:11:35 +0900
Subject: [PATCH 71/87] Count default imports as aliases in module graph meta

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index bf95a3cbfcf..06910699d85 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -466,6 +466,8 @@ function augmentModuleGraph(
       imports.push({
         action, // 'import' or 'export'
         variables: variables // [['originalName', 'alias']]
+          .trim()
+          .replace(/^[^{*]/, 'default as $&')
           .replace(/[{}]/gm, '')
           .trim()
           .split(/\s*,\s*/m)

From 677fc0af4461cd258c6dce1892f244b2da510caf Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 18:39:32 +0900
Subject: [PATCH 72/87] Account for intermediate export renaming in module
 resolution

---
 .../src/ReactFlightVitePlugin.js              | 58 ++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 06910699d85..68206a8d4b1 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -351,16 +351,51 @@ const hashImportsPlugin = {
  * A client module should behave as a client boundary
  * if it is imported by the server before encountering
  * another boundary in the process.
- * Traverse the module graph upwards to find non client
- * components that import the current module.
+ * This traverses the module graph upwards to find non client
+ * components that import the `originalMod`.
+ *
+ * The `accModInfo` represents the exported members from the
+ * `originalMod` but renamed accordingly to all the intermediate/facade
+ * files in the import chain from the `originalMod` to every parent importer.
  */
-function isDirectImportInServer(originalMod, currentMod) {
+function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // TODO: this should use recursion in any module that exports
   // the original one, not only in full facade files.
   if (!currentMod || (currentMod.meta || {}).isFacade) {
+    if (!accModInfo && originalMod.meta && originalMod.meta.namedExports) {
+      // First iteration in the recursion, initialize the
+      // acumulator with data from the original module.
+      accModInfo = {
+        file: originalMod.file,
+        exports: originalMod.meta.namedExports,
+      };
+    }
+
+    if (currentMod && accModInfo) {
+      // Update accumulator in subsequent iterations with
+      // whatever the current module is re-exporting.
+
+      const lastModExports = accModInfo.exports;
+      const lastModImports = currentMod.meta.imports.filter(
+        importMeta =>
+          importMeta.action === 'export' && importMeta.from === accModInfo.file,
+      );
+
+      accModInfo = {file: currentMod.file, exports: []};
+      lastModImports.forEach(mod => {
+        mod.variables.forEach(([name, alias]) => {
+          if (name === '*' && !alias) {
+            accModInfo.exports.push(...lastModExports);
+          } else {
+            accModInfo.exports.push(alias || name);
+          }
+        });
+      });
+    }
+
     return Array.from((currentMod || originalMod).importers).some(importer =>
       // eslint-disable-next-line no-unused-vars
-      isDirectImportInServer(originalMod, importer),
+      isDirectImportInServer(originalMod, importer, accModInfo),
     );
   }
 
@@ -378,17 +413,12 @@ function isDirectImportInServer(originalMod, currentMod) {
   // However, due to the lack of tree-shaking in the dev module graph,
   // we need to manually make sure this module is importing something from
   // the original module before marking it as client boundary.
-  // -- TODO: this only checks namedExports right now. It should
-  // consider default exports and variable renaming in facade modules.
-  return currentMod.meta.imports.some(imp => {
-    return (
+  return currentMod.meta.imports.some(
+    imp =>
       imp.action === 'import' &&
-      (imp.from === originalMod.file ||
-        (imp.variables || []).some(([name]) =>
-          originalMod.meta.namedExports.includes(name),
-        ))
-    );
-  });
+      imp.from === accModInfo.file &&
+      (imp.variables || []).some(([name]) => accModInfo.exports.includes(name)),
+  );
 }
 
 function resolveModPath(

From b612e89a913eac125b300b70cb51790d6db84b00 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 15 Jun 2022 18:47:06 +0900
Subject: [PATCH 73/87] Add types

---
 .../src/ReactFlightVitePlugin.js              | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 68206a8d4b1..f467d3628b2 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -347,6 +347,25 @@ const hashImportsPlugin = {
   },
 };
 
+type ModuleMeta = {
+  isFacade: boolean,
+  namedExports: string[],
+  imports: Array<{
+    action: 'import' | 'export',
+    variables: Array<[string] | [string, string]>,
+    from: string,
+    originalFrom: string,
+  }>,
+};
+
+type ViteModule = {
+  id: string,
+  file: string,
+  meta: ?ModuleMeta,
+  importers: ?Set<ViteModule>,
+  [key: string]: any,
+};
+
 /**
  * A client module should behave as a client boundary
  * if it is imported by the server before encountering
@@ -358,7 +377,11 @@ const hashImportsPlugin = {
  * `originalMod` but renamed accordingly to all the intermediate/facade
  * files in the import chain from the `originalMod` to every parent importer.
  */
-function isDirectImportInServer(originalMod, currentMod, accModInfo) {
+function isDirectImportInServer(
+  originalMod: ViteModule,
+  currentMod: ViteModule,
+  accModInfo: ?{file: string, exports: string[]},
+) {
   // TODO: this should use recursion in any module that exports
   // the original one, not only in full facade files.
   if (!currentMod || (currentMod.meta || {}).isFacade) {
@@ -393,9 +416,10 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
       });
     }
 
-    return Array.from((currentMod || originalMod).importers).some(importer =>
-      // eslint-disable-next-line no-unused-vars
-      isDirectImportInServer(originalMod, importer, accModInfo),
+    return Array.from((currentMod || originalMod).importers || []).some(
+      importer =>
+        // eslint-disable-next-line no-unused-vars
+        isDirectImportInServer(originalMod, importer, accModInfo),
     );
   }
 

From ca10c2146e393f65c980d651794ed08d4e8b5745 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 17 Jun 2022 18:32:53 +0900
Subject: [PATCH 74/87] Fix HMR when mixing server and client components in
 facade files

---
 .../src/ReactFlightVitePlugin.js               | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index f467d3628b2..8dc25b5251d 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -35,8 +35,9 @@ export default function ReactFlightVitePlugin({
 }: PluginOptions = {}) {
   let config;
   let server;
-  let globImporterPath;
   let resolveAlias;
+  let globImporterPath;
+  const allClientBoundaries = new Set();
 
   return {
     name: 'vite-plugin-react-server-components',
@@ -182,7 +183,7 @@ export default function ReactFlightVitePlugin({
             .map(
               glob =>
                 // Mark the globs to modify the result after Vite resolves them.
-                `/* HASH_BEGIN */ ` +
+                `\n/* HASH_BEGIN */ ` +
                 `import.meta.glob('${normalizePath(glob)}') /* HASH_END */`,
             )
             .join(', ')});`;
@@ -197,7 +198,18 @@ export default function ReactFlightVitePlugin({
 
         if (config.command === 'serve') {
           globImporterPath = id;
-          return injectGlobs(findClientBoundaries(server.moduleGraph));
+
+          // When mixing client and server components from the same
+          // facade file, the module graph can break and miss certain
+          // import connections (bug in Vite?) due to HMR. Instead of
+          // creating a new list of discovered components from scratch,
+          // reuse the already discovered ones and simply add new ones
+          // to the list without removing anything.
+          findClientBoundaries(server.moduleGraph).forEach(boundary =>
+            allClientBoundaries.add(boundary),
+          );
+
+          return injectGlobs(Array.from(allClientBoundaries));
         }
 
         if (!serverBuildEntries) {

From f141a3f0baa12d35de995e9bea938c0365447502 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 17 Jun 2022 21:09:49 +0900
Subject: [PATCH 75/87] Dispatcher could be undefined in some weird scenarios

---
 packages/react-server-dom-vite/src/ClientProxy.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ClientProxy.js b/packages/react-server-dom-vite/src/ClientProxy.js
index ab312099fec..42b2ae84fc8 100644
--- a/packages/react-server-dom-vite/src/ClientProxy.js
+++ b/packages/react-server-dom-vite/src/ClientProxy.js
@@ -32,7 +32,8 @@ export const FN_RSC_ERROR =
   'Functions exported from client components cannot be called or used as constructors from a server component.';
 
 export function isRsc() {
-  return !!ReactSharedInternals.ReactCurrentDispatcher.current.isRsc;
+  const currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher.current;
+  return !!(currentDispatcher && currentDispatcher.isRsc);
 }
 
 function createModuleReference(id, value, name, isDefault) {

From 2f959b3d6f5d92a02ea015ef532737cc33635689 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 17 Jun 2022 21:26:03 +0900
Subject: [PATCH 76/87] Fix file alias resolution

---
 .../react-server-dom-vite/src/ReactFlightVitePlugin.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 8dc25b5251d..5bfbfbcea8d 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -517,10 +517,15 @@ function augmentModuleGraph(
       if (resolveAlias) {
         const resolvedAliasPath = resolveAlias(modPath, 'rsc_importer', {});
         if (resolvedAliasPath && resolvedAliasPath.id) {
-          modPath = normalizePath(path.join(root, resolvedAliasPath.id));
+          modPath = resolvedAliasPath.id;
         }
       }
 
+      if (modPath && modPath.startsWith('/src/')) {
+        // Vite default alias
+        modPath = normalizePath(path.join(root, modPath));
+      }
+
       const resolvedPath = resolveModPath(modPath, dirname);
       if (!resolvedPath) return; // Virtual modules or other exceptions
 

From ed732abff8922e7d5b5dbb1cd55c0030cddbb89b Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 21 Jun 2022 13:29:50 +0900
Subject: [PATCH 77/87] Refresh glob importer on error

---
 .../src/ReactFlightClientViteBundlerConfig.js | 12 +++++++---
 .../src/ReactFlightVitePlugin.js              | 23 +++++++++++++++----
 .../src/ViteImportMeta.js                     |  1 +
 .../src/__tests__/ReactFlightDOM-test.js      |  4 ++++
 .../__tests__/ReactFlightDOMBrowser-test.js   |  4 ++++
 .../ReactFlightDOMClientProxy-test.js         |  4 ++++
 .../ReactFlightDOMVitePlugin-test.js          |  4 ++++
 7 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-server-dom-vite/src/ViteImportMeta.js

diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
index c1a1c1e6e39..09e3ac6b341 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -9,6 +9,7 @@
 
 import type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
 export type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
+import {META_HOT} from './ViteImportMeta';
 
 export opaque type ModuleMetaData = {
   id: string,
@@ -40,9 +41,14 @@ function importClientComponent(moduleId: string): Promise<any> {
   const modImport = allClientComponents[moduleId];
 
   if (!modImport) {
-    return Promise.reject(
-      new Error(`Could not find client component ${moduleId}`),
-    );
+    const error = new Error(`Could not find client component ${moduleId}`);
+
+    if (META_HOT) {
+      META_HOT.send('rsc:cc404', {id: moduleId});
+      return new Promise((_, reject) => setTimeout(() => reject(error), 200));
+    }
+
+    return Promise.reject(error);
   }
 
   return typeof modImport === 'function'
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 5bfbfbcea8d..3541818b604 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -39,12 +39,26 @@ export default function ReactFlightVitePlugin({
   let globImporterPath;
   const allClientBoundaries = new Set();
 
+  function invalidateGlobImporter() {
+    if (globImporterPath && server) {
+      server.watcher.emit('change', globImporterPath);
+    }
+  }
+
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
 
     configureServer(_server: any) {
       server = _server;
+
+      const seenModules = {};
+      server.ws.on('rsc:cc404', data => {
+        if (!seenModules[data.id]) {
+          seenModules[data.id] = true;
+          invalidateGlobImporter();
+        }
+      });
     },
 
     async configResolved(_config: any) {
@@ -123,11 +137,10 @@ export default function ReactFlightVitePlugin({
         if (!moduleNode.meta) moduleNode.meta = {};
         if (!moduleNode.meta.isClientComponent) {
           moduleNode.meta.isClientComponent = true;
-          if (globImporterPath) {
-            // Invalidate glob importer file to account for the
-            // newly discovered client component.
-            server.watcher.emit('change', globImporterPath);
-          }
+
+          // Invalidate glob importer file to account for the
+          // newly discovered client component.
+          invalidateGlobImporter();
         }
       }
 
diff --git a/packages/react-server-dom-vite/src/ViteImportMeta.js b/packages/react-server-dom-vite/src/ViteImportMeta.js
new file mode 100644
index 00000000000..4606d1d86dc
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ViteImportMeta.js
@@ -0,0 +1 @@
+export const META_HOT = import.meta.hot;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index a6585fc2338..7cfc180adaa 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -9,6 +9,10 @@
 
 'use strict';
 
+jest.mock('../ViteImportMeta', () => {
+  return {META_HOT: null};
+});
+
 // Polyfills for test environment
 global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextDecoder = require('util').TextDecoder;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 3d048efaa41..1b8c2392904 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -9,6 +9,10 @@
 
 'use strict';
 
+jest.mock('../ViteImportMeta', () => {
+  return {META_HOT: null};
+});
+
 // Polyfills for test environment
 global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 35356869579..65f3929e9b4 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -17,6 +17,10 @@ const name = 'Counter';
 
 const mockedDispatcher = {isRsc: true};
 
+jest.mock('../ViteImportMeta', () => {
+  return {META_HOT: null};
+});
+
 jest.mock('react', () => {
   const actualModule = jest.requireActual('react');
   return {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index e29bf63705c..a83b582d648 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -11,6 +11,10 @@
 
 let proxyClientComponent, getComponentId;
 
+jest.mock('../ViteImportMeta', () => {
+  return {META_HOT: null};
+});
+
 describe('ReactFlightVitePlugin', () => {
   beforeEach(() => {
     jest.resetModules();

From 9e25cc65951eba42b0f4117442add2ed9b567551 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 21 Jun 2022 13:30:46 +0900
Subject: [PATCH 78/87] Refresh glob importer when changing server files

---
 .../src/ReactFlightVitePlugin.js              | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 3541818b604..a6a0936d356 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -151,6 +151,10 @@ export default function ReactFlightVitePlugin({
       // Add more information for this module in the graph.
       // It will be used later to discover client boundaries.
       if (server && options.ssr && /\.[jt]sx?($|\?)/.test(id)) {
+        const {
+          meta: {imports: importsPre = []} = {},
+        } = server.moduleGraph.getModuleById(id);
+
         augmentModuleGraph(
           server.moduleGraph,
           id,
@@ -158,6 +162,21 @@ export default function ReactFlightVitePlugin({
           config.root,
           resolveAlias,
         );
+
+        if (globImporterPath && !/\/node_modules\//.test(id)) {
+          const {
+            meta: {imports: importsPost = []} = {},
+          } = server.moduleGraph.getModuleById(id);
+          const importsPrePaths = importsPre.map(i => i.from + i.variables);
+
+          if (
+            !importsPost.every(i =>
+              importsPrePaths.includes(i.from + i.variables),
+            )
+          ) {
+            invalidateGlobImporter();
+          }
+        }
       }
 
       /**

From 3238c03467554a6e98909f3dd568e47fcdafadd5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 21 Jun 2022 16:37:54 +0900
Subject: [PATCH 79/87] Make the boundaries optimization optional

---
 .../src/ReactFlightVitePlugin.js              | 49 ++++++++-----------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index a6a0936d356..07abfc5de72 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -18,6 +18,7 @@ import path from 'path';
 
 type PluginOptions = {
   serverBuildEntries: string[],
+  optimizeBoundaries: boolean | 'build',
   isServerComponentImporterAllowed?: (
     importer: string,
     source: string,
@@ -31,6 +32,7 @@ const isClientComponent = id => /\.client\.[jt]sx?($|\?)/.test(id);
 
 export default function ReactFlightVitePlugin({
   serverBuildEntries,
+  optimizeBoundaries = 'build',
   isServerComponentImporterAllowed = importer => false,
 }: PluginOptions = {}) {
   let config;
@@ -151,10 +153,6 @@ export default function ReactFlightVitePlugin({
       // Add more information for this module in the graph.
       // It will be used later to discover client boundaries.
       if (server && options.ssr && /\.[jt]sx?($|\?)/.test(id)) {
-        const {
-          meta: {imports: importsPre = []} = {},
-        } = server.moduleGraph.getModuleById(id);
-
         augmentModuleGraph(
           server.moduleGraph,
           id,
@@ -162,21 +160,6 @@ export default function ReactFlightVitePlugin({
           config.root,
           resolveAlias,
         );
-
-        if (globImporterPath && !/\/node_modules\//.test(id)) {
-          const {
-            meta: {imports: importsPost = []} = {},
-          } = server.moduleGraph.getModuleById(id);
-          const importsPrePaths = importsPre.map(i => i.from + i.variables);
-
-          if (
-            !importsPost.every(i =>
-              importsPrePaths.includes(i.from + i.variables),
-            )
-          ) {
-            invalidateGlobImporter();
-          }
-        }
       }
 
       /**
@@ -237,9 +220,10 @@ export default function ReactFlightVitePlugin({
           // creating a new list of discovered components from scratch,
           // reuse the already discovered ones and simply add new ones
           // to the list without removing anything.
-          findClientBoundaries(server.moduleGraph).forEach(boundary =>
-            allClientBoundaries.add(boundary),
-          );
+          findClientBoundaries(
+            server.moduleGraph,
+            optimizeBoundaries === true,
+          ).forEach(boundary => allClientBoundaries.add(boundary));
 
           return injectGlobs(Array.from(allClientBoundaries));
         }
@@ -250,9 +234,10 @@ export default function ReactFlightVitePlugin({
           );
         }
 
-        return findClientBoundariesForClientBuild(serverBuildEntries).then(
-          injectGlobs,
-        );
+        return findClientBoundariesForClientBuild(
+          serverBuildEntries,
+          optimizeBoundaries !== false,
+        ).then(injectGlobs);
       }
     },
   };
@@ -322,7 +307,7 @@ export async function proxyClientComponent(filepath: string, src?: string) {
   return {code: proxyCode, moduleSideEffects: false};
 }
 
-function findClientBoundaries(moduleGraph: any) {
+function findClientBoundaries(moduleGraph: any, optimizeBoundaries = false) {
   const clientBoundaries = [];
 
   // eslint-disable-next-line no-for-of-loops/no-for-of-loops
@@ -331,7 +316,10 @@ function findClientBoundaries(moduleGraph: any) {
       moduleNode => moduleNode.meta && moduleNode.meta.isClientComponent,
     );
 
-    if (clientModule && isDirectImportInServer(clientModule)) {
+    if (
+      clientModule &&
+      (!optimizeBoundaries || isDirectImportInServer(clientModule))
+    ) {
       clientBoundaries.push(clientModule.file);
     }
   }
@@ -339,7 +327,10 @@ function findClientBoundaries(moduleGraph: any) {
   return clientBoundaries;
 }
 
-async function findClientBoundariesForClientBuild(serverEntries: string[]) {
+async function findClientBoundariesForClientBuild(
+  serverEntries: string[],
+  optimizeBoundaries: boolean,
+) {
   // Viteception
   const server = await createServer({
     clearScreen: false,
@@ -356,7 +347,7 @@ async function findClientBoundariesForClientBuild(serverEntries: string[]) {
 
   await server.close();
 
-  return findClientBoundaries(server.moduleGraph);
+  return findClientBoundaries(server.moduleGraph, optimizeBoundaries);
 }
 
 const hashImportsPlugin = {

From 81da17d588651a77846f1d35c7a2429ffab2d826 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 21 Jun 2022 16:56:37 +0900
Subject: [PATCH 80/87] Support re-exports in non-facade files

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 07abfc5de72..9a6d4fce83d 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -474,7 +474,6 @@ function isDirectImportInServer(
   // the original module before marking it as client boundary.
   return currentMod.meta.imports.some(
     imp =>
-      imp.action === 'import' &&
       imp.from === accModInfo.file &&
       (imp.variables || []).some(([name]) => accModInfo.exports.includes(name)),
   );

From 94101cbd8ea583a64282675f1c1a74be38ec0c0a Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 22 Jun 2022 17:23:33 +0900
Subject: [PATCH 81/87] Remove Jest line from prod build

---
 .../src/ReactFlightClientViteBundlerConfig.js                 | 4 ++--
 packages/react-server-dom-vite/src/ViteImportMeta.js          | 1 +
 .../src/__tests__/ReactFlightDOM-test.js                      | 2 +-
 .../src/__tests__/ReactFlightDOMBrowser-test.js               | 2 +-
 .../src/__tests__/ReactFlightDOMClientProxy-test.js           | 2 +-
 .../src/__tests__/ReactFlightDOMVitePlugin-test.js            | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
index 09e3ac6b341..d539a954817 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientViteBundlerConfig.js
@@ -9,7 +9,7 @@
 
 import type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
 export type {BundlerConfig} from './ReactFlightServerViteBundlerConfig';
-import {META_HOT} from './ViteImportMeta';
+import {META_HOT, META_ENV_DEV} from './ViteImportMeta';
 
 export opaque type ModuleMetaData = {
   id: string,
@@ -33,7 +33,7 @@ const allClientComponents: any = {
 
 // Mock client component imports during testing
 declare var jest: {};
-if (typeof jest !== 'undefined') {
+if (META_ENV_DEV && typeof jest !== 'undefined') {
   global.allClientComponents = allClientComponents;
 }
 
diff --git a/packages/react-server-dom-vite/src/ViteImportMeta.js b/packages/react-server-dom-vite/src/ViteImportMeta.js
index 4606d1d86dc..6fc277f8dbe 100644
--- a/packages/react-server-dom-vite/src/ViteImportMeta.js
+++ b/packages/react-server-dom-vite/src/ViteImportMeta.js
@@ -1 +1,2 @@
 export const META_HOT = import.meta.hot;
+export const META_ENV_DEV = import.meta.env.DEV;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index 7cfc180adaa..c1fbb0c15cc 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 jest.mock('../ViteImportMeta', () => {
-  return {META_HOT: null};
+  return {META_HOT: null, META_ENV_DEV: true};
 });
 
 // Polyfills for test environment
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 1b8c2392904..887d061fc32 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 jest.mock('../ViteImportMeta', () => {
-  return {META_HOT: null};
+  return {META_HOT: null, META_ENV_DEV: true};
 });
 
 // Polyfills for test environment
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
index 65f3929e9b4..f1a9ecefed1 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMClientProxy-test.js
@@ -18,7 +18,7 @@ const name = 'Counter';
 const mockedDispatcher = {isRsc: true};
 
 jest.mock('../ViteImportMeta', () => {
-  return {META_HOT: null};
+  return {META_HOT: null, META_ENV_DEV: true};
 });
 
 jest.mock('react', () => {
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
index a83b582d648..23fd52280ca 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMVitePlugin-test.js
@@ -12,7 +12,7 @@
 let proxyClientComponent, getComponentId;
 
 jest.mock('../ViteImportMeta', () => {
-  return {META_HOT: null};
+  return {META_HOT: null, META_ENV_DEV: true};
 });
 
 describe('ReactFlightVitePlugin', () => {

From 70deae984f908dd03a884576985eaaf619e3e166 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 11 Jul 2022 17:08:32 +0900
Subject: [PATCH 82/87] Fix HMR in client components

---
 .../src/ReactFlightVitePlugin.js                  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 9a6d4fce83d..559acd16455 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -240,6 +240,14 @@ export default function ReactFlightVitePlugin({
         ).then(injectGlobs);
       }
     },
+
+    handleHotUpdate({modules}) {
+      if (modules.some(mod => mod.meta && mod.meta.isClientComponent)) {
+        return modules.filter(mod => !mod.meta || !mod.meta.ssr);
+      }
+
+      return modules;
+    },
   };
 }
 
@@ -576,5 +584,10 @@ function augmentModuleGraph(
     currentModule.meta = {};
   }
 
-  Object.assign(currentModule.meta, {isFacade, namedExports, imports});
+  Object.assign(currentModule.meta, {
+    isFacade,
+    namedExports,
+    imports,
+    ssr: true,
+  });
 }

From 52ba1159e5a388624d5ea67b10a15adfff6f2576 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 5 Aug 2022 12:54:29 +0200
Subject: [PATCH 83/87] Add env var to detect RSC builds

---
 .../react-server-dom-vite/src/ReactFlightVitePlugin.js    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 559acd16455..ed3f206d038 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -50,7 +50,13 @@ export default function ReactFlightVitePlugin({
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
-
+    buildStart() {
+      // Let other plugins differentiate between pure SSR and RSC builds
+      if (config?.build?.ssr) process.env.VITE_RSC_BUILD = 'true';
+    },
+    buildEnd() {
+      if (config?.build?.ssr) delete process.env.VITE_RSC_BUILD;
+    },
     configureServer(_server: any) {
       server = _server;
 

From 5ba81eb5fa564f432c9b08202d62814036f1be49 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 16 Aug 2022 20:26:54 +0200
Subject: [PATCH 84/87] Pass root to every Vite instance

---
 packages/react-server-dom-vite/src/ReactFlightVitePlugin.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index ed3f206d038..6e1f35148d8 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -243,6 +243,7 @@ export default function ReactFlightVitePlugin({
         return findClientBoundariesForClientBuild(
           serverBuildEntries,
           optimizeBoundaries !== false,
+          config.root,
         ).then(injectGlobs);
       }
     },
@@ -344,9 +345,11 @@ function findClientBoundaries(moduleGraph: any, optimizeBoundaries = false) {
 async function findClientBoundariesForClientBuild(
   serverEntries: string[],
   optimizeBoundaries: boolean,
+  root: string,
 ) {
   // Viteception
   const server = await createServer({
+    root,
     clearScreen: false,
     server: {middlewareMode: 'ssr'},
   });

From baec73c9c40abb640a921e3d9709879167127862 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 17 Aug 2022 14:37:14 +0200
Subject: [PATCH 85/87] Abort Flight

---
 .../src/ReactFlightDOMServerBrowser.js        | 18 ++++-
 .../src/ReactFlightDOMServerNode.js           |  5 ++
 .../src/__tests__/ReactFlightDOM-test.js      | 76 ++++++++++++++++---
 .../__tests__/ReactFlightDOMBrowser-test.js   | 74 +++++++++++++++++-
 4 files changed, 157 insertions(+), 16 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
index e5af872ec72..3cdbe1736da 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerBrowser.js
@@ -16,12 +16,14 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFlightServer';
 
 type Options = {
-  onError?: (error: mixed) => void,
-  context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
+  signal?: AbortSignal,
+  context?: Array<[string, ServerContextJSONValue]>,
+  onError?: (error: mixed) => void,
 };
 
 function renderToReadableStream(
@@ -45,6 +47,18 @@ function renderToReadableStream(
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,
   );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
   const stream = new ReadableStream(
     {
       type: 'bytes',
diff --git a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
index 2c95221ac34..d2110102369 100644
--- a/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-vite/src/ReactFlightDOMServerNode.js
@@ -17,6 +17,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFlightServer';
 
 function createDrainHandler(destination, request) {
@@ -30,6 +31,7 @@ type Options = {
 };
 
 type PipeableStream = {|
+  abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
 |};
 
@@ -68,6 +70,9 @@ function renderToPipeableStream(
       destination.on('drain', createDrainHandler(destination, request));
       return destination;
     },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
   };
 }
 
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
index c1fbb0c15cc..f10d7f01416 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -31,6 +31,7 @@ let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let ClientProxy;
+let Suspense;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -42,6 +43,7 @@ describe('ReactFlightDOM', () => {
     ReactServerDOMWriter = require('react-server-dom-vite/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-vite');
     ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
+    Suspense = React.Suspense;
 
     // Reset modules
     viteModules = global.allClientComponents;
@@ -95,6 +97,11 @@ describe('ReactFlightDOM', () => {
     }
   }
 
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
   it('should resolve HTML using Node streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -133,8 +140,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should resolve the root', async () => {
-    const {Suspense} = React;
-
     // Model
     function Text({children}) {
       return <span>{children}</span>;
@@ -181,8 +186,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should not get confused by $', async () => {
-    const {Suspense} = React;
-
     // Model
     function RootModel() {
       return {text: '$1'};
@@ -214,8 +217,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should not get confused by @', async () => {
-    const {Suspense} = React;
-
     // Model
     function RootModel() {
       return {text: '@div'};
@@ -248,8 +249,6 @@ describe('ReactFlightDOM', () => {
 
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
-    const {Suspense} = React;
-
     // Client Components
 
     class ErrorBoundary extends React.Component {
@@ -447,8 +446,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should preserve state of client components on refetch', async () => {
-    const {Suspense} = React;
-
     // Client
 
     function Page({response}) {
@@ -530,4 +527,63 @@ describe('ReactFlightDOM', () => {
     expect(inputB.tagName).toBe('INPUT');
     expect(inputB.value).toBe('goodbye');
   });
+
+  it('should be able to complete after aborting and throw the reason client-side', async () => {
+    const reportedErrors = [];
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe, abort} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(async () => {
+      abort('for reasons');
+    });
+    expect(container.innerHTML).toBe('<p>Error: for reasons</p>');
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
 });
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
index 887d061fc32..43962c44a88 100644
--- a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -27,6 +27,7 @@ let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let ClientProxy;
+let Suspense;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
@@ -38,6 +39,7 @@ describe('ReactFlightDOMBrowser', () => {
     ReactServerDOMWriter = require('react-server-dom-vite/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-vite');
     ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
+    Suspense = React.Suspense;
 
     // Reset modules
     viteModules = global.allClientComponents;
@@ -168,10 +170,13 @@ describe('ReactFlightDOMBrowser', () => {
     });
   });
 
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
-    const {Suspense} = React;
-
     // Client Components
 
     class ErrorBoundary extends React.Component {
@@ -342,8 +347,6 @@ describe('ReactFlightDOMBrowser', () => {
   });
 
   it('should close the stream upon completion when rendering to W3C streams', async () => {
-    const {Suspense} = React;
-
     // Model
     function Text({children}) {
       return children;
@@ -450,4 +453,67 @@ describe('ReactFlightDOMBrowser', () => {
     // Final pending chunk is written; stream should be closed.
     expect(isDone).toBeTruthy();
   });
+
+  it('should be able to complete after aborting and throw the reason client-side', async () => {
+    const reportedErrors = [];
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    }
+
+    const controller = new AbortController();
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(async () => {
+      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+      // The abort call itself should set this property but since we are testing in node we
+      // set it here manually
+      controller.signal.reason = 'for reasons';
+      controller.abort('for reasons');
+    });
+    expect(container.innerHTML).toBe('<p>Error: for reasons</p>');
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
 });

From 12956393f762fcc751f99a37ab0763124c7f44d5 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 17 Aug 2022 16:16:02 +0200
Subject: [PATCH 86/87] Fix alias resolving in some situations

---
 .../src/ReactFlightVitePlugin.js              | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 6e1f35148d8..7ed53f41c0f 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -496,29 +496,36 @@ function isDirectImportInServer(
   );
 }
 
-function resolveModPath(
-  modPath: string,
-  dirname: string,
-  retryExtension?: string,
-) {
-  let absolutePath = '';
-  try {
-    absolutePath = modPath.startsWith('.')
-      ? normalizePath(path.resolve(dirname, modPath))
-      : modPath;
-
-    return normalizePath(
-      require.resolve(absolutePath + (retryExtension || '')),
-    );
-  } catch (error) {
-    if (!/\.[jt]sx?$/.test(absolutePath) && retryExtension !== '.tsx') {
-      // Node cannot infer .[jt]sx extensions.
-      // Append them here and retry a couple of times.
-      return resolveModPath(
-        absolutePath,
-        dirname,
-        retryExtension ? '.tsx' : '.jsx',
-      );
+const RESOLVE_EXTENSIONS = [
+  '',
+  '.js',
+  '.ts',
+  '.jsx',
+  '.tsx',
+  '/index',
+  '/index.js',
+  '/index.ts',
+  '/index.jsx',
+  '/index.tsx',
+];
+
+// Resolve relative paths  and aliases. Examples:
+// - import {XYZ} from '~/components' => import {XYZ} from '<absolute>/src/components/index.ts'
+// - import {XYZ} from '/src/component.client' => import {XYZ} from '<absolute>/src/component.client.jsx'`
+function resolveModPath(modPath: string, dirname: string) {
+  const extensions = /\.[jt]sx?$/.test(modPath) ? [''] : RESOLVE_EXTENSIONS;
+
+  for (let i = 0; i < extensions.length; i++) {
+    const extension = extensions[i];
+
+    try {
+      const absolutePath = modPath.startsWith('.')
+        ? normalizePath(path.resolve(dirname, modPath))
+        : modPath;
+
+      return normalizePath(require.resolve(absolutePath + extension));
+    } catch (error) {
+      // Do not throw, this is likely a virtual module or another exception
     }
   }
 }

From e03c8ccbdface50a648f9954a35fcfb25893d286 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 17 Aug 2022 16:25:37 +0200
Subject: [PATCH 87/87] Support Vite 3

---
 packages/react-server-dom-vite/package.json         |  4 ++--
 .../src/ReactFlightVitePlugin.js                    | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/react-server-dom-vite/package.json b/packages/react-server-dom-vite/package.json
index 8d6b4635793..a318749375c 100644
--- a/packages/react-server-dom-vite/package.json
+++ b/packages/react-server-dom-vite/package.json
@@ -54,8 +54,8 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0",
-    "vite": "^2.7.1"
+    "react": "^17.0.0 || ^18.0.0",
+    "vite": "^2.7.1 || ^3.0.7"
   },
   "dependencies": {
     "es-module-lexer": "^0.9.3",
diff --git a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
index 7ed53f41c0f..8526531aa49 100644
--- a/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
+++ b/packages/react-server-dom-vite/src/ReactFlightVitePlugin.js
@@ -10,12 +10,15 @@
 // $FlowFixMe[module-missing]
 import {init, parse} from 'es-module-lexer';
 import MagicString from 'magic-string';
-// $FlowFixMe[module-missing]
-import {normalizePath, transformWithEsbuild, createServer} from 'vite';
 
 import {promises as fs} from 'fs';
 import path from 'path';
 
+// $FlowFixMe[module-missing]
+import * as vite from 'vite';
+const {normalizePath, transformWithEsbuild, createServer} = vite;
+const isVite3 = vite.version && vite.version.startsWith('3.');
+
 type PluginOptions = {
   serverBuildEntries: string[],
   optimizeBoundaries: boolean | 'build',
@@ -351,7 +354,8 @@ async function findClientBoundariesForClientBuild(
   const server = await createServer({
     root,
     clearScreen: false,
-    server: {middlewareMode: 'ssr'},
+    server: {middlewareMode: isVite3 ? true : 'ssr', hmr: false},
+    appType: 'custom',
   });
 
   try {
@@ -380,7 +384,8 @@ const hashImportsPlugin = {
         function(_, imports) {
           return imports
             .trim()
-            .replace(/"([^"]+?)":/gm, function(__, relativePath) {
+            .replace(/"([^"]+?)":/gm, function(all, relativePath) {
+              if (relativePath === '__VITE_PRELOAD__') return all;
               const absolutePath = path.resolve(
                 path.dirname(id.split('?')[0]),
                 relativePath,