docs: added support for Chinese documents (#14)

* feat(docs): added support for Chinese documents. close #13

* chore: remove vue-jsx

* chore: update

* chore: update

---------

Co-authored-by: zhiyuanzmj <[email protected]>

Author: Azir-11

README.md

@@ -11,7 +11,7 @@ Vapor Mode of Vue JSX.
 - ✨ Macros: Support most macros of Vue, Friendly to JSX.
 - 🌈 Hot Module Replacement: Support functional components or defined by defineComponent.
 - 🦾 Type Safe: Provide Volar plugin support by install TS Macro (VSCode plugin).
-- ⚙️ ESLint: Provide an ESLint plugin for vue-jsx-vapor to automatically fix code.
+- ⚙️ ESLint: Provide an ESLint plugin for vue-jsx-vapor to automatically format code.
 
 ## Installation
 

docs/.vitepress/config.ts

@@ -8,6 +8,67 @@ export default defineConfig({
   title: 'Vue JSX Vapor',
   description: 'Vue JSX Vapor',
   head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en',
+    },
+    zh: {
+      label: '简体中文',
+      lang: 'zh-CN',
+      link: '/zh/',
+      themeConfig: {
+        nav: [
+          { text: '首页', link: '/zh/' },
+          { text: '特性', link: '/zh/features/directives' },
+          {
+            text: 'Playground',
+            link: 'https://repl.zmjs.dev/vuejs/vue-jsx-vapor',
+          },
+        ],
+        sidebar: [
+          {
+            text: '介绍',
+            items: [
+              {
+                text: '快速开始',
+                link: `/zh/introduction/getting-started`,
+              },
+              {
+                text: '互操作性',
+                link: `/zh/introduction/interop`,
+              },
+              {
+                text: '迁移',
+                link: `/zh/introduction/migration`,
+              },
+              {
+                text: 'ESLint',
+                link: `/zh/introduction/eslint`,
+              },
+            ],
+          },
+          {
+            text: '特性',
+            items: [
+              {
+                text: '指令',
+                link: '/zh/features/directives',
+              },
+              {
+                text: '宏',
+                link: '/zh/features/macros',
+              },
+              {
+                text: 'useRef',
+                link: '/zh/features/use-ref',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     logo: '/logo.svg',

docs/features/directives.md

@@ -19,7 +19,7 @@ Because JSX doesn't support `[]` keyword, use `$` instead.
 ## Modifiers
 
 Modifiers are special postfixes denoted by a `_`, which indicate that a directive should be bound in some special way.
-Because JSX doesn't support `.` keyword, we use `_` instead.
+Because JSX doesn't support `.` keyword, use `_` instead.
 
 ```tsx
 <form onSubmit_prevent>

docs/features/macros.md

@@ -1,6 +1,6 @@
 # Macros
 
-A collection of macros. They are need to muanually enabled by set `macros` to `true`.
+A collection of macros for JSX. They are need to manually enabled by set `macros` to `true`.
 
 |     Directive     |        Vue         |       Volar        |
 | :---------------: | :----------------: | :----------------: |

docs/features/use-ref.md

@@ -10,21 +10,23 @@ import { useRef } from 'vue-jsx-vapor'
 // or
 // import { shallowRef as useRef } from 'vue'
 
-export const Comp = defineComponent({
-  setup() {
-    return { foo: 1 }
-  },
-})
+export const Comp = () => {
+  defineExpose({
+    foo: 1
+  })
+
+  return <div />
+}
 
 export default defineComponent(() => {
   const comp = useRef()
   comp.value?.foo
   //           ^?
 
   return (
-    <>
+    <div>
       <Comp ref={comp} />
-    </>
+    </div>
   )
 })
 ```

docs/index.md

@@ -5,7 +5,7 @@ layout: home
 hero:
   name: "Vue JSX Vapor"
   text: "Type-safe, Improve DX, High Performance"
-  tagline: Supports Vapor Mode, all build-in directives and most macros of Vue.
+  tagline: Vapor Mode of Vue JSX
   image:
     src: /logo.svg
     alt: Vue JSX Vapor
@@ -35,6 +35,6 @@ features:
     details: Support functional components or defined by defineComponent.
   - icon: ⚙️
     title: ESLint
-    details: Provide an ESLint plugin for vue-jsx-vapor to automatically fix code.
+    details: Provide an ESLint plugin for vue-jsx-vapor to automatically format code.
 ---
 

docs/introduction/eslint.md

@@ -1,6 +1,6 @@
 # ESLint
 
-This is an ESLint plugin for `vue-jsx-vapor` to automatically fix code.
+An ESLint plugin for `vue-jsx-vapor` to automatically format code.
 
 ## Install
 

docs/introduction/getting-started.md

@@ -51,10 +51,11 @@ export default defineConfig({
 
 ## Typescript
 
-Due to `vue-jsx-vapor`'s support for all Vue directives and most Vue macros, the [ts-macro](https://github.com/ts-macro/ts-macro) VSCode plugin is required to enable TypeScript support when using the `vue-jsx-vapor/volar` plugin.
+Since `vue-jsx-vapor` supports Vue directives and Vue macros, so need to install the [TS Macro](https://marketplace.visualstudio.com/items?itemName=zhiyuanzmj.vscode-ts-macro) VSCode plugin to load the `vue-jsx-vapor/volar` plugin for type support.
 
-After installing the `ts-macro` VSCode plugin, it automatically loads `vue-jsx-vapor/volar` by analyzing vite.config.ts and shared vueJsxVapor options, eliminating the need to configure ts-macro.config.ts.
+The `TS Macro` VSCode plugin will automatically loads the `vue-jsx-vapor/volar` by analyzing `vite.config.ts` and shares the user configuration of the `vue-jsx-vapor/vite` plugin, without the need to manually configure `ts-macro.config.ts`.
 
+::: details manually configuration
 ::: code-group
 
 ```ts [ts-macro.config.ts]

docs/introduction/interop.md

@@ -1,6 +1,6 @@
 # Interop
 
-`vue-jsx-vapor` support virtual-dom and vapor-dom co-usage. After set interop to `true`, vue-jsx-vapor will be only convert in `defineVaporComponent`'s JSX.
+`vue-jsx-vapor` supports Virtual DOM and Vapor DOM co-usage. After setting interop to `true`, JSX within `defineVaporComponent` will be compiled to Vapor DOM, while JSX outside `defineVaporComponent` will be compiled to `Virtual DOM `.
 
 ## Vapor in Virtual DOM
 
@@ -9,7 +9,6 @@
 ::: code-group
 
 ```ts [vite.config.ts]
-import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vite'
 import vueJsxVapor from 'vue-jsx-vapor/vite'
 
@@ -19,7 +18,6 @@ export default defineConfig({
       macros: true,
       interop: true,
     }),
-    vueJsx(),
   ],
 })
 ```
@@ -68,7 +66,6 @@ export default defineComponent(() => {
 ::: code-group
 
 ```ts [vite.config.ts]
-import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vite'
 import vueJsxVapor from 'vue-jsx-vapor/vite'
 
@@ -78,7 +75,6 @@ export default defineConfig({
       macros: true,
       interop: true,
     }),
-    vueJsx(),
   ],
 })
 ```

docs/zh/features/directives.md

@@ -0,0 +1,133 @@
+# 指令
+
+用于 JSX 的 Vue 内置指令。
+
+|           指令           |        Vue         |       Volar        |
+| :---------------------------: | :----------------: | :----------------: |
+| `v-if`, `v-else-if`, `v-else` | :white_check_mark: | :white_check_mark: |
+|      `v-slot`, `v-slots`      | :white_check_mark: | :white_check_mark: |
+|            `v-for`            | :white_check_mark: | :white_check_mark: |
+|           `v-model`           | :white_check_mark: | :white_check_mark: |
+|      `v-html`, `v-text`       | :white_check_mark: |         /          |
+|           `v-once`            | :white_check_mark: |         /          |
+
+## 动态参数
+
+也可以在指令参数中使用变量。
+因为 JSX 不支持 `[]` 关键字，所以使用 `$` 代替。
+
+## 修饰符
+
+修饰符是以 `_` 表示的特殊后缀，表示指令应以某种特殊方式绑定。
+因为 JSX 不支持 `.` 关键字，所以用 `_` 代替。
+
+```tsx
+<form onSubmit_prevent>
+  <input v-model_number={value} />
+</form>
+```
+
+## `v-if`, `v-else-if`, `v-else`
+
+```tsx twoslash
+export default ({ foo = 0 }) => {
+  // ---cut-start---
+  // prettier-ignore
+  // ---cut-end---
+  return (
+    <>
+      <div v-if={foo === 0}>{foo}</div>
+
+      <div v-else-if={foo === 1}>{foo}</div>
+      //                          ^?
+
+      <div v-else>{foo}</div>
+      //           ^?
+    </>
+  )
+}
+```
+
+## `v-for`
+
+```tsx twoslash
+export default () => (
+  <div v-for={(item, index) in 4} key={index}>
+    {item}
+  </div>
+)
+```
+
+## `v-slot`, `v-slots`
+
+::: code-group
+
+```tsx [v-slot] twoslash
+const Comp = () => {
+  defineSlots<{
+    default: () => any
+    slot: (scope: { bar: number }) => any
+    slots: (scope: { baz: boolean }) => any
+  }>()
+  return <div />
+}
+
+// ---cut-start---
+// prettier-ignore
+// ---cut-end---
+export default () => (
+  <Comp>
+    默认插槽
+    <template v-slot:slot={{ bar }}>
+      //              ^|
+      {bar}
+    </template>
+  </Comp>
+)
+```
+
+```tsx [v-slots] twoslash
+const Comp = () => {
+  defineSlots<{
+    default: () => any
+    slot: (scope: { bar: number }) => any
+    slots: (scope: { baz: boolean }) => any
+  }>()
+  return <div />
+}
+
+export default () => (
+  <Comp
+    v-slots={{
+      default: () => <>默认插槽</>,
+      slot: ({ bar }) => <>{bar}</>,
+    }}
+  />
+)
+```
+
+:::
+
+## `v-model`
+
+```tsx twoslash
+import { ref } from 'vue'
+
+const Comp = () => {
+  const model = defineModel<string>('model')
+  const models = defineModel<string[]>('models')
+  return <div />
+}
+
+export default () => {
+  const foo = ref('')
+  const name = ref('model')
+  return (
+    <Comp
+      v-model:$name_value$={foo.value}
+      v-model:model={foo.value}
+      //       ^|
+    />
+  )
+}
+```