[Flight] Expand the fixture to use require.extensions

fixtures/flight/server/handler.js → 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';