[Flight Fixture] Server + Client Components (#20150)

gaearon · web-flow · commit 2af07d3f4d3b · 2020-11-03T03:00:23.000Z
diff --git a/fixtures/flight/server/App.server.js 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 (
+    <div>
+      <h1>Hello, world</h1>
+      <CounterClient />
+    </div>
+  );
+}
diff --git 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 <span>{children}</span>;
-}
-
-function HTML() {
-  return (
-    <div>
-      <Text>Hello</Text>
-      <Text>world</Text>
-    </div>
-  );
-}
+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: <HTML />,
-  };
-  ReactTransportDOMServer.pipeToNodeWritable(model, res);
+  pipeToNodeWritable(<App />, 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
@@ -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
diff --git a/fixtures/flight/src/Counter.client.js 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 <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
+}
diff --git 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(<App data={data} />, document.getElementById('root'));
+function Content() {
+  return data.readRoot();
+}
+
+ReactDOM.render(
+  <Suspense fallback={<h1>Loading...</h1>}>
+    <Content />
+  </Suspense>,
+  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');
