From e11669da7c16a82173a2f927ee90f3a08609e6d1 Mon Sep 17 00:00:00 2001
From: Dan Abramov
Date: Tue, 3 Nov 2020 02:45:45 +0000
Subject: [PATCH] [Flight Fixture] Server + Client Components
---
fixtures/flight/server/App.server.js | 16 ++++++++++++++
fixtures/flight/server/handler.js | 31 ++++++++++-----------------
fixtures/flight/server/index.js | 1 +
fixtures/flight/src/App.js | 15 -------------
fixtures/flight/src/Counter.client.js | 6 ++++++
fixtures/flight/src/index.js | 18 +++++++++++++---
6 files changed, 49 insertions(+), 38 deletions(-)
create mode 100644 fixtures/flight/server/App.server.js
delete mode 100644 fixtures/flight/src/App.js
create mode 100644 fixtures/flight/src/Counter.client.js
diff --git a/fixtures/flight/server/App.server.js b/fixtures/flight/server/App.server.js
new file mode 100644
index 000000000000..72858c944779
--- /dev/null
+++ b/fixtures/flight/server/App.server.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+// TODO: A transform should read this from webpack plugin output.
+const CounterClient = {
+ $$typeof: Symbol.for('react.module.reference'),
+ name: './src/Counter.client.js',
+};
+
+export default function App() {
+ return (
+
+
Hello, world
+
+
+ );
+}
diff --git a/fixtures/flight/server/handler.js b/fixtures/flight/server/handler.js
index 25618543db4e..9a0c6004150d 100644
--- a/fixtures/flight/server/handler.js
+++ b/fixtures/flight/server/handler.js
@@ -1,26 +1,17 @@
'use strict';
-const ReactTransportDOMServer = require('react-transport-dom-webpack/server');
-const React = require('react');
-const Stream = require('stream');
-
-function Text({children}) {
- return {children};
-}
-
-function HTML() {
- return (
-
- Hello
- world
-
- );
-}
+import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
+import * as React from 'react';
+import App from './App.server';
module.exports = function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
- let model = {
- content: ,
- };
- ReactTransportDOMServer.pipeToNodeWritable(model, res);
+ pipeToNodeWritable(, res, {
+ // TODO: Read from a map on the disk.
+ './src/Counter.client.js': {
+ id: './src/Counter.client.js',
+ chunks: ['2'],
+ name: 'default',
+ },
+ });
};
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index 2388365eee39..016fe9f15dba 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -5,6 +5,7 @@ const babelRegister = require('@babel/register');
babelRegister({
ignore: [/\/(build|node_modules)\//],
presets: ['react-app'],
+ plugins: ['@babel/transform-modules-commonjs'],
});
const express = require('express');
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
deleted file mode 100644
index e3a7b558b35d..000000000000
--- a/fixtures/flight/src/App.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {Suspense} from 'react';
-
-function Content({data}) {
- return data.readRoot().content;
-}
-
-function App({data}) {
- return (
- Loading...}>
-
-
- );
-}
-
-export default App;
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
new file mode 100644
index 000000000000..8274f6134b5a
--- /dev/null
+++ b/fixtures/flight/src/Counter.client.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export default function Counter() {
+ const [count, setCount] = React.useState(0);
+ return ;
+}
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index c3e134c096b4..100164f5a461 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,10 +1,22 @@
-import React from 'react';
+import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import ReactTransportDOMClient from 'react-transport-dom-webpack';
-import App from './App';
let data = ReactTransportDOMClient.createFromFetch(
fetch('http://localhost:3001')
);
-ReactDOM.render(, document.getElementById('root'));
+function Content() {
+ return data.readRoot();
+}
+
+ReactDOM.render(
+ Loading...}>
+
+ ,
+ document.getElementById('root')
+);
+
+// Create entry points for Client Components.
+// TODO: Webpack plugin should do this and write a map to disk.
+require.context('./', true, /\.client\.js$/, 'lazy');