feat: Support Babel 8

package.json

@@ -20,13 +20,11 @@
     "jsx"
   ],
   "devDependencies": {
-    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@babel/plugin-syntax-typescript": "^8.0.0-beta.2",
+    "@babel/plugin-syntax-jsx": "^8.0.0-beta.2",
     "@eslint/js": "^9.33.0",
     "@oxc-project/runtime": "^0.81.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@types/babel__core": "^7.20.5",
-    "@types/babel__helper-module-imports": "^7.18.3",
-    "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/node": "^24.2.1",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/babel-plugin-jsx": "workspace:*",

packages/babel-plugin-jsx/README-zh_CN.md

@@ -382,5 +382,5 @@ const App = {
 
 要求：
 
-- **Babel 7+**
+- **Babel 8+**
 - **Vue 3+**

packages/babel-plugin-jsx/README.md

@@ -386,5 +386,5 @@ const App = {
 
 This repo is only compatible with:
 
-- **Babel 7+**
+- **Babel 8+**
 - **Vue 3+**

packages/babel-plugin-jsx/package.json

@@ -27,27 +27,25 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/helper-module-imports": "^7.27.1",
-    "@babel/helper-plugin-utils": "^7.27.1",
-    "@babel/plugin-syntax-jsx": "^7.27.1",
-    "@babel/template": "^7.27.2",
-    "@babel/traverse": "^7.28.0",
-    "@babel/types": "^7.28.2",
+    "@babel/helper-module-imports": "^8.0.0-beta.2",
+    "@babel/helper-plugin-utils": "^8.0.0-beta.2",
+    "@babel/plugin-syntax-jsx": "^8.0.0-beta.2",
+    "@babel/template": "^8.0.0-beta.2",
+    "@babel/traverse": "^8.0.0-beta.2",
+    "@babel/types": "^8.0.0-beta.2",
     "@vue/babel-helper-vue-transform-on": "workspace:*",
     "@vue/babel-plugin-resolve-type": "workspace:*",
     "@vue/shared": "^3.5.18"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@types/babel__template": "^7.4.4",
-    "@types/babel__traverse": "^7.28.0",
+    "@babel/core": "^8.0.0-beta.2",
+    "@babel/preset-env": "^8.0.0-beta.2",
     "@vue/test-utils": "^2.4.6",
     "regenerator-runtime": "^0.14.1",
     "vue": "catalog:"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0-0"
+    "@babel/core": "^8.0.0-beta.2"
   },
   "peerDependenciesMeta": {
     "@babel/core": {

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

@@ -1,10 +1,9 @@
 import * as t from '@babel/types';
-import type * as BabelCore from '@babel/core';
+import type { PluginAPI, PluginObject, PluginPass } from '@babel/core';
 import _template from '@babel/template';
-// @ts-expect-error
 import _syntaxJsx from '@babel/plugin-syntax-jsx';
 import { addNamed, addNamespace, isModule } from '@babel/helper-module-imports';
-import { type NodePath, type Visitor } from '@babel/traverse';
+import type { NodePath, VisitorBase } from '@babel/traverse';
 import ResolveType from '@vue/babel-plugin-resolve-type';
 import { declare } from '@babel/helper-plugin-utils';
 import transformVueJSX from './transform-vue-jsx';
@@ -14,20 +13,11 @@
 export { VueJSXPluginOptions };
 
 const hasJSX = (parentPath: NodePath<t.Program>) => {
-  let fileHasJSX = false;
-  parentPath.traverse({
-    JSXElement(path) {
-      // skip ts error
-      fileHasJSX = true;
-      path.stop();
-    },
-    JSXFragment(path) {
-      fileHasJSX = true;
-      path.stop();
-    },
+  return t.traverseFast(parentPath.node, (node) => {
+    if (t.isJSXElement(node) || t.isJSXFragment(node)) {
+      return t.traverseFast.stop;
+    }
   });
-
-  return fileHasJSX;
 };
 
 const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
@@ -41,25 +31,25 @@
 const template = /*#__PURE__*/ interopDefault(_template);
 
 const plugin: (
-  api: object,
+  api: PluginAPI,
   options: VueJSXPluginOptions | null | undefined,
   dirname: string
-) => BabelCore.PluginObj<State> = declare<
-  VueJSXPluginOptions,
-  BabelCore.PluginObj<State>
+) => PluginObject<State & PluginPass> = declare<
+  State,
+  VueJSXPluginOptions | null | undefined
 >((api, opt, dirname) => {
   const { types } = api;
-  let resolveType: BabelCore.PluginObj<BabelCore.PluginPass> | undefined;
+  let resolveType: PluginObject<PluginPass> | undefined;
   if (opt.resolveType) {
     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>),
+      ...(resolveType?.visitor as VisitorBase<State & PluginPass>),
       ...transformVueJSX,
       ...sugarFragment,
       Program: {
@@ -133,7 +123,7 @@
                   if (!sourceName) {
                     sourceName = addNamespace(path, 'vue', {
                       ensureLiveReference: true,
-                    });
+                    }) as t.Identifier;
                   }
                   return t.memberExpression(sourceName, t.identifier(name));
                 });

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

@@ -8,7 +8,7 @@ export type State = {
   get: (name: string) => any;
   set: (name: string, value: any) => any;
   opts: VueJSXPluginOptions;
-  file: BabelCore.BabelFile;
+  file: BabelCore.File;
 };
 
 export interface VueJSXPluginOptions {

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

@@ -16,16 +16,16 @@
  */
 const getType = (path: NodePath<t.JSXOpeningElement>) => {
   const typePath = path.get('attributes').find((attribute) => {
     if (!attribute.isJSXAttribute()) {
       return false;
     }
     return (
       attribute.get('name').isJSXIdentifier() &&
       (attribute.get('name') as NodePath<t.JSXIdentifier>).node.name === 'type'
     );
   }) as NodePath<t.JSXAttribute> | undefined;
 
   return typePath ? typePath.get('value').node : null;
 };
 
 const parseModifiers = (value: any): string[] =>
@@ -72,7 +72,7 @@
 
   const isVModels = directiveName === 'models';
   const isVModel = directiveName === 'model';
   if (isVModel && !path.get('value').isJSXExpressionContainer()) {
     throw new Error('You have to use JSX Expression inside your v-model');
   }
 
@@ -186,7 +186,7 @@
   }
   const referenceName =
     'v' + directiveName[0].toUpperCase() + directiveName.slice(1);
-  if (path.scope.references[referenceName]) {
+  if (path.scope.getProgramParent().referencesSet.has(referenceName)) {
     return t.identifier(referenceName);
   }
   return t.callExpression(createIdentifier(state, 'resolveDirective'), [

packages/babel-plugin-jsx/src/sugar-fragment.ts

@@ -1,22 +1,20 @@
 import * as t from '@babel/types';
-import { type NodePath, type Visitor } from '@babel/traverse';
+import type { NodePath, VisitorBase } from '@babel/traverse';
 import type { State } from './interface';
 import { FRAGMENT, createIdentifier } from './utils';
 
 const transformFragment = (
   path: NodePath<t.JSXFragment>,
   Fragment: t.JSXIdentifier | t.JSXMemberExpression
 ) => {
-  const children = path.get('children') || [];
   return t.jsxElement(
     t.jsxOpeningElement(Fragment, []),
     t.jsxClosingElement(Fragment),
-    children.map(({ node }) => node),
-    false
+    path.node.children.slice()
   );
 };
 
-const visitor: Visitor<State> = {
+const visitor: VisitorBase<State> = {
   JSXFragment: {
     enter(path, state) {
       const fragmentCallee = createIdentifier(state, FRAGMENT);

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import { type NodePath, type Visitor } from '@babel/traverse';
+import type { NodePath, VisitorBase } from '@babel/traverse';
 import { addDefault } from '@babel/helper-module-imports';
 import {
   buildIIFE,
@@ -577,7 +577,7 @@ const transformJSXElement = (
   ]);
 };
 
-const visitor: Visitor<State> = {
+const visitor: VisitorBase<State> = {
   JSXElement: {
     exit(path, state) {
       path.replaceWith(transformJSXElement(path, state));

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

@@ -1,6 +1,7 @@
 import { transformAsync } from '@babel/core';
-// @ts-expect-error missing types
 import typescript from '@babel/plugin-syntax-typescript';
+import jsx from '@babel/plugin-syntax-jsx';
+
 import VueJsx from '../src';
 
 describe('resolve type', () => {
@@ -12,10 +13,7 @@ describe('resolve type', () => {
         const App = defineComponent((props: Props) => <div />)
         `,
         {
-          plugins: [
-            [typescript, { isTSX: true }],
-            [VueJsx, { resolveType: true }],
-          ],
+          plugins: [typescript, jsx, [VueJsx, { resolveType: true }]],
         }
       );
       expect(result!.code).toMatchSnapshot();

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

@@ -12,7 +12,7 @@ const transpile = (source: string, options: VueJSXPluginOptions = {}) =>
       source,
       {
         filename: '',
-        presets: null,
+        presets: [],
         plugins: [[JSX, options]],
         configFile: false,
       },

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

@@ -38,18 +38,17 @@
     "dist"
   ],
   "peerDependencies": {
-    "@babel/core": "^7.0.0-0"
+    "@babel/core": "^8.0.0-beta.2"
   },
   "dependencies": {
-    "@babel/code-frame": "^7.27.1",
-    "@babel/helper-module-imports": "^7.27.1",
-    "@babel/helper-plugin-utils": "^7.27.1",
-    "@babel/parser": "^7.28.0",
+    "@babel/code-frame": "^8.0.0-beta.2",
+    "@babel/helper-module-imports": "^8.0.0-beta.2",
+    "@babel/helper-plugin-utils": "^8.0.0-beta.2",
+    "@babel/parser": "^8.0.0-beta.2",
     "@vue/compiler-sfc": "^3.5.18"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@types/babel__code-frame": "^7.0.6",
+    "@babel/core": "^8.0.0-beta.2",
     "vue": "catalog:"
   }
 }