fix: revert ESM imports/exports to cater CJS workflows (#461)

* fix: revert ESM imports/exports to cater CJS workflows * chore: update ESLint to reflect change in imports * chore: switch to use yalc instead of yarn link for tests
pmmmwh · Aug 9, 2021 · cef46e5 · cef46e5
1 parent fbe1f27
commit cef46e5
Show file tree

Hide file tree

Showing 27 changed files with 200 additions and 108 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,8 +12,7 @@
     {
       "files": ["client/**/*.js", "overlay/**/*.js", "lib/runtime/**/*.js", "sockets/**/*.js"],
       "parserOptions": {
-        "ecmaVersion": 2015,
-        "sourceType": "module"
+        "ecmaVersion": 2015
       },
       "env": {
         "browser": true,

diff --git a/client/ErrorOverlayEntry.js b/client/ErrorOverlayEntry.js
@@ -1,9 +1,9 @@
 /* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
 
-import { handleError, handleUnhandledRejection } from './utils/errorEventHandlers.js';
-import formatWebpackErrors from './utils/formatWebpackErrors.js';
-import runWithPatchedUrl from './utils/patchUrl.cjs';
-import runWithRetry from './utils/retry.js';
+const { handleError, handleUnhandledRejection } = require('./utils/errorEventHandlers.js');
+const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
+const runWithPatchedUrl = require('./utils/patchUrl.cjs');
+const runWithRetry = require('./utils/retry.js');
 
 // Setup error states
 let isHotReload = false;
@@ -72,27 +72,29 @@ function compileMessageHandler(message) {
   }
 }
 
-if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
-  runWithPatchedUrl(function setupOverlay() {
-    // Only register if no other overlay have been registered
-    if (!window.__reactRefreshOverlayInjected && __react_refresh_socket__) {
-      // Registers handlers for compile errors with retry -
-      // This is to prevent mismatching injection order causing errors to be thrown
-      runWithRetry(function initSocket() {
-        __react_refresh_socket__.init(compileMessageHandler, __resourceQuery);
-      }, 3);
-      // Registers handlers for runtime errors
-      handleError(function handleError(error) {
-        hasRuntimeErrors = true;
-        __react_refresh_error_overlay__.handleRuntimeError(error);
-      });
-      handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
-        hasRuntimeErrors = true;
-        __react_refresh_error_overlay__.handleRuntimeError(error);
-      });
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined') {
+    runWithPatchedUrl(function setupOverlay() {
+      // Only register if no other overlay have been registered
+      if (!window.__reactRefreshOverlayInjected && __react_refresh_socket__) {
+        // Registers handlers for compile errors with retry -
+        // This is to prevent mismatching injection order causing errors to be thrown
+        runWithRetry(function initSocket() {
+          __react_refresh_socket__.init(compileMessageHandler, __resourceQuery);
+        }, 3);
+        // Registers handlers for runtime errors
+        handleError(function handleError(error) {
+          hasRuntimeErrors = true;
+          __react_refresh_error_overlay__.handleRuntimeError(error);
+        });
+        handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
+          hasRuntimeErrors = true;
+          __react_refresh_error_overlay__.handleRuntimeError(error);
+        });
 
-      // Mark overlay as injected to prevent double-injection
-      window.__reactRefreshOverlayInjected = true;
-    }
-  });
+        // Mark overlay as injected to prevent double-injection
+        window.__reactRefreshOverlayInjected = true;
+      }
+    });
+  }
 }
diff --git a/client/LegacyWDSSocketEntry.js b/client/LegacyWDSSocketEntry.js
@@ -1,4 +1,4 @@
-import * as SockJS from 'sockjs-client/dist/sockjs.js';
+const SockJS = require('sockjs-client/dist/sockjs.js');
 
 /**
  * A SockJS client adapted for use with webpack-dev-server.

diff --git a/client/ReactRefreshEntry.js b/client/ReactRefreshEntry.js
@@ -1,21 +1,23 @@
 /* global __react_refresh_library__ */
 
-import safeThis from 'core-js-pure/features/global-this';
-import * as RefreshRuntime from 'react-refresh/runtime';
+const safeThis = require('core-js-pure/features/global-this.js');
+const RefreshRuntime = require('react-refresh/runtime.js');
 
-if (process.env.NODE_ENV !== 'production' && typeof safeThis !== 'undefined') {
-  var $RefreshInjected$ = '__reactRefreshInjected';
-  // Namespace the injected flag (if necessary) for monorepo compatibility
-  if (typeof __react_refresh_library__ !== 'undefined' && __react_refresh_library__) {
-    $RefreshInjected$ += '_' + __react_refresh_library__;
-  }
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof safeThis !== 'undefined') {
+    var $RefreshInjected$ = '__reactRefreshInjected';
+    // Namespace the injected flag (if necessary) for monorepo compatibility
+    if (typeof __react_refresh_library__ !== 'undefined' && __react_refresh_library__) {
+      $RefreshInjected$ += '_' + __react_refresh_library__;
+    }
 
-  // Only inject the runtime if it hasn't been injected
-  if (!safeThis[$RefreshInjected$]) {
-    // Inject refresh runtime into global scope
-    RefreshRuntime.injectIntoGlobalHook(safeThis);
+    // Only inject the runtime if it hasn't been injected
+    if (!safeThis[$RefreshInjected$]) {
+      // Inject refresh runtime into global scope
+      RefreshRuntime.injectIntoGlobalHook(safeThis);
 
-    // Mark the runtime as injected to prevent double-injection
-    safeThis[$RefreshInjected$] = true;
+      // Mark the runtime as injected to prevent double-injection
+      safeThis[$RefreshInjected$] = true;
+    }
   }
 }
diff --git a/client/utils/errorEventHandlers.js b/client/utils/errorEventHandlers.js
@@ -90,8 +90,13 @@ function createWindowEventHandler(eventType, createHandler) {
   return register;
 }
 
-export const handleError = createWindowEventHandler('error', createErrorHandler);
-export const handleUnhandledRejection = createWindowEventHandler(
+const handleError = createWindowEventHandler('error', createErrorHandler);
+const handleUnhandledRejection = createWindowEventHandler(
   'unhandledrejection',
   createRejectionHandler
 );
+
+module.exports = {
+  handleError: handleError,
+  handleUnhandledRejection: handleUnhandledRejection,
+};
diff --git a/client/utils/formatWebpackErrors.js b/client/utils/formatWebpackErrors.js
@@ -93,4 +93,4 @@ function formatWebpackErrors(errors) {
   return formattedErrors;
 }
 
-export default formatWebpackErrors;
+module.exports = formatWebpackErrors;
diff --git a/client/utils/retry.js b/client/utils/retry.js
@@ -17,4 +17,4 @@ function runWithRetry(callback, maxRetries) {
   executeWithRetryAndTimeout(0);
 }
 
-export default runWithRetry;
+module.exports = runWithRetry;
diff --git a/overlay/components/CompileErrorTrace.js b/overlay/components/CompileErrorTrace.js
@@ -1,7 +1,7 @@
-import * as ansiHTML from 'ansi-html';
-import * as entities from 'html-entities';
-import theme from '../theme.js';
-import { formatFilename } from '../utils.js';
+const ansiHTML = require('ansi-html');
+const entities = require('html-entities');
+const theme = require('../theme.js');
+const { formatFilename } = require('../utils.js');
 
 ansiHTML.setColors(theme);
 
@@ -50,4 +50,4 @@ function CompileErrorTrace(document, root, props) {
   root.appendChild(stackContainer);
 }
 
-export default CompileErrorTrace;
+module.exports = CompileErrorTrace;
diff --git a/overlay/components/PageHeader.js b/overlay/components/PageHeader.js
@@ -1,5 +1,5 @@
-import theme from '../theme.js';
-import Spacer from './Spacer.js';
+const Spacer = require('./Spacer.js');
+const theme = require('../theme.js');
 
 /**
  * @typedef {Object} PageHeaderProps
@@ -53,4 +53,4 @@ function PageHeader(document, root, props) {
   });
 }
 
-export default PageHeader;
+module.exports = PageHeader;
diff --git a/overlay/components/RuntimeErrorFooter.js b/overlay/components/RuntimeErrorFooter.js
@@ -1,5 +1,5 @@
-import theme from '../theme.js';
-import Spacer from './Spacer.js';
+const Spacer = require('./Spacer.js');
+const theme = require('../theme.js');
 
 /**
  * @typedef {Object} RuntimeErrorFooterProps
@@ -88,4 +88,4 @@ function RuntimeErrorFooter(document, root, props) {
   }
 }
 
-export default RuntimeErrorFooter;
+module.exports = RuntimeErrorFooter;
diff --git a/overlay/components/RuntimeErrorHeader.js b/overlay/components/RuntimeErrorHeader.js
@@ -1,5 +1,5 @@
-import theme from '../theme.js';
-import Spacer from './Spacer.js';
+const Spacer = require('./Spacer.js');
+const theme = require('../theme.js');
 
 /**
  * @typedef {Object} RuntimeErrorHeaderProps
@@ -34,4 +34,4 @@ function RuntimeErrorHeader(document, root, props) {
   Spacer(document, root, { space: '2.5rem' });
 }
 
-export default RuntimeErrorHeader;
+module.exports = RuntimeErrorHeader;
diff --git a/overlay/components/RuntimeErrorStack.js b/overlay/components/RuntimeErrorStack.js
@@ -1,6 +1,6 @@
-import * as ErrorStackParser from 'error-stack-parser';
-import theme from '../theme.js';
-import { formatFilename } from '../utils.js';
+const ErrorStackParser = require('error-stack-parser');
+const theme = require('../theme.js');
+const { formatFilename } = require('../utils.js');
 
 /**
  * @typedef {Object} RuntimeErrorStackProps
@@ -76,4 +76,4 @@ function RuntimeErrorStack(document, root, props) {
   root.appendChild(stackContainer);
 }
 
-export default RuntimeErrorStack;
+module.exports = RuntimeErrorStack;
diff --git a/overlay/components/Spacer.js b/overlay/components/Spacer.js
@@ -16,4 +16,4 @@ function Spacer(document, root, props) {
   root.appendChild(spacer);
 }
 
-export default Spacer;
+module.exports = Spacer;
diff --git a/overlay/containers/CompileErrorContainer.js b/overlay/containers/CompileErrorContainer.js
@@ -1,6 +1,6 @@
-import CompileErrorTrace from '../components/CompileErrorTrace.js';
-import PageHeader from '../components/PageHeader.js';
-import Spacer from '../components/Spacer.js';
+const CompileErrorTrace = require('../components/CompileErrorTrace.js');
+const PageHeader = require('../components/PageHeader.js');
+const Spacer = require('../components/Spacer.js');
 
 /**
  * @typedef {Object} CompileErrorContainerProps
@@ -22,4 +22,4 @@ function CompileErrorContainer(document, root, props) {
   Spacer(document, root, { space: '1rem' });
 }
 
-export default CompileErrorContainer;
+module.exports = CompileErrorContainer;
diff --git a/overlay/containers/RuntimeErrorContainer.js b/overlay/containers/RuntimeErrorContainer.js
@@ -1,6 +1,6 @@
-import PageHeader from '../components/PageHeader.js';
-import RuntimeErrorStack from '../components/RuntimeErrorStack.js';
-import Spacer from '../components/Spacer.js';
+const PageHeader = require('../components/PageHeader.js');
+const RuntimeErrorStack = require('../components/RuntimeErrorStack.js');
+const Spacer = require('../components/Spacer.js');
 
 /**
  * @typedef {Object} RuntimeErrorContainerProps
@@ -26,4 +26,4 @@ function RuntimeErrorContainer(document, root, props) {
   Spacer(document, root, { space: '1rem' });
 }
 
-export default RuntimeErrorContainer;
+module.exports = RuntimeErrorContainer;
diff --git a/overlay/index.js b/overlay/index.js
@@ -1,9 +1,9 @@
-import RuntimeErrorFooter from './components/RuntimeErrorFooter.js';
-import RuntimeErrorHeader from './components/RuntimeErrorHeader.js';
-import CompileErrorContainer from './containers/CompileErrorContainer.js';
-import RuntimeErrorContainer from './containers/RuntimeErrorContainer.js';
-import theme from './theme.js';
-import { debounce, removeAllChildren } from './utils.js';
+const RuntimeErrorFooter = require('./components/RuntimeErrorFooter.js');
+const RuntimeErrorHeader = require('./components/RuntimeErrorHeader.js');
+const CompileErrorContainer = require('./containers/CompileErrorContainer.js');
+const RuntimeErrorContainer = require('./containers/RuntimeErrorContainer.js');
+const theme = require('./theme.js');
+const { debounce, removeAllChildren } = require('./utils.js');
 
 /**
  * @callback RenderFn
@@ -235,7 +235,7 @@ function cleanup() {
  * Clears Webpack compilation errors and dismisses the compile error overlay.
  * @returns {void}
  */
-export function clearCompileError() {
+function clearCompileError() {
   if (!root || currentMode !== 'compileError') {
     return;
   }
@@ -250,7 +250,7 @@ export function clearCompileError() {
  * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
  * @returns {void}
  */
-export function clearRuntimeErrors(dismissOverlay) {
+function clearRuntimeErrors(dismissOverlay) {
   if (!root || currentMode !== 'runtimeError') {
     return;
   }
@@ -269,7 +269,7 @@ export function clearRuntimeErrors(dismissOverlay) {
  * @param {string} message
  * @returns {void}
  */
-export function showCompileError(message) {
+function showCompileError(message) {
   if (!message) {
     return;
   }
@@ -284,7 +284,7 @@ export function showCompileError(message) {
  * @param {Error[]} errors
  * @returns {void}
  */
-export function showRuntimeErrors(errors) {
+function showRuntimeErrors(errors) {
   if (!errors || !errors.length) {
     return;
   }
@@ -317,9 +317,17 @@ function isWebpackCompileError(error) {
  * @param {Error} error A valid error object.
  * @returns {void}
  */
-export function handleRuntimeError(error) {
+function handleRuntimeError(error) {
   if (error && !isWebpackCompileError(error) && currentRuntimeErrors.indexOf(error) === -1) {
     currentRuntimeErrors = currentRuntimeErrors.concat(error);
   }
   debouncedShowRuntimeErrors(currentRuntimeErrors);
 }
+
+module.exports = Object.freeze({
+  clearCompileError: clearCompileError,
+  clearRuntimeErrors: clearRuntimeErrors,
+  handleRuntimeError: handleRuntimeError,
+  showCompileError: showCompileError,
+  showRuntimeErrors: showRuntimeErrors,
+});
diff --git a/overlay/theme.js b/overlay/theme.js
@@ -36,4 +36,4 @@ const theme = {
   dimgrey: '343434',
 };
 
-export default theme;
+module.exports = theme;
diff --git a/overlay/utils.js b/overlay/utils.js
@@ -4,7 +4,7 @@
  * @param {number} wait Milliseconds to wait before invoking again.
  * @return {function(...*): void} The debounced function.
  */
-export function debounce(fn, wait) {
+function debounce(fn, wait) {
   /**
    * A cached setTimeout handler.
    * @type {number | undefined}
@@ -32,7 +32,7 @@ export function debounce(fn, wait) {
  * @param {string} filename The filename to be formatted.
  * @returns {string} The formatted filename.
  */
-export function formatFilename(filename) {
+function formatFilename(filename) {
   // Strip away protocol and domain for compiled files
   const htmlMatch = /^https?:\/\/(.*)\/(.*)/.exec(filename);
   if (htmlMatch && htmlMatch[1] && htmlMatch[2]) {
@@ -55,7 +55,7 @@ export function formatFilename(filename) {
  * @param {number} [skip] Number of elements to skip removing.
  * @returns {void}
  */
-export function removeAllChildren(element, skip) {
+function removeAllChildren(element, skip) {
   /** @type {Node[]} */
   const childList = Array.prototype.slice.call(
     element.childNodes,
@@ -66,3 +66,9 @@ export function removeAllChildren(element, skip) {
     element.removeChild(childList[i]);
   }
 }
+
+module.exports = {
+  debounce: debounce,
+  formatFilename: formatFilename,
+  removeAllChildren: removeAllChildren,
+};
diff --git a/package.json b/package.json
@@ -37,11 +37,11 @@
     "types"
   ],
   "scripts": {
-    "pretest": "yarn link && yarn link \"@pmmmwh/react-refresh-webpack-plugin\"",
-    "posttest": "yarn unlink \"@pmmmwh/react-refresh-webpack-plugin\"",
+    "pretest": "yalc publish --no-scripts && yalc add --dev @pmmmwh/react-refresh-webpack-plugin",
+    "posttest": "yalc remove --all",
     "test": "node scripts/test.js",
     "test:webpack-4": "cross-env WEBPACK_VERSION=4 yarn test",
-    "lint": "eslint --report-unused-disable-directives --ext .js .",
+    "lint": "eslint --report-unused-disable-directives --ext .js,.jsx .",
     "lint:fix": "yarn lint --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\"",
@@ -100,6 +100,7 @@
     "webpack-hot-middleware": "^2.25.0",
     "webpack-plugin-serve": "^1.4.1",
     "webpack.legacy": "npm:[email protected]",
+    "yalc": "^1.0.0-pre.53",
     "yn": "^4.0.0"
   },
   "peerDependencies": {