Skip to content

Commit

Permalink
docs: improve the jsx development config for SWC and esbuild
Browse files Browse the repository at this point in the history
  • Loading branch information
zthxxx committed Dec 17, 2023
1 parent e3e679b commit 328f5d8
Showing 1 changed file with 37 additions and 1 deletion.
38 changes: 37 additions & 1 deletion docs/pages/docs/compiler-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
...
},
},
```

0 comments on commit 328f5d8

Please sign in to comment.