Babel Plugin JSX for Vue 3.0

!test 

To add Vue JSX support.

English | 简体中文

Installation

Install the plugin with:

``bash
npm install @ant-design-vue/babel-plugin-jsx -D
`

Then add the plugin to .babelrc:

`js
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
`

Usage

$3

#### transformOn

Type: boolean

Default: false

transform on: { click: xx } to onClick: xxx

#### optimize

Type: boolean

Default: false

enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

#### isCustomElement

Type: (tag: string) => boolean

Default: undefined

configuring custom elements

Syntax

$3

functional component

`jsx
const App = () =>

;
`

with render

`jsx
const App = {
render() {
return

;
}
};
`

`jsx
const App = defineComponent(() => {
const count = ref(0);

const inc = () => {
count.value++;
};

return () => (



);
});
`

`jsx
import { withModifiers } from 'vue';

const App = () => {
const count = ref(0);

const inc = () => {
count.value++;
};

return () => (



);
}
`

Fragment

`jsx
const App = () => (
<>
I'm
Fragment

);
`

$3

`jsx
const App = () => ;
`

with a dynamic binding:

`jsx
const placeholderText = 'email';
const App = () => (
type="email"
placeholder={placeholderText}
/>
);
`

$3

v-show

`jsx
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
`

v-model

> Note: You should pass the second param as string for using arg.

`jsx

`

`jsx

`

`jsx

`

Will compile to:

`js
h(A, {
'foo': val,
"fooModifiers": {
"bar": true
},
"onUpdate:foo": $event => val = $event
})
`

custom directive

`jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
v-custom={[val, 'arg', ['a', 'b']]}
/>
);
},
};
`

$3

`jsx
const App = {
setup() {
const slots = {
default: () =>

,
foo: () => B
};
return () => ;
}
};
``

Who is using

width="32" src="https://qn.antdv.com/logo.png" /> Ant Design Vue

width="32" style="vertical-align: -0.32em; margin-right: 8px;" src="https://img.yzcdn.cn/vant/logo.png" /> Vant

Compatibility

This repo is only compatible with:

- Babel 7+
- Vue 3+