https://github.com/rspack-contrib/rspack-plugin-preact-refresh

Preact refresh plugin for Rspack
https://github.com/rspack-contrib/rspack-plugin-preact-refresh

preact rspack

Last synced: about 1 month ago
JSON representation

Preact refresh plugin for Rspack

• Host: GitHub
• URL: https://github.com/rspack-contrib/rspack-plugin-preact-refresh
• Owner: rspack-contrib
• License: mit
• Created: 2024-08-07T09:28:06.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-23T10:04:02.000Z (about 2 months ago)
• Last Synced: 2024-10-10T10:30:03.502Z (about 1 month ago)
• Topics: preact, rspack
• Language: JavaScript
• Homepage:
• Size: 140 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rspack/plugin-preact-refresh

README

        

  

  

# @rspack/plugin-preact-refresh

Preact refresh plugin for [Rspack](https://github.com/web-infra-dev/rspack).

## Installation

First you need to install the dependencies:

```bash

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](https://github.com/preactjs/prefresh) 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`](https://swc.rs/docs/usage/swc-loader)

    - Enable `jsc.transform.react.refresh` to support common react transformation

    - Add [`@swc/plugin-prefresh`](https://github.com/swc-project/plugins/tree/main/packages/prefresh) into `jsc.experimental.plugins` to support the specific transformation of preact

  - Use `babel-loader` and add official [babel plugin](https://github.com/preactjs/prefresh/tree/main/packages/babel) of prefresh.

> 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 with `rspackExperiments.preact: {}`

```js

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),

};

```

## Example

See [examples/preact-refresh](https://github.com/rspack-contrib/rspack-examples/blob/main/rspack/preact-refresh/rspack.config.js) for the full example.

## Credits

Thanks to the [prefresh](https://github.com/preactjs/prefresh) created by [@Jovi De Croock](https://github.com/JoviDeCroock), which inspires implement this plugin.

## License

Rspack is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).