Preact refresh plugin for Rspack.
2.x: For Rspack v2.1.x: For Rspack v1, see v1.x - README for usage guide.
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 -DThe enabling of the Preact Refresh is divided into two parts: code injection and code transformation
- Code injection: injects code that interacts with
@prefresh/coreand@prefresh/utils, this is what this plugin does. - Code transformation requires a loader
- Use
builtin:swc-loaderorswc-loader- Enable
jsc.transform.react.refreshto support common react transformation - Add
@swc/plugin-prefreshintojsc.experimental.pluginsto support the specific transformation of preact
- Enable
- Use
babel-loaderand add official babel plugin of prefresh.
- Use
In versions below 1.0.0, Rspack did not support preact refresh with
swc-loader.
import { createRequire } from 'node:module';
import { PreactRefreshRspackPlugin } from '@rspack/plugin-preact-refresh';
const require = createRequire(import.meta.url);
const isDev = process.env.NODE_ENV === 'development';
export default {
// ...
mode: isDev ? 'development' : 'production',
module: {
rules: [
{
test: /\.jsx$/,
// exclude node_modules to avoid dependencies transformed by `@swc/plugin-prefresh`
exclude: /node_modules/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
experimental: {
plugins: [
[
// enable prefresh specific transformation
require.resolve('@swc/plugin-prefresh'),
{
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 PreactRefreshRspackPlugin()].filter(Boolean),
};- Type: Rspack.RuleSetCondition
- Default:
/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/
Specifies which files should be processed by the Preact Refresh loader. This option is passed to the builtin:preact-refresh-loader as the rule.test condition.
Works identically to Rspack's rule.test option.
new PreactRefreshRspackPlugin({
test: [/\.jsx$/, /\.tsx$/],
});- Type: Rspack.RuleSetCondition
- Default:
undefined
Explicitly includes files to be processed by the Preact Refresh loader. This option is passed to the builtin:preact-refresh-loader as the rule.include condition.
Use this to limit processing to specific directories or file patterns.
Works identically to Rspack's rule.include option.
new PreactRefreshRspackPlugin({
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 PreactRefreshRspackPlugin({
exclude: [/[\\/]node_modules[\\/]/, /some-other-module/],
});- Type:
string - Default:
path.dirname(require.resolve("preact/package.json"))
Path to the preact package.
import path from 'node:path';
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);
new PreactRefreshRspackPlugin({
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.