[Flight] Minimal webpack plugin (#20228)

Author: gaearon

fixtures/flight/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

fixtures/flight/server/handler.server.js

@@ -1,51 +1,20 @@
 'use strict';
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
+import {readFileSync} from 'fs';
+import {resolve} from 'path';
 import * as React from 'react';
 
-import url from 'url';
-
-function resolve(path) {
-  return url.pathToFileURL(require.resolve(path)).href;
-}
-
 module.exports = async function(req, res) {
-  res.setHeader('Access-Control-Allow-Origin', '*');
   const m = await import('../src/App.server.js');
   // const m = require('../src/App.server.js');
   const App = m.default.default || m.default;
-  pipeToNodeWritable(<App />, res, {
-    // TODO: Read from a map on the disk.
-    [resolve('../src/Counter.client.js')]: {
-      Counter: {
-        id: './src/Counter.client.js',
-        chunks: ['2'],
-        name: 'Counter',
-      },
-    },
-    [resolve('../src/Counter2.client.js')]: {
-      Counter: {
-        id: './src/Counter2.client.js',
-        chunks: ['1'],
-        name: 'Counter',
-      },
-    },
-    [resolve('../src/ShowMore.client.js')]: {
-      default: {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: 'default',
-      },
-      '': {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: '',
-      },
-      '*': {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: '*',
-      },
-    },
-  });
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  const moduleMap = JSON.parse(
+    readFileSync(
+      resolve(__dirname, '../dist/react-transport-manifest.json'),
+      'utf8'
+    )
+  );
+  pipeToNodeWritable(<App />, res, moduleMap);
 };

fixtures/flight/src/index.js

@@ -19,5 +19,5 @@ ReactDOM.render(
 );
 
 // Create entry points for Client Components.
-// TODO: Webpack plugin should do this and write a map to disk.
+// TODO: Webpack plugin should do this.
 require.context('./', true, /\.client\.js$/, 'lazy');

packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js

@@ -7,7 +7,42 @@
  * @flow
  */
 
+import {mkdirSync, writeFileSync} from 'fs';
+import {dirname, resolve} from 'path';
+import {pathToFileURL} from 'url';
+
 export default class ReactFlightWebpackPlugin {
   constructor(options: {isServer: boolean}) {}
-  apply(compiler: any) {}
+
+  apply(compiler: any) {
+    compiler.hooks.emit.tap('React Transport Plugin', compilation => {
+      const json = {};
+      compilation.chunks.forEach(chunk => {
+        chunk.getModules().forEach(mod => {
+          if (!/\.client\.js$/.test(mod.resource)) {
+            return;
+          }
+          const moduleExports = {};
+          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
+            moduleExports[name] = {
+              id: mod.id,
+              chunks: chunk.ids,
+              name: name,
+            };
+          });
+          const href = pathToFileURL(mod.resource).href;
+          if (href !== undefined) {
+            json[href] = moduleExports;
+          }
+        });
+      });
+      const output = JSON.stringify(json, null, 2);
+      const filename = resolve(
+        compiler.options.output.path,
+        'react-transport-manifest.json',
+      );
+      mkdirSync(dirname(filename), {recursive: true});
+      writeFileSync(filename, output);
+    });
+  }
 }

scripts/rollup/bundles.js

@@ -283,7 +283,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-transport-dom-webpack/plugin',
     global: 'ReactFlightWebpackPlugin',
-    externals: [],
+    externals: ['fs', 'path', 'url'],
   },
 
   /******* React Transport DOM Webpack Node.js Loader *******/

scripts/rollup/modules.js

@@ -9,6 +9,8 @@ const {UMD_DEV, UMD_PROD, UMD_PROFILING} = require('./bundles').bundleTypes;
 const HAS_NO_SIDE_EFFECTS_ON_IMPORT = false;
 // const HAS_SIDE_EFFECTS_ON_IMPORT = true;
 const importSideEffects = Object.freeze({
+  fs: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  path: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'prop-types/checkPropTypes': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
@@ -17,6 +19,7 @@ const importSideEffects = Object.freeze({
   'react/jsx-dev-runtime': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-fetch/node': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-dom': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  url: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
 });
 
 // Bundles exporting globals that other modules rely on.