diff --git a/website/docs/en/guide/framework/preact.mdx b/website/docs/en/guide/framework/preact.mdx index 43547db78e..5126efe2ee 100644 --- a/website/docs/en/guide/framework/preact.mdx +++ b/website/docs/en/guide/framework/preact.mdx @@ -33,3 +33,34 @@ export default defineConfig({ plugins: [pluginPreact()], }); ``` + +## Preact Fast Refresh + +Preact plugin uses [@preact/prefresh](https://github.com/preactjs/prefresh) and [@rspack/plugin-preact-refresh](https://github.com/rspack-contrib/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: + +```jsx +export default () => { + return
Want to refresh
; +}; +``` + +Instead do: + +```jsx +const MyComponent = () => { + returnWant to refresh
; +}; + +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. diff --git a/website/docs/zh/guide/framework/preact.mdx b/website/docs/zh/guide/framework/preact.mdx index 7aab850215..b608dc1e36 100644 --- a/website/docs/zh/guide/framework/preact.mdx +++ b/website/docs/zh/guide/framework/preact.mdx @@ -33,3 +33,31 @@ export default defineConfig({ plugins: [pluginPreact()], }); ``` + +## Preact Fast Refresh + +Preact 插件使用 [@preact/prefresh](https://github.com/preactjs/prefresh) 和 [@rspack/plugin-preact-refresh](https://github.com/rspack-contrib/rspack-plugin-preact-refresh) 来热替换 Preact 组件。 + +### 识别 + +Prefresh 需要能够识别你的组件,这意味着组件名称应该以大写字母开头,hook 名称应该以 `use` 开头,后跟一个大写字母。这使得插件能够有效地识别这些内容。 + +注意,如下所示的组件是没有命名的: + +```jsx +export default () => { + returnWant to refresh
; +}; +``` + +相反,应该这样写: + +```jsx +const MyComponent = () => { + returnWant to refresh
; +}; + +export default MyComponent; +``` + +当使用高阶组件(HOC)时,请确保设置 `displayName` 以便插件能够将其识别为组件。