Preact#

In this document, you will learn how to build a Preact application using Rsbuild.

Create Preact Project#

You can use create-rsbuild to create a project with Rsbuild + Preact. Just execute the following command:

npm create rsbuild@latest

Then select Preact when prompted to "Select framework".

Use Preact in an existing project#

To compile Preact, you need to register the Rsbuild Preact Plugin. The plugin will automatically add the necessary configuration for Preact builds.

For example, register in rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginPreact } from '@rsbuild/plugin-preact';

export default defineConfig({
  plugins: [pluginPreact()],
});

Preact Fast Refresh#

Preact plugin uses @preact/prefresh and @rspack/plugin-preact-refresh to hot reload Preact components.

Recognition#

Prefresh need to be able to recognize your components, this means that components should start with a capital letter and hook should start with use followed by a capital letter. This allows the plugin to effectively recognize these.

Do note that a component as seen below is not named:

export default () => {
  return <p>Want to refresh</p>;
};

Instead do:

const MyComponent = () => {
  return <p>Want to refresh</p>;
};

export default MyComponent;

When you are working with HOC's be sure to lift up the displayName so the plugin can recognize it as a component.