feat: use entry hooks for injection in Webpack 5 (#319)

pmmmwh · web-flow · commit ca31cb09ddf3 · 2021-05-31T01:26:42.000+02:00
diff --git a/lib/index.js b/lib/index.js
@@ -1,15 +1,22 @@
 const { validate: validateOptions } = require('schema-utils');
-const { DefinePlugin, ModuleFilenameHelpers, ProvidePlugin, Template } = require('webpack');
+const {
+  DefinePlugin,
+  EntryPlugin,
+  ModuleFilenameHelpers,
+  ProvidePlugin,
+  Template,
+} = require('webpack');
 const ConstDependency = require('webpack/lib/dependencies/ConstDependency');
 const { refreshGlobal, webpackRequire, webpackVersion } = require('./globals');
 const {
+  getAdditionalEntries,
+  getIntegrationEntry,
   getParserHelpers,
   getRefreshGlobal,
   getSocketIntegration,
   injectRefreshEntry,
   injectRefreshLoader,
   normalizeOptions,
-  getAdditionalEntries,
 } = require('./utils');
 const schema = require('./options.json');
 
@@ -72,11 +79,83 @@ class ReactRefreshPlugin {
     const logger = compiler.getInfrastructureLogger(this.constructor.name);
     let loggedHotWarning = false;
 
-    // Inject react-refresh context to all Webpack entry points
-    compiler.options.entry = injectRefreshEntry(
-      compiler.options.entry,
-      getAdditionalEntries({ options: this.options, devServer: compiler.options.devServer })
-    );
+    // Inject react-refresh context to all Webpack entry points.
+    // This should create `EntryDependency` objects when available,
+    // and fallback to patching the `entry` object for legacy workflows.
+    const additional = getAdditionalEntries({
+      devServer: compiler.options.devServer,
+      options: this.options,
+    });
+    if (EntryPlugin) {
+      // Prepended entries does not care about injection order,
+      // so we can utilise EntryPlugin for simpler logic.
+      additional.prependEntries.forEach((entry) => {
+        new EntryPlugin(compiler.context, entry, { name: undefined }).apply(compiler);
+      });
+
+      const integrationEntry = getIntegrationEntry(this.options.overlay.sockIntegration);
+      const socketEntryData = [];
+      compiler.hooks.make.tap(
+        { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
+        (compilation) => {
+          // Exhaustively search all entries for `integrationEntry`.
+          // If found, mark those entries and the index of `integrationEntry`.
+          for (const [name, entryData] of compilation.entries.entries()) {
+            const index = entryData.dependencies.findIndex((dep) =>
+              dep.request.includes(integrationEntry)
+            );
+            if (index !== -1) {
+              socketEntryData.push({ name, index });
+            }
+          }
+        }
+      );
+
+      // Overlay entries need to be injected AFTER integration's entry,
+      // so we will loop through everything in `finishMake` instead of `make`.
+      // This ensures we can traverse all entry points and inject stuff with the correct order.
+      additional.overlayEntries.forEach((entry, idx, arr) => {
+        compiler.hooks.finishMake.tapPromise(
+          { name: this.constructor.name, stage: Number.MIN_SAFE_INTEGER + (arr.length - idx - 1) },
+          (compilation) => {
+            // Only hook into the current compiler
+            if (compilation.compiler !== compiler) {
+              return Promise.resolve();
+            }
+
+            const injectData = socketEntryData.length ? socketEntryData : [{ name: undefined }];
+            return Promise.all(
+              injectData.map(({ name, index }) => {
+                return new Promise((resolve, reject) => {
+                  const options = { name };
+                  const dep = EntryPlugin.createDependency(entry, options);
+                  compilation.addEntry(compiler.context, dep, options, (err) => {
+                    if (err) return reject(err);
+
+                    // If the entry is not a global one,
+                    // and we have registered the index for integration entry,
+                    // we will reorder all entry dependencies to our desired order.
+                    // That is, to have additional entries DIRECTLY behind integration entry.
+                    if (name && typeof index !== 'undefined') {
+                      const entryData = compilation.entries.get(name);
+                      entryData.dependencies.splice(
+                        index + 1,
+                        0,
+                        entryData.dependencies.splice(entryData.dependencies.length - 1, 1)[0]
+                      );
+                    }
+
+                    resolve();
+                  });
+                });
+              })
+            ).then(() => {});
+          }
+        );
+      });
+    } else {
+      compiler.options.entry = injectRefreshEntry(compiler.options.entry, additional);
+    }
 
     // Inject necessary modules to bundle's global scope
     /** @type {Record<string, string | boolean>}*/
@@ -114,10 +193,8 @@ class ReactRefreshPlugin {
       }
     }
 
-    const definePlugin = new DefinePlugin(definedModules);
-    definePlugin.apply(compiler);
-    const providePlugin = new ProvidePlugin(providedModules);
-    providePlugin.apply(compiler);
+    new DefinePlugin(definedModules).apply(compiler);
+    new ProvidePlugin(providedModules).apply(compiler);
 
     const match = ModuleFilenameHelpers.matchObject.bind(undefined, this.options);
     const { evaluateToString, toConstantDependency } = getParserHelpers();
@@ -217,8 +294,8 @@ class ReactRefreshPlugin {
             );
 
             compilation.hooks.normalModuleLoader.tap(
-              // `Infinity` ensures this check will run only after all other taps
-              { name: this.constructor.name, stage: Infinity },
+              // `Number.POSITIVE_INFINITY` ensures this check will run only after all other taps
+              { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
               // Check for existence of the HMR runtime -
               // it is the foundation to this plugin working correctly
               (context) => {
@@ -237,10 +314,14 @@ class ReactRefreshPlugin {
             break;
           }
           case 5: {
+            const EntryDependency = require('webpack/lib/dependencies/EntryDependency');
             const NormalModule = require('webpack/lib/NormalModule');
             const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
             const ReactRefreshRuntimeModule = require('./RefreshRuntimeModule');
 
+            // Set factory for EntryDependency which is used to initialise the module
+            compilation.dependencyFactories.set(EntryDependency, normalModuleFactory);
+
             compilation.hooks.additionalTreeRuntimeRequirements.tap(
               this.constructor.name,
               // Setup react-refresh globals with a Webpack runtime module
diff --git a/lib/utils/getAdditionalEntries.js b/lib/utils/getAdditionalEntries.js
@@ -2,8 +2,8 @@ const querystring = require('querystring');
 
 /**
  * @typedef {Object} AdditionalEntries
- * @property {import('./injectRefreshEntry').WebpackEntry} prependEntries
- * @property {import('./injectRefreshEntry').WebpackEntry} overlayEntries
+ * @property {string[]} prependEntries
+ * @property {string[]} overlayEntries
  */
 
 /**
@@ -57,7 +57,7 @@ function getAdditionalEntries({ devServer, options }) {
     // Error overlay runtime
     options.overlay &&
       options.overlay.entry &&
-      `${options.overlay.entry}${queryString ? `?${queryString}` : ''}`,
+      `${require.resolve(options.overlay.entry)}${queryString ? `?${queryString}` : ''}`,
   ].filter(Boolean);
 
   return { prependEntries, overlayEntries };
diff --git a/lib/utils/getIntegrationEntry.js b/lib/utils/getIntegrationEntry.js
@@ -0,0 +1,22 @@
+/**
+ * Gets entry point of a supported socket integration.
+ * @param {'wds' | 'whm' | 'wps' | string} integrationType A valid socket integration type or a path to a module.
+ * @returns {string | undefined} Path to the resolved integration entry point.
+ */
+function getIntegrationEntry(integrationType) {
+  let resolvedEntry;
+  switch (integrationType) {
+    case 'whm': {
+      resolvedEntry = 'webpack-hot-middleware/client';
+      break;
+    }
+    case 'wps': {
+      resolvedEntry = 'webpack-plugin-serve/client';
+      break;
+    }
+  }
+
+  return resolvedEntry;
+}
+
+module.exports = getIntegrationEntry;
diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -1,17 +1,19 @@
+const getAdditionalEntries = require('./getAdditionalEntries');
+const getIntegrationEntry = require('./getIntegrationEntry');
 const getParserHelpers = require('./getParserHelpers');
 const getRefreshGlobal = require('./getRefreshGlobal');
 const getSocketIntegration = require('./getSocketIntegration');
 const injectRefreshEntry = require('./injectRefreshEntry');
 const injectRefreshLoader = require('./injectRefreshLoader');
 const normalizeOptions = require('./normalizeOptions');
-const getAdditionalEntries = require('./getAdditionalEntries');
 
 module.exports = {
+  getAdditionalEntries,
+  getIntegrationEntry,
   getParserHelpers,
   getRefreshGlobal,
   getSocketIntegration,
   injectRefreshEntry,
   injectRefreshLoader,
   normalizeOptions,
-  getAdditionalEntries,
 };
diff --git a/lib/utils/injectRefreshEntry.js b/lib/utils/injectRefreshEntry.js
@@ -9,24 +9,24 @@ const EntryParseError = new Error(
   ].join(' ')
 );
 
+/**
+ * Webpack entries related to socket integrations.
+ * They have to run before any code that sets up the error overlay.
+ * @type {string[]}
+ */
+const socketEntries = [
+  'webpack-dev-server/client',
+  'webpack-hot-middleware/client',
+  'webpack-plugin-serve/client',
+  'react-dev-utils/webpackHotDevClient',
+];
+
 /**
  * Checks if a Webpack entry string is related to socket integrations.
  * @param {string} entry A Webpack entry string.
  * @returns {boolean} Whether the entry is related to socket integrations.
  */
 function isSocketEntry(entry) {
-  /**
-   * Webpack entries related to socket integrations.
-   * They have to run before any code that sets up the error overlay.
-   * @type {string[]}
-   */
-  const socketEntries = [
-    'webpack-dev-server/client',
-    'webpack-hot-middleware/client',
-    'webpack-plugin-serve/client',
-    'react-dev-utils/webpackHotDevClient',
-  ];
-
   return socketEntries.some((socketEntry) => entry.includes(socketEntry));
 }
 
@@ -37,7 +37,7 @@ function isSocketEntry(entry) {
  * @returns {WebpackEntry} An injected entry object.
  */
 function injectRefreshEntry(originalEntry, additionalEntries) {
-  const { prependEntries = [], overlayEntries = [] } = additionalEntries;
+  const { prependEntries, overlayEntries } = additionalEntries;
 
   // Single string entry point
   if (typeof originalEntry === 'string') {
@@ -95,3 +95,4 @@ function injectRefreshEntry(originalEntry, additionalEntries) {
 }
 
 module.exports = injectRefreshEntry;
+module.exports.socketEntries = socketEntries;
diff --git a/test/unit/injectRefreshEntry.test.js b/test/unit/injectRefreshEntry.test.js
@@ -101,7 +101,12 @@ describe('injectRefreshEntry', () => {
   });
 
   it('should not append overlay entry when unused', () => {
-    expect(injectRefreshEntry('test.js', {})).toStrictEqual(['test.js']);
+    expect(
+      injectRefreshEntry('test.js', {
+        prependEntries: [],
+        overlayEntries: [],
+      })
+    ).toStrictEqual(['test.js']);
   });
 
   it('should append overlay entry for a string after socket-related entries', () => {
diff --git a/yarn.lock b/yarn.lock
