add react-server-dom-vite impl and fixture

.eslintrc.js

@@ -325,6 +325,7 @@ module.exports = {
         'packages/react-noop-renderer/**/*.js',
         'packages/react-refresh/**/*.js',
         'packages/react-server-dom-esm/**/*.js',
+        'packages/react-server-dom-vite/**/*.js',
         'packages/react-server-dom-webpack/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
@@ -416,7 +417,7 @@ module.exports = {
     },
     {
       files: [
-        'packages/react-native-renderer/**/*.js',
+        'packages/react-native-renderer/**/*.js'
       ],
       globals: {
         nativeFabricUIManager: 'readonly',
@@ -429,6 +430,13 @@ module.exports = {
         __webpack_require__: 'readonly',
       },
     },
+    {
+      files: ['packages/react-server-dom-vite/**/*.js'],
+      globals: {
+        __vite_preload__: 'readonly',
+        __vite_require__: 'readonly',
+      },
+    },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {

fixtures/flight-vite/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

fixtures/flight-vite/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "flight-vite",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "body-parser": "^1.20.1",
+    "browserslist": "^4.18.1",
+    "busboy": "^1.6.0",
+    "compression": "^1.7.4",
+    "concurrently": "^7.3.0",
+    "nodemon": "^2.0.19",
+    "prompts": "^2.4.2",
+    "react": "experimental",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "experimental",
+    "undici": "^5.20.0",
+    "vite": "^4.3.9"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "dev": "concurrently \"npm run dev:region\" \"npm run dev:global\"",
+    "dev:global": "NODE_ENV=development BUILD_PATH=dist node server/global",
+    "dev:region": "NODE_ENV=development BUILD_PATH=dist node --inspect --conditions=react-server server/region",
+    "start": "concurrently \"npm run start:region\" \"npm run start:global\"",
+    "start:global": "NODE_ENV=production node server/global",
+    "start:region": "NODE_ENV=production node --conditions=react-server server/region",
+    "build": "node scripts/build.js"
+  }
+}

fixtures/flight-vite/scripts/build.js

@@ -0,0 +1,181 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const {builtinModules} = require('module');
+
+function hash(str) {
+  let hash = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    hash += str.charCodeAt(i);
+  }
+
+  return hash;
+}
+
+async function build() {
+  const vite = await import('vite');
+  const {default: reactServer} = await import('react-server-dom-vite/plugin');
+  const serverModules = new Set();
+  const clientModules = new Set();
+
+  // Building the react server bundle, includes App entry point and
+  // server actions
+  let bundle = await vite.build({
+    build: {
+      rollupOptions: {
+        input: ['src/App.jsx'],
+        external: [...builtinModules.map(m => `node:${m}`)],
+        onwarn: (warning, warn) => {
+          // suppress warnings about source map issues for now
+          // these are caused originally by rollup trying to complain about directives
+          // in the middle of the files
+          // TODO: fix source map issues
+          if (warning.code === 'SOURCEMAP_ERROR') {
+            return;
+          }
+        },
+        output: {
+          // preserve the export names of the server actions in chunks
+          minifyInternalExports: false,
+          manualChunks: chunk => {
+            // server references should be emitted as separate chunks
+            // so that we can load them individually when server actions
+            // are called. we need to do this in manualChunks because we don't
+            // want to run a preanalysis pass just to identify these
+            if (serverModules.has(chunk)) {
+              return `${hash(chunk)}`;
+            }
+          },
+          format: 'cjs',
+          // we want to control the chunk names so that we can load them
+          // individually when server actions are called
+          chunkFileNames: '[name].cjs',
+        },
+      },
+      ssr: true,
+      ssrManifest: true,
+      ssrEmitAssets: true,
+      target: 'node18',
+      manifest: true,
+      outDir: 'build/react-server',
+    },
+    resolve: {
+      conditions: ['node', 'import', 'react-server', process.env.NODE_ENV],
+    },
+    plugins: [
+      reactServer({
+        hash,
+        onClientReference: id => {
+          clientModules.add(id);
+        },
+        onServerReference: id => {
+          serverModules.add(id);
+        },
+      }),
+    ],
+    ssr: {
+      noExternal: true,
+      external: ['react', 'react-dom', 'react-server-dom-vite'],
+    },
+  });
+
+  // Building the SSR server bundle, includes the client components for SSR
+  await vite.build({
+    build: {
+      rollupOptions: {
+        onwarn: (warning, warn) => {
+          // suppress warnings about source map issues for now
+          // these are caused originally by rollup trying to complain about directives
+          // in the middle of the files
+          // TODO: fix source map issues
+          if (warning.code === 'SOURCEMAP_ERROR') {
+            return;
+          }
+        },
+        input: {
+          entry: 'src/index.js',
+          ...Object.fromEntries(
+            [...clientModules.values()].map(c => [hash(c), c])
+          ),
+        },
+        output: {
+          entryFileNames: chunk => {
+            return chunk.name + '.cjs';
+          },
+          format: 'cjs',
+        },
+      },
+      ssr: true,
+      ssrManifest: true,
+      ssrEmitAssets: true,
+      target: 'node18',
+      manifest: true,
+      outDir: 'build/server',
+    },
+    ssr: {
+      external: ['react', 'react-dom', 'react-server-dom-vite'],
+    },
+  });
+
+  // Building the client bundle, includes the client entry point and client components for hydration
+  await vite.build({
+    build: {
+      rollupOptions: {
+        input: {
+          entry: 'src/index.js',
+          ...Object.fromEntries(
+            [...clientModules.values()].map(c => [hash(c), c])
+          ),
+        },
+        onwarn: (warning, warn) => {
+          // suppress warnings about source map issues for now
+          // these are caused originally by rollup trying to complain about directives
+          // in the middle of the files
+          // TODO: fix source map issues
+          if (warning.code === 'SOURCEMAP_ERROR') {
+            return;
+          }
+        },
+        output: {
+          // we want to control the names of the client component chunks
+          // so that we can load them individually when they are requested
+          entryFileNames: chunk => {
+            return chunk.name + '.js';
+          },
+        },
+        treeshake: true,
+        // required otherwise rollup will remove the exports since they are not used
+        // by the other entries
+        preserveEntrySignatures: 'exports-only',
+      },
+      ssrManifest: true,
+      target: 'esnext',
+      manifest: true,
+      outDir: 'build/static',
+    },
+    ssr: {
+      external: ['react', 'react-dom', 'react-server-dom-vite'],
+    },
+  });
+
+  // copy assets from react-server build to static build, this includes stylesheets improted from server components
+  await fs.promises.cp('build/react-server/assets', 'build/static/assets', {
+    recursive: true,
+  });
+}
+
+build();

fixtures/flight-vite/scripts/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

fixtures/flight-vite/scripts/test.js

@@ -0,0 +1,51 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', {stdio: 'ignore'});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', {stdio: 'ignore'});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+jest.run(argv);