From 5642fc7c7f8e2f09c095f3a62102bec40ccb00f1 Mon Sep 17 00:00:00 2001
From: Lincoln <778157949@qq.com>
Date: Thu, 29 Aug 2024 15:22:50 +0000
Subject: [PATCH 1/3] chore: Instructions on how to enable the React Compiler
 in a Waku project.

---
 docs/guides/react-compiler.mdx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 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..66a56d516
--- /dev/null
+++ b/docs/guides/react-compiler.mdx
@@ -0,0 +1,31 @@
+---
+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`.
+
+```ts
+// vite.config.ts
+import react from '@vitejs/plugin-react';
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig(() => {
+  return {
+    plugins: [
+      react({
+        babel: {
+          plugins: [
+            ["babel-plugin-react-compiler", ReactCompilerConfig],
+          ],
+        },
+      }),
+    ],
+    // ...
+  };
+});
+```
+
+For a practical demonstration, visit this [StackBlitz demo](https://stackblitz.com/edit/github-ukt9tm?file=vite.config.ts) which provides a real-world example of the configuration in action.

From 6df95227cf947b9d4577b7a786552a1b3f5ac3e1 Mon Sep 17 00:00:00 2001
From: Lincoln <778157949@qq.com>
Date: Fri, 30 Aug 2024 08:13:01 +0800
Subject: [PATCH 2/3] Update docs/guides/react-compiler.mdx

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>
---
 docs/guides/react-compiler.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guides/react-compiler.mdx b/docs/guides/react-compiler.mdx
index 66a56d516..48fc2b62d 100644
--- a/docs/guides/react-compiler.mdx
+++ b/docs/guides/react-compiler.mdx
@@ -28,4 +28,4 @@ export default defineConfig(() => {
 });
 ```
 
-For a practical demonstration, visit this [StackBlitz demo](https://stackblitz.com/edit/github-ukt9tm?file=vite.config.ts) which provides a real-world example of the configuration in action.
+For a practical demonstration, visit this [StackBlitz demo](https://stackblitz.com/edit/github-h4uxwo?file=vite.config.ts) which provides a real-world example of the configuration in action.

From bb9c4094b573b528aba889e13535fd4b1a2d27ad Mon Sep 17 00:00:00 2001
From: Daishi Kato <dai-shi@users.noreply.github.com>
Date: Tue, 31 Dec 2024 00:03:11 +0900
Subject: [PATCH 3/3] Apply suggestions from code review

---
 docs/guides/react-compiler.mdx | 39 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/docs/guides/react-compiler.mdx b/docs/guides/react-compiler.mdx
index 48fc2b62d..62631604b 100644
--- a/docs/guides/react-compiler.mdx
+++ b/docs/guides/react-compiler.mdx
@@ -6,26 +6,33 @@ description: Learn how to enable the React Compiler in your Waku project using t
 
 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
-// vite.config.ts
+// waku.config.ts
+import { defineConfig } from 'waku/config';
 import react from '@vitejs/plugin-react';
 
-const ReactCompilerConfig = { /* ... */ };
+const ReactCompilerConfig = {};
+
+const getConfig = () => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+      },
+    }),
+  ],
+});
 
-export default defineConfig(() => {
-  return {
-    plugins: [
-      react({
-        babel: {
-          plugins: [
-            ["babel-plugin-react-compiler", ReactCompilerConfig],
-          ],
-        },
-      }),
-    ],
-    // ...
-  };
+export default defineConfig({
+  unstable_viteConfigs: {
+    'dev-main': getConfig,
+    'build-client': getConfig,
+  },
 });
 ```
 
-For a practical demonstration, visit this [StackBlitz demo](https://stackblitz.com/edit/github-h4uxwo?file=vite.config.ts) which provides a real-world example of the configuration in action.
+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.