@pmmmwh/react-refresh-webpack-plugin - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-beta.0

CHANGELOG.md

 ## 0.2.0 (2 March 2020)
 
 - Added `webpack-hot-middleware` support (#23)
-- Fixed dependency on a global `this` variable to better support web workers (#26)
+- Fixed dependency on a global `this` variable to better support web workers (#29)
 
@@ -6,0 +6,0 @@ ## 0.1.3 (19 December 2019)

package.json

 {
   "name": "@pmmmwh/react-refresh-webpack-plugin",
-  "version": "0.2.0",
+  "version": "0.3.0-beta.0",
   "description": "An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -108,12 +108,70 @@ # React Refresh Webpack Plugin
 This plugin accepts a few options that are specifically targeted for advanced users.
-The allowed values are as follows:
 
-|           Name            |   Type    | Default | Description                                                                                                                                                                                                       |
-| :-----------------------: | :-------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack.                                   |
-|     **`forceEnable`**     | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example.                                                     |
-| **`useLegacyWDSSockets`** | `boolean` | `false` | Set this to true if you are using a webpack-dev-server version prior to 3.8 as it requires a custom SocketJS implementation. If you use this, you will also need to install `sockjs-client` as a peer depencency. |
+### `options.disableRefreshCheck`
 
+Type: `boolean`
+Default: `false`
+
+Disables detection of react-refresh's Babel plugin.
+Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack.
+
+### `options.forceEnable`
+
+Type: `boolean`
+Default: `false`
+
+Enables the plugin forcefully.
+Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example.
+
+### `options.overlay`
+
+Type: `boolean | ErrorOverlayOptions`
+Default: `undefined`
+
+Modifies how the error overlay integration works in the plugin.
+
+- If `options.overlay` is not provided or is `true`, the plugin will use the bundled error overlay interation.
+- If `options.overlay` is `false`, it will disable the error overlay integration.
+- If an `ErrorOverlayOptions` object is provided:
+  (**NOTE**: This is an advanced option that exists mostly for tools like `create-react-app` or `Next.js`)
+
+  - A `module` property must be defined.
+    It should reference a JS file that exports at least two functions with footprints as follows:
+
+    ```ts
+    function handleRuntimeError(error: Error) {}
+    function clearRuntimeErrors() {}
+    ```
+
+  - An optional `entry` property could also be defined, which should also reference a JS file that contains code needed to set up your custom error overlay integration.
+    If it is not defined, the bundled error overlay entry will be used.
+    It expects the `module` file to export two more functions:
+
+    ```ts
+    function showCompileError(webpackErrorMessage: string) {}
+    function clearCompileErrors() {}
+    ```
+
+    Note that `webpackErrorMessage` is ANSI encoded, so you will need logic to parse it.
+
+  - An example configuration:
+    ```js
+    const options = {
+      overlay: {
+        entry: 'some-webpack-entry-file',
+        module: 'some-error-overlay-module',
+      },
+    };
+    ```
+
+### `options.useLegacyWDSSockets`
+
+Type: `boolean`
+Default: `false`
+
+Set this to true if you are using a `webpack-dev-server` version prior to 3.8 as it requires a custom SockJS implementation.
+If you use this feature, you will also need to install `sockjs-client` as a peer dependency.
+
 ## Related Work
 
 - [Initial Implementation by @maisano](https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716)

src/helpers/index.js

 const createRefreshTemplate = require('./createRefreshTemplate');
 const injectRefreshEntry = require('./injectRefreshEntry');
+const validateOptions = require('./validateOptions');
 
@@ -7,2 +8,3 @@ module.exports = {
   injectRefreshEntry,
+  validateOptions,
 };

src/helpers/injectRefreshEntry.js

@@ -7,3 +7,3 @@ /** @typedef {string | string[] | import('webpack').Entry} StaticEntry */
  * @param {WebpackEntry} [originalEntry] A Webpack entry object.
- * @param {ReactRefreshPluginOptions} [options] Configuration options for this plugin
+ * @param {import('../types').ReactRefreshPluginOptions} [options] Configuration options for this plugin.
  * @returns {WebpackEntry} An injected entry object.
@@ -13,2 +13,3 @@ */
   const entryInjects = [
+    // Legacy WDS SockJS integration
     options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'),
@@ -18,3 +19,3 @@ // React-refresh runtime
     // Error overlay runtime
-    require.resolve('../runtime/ErrorOverlayEntry'),
+    options.overlay && options.overlay.entry,
     // React-refresh Babel transform detection
@@ -21,0 +22,0 @@ require.resolve('../runtime/BabelDetectComponent'),

src/index.js

 const path = require('path');
 const webpack = require('webpack');
-const { createRefreshTemplate, injectRefreshEntry } = require('./helpers');
-const { refreshUtils } = require('./runtime/globals');
+const { createRefreshTemplate, injectRefreshEntry, validateOptions } = require('./helpers');
+const { errorOverlay, refreshUtils } = require('./runtime/globals');
 
-/**
- * @typedef {Object} ReactRefreshPluginOptions
- * @property {boolean} [disableRefreshCheck] Disables detection of react-refresh's Babel plugin.
- * @property {boolean} [forceEnable] Enables the plugin forcefully.
- * @property {boolean} [useLegacyWDSSockets] Uses a custom SocketJS implementation for older versions of webpack-dev-server
- */
-
-/** @type {ReactRefreshPluginOptions} */
-const defaultOptions = {
-  disableRefreshCheck: false,
-  forceEnable: false,
-  useLegacyWDSSockets: false,
-};
-
 class ReactRefreshPlugin {
   /**
-   * @param {ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
+   * @param {import('./types').ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
    * @returns {void}
    */
   constructor(options) {
-    this.options = Object.assign(defaultOptions, options);
+    this.options = validateOptions(options);
   }
 
   /**
-   * Applies the plugin
+   * Applies the plugin.
    * @param {import('webpack').Compiler} compiler A webpack compiler object.
@@ -53,2 +39,3 @@ * @returns {void}
     const providePlugin = new webpack.ProvidePlugin({
+      [errorOverlay]: this.options.overlay && require.resolve(this.options.overlay.module),
       [refreshUtils]: require.resolve('./runtime/utils'),
@@ -55,0 +42,0 @@ });

src/runtime/globals.js

@@ -0,1 +1,3 @@
+module.exports.errorOverlay = '__react_refresh_error_overlay__';
+
 module.exports.refreshUtils = '__react_refresh_utils__';

src/runtime/utils.js

@@ -0,3 +1,3 @@
+/* global __react_refresh_error_overlay__ */
 const Refresh = require('react-refresh/runtime');
-const ErrorOverlay = require('../overlay');
 
@@ -76,3 +76,5 @@ /**
   function hotErrorHandler(error) {
-    ErrorOverlay.handleRuntimeError(error);
+    if (__react_refresh_error_overlay__) {
+      __react_refresh_error_overlay__.handleRuntimeError(error);
+    }
   }
@@ -113,3 +115,5 @@
         Refresh.performReactRefresh();
-        ErrorOverlay.clearRuntimeErrors();
+        if (__react_refresh_error_overlay__) {
+          __react_refresh_error_overlay__.clearRuntimeErrors();
+        }
       }, 30);
@@ -116,0 +120,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62914

increased by4.9%

Number of package files

33

increased by6.45%

Lines of code

1558

increased by3.18%

Number of lines in readme file

177

increased by48.74%

Worsened metrics

Number of low supply chain risk alerts

4

increased by33.33%

No dependency changes