Skip to content

chore: update references from webpack to Rspack #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenjiahan merged 2 commits into from
Apr 8, 2026
Merged

chore: update references from webpack to Rspack #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dfc198
chore: update references from webpack to Rspack
chenjiahan Apr 7, 2026
e46e0aa
fix
chenjiahan Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/reactRefresh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import {
} from 'react-refresh/runtime';
import { executeRuntime, getModuleExports } from './refreshUtils.js';

function refresh(moduleId, webpackHot) {
function refresh(moduleId, hot) {
const currentExports = getModuleExports(moduleId);
const fn = (exports) => {
var testMode;
if (typeof __react_refresh_test__ !== 'undefined') {
testMode = __react_refresh_test__;
}
executeRuntime(exports, moduleId, webpackHot, testMode);
executeRuntime(exports, moduleId, hot, testMode);
};
if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
currentExports.then(fn);
Expand Down
36 changes: 18 additions & 18 deletions client/refreshUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
} from 'react-refresh/runtime';

/**
* Extracts exports from a webpack module object.
* @param {string} moduleId A Webpack module ID.
* Extracts exports from a Rspack module object.
* @param {string} moduleId An Rspack module ID.
* @returns {*} An exports object from the module.
*/
function getModuleExports(moduleId) {
Expand Down Expand Up @@ -45,7 +45,7 @@ function getModuleExports(moduleId) {
* If this signature changes, it's unsafe to accept the boundary.
*
* This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L795-L816).
* @param {*} moduleExports A Webpack module exports object.
* @param {*} moduleExports An Rspack module exports object.
* @returns {string[]} A React refresh boundary signature array.
*/
function getReactRefreshBoundarySignature(moduleExports) {
Expand Down Expand Up @@ -104,7 +104,7 @@ function createDebounceUpdate() {
* Checks if all exports are likely a React component.
*
* This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L748-L774).
* @param {*} moduleExports A Webpack module exports object.
* @param {*} moduleExports An Rspack module exports object.
* @returns {boolean} Whether the exports are React component like.
*/
function isReactRefreshBoundary(moduleExports) {
Expand All @@ -131,7 +131,7 @@ function isReactRefreshBoundary(moduleExports) {
}

// We can (and have to) safely execute getters here,
// as Webpack manually assigns harmony exports to getters,
// as Rspack/webpack manually assigns ESM exports to getters,
// without any side-effects attached.
// Ref: https://github.com/webpack/webpack/blob/b93048643fe74de2a6931755911da1212df55897/lib/MainTemplate.js#L281
var exportValue = moduleExports[key];
Expand All @@ -147,8 +147,8 @@ function isReactRefreshBoundary(moduleExports) {
* Checks if exports are likely a React component and registers them.
*
* This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L818-L835).
* @param {*} moduleExports A Webpack module exports object.
* @param {string} moduleId A Webpack module ID.
* @param {*} moduleExports An Rspack module exports object.
* @param {string} moduleId An Rspack module ID.
* @returns {void}
*/
function registerExportsForReactRefresh(moduleExports, moduleId) {
Expand Down Expand Up @@ -184,8 +184,8 @@ function registerExportsForReactRefresh(moduleExports, moduleId) {
* Compares previous and next module objects to check for mutated boundaries.
*
* This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L776-L792).
* @param {*} prevExports The current Webpack module exports object.
* @param {*} nextExports The next Webpack module exports object.
* @param {*} prevExports The current Rspack module exports object.
* @param {*} nextExports The next Rspack module exports object.
* @returns {boolean} Whether the React refresh boundary should be invalidated.
*/
function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
Expand All @@ -207,30 +207,30 @@ function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {

var enqueueUpdate = createDebounceUpdate();

function executeRuntime(moduleExports, moduleId, webpackHot, isTest) {
function executeRuntime(moduleExports, moduleId, hot, isTest) {
registerExportsForReactRefresh(moduleExports, moduleId);

if (webpackHot) {
var isHotUpdate = !!webpackHot.data;
if (hot) {
var isHotUpdate = !!hot.data;
var prevExports;
if (isHotUpdate) {
prevExports = webpackHot.data.prevExports;
prevExports = hot.data.prevExports;
}

if (isReactRefreshBoundary(moduleExports)) {
webpackHot.dispose(
hot.dispose(
/**
* A callback to performs a full refresh if React has unrecoverable errors,
* and also caches the to-be-disposed module.
* @param {*} data A hot module data object from Webpack HMR.
* @param {*} data A hot module data object from Rspack HMR.
* @returns {void}
*/
function hotDisposeCallback(data) {
// We have to mutate the data object to get data registered and cached
data.prevExports = moduleExports;
},
);
webpackHot.accept(
hot.accept(
/**
* An error handler to allow self-recovering behaviours.
* @param {Error} error An error occurred during evaluation of a module.
Expand Down Expand Up @@ -261,14 +261,14 @@ function executeRuntime(moduleExports, moduleId, webpackHot, isTest) {
isReactRefreshBoundary(prevExports) &&
shouldInvalidateReactRefreshBoundary(prevExports, moduleExports)
) {
webpackHot.invalidate();
hot.invalidate();
} else {
enqueueUpdate();
}
}
} else {
if (isHotUpdate && typeof prevExports !== 'undefined') {
webpackHot.invalidate();
hot.invalidate();
}
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ class ReactRefreshRspackPlugin {

apply(compiler: Compiler) {
if (
// Webpack do not set process.env.NODE_ENV, so we need to check for mode.
// Ref: https://github.com/webpack/webpack/issues/7074
(compiler.options.mode !== 'development' ||
// We also check for production process.env.NODE_ENV,
// in case it was set and mode is non-development (e.g. 'none')
Expand Down
2 changes: 1 addition & 1 deletion test/test.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const compileWithReactRefresh = (
splitChunks: {
cacheGroups: {
reactRefresh: {
test: /[\\/](react-refresh|rspack-plugin-react-refresh\/client|react-refresh-webpack-plugin)[\\/]/,
test: /[\\/](react-refresh|rspack-plugin-react-refresh\/client)[\\/]/,
name: 'react-refresh',
chunks: 'all',
priority: -1000,
Expand Down
Loading