From f3e7dd5faa7b709d0e0b479ea6e62f2897ab7e07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=AE=E7=94=9F?= <2234839456@qq.com> Date: Wed, 26 Feb 2025 07:38:38 +0000 Subject: [PATCH 1/3] Support SVG 2 elements, using @vue/shared to ensure consistent behavior with vue --- packages/babel-plugin-jsx/package.json | 4 +--- packages/babel-plugin-jsx/src/utils.ts | 12 +++++------- pnpm-lock.yaml | 17 +++-------------- 3 files changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/babel-plugin-jsx/package.json b/packages/babel-plugin-jsx/package.json index 72262bd9..b2434058 100644 --- a/packages/babel-plugin-jsx/package.json +++ b/packages/babel-plugin-jsx/package.json @@ -31,15 +31,13 @@ "@babel/types": "^7.26.9", "@vue/babel-helper-vue-transform-on": "workspace:*", "@vue/babel-plugin-resolve-type": "workspace:*", - "html-tags": "^3.3.1", - "svg-tags": "^1.0.0" + "@vue/shared": "^3.5.13" }, "devDependencies": { "@babel/core": "^7.26.9", "@babel/preset-env": "^7.26.9", "@types/babel__template": "^7.4.4", "@types/babel__traverse": "^7.20.6", - "@types/svg-tags": "^1.0.2", "@vue/test-utils": "^2.4.6", "regenerator-runtime": "^0.14.1", "vue": "catalog:" diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index b8c9a2b5..4e28ea40 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/packages/babel-plugin-jsx/src/utils.ts @@ -1,10 +1,8 @@ import * as t from '@babel/types'; -import htmlTags from 'html-tags'; -import svgTags from 'svg-tags'; import { type NodePath } from '@babel/traverse'; import type { State } from './interface'; import SlotFlags from './slotFlags'; - +import { isHTMLTag , isSVGTag } from '@vue/shared' export const JSX_HELPER_KEY = 'JSX_HELPER_KEY'; export const FRAGMENT = 'Fragment'; export const KEEP_ALIVE = 'KeepAlive'; @@ -60,8 +58,8 @@ export const checkIsComponent = ( return ( !state.opts.isCustomElement?.(tag) && shouldTransformedToSlots(tag) && - !htmlTags.includes(tag as htmlTags.htmlTags) && - !svgTags.includes(tag) + !isHTMLTag(tag) && + !isSVGTag(tag) ); }; @@ -100,8 +98,8 @@ export const getTag = ( if (namePath.isJSXIdentifier()) { const { name } = namePath.node; if ( - !htmlTags.includes(name as htmlTags.htmlTags) && - !svgTags.includes(name) + !isHTMLTag(name) && + !isSVGTag(name) ) { return name === FRAGMENT ? createIdentifier(state, FRAGMENT) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 538f04ed..009619fc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -106,12 +106,9 @@ importers: '@vue/babel-plugin-resolve-type': specifier: workspace:* version: link:../babel-plugin-resolve-type - html-tags: - specifier: ^3.3.1 - version: 3.3.1 - svg-tags: - specifier: ^1.0.0 - version: 1.0.0 + '@vue/shared': + specifier: ^3.5.13 + version: 3.5.13 devDependencies: '@babel/core': specifier: ^7.26.9 @@ -125,9 +122,6 @@ importers: '@types/babel__traverse': specifier: ^7.20.6 version: 7.20.6 - '@types/svg-tags': - specifier: ^1.0.2 - version: 1.0.2 '@vue/test-utils': specifier: ^2.4.6 version: 2.4.6 @@ -1257,9 +1251,6 @@ packages: '@types/node@22.13.4': resolution: {integrity: sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==} - '@types/svg-tags@1.0.2': - resolution: {integrity: sha512-D8rhCFfpmWzXvzVqdXo40EXNeropfqp4gvwn8fcVfzYIci8M1C1tk/L26Yacn/U9vaPM7FlS73BNoUtfjAjwAw==} - '@typescript-eslint/eslint-plugin@8.24.1': resolution: {integrity: sha512-ll1StnKtBigWIGqvYDVuDmXJHVH4zLVot1yQ4fJtLpL7qacwkxJc1T0bptqw+miBQ/QfUbhl1TcQ4accW5KUyA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -4049,8 +4040,6 @@ snapshots: dependencies: undici-types: 6.20.0 - '@types/svg-tags@1.0.2': {} - '@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': dependencies: '@eslint-community/regexpp': 4.12.1 From 08f07d119e0cc585091119a14fc459d10b61dbed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=AE=E7=94=9F?= <2234839456@qq.com> Date: Wed, 26 Feb 2025 08:07:20 +0000 Subject: [PATCH 2/3] clean code --- packages/babel-plugin-jsx/src/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index 4e28ea40..e8230d73 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/packages/babel-plugin-jsx/src/utils.ts @@ -1,8 +1,8 @@ import * as t from '@babel/types'; import { type NodePath } from '@babel/traverse'; +import { isHTMLTag , isSVGTag } from '@vue/shared' import type { State } from './interface'; import SlotFlags from './slotFlags'; -import { isHTMLTag , isSVGTag } from '@vue/shared' export const JSX_HELPER_KEY = 'JSX_HELPER_KEY'; export const FRAGMENT = 'Fragment'; export const KEEP_ALIVE = 'KeepAlive'; From d32e371c02421f206a7d683afab4984b66abd618 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=AE=E7=94=9F?= <2234839456@qq.com> Date: Thu, 27 Feb 2025 14:15:34 +0000 Subject: [PATCH 3/3] prettier --- packages/babel-plugin-jsx/src/utils.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index e8230d73..bc64ab58 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/packages/babel-plugin-jsx/src/utils.ts @@ -1,6 +1,6 @@ import * as t from '@babel/types'; import { type NodePath } from '@babel/traverse'; -import { isHTMLTag , isSVGTag } from '@vue/shared' +import { isHTMLTag, isSVGTag } from '@vue/shared'; import type { State } from './interface'; import SlotFlags from './slotFlags'; export const JSX_HELPER_KEY = 'JSX_HELPER_KEY'; @@ -97,10 +97,7 @@ export const getTag = ( const namePath = path.get('openingElement').get('name'); if (namePath.isJSXIdentifier()) { const { name } = namePath.node; - if ( - !isHTMLTag(name) && - !isSVGTag(name) - ) { + if (!isHTMLTag(name) && !isSVGTag(name)) { return name === FRAGMENT ? createIdentifier(state, FRAGMENT) : path.scope.hasBinding(name)