Flight: Support Webpack v5

package.json

@@ -139,5 +139,8 @@
     "version-check": "node ./scripts/tasks/version-check.js",
     "merge-fork": "node ./scripts/merge-fork/merge-fork.js",
     "replace-fork": "node ./scripts/merge-fork/replace-fork.js"
+  },
+  "dependencies": {
+    "webpack5": "npm:webpack@5"
   }
 }

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

@@ -16,6 +16,7 @@ import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
 import NullDependency from 'webpack/lib/dependencies/NullDependency';
 import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
 import Template from 'webpack/lib/Template';
+import {RawSource} from 'webpack-sources';
 
 class ClientReferenceDependency extends ModuleDependency {
   constructor(request) {
@@ -94,6 +95,51 @@ export default class ReactFlightWebpackPlugin {
       options.manifestFilename || 'react-client-manifest.json';
   }
 
+  get webpackVersion(): 'wp5' | 'wp4' {
+    return require('webpack').version.match(/4\.[0-9]*\.[0-9]*/)
+      ? 'wp4'
+      : 'wp5';
+  }
+
+  pluginOutput = {};
+
+  recordModule = (
+    id: string,
+    {
+      getExports,
+      resource,
+      chunkIds,
+    }: {getExports: () => string[], resource: string, chunkIds: string[]},
+  ) => {
+    // TODO: Hook into deps instead of the target module.
+    // That way we know by the type of dep whether to include.
+    // It also resolves conflicts when the same module is in multiple chunks.
+    if (!/\.client\.(tsx|jsx|js|ts)$/.test(resource)) {
+      return;
+    }
+
+    const moduleExports = {};
+    const providedExports = getExports();
+    ['', '*'].concat(providedExports).forEach(function(name) {
+      moduleExports[name] = {
+        id: id,
+        chunks: chunkIds,
+        name: name,
+      };
+    });
+    const href = pathToFileURL(resource).href;
+
+    if (href !== undefined) {
+      this.pluginOutput[href] = moduleExports;
+    }
+  };
+
+  //
+  output(compilation) {
+    const output = JSON.stringify(this.pluginOutput, null, 2);
+    compilation.emitAsset(this.manifestFilename, new RawSource(output));
+  }
+
   apply(compiler: any) {
     let resolvedClientReferences;
     const run = (params, callback) => {
@@ -163,56 +209,87 @@ export default class ReactFlightWebpackPlugin {
             }
           }
         });
+
+        // ProcessAssests hook is only supported by webpack v5.
+        if (this.webpackVersion !== 'wp5') {
+          return;
+        }
+
+        compilation.hooks.processAssets.tap(
+          {
+            name: PLUGIN_NAME,
+            // We derive the manifest from the existing assets.
+            stage: require('webpack').Compilation.PROCESS_ASSETS_STAGE_DERIVED,
+          },
+          () => {
+            const chunkGraph = compilation.chunkGraph;
+            const moduleGraph = compilation.moduleGraph;
+
+            compilation.chunkGroups.forEach(chunkGroup => {
+              const chunkIds = chunkGroup.chunks.map(function(c) {
+                return c.id;
+              });
+              chunkGroup.chunks.forEach(chunk => {
+                chunk.getModules().forEach(mod => {
+                  const id = chunkGraph.getModuleId(mod);
+                  this.recordModule(id, {
+                    getExports: () => moduleGraph.getProvidedExports(mod),
+                    chunkIds,
+                    resource: mod.resource,
+                  });
+                  // If this is a concatenation, register each child to the parent ID.
+                  if (mod.modules) {
+                    mod.modules.forEach(concatenatedMod => {
+                      this.recordModule(id, {
+                        getExports: () =>
+                          moduleGraph.getProvidedExports(concatenatedMod),
+                        resource: concatenatedMod.resource,
+                        chunkIds,
+                      });
+                    });
+                  }
+                });
+              });
+            });
+
+            this.output(compilation);
+          },
+        );
       },
     );
 
+    if (this.webpackVersion === 'wp5') {
+      return;
+    }
     compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
-      const json = {};
       compilation.chunkGroups.forEach(chunkGroup => {
         const chunkIds = chunkGroup.chunks.map(c => c.id);
 
-        function recordModule(id, mod) {
-          // TODO: Hook into deps instead of the target module.
-          // That way we know by the type of dep whether to include.
-          // It also resolves conflicts when the same module is in multiple chunks.
-          if (!/\.client\.js$/.test(mod.resource)) {
-            return;
-          }
-          const moduleExports = {};
-          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
-            moduleExports[name] = {
-              id: id,
-              chunks: chunkIds,
-              name: name,
-            };
-          });
-          const href = pathToFileURL(mod.resource).href;
-          if (href !== undefined) {
-            json[href] = moduleExports;
-          }
-        }
-
         chunkGroup.chunks.forEach(chunk => {
           chunk.getModules().forEach(mod => {
-            recordModule(mod.id, mod);
+            this.recordModule(mod.id, {
+              chunkIds,
+              // TODO: This can return `true` in some cases, which is likely not expected
+              // It seems to return true in the case of cjs exports `module.exports.foo`
+              getExports: () => mod.buildMeta.providedExports,
+              resource: mod.resource,
+            });
             // If this is a concatenation, register each child to the parent ID.
             if (mod.modules) {
               mod.modules.forEach(concatenatedMod => {
-                recordModule(mod.id, concatenatedMod);
+                this.recordModule(mod.id, {
+                  chunkIds,
+                  // TODO: This can return `true` in some cases, which is likely not expected
+                  getExports: () => concatenatedMod.buildMeta.providedExports,
+                  resource: concatenatedMod.resource,
+                });
               });
             }
           });
         });
+
+        this.output(compilation);
       });
-      const output = JSON.stringify(json, null, 2);
-      compilation.assets[this.manifestFilename] = {
-        source() {
-          return output;
-        },
-        size() {
-          return output.length;
-        },
-      };
     });
   }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightWebpackPlugin-test.js

@@ -0,0 +1,153 @@
+const path = require('path');
+const os = require('os');
+
+function getDependencies(mode: 'wp5' | 'wp4') {
+  jest.resetModuleRegistry();
+  let webpack;
+  if (mode === 'wp5') {
+    webpack = jest.requireActual('webpack5');
+    // The code we are testing (ReactFlightWebpackPlugin) directly imports `webpack`. It cannot depend upon `webpack5` as
+    // consumers of `ReactFlightWebpackPlugin` are more likely to have installed wp5 just as `webpack`. So we fix this by mocking the
+    // `webpack` module, and return the webpack 5 instance that we required.
+    jest.mock('webpack', () => {
+      return webpack;
+    });
+    // Sanity-check. If the webpack in package.json changes, this should catch that
+    expect(webpack.version).toMatch(/5\.[0-9]*\.[0-9]*/);
+  } else {
+    webpack = jest.requireActual('webpack');
+    // Sanity-check. If the webpack in package.json changes, this should catch that
+    expect(webpack.version).toMatch(/4\.[0-9]*\.[0-9]*/);
+  }
+
+  const FlightPlugin = require('../ReactFlightWebpackPlugin').default;
+  return {
+    FlightPlugin,
+    webpack,
+  };
+}
+
+describe('ReactFlightWebpackPlugin', () => {
+  // Running webpack can be slow, so we increase Jest's default timeout. These values are
+  // "magic", and not backed by any kind of logic or reasoning.
+  jest.setTimeout(5000 * 5);
+
+  test('produces manifest - webpack v4', done => {
+    const {webpack, FlightPlugin} = getDependencies('wp4');
+
+    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));
+
+    const plugin = new FlightPlugin({isServer: false});
+
+    const output = webpack({
+      entry: {
+        main: entry,
+        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),
+      },
+      plugins: [plugin],
+      output: {
+        path: path.resolve(path.join(os.tmpdir(), 'output')),
+      },
+      mode: 'development',
+    });
+
+    output.run((err, stats) => {
+      expect(err).toBeNull();
+      // in webpack 4, we can read the assets of the compilation object. This doesn't work in webpack 5
+      // as webpack 5 removes the source from the assets object, to prevent memory leaks.
+      const fileName = plugin.manifestFilename;
+      const pluginOutput = stats.compilation.assets[fileName];
+      const producedManifest = pluginOutput.source();
+      assert(producedManifest);
+
+      done();
+    });
+  });
+
+  test('produces manifest - webpack v5', done => {
+    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));
+    const {webpack, FlightPlugin} = getDependencies('wp5');
+
+    const plugin = new FlightPlugin({isServer: false});
+    const fileName = plugin.manifestFilename;
+
+    const output = webpack({
+      entry: {
+        main: entry,
+        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),
+      },
+      plugins: [plugin],
+      cache: undefined,
+      output: {
+        // Output
+        path: path.resolve(path.join(os.tmpdir(), 'output+2')),
+        // Make webpack always want to emit files, regardless if they exist or not
+        // This aids in development of the tests, as webpack 5 will not emit fi the file is already existing.
+        compareBeforeEmit: false,
+      },
+      mode: 'development',
+    });
+
+    const originalFileSystem = output.outputFileSystem;
+
+    output.outputFileSystem = {
+      ...originalFileSystem,
+      writeFile: jest.fn((dest, contents, cb) => {
+        // Call the callback, but don't actually write anything.
+        cb(null);
+      }),
+    };
+
+    output.run((err, stats) => {
+      expect(err).toBeNull();
+
+      expect(output.outputFileSystem.writeFile).toHaveBeenCalledWith(
+        expect.stringContaining(fileName),
+        expect.anything(),
+        expect.anything(),
+      );
+      const calls = output.outputFileSystem.writeFile.mock.calls;
+      // Get the idx that was called with the fileName,
+      const idx = calls.findIndex(val => {
+        return val[0].includes(fileName);
+      });
+
+      const contents = output.outputFileSystem.writeFile.mock.calls[
+        idx
+      ][1].toString();
+
+      // Check that the contents match with what we expect
+      assert(contents);
+      done();
+    });
+  });
+});
+
+function assert(manifestContents) {
+  const key =
+    'file://' + path.resolve(path.join(__dirname, 'fixture', 'Form.client.js'));
+  const manifestObj = JSON.parse(manifestContents);
+
+  expect(manifestObj[key]).toStrictEqual(
+    expect.objectContaining({
+      '': {
+        chunks: ['client'],
+        id:
+          './packages/react-server-dom-webpack/src/__tests__/fixture/Form.client.js',
+        name: '',
+      },
+      '*': {
+        chunks: ['client'],
+        id:
+          './packages/react-server-dom-webpack/src/__tests__/fixture/Form.client.js',
+        name: '*',
+      },
+      Form: {
+        chunks: ['client'],
+        id:
+          './packages/react-server-dom-webpack/src/__tests__/fixture/Form.client.js',
+        name: 'Form',
+      },
+    }),
+  );
+}

packages/react-server-dom-webpack/src/__tests__/fixture/Form.client.js

@@ -0,0 +1,3 @@
+export function Form() {
+  console.log('Form Rendered!');
+}

packages/react-server-dom-webpack/src/__tests__/fixture/FormServer.server.js

@@ -0,0 +1,3 @@
+export default function Foo() {
+  console.log('Form!');
+}

packages/react-server-dom-webpack/src/__tests__/fixture/entry.js

@@ -0,0 +1,4 @@
+const ClientComponent = require('./Form.client').Form;
+const ServerComponent = require('./FormServer.server.js');
+
+console.log(ClientComponent, ServerComponent);

packages/react-server-dom-webpack/src/__tests__/fixture/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "fixture"
+}