[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

@@ -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>
-  );
-}

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',
     },

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, () => {

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>
+  );
+}

fixtures/flight/src/Container.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function Container({children}) {
+  return <div>{children}</div>;
+}

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>
+  );
 }

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>;
+}

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';