diff --git a/README.md b/README.md
deleted file mode 100644
index f54d16e..0000000
--- a/README.md
+++ /dev/null
@@ -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 = () =>
-```
-
-with render
-
-```jsx
-const App = {
- render() {
- return Vue 3.0
- }
-}
-```
-
-```jsx
-const App = defineComponent(() => {
- const count = ref(0);
-
- const inc = () => {
- count.value++;
- };
-
- return () => (
-
- {count.value}
-
- )
-})
-```
-
-Fragment
-
-```jsx
-const App = () => (
- <>
- I'm
- Fragment
- >
-)
-```
-
-### Attributes/Props
-
-```jsx
-const App = () =>
-```
-
-with a dynamic binding:
-
-```jsx
-const placeholderText = 'email'
-const App = () => (
-
-)
-```
-
-### 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 ;
- },
-};
-```
-
-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 () => (
-
- );
- },
-}
-```
-
-### Slot
-
-```jsx
-const App = {
- setup() {
- const slots = {
- a: () => A
,
- b: () => B
- }
- return () =>
- }
-}
-```
-
-## Who is using
-
-
-
-## Compatibility
-
-This repo is only compatible with:
-
-- **Babel 7+**
-- **Vue 3+**
diff --git a/README.md b/README.md
new file mode 120000
index 0000000..c926659
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+packages/babel-plugin-jsx/README.md
\ No newline at end of file
diff --git a/README-zh_CN.md b/packages/babel-plugin-jsx/README-zh_CN.md
similarity index 85%
rename from README-zh_CN.md
rename to packages/babel-plugin-jsx/README-zh_CN.md
index b7748bb..f5ec66c 100644
--- a/README-zh_CN.md
+++ b/packages/babel-plugin-jsx/README-zh_CN.md
@@ -1,20 +1,22 @@
# 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 代码
+[English](/packages/babel-plugin-jsx/README.md) | 简体中文
+
## 安装
安装插件
-```
+```bash
npm install @ant-design-vue/babel-plugin-jsx -D
```
配置 Babel
-```
+```js
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
@@ -40,7 +42,7 @@ npm install @ant-design-vue/babel-plugin-jsx -D
函数式组件
```jsx
-const App = () =>
+const App = () => ;
```
在 render 中使用
@@ -48,9 +50,9 @@ const App = () =>
```jsx
const App = {
render() {
- return Vue 3.0
+ return Vue 3.0
;
}
-}
+};
```
```jsx
@@ -65,8 +67,8 @@ const App = defineComponent(() => {
{count.value}
- )
-})
+ );
+});
```
Fragment
@@ -77,25 +79,25 @@ const App = () => (
I'm
Fragment
>
-)
+);
```
-### Attributes/Props
+### Attributes / Props
```jsx
-const App = () =>
+const App = () => ;
```
with a dynamic binding:
```jsx
-const placeholderText = 'email'
+const placeholderText = 'email';
const App = () => (
-)
+);
```
### 指令
@@ -155,7 +157,7 @@ const App = {
/>
);
},
-}
+};
```
### 插槽
@@ -166,10 +168,10 @@ const App = {
const slots = {
a: () => A
,
b: () => B
- }
- return () =>
+ };
+ return () => ;
}
-}
+};
```
## 谁在用
diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md
index 1c28d68..f871125 100644
--- a/packages/babel-plugin-jsx/README.md
+++ b/packages/babel-plugin-jsx/README.md
@@ -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.
+English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)
+
## Installation
Install the plugin with:
-```
-npm install @ant-design-vue/babel-plugin-jsx
+```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
+
+### 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 = () =>
+const App = () => ;
```
with render
@@ -32,9 +49,9 @@ with render
```jsx
const App = {
render() {
- return Vue 3.0
+ return Vue 3.0
;
}
-}
+};
```
```jsx
@@ -49,8 +66,8 @@ const App = defineComponent(() => {
{count.value}
- )
-})
+ );
+});
```
Fragment
@@ -61,25 +78,25 @@ const App = () => (
I'm
Fragment
>
-)
+);
```
-### Attributes/Props
+### Attributes / Props
```jsx
-const App = () =>
+const App = () => ;
```
with a dynamic binding:
```jsx
-const placeholderText = 'email'
+const placeholderText = 'email';
const App = () => (
-)
+);
```
### Directives
@@ -101,20 +118,94 @@ const App = {
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
-export default {
- data: () => ({
- test: 'Hello World',
- }),
- render() {
- return (
- <>
-
- {this.test}
- >
- )
- },
-}
+
```
+
+```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 () => (
+
+ );
+ },
+};
+```
+
+### Slot
+
+```jsx
+const App = {
+ setup() {
+ const slots = {
+ a: () => A
,
+ b: () => B
+ };
+ return () => ;
+ }
+};
+```
+
+## Who is using
+
+
+
+## Compatibility
+
+This repo is only compatible with:
+
+- **Babel 7+**
+- **Vue 3+**