images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2024-11-10 09:39:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: optimize Readme and add link (#35)

Browse Source 
* docs: optimize Readme and add link

Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
This commit is contained in:
xrk 2020-07-18 11:45:05 +08:00 committed by GitHub
parent b205dd4e08
commit 6b0b7534a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 139 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
README.md
View File

@ -1,211 +0,0 @@
# Babel Plugin JSX for Vue 3.0
![test](https://github.com/vueComponent/jsx/workflows/test/badge.svg)[![npm package](https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx)
To add Vue JSX support.
English | [简体中文](./README-zh_CN.md)
## Installation
Install the plugin with:
```
npm install @ant-design-vue/babel-plugin-jsx -D
```
Then add the plugin to .babelrc:
```
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
```
## Usage
### options
* transformOn
transform `on: { click: xx }` to `onClick: xxx`
* compatibleProps
compatible with Vue 2.x
`{ props, on = {}, attrs, ...rest }` will be transformed to `{ ...props, ...attrs, ...transformOn(on), ...rest }`
## Syntax
### Content
functional component
```jsx
const App = () => <div></div>
```
with render
```jsx
const App = {
render() {
return <div>Vue 3.0</div>
}
}
```
```jsx
const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={inc}>
{count.value}
</div>
)
})
```
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
)
```
### Attributes/Props
```jsx
const App = () => <input type="email" />
```
with a dynamic binding:
```jsx
const placeholderText = 'email'
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
)
```
### Directives
> It is recommended to use camelCase version of it (`vModel`) in JSX, but you can use kebab-case too (`v-model`).
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return <input vShow={this.visible} />;
},
};
```
v-model
> Note: You should pass the second param as string for using `arg`.
```jsx
<input vModel={val} />
```
```jsx
<input vModel={[val, ['trim']]} />
```
```jsx
<A vModel={[val, 'foo', ['bar']]} />
```
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 () => (
<a
vCustom={[val, 'arg', ['a', 'b']]}
/>
);
},
}
```
### Slot
```jsx
const App = {
setup() {
const slots = {
a: () => <div>A</div>,
b: () => <span>B</span>
}
return () => <A vSlots={slots} />
}
}
```
## Who is using
<table>
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://www.antdv.com/">
<img
width="32"
src="https://qn.antdv.com/logo.png"
/>
<br>
<strong>Ant Design Vue</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
<img
width="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://img.yzcdn.cn/vant/logo.png"
/>
<br>
<strong>Vant</strong>
</a>
</td>
</tr>
</tbody>
</table>
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**

1
README.md Symbolic link
View File

@ -0,0 +1 @@
packages/babel-plugin-jsx/README.md

36
README-zh_CN.md → packages/babel-plugin-jsx/README-zh_CN.md
View File

@ -1,20 +1,22 @@
# Vue 3 Babel JSX 插件 # Vue 3 Babel JSX 插件
![test](https://github.com/vueComponent/jsx/workflows/test/badge.svg)[![npm package](https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx) ![test](https://github.com/vueComponent/jsx/workflows/test/badge.svg) [![npm package](https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx)
以 JSX 的方式来编写 Vue 代码 以 JSX 的方式来编写 Vue 代码
[English](/packages/babel-plugin-jsx/README.md) | 简体中文
## 安装 ## 安装
安装插件 安装插件
``` ```bash
npm install @ant-design-vue/babel-plugin-jsx -D npm install @ant-design-vue/babel-plugin-jsx -D
``` ```
配置 Babel 配置 Babel
``` ```js
{ {
"plugins": ["@ant-design-vue/babel-plugin-jsx"] "plugins": ["@ant-design-vue/babel-plugin-jsx"]
} }
@ -40,7 +42,7 @@ npm install @ant-design-vue/babel-plugin-jsx -D
函数式组件 函数式组件
```jsx ```jsx
const App = () => <div></div> const App = () => <div></div>;
``` ```
在 render 中使用 在 render 中使用
@ -48,9 +50,9 @@ const App = () => <div></div>
```jsx ```jsx
const App = { const App = {
render() { render() {
return <div>Vue 3.0</div> return <div>Vue 3.0</div>;
} }
} };
``` ```
```jsx ```jsx
@ -65,8 +67,8 @@ const App = defineComponent(() => {
<div onClick={inc}> <div onClick={inc}>
{count.value} {count.value}
</div> </div>
) );
}) });
``` ```
Fragment Fragment
@ -77,25 +79,25 @@ const App = () => (
<span>I'm</span> <span>I'm</span>
<span>Fragment</span> <span>Fragment</span>
</> </>
) );
``` ```
### Attributes/Props ### Attributes / Props
```jsx ```jsx
const App = () => <input type="email" /> const App = () => <input type="email" />;
``` ```
with a dynamic binding: with a dynamic binding:
```jsx ```jsx
const placeholderText = 'email' const placeholderText = 'email';
const App = () => ( const App = () => (
<input <input
type="email" type="email"
placeholder={placeholderText} placeholder={placeholderText}
/> />
) );
``` ```
### 指令 ### 指令
@ -155,7 +157,7 @@ const App = {
/> />
); );
}, },
} };
``` ```
### 插槽 ### 插槽
@ -166,10 +168,10 @@ const App = {
const slots = { const slots = {
a: () => <div>A</div>, a: () => <div>A</div>,
b: () => <span>B</span> b: () => <span>B</span>
} };
return () => <A vSlots={slots} /> return () => <A vSlots={slots} />;
} }
} };
``` ```
## 谁在用 ## 谁在用

147
packages/babel-plugin-jsx/README.md
View File

@ -1,30 +1,47 @@
# @ant-design-vue/babel-plugin-jsx # Babel Plugin JSX for Vue 3.0
![test](https://github.com/vueComponent/jsx/workflows/test/badge.svg) [![npm package](https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx)
To add Vue JSX support. To add Vue JSX support.
English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)
## Installation ## Installation
Install the plugin with: Install the plugin with:
``` ```bash
npm install @ant-design-vue/babel-plugin-jsx npm install @ant-design-vue/babel-plugin-jsx -D
``` ```
Then add the plugin to .babelrc: Then add the plugin to .babelrc:
``` ```js
{ {
"plugins": ["@ant-design-vue/babel-plugin-jsx"] "plugins": ["@ant-design-vue/babel-plugin-jsx"]
} }
``` ```
## Usage
### options
* transformOn
transform `on: { click: xx }` to `onClick: xxx`
* compatibleProps
compatible with Vue 2.x
`{ props, on = {}, attrs, ...rest }` will be transformed to `{ ...props, ...attrs, ...transformOn(on), ...rest }`
## Syntax ## Syntax
### Content ### Content
functional component functional component
```jsx ```jsx
const App = () => <div></div> const App = () => <div></div>;
``` ```
with render with render
@ -32,9 +49,9 @@ with render
```jsx ```jsx
const App = { const App = {
render() { render() {
return <div>Vue 3.0</div> return <div>Vue 3.0</div>;
} }
} };
``` ```
```jsx ```jsx
@ -49,8 +66,8 @@ const App = defineComponent(() => {
<div onClick={inc}> <div onClick={inc}>
{count.value} {count.value}
</div> </div>
) );
}) });
``` ```
Fragment Fragment
@ -61,25 +78,25 @@ const App = () => (
<span>I'm</span> <span>I'm</span>
<span>Fragment</span> <span>Fragment</span>
</> </>
) );
``` ```
### Attributes/Props ### Attributes / Props
```jsx ```jsx
const App = () => <input type="email" /> const App = () => <input type="email" />;
``` ```
with a dynamic binding: with a dynamic binding:
```jsx ```jsx
const placeholderText = 'email' const placeholderText = 'email';
const App = () => ( const App = () => (
<input <input
type="email" type="email"
placeholder={placeholderText} placeholder={placeholderText}
/> />
) );
``` ```
### Directives ### Directives
@ -101,20 +118,94 @@ const App = {
v-model v-model
* You should use underscore (`_`) instead of dot (`.`) for modifiers (`vModel_trim={this.test}`) > Note: You should pass the second param as string for using `arg`.
```jsx ```jsx
export default { <input vModel={val} />
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
<input type="text" vModel_trim={this.test} />
{this.test}
</>
)
},
}
``` ```
```jsx
<input vModel={[val, ['trim']]} />
```
```jsx
<A vModel={[val, 'foo', ['bar']]} />
```
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 () => (
<a
vCustom={[val, 'arg', ['a', 'b']]}
/>
);
},
};
```
### Slot
```jsx
const App = {
setup() {
const slots = {
a: () => <div>A</div>,
b: () => <span>B</span>
};
return () => <A vSlots={slots} />;
}
};
```
## Who is using
<table>
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://www.antdv.com/">
<img
width="32"
src="https://qn.antdv.com/logo.png"
/>
<br>
<strong>Ant Design Vue</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
<img
width="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://img.yzcdn.cn/vant/logo.png"
/>
<br>
<strong>Vant</strong>
</a>
</td>
</tr>
</tbody>
</table>
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**