feat: Add support for refreshing hmr on failure (#182)

* feat: Add support for refreshing hmr on failure

* fix: Fix logic

* fix: Fix tests

* test: Add a test against force refresh feature

* fix: Fix logic for refresh on failure

It looks like that requires a little different kind of check.

* fix: Make client implementation work properly in mixed mode

I found a better place for applying the logic.

* chore: Add an initial example

* fix: Fix client link

* chore: Update dependency to avoid a warning

* chore: Move the example behind recipes

* chore: Add a recipe

* chore: Drop React linting

Recipes aren't linted anyhow.

Author: bebraw

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "shellscape",
+  "extends": ["shellscape"],
   "globals": {
     "document": true,
     "ʎɐɹɔosǝʌɹǝs": true,

README.md

@@ -131,12 +131,12 @@ This setting can be handy when using the HTML5 History API; `index.html` page wi
 _Note: The `Accept` header is explicitly stripped from the `/wps` WebSocket path when using `historyFallback`, due to [an issue](https://github.com/shellscape/webpack-plugin-serve/issues/94) with how Firefox and the middleware interact._
 
 ### `hmr`
-Type: `boolean`<br>
+Type: `boolean | 'refresh-on-failure'`<br>
 Default: `true`
 
 If `true`, will enable [`Hot Module Replacement`](https://webpack.js.org/concepts/hot-module-replacement/) which exchanges, adds, or removes modules from a bundle dynamically while the application still running, without the need of a full page reload.
 
-_Note: If the build process generates errors, the client (browser) will not be notified of new changes and no HMR will be performed. Errors must be resolved before HMR can proceed._
+_Note: If the build process generates errors, the client (browser) will not be notified of new changes and no HMR will be performed. Errors must be resolved before HMR can proceed. To force a refresh, pass `refresh-on-failure' to this option._
 
 _Note: If using in combination with `http2`, the `http2` option `allowHTTP1` must be enabled for the HMR WS connection to work._
 

lib/client/client.js

@@ -10,7 +10,7 @@
 */
 /* eslint-disable global-require */
 const run = (buildHash, options) => {
-  const { address, client = {}, progress, secure, status } = options;
+  const { address, client = {}, hmr, progress, secure, status } = options;
 
   options.firstInstance = !window.webpackPluginServe; // eslint-disable-line no-param-reassign
 
@@ -67,7 +67,7 @@ const run = (buildHash, options) => {
         // matches the wpsId set in options. this is how we can identify multiple compilers in the
         // client.
         if (wpsId && wpsId === options.wpsId) {
-          replace(buildHash, hash);
+          replace(buildHash, hash, hmr === 'refresh-on-failure');
         }
         break;
       default:

lib/client/hmr.js

@@ -12,20 +12,25 @@ const { error, info, refresh, warn } = require('./log')();
 
 let latest = true;
 
-const hmr = {
-  onUnaccepted(data) {
-    warn('Change in unaccepted module(s):\n', data);
-    warn(data);
-  },
-  onDeclined(data) {
-    warn('Change in declined module(s):\n', data);
-  },
-  onErrored(data) {
-    error('Error in module(s):\n', data);
-  }
+const hmr = (onFailure) => {
+  return {
+    onUnaccepted(data) {
+      onFailure();
+      warn('Change in unaccepted module(s):\n', data);
+      warn(data);
+    },
+    onDeclined(data) {
+      onFailure();
+      warn('Change in declined module(s):\n', data);
+    },
+    onErrored(data) {
+      onFailure();
+      error('Error in module(s):\n', data);
+    }
+  };
 };
 
-const replace = async (buildHash, hash) => {
+const replace = async (buildHash, hash, refreshOnFailure) => {
   const { apply, check, status } = module.hot;
 
   if (hash) {
@@ -57,7 +62,18 @@ const replace = async (buildHash, hash) => {
       return;
     }
 
-    modules = await apply(hmr);
+    modules = await apply(
+      hmr(
+        refreshOnFailure
+          ? () => {
+              if (refreshOnFailure) {
+                // eslint-disable-next-line no-undef
+                location.reload();
+              }
+            }
+          : () => {}
+      )
+    );
 
     if (modules) {
       latest = true;

lib/validate.js

@@ -42,7 +42,7 @@ module.exports = {
       compress: nullable(boolean()),
       headers: nullable(type({})),
       historyFallback: union([boolean(), type({})]),
-      hmr: boolean(),
+      hmr: union([boolean(), literal('refresh-on-failure')]),
       host: nullable(union([promise, string()])),
       http2: union([boolean(), type({})]),
       https: nullable(type({})),