Update Flight Fixture to "use client" instead of .client.js (#26118)

This updates the Flight fixture to support the new ESM loaders in newer versions of Node.js. It also uses native fetch since react-fetch is gone now. (This part requires Node 18 to run the fixture.) I also updated everything to use the `"use client"` convention instead of file name based convention. The biggest hack here is that the Webpack plugin now just writes every `.js` file in the manifest. This needs to be more scoped. In practice, this new convention effectively requires you to traverse the server graph first to find the actual used files. This is enough to at least run our own fixture though. I didn't update the "blocks" fixture. More details in each commit message.
facebook · Feb 7, 2023 · f0cf832 · f0cf832
1 parent 13f4ccf
commit f0cf832
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 171 deletions.
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
@@ -20,7 +20,7 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;
@@ -60,7 +60,7 @@ <h1>Flight Example</h1>
         content: <HTML />,
       };
 
-      let stream = ReactServerDOMWriter.renderToReadableStream(model);
+      let stream = ReactServerDOMServer.renderToReadableStream(model);
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
@@ -70,13 +70,13 @@ <h1>Flight Example</h1>
         let blob = await responseToDisplay.blob();
         let url = URL.createObjectURL(blob);
 
-        let data = ReactServerDOMReader.createFromFetch(
+        let data = ReactServerDOMClient.createFromFetch(
           fetch(url)
         );
         // The client also supports XHR streaming.
         // var xhr = new XMLHttpRequest();
         // xhr.open('GET', url);
-        // let data = ReactServerDOMReader.createFromXHR(xhr);
+        // let data = ReactServerDOMClient.createFromXHR(xhr);
         // xhr.send();
 
         renderResult(data);

diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
@@ -752,7 +752,14 @@ module.exports = function (webpackEnv) {
       //     },
       //   }),
       // Fork Start
-      new ReactFlightWebpackPlugin({isServer: false}),
+      new ReactFlightWebpackPlugin({
+        isServer: false,
+        clientReferences: {
+          directory: './src',
+          recursive: true,
+          include: /\.(js|ts|jsx|tsx)$/,
+        },
+      }),
       // Fork End
     ].filter(Boolean),
     // Turn off performance processing because we utilize

diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
@@ -1,10 +1,11 @@
 import {
   resolve,
-  getSource,
+  load as reactLoad,
+  getSource as getSourceImpl,
   transformSource as reactTransformSource,
 } from 'react-server-dom-webpack/node-loader';
 
-export {resolve, getSource};
+export {resolve};
 
 import babel from '@babel/core';
 
@@ -17,6 +18,23 @@ const babelOptions = {
   ],
 };
 
+async function babelLoad(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const {code} = await babel.transformAsync(result.source, opt);
+    return {source: code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return babelLoad(u, c, defaultLoad);
+  });
+}
+
 async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
@@ -27,8 +45,12 @@ async function babelTransformSource(source, context, defaultTransformSource) {
   return defaultTransformSource(source, context, defaultTransformSource);
 }
 
-export async function transformSource(source, context, defaultTransformSource) {
-  return reactTransformSource(source, context, (s, c) => {
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
     return babelTransformSource(s, c, defaultTransformSource);
   });
 }
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined;
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined;
diff --git a/fixtures/flight/server/cli.server.js → fixtures/flight/server/cli.js b/fixtures/flight/server/cli.server.js → fixtures/flight/server/cli.js
@@ -29,7 +29,7 @@ const app = express();
 
 // Application
 app.get('/', function (req, res) {
-  require('./handler.server.js')(req, res);
+  require('./handler.js')(req, res);
 });
 
 app.get('/todos', function (req, res) {

diff --git a/fixtures/flight/server/handler.server.js → fixtures/flight/server/handler.js b/fixtures/flight/server/handler.server.js → fixtures/flight/server/handler.js
@@ -6,8 +6,8 @@ const {resolve} = require('path');
 const React = require('react');
 
 module.exports = function (req, res) {
-  // const m = require('../src/App.server.js');
-  import('../src/App.server.js').then(m => {
+  // const m = require('../src/App.js');
+  import('../src/App.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
     readFile(
       resolve(__dirname, `../${dist}/react-client-manifest.json`),

diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
@@ -1,4 +1,4 @@
 {
   "type": "commonjs",
-  "main": "./cli.server.js"
+  "main": "./cli.js"
 }
diff --git a/fixtures/flight/src/App.server.js → fixtures/flight/src/App.js b/fixtures/flight/src/App.server.js → fixtures/flight/src/App.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import {fetch} from 'react-fetch';
 
 import Container from './Container.js';
 
-import {Counter} from './Counter.client.js';
-import {Counter as Counter2} from './Counter2.client.js';
+import {Counter} from './Counter.js';
+import {Counter as Counter2} from './Counter2.js';
 
-import ShowMore from './ShowMore.client.js';
+import ShowMore from './ShowMore.js';
 
-export default function App() {
-  const todos = fetch('http://localhost:3001/todos').json();
+export default async function App() {
+  const res = await fetch('http://localhost:3001/todos');
+  const todos = await res.json();
   return (
     <Container>
       <h1>Hello, world</h1>

diff --git a/fixtures/flight/src/Counter.client.js → fixtures/flight/src/Counter.js b/fixtures/flight/src/Counter.client.js → fixtures/flight/src/Counter.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';

diff --git a/fixtures/flight/src/Counter2.client.js b/fixtures/flight/src/Counter2.client.js
diff --git a/fixtures/flight/src/Counter2.js b/fixtures/flight/src/Counter2.js
@@ -0,0 +1,3 @@
+'use client';
+
+export * from './Counter.js';
diff --git a/fixtures/flight/src/ShowMore.client.js → fixtures/flight/src/ShowMore.js b/fixtures/flight/src/ShowMore.client.js → fixtures/flight/src/ShowMore.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';