chore: code cleanup

Author: pmmmwh

lib/index.js

@@ -9,13 +9,14 @@ const {
 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');
 
@@ -33,27 +34,6 @@ const REPLACEMENTS = {
   },
 };
 
-/**
- * Gets the socket integration to use for Webpack messages.
- * @param {'wds' | 'whm' | 'wps' | string} integrationType A valid socket integration type or a path to a module.
- * @returns {string | undefined} Path to the resolved socket integration module.
- */
-function getSocketIntegrationEntry(integrationType) {
-  let resolvedEntry;
-  switch (integrationType) {
-    case 'whm': {
-      resolvedEntry = 'webpack-hot-middleware/client';
-      break;
-    }
-    case 'wps': {
-      resolvedEntry = 'webpack-plugin-serve/client';
-      break;
-    }
-  }
-
-  return resolvedEntry;
-}
-
 class ReactRefreshPlugin {
   /**
    * @param {import('./types').ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
@@ -107,20 +87,19 @@ class ReactRefreshPlugin {
       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) => {
-          const integrationEntry = getSocketIntegrationEntry(this.options.overlay.sockIntegration);
-
           // Exhaustively search all entries for `integrationEntry`.
-          // If found, inject `overlayEntries` to those entries,
-          // and ensure the order of dependencies either here or in `seal`.
-          // Else, inject `overlayEntries` to global entries.
+          // 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)
@@ -132,6 +111,9 @@ class ReactRefreshPlugin {
         }
       );
 
+      // 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) },
@@ -150,6 +132,10 @@ class ReactRefreshPlugin {
                   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(

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;

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,
 };