facebook · frandiox · Dec 9, 2021 · Dec 9, 2021 · Dec 10, 2021 · Dec 10, 2021
diff --git 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',

diff --git a/ReactVersions.js b/ReactVersions.js
@@ -47,6 +47,7 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
+  'react-server-dom-vite',
 ];
 
 module.exports = {

diff --git a/fixtures/flight-vite/.env b/fixtures/flight-vite/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/fixtures/flight-vite/.gitignore 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
@@ -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
@@ -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
diff --git a/fixtures/flight-vite/server/api.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,49 @@
+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({serverBuildEntries: [RSC_ENTRY]}),
+
+    // 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);
+          });
+        };
+      },
+    },
+  ],
+});