feat: integrate with JSX plugin

package.json

@@ -15,6 +15,7 @@
     "jsx"
   ],
   "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.22.5",
     "@rollup/plugin-babel": "^6.0.3",
     "@types/babel__core": "^7.20.2",
     "@types/node": "^20.6.5",

packages/babel-plugin-jsx/package.json

@@ -24,11 +24,13 @@
   ],
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
+    "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/template": "^7.22.15",
     "@babel/traverse": "^7.22.20",
     "@babel/types": "^7.22.19",
     "@vue/babel-helper-vue-transform-on": "workspace:^",
+    "@vue/babel-plugin-resolve-type": "workspace:^",
     "camelcase": "^6.3.0",
     "html-tags": "^3.3.1",
     "svg-tags": "^1.0.0"
@@ -36,6 +38,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.20",
     "@babel/preset-env": "^7.22.20",
+    "@types/babel__helper-plugin-utils": "^7.10.1",
     "@types/babel__template": "^7.4.2",
     "@types/babel__traverse": "^7.20.2",
     "@types/svg-tags": "^1.0.0",

packages/babel-plugin-jsx/src/index.ts

@@ -5,7 +5,9 @@ import template from '@babel/template';
 import syntaxJsx from '@babel/plugin-syntax-jsx';
 // @ts-expect-error
 import { addNamed, addNamespace, isModule } from '@babel/helper-module-imports';
-import { type NodePath } from '@babel/traverse';
+import { type NodePath, type Visitor } from '@babel/traverse';
+import ResolveType from '@vue/babel-plugin-resolve-type';
+import { declare } from '@babel/helper-plugin-utils';
 import transformVueJSX from './transform-vue-jsx';
 import sugarFragment from './sugar-fragment';
 import type { State, VueJSXPluginOptions } from './interface';
@@ -31,10 +33,20 @@ const hasJSX = (parentPath: NodePath<t.Program>) => {
 
 const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
 
-export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
+export default declare<VueJSXPluginOptions, BabelCore.PluginObj<State>>(
+  (api, opt, dirname) => {
+    const { types } = api;
+    let resolveType: BabelCore.PluginObj<BabelCore.PluginPass> | undefined;
+    if (opt.resolveType !== false) {
+      if (typeof opt.resolveType === 'boolean') opt.resolveType = {};
+      resolveType = ResolveType(api, opt.resolveType, dirname);
+    }
+    return {
+      ...(resolveType || {}),
       name: 'babel-plugin-jsx',
       inherits: syntaxJsx,
       visitor: {
+        ...(resolveType?.visitor as Visitor<State>),
         ...transformVueJSX,
         ...sugarFragment,
         Program: {
@@ -137,7 +149,8 @@ export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
                         (p) =>
                           p.isVariableDeclaration() &&
                           p.node.declarations.some(
-                        (d) => (d.id as t.Identifier)?.name === sourceName.name
+                            (d) =>
+                              (d.id as t.Identifier)?.name === sourceName.name
                           )
                       )
                       .pop();
@@ -208,4 +221,6 @@ export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
           },
         },
       },
-});
+    };
+  }
+);

packages/babel-plugin-jsx/src/interface.ts

@@ -1,5 +1,6 @@
 import type * as t from '@babel/types';
 import type * as BabelCore from '@babel/core';
+import { type Options } from '@vue/babel-plugin-resolve-type';
 
 export type Slots = t.Identifier | t.ObjectExpression | null;
 
@@ -23,4 +24,8 @@ export interface VueJSXPluginOptions {
   enableObjectSlots?: boolean;
   /** Replace the function used when compiling JSX expressions */
   pragma?: string;
+  /**
+   * enabled by default
+   */
+  resolveType?: Options | boolean;
 }

packages/babel-plugin-jsx/test/__snapshots__/resolve-type.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`resolve type > runtime props > basic 1`] = `
+"import { createVNode as _createVNode } from \\"vue\\";
+interface Props {
+  foo?: string;
+}
+const App = defineComponent((props: Props) => _createVNode(\\"div\\", null, null), {
+  props: {
+    foo: {
+      type: String,
+      required: false
+    }
+  },
+  name: \\"App\\"
+});"
+`;

packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap

@@ -188,6 +188,8 @@ const A = defineComponent({
   }) {
     return () => _createVNode(\\"span\\", null, [slots.default()]);
   }
+}, {
+  name: \\"A\\"
 });
 const _a2 = 2;
 a = _a2;

packages/babel-plugin-jsx/test/resolve-type.test.tsx

@@ -0,0 +1,21 @@
+import { transformAsync } from '@babel/core';
+// @ts-expect-error missing types
+import typescript from '@babel/plugin-syntax-typescript';
+import VueJsx from '../src';
+
+describe('resolve type', () => {
+  describe('runtime props', () => {
+    test('basic', async () => {
+      const result = await transformAsync(
+        `
+        interface Props { foo?: string }
+        const App = defineComponent((props: Props) => <div />)
+        `,
+        {
+          plugins: [[typescript, { isTSX: true }], VueJsx],
+        }
+      );
+      expect(result!.code).toMatchSnapshot();
+    });
+  });
+});

packages/babel-plugin-resolve-type/package.json

@@ -35,14 +35,15 @@
   "dependencies": {
     "@babel/code-frame": "^7.22.10",
     "@babel/helper-module-imports": "^7.22.5",
+    "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/parser": "^7.22.11",
     "@vue/compiler-sfc": "npm:@vue/compiler-sfc-canary@minor"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",
-    "@babel/plugin-syntax-typescript": "^7.22.5",
     "@types/babel__code-frame": "^7.0.3",
     "@types/babel__helper-module-imports": "^7.18.0",
+    "@types/babel__helper-plugin-utils": "^7.10.1",
     "vue": "^3.3.4"
   }
 }

packages/babel-plugin-resolve-type/src/index.ts

@@ -8,10 +8,11 @@ import {
 } from '@vue/compiler-sfc';
 import { codeFrameColumns } from '@babel/code-frame';
 import { addNamed } from '@babel/helper-module-imports';
+import { declare } from '@babel/helper-plugin-utils';
 
-export default ({
-  types: t,
-}: typeof BabelCore): BabelCore.PluginObj<SimpleTypeResolveOptions> => {
+export { SimpleTypeResolveOptions as Options };
+
+export default declare<SimpleTypeResolveOptions>(({ types: t }, options) => {
   let ctx: SimpleTypeResolveContext | undefined;
   let helpers: Set<string> | undefined;
 
@@ -23,7 +24,7 @@ export default ({
       ctx = {
         filename: filename,
         source: file.code,
-        options: this || {},
+        options,
         ast: file.ast.program.body,
         error(msg, node) {
           throw new Error(
@@ -178,7 +179,7 @@ export default ({
       t.objectProperty(t.identifier('emits'), ast)
     );
   }
-};
+});
 
 function getTypeAnnotation(node: BabelCore.types.Node) {
   if (

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      '@babel/plugin-syntax-typescript':
+        specifier: ^7.22.5
+        version: 7.22.5(@babel/core@7.22.20)
       '@rollup/plugin-babel':
         specifier: ^6.0.3
         version: 6.0.3(@babel/core@7.22.20)(@types/babel__core@7.20.2)
@@ -61,6 +64,9 @@ importers:
       '@babel/helper-module-imports':
         specifier: ^7.22.15
         version: 7.22.15
+      '@babel/helper-plugin-utils':
+        specifier: ^7.22.5
+        version: 7.22.5
       '@babel/plugin-syntax-jsx':
         specifier: ^7.22.5
         version: 7.22.5(@babel/core@7.22.20)
@@ -76,6 +82,9 @@ importers:
       '@vue/babel-helper-vue-transform-on':
         specifier: workspace:^
         version: link:../babel-helper-vue-transform-on
+      '@vue/babel-plugin-resolve-type':
+        specifier: workspace:^
+        version: link:../babel-plugin-resolve-type
       camelcase:
         specifier: ^6.3.0
         version: 6.3.0
@@ -92,6 +101,9 @@ importers:
       '@babel/preset-env':
         specifier: ^7.22.20
         version: 7.22.20(@babel/core@7.22.20)
+      '@types/babel__helper-plugin-utils':
+        specifier: ^7.10.1
+        version: 7.10.1
       '@types/babel__template':
         specifier: ^7.4.2
         version: 7.4.2
@@ -122,6 +134,9 @@ importers:
       '@babel/helper-module-imports':
         specifier: ^7.22.5
         version: 7.22.15
+      '@babel/helper-plugin-utils':
+        specifier: ^7.22.5
+        version: 7.22.5
       '@babel/parser':
         specifier: ^7.22.11
         version: 7.22.16
@@ -132,15 +147,15 @@ importers:
       '@babel/core':
         specifier: ^7.22.11
         version: 7.22.20
-      '@babel/plugin-syntax-typescript':
-        specifier: ^7.22.5
-        version: 7.22.5(@babel/core@7.22.20)
       '@types/babel__code-frame':
         specifier: ^7.0.3
         version: 7.0.3
       '@types/babel__helper-module-imports':
         specifier: ^7.18.0
         version: 7.18.0
+      '@types/babel__helper-plugin-utils':
+        specifier: ^7.10.1
+        version: 7.10.1
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -1797,6 +1812,12 @@ packages:
       '@types/babel__traverse': 7.20.2
     dev: true
 
+  /@types/babel__helper-plugin-utils@7.10.1:
+    resolution: {integrity: sha512-6RaT7i6r2rT6ouIDZ2Cd6dPkq4wn1F8pLyDO+7wPVsL1dodvORiZORImaD6j9FBcHjPGuERE0hhtwkuPNXsO0A==}
+    dependencies:
+      '@types/babel__core': 7.20.2
+    dev: true
+
   /@types/babel__template@7.4.2:
     resolution: {integrity: sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==}
     dependencies: