Loader - capabilities and module system detection

.eslintrc.json

@@ -48,7 +48,7 @@
       }
     },
     {
-      "files": ["test/**/fixtures/*.esm.js"],
+      "files": ["test/**/fixtures/esm/*.js"],
       "parserOptions": {
         "ecmaVersion": 2015,
         "sourceType": "module"

lib/index.js

@@ -16,16 +16,6 @@ const schema = require('./options.json');
 
 // Mapping of react-refresh globals to Webpack runtime globals
 const REPLACEMENTS = {
-  $RefreshRuntime$: {
-    expr: `${refreshGlobal}.runtime`,
-    req: [webpackRequire, `${refreshGlobal}.runtime`],
-    type: 'object',
-  },
-  $RefreshCleanup$: {
-    expr: `${refreshGlobal}.cleanup`,
-    req: [webpackRequire, `${refreshGlobal}.cleanup`],
-    type: 'function',
-  },
   $RefreshReg$: {
     expr: `${refreshGlobal}.register`,
     req: [webpackRequire, `${refreshGlobal}.register`],

lib/utils/getRefreshGlobal.js

@@ -34,11 +34,14 @@ function getRefreshGlobal(runtimeTemplate = FALLBACK_RUNTIME_TEMPLATE) {
       `setup: ${runtimeTemplate.basicFunction('currentModuleId', [
         // Store all previous values for fields on `refreshGlobal` -
         // this allows proper restoration in the `cleanup` phase.
+        `${declaration} prevModuleId = ${refreshGlobal}.moduleId;`,
         `${declaration} prevRuntime = ${refreshGlobal}.runtime;`,
         `${declaration} prevRegister = ${refreshGlobal}.register;`,
         `${declaration} prevSignature = ${refreshGlobal}.signature;`,
         `${declaration} prevCleanup = ${refreshGlobal}.cleanup;`,
         '',
+        `${refreshGlobal}.moduleId = currentModuleId;`,
+        '',
         // Initialise the runtime with stubs.
         // If the module is processed by our loader,
         // they will be mutated in place during module initialisation.
@@ -63,6 +66,7 @@ function getRefreshGlobal(runtimeTemplate = FALLBACK_RUNTIME_TEMPLATE) {
           // In rare cases, it might get called in another module's `cleanup` phase.
           'if (currentModuleId === cleanupModuleId) {',
           Template.indent([
+            `${refreshGlobal}.moduleId = prevModuleId;`,
             `${refreshGlobal}.runtime = prevRuntime;`,
             `${refreshGlobal}.register = prevRegister;`,
             `${refreshGlobal}.signature = prevSignature;`,

loader/index.js

@@ -5,50 +5,31 @@
 const originalFetch = global.fetch;
 delete global.fetch;
 
-const { SourceMapConsumer, SourceMapGenerator, SourceNode } = require('source-map');
+const { getOptions } = require('loader-utils');
+const { validate: validateOptions } = require('schema-utils');
+const { SourceMapConsumer, SourceNode } = require('source-map');
 const { Template } = require('webpack');
+const { refreshGlobal } = require('../lib/globals');
+const {
+  getIdentitySourceMap,
+  getModuleSystem,
+  getRefreshModuleRuntime,
+  normalizeOptions,
+} = require('./utils');
+const schema = require('./options.json');
 
-/**
- * Generates an identity source map from a source file.
- * @param {string} source The content of the source file.
- * @param {string} resourcePath The name of the source file.
- * @returns {import('source-map').RawSourceMap} The identity source map.
- */
-function getIdentitySourceMap(source, resourcePath) {
-  const sourceMap = new SourceMapGenerator();
-  sourceMap.setSourceContent(resourcePath, source);
-
-  source.split('\n').forEach((line, index) => {
-    sourceMap.addMapping({
-      source: resourcePath,
-      original: {
-        line: index + 1,
-        column: 0,
-      },
-      generated: {
-        line: index + 1,
-        column: 0,
-      },
-    });
-  });
+const RefreshRuntimePath = require
+  .resolve('react-refresh/runtime.js')
+  .replace(/\\/g, '/')
+  .replace(/'/g, "\\'");
 
-  return sourceMap.toJSON();
-}
-
-/**
- * Gets a runtime template from provided function.
- * @param {function(): void} fn A function containing the runtime template.
- * @returns {string} The "sanitized" runtime template.
- */
-function getTemplate(fn) {
-  return Template.getFunctionContent(fn).trim().replace(/^ {2}/gm, '');
-}
-
-const RefreshSetupRuntime = getTemplate(require('./RefreshSetup.runtime')).replace(
-  '$RefreshRuntimePath$',
-  require.resolve('react-refresh/runtime').replace(/\\/g, '/').replace(/'/g, "\\'")
-);
-const RefreshModuleRuntime = getTemplate(require('./RefreshModule.runtime'));
+const RefreshSetupRuntimes = {
+  cjs: Template.asString(`${refreshGlobal}.runtime = require('${RefreshRuntimePath}');`),
+  esm: Template.asString([
+    `import * as __react_refresh_runtime__ from '${RefreshRuntimePath}';`,
+    `${refreshGlobal}.runtime = __react_refresh_runtime__;`,
+  ]),
+};
 
 /**
  * A simple Webpack loader to inject react-refresh HMR code into modules.
@@ -61,6 +42,14 @@ const RefreshModuleRuntime = getTemplate(require('./RefreshModule.runtime'));
  * @returns {void}
  */
 function ReactRefreshLoader(source, inputSourceMap, meta) {
+  let options = getOptions(this);
+  validateOptions(schema, options, {
+    baseDataPath: 'options',
+    name: 'React Refresh Loader',
+  });
+
+  options = normalizeOptions(options);
+
   const callback = this.async();
 
   /**
@@ -70,6 +59,11 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
    * @returns {Promise<[string, import('source-map').RawSourceMap]>}
    */
   async function _loader(source, inputSourceMap) {
+    const moduleSystem = await getModuleSystem(this, options);
+
+    const RefreshSetupRuntime = RefreshSetupRuntimes[moduleSystem];
+    const RefreshModuleRuntime = getRefreshModuleRuntime({ const: options.const, moduleSystem });
+
     if (this.sourceMap) {
       let originalSourceMap = inputSourceMap;
       if (!originalSourceMap) {

loader/options.json

@@ -0,0 +1,37 @@
+{
+  "additionalProperties": false,
+  "type": "object",
+  "definitions": {
+    "MatchCondition": {
+      "anyOf": [{ "instanceof": "RegExp", "tsType": "RegExp" }, { "$ref": "#/definitions/Path" }]
+    },
+    "MatchConditions": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/MatchCondition" },
+      "minItems": 1
+    },
+    "Path": { "type": "string" },
+    "ESModuleOptions": {
+      "additionalProperties": false,
+      "type": "object",
+      "properties": {
+        "exclude": {
+          "anyOf": [
+            { "$ref": "#/definitions/MatchCondition" },
+            { "$ref": "#/definitions/MatchConditions" }
+          ]
+        },
+        "include": {
+          "anyOf": [
+            { "$ref": "#/definitions/MatchCondition" },
+            { "$ref": "#/definitions/MatchConditions" }
+          ]
+        }
+      }
+    }
+  },
+  "properties": {
+    "const": { "type": "boolean" },
+    "esModule": { "anyOf": [{ "type": "boolean" }, { "$ref": "#/definitions/ESModuleOptions" }] }
+  }
+}

loader/types.js

@@ -0,0 +1,17 @@
+/**
+ * @typedef {Object} ESModuleOptions
+ * @property {string | RegExp | Array<string | RegExp>} [exclude] Files to explicitly exclude from flagged as ES Modules.
+ * @property {string | RegExp | Array<string | RegExp>} [include] Files to explicitly include for flagged as ES Modules.
+ */
+
+/**
+ * @typedef {Object} ReactRefreshLoaderOptions
+ * @property {boolean} [const] Enables usage of ES6 `const` and `let` in generated runtime code.
+ * @property {boolean | ESModuleOptions} [esModule] Enables strict ES Modules compatible runtime.
+ */
+
+/**
+ * @typedef {import('type-fest').SetRequired<ReactRefreshLoaderOptions, 'const'>} NormalizedLoaderOptions
+ */
+
+module.exports = {};

loader/utils/getIdentitySourceMap.js

@@ -0,0 +1,30 @@
+const { SourceMapGenerator } = require('source-map');
+
+/**
+ * Generates an identity source map from a source file.
+ * @param {string} source The content of the source file.
+ * @param {string} resourcePath The name of the source file.
+ * @returns {import('source-map').RawSourceMap} The identity source map.
+ */
+function getIdentitySourceMap(source, resourcePath) {
+  const sourceMap = new SourceMapGenerator();
+  sourceMap.setSourceContent(resourcePath, source);
+
+  source.split('\n').forEach((line, index) => {
+    sourceMap.addMapping({
+      source: resourcePath,
+      original: {
+        line: index + 1,
+        column: 0,
+      },
+      generated: {
+        line: index + 1,
+        column: 0,
+      },
+    });
+  });
+
+  return sourceMap.toJSON();
+}
+
+module.exports = getIdentitySourceMap;