#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 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:

export default {  module: {  rules: [  {  test: /\.jsx$/,  use: {  loader: 'builtin:swc-loader',  options: {  jsc: {  parser: {  syntax: 'ecmascript',  jsx: true,  },  },  },  },  type: 'javascript/auto',  },  {  test: /\.tsx$/,  use: {  loader: 'builtin:swc-loader',  options: {  jsc: {  parser: {  syntax: 'typescript',  tsx: true,  },  },  },  },  type: 'javascript/auto',  },  ],  }, };

Refer to Builtin swc-loader for detailed configurations.

Refer to examples/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:

npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D

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, which has been integrated in the @rspack/plugin-preact-refresh plugin
• 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.

import PreactRefreshPlugin from '@rspack/plugin-preact-refresh';  const isDev = process.env.NODE_ENV === 'development';  export default {  // ...  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(),  isDev && new rspack.HotModuleReplacementPlugin(),  ], };

Refer to examples/preact-refresh for the full example.