Use assets API + writeToDisk instead of directly writing to disk (#20402)

sebmarkbage · web-flow · commit ce40f1dc2f8e · 2020-12-07T17:54:28.000-08:00
diff --git a/fixtures/flight/config/webpackDevServer.config.js b/fixtures/flight/config/webpackDevServer.config.js
@@ -90,6 +90,9 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
+    writeToDisk: filePath => {
+      return /react-client-manifest\.json$/.test(filePath);
+    },
     https: getHttpsConfig(),
     host,
     overlay: false,
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
@@ -10,7 +10,7 @@ module.exports = function(req, res) {
   import('../src/App.server.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
     readFile(
-      resolve(__dirname, `../${dist}/react-transport-manifest.json`),
+      resolve(__dirname, `../${dist}/react-client-manifest.json`),
       'utf8',
       (err, data) => {
         if (err) {
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -7,8 +7,7 @@
  * @flow
  */
 
-import {mkdirSync, writeFileSync} from 'fs';
-import {dirname, resolve, join} from 'path';
+import {join} from 'path';
 import {pathToFileURL} from 'url';
 
 import asyncLib from 'neo-async';
@@ -48,13 +47,16 @@ type Options = {
   isServer: boolean,
   clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
   chunkName?: string,
+  manifestFilename?: string,
 };
 
 const PLUGIN_NAME = 'React Transport Plugin';
 
 export default class ReactFlightWebpackPlugin {
   clientReferences: $ReadOnlyArray<ClientReferencePath>;
   chunkName: string;
+  manifestFilename: string;
+
   constructor(options: Options) {
     if (!options || typeof options.isServer !== 'boolean') {
       throw new Error(
@@ -88,6 +90,8 @@ export default class ReactFlightWebpackPlugin {
     } else {
       this.chunkName = 'client[index]';
     }
+    this.manifestFilename =
+      options.manifestFilename || 'react-client-manifest.json';
   }
 
   apply(compiler: any) {
@@ -189,13 +193,14 @@ export default class ReactFlightWebpackPlugin {
         });
       });
       const output = JSON.stringify(json, null, 2);
-      const filename = resolve(
-        compiler.options.output.path,
-        'react-transport-manifest.json',
-      );
-      mkdirSync(dirname(filename), {recursive: true});
-      // TODO: Use webpack's emit API and read from the devserver.
-      writeFileSync(filename, output);
+      compilation.assets[this.manifestFilename] = {
+        source() {
+          return output;
+        },
+        size() {
+          return output.length;
+        },
+      };
     });
   }
 
