Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx
An Rsbuild plugin for Vue 3 JSX / TSX support.
https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx
rsbuild rsbuild-plugin rspack
Last synced: 16 days ago
JSON representation
An Rsbuild plugin for Vue 3 JSX / TSX support.
- Host: GitHub
- URL: https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx
- Owner: rspack-contrib
- License: mit
- Created: 2024-09-08T03:37:28.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-01T01:44:14.000Z (26 days ago)
- Last Synced: 2024-12-01T02:30:48.080Z (26 days ago)
- Topics: rsbuild, rsbuild-plugin, rspack
- Language: TypeScript
- Homepage:
- Size: 160 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rspack - @rsbuild/plugin-vue-jsx
README
# @rsbuild/plugin-vue-jsx
Provides support for Vue 3 JSX / TSX syntax. This plugin internally integrates [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx).
> For Vue 2 projects, use [@rsbuild/plugin-vue2-jsx](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx).
## Usage
Install:
```bash
npm add @rsbuild/plugin-vue-jsx @rsbuild/plugin-babel -D
```
Add plugin to your `rsbuild.config.ts`:
```ts
// rsbuild.config.ts
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginVueJsx } from "@rsbuild/plugin-vue-jsx";
export default {
plugins: [
pluginBabel({
include: /\.(?:jsx|tsx)$/,
}),
pluginVue(),
pluginVueJsx(),
],
};
```
After registering the plugin, you can use Vue's [JSX / TSX syntax](https://github.com/vuejs/babel-plugin-jsx) in `.jsx`, `.tsx`, and `.vue` files.
Since the Vue JSX plugin relies on Babel for compilation, you need to additionally add the [@rsbuild/plugin-babel](https://rsbuild.dev/plugins/list/plugin-babel).
Babel compilation will introduce extra overhead, in the example above, we use `include` to match `.jsx` and `.tsx` files, thereby reducing the performance cost brought by Babel.
## Vue SFC
When using JSX in Vue SFC, you need to add `lang="jsx"` or `lang="tsx"` to the `` tag.
- JSX:
```html title="App.vue"
<script lang="jsx">
const vnode = <div>hello</div>;
```
- TSX:
```html title="App.vue"
const vnode = <div>hello</div>;
```
## JSX Type Inference
When using Vue >= 3.3, please set `"jsxImportSource": "vue"` in `tsconfig.json` to enable JSX type inference.
```json title="tsconfig.json"
{
"compilerOptions": {
"jsxImportSource": "vue"
}
}
```
For more details, see [Vue - JSX Type Inference](https://vuejs.org/guide/extras/render-function.html#jsx-type-inference).
## Options
If you need to customize the compilation behavior of Vue, you can use the following configs.
### vueJsxOptions
Options passed to `@vue/babel-plugin-jsx`, please refer to the [@vue/babel-plugin-jsx documentation](https://github.com/vuejs/babel-plugin-jsx) for detailed usage.
- **Type:**
```ts
type VueJSXPluginOptions = {
/** transform `on: { click: someCallback }` to `onClick: someCallback` */
transformOn?: boolean;
/** enable optimization or not. */
optimize?: boolean;
/** merge static and dynamic class / style attributes / onSomething handlers */
mergeProps?: boolean;
/** configuring custom elements */
isCustomElement?: (tag: string) => boolean;
/** enable object slots syntax */
enableObjectSlots?: boolean;
/** Replace the function used when compiling JSX expressions */
pragma?: string;
};
```
- **Default:** `{}`
- **Example:**
```ts
pluginVueJsx({
vueJsxOptions: {
transformOn: true,
},
});
```
## License
[MIT](./LICENSE).