Preact refresh plugin for Rspack.
First you need to install the dependencies:
npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
# or
yarn add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
# or
pnpm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
# or
bun add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
The enabling of the Preact Refresh is divided into two parts: code injection and code transformation
- Code injection: injects code that interacts with
@prefresh/core
and@prefresh/utils
, this is what this plugin does. - Code transformation requires a loader
- Use
builtin:swc-loader
orswc-loader
- Enable
jsc.transform.react.refresh
to support common react transformation - Add
@swc/plugin-prefresh
intojsc.experimental.plugins
to support the specific transformation of preact
- Enable
- Use
babel-loader
and add official babel plugin of prefresh.
- Use
In versions below 1.0.0, Rspack did not support preact refresh with
swc-loader
.Please use
builtin:swc-loader
and enable preact specific transformation withrspackExperiments.preact: {}
const PreactRefreshPlugin = require("@rspack/plugin-preact-refresh");
const isDev = process.env.NODE_ENV === "development";
module.exports = {
// ...
mode: isDev ? "development" : "production",
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: "builtin:swc-loader",
options: {
jsc: {
experimental: {
plugins: [
[
"@swc/plugin-prefresh", // enable prefresh specific transformation
{
library: ["preact-like-framework"], // the customizable preact name, default is `["preact", "preact/compat", "react"]`
},
],
],
},
parser: {
syntax: "ecmascript",
jsx: true,
},
transform: {
react: {
development: isDev,
refresh: isDev, // enable common react transformation
},
},
},
},
},
},
],
},
plugins: [isDev && new PreactRefreshPlugin()].filter(Boolean),
};
- Type: Rspack.RuleSetCondition
- Default:
/\.([jt]sx?)$/
Include files to be processed by the plugin. The value is the same as the rule.test
option in Rspack.
new PreactRefreshPlugin({
include: [/\.jsx$/, /\.tsx$/],
});
- Type: Rspack.RuleSetCondition
- Default:
/node_modules/
Exclude files from being processed by the plugin. The value is the same as the rule.exclude
option in Rspack.
new PreactRefreshPlugin({
exclude: [/node_modules/, /some-other-module/],
});
- Type:
string
- Default:
path.dirname(require.resolve('preact/package.json'))
Path to the preact
package.
const path = require("node:path");
new PreactRefreshPlugin({
preactPath: path.dirname(require.resolve("preact/package.json")),
});
See examples/preact-refresh for the full example.
Thanks to the prefresh created by @Jovi De Croock, which inspires implement this plugin.
Rspack is MIT licensed.