From e855f91e858d36758b8a67c8bd910c0971131451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 15:48:51 -0500
Subject: [PATCH] [Flight] Expand the fixture to use require.extensions
 (#20209)

* Expand fixture

Use .server convention. /server/index.js should really change too so it can be compiled but for now we treat it as bootstrapping code outside the compiled code.

Move App.server. It's part of the application code rather than the infra.

Add hybrid component used in both server/client and an extra component shared by multiple entry points.

* Use require.extensions to replace .client imports

The simplest server doesn't need AOT compilation. Instead we can just
configure require.extensions. This is probably not the best idea to use
in prod but is enough to show the set up.
---
 fixtures/flight/server/App.server.js          | 16 ----------------
 .../server/{handler.js => handler.server.js}  |  9 +++++++--
 fixtures/flight/server/index.js               |  9 ++++++++-
 fixtures/flight/src/App.server.js             | 19 +++++++++++++++++++
 fixtures/flight/src/Container.js              |  5 +++++
 fixtures/flight/src/Counter.client.js         |  8 +++++++-
 fixtures/flight/src/ShowMore.client.js        | 11 +++++++++++
 fixtures/flight/src/index.js                  |  3 ++-
 8 files changed, 59 insertions(+), 21 deletions(-)
 delete mode 100644 fixtures/flight/server/App.server.js
 rename fixtures/flight/server/{handler.js => handler.server.js} (62%)
 create mode 100644 fixtures/flight/src/App.server.js
 create mode 100644 fixtures/flight/src/Container.js
 create mode 100644 fixtures/flight/src/ShowMore.client.js

diff --git a/fixtures/flight/server/App.server.js b/fixtures/flight/server/App.server.js
deleted file mode 100644
index 72858c9447..0000000000
--- a/fixtures/flight/server/App.server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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.server.js
similarity index 62%
rename from fixtures/flight/server/handler.js
rename to fixtures/flight/server/handler.server.js
index 9a0c600415..f3b899d498 100644
--- a/fixtures/flight/server/handler.js
+++ b/fixtures/flight/server/handler.server.js
@@ -2,14 +2,19 @@
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
 import * as React from 'react';
-import App from './App.server';
+import App from '../src/App.server';
 
 module.exports = function(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   pipeToNodeWritable(<App />, res, {
     // TODO: Read from a map on the disk.
-    './src/Counter.client.js': {
+    [require.resolve('../src/Counter.client.js')]: {
       id: './src/Counter.client.js',
+      chunks: ['1'],
+      name: 'default',
+    },
+    [require.resolve('../src/ShowMore.client.js')]: {
+      id: './src/ShowMore.client.js',
       chunks: ['2'],
       name: 'default',
     },
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index 016fe9f15d..06c245b412 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -1,5 +1,12 @@
 'use strict';
 
+require.extensions['.client.js'] = function(module, path) {
+  module.exports = {
+    $$typeof: Symbol.for('react.module.reference'),
+    name: path,
+  };
+};
+
 const babelRegister = require('@babel/register');
 
 babelRegister({
@@ -18,7 +25,7 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  require('./handler')(req, res);
+  require('./handler.server')(req, res);
 });
 
 app.listen(3001, () => {
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
new file mode 100644
index 0000000000..bf3b20fa32
--- /dev/null
+++ b/fixtures/flight/src/App.server.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import Container from './Container';
+
+import Counter from './Counter.client';
+
+import ShowMore from './ShowMore.client';
+
+export default function App() {
+  return (
+    <Container>
+      <h1>Hello, world</h1>
+      <Counter />
+      <ShowMore>
+        <p>Lorem ipsum</p>
+      </ShowMore>
+    </Container>
+  );
+}
diff --git a/fixtures/flight/src/Container.js b/fixtures/flight/src/Container.js
new file mode 100644
index 0000000000..49875403c8
--- /dev/null
+++ b/fixtures/flight/src/Container.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function Container({children}) {
+  return <div>{children}</div>;
+}
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
index 8274f6134b..892af50df6 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.client.js
@@ -1,6 +1,12 @@
 import * as React from 'react';
 
+import Container from './Container';
+
 export default function Counter() {
   const [count, setCount] = React.useState(0);
-  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
+  return (
+    <Container>
+      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+    </Container>
+  );
 }
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.client.js
new file mode 100644
index 0000000000..d8ff151725
--- /dev/null
+++ b/fixtures/flight/src/ShowMore.client.js
@@ -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/src/index.js b/fixtures/flight/src/index.js
index 100164f5a4..ce9595dbe5 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,4 +1,5 @@
-import React, {Suspense} from 'react';
+import * as React from 'react';
+import {Suspense} from 'react';
 import ReactDOM from 'react-dom';
 import ReactTransportDOMClient from 'react-transport-dom-webpack';