[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*asReactfrom'react';
 
-importurlfrom'url';
-
-functionresolve(path){
-returnurl.pathToFileURL(require.resolve(path)).href;
-}
-
 module.exports=asyncfunction(req,res){
-res.setHeader('Access-Control-Allow-Origin','*');
 constm=awaitimport('../src/App.server.js');
 // const m = require('../src/App.server.js');
 constApp=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','*');
+constmoduleMap=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';
+
 exportdefaultclassReactFlightWebpackPlugin{
 constructor(options: {isServer: boolean}){}
-apply(compiler: any){}
+
+apply(compiler: any){
+compiler.hooks.emit.tap('React Transport Plugin',compilation=>{
+constjson={};
+compilation.chunks.forEach(chunk=>{
+chunk.getModules().forEach(mod=>{
+if(!/\.client\.js$/.test(mod.resource)){
+return;
+}
+constmoduleExports={};
+['','*'].concat(mod.buildMeta.providedExports).forEach(name=>{
+moduleExports[name]={
+id: mod.id,
+chunks: chunk.ids,
+name: name,
+};
+});
+consthref=pathToFileURL(mod.resource).href;
+if(href!==undefined){
+json[href]=moduleExports;
+}
+});
+});
+constoutput=JSON.stringify(json,null,2);
+constfilename=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;
 constHAS_NO_SIDE_EFFECTS_ON_IMPORT=false;
 // const HAS_SIDE_EFFECTS_ON_IMPORT = true;
 constimportSideEffects=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.