@rspack/plugin-preact-refresh

Preact refresh plugin for Rspack.

Installation

First you need to install the dependencies:

1npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
2# or
3yarn add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
4# or
5pnpm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
6# or
7bun add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D

Usage

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 or swc-loader
    • Enable jsc.transform.react.refresh to support common react transformation
    • Add @swc/plugin-prefresh into jsc.experimental.plugins to support the specific transformation of preact
  • Use babel-loader and add official babel plugin of prefresh.

In versions below 1.0.0, Rspack did not support preact refresh with swc-loader.

1const PreactRefreshPlugin = require("@rspack/plugin-preact-refresh");
2const isDev = process.env.NODE_ENV === "development";
3
4module.exports = {
5  // ...
6  mode: isDev ? "development" : "production",
7  module: {
8    rules: [
9      {
10        test: /\.jsx$/,
11        // exclude node_modules to avoid dependencies transformed by `@swc/plugin-prefresh`
12        exclude: /node_modules/,
13        use: {
14          loader: "builtin:swc-loader",
15          options: {
16            jsc: {
17              experimental: {
18                plugins: [
19                  [
20                    // enable prefresh specific transformation
21                    require.resolve("@swc/plugin-prefresh"),
22                    {
23                      library: ["preact-like-framework"], // the customizable preact name, default is `["preact", "preact/compat", "react"]`
24                    },
25                  ],
26                ],
27              },
28              parser: {
29                syntax: "ecmascript",
30                jsx: true,
31              },
32              transform: {
33                react: {
34                  development: isDev,
35                  refresh: isDev, // enable common react transformation
36                },
37              },
38            },
39          },
40        },
41      },
42    ],
43  },
44  plugins: [isDev && new PreactRefreshPlugin()].filter(Boolean),
45};

Options

include

• 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.

1new PreactRefreshPlugin({
2  include: [/\.jsx$/, /\.tsx$/],
3});

exclude

• 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.

1new PreactRefreshPlugin({
2  exclude: [/node_modules/, /some-other-module/],
3});

preactPath

• Type: string
• Default: path.dirname(require.resolve('preact/package.json'))

Path to the preact package.

1const path = require("node:path");
2
3new PreactRefreshPlugin({
4  preactPath: path.dirname(require.resolve("preact/package.json")),
5});

Example

See examples/preact-refresh for the full example.

Credits

Thanks to the prefresh created by @Jovi De Croock, which inspires implement this plugin.

License

Rspack is MIT licensed.