> For AI agents: the complete documentation index is available at https://rspack.rs/llms.txt, the full documentation bundle is available at https://rspack.rs/llms-full.txt.

# Preact

## How to use

Rspack provides two solutions to support Preact:

- **Use Rsbuild**: Rsbuild provides out-of-the-box support for Preact, allowing you to quickly create a Preact project. See [Rsbuild - Preact](https://rsbuild.rs/guide/framework/preact) for details.
- **Manually configure Rspack**: You can refer to the current document to manually add configurations for Preact.

## Configure JSX/TSX

Rspack leverages SWC transformer for JSX/TSX.

Add `builtin:swc-loader` loader to support `jsx` and `tsx`:

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            detectSyntax: 'auto',
          },
        },
      },
    ],
  },
};
```

Refer to [Builtin swc-loader](https://rspack.rs/guide/features/builtin-swc-loader.md) for detailed configurations.

Refer to [examples/preact](https://github.com/rstackjs/rstack-examples/blob/main/rspack/preact) for the full example.

## Preact Refresh

To enable Preact Refresh, the following steps are required:

- Add the `@rspack/plugin-preact-refresh` plugin to inject runtime code
- Add the loader for code transformation

### @rspack/plugin-preact-refresh

First you need to install the dependencies:


```sh [npm]
npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
```

```sh [yarn]
yarn add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
```

```sh [pnpm]
pnpm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
```

```sh [bun]
bun add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D
```

```sh [deno]
deno add npm:@rspack/plugin-preact-refresh npm:@prefresh/core npm:@prefresh/utils -D
```

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`, which has been integrated in the [@rspack/plugin-preact-refresh](https://github.com/rstackjs/rspack-plugin-preact-refresh) plugin
- 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.

```js title="rspack.config.mjs"
import { rspack } from '@rspack/core';
import PreactRefreshPlugin from '@rspack/plugin-preact-refresh';

const isDev = process.env.NODE_ENV === 'development';

export default {
  mode: isDev ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            detectSyntax: 'auto',
            jsc: {
              experimental: {
                plugins: [
                  [
                    '@swc/plugin-prefresh', // enable prefresh specific transformation
                    {
                      library: ['preact-like-framework'], // the customizable preact name, default is `["preact", "preact/compat", "react"]`
                    },
                  ],
                ],
              },
              transform: {
                react: {
                  development: isDev,
                  refresh: isDev, // enable common react transformation
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [
    isDev && new PreactRefreshPlugin(),
    isDev && new rspack.HotModuleReplacementPlugin(),
  ],
};
```

Refer to [examples/preact-refresh](https://github.com/rstackjs/rstack-examples/tree/main/rspack/preact-refresh) for the full example.