feat!: remove @babel/plugin-syntax-typescript dep

Author: sxzz

README.md

@@ -117,6 +117,9 @@ VueJsx({
     ],
   },
 
+  // Use extra babel plugins
+  babelPlugins: [],
+
   // Extra options from Vue Babel plugin: https://github.com/vuejs/babel-plugin-jsx#options
   // ...
 })

package.json

@@ -63,11 +63,11 @@
   },
   "dependencies": {
     "@babel/core": "^7.28.3",
-    "@babel/plugin-syntax-typescript": "^7.27.1",
     "@vue/babel-plugin-jsx": "^1.5.0",
     "unplugin": "^2.3.9"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.27.1",
     "@sxzz/eslint-config": "^7.1.4",
     "@sxzz/prettier-config": "^2.2.4",
     "@types/babel__core": "^7.20.5",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import type { ParserOptions } from '@babel/core'
+import type { ParserOptions, PluginItem } from '@babel/core'
 import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
 import type { FilterPattern } from 'unplugin'
 
@@ -8,17 +8,19 @@ export type Options = {
   enforce?: 'pre' | 'post' | undefined
   sourceMap?: boolean
   parserOpts?: ParserOptions
+  babelPlugins?: PluginItem[]
 } & VueJSXPluginOptions
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U
 
 export type OptionsResolved = Overwrite<
   Options,
-  Pick<Required<Options>, 'include' | 'exclude' | 'sourceMap'>
+  Pick<Required<Options>, 'include' | 'exclude' | 'sourceMap' | 'babelPlugins'>
 >
 
 export function resolveOptions(options: Options): OptionsResolved {
   return {
+    babelPlugins: [],
     ...options,
     include: options.include || [/\.[jt]sx$/],
     exclude: options.exclude || [/node_modules/],

src/core/options.ts

@@ -1,6 +1,4 @@
 import { transform, type TransformOptions } from '@babel/core'
-// @ts-expect-error
-import BabelTS from '@babel/plugin-syntax-typescript'
 import BabelVueJsx from '@vue/babel-plugin-jsx'
 import type { OptionsResolved } from './options'
 
@@ -18,7 +16,7 @@ export function transformVueJsx(
   const transformOptions: TransformOptions = {
     babelrc: false,
     configFile: false,
-    plugins: [[BabelVueJsx, options]],
+    plugins: [[BabelVueJsx, options], ...options.babelPlugins],
     sourceMaps: options.sourceMap,
     sourceFileName: id,
     parserOpts: {

src/core/vue.ts

@@ -19,6 +19,11 @@ _createVNode("div", {
 }, null);"
 `;
 
+exports[`Vue 3 > custom babel plugins 1`] = `
+"import { createVNode as _createVNode } from "vue";
+const x: string = _createVNode("div", null, null);"
+`;
+
 exports[`Vue 3 > custom options 1`] = `
 "import { createVNode as _createVNode } from "vue";
 _createVNode("input", {

tests/__snapshots__/basic.test.ts.snap

@@ -1,3 +1,5 @@
+// @ts-expect-error
+import BabelTS from '@babel/plugin-syntax-typescript'
 import { describe, expect, test } from 'vitest'
 import { resolveOptions, type Options } from '../src/core/options'
 import { transformVueJsx } from '../src/core/vue'
@@ -31,7 +33,7 @@ describe('Vue 3', () => {
     ).toMatchSnapshot()
   })
 
-  test.only('custom parser plugins', () => {
+  test('custom parser plugins', () => {
     expect(
       transform(`@x class X {}; const x = <div />`, false, {
         parserOpts: {
@@ -48,4 +50,12 @@ describe('Vue 3', () => {
       }),
     ).toMatchSnapshot()
   })
+
+  test('custom babel plugins', () => {
+    expect(
+      transform(`const x: string = <div />`, true, {
+        babelPlugins: [[BabelTS, { isTSX: true }]],
+      }),
+    ).toMatchSnapshot()
+  })
 })