From 328f5d88e92ef968227a5aac2e8ecd92f2cc747c Mon Sep 17 00:00:00 2001
From: zthxxx <zthxxx.me@gmail.com>
Date: Sun, 17 Dec 2023 12:19:00 +0800
Subject: [PATCH] docs: improve the jsx development config for SWC and esbuild

---
 docs/pages/docs/compiler-plugin.mdx | 38 ++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/pages/docs/compiler-plugin.mdx b/docs/pages/docs/compiler-plugin.mdx
index 2d8b543..2273b28 100644
--- a/docs/pages/docs/compiler-plugin.mdx
+++ b/docs/pages/docs/compiler-plugin.mdx
@@ -202,6 +202,42 @@ No additional plugins are required when using [`SWC`](https://swc.rs), since `SW
 through the [`jsc.transform.react.development`](https://swc.rs/docs/configuration/compilation#jsctransformreactdevelopment) configuration,
 which is usually set automatically in most frameworks.
 
+If in your project scaffold it's not automatic set, you need to manually make sure to enable it in your `swc` configuration (like `.swcrc`):
+
+```json
+{
+  "jsc": {
+    "transform": {
+      "react": {
+        "development": true
+      }
+    }
+  }
+}
+```
+
 ## esbuild
 
-No additional plugins are required when using [`esbuild`](https://esbuild.github.io).
+No additional plugins are required when using [`esbuild`](https://esbuild.github.io),
+since `esbuild` can indeed generate the `debugSource` when transforming `JSX` via [`jsx-dev` option](https://esbuild.github.io/api/#jsx-dev), which is usually set automatically in most frameworks.
+
+If in your project scaffold, it's not automatic set,
+you need to manually make sure your esbuild has run unber `jsx` option with `'automatic'` and `jsx-dev` option with `true`:
+
+### esbuild-loader
+
+Example for `esbuild-loader` in webpack:
+
+```js
+{
+  test: /\.tsx?$/,
+  loader: 'esbuild-loader',
+  options: {
+    loader: 'tsx',
+    // https://github.com/evanw/esbuild/blob/v0.20.0/lib/shared/types.ts#L58-L67
+    jsx: 'automatic',
+    jsxDev: process.env.NODE_ENV === 'development',
+    ...
+  },
+},
+```