From 6b0b7534a40b3ec8d91fb0ff1f8220c2ca64e494 Mon Sep 17 00:00:00 2001 From: xrk Date: Sat, 18 Jul 2020 11:45:05 +0800 Subject: [PATCH] docs: optimize Readme and add link (#35) * docs: optimize Readme and add link Co-authored-by: Amour1688 --- README.md | 212 +----------------- .../babel-plugin-jsx/README-zh_CN.md | 36 +-- packages/babel-plugin-jsx/README.md | 147 +++++++++--- 3 files changed, 139 insertions(+), 256 deletions(-) mode change 100644 => 120000 README.md rename README-zh_CN.md => packages/babel-plugin-jsx/README-zh_CN.md (85%) 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 - - - - - - - - -
- - -
- Ant Design Vue - - 		- - -
- Vant - -
- -## 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 + + + + + + + + +
+ + +
+ Ant Design Vue + + 		+ + +
+ Vant + +
+ +## Compatibility + +This repo is only compatible with: + +- **Babel 7+** +- **Vue 3+**