Skip to content

Commit f0cf832

Browse files
sebmarkbagesebmarkbage
authored
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.
1 parent 13f4ccf commit f0cf832

File tree

16 files changed

+247
-171
lines changed

16 files changed

+247
-171
lines changed

‎fixtures/flight-browser/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h1>Flight Example</h1>
2020
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
2121
<script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
2222
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
23-
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
23+
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
2424
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
2525
<script type="text/babel">
2626
let Suspense = React.Suspense;
@@ -60,7 +60,7 @@ <h1>Flight Example</h1>
6060
content: <HTML />,
6161
};
6262

63-
let stream = ReactServerDOMWriter.renderToReadableStream(model);
63+
let stream = ReactServerDOMServer.renderToReadableStream(model);
6464
let response = new Response(stream, {
6565
headers: {'Content-Type': 'text/html'},
6666
});
@@ -70,13 +70,13 @@ <h1>Flight Example</h1>
7070
let blob = await responseToDisplay.blob();
7171
let url = URL.createObjectURL(blob);
7272

73-
let data = ReactServerDOMReader.createFromFetch(
73+
let data = ReactServerDOMClient.createFromFetch(
7474
fetch(url)
7575
);
7676
// The client also supports XHR streaming.
7777
// var xhr = new XMLHttpRequest();
7878
// xhr.open('GET', url);
79-
// let data = ReactServerDOMReader.createFromXHR(xhr);
79+
// let data = ReactServerDOMClient.createFromXHR(xhr);
8080
// xhr.send();
8181

8282
renderResult(data);

‎fixtures/flight/config/webpack.config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,7 +752,14 @@ module.exports = function (webpackEnv) {
752752
// },
753753
// }),
754754
// Fork Start
755-
new ReactFlightWebpackPlugin({isServer: false}),
755+
new ReactFlightWebpackPlugin({
756+
isServer: false,
757+
clientReferences: {
758+
directory: './src',
759+
recursive: true,
760+
include: /\.(js|ts|jsx|tsx)$/,
761+
},
762+
}),
756763
// Fork End
757764
].filter(Boolean),
758765
// Turn off performance processing because we utilize

‎fixtures/flight/loader/index.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import {
22
resolve,
3-
getSource,
3+
load as reactLoad,
4+
getSource as getSourceImpl,
45
transformSource as reactTransformSource,
56
} from 'react-server-dom-webpack/node-loader';
67

7-
export {resolve, getSource};
8+
export {resolve};
89

910
import babel from '@babel/core';
1011

@@ -17,6 +18,23 @@ const babelOptions = {
1718
],
1819
};
1920

21+
async function babelLoad(url, context, defaultLoad) {
22+
const {format} = context;
23+
const result = await defaultLoad(url, context, defaultLoad);
24+
if (result.format === 'module') {
25+
const opt = Object.assign({filename: url}, babelOptions);
26+
const {code} = await babel.transformAsync(result.source, opt);
27+
return {source: code, format: 'module'};
28+
}
29+
return defaultLoad(url, context, defaultLoad);
30+
}
31+
32+
export async function load(url, context, defaultLoad) {
33+
return await reactLoad(url, context, (u, c) => {
34+
return babelLoad(u, c, defaultLoad);
35+
});
36+
}
37+
2038
async function babelTransformSource(source, context, defaultTransformSource) {
2139
const {format} = context;
2240
if (format === 'module') {
@@ -27,8 +45,12 @@ async function babelTransformSource(source, context, defaultTransformSource) {
2745
return defaultTransformSource(source, context, defaultTransformSource);
2846
}
2947

30-
export async function transformSource(source, context, defaultTransformSource) {
31-
return reactTransformSource(source, context, (s, c) => {
48+
async function transformSourceImpl(source, context, defaultTransformSource) {
49+
return await reactTransformSource(source, context, (s, c) => {
3250
return babelTransformSource(s, c, defaultTransformSource);
3351
});
3452
}
53+
54+
export const transformSource =
55+
process.version < 'v16' ? transformSourceImpl : undefined;
56+
export const getSource = process.version < 'v16' ? getSourceImpl : undefined;

‎fixtures/flight/server/cli.server.js‎ renamed to ‎fixtures/flight/server/cli.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const app = express();
2929

3030
// Application
3131
app.get('/', function (req, res) {
32-
require('./handler.server.js')(req, res);
32+
require('./handler.js')(req, res);
3333
});
3434

3535
app.get('/todos', function (req, res) {

‎fixtures/flight/server/handler.server.js‎ renamed to ‎fixtures/flight/server/handler.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const {resolve} = require('path');
66
const React = require('react');
77

88
module.exports = function (req, res) {
9-
// const m = require('../src/App.server.js');
10-
import('../src/App.server.js').then(m => {
9+
// const m = require('../src/App.js');
10+
import('../src/App.js').then(m => {
1111
const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
1212
readFile(
1313
resolve(__dirname, `../${dist}/react-client-manifest.json`),

‎fixtures/flight/server/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"type": "commonjs",
3-
"main": "./cli.server.js"
3+
"main": "./cli.js"
44
}

‎fixtures/flight/src/App.server.js‎ renamed to ‎fixtures/flight/src/App.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as React from 'react';
2-
import {fetch} from 'react-fetch';
32

43
import Container from './Container.js';
54

6-
import {Counter} from './Counter.client.js';
7-
import {Counter as Counter2} from './Counter2.client.js';
5+
import {Counter} from './Counter.js';
6+
import {Counter as Counter2} from './Counter2.js';
87

9-
import ShowMore from './ShowMore.client.js';
8+
import ShowMore from './ShowMore.js';
109

11-
export default function App() {
12-
const todos = fetch('http://localhost:3001/todos').json();
10+
export default async function App() {
11+
const res = await fetch('http://localhost:3001/todos');
12+
const todos = await res.json();
1313
return (
1414
<Container>
1515
<h1>Hello, world</h1>

‎fixtures/flight/src/Counter.client.js‎ renamed to ‎fixtures/flight/src/Counter.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import * as React from 'react';
24

35
import Container from './Container.js';

‎fixtures/flight/src/Counter2.client.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎fixtures/flight/src/Counter2.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use client';
2+
3+
export * from './Counter.js';

0 commit comments

Comments
 (0)