feat: error integration (#3)

feat: error integration

Author: pmmmwh

.prettierrc

@@ -1,5 +1,6 @@
 {
   "endOfLine": "lf",
+  "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "es5"
 }

example/package.json

@@ -19,7 +19,7 @@
     "babel-loader": "^8.0.6",
     "cross-env": "^6.0.3",
     "html-webpack-plugin": "^3.2.0",
-    "react-refresh": "^0.6.0",
+    "react-refresh": "^0.7.0",
     "react-refresh-webpack-plugin": "https://github.com/pmmmwh/react-refresh-webpack-plugin#master",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",

example/webpack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ReactRefreshPlugin = require('react-refresh-webpack-plugin');
+const ReactRefreshPlugin = require('../src');
 
 module.exports = {
   entry: './src/index.js',

example/yarn.lock

@@ -8,15 +8,23 @@
     "lint": "prettier --check \"**/*.{js,jsx}\"",
     "lint:fix": "prettier --write \"**/*.{js,jsx}\""
   },
+  "dependencies": {
+    "ansi-html": "^0.0.7",
+    "error-stack-parser": "^2.0.4",
+    "html-entities": "^1.2.1",
+    "lodash.debounce": "^4.0.8",
+    "react-dev-utils": "^9.1.0",
+    "sockjs-client": "^1.4.0"
+  },
   "devDependencies": {
     "prettier": "^1.18.2",
-    "react-refresh": "^0.6.0",
+    "react-refresh": "^0.7.0",
     "webpack": "^4.41.2"
   },
   "peerDependencies": {
-    "react-refresh": "*"
+    "react-refresh": ">= 0.7"
   },
   "engines": {
-    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x"
+    "node": ">= 8.x"
   }
 }

package.json

@@ -8,7 +8,7 @@ const { Template } = require('webpack');
  * [Ref](https://github.com/webpack/webpack/blob/master/lib/MainTemplate.js#L233)
  */
 const beforeModule = `
-var cleanup = function NoOp() {};
+let cleanup = function NoOp() {};
 
 if (window && window.$RefreshSetup$) {
   cleanup = window.$RefreshSetup$(module.i);
@@ -33,10 +33,7 @@ const afterModule = `
 function createRefreshTemplate(source, chunk) {
   // If a chunk is injected with the plugin,
   // our custom entry for react-refresh musts be injected
-  if (
-    !chunk.entryModule ||
-    !/ReactRefreshEntry/.test(chunk.entryModule._identifier || '')
-  ) {
+  if (!chunk.entryModule || !/ReactRefreshEntry/.test(chunk.entryModule._identifier || '')) {
     return source;
   }
 

src/helpers/createRefreshTemplate.js

@@ -1,4 +1,7 @@
 const createRefreshTemplate = require('./createRefreshTemplate');
 const injectRefreshEntry = require('./injectRefreshEntry');
 
-module.exports = { createRefreshTemplate, injectRefreshEntry };
+module.exports = {
+  createRefreshTemplate,
+  injectRefreshEntry,
+};

src/helpers/index.js

@@ -7,15 +7,22 @@
  * @returns {WebpackEntry} An injected entry object.
  */
 const injectRefreshEntry = originalEntry => {
-  const ReactRefreshEntry = require.resolve('../runtime/ReactRefreshEntry');
+  const entryInjects = [
+    // React-refresh runtime
+    require.resolve('../runtime/ReactRefreshEntry'),
+    // Error overlay runtime
+    require.resolve('../runtime/ErrorOverlayEntry'),
+    // React-refresh Babel transform detection
+    require.resolve('../runtime/BabelDetectComponent'),
+  ];
 
   // Single string entry point
   if (typeof originalEntry === 'string') {
-    return [ReactRefreshEntry, originalEntry];
+    return [...entryInjects, originalEntry];
   }
   // Single array entry point
   if (Array.isArray(originalEntry)) {
-    return [ReactRefreshEntry, ...originalEntry];
+    return [...entryInjects, ...originalEntry];
   }
   // Multiple entry points
   if (typeof originalEntry === 'object') {

src/helpers/injectRefreshEntry.js

@@ -3,14 +3,25 @@ const webpack = require('webpack');
 const { createRefreshTemplate, injectRefreshEntry } = require('./helpers');
 const { refreshUtils } = require('./runtime/globals');
 
+/**
+ * @typedef {Object} ReactRefreshPluginOptions
+ * @property {boolean} [disableRefreshCheck] A flag to disable detection of the react-refresh Babel plugin.
+ * @property {boolean} [forceEnable] A flag to enable the plugin forcefully.
+ */
+
+/** @type {ReactRefreshPluginOptions} */
+const defaultOptions = {
+  disableRefreshCheck: false,
+  forceEnable: false,
+};
+
 class ReactRefreshPlugin {
   /**
-   * @param {*} [options] Options for react-refresh-plugin.
-   * @param {boolean} [options.forceEnable] A flag to enable the plugin forcefully.
+   * @param {ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
    * @returns {void}
    */
   constructor(options) {
-    this.options = options || {};
+    this.options = Object.assign(defaultOptions, options);
   }
 
   /**
@@ -59,11 +70,14 @@ class ReactRefreshPlugin {
           /\.([jt]sx?|flow)$/.test(data.resource) &&
           // Skip all files from node_modules
           !/node_modules/.test(data.resource) &&
-          // Skip runtime refresh utilities (to prevent self-referencing)
+          // Skip files related to refresh runtime (to prevent self-referencing)
           // This is useful when using the plugin as a direct dependency
-          data.resource !== path.join(__dirname, './runtime/utils.js')
+          !data.resource.includes(path.join(__dirname, './runtime'))
         ) {
-          data.loaders.unshift(require.resolve('./loader'));
+          data.loaders.unshift({
+            loader: require.resolve('./loader'),
+            options: undefined,
+          });
         }
 
         return data;
@@ -76,6 +90,33 @@ class ReactRefreshPlugin {
         // Constructs the correct module template for react-refresh
         createRefreshTemplate
       );
+
+      compilation.hooks.finishModules.tap(this.constructor.name, modules => {
+        if (!this.options.disableRefreshCheck) {
+          const refreshPluginInjection = /\$RefreshReg\$/;
+          const RefreshDetectionModule = modules.find(
+            module => module.resource === require.resolve('./runtime/BabelDetectComponent.js')
+          );
+
+          // In most cases, if we cannot find the injected detection module,
+          // there are other compilation instances injected by other plugins.
+          // We will have to bail out in those cases.
+          if (!RefreshDetectionModule) {
+            return;
+          }
+
+          // Check for the function transform by the Babel plugin.
+          if (!refreshPluginInjection.test(RefreshDetectionModule._source.source())) {
+            throw new Error(
+              [
+                'The plugin is unable to detect transformed code from react-refresh.',
+                'Did you forget to include "react-refresh/babel" in your list of Babel plugins?',
+                'Note: you can disable this check by setting "disableRefreshCheck: true".',
+              ].join(' ')
+            );
+          }
+        }
+      });
     });
   }
 }

src/index.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const { Template } = require('webpack');
 const { refreshUtils } = require('./runtime/globals');
 
@@ -6,17 +7,32 @@ const reactModule = /['"]react['"]/;
 
 /**
  * A simple Webpack loader to inject react-refresh HMR code into modules.
+ *
+ * [Reference for Loader API](https://webpack.js.org/api/loaders/)
  * @param {string} source The original module source code.
+ * @param {*} [inputSourceMap] The source map of the module.
+ * @property {function(string): void} addDependency Adds a dependency for Webpack to watch.
+ * @property {function(Error | null, string | Buffer, *?, *?): void} callback Sends loader results to Webpack.
  * @returns {string} The injected module source code.
  */
-function RefreshHotLoader(source) {
-  // Only apply transform if the source code contains a React import
-  return reactModule.test(source)
-    ? source +
-        Template.getFunctionContent(require('./runtime/RefreshModuleRuntime'))
-          .trim()
-          .replace(/\$RefreshUtils\$/g, refreshUtils)
-    : source;
+function RefreshHotLoader(source, inputSourceMap) {
+  // Add dependency to allow caching and invalidations
+  this.addDependency(path.resolve('./runtime/RefreshModuleRuntime'));
+
+  // Use callback to allow source maps to pass through
+  this.callback(
+    null,
+    // Only apply transform if the source code contains a React import
+    reactModule.test(source)
+      ? source +
+          '\n\n' +
+          Template.getFunctionContent(require('./runtime/RefreshModuleRuntime'))
+            .trim()
+            .replace(/^ {2}/gm, '')
+            .replace(/\$RefreshUtils\$/g, refreshUtils)
+      : source,
+    inputSourceMap
+  );
 }
 
 module.exports = RefreshHotLoader;