feat(volar): introduce jsx-element

Author: zhiyuanzmj

package.json

@@ -26,7 +26,7 @@
   },
   "scripts": {
     "dev": "pnpm run --filter=\"./packages/*\" --parallel dev",
-    "build": "pnpm run --filter=\"./packages/*\" build",
+    "build": "pnpm run --filter=\"./packages/*\" --parallel build",
     "typecheck": "tsmc --noEmit",
     "lint": "eslint .",
     "play": "npm -C playground run dev",

packages/macros/src/volar/define-component.ts

@@ -27,35 +27,27 @@ const __setup = `,
       ? ['\nreturn __setup']
       : ([
           `
-  type __Props = Parameters<typeof __setup>[0]
-  type __Slots = Parameters<typeof __setup>[1] extends { slots?: infer Slots } | undefined ? Slots : {}
-  type __Exposed = Parameters<typeof __setup>[1] extends { expose?: (exposed: infer Exposed) => any } | undefined ? Exposed : {}`,
+  type __Setup = typeof __setup
+  type __Props = Parameters<__Setup>[0]
+  type __Slots = Parameters<__Setup>[1] extends { slots?: infer Slots } | undefined ? Slots : {}
+  type __Exposed = Parameters<__Setup>[1] extends { expose?: (exposed: infer Exposed) => any } | undefined ? Exposed : {}`,
           '\n  const __component = ',
-          [node.expression.getText(ast), node.expression.getStart(ast)],
-          `({`,
           isVapor
-            ? ''
-            : `...{} as {
-    setup: () => __Exposed,
-    slots: import('vue').SlotsType<__Slots>
+            ? `// @ts-ignore\n(defineVaporComponent,await import('vue-jsx-vapor')).`
+            : '',
+          [node.expression.getText(ast), node.expression.getStart(ast)],
+          `({\n`,
+          `...{} as {
+    setup: (props: __Props) => __Exposed,
+    render: () => ReturnType<__Setup>
+    slots: ${isVapor ? '__Slots' : `import('vue').SlotsType<__Slots>`} 
   },`,
           ...(compOptions
             ? ['...', [compOptions.getText(ast), compOptions.getStart(ast)]]
             : []),
           `})
-  type __Instance = (typeof __component extends new (...args: any) => any ? InstanceType<typeof __component> : typeof __component) & {${isVapor ? '\n/** @deprecated This is only a type when used in Vapor Instances. */' : ''}
-    $props: __Props
-  }
-  return {} as {
-    __isFragment?: never
-    __isTeleport?: never
-    __isSuspense?: never
-    new (props: __Props): __Instance,
-    setup: (props: __Props, ctx?: {
-      attrs?: Record<string, any>
-      slots?: __Slots,
-      expose?: (exposed: keyof __Exposed extends never ? __Instance : __Exposed) => any
-    }) => {},
+  return {} as Omit<typeof __component, 'constructor'> & {
+    new (props?: __Props): InstanceType<typeof __component> & {${isVapor ? '\n/** @deprecated This is only a type when used in Vapor Instances. */\n$props: __Props' : ''}},
   }`,
         ] as Code[])
   codes.replaceRange(node.end, node.end, ...result, `\n})()`)

packages/macros/src/volar/transform.ts

@@ -81,25 +81,27 @@ export function transformJsxMacros(
           node.getStart(ast),
           node.expression.getStart(ast),
           'const ',
-          [`__render`, node.getStart(ast), { verification: true }],
+          [`__render`, node.getStart(ast) - 1, { verification: true }],
           macros.defineComponent
             ? macros.defineComponent?.expression.getText(ast) ===
               'defineVaporComponent'
-              ? ': import("vue-jsx-vapor").NodeChild'
-              : ': () => import("vue").VNodeChild'
+              ? ''
+              : ': () => JSX.Element'
             : '',
-          ` = `,
+          ' = ',
         )
         codes.replaceRange(
           node.expression.end,
           node.expression.end,
           `
 return {} as {
   props: {${props.join(', ')}},
-  context: {
-    slots?: ${macros.defineSlots ?? '{}'},
-    expose?: (exposed: import('vue').ShallowUnwrapRef<${macros.defineExpose ?? '{}'}>) => void,
-    attrs?: Record<string, any>
+  context: ${
+    root.parameters[1]?.type ? root.parameters[1].type.getText(ast) : '{}'
+  } & {
+    slots: ${macros.defineSlots ?? '{}'},
+    expose: (exposed: ${macros.defineExpose ?? '{}'}) => void,
+    attrs: Record<string, any>
   },
   render: typeof __render
 }`,

packages/runtime/src/index.ts

@@ -5,3 +5,4 @@ export * from './node'
 export * from './block'
 export * from './component'
 export * from './helpers'
+export * from './vue'