close
  • English

      • Solid plugin

      Source Code

      The Solid plugin provides support for Solid features. The plugin internally integrates babel-preset-solid.

      Tip

      The Solid plugin relies on Babel transpilation and requires an additional Babel Plugin. At the same time, adding the Babel plugin will cause additional compilation overhead.

      Quick start

      Install plugin

      You can install the plugin using the following command:

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

      Register plugin

      You can register the plugin in the rsbuild.config.ts file:

      rsbuild.config.ts
      import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';

export default {
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
  ],
};

      After registering the plugin, you can directly develop Solid.

      Tip

      Since the Solid JSX relies on Babel for compilation, you need to additionally add the Babel plugin.

      Babel compilation will introduce extra overhead, in the example above, we use include to match .jsx and .tsx files, thereby reducing the performance cost brought by Babel.

      Options

      To customize the compilation behavior of Solid, use the following options.

      solidPresetOptions

      These options are passed to babel-preset-solid. For details, see the babel-preset-solid documentation.

      • Type: SolidPresetOptions
      • Default: {}
      • Example:
      pluginSolid({
  solidPresetOptions: {
    generate: 'ssr',
    hydratable: true,
  },
});