close
  • English

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

      rspack.config.mjs
      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
      yarn
      pnpm
      bun
      deno
      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.
      Warning

      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: {}
      rspack.config.mjs
      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.