docs: use defineVaporComponent instead of defineComponent

Author: zhiyuanzmj

docs/features/macros.md

@@ -2,14 +2,6 @@
 
 A collection of macros for JSX. They are need to manually enabled by set `macros` to `true`.
 
-|     Directive     |        Vue         |       Volar        |
-| :---------------: | :----------------: | :----------------: |
-| `defineComponent` | :white_check_mark: | :white_check_mark: |
-|   `defineModel`   | :white_check_mark: | :white_check_mark: |
-|   `defineSlots`   | :white_check_mark: | :white_check_mark: |
-|  `defineExpose`   | :white_check_mark: | :white_check_mark: |
-|   `defineStyle`   | :white_check_mark: | :white_check_mark: |
-
 ## Setup
 
 ::: code-group
@@ -64,7 +56,9 @@ export default {
 
 :::
 
-## defineComponent
+## defineComponent | defineVaporComponent
+
+`defineComponent` is used to define Virtual DOM components, and `defineVaporComponent` is used to define Vapor components.
 
 ### Options
 
@@ -82,12 +76,12 @@ VueJsxVapor({
 ```
 
 - Support `await` keyword.
-- Automatically collects used props to the defineComponent's props option.
+- Automatically collects used props to the defineVaporComponent's props option.
 
 ```tsx twoslash
-import { defineComponent, nextTick, Suspense, useAttrs } from 'vue'
+import { defineVaporComponent, nextTick, Suspense, useAttrs } from 'vue'
 
-const Comp = defineComponent(
+const Comp = defineVaporComponent(
   async (props: {
     foo?: string
     bar?: string
@@ -113,8 +107,8 @@ export default () => (
 ::: details Compiled Code
 
 ```tsx
-import { defineComponent, useAttrs, withAsyncContext } from 'vue'
-defineComponent(
+import { defineVaporComponent, useAttrs, withAsyncContext } from 'vue'
+defineVaporComponent(
   async (props) => {
     let __temp, __restore
     ;([__temp, __restore] = withAsyncContext(() => nextTick())),

docs/introduction/interop.md

@@ -15,7 +15,6 @@ import vueJsxVapor from 'vue-jsx-vapor/vite'
 export default defineConfig({
   plugins: [
     vueJsxVapor({
-      macros: true,
       interop: true,
     }),
   ],

docs/introduction/migration.md

@@ -2,10 +2,11 @@
 
 ## Migration from `vue-jsx`
 
-1. Don't support hyphenated prop name and hyphenated component name.
-2. `v-model` don't support Array Expression, use `v-model:$name$_trim={foo}` instead.
-3. Don't support `v-models` directive.
-4. Destructing props:
+1. Use `defineVaporComponent` instead of `defineComponent` to define Vapor components. The setup function of `defineVaporComponent` now returns a JSX expression directly—there is no need to return a function anymore.
+2. Don't support hyphenated prop name and hyphenated component name.
+3. `v-model` don't support Array Expression, use `v-model:$name$_trim={foo}` instead.
+4. Don't support `v-models` directive.
+5. Destructing props:
 
 > [!CAUTION]
 > ❌ The destructuring of props in a functional component will cause loss of reactivity.
@@ -36,7 +37,7 @@ export default () => {
 }
 ```
 
-2. ✅ Set the macros option to true, then use the `defineComponent` macro for wrapping.
+2. ✅ Set the macros option to true, then use the `defineVaporComponent` macro for wrapping.
 
   - Setup
 

docs/zh/features/macros.md

@@ -2,14 +2,6 @@
 
 为 JSX 设计的一系列宏。需要通过将 `macros` 设置为 `true` 来手动启用。
 
-|     宏     |        Vue         |       Volar        |
-| :---------------: | :----------------: | :----------------: |
-| `defineComponent` | :white_check_mark: | :white_check_mark: |
-|   `defineModel`   | :white_check_mark: | :white_check_mark: |
-|   `defineSlots`   | :white_check_mark: | :white_check_mark: |
-|  `defineExpose`   | :white_check_mark: | :white_check_mark: |
-|   `defineStyle`   | :white_check_mark: | :white_check_mark: |
-
 ## 配置
 
 ::: code-group
@@ -65,7 +57,9 @@ export default {
 
 :::
 
-## defineComponent
+## defineComponent | defineVaporComponent
+
+`defineComponent` 用于定义虚拟 DOM 组件，`defineVaporComponent` 用于定义 Vapor 组件
 
 ### 选项
 
@@ -83,12 +77,12 @@ VueJsxVapor({
 ```
 
 - 支持 `await` 关键字。
-- 自动收集使用到的 props 到 `defineComponent` 的 `props` 选项中。
+- 自动收集使用到的 props 到 `defineVaporComponent` 的 `props` 选项中。
 
 ```tsx twoslash
-import { defineComponent, nextTick, Suspense, useAttrs } from 'vue'
+import { defineVaporComponent, nextTick, Suspense, useAttrs } from 'vue'
 
-const Comp = defineComponent(
+const Comp = defineVaporComponent(
   async (props: {
     foo?: string
     bar?: string
@@ -114,8 +108,8 @@ export default () => (
 ::: details 编译后代码
 
 ```tsx
-import { defineComponent, useAttrs, withAsyncContext } from 'vue'
-defineComponent(
+import { defineVaporComponent, useAttrs, withAsyncContext } from 'vue'
+defineVaporComponent(
   async (props) => {
     let __temp, __restore
     ;([__temp, __restore] = withAsyncContext(() => nextTick())),

docs/zh/introduction/interop.md

@@ -17,7 +17,6 @@ import vueJsxVapor from 'vue-jsx-vapor/vite'
 export default defineConfig({
   plugins: [
     vueJsxVapor({
-      macros: true,
       interop: true,
     }),
   ],

docs/zh/introduction/migration.md

@@ -2,10 +2,11 @@
 
 ## 从 `vue-jsx` 迁移
 
-1. 不支持使用连字符的 prop 名称和组件名称。
-2. `v-model` 不支持数组表达式，请改用 `v-model:$name$_trim={foo}`。
-3. 不支持 `v-models` 指令。
-4. 解构 props：
+1. 使用 `defineVaporComponent` 替代 `defineComponent` 来定义 Vapor 组件。`defineVaporComponent` 的 setup 函数现在可以直接返回 JSX 表达式，无需再返回一个函数。
+2. 不支持使用连字符的 prop 名称和组件名称。
+3. `v-model` 不支持数组表达式，请改用 `v-model:$name$_trim={foo}`。
+4. 不支持 `v-models` 指令。
+5. 解构 props：
 
 > [!CAUTION]
 > ❌ 在函数式组件中解构 props 会导致响应性丢失。
@@ -36,7 +37,7 @@ export default () => {
 }
 ```
 
-2. ✅ 将 `macros` 选项设置为 `true`，然后使用 `defineComponent` 宏进行包装。
+2. ✅ 将 `macros` 选项设置为 `true`，然后使用 `defineVaporComponent` 宏进行包装。
 
   - 配置
 
@@ -119,9 +120,9 @@ const double = computed(() => foo * 2)
 console.log({ double: double.value }, [double.value])
 ```
 
-### defineComponent
+### defineVaporComponent
 
-使用 `defineComponent` 宏来支持解构 props。
+使用 `defineVaporComponent` 宏来支持解构 props。
 
 ```tsx
 // 转换前