@rspack/plugin-react-refresh 1.0.0-beta.3 → 1.0.0-beta.5

package/LICENSE

@@ -2,7 +2,6 @@ MIT License
 
 Copyright (c) 2022-present Bytedance, Inc. and its affiliates.
 
-
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -5,11 +5,75 @@
 
 # @rspack/plugin-react-refresh
 
-React refresh plugin for rspack.
+React refresh plugin for [Rspack](https://github.com/web-infra-dev/rspack).
 
-## Documentation
+## Installation
 
-See [https://rspack.dev](https://rspack.dev) for details.
+First you need to install this plugin and its dependencies:
+
+```bash
+npm add @rspack/plugin-react-refresh react-refresh -D
+# or
+yarn add @rspack/plugin-react-refresh react-refresh -D
+# or
+pnpm add @rspack/plugin-react-refresh react-refresh -D
+# or
+bun add @rspack/plugin-react-refresh react-refresh -D
+```
+
+## Usage
+
+Enabling [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) functionality primarily involves two aspects: code injection and code transformation.
+
+- Code injection will inject some code from the [react-refresh](https://www.npmjs.com/package/react-refresh) package, as well as some custom runtime code, all of which are integrated in this plugin and can be injected through.
+- Code transformation can be added through loaders, such as [jsc.transform.react.refresh](https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh) for [swc-loader](https://swc.rs/docs/usage/swc-loader) or the [react-refresh/babel](https://github.com/facebook/react/tree/main/packages/react-refresh) for [babel-loader](https://github.com/babel/babel-loader).
+
+```js
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const isDev = process.env.NODE_ENV === 'development';
+
+module.exports = {
+  experiments: {
+    rspackFuture: {
+      disableTransformByDefault: true,
+    },
+  },
+  // ...
+  mode: isDev ? 'development' : 'production',
+  module: {
+    rules: [
+      {
+        test: /\.jsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+              transform: {
+                react: {
+                  development: isDev,
+                  refresh: isDev,
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [isDev && new ReactRefreshPlugin()].filter(Boolean),
+};
+```
+
+Compared to the previous approach, this method decouples the React Fast Refresh code injection logic from the transformation logic. The code injection logic is handled uniformly by this plugin, while the code transformation is handled by loaders. This means that this plugin can be used in conjunction with `builtin:swc-loader`, `swc-loader`, or `babel-loader`.
+
+## Example
+
+- For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
+- For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh-babel-loader/rspack.config.js)
 
 ## License
 

package/client/errorOverlayEntry.js

@@ -94,15 +94,17 @@ if (process.env.NODE_ENV !== 'production') {
           hasRuntimeErrors = true;
           __react_refresh_error_overlay__.handleRuntimeError(error);
         });
-        events.handleUnhandledRejection(function handleUnhandledPromiseRejection(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;
       }
-    };
-    setupOverlay()
+    }
+    setupOverlay();
   }
-}
+}

package/client/overlay/components/CompileErrorTrace.js

@@ -33,8 +33,13 @@ function CompileErrorTrace(document, root, props) {
 
   const stackContainer = document.createElement('pre');
   stackContainer.innerHTML = entities.decode(
-    ansiHTML(entities.encode(errorParts.join('\n'), { level: 'html5', mode: 'nonAscii' })),
-    { level: 'html5' }
+    ansiHTML(
+      entities.encode(errorParts.join('\n'), {
+        level: 'html5',
+        mode: 'nonAscii',
+      }),
+    ),
+    { level: 'html5' },
   );
   stackContainer.style.fontFamily = [
     '"Operator Mono SSm"',

package/client/overlay/components/PageHeader.js

@@ -23,8 +23,10 @@ function PageHeader(document, root, props) {
   pageHeaderContainer.style.left = '0';
   pageHeaderContainer.style.right = '0';
   pageHeaderContainer.style.padding = '1rem 1.5rem';
-  pageHeaderContainer.style.paddingLeft = 'max(1.5rem, env(safe-area-inset-left))';
-  pageHeaderContainer.style.paddingRight = 'max(1.5rem, env(safe-area-inset-right))';
+  pageHeaderContainer.style.paddingLeft =
+    'max(1.5rem, env(safe-area-inset-left))';
+  pageHeaderContainer.style.paddingRight =
+    'max(1.5rem, env(safe-area-inset-right))';
   pageHeaderContainer.style.position = 'fixed';
   pageHeaderContainer.style.top = props.topOffset || '0';
 

package/client/overlay/components/RuntimeErrorHeader.js

@@ -16,7 +16,8 @@ const theme = require('../theme.js');
  */
 function RuntimeErrorHeader(document, root, props) {
   const header = document.createElement('div');
-  header.innerText = 'Error ' + (props.currentErrorIndex + 1) + ' of ' + props.totalErrors;
+  header.innerText =
+    'Error ' + (props.currentErrorIndex + 1) + ' of ' + props.totalErrors;
   header.style.backgroundColor = '#' + theme.red;
   header.style.color = '#' + theme.white;
   header.style.fontWeight = '500';

package/client/overlay/components/RuntimeErrorStack.js

@@ -40,7 +40,8 @@ function RuntimeErrorStack(document, root, props) {
     const currentStack = errorStacks[i];
 
     const functionName = document.createElement('code');
-    functionName.innerHTML = ' ' + currentStack.functionName || '(anonymous function)';
+    functionName.innerHTML =
+      ' ' + currentStack.functionName || '(anonymous function)';
     functionName.style.color = '#' + theme.yellow;
     functionName.style.fontFamily = [
       '"Operator Mono SSm"',

package/client/overlay/index.js

@@ -323,7 +323,10 @@ const debouncedShowRuntimeErrors = utils.debounce(showRuntimeErrors, 30);
  * @returns {boolean} If the error is a Webpack compilation error.
  */
 function isWebpackCompileError(error) {
-  return /Module [A-z ]+\(from/.test(error.message) || /Cannot find module/.test(error.message);
+  return (
+    /Module [A-z ]+\(from/.test(error.message) ||
+    /Cannot find module/.test(error.message)
+  );
 }
 
 /**
@@ -333,7 +336,11 @@ function isWebpackCompileError(error) {
  * @returns {void}
  */
 function handleRuntimeError(error) {
-  if (error && !isWebpackCompileError(error) && currentRuntimeErrors.indexOf(error) === -1) {
+  if (
+    error &&
+    !isWebpackCompileError(error) &&
+    currentRuntimeErrors.indexOf(error) === -1
+  ) {
     currentRuntimeErrors = currentRuntimeErrors.concat(error);
   }
   debouncedShowRuntimeErrors(currentRuntimeErrors);
@@ -345,4 +352,4 @@ module.exports = Object.freeze({
   handleRuntimeError: handleRuntimeError,
   showCompileError: showCompileError,
   showRuntimeErrors: showRuntimeErrors,
-});
+});

package/client/overlay/utils.js

@@ -59,7 +59,7 @@ function removeAllChildren(element, skip) {
   /** @type {Node[]} */
   const childList = Array.prototype.slice.call(
     element.childNodes,
-    typeof skip !== 'undefined' ? skip : 0
+    typeof skip !== 'undefined' ? skip : 0,
   );
 
   for (let i = 0; i < childList.length; i += 1) {

package/client/reactRefresh.js

@@ -1,23 +1,23 @@
 // Thanks https://github.com/pmmmwh/react-refresh-webpack-plugin
-const RefreshUtils = require("./refreshUtils");
-const RefreshRuntime = require("react-refresh/runtime");
+const RefreshUtils = require('./refreshUtils');
+const RefreshRuntime = require('react-refresh/runtime');
 
 // Port from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getRefreshModuleRuntime.js#L29
 function refresh(moduleId, webpackHot) {
-	const currentExports = RefreshUtils.getModuleExports(moduleId);
-	const fn = exports => {
-		RefreshUtils.executeRuntime(exports, moduleId, webpackHot);
-	};
-	if (typeof Promise !== "undefined" && currentExports instanceof Promise) {
-		currentExports.then(fn);
-	} else {
-		fn(currentExports);
-	}
+  const currentExports = RefreshUtils.getModuleExports(moduleId);
+  const fn = (exports) => {
+    RefreshUtils.executeRuntime(exports, moduleId, webpackHot);
+  };
+  if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
+    currentExports.then(fn);
+  } else {
+    fn(currentExports);
+  }
 }
 
 module.exports = {
-	refresh,
-	register: RefreshRuntime.register,
-	createSignatureFunctionForTransform:
-		RefreshRuntime.createSignatureFunctionForTransform
+  refresh,
+  register: RefreshRuntime.register,
+  createSignatureFunctionForTransform:
+    RefreshRuntime.createSignatureFunctionForTransform,
 };

package/client/reactRefreshEntry.js

@@ -8,53 +8,53 @@
  * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
  */
 
-var RefreshRuntime = require("react-refresh/runtime");
+var RefreshRuntime = require('react-refresh/runtime');
 var safeThis = (function () {
-	// copied from core-js-pure/features/global-this
-	"use strict";
+  // copied from core-js-pure/features/global-this
+  'use strict';
 
-	var check = function (it) {
-		return it && it.Math == Math && it;
-	};
+  var check = function (it) {
+    return it && it.Math == Math && it;
+  };
 
-	// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-	// eslint-disable-next-line es/no-global-this -- safe
-	return (
-		check(typeof globalThis == "object" && globalThis) ||
-		check(typeof window == "object" && window) ||
-		// eslint-disable-next-line no-restricted-globals -- safe
-		check(typeof self == "object" && self) ||
-		check(typeof __webpack_require__.g == "object" && __webpack_require__.g) ||
-		// eslint-disable-next-line no-new-func -- fallback
-		(function () {
-			return this;
-		})() ||
-		this ||
-		Function("return this")()
-	);
+  // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+  // eslint-disable-next-line es/no-global-this -- safe
+  return (
+    check(typeof globalThis == 'object' && globalThis) ||
+    check(typeof window == 'object' && window) ||
+    // eslint-disable-next-line no-restricted-globals -- safe
+    check(typeof self == 'object' && self) ||
+    check(typeof __webpack_require__.g == 'object' && __webpack_require__.g) ||
+    // eslint-disable-next-line no-new-func -- fallback
+    (function () {
+      return this;
+    })() ||
+    this ||
+    Function('return this')()
+  );
 })();
 
-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__;
-		}
+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$]) {
-			RefreshRuntime.injectIntoGlobalHook(safeThis);
+    // Only inject the runtime if it hasn't been injected
+    if (!safeThis[$RefreshInjected$]) {
+      RefreshRuntime.injectIntoGlobalHook(safeThis);
 
-			// Empty implementation to avoid "ReferenceError: variable is not defined" in module which didn't pass builtin:react-refresh-loader
-			safeThis.$RefreshSig$ = () => type => type;
-			safeThis.$RefreshReg$ = () => {};
+      // Empty implementation to avoid "ReferenceError: variable is not defined" in module which didn't pass builtin:react-refresh-loader
+      safeThis.$RefreshSig$ = () => (type) => type;
+      safeThis.$RefreshReg$ = () => {};
 
-			// Mark the runtime as injected to prevent double-injection
-			safeThis[$RefreshInjected$] = true;
-		}
-	}
+      // Mark the runtime as injected to prevent double-injection
+      safeThis[$RefreshInjected$] = true;
+    }
+  }
 }