From dec088b586606e8d2c487f49a08cecc48a6f78bc Mon Sep 17 00:00:00 2001
From: Lincoln <778157949@qq.com>
Date: Mon, 30 Dec 2024 23:41:09 +0800
Subject: [PATCH] =?UTF-8?q?Instructions=20on=20how=20to=20enable=20the=20R?=
 =?UTF-8?q?eact=20Compiler=20in=20a=20Waku=20pro=E2=80=A6=20(#857)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Background: https://github.com/dai-shi/waku/pull/853

---------

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>
---
 docs/guides/react-compiler.mdx | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 docs/guides/react-compiler.mdx

diff --git a/docs/guides/react-compiler.mdx b/docs/guides/react-compiler.mdx
new file mode 100644
index 000000000..62631604b
--- /dev/null
+++ b/docs/guides/react-compiler.mdx
@@ -0,0 +1,38 @@
+---
+slug: guides/react-compiler
+title: Enabling React Compiler in Waku
+description: Learn how to enable the React Compiler in your Waku project using the Vite Plugin to optimize your React applications.
+---
+
+The React Compiler is a build-time tool designed to optimize React applications automatically. This guide will show you how to enable the React Compiler by integrating it with the `@vitejs/plugin-react`.
+
+```bash
+npm install -D @vitejs/plugin-react babel-plugin-react-compiler
+```
+
+```ts
+// waku.config.ts
+import { defineConfig } from 'waku/config';
+import react from '@vitejs/plugin-react';
+
+const ReactCompilerConfig = {};
+
+const getConfig = () => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+      },
+    }),
+  ],
+});
+
+export default defineConfig({
+  unstable_viteConfigs: {
+    'dev-main': getConfig,
+    'build-client': getConfig,
+  },
+});
+```
+
+Check out [a working example](../../examples/05_compiler), or visit the [StackBlitz demo](https://stackblitz.com/github/dai-shi/waku/tree/main/examples/05_compiler) with Waku v0.21.12 and up.