fix(macros): correct types for defineComponent and defineVaporComponent

Author: zhiyuanzmj

docs/features/macros.md

@@ -41,8 +41,46 @@ export default {
 
 :::
 
+::: details Install as a standalone plugin
+
+We have also released a standalone plugin that can be used in virtual DOM projects.
+
+```bash
+pnpm add @vue-jsx-vapor/macros -D
+```
+
+配置:
+
+```ts
+// vite.config.ts
+import jsxMacros from '@vue-jsx-vapor/macros/vite'
+
+export default {
+  plugins: [
+    jsxMacros()
+  ]
+}
+```
+
+:::
+
 ## defineComponent
 
+### Options
+
+```ts
+VueJsxVapor({
+  defineComponent: {
+    /**
+     * @default ['defineComponent','defineVaporComponent']
+     *
+     * You can set alias to an empty array to disable defineComponent macro.
+     */
+    alias: []
+  }
+})
+```
+
 - Support `await` keyword.
 - Automatically collects used props to the defineComponent's props option.
 
@@ -57,7 +95,7 @@ const Comp = defineComponent(
   }) => {
     await nextTick()
     const attrs = useAttrs()
-    return (
+    return () => (
       <div>
         <span {...attrs}>{props.foo}</span>
       </div>
@@ -101,9 +139,9 @@ defineComponent(
 
 ```tsx twoslash
 // @errors: 2322
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 
-const Comp = defineComponent(
+const Comp = defineVaporComponent(
   <T,>({ foo = undefined as T, bar = ''!, ...attrs }) => {
     return (
       <div>
@@ -119,9 +157,9 @@ export default () => <Comp<string> foo={1} bar="bar" />
 ::: details Compiled Code
 
 ```tsx
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 import { createPropsDefaultProxy } from '/vue-macros/jsx-macros/with-defaults'
-defineComponent(
+defineVaporComponent(
   (_props) => {
     const props = createPropsDefaultProxy(_props, { bar: '' })
     const attrs = useAttrs()

docs/features/use-ref.md

@@ -5,7 +5,7 @@ Automatically infer type for `useRef`. It's an alias of `shallowRef`.
 ## Basic Usage
 
 ```tsx twoslash
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 import { useRef } from 'vue-jsx-vapor'
 // or
 // import { shallowRef as useRef } from 'vue'
@@ -18,7 +18,7 @@ export const Comp = () => {
   return <div />
 }
 
-export default defineComponent(() => {
+export default defineVaporComponent(() => {
   const comp = useRef()
   comp.value?.foo
   //           ^?

docs/introduction/migration.md

@@ -57,13 +57,13 @@ export default () => {
   - Usage
 
     ```tsx
-    import { defineComponent, ref } from 'vue'
+    import { defineVaporComponent, ref } from 'vue'
 
-    const Comp = defineComponent(({ foo }) => {
+    const Comp = defineVaporComponent(({ foo }) => {
       return <>{foo}</>
     })
     // Will be convert to:
-    const Comp = defineComponent((_props) => {
+    const Comp = defineVaporComponent((_props) => {
       return <>{_props.foo}</>
     }, { props: ['foo'] })
 
@@ -119,9 +119,9 @@ const double = computed(() => foo * 2)
 console.log({ double: double.value }, [double.value])
 ```
 
-### defineComponent
+### defineVaporComponent
 
-Use `defineComponent` macro to support destructuring props.
+Use `defineVaporComponent` macro to support destructuring props.
 
 ```tsx
 // before
@@ -130,7 +130,7 @@ const Comp = ({ count = 1 }) => {
 }
 
 // after
-const Comp = defineComponent(({ count = 1 }) => {
+const Comp = defineVaporComponent(({ count = 1 }) => {
   return <div>{count}</div>
 })
 ```

docs/package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@shikijs/vitepress-twoslash": "^3.8.1",
-    "@ts-macro/twoslash": "^0.0.4",
+    "@ts-macro/twoslash": "^0.0.5",
     "vitepress": "2.0.0-alpha.5"
   }
 }

docs/zh/features/macros.md

@@ -41,8 +41,47 @@ export default {
 
 :::
 
+
+::: details 作为单独的插件安装
+
+我们也发布了一个单独的插件，可以给 虚拟DOM 的项目使用。
+
+```bash
+pnpm add @vue-jsx-vapor/macros -D
+```
+
+配置:
+
+```ts
+// vite.config.ts
+import jsxMacros from '@vue-jsx-vapor/macros/vite'
+
+export default {
+  plugins: [
+    jsxMacros()
+  ]
+}
+```
+
+:::
+
 ## defineComponent
 
+### 选项
+
+```ts
+VueJsxVapor({
+  defineComponent: {
+    /**
+     * @default ['defineComponent','defineVaporComponent']
+     *
+     * 可以通过把 alias 设为空数组来禁用 defineComponent 宏.
+     */
+    alias: []
+  }
+})
+```
+
 - 支持 `await` 关键字。
 - 自动收集使用到的 props 到 `defineComponent` 的 `props` 选项中。
 
@@ -57,7 +96,7 @@ const Comp = defineComponent(
   }) => {
     await nextTick()
     const attrs = useAttrs()
-    return (
+    return () => (
       <div>
         <span {...attrs}>{props.foo}</span>
       </div>
@@ -101,9 +140,9 @@ defineComponent(
 
 ```tsx twoslash
 // @errors: 2322
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 
-const Comp = defineComponent(
+const Comp = defineVaporComponent(
   <T,>({ foo = undefined as T, bar = ''!, ...attrs }) => {
     return (
       <div>
@@ -119,9 +158,9 @@ export default () => <Comp<string> foo={1} bar="bar" />
 ::: details 编译后代码
 
 ```tsx
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 import { createPropsDefaultProxy } from '/vue-macros/jsx-macros/with-defaults'
-defineComponent(
+defineVaporComponent(
   (_props) => {
     const props = createPropsDefaultProxy(_props, { bar: '' })
     const attrs = useAttrs()

docs/zh/features/use-ref.md

@@ -5,7 +5,7 @@
 ## 基本用法
 
 ```tsx twoslash
-import { defineComponent } from 'vue'
+import { defineVaporComponent } from 'vue'
 import { useRef } from 'vue-jsx-vapor'
 // 或者
 // import { shallowRef as useRef } from 'vue'
@@ -18,7 +18,7 @@ export const Comp = () => {
   return <div />
 }
 
-export default defineComponent(() => {
+export default defineVaporComponent(() => {
   const comp = useRef()
   comp.value?.foo
   //           ^?

docs/zh/introduction/migration.md

@@ -57,13 +57,13 @@ export default () => {
   - 用法
 
     ```tsx
-    import { defineComponent, ref } from 'vue'
+    import { defineVaporComponent, ref } from 'vue'
 
-    const Comp = defineComponent(({ foo }) => {
+    const Comp = defineVaporComponent(({ foo }) => {
       return <>{foo}</>
     })
     // 将被转换为：
-    const Comp = defineComponent((_props) => {
+    const Comp = defineVaporComponent((_props) => {
       return <>{_props.foo}</>
     }, { props: ['foo'] })
 
@@ -130,7 +130,7 @@ const Comp = ({ count = 1 }) => {
 }
 
 // 转换后
-const Comp = defineComponent(({ count = 1 }) => {
+const Comp = defineVaporComponent(({ count = 1 }) => {
   return <div>{count}</div>
 })
 ```

packages/macros/src/core/define-component/index.ts

@@ -15,7 +15,7 @@ import {
 import type { Macros } from '..'
 import { transformAwait } from './await'
 import { transformReturn } from './return'
-import type { Node, ObjectExpression } from '@babel/types'
+import type { Node } from '@babel/types'
 
 export function transformDefineComponent(
   root: FunctionalNode,
@@ -118,31 +118,13 @@ export function transformDefineComponent(
     .map(([key, value]) => `'${key}': ${value}`)
     .join(', \n')
   if (propsString) {
-    const argument = macros.defineComponent.arguments[1]
-    if (!argument) {
-      s.appendRight(
-        root.end!,
-        `, {${hasRestProp ? 'inheritAttrs: false,' : ''} props: {\n${propsString}\n} }`,
-      )
-    } else if (argument.type === 'ObjectExpression') {
-      const resolvedPropsString = `{\n${propsString}\n}`
-      const prop = prependObjectExpression(
-        argument,
-        'props',
-        resolvedPropsString,
-        s,
-      )
-      if (
-        prop &&
-        prop.type === 'ObjectProperty' &&
-        prop.value.type === 'ObjectExpression'
-      ) {
-        s.appendLeft(prop.value.start!, `{...${resolvedPropsString}, ...`)
-        s.appendRight(prop.value.end!, '}')
-      }
-      if (hasRestProp) {
-        prependObjectExpression(argument, 'inheritAttrs', 'false', s)
-      }
+    const resolvedPropsString = `${hasRestProp ? 'inheritAttrs: false, ' : ''}props: {\n${propsString}\n}`
+    const compOptions = macros.defineComponent.arguments[1]
+    if (!compOptions) {
+      s.appendRight(root.end!, `, { ${resolvedPropsString} }`)
+    } else if (compOptions.type === 'ObjectExpression') {
+      s.appendLeft(compOptions.start!, `{ ${resolvedPropsString}, ...`)
+      s.appendRight(compOptions.end!, ' }')
     }
   }
 
@@ -152,24 +134,6 @@ export function transformDefineComponent(
   }
 }
 
-function prependObjectExpression(
-  argument: ObjectExpression,
-  name: string,
-  value: string,
-  s: MagicStringAST,
-) {
-  const prop = argument.properties?.find(
-    (prop) =>
-      prop.type === 'ObjectProperty' &&
-      prop.key.type === 'Identifier' &&
-      prop.key.name === name,
-  )
-  if (!prop) {
-    s.appendRight(argument.start! + 1, `${name}: ${value},`)
-  }
-  return prop
-}
-
 function getWalkedIds(root: FunctionalNode, propsName: string) {
   const walkedIds = new Set<string>()
   walkIdentifiers(root.body, (id, parent) => {