Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

rspack-contrib/rspack-plugin-preact-refresh

Open more actions menu

Repository files navigation

Rspack Banner

@rspack/plugin-preact-refresh

Preact refresh plugin for Rspack.

Installation

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

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.

const PreactRefreshPlugin = require("@rspack/plugin-preact-refresh");
const isDev = process.env.NODE_ENV === "development";

module.exports = {
  // ...
  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 PreactRefreshPlugin()].filter(Boolean),
};

Options

include

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$/],
});

exclude

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/],
});

preactPath

  • 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")),
});

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.

About

Preact refresh plugin for Rspack

Topics

Resources

License

Stars

Watchers

Forks

Contributors 6

Morty Proxy This is a proxified and sanitized view of the page, visit original site.