chore: release v0.6.0

.circleci/config.yml

@@ -5,18 +5,18 @@ anchors:
     - '18.20'
     - '20.14'
     - '22.2'
-  - &webpack-version-enum
+  - &wds-version-enum
     - '4'
     - '5'
   - &node-version-param
     node-version:
       default: '20.14'
       enum: *node-version-enum
       type: enum
-  - &webpack-version-param
-    webpack-version:
+  - &wds-version-param
+    wds-version:
       default: '5'
-      enum: *webpack-version-enum
+      enum: *wds-version-enum
       type: enum
 
 commands:
@@ -70,36 +70,23 @@ jobs:
       node-version: << parameters.node-version >>
     parameters:
       <<: *node-version-param
-      <<: *webpack-version-param
+      <<: *wds-version-param
     parallelism: 4
     working_directory: ~/project
     steps:
       - checkout
       - install-deps:
           node-version: << parameters.node-version >>
-      - when:
-          condition:
-            equal:
-              - '4'
-              - << parameters.webpack-version >>
-          steps:
-            - run:
-                name: Use legacy OpenSSL provider if necessary
-                command: |-
-                  if node scripts/node-version.js; then
-                    echo "export NODE_OPTIONS=--openssl-legacy-provider" >> $BASH_ENV
-                    source $BASH_ENV
-                  fi
       - run:
           name: Run Tests
-          command: |
+          command: |-
             TESTFILES=$(circleci tests glob "test/**/*.test.js" | circleci tests split --split-by=timings)
             yarn test $TESTFILES
           environment:
             JEST_JUNIT_ADD_FILE_ATTRIBUTE: 'true'
             JEST_JUNIT_OUTPUT_DIR: test-results/jest
             JEST_JUNIT_OUTPUT_NAME: results.xml
-            WEBPACK_VERSION: << parameters.webpack-version >>
+            WDS_VERSION: << parameters.wds-version >>
       - store_test_results:
           path: test-results
       - store_artifacts:
@@ -113,5 +100,5 @@ workflows:
           matrix:
             parameters:
               node-version: *node-version-enum
-              webpack-version: *webpack-version-enum
-          name: test/node:<< matrix.node-version >>/webpack:<< matrix.webpack-version >>
+              wds-version: *wds-version-enum
+          name: test/node:<< matrix.node-version >>/wds:<< matrix.wds-version >>

.eslintignore

@@ -1,5 +1,6 @@
 *dist/
 *node_modules/
+*umd/
 *__tmp__
 
 # Ignore examples because they might have custom ESLint configurations

.eslintrc.json

@@ -32,7 +32,6 @@
       "globals": {
         "__DEBUG__": true,
         "WDS_VERSION": true,
-        "WEBPACK_VERSION": true,
         "browser": true,
         "window": true
       },

.gitignore

@@ -5,6 +5,7 @@
 
 # distribution
 *dist
+*umd
 
 # misc
 .DS_Store
@@ -19,6 +20,4 @@ yarn-error.log*
 .vscode
 
 # test artifacts
-*.yalc
 *__tmp__
-yalc.lock

.prettierignore

@@ -1,3 +1,4 @@
 *dist/
 *node_modules/
+*umd/
 *__tmp__

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.6.0 (Unknown)
+
+### BREAKING
+
+- Minimum required Node.js version have been bumped to `18.12.0`.
+- Minimum required `webpack` version have been bumped to `5.0.0`.
+- Minimum supported `webpack-dev-server` version have been bumped to `4.8.0`.
+- Minimum supported `webpack-plugin-serve` version have been bumped to `1.0.0`.
+- `overlay.sockHost`, `overlay.sockPath`, `overlay.sockPort`, `overlay.sockProtocol` and `overlay.useURLPolyfill` have all been removed (#850).
+  It was necessary to support WDS below `4.8.0` (published in April 2022),
+  but is no-longer needed as a direct integration with WDS is now possible.
+
+### Features
+
+- Added helper script to better support use cases where React and/or React-DOM are externalized (#852)
+- Migrated from `ansi-html` to `anser` in error overlay (#854)
+
 ## 0.5.15 (3 Jun 2024)
 
 ### Fixes

client/ErrorOverlayEntry.js

@@ -1,8 +1,7 @@
-/* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
+/* global __react_refresh_error_overlay__, __react_refresh_socket__ */
 
 const events = require('./utils/errorEventHandlers.js');
 const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
-const runWithPatchedUrl = require('./utils/patchUrl.js');
 const runWithRetry = require('./utils/retry.js');
 
 // Setup error states
@@ -74,27 +73,29 @@ function compileMessageHandler(message) {
 
 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
-        events.handleError(function handleError(error) {
-          hasRuntimeErrors = true;
-          __react_refresh_error_overlay__.handleRuntimeError(error);
-        });
-        events.handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
-          hasRuntimeErrors = true;
-          __react_refresh_error_overlay__.handleRuntimeError(error);
-        });
+    // 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);
+        },
+        3,
+        'Failed to set up the socket connection.'
+      );
+      // Registers handlers for runtime errors
+      events.handleError(function handleError(error) {
+        hasRuntimeErrors = true;
+        __react_refresh_error_overlay__.handleRuntimeError(error);
+      });
+      events.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;
+    }
   }
 }

client/utils/retry.js

@@ -1,8 +1,8 @@
-function runWithRetry(callback, maxRetries) {
+function runWithRetry(callback, maxRetries, message) {
   function executeWithRetryAndTimeout(currentCount) {
     try {
       if (currentCount > maxRetries - 1) {
-        console.warn('[React Refresh] Failed to set up the socket connection.');
+        console.warn('[React Refresh]', message);
         return;
       }
 

docs/API.md

@@ -150,11 +150,6 @@ interface ErrorOverlayOptions {
   entry?: string | false;
   module?: string | false;
   sockIntegration?: 'wds' | 'whm' | 'wps' | false | string;
-  sockHost?: string;
-  sockPath?: string;
-  sockPort?: number;
-  sockProtocol?: 'http' | 'https' | 'ws' | 'wss';
-  useURLPolyfill?: boolean;
 }
 ```
 
@@ -223,58 +218,3 @@ Common HMR integrations (for Webpack) are support by this plugin out-of-the-box:
 If you use any other HMR integrations (e.g. custom ones), or if you want to customise how the connection is being setup,
 you will need to implement a message client in the provided file/module.
 You can reference implementations inside the [`sockets`](https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/main/sockets) directory.
-
-#### `sockHost`
-
-Default: Parsed from current URL
-
-Type: `string`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom host for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockHost` to something other than `window.location.hostname`.
-
-#### `sockPort`
-
-Default: Parsed from current URL
-
-Type: `number`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom port for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockPort` to something other than `window.location.port`.
-
-#### `sockPath`
-
-Default: `/ws` for WDS v4, `/sockjs-node` for WDS v3
-
-Type: `string`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom path for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockPath` to something other than `/sockjs-node`.
-
-#### `sockProtocol`
-
-Default: Parsed from current URL
-
-Type: `http`, `https`, `ws` or `wss`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Force a protocol for the error overlay to listen for Webpack build messages.
-Useful if you want to enforce https communication, or if you're working under a non-HTTP path.
-
-#### `useURLPolyfill`
-
-Default: Detected from availability in the global scope
-
-Type: `boolean`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Uses a polyfill for the DOM URL API to maintain compatibility in IE11.
-This is only applied to code from the plugin.

docs/TROUBLESHOOTING.md

@@ -15,30 +15,6 @@ This has to be done because, internally,
 `react-hot-loader` intercepts and reconciles the React tree before React can try to re-render it.
 That in turn breaks mechanisms the plugin depends on to deliver the experience.
 
-## Compatibility with IE11 (`webpack-dev-server` only)
-
-Our socket implementation depends on the DOM URL API,
-and as a consequence, a polyfill is needed when running in IE11.
-
-The plugin by default will detect whether the `URL` and `URLSearchParams` constructors are available on the global scope,
-and will fallback to a pony-fill approach (polyfill without global scope pollution) when it is not.
-
-If for some reason you need to force this behaviour,
-e.g. working on browsers with a broken URL implementation,
-you can use the `overlay.useURLPolyfill` option:
-
-```js
-module.exports = {
-  plugins: [
-    new ReactRefreshPlugin({
-      overlay: {
-        useURLPolyfill: true,
-      },
-    }),
-  ],
-};
-```
-
 ## Compatibility with `npm@7`
 
 `npm@7` have brought back the behaviour of auto-installing peer dependencies with new semantics,
@@ -292,9 +268,21 @@ but do note that React DevTools does not inject hooks over a frame boundary (`if
 **Externalise React Refresh**
 
 If all solutions above are not applicable, you can also externalise `react-refresh/runtime` together with React.
+We provide an entrypoint to easily achieve this - `@pmmmwh/react-refresh-webpack-plugin/umd/client.min.js`.
 
-Using this, however, would require you to ensure the injected entry from this plugin is executed before React.
-You can check out [this sandbox](https://codesandbox.io/s/react-refresh-externals-14fpn) for an example on how this could be done.
+If you would like to use the provided script, ensure that it is loaded before React and/or React-DOM.
+You can load this script via any CDN for `npm`, such as `jsDelivr` and `unpkg`:
+
+```html
+<!-- if you prefer jsDelivr -->
+<script src=" https://cdn.jsdelivr.net/npm/@pmmmwh/react-refresh-webpack-plugin@^0.6.0/umd/client.min.js "></script>
+
+<!-- if you prefer unpkg -->
+<script src="https://unpkg.com/@pmmmwh/react-refresh-webpack-plugin@^0.6.0/umd/client.min.js"></script>
+```
+
+If you don't want to use the provided script,
+you can check out [this sandbox](https://codesandbox.io/s/react-refresh-externals-14fpn) for an example on how this could be done manually.
 
 ## Running multiple instances of React Refresh simultaneously
 
@@ -332,21 +320,3 @@ module.exports = {
   ],
 };
 ```
-
-## Webpack 5 compatibility issues with `webpack-dev-server@3`
-
-In `webpack-dev-server@3`,
-there is a bug causing it to mis-judge the runtime environment when the Webpack 5 `browserslist` target is used.
-
-It then fallbacks to thinking a non-browser target is being used,
-in turn skipping injection of the HMR runtime,
-and thus breaking downstream integrations like this plugin.
-
-To overcome this,
-you can conditionally apply the `browserslist` only in production modes in your Webpack configuration:
-
-```js
-module.exports = {
-  target: process.env.NODE_ENV !== 'production' ? 'web' : 'browserslist',
-};
-```