feat: resolve TS type (#664)

.github/workflows/ci.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Install deps
         run: pnpm install
 
+      - name: Build
+        run: pnpm run build
+
       - name: Test unit
         run: pnpm run test
 

package.json

@@ -1,5 +1,6 @@
 {
   "name": "vue-jsx-monorepo",
+  "version": "1.2.0-alpha.0",
   "private": true,
   "packageManager": "pnpm@8.14.1",
   "type": "module",
@@ -17,11 +18,15 @@
     "jsx"
   ],
   "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.22.5",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/babel__core": "^7.20.5",
+    "@types/babel__helper-module-imports": "^7.18.0",
+    "@types/babel__helper-plugin-utils": "^7.10.1",
     "@types/node": "^20.11.5",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@vitest/coverage-v8": "^1.2.1",
+    "@vue/babel-plugin-jsx": "workspace:*",
     "bumpp": "^9.3.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -32,6 +37,5 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vitest": "^1.2.1"
-  },
+  }
-  "version": "1.1.6"
 }

packages/babel-helper-vue-transform-on/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/babel-helper-vue-transform-on",
-  "version": "1.1.6",
+  "version": "1.2.0-alpha.0",
   "description": "to help transform on",
   "author": "Amour1688 <lcz_1996@foxmail.com>",
   "license": "MIT",

packages/babel-plugin-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/babel-plugin-jsx",
-  "version": "1.1.6",
+  "version": "1.2.0-alpha.0",
   "description": "Babel plugin for Vue 3 JSX",
   "author": "Amour1688 <lcz_1996@foxmail.com>",
   "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme",
@@ -24,11 +24,13 @@
   ],
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
+    "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/template": "^7.22.15",
     "@babel/traverse": "^7.23.7",
     "@babel/types": "^7.23.6",
-    "@vue/babel-helper-vue-transform-on": "workspace:^",
+    "@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"

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

@@ -3,9 +3,10 @@ import type * as BabelCore from '@babel/core';
 import _template from '@babel/template';
 // @ts-expect-error
 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';
@@ -39,10 +40,20 @@ function interopDefault(m: any) {
 const syntaxJsx = /*#__PURE__*/ interopDefault(_syntaxJsx);
 const template = /*#__PURE__*/ interopDefault(_template);
 
-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: /*#__PURE__*/ interopDefault(syntaxJsx),
       visitor: {
+        ...(resolveType?.visitor as Visitor<State>),
         ...transformVueJSX,
         ...sugarFragment,
         Program: {
@@ -67,7 +78,10 @@ export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
               ];
               if (isModule(path)) {
                 // import { createVNode } from "vue";
-            const importMap: Record<string, t.Identifier> = {};
+                const importMap: Record<
+                  string,
+                  t.MemberExpression | t.Identifier
+                > = {};
                 importNames.forEach((name) => {
                   state.set(name, () => {
                     if (importMap[name]) {
@@ -145,7 +159,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();
@@ -216,4 +231,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/src/transform-vue-jsx.ts

@@ -1,6 +1,5 @@
 import * as t from '@babel/types';
 import { type NodePath, type Visitor } from '@babel/traverse';
-// @ts-expect-error
 import { addDefault } from '@babel/helper-module-imports';
 import {
   buildIIFE,

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/README.md

@@ -0,0 +1 @@
+# babel-plugin-resolve-type

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

@@ -0,0 +1,48 @@
+{
+  "name": "@vue/babel-plugin-resolve-type",
+  "version": "1.2.0-alpha.0",
+  "description": "Babel plugin for resolving Vue types.",
+  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-resolve-type#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "dev": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/babel-plugin-jsx"
+  },
+  "scripts": {
+    "build": "tsup",
+    "watch": "tsup --watch"
+  },
+  "bugs": {
+    "url": "https://github.com/vuejs/babel-plugin-jsx/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@babel/core": "^7.0.0-0"
+  },
+  "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": "^3.4.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.11",
+    "@types/babel__code-frame": "^7.0.3",
+    "vue": "^3.3.4"
+  }
+}

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

@@ -0,0 +1,219 @@
+import type * as BabelCore from '@babel/core';
+import { parseExpression } from '@babel/parser';
+import {
+  type SimpleTypeResolveContext,
+  type SimpleTypeResolveOptions,
+  extractRuntimeEmits,
+  extractRuntimeProps,
+} 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 { SimpleTypeResolveOptions as Options };
+
+export default declare<SimpleTypeResolveOptions>(({ types: t }, options) => {
+  let ctx: SimpleTypeResolveContext | undefined;
+  let helpers: Set<string> | undefined;
+
+  return {
+    name: 'babel-plugin-resolve-type',
+    pre(file) {
+      const filename = file.opts.filename || 'unknown.js';
+      helpers = new Set();
+      ctx = {
+        filename: filename,
+        source: file.code,
+        options,
+        ast: file.ast.program.body,
+        isCE: false,
+        error(msg, node) {
+          throw new Error(
+            `[@vue/babel-plugin-resolve-type] ${msg}\n\n${filename}\n${codeFrameColumns(
+              file.code,
+              {
+                start: {
+                  line: node.loc!.start.line,
+                  column: node.loc!.start.column + 1,
+                },
+                end: {
+                  line: node.loc!.end.line,
+                  column: node.loc!.end.column + 1,
+                },
+              }
+            )}`
+          );
+        },
+        helper(key) {
+          helpers!.add(key);
+          return `_${key}`;
+        },
+        getString(node) {
+          return file.code.slice(node.start!, node.end!);
+        },
+        propsTypeDecl: undefined,
+        propsRuntimeDefaults: undefined,
+        propsDestructuredBindings: {},
+        emitsTypeDecl: undefined,
+      };
+    },
+    visitor: {
+      CallExpression(path) {
+        if (!ctx) {
+          throw new Error(
+            '[@vue/babel-plugin-resolve-type] context is not loaded.'
+          );
+        }
+
+        const { node } = path;
+
+        if (!t.isIdentifier(node.callee, { name: 'defineComponent' })) return;
+        if (!checkDefineComponent(path)) return;
+
+        const comp = node.arguments[0];
+        if (!comp || !t.isFunction(comp)) return;
+
+        let options = node.arguments[1];
+        if (!options) {
+          options = t.objectExpression([]);
+          node.arguments.push(options);
+        }
+
+        node.arguments[1] = processProps(comp, options) || options;
+        node.arguments[1] = processEmits(comp, node.arguments[1]) || options;
+      },
+      VariableDeclarator(path) {
+        inferComponentName(path);
+      },
+    },
+    post(file) {
+      for (const helper of helpers!) {
+        addNamed(file.path, `_${helper}`, 'vue');
+      }
+    },
+  };
+
+  function inferComponentName(
+    path: BabelCore.NodePath<BabelCore.types.VariableDeclarator>
+  ) {
+    const id = path.get('id');
+    const init = path.get('init');
+    if (!id || !id.isIdentifier() || !init || !init.isCallExpression()) return;
+
+    if (!init.get('callee')?.isIdentifier({ name: 'defineComponent' })) return;
+    if (!checkDefineComponent(init)) return;
+
+    const nameProperty = t.objectProperty(
+      t.identifier('name'),
+      t.stringLiteral(id.node.name)
+    );
+    const { arguments: args } = init.node;
+    if (args.length === 0) return;
+
+    if (args.length === 1) {
+      init.node.arguments.push(t.objectExpression([]));
+    }
+    args[1] = addProperty(t, args[1], nameProperty);
+  }
+
+  function processProps(
+    comp: BabelCore.types.Function,
+    options:
+      | BabelCore.types.ArgumentPlaceholder
+      | BabelCore.types.JSXNamespacedName
+      | BabelCore.types.SpreadElement
+      | BabelCore.types.Expression
+  ) {
+    const props = comp.params[0];
+    if (!props) return;
+
+    if (props.type === 'AssignmentPattern') {
+      ctx!.propsTypeDecl = getTypeAnnotation(props.left);
+      ctx!.propsRuntimeDefaults = props.right;
+    } else {
+      ctx!.propsTypeDecl = getTypeAnnotation(props);
+    }
+
+    if (!ctx!.propsTypeDecl) return;
+
+    const runtimeProps = extractRuntimeProps(ctx!);
+    if (!runtimeProps) {
+      return;
+    }
+
+    const ast = parseExpression(runtimeProps);
+    return addProperty(
+      t,
+      options,
+      t.objectProperty(t.identifier('props'), ast)
+    );
+  }
+
+  function processEmits(
+    comp: BabelCore.types.Function,
+    options:
+      | BabelCore.types.ArgumentPlaceholder
+      | BabelCore.types.JSXNamespacedName
+      | BabelCore.types.SpreadElement
+      | BabelCore.types.Expression
+  ) {
+    const setupCtx = comp.params[1] && getTypeAnnotation(comp.params[1]);
+    if (
+      !setupCtx ||
+      !t.isTSTypeReference(setupCtx) ||
+      !t.isIdentifier(setupCtx.typeName, { name: 'SetupContext' })
+    )
+      return;
+
+    const emitType = setupCtx.typeParameters?.params[0];
+    if (!emitType) return;
+
+    ctx!.emitsTypeDecl = emitType;
+    const runtimeEmits = extractRuntimeEmits(ctx!);
+
+    const ast = t.arrayExpression(
+      Array.from(runtimeEmits).map((e) => t.stringLiteral(e))
+    );
+    return addProperty(
+      t,
+      options,
+      t.objectProperty(t.identifier('emits'), ast)
+    );
+  }
+});
+
+function getTypeAnnotation(node: BabelCore.types.Node) {
+  if (
+    'typeAnnotation' in node &&
+    node.typeAnnotation &&
+    node.typeAnnotation.type === 'TSTypeAnnotation'
+  ) {
+    return node.typeAnnotation.typeAnnotation;
+  }
+}
+
+function checkDefineComponent(
+  path: BabelCore.NodePath<BabelCore.types.CallExpression>
+) {
+  const defineCompImport =
+    path.scope.getBinding('defineComponent')?.path.parent;
+  if (!defineCompImport) return true;
+
+  return (
+    defineCompImport.type === 'ImportDeclaration' &&
+    /^@?vue(\/|$)/.test(defineCompImport.source.value)
+  );
+}
+
+function addProperty<T extends BabelCore.types.Node>(
+  t: (typeof BabelCore)['types'],
+  object: T,
+  property: BabelCore.types.ObjectProperty
+) {
+  if (t.isObjectExpression(object)) {
+    object.properties.unshift(property);
+  } else if (t.isExpression(object)) {
+    return t.objectExpression([property, t.spreadElement(object)]);
+  }
+  return object;
+}

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

@@ -0,0 +1,157 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`resolve type > defineComponent scope > fake 1`] = `
+"const defineComponent = () => {};
+defineComponent((props: {
+  msg?: string;
+}) => {
+  return () => <div />;
+});"
+`;
+
+exports[`resolve type > defineComponent scope > import sub-package 1`] = `
+"import { defineComponent } from 'vue/dist/vue.esm-bundler';
+defineComponent((props: {
+  msg?: string;
+}) => {
+  return () => <div />;
+}, {
+  props: {
+    msg: {
+      type: String,
+      required: false
+    }
+  }
+});"
+`;
+
+exports[`resolve type > defineComponent scope > w/o import 1`] = `
+"defineComponent((props: {
+  msg?: string;
+}) => {
+  return () => <div />;
+}, {
+  props: {
+    msg: {
+      type: String,
+      required: false
+    }
+  }
+});"
+`;
+
+exports[`resolve type > infer component name > identifier options 1`] = `
+"import { defineComponent } from 'vue';
+const Foo = defineComponent(() => {}, {
+  name: "Foo",
+  ...opts
+});"
+`;
+
+exports[`resolve type > infer component name > no options 1`] = `
+"import { defineComponent } from 'vue';
+const Foo = defineComponent(() => {}, {
+  name: "Foo"
+});"
+`;
+
+exports[`resolve type > infer component name > object options 1`] = `
+"import { defineComponent } from 'vue';
+const Foo = defineComponent(() => {}, {
+  name: "Foo",
+  foo: 'bar'
+});"
+`;
+
+exports[`resolve type > infer component name > rest param 1`] = `
+"import { defineComponent } from 'vue';
+const Foo = defineComponent(() => {}, ...args);"
+`;
+
+exports[`resolve type > runtime emits > basic 1`] = `
+"import { type SetupContext, defineComponent } from 'vue';
+defineComponent((props, {
+  emit
+}: SetupContext<{
+  change(val: string): void;
+  click(): void;
+}>) => {
+  emit('change');
+  return () => {};
+}, {
+  emits: ["change", "click"]
+});"
+`;
+
+exports[`resolve type > runtime props > basic 1`] = `
+"import { defineComponent, h } from 'vue';
+interface Props {
+  msg: string;
+  optional?: boolean;
+}
+interface Props2 {
+  set: Set<string>;
+}
+defineComponent((props: Props & Props2) => {
+  return () => h('div', props.msg);
+}, {
+  props: {
+    msg: {
+      type: String,
+      required: true
+    },
+    optional: {
+      type: Boolean,
+      required: false
+    },
+    set: {
+      type: Set,
+      required: true
+    }
+  }
+});"
+`;
+
+exports[`resolve type > runtime props > with dynamic default value 1`] = `
+"import { _mergeDefaults } from "vue";
+import { defineComponent, h } from 'vue';
+const defaults = {};
+defineComponent((props: {
+  msg?: string;
+} = defaults) => {
+  return () => h('div', props.msg);
+}, {
+  props: /*#__PURE__*/_mergeDefaults({
+    msg: {
+      type: String,
+      required: false
+    }
+  }, defaults)
+});"
+`;
+
+exports[`resolve type > runtime props > with static default value 1`] = `
+"import { defineComponent, h } from 'vue';
+defineComponent((props: {
+  msg?: string;
+} = {
+  msg: 'hello'
+}) => {
+  return () => h('div', props.msg);
+}, {
+  props: {
+    msg: {
+      type: String,
+      required: false,
+      default: 'hello'
+    }
+  }
+});"
+`;
+
+exports[`resolve type > w/ tsx 1`] = `
+"import { type SetupContext, defineComponent } from 'vue';
+defineComponent(() => {
+  return () => <div />;
+}, {});"
+`;

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

@@ -0,0 +1,170 @@
+import { transformAsync } from '@babel/core';
+// @ts-expect-error missing types
+import typescript from '@babel/plugin-syntax-typescript';
+import ResolveType from '../src';
+
+async function transform(code: string): Promise<string> {
+  const result = await transformAsync(code, {
+    plugins: [[typescript, { isTSX: true }], ResolveType],
+  });
+  return result!.code!;
+}
+
+describe('resolve type', () => {
+  describe('runtime props', () => {
+    test('basic', async () => {
+      const result = await transform(
+        `
+        import { defineComponent, h } from 'vue';
+        interface Props {
+          msg: string;
+          optional?: boolean;
+        }
+        interface Props2 {
+          set: Set<string>;
+        }
+        defineComponent((props: Props & Props2) => {
+          return () => h('div', props.msg);
+        })
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('with static default value', async () => {
+      const result = await transform(
+        `
+        import { defineComponent, h } from 'vue';
+        defineComponent((props: { msg?: string } = { msg: 'hello' }) => {
+          return () => h('div', props.msg);
+        })
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('with dynamic default value', async () => {
+      const result = await transform(
+        `
+        import { defineComponent, h } from 'vue';
+        const defaults = {}
+        defineComponent((props: { msg?: string } = defaults) => {
+          return () => h('div', props.msg);
+        })
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('runtime emits', () => {
+    test('basic', async () => {
+      const result = await transform(
+        `
+        import { type SetupContext, defineComponent } from 'vue';
+        defineComponent(
+          (
+            props,
+            { emit }: SetupContext<{ change(val: string): void; click(): void }>
+          ) => {
+            emit('change');
+            return () => {};
+          }
+        );
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  test('w/ tsx', async () => {
+    const result = await transform(
+      `
+      import { type SetupContext, defineComponent } from 'vue';
+      defineComponent(() => {
+        return () => <div/ >;
+      });
+      `
+    );
+    expect(result).toMatchSnapshot();
+  });
+
+  describe('defineComponent scope', () => {
+    test('fake', async () => {
+      const result = await transform(
+        `
+        const defineComponent = () => {};
+        defineComponent((props: { msg?: string }) => {
+          return () => <div/ >;
+        });
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('w/o import', async () => {
+      const result = await transform(
+        `
+        defineComponent((props: { msg?: string }) => {
+          return () => <div/ >;
+        });
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('import sub-package', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue/dist/vue.esm-bundler';
+        defineComponent((props: { msg?: string }) => {
+          return () => <div/ >;
+        });
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('infer component name', () => {
+    test('no options', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue';
+        const Foo = defineComponent(() => {})
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('object options', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue';
+        const Foo = defineComponent(() => {}, { foo: 'bar' })
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('identifier options', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue';
+        const Foo = defineComponent(() => {}, opts)
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+
+    test('rest param', async () => {
+      const result = await transform(
+        `
+        import { defineComponent } from 'vue';
+        const Foo = defineComponent(() => {}, ...args)
+        `
+      );
+      expect(result).toMatchSnapshot();
+    });
+  });
+});

packages/babel-plugin-resolve-type/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  target: 'node14',
+  platform: 'neutral',
+});

packages/jsx-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/jsx-explorer",
-  "version": "1.1.6",
+  "version": "1.2.0-alpha.0",
   "type": "module",
   "private": true,
   "scripts": {

pnpm-lock.yaml

@@ -8,12 +8,21 @@ importers:
 
   .:
     devDependencies:
+      '@babel/plugin-syntax-typescript':
+        specifier: ^7.22.5
+        version: 7.23.3(@babel/core@7.23.7)
       '@rollup/plugin-babel':
         specifier: ^6.0.4
         version: 6.0.4(@babel/core@7.23.7)(@types/babel__core@7.20.5)
       '@types/babel__core':
         specifier: ^7.20.5
         version: 7.20.5
+      '@types/babel__helper-module-imports':
+        specifier: ^7.18.0
+        version: 7.18.3
+      '@types/babel__helper-plugin-utils':
+        specifier: ^7.10.1
+        version: 7.10.3
       '@types/node':
         specifier: ^20.11.5
         version: 20.11.5
@@ -23,6 +32,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^1.2.1
         version: 1.2.1(vitest@1.2.1)
+      '@vue/babel-plugin-jsx':
+        specifier: workspace:*
+        version: link:packages/babel-plugin-jsx
       bumpp:
         specifier: ^9.3.0
         version: 9.3.0
@@ -61,6 +73,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.23.3
         version: 7.23.3(@babel/core@7.23.7)
@@ -74,8 +89,11 @@ importers:
         specifier: ^7.23.6
         version: 7.23.6
       '@vue/babel-helper-vue-transform-on':
-        specifier: workspace:^
+        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
@@ -114,6 +132,34 @@ importers:
         specifier: ^3.4.15
         version: 3.4.15(typescript@5.3.3)
 
+  packages/babel-plugin-resolve-type:
+    dependencies:
+      '@babel/code-frame':
+        specifier: ^7.22.10
+        version: 7.23.5
+      '@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.23.6
+      '@vue/compiler-sfc':
+        specifier: ^3.4.15
+        version: 3.4.15
+    devDependencies:
+      '@babel/core':
+        specifier: ^7.22.11
+        version: 7.23.7
+      '@types/babel__code-frame':
+        specifier: ^7.0.3
+        version: 7.0.6
+      vue:
+        specifier: ^3.3.4
+        version: 3.4.15(typescript@5.3.3)
+
   packages/jsx-explorer:
     dependencies:
       '@babel/core':
@@ -634,6 +680,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.7):
+    resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.7):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
@@ -1837,6 +1893,10 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
+  /@types/babel__code-frame@7.0.6:
+    resolution: {integrity: sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA==}
+    dev: true
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -1853,6 +1913,19 @@ packages:
       '@babel/types': 7.23.6
     dev: true
 
+  /@types/babel__helper-module-imports@7.18.3:
+    resolution: {integrity: sha512-2pyr9Vlriessj2KI85SEF7qma8vA3vzquQMw3wn6kL5lsfjH/YxJ1Noytk4/FJElpYybUbyaC37CVfEgfyme9A==}
+    dependencies:
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.5
+    dev: true
+
+  /@types/babel__helper-plugin-utils@7.10.3:
+    resolution: {integrity: sha512-FcLBBPXInqKfULB2nvOBskQPcnSMZ0s1Y2q76u9H1NPPWaLcTeq38xBeKfF/RBUECK333qeaqRdYoPSwW7rTNQ==}
+    dependencies:
+      '@types/babel__core': 7.20.5
+    dev: true
+
   /@types/babel__template@7.4.4:
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "module": "ESNext",
     "lib": ["ES2015", "DOM", "DOM.Iterable"],
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowJs": true,
     "strict": true,
     "noUnusedLocals": true,
@@ -17,6 +17,6 @@
       "@vue/babel-plugin-jsx": ["./packages/babel-plugin-jsx/src"],
     },
     "noEmit": true,
+    "customConditions": ["dev"],
   },
-  "include": ["packages/*/src", "packages/*/test"],
 }

vitest.config.ts

@@ -3,6 +3,9 @@ import { babel } from '@rollup/plugin-babel';
 import Jsx from './packages/babel-plugin-jsx/src';
 
 export default defineConfig({
+  resolve: {
+    conditions: ['dev'],
+  },
   esbuild: {
     jsx: 'preserve',
   },