diff --git a/.github/workflows/emoji-helper.yml b/.github/workflows/emoji-helper.yml index fc682af..6a88bfc 100644 --- a/.github/workflows/emoji-helper.yml +++ b/.github/workflows/emoji-helper.yml @@ -10,5 +10,5 @@ jobs: steps: - uses: actions-cool/emoji-helper@040b841cb25e2e6f50151c73b5ce12fee57019d2 # v1.0.0 with: - type: 'release' + type: release emoji: '+1, laugh, heart, hooray, rocket, eyes' diff --git a/.github/workflows/issue-reply.yml b/.github/workflows/issue-reply.yml index 443c510..f8a7f58 100644 --- a/.github/workflows/issue-reply.yml +++ b/.github/workflows/issue-reply.yml @@ -12,7 +12,7 @@ jobs: if: github.event.label.name == 'help wanted' uses: actions-cool/issues-helper@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3 with: - actions: 'create-comment' + actions: create-comment issue-number: ${{ github.event.issue.number }} body: | Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please be sure to fill in the default template in the Pull Request, provide changelog/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution! @@ -21,7 +21,7 @@ jobs: if: github.event.label.name == 'need reproduction' uses: actions-cool/issues-helper@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3 with: - actions: 'create-comment' + actions: create-comment issue-number: ${{ github.event.issue.number }} body: | Hello @${{ github.event.issue.user.login }}. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link [codesandbox](https://codesandbox.io/s/magical-vaughan-byzhk?file=/src/App.jsx) or provide your GitHub repository. diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 7ca471d..0000000 --- a/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -dist -coverage -pnpm-lock.yaml -CHANGELOG.md diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index b2095be..0000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "semi": false, - "singleQuote": true -} diff --git a/eslint.config.js b/eslint.config.js index 41c4ac6..9fdeba3 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,67 +1,11 @@ -// @ts-check -import { builtinModules } from 'node:module' -import tseslint from 'typescript-eslint' -import importX from 'eslint-plugin-import-x' -import eslint from '@eslint/js' -import eslintConfigPrettier from 'eslint-config-prettier' +import { sxzz } from '@sxzz/eslint-config' -export default tseslint.config( - eslint.configs.recommended, +export default sxzz( + {}, { - files: ['**/*.js', '**/*.ts', '**/*.tsx'], - extends: [...tseslint.configs.recommended], - plugins: { - import: importX, - }, - - languageOptions: { - parserOptions: { - sourceType: 'module', - ecmaFeatures: { - jsx: true, - }, - }, - }, - rules: { - eqeqeq: ['warn', 'always', { null: 'never' }], - 'no-debugger': ['error'], - 'no-empty': ['warn', { allowEmptyCatch: true }], - 'prefer-const': [ - 'warn', - { - destructuring: 'all', - }, - ], - '@typescript-eslint/ban-ts-comment': 'off', - '@typescript-eslint/no-var-requires': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/consistent-type-imports': [ - 'error', - { prefer: 'type-imports', fixStyle: 'inline-type-imports' }, - ], - - 'import/no-nodejs-modules': [ - 'error', - { allow: builtinModules.map((mod) => `node:${mod}`) }, - ], - 'import/no-duplicates': 'error', - 'import/order': 'error', - 'sort-imports': [ - 'error', - { - ignoreCase: false, - ignoreDeclarationSort: true, - ignoreMemberSort: false, - memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'], - allowSeparatedGroups: false, - }, - ], + 'import/no-default-export': 'off', + 'unicorn/filename-case': 'off', }, }, - eslintConfigPrettier, - { - ignores: ['**/dist/', '**/coverage/'], - }, ) diff --git a/package.json b/package.json index a4c36c8..1235ab9 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,11 @@ "private": true, "packageManager": "pnpm@10.18.1", "type": "module", + "keywords": [ + "vue", + "jsx" + ], + "license": "MIT", "scripts": { "dev": "pnpm -C packages/jsx-explorer run dev", "build": "tsdown", @@ -14,15 +19,11 @@ "typecheck": "tsc", "release": "bumpp -r" }, - "license": "MIT", - "keywords": [ - "vue", - "jsx" - ], "devDependencies": { "@babel/plugin-syntax-typescript": "^7.27.1", - "@eslint/js": "^9.37.0", "@rollup/plugin-babel": "^6.0.4", + "@sxzz/eslint-config": "^7.3.2", + "@sxzz/prettier-config": "^2.2.5", "@types/babel__core": "^7.20.5", "@types/babel__helper-module-imports": "^7.18.3", "@types/babel__helper-plugin-utils": "^7.10.3", @@ -31,15 +32,13 @@ "@vue/babel-plugin-jsx": "workspace:*", "bumpp": "^10.3.1", "eslint": "^9.37.0", - "eslint-config-prettier": "^10.1.8", - "eslint-plugin-import-x": "^4.16.1", "jsdom": "^27.0.0", "prettier": "3.6.2", - "tsdown": "^0.15.6", + "tsdown": "^0.16.7", "tslib": "^2.8.1", "typescript": "~5.9.3", - "typescript-eslint": "^8.45.0", "vite": "^7.1.9", "vitest": "^3.2.4" - } + }, + "prettier": "@sxzz/prettier-config" } diff --git a/packages/babel-helper-vue-transform-on/index.d.mts b/packages/babel-helper-vue-transform-on/index.d.mts index 89a1932..bd852ab 100644 --- a/packages/babel-helper-vue-transform-on/index.d.mts +++ b/packages/babel-helper-vue-transform-on/index.d.mts @@ -2,4 +2,5 @@ declare function transformOn( obj: Record, ): Record<`on${string}`, any> -export { transformOn as default, transformOn as 'module.exports' } +export default transformOn +export { transformOn as 'module.exports' } diff --git a/packages/babel-helper-vue-transform-on/index.mjs b/packages/babel-helper-vue-transform-on/index.mjs index 809b00b..e359f3d 100644 --- a/packages/babel-helper-vue-transform-on/index.mjs +++ b/packages/babel-helper-vue-transform-on/index.mjs @@ -6,4 +6,5 @@ function transformOn(obj) { return result } -export { transformOn as default, transformOn as 'module.exports' } +export default transformOn +export { transformOn as 'module.exports' } diff --git a/packages/babel-helper-vue-transform-on/package.json b/packages/babel-helper-vue-transform-on/package.json index ddd240b..da64434 100644 --- a/packages/babel-helper-vue-transform-on/package.json +++ b/packages/babel-helper-vue-transform-on/package.json @@ -1,17 +1,17 @@ { "name": "@vue/babel-helper-vue-transform-on", "version": "2.0.1", - "type": "module", "description": "to help transform on", - "author": "Amour1688 ", + "type": "module", "license": "MIT", - "exports": { - ".": "./index.mjs", - "./package.json": "./package.json" - }, "repository": { "type": "git", "url": "git+https://github.com/vuejs/babel-plugin-jsx.git", "directory": "packages/babel-helper-vue-transform-on" + }, + "author": "Amour1688 ", + "exports": { + ".": "./index.mjs", + "./package.json": "./package.json" } } diff --git a/packages/babel-plugin-jsx/README-zh_CN.md b/packages/babel-plugin-jsx/README-zh_CN.md index 150872b..5803b2d 100644 --- a/packages/babel-plugin-jsx/README-zh_CN.md +++ b/packages/babel-plugin-jsx/README-zh_CN.md @@ -17,7 +17,7 @@ npm install @vue/babel-plugin-jsx -D 配置 Babel -```js +```json { "plugins": ["@vue/babel-plugin-jsx"] } @@ -102,7 +102,7 @@ const App = { ``` ```jsx -import { withModifiers, defineComponent } from 'vue' +import { defineComponent, withModifiers } from 'vue' const App = defineComponent({ setup() { @@ -169,13 +169,13 @@ const App = { ``` ```jsx - +; // 或者 ``` ```jsx - +; // 或者 ``` @@ -227,7 +227,7 @@ h(A, { modifier: true, }, 'onUpdate:modelValue': ($event) => (foo = $event), - bar: bar, + bar, barModifiers: { modifier: true, }, @@ -284,7 +284,7 @@ const App = { // or -const App = { +const App2 = { setup() { const slots = { default: () =>
A
, @@ -295,7 +295,7 @@ const App = { } // 或者，当 `enableObjectSlots` 不是 `false` 时，您可以使用对象插槽 -const App = { +const App3 = { setup() { return () => ( <> diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md index 69e84a0..f1a2ffd 100644 --- a/packages/babel-plugin-jsx/README.md +++ b/packages/babel-plugin-jsx/README.md @@ -106,7 +106,7 @@ const App = { ``` ```jsx -import { withModifiers, defineComponent } from 'vue' +import { defineComponent, withModifiers } from 'vue' const App = defineComponent({ setup() { @@ -173,13 +173,13 @@ const App = { ``` ```jsx - +; // Or ``` ```jsx - +; // Or ``` @@ -231,7 +231,7 @@ h(A, { modifier: true, }, 'onUpdate:modelValue': ($event) => (foo = $event), - bar: bar, + bar, barModifiers: { modifier: true, }, @@ -288,7 +288,7 @@ const App = { // or -const App = { +const App2 = { setup() { const slots = { default: () =>
A
, @@ -299,7 +299,7 @@ const App = { } // or you can use object slots when `enableObjectSlots` is not false. -const App = { +const App3 = { setup() { return () => ( <> diff --git a/packages/babel-plugin-jsx/package.json b/packages/babel-plugin-jsx/package.json index 9a320d5..5425d94 100644 --- a/packages/babel-plugin-jsx/package.json +++ b/packages/babel-plugin-jsx/package.json @@ -2,37 +2,45 @@ "name": "@vue/babel-plugin-jsx", "version": "2.0.1", "description": "Babel plugin for Vue 3 JSX", - "author": "Amour1688 ", - "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme", - "license": "MIT", "type": "module", - "main": "./dist/index.mjs", - "module": "./dist/index.mjs", - "types": "./dist/index.d.mts", - "exports": { - ".": { - "dev": "./src/index.ts", - "default": "./dist/index.mjs" - }, - "./package.json": "./package.json" - }, - "publishConfig": { - "exports": { - ".": "./dist/index.mjs", - "./package.json": "./package.json" - } + "license": "MIT", + "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme", + "bugs": { + "url": "https://github.com/vuejs/babel-plugin-jsx/issues" }, "repository": { "type": "git", "url": "git+https://github.com/vuejs/babel-plugin-jsx.git", "directory": "packages/babel-plugin-jsx" }, - "bugs": { - "url": "https://github.com/vuejs/babel-plugin-jsx/issues" - }, + "author": "Amour1688 ", "files": [ "dist" ], + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "dev": "./src/index.ts", + "default": "./dist/index.js" + }, + "./package.json": "./package.json" + }, + "publishConfig": { + "exports": { + ".": "./dist/index.js", + "./package.json": "./package.json" + } + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + } + }, "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", @@ -52,13 +60,5 @@ "@vue/test-utils": "^2.4.6", "regenerator-runtime": "^0.14.1", "vue": "catalog:" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - }, - "peerDependenciesMeta": { - "@babel/core": { - "optional": true - } } } diff --git a/packages/babel-plugin-jsx/src/index.ts b/packages/babel-plugin-jsx/src/index.ts index f15fe8d..bea3fff 100644 --- a/packages/babel-plugin-jsx/src/index.ts +++ b/packages/babel-plugin-jsx/src/index.ts @@ -1,15 +1,15 @@ -import t from '@babel/types' -import type * as BabelCore from '@babel/core' -import _template from '@babel/template' +import { addNamed, addNamespace, isModule } from '@babel/helper-module-imports' +import { declare } from '@babel/helper-plugin-utils' // @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 _template from '@babel/template' +import t from '@babel/types' 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 transformVueJSX from './transform-vue-jsx' import type { State, VueJSXPluginOptions } from './interface' +import type * as BabelCore from '@babel/core' +import type { NodePath, Visitor } from '@babel/traverse' export { VueJSXPluginOptions } @@ -30,7 +30,7 @@ const hasJSX = (parentPath: NodePath) => { return fileHasJSX } -const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/ +const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+(\S+)/ /* #__NO_SIDE_EFFECTS__ */ function interopDefault(m: any) { @@ -55,7 +55,7 @@ const plugin: ( resolveType = ResolveType(api, opt.resolveType, dirname) } return { - ...(resolveType || {}), + ...resolveType, name: 'babel-plugin-jsx', inherits: /*#__PURE__*/ interopDefault(syntaxJsx), visitor: { @@ -115,9 +115,9 @@ const plugin: ( return typeof s === 'function' || (Object.prototype.toString.call(s) === '[object Object]' && !${isVNodeName}(s)); } ` - const lastImport = (path.get('body') as NodePath[]) - .filter((p) => p.isImportDeclaration()) - .pop() + const lastImport = (path.get('body') as NodePath[]).findLast( + (p) => p.isImportDeclaration(), + ) if (lastImport) { lastImport.insertAfter(ast) } @@ -160,16 +160,13 @@ const plugin: ( ` const nodePaths = path.get('body') as NodePath[] - const lastImport = nodePaths - .filter( - (p) => - p.isVariableDeclaration() && - p.node.declarations.some( - (d) => - (d.id as t.Identifier)?.name === sourceName.name, - ), - ) - .pop() + const lastImport = nodePaths.findLast( + (p) => + p.isVariableDeclaration() && + p.node.declarations.some( + (d) => (d.id as t.Identifier)?.name === sourceName.name, + ), + ) if (lastImport) { lastImport.insertAfter(ast) } diff --git a/packages/babel-plugin-jsx/src/interface.ts b/packages/babel-plugin-jsx/src/interface.ts index 8e83a9a..77d4e7d 100644 --- a/packages/babel-plugin-jsx/src/interface.ts +++ b/packages/babel-plugin-jsx/src/interface.ts @@ -1,6 +1,6 @@ -import type t from '@babel/types' import type * as BabelCore from '@babel/core' -import { type Options } from '@vue/babel-plugin-resolve-type' +import type t from '@babel/types' +import type { Options } from '@vue/babel-plugin-resolve-type' export type Slots = t.Identifier | t.ObjectExpression | null diff --git a/packages/babel-plugin-jsx/src/parseDirectives.ts b/packages/babel-plugin-jsx/src/parseDirectives.ts index 036eec2..01d2968 100644 --- a/packages/babel-plugin-jsx/src/parseDirectives.ts +++ b/packages/babel-plugin-jsx/src/parseDirectives.ts @@ -1,7 +1,7 @@ import t from '@babel/types' -import { type NodePath } from '@babel/traverse' import { createIdentifier } from './utils' import type { State } from './interface' +import type { NodePath } from '@babel/traverse' export type Tag = | t.Identifier @@ -187,8 +187,7 @@ const resolveDirective = ( } return modelToUse } - const referenceName = - 'v' + directiveName[0].toUpperCase() + directiveName.slice(1) + const referenceName = `v${directiveName[0].toUpperCase()}${directiveName.slice(1)}` if (path.scope.references[referenceName]) { return t.identifier(referenceName) } diff --git a/packages/babel-plugin-jsx/src/patchFlags.ts b/packages/babel-plugin-jsx/src/patchFlags.ts index 897aa05..cc0f833 100644 --- a/packages/babel-plugin-jsx/src/patchFlags.ts +++ b/packages/babel-plugin-jsx/src/patchFlags.ts @@ -1,6 +1,6 @@ // https://github.com/vuejs/core/blob/main/packages/shared/src/patchFlags.ts -export const enum PatchFlags { +export enum PatchFlags { TEXT = 1, CLASS = 1 << 1, STYLE = 1 << 2, diff --git a/packages/babel-plugin-jsx/src/slotFlags.ts b/packages/babel-plugin-jsx/src/slotFlags.ts index e801681..d666346 100644 --- a/packages/babel-plugin-jsx/src/slotFlags.ts +++ b/packages/babel-plugin-jsx/src/slotFlags.ts @@ -1,5 +1,5 @@ // https://github.com/vuejs/core/blob/main/packages/shared/src/slotFlags.ts -const enum SlotFlags { +export enum SlotFlags { /** * Stable slots that only reference slot props or context state. The slot * can fully capture its own dependencies so when passed down the parent won't @@ -20,5 +20,3 @@ const enum SlotFlags { */ FORWARDED = 3, } - -export default SlotFlags diff --git a/packages/babel-plugin-jsx/src/sugar-fragment.ts b/packages/babel-plugin-jsx/src/sugar-fragment.ts index efac45f..e3ea790 100644 --- a/packages/babel-plugin-jsx/src/sugar-fragment.ts +++ b/packages/babel-plugin-jsx/src/sugar-fragment.ts @@ -1,7 +1,7 @@ import t from '@babel/types' -import { type NodePath, type Visitor } from '@babel/traverse' +import { createIdentifier, FRAGMENT } from './utils' import type { State } from './interface' -import { FRAGMENT, createIdentifier } from './utils' +import type { NodePath, Visitor } from '@babel/traverse' const transformFragment = ( path: NodePath, diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts index e5a9c7c..87828e8 100644 --- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts +++ b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts @@ -1,6 +1,8 @@ -import t from '@babel/types' -import { type NodePath, type Visitor } from '@babel/traverse' import { addDefault } from '@babel/helper-module-imports' +import t from '@babel/types' +import parseDirectives from './parseDirectives' +import { PatchFlags } from './patchFlags' +import { SlotFlags } from './slotFlags' import { buildIIFE, checkIsComponent, @@ -18,10 +20,8 @@ import { transformText, walksScope, } from './utils' -import SlotFlags from './slotFlags' -import { PatchFlags } from './patchFlags' -import parseDirectives from './parseDirectives' import type { Slots, State } from './interface' +import type { NodePath, Visitor } from '@babel/traverse' const xlinkRE = /^xlink([A-Z])/ @@ -229,15 +229,15 @@ const buildProps = (path: NodePath, state: State) => { ), ) - if (!isDynamic) { - dynamicPropNames.add((updateName as t.StringLiteral).value) - } else { + if (isDynamic) { hasDynamicKeys = true + } else { + dynamicPropNames.add((updateName as t.StringLiteral).value) } }) } } else { - if (name.match(xlinkRE)) { + if (xlinkRE.test(name)) { name = name.replace( xlinkRE, (_, firstCharacter) => `xlink:${firstCharacter.toLowerCase()}`, diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index 73b83a8..b5f0806 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/packages/babel-plugin-jsx/src/utils.ts @@ -1,19 +1,12 @@ import t from '@babel/types' -import { type NodePath } from '@babel/traverse' import { isHTMLTag, isSVGTag } from '@vue/shared' +import { SlotFlags } from './slotFlags' import type { State } from './interface' -import SlotFlags from './slotFlags' +import type { NodePath } from '@babel/traverse' export const JSX_HELPER_KEY = 'JSX_HELPER_KEY' export const FRAGMENT = 'Fragment' export const KEEP_ALIVE = 'KeepAlive' -/** - * create Identifier - * @param path NodePath - * @param state - * @param name string - * @returns MemberExpression - */ export const createIdentifier = ( state: State, name: string, @@ -34,14 +27,10 @@ export const isDirective = (src: string): boolean => */ // if _Fragment is already imported, it will end with number export const shouldTransformedToSlots = (tag: string) => - !(tag.match(RegExp(`^_?${FRAGMENT}\\d*$`)) || tag === KEEP_ALIVE) + !new RegExp(String.raw`^_?${FRAGMENT}\d*$`).test(tag) && tag !== KEEP_ALIVE /** * Check if a Node is a component - * - * @param t - * @param path JSXOpeningElement - * @returns boolean */ export const checkIsComponent = ( path: NodePath, @@ -136,7 +125,7 @@ export const transformJSXText = ( path: NodePath, ): t.StringLiteral | null => { const str = transformText(path.node.value) - return str !== '' ? t.stringLiteral(str) : null + return str === '' ? null : t.stringLiteral(str) } export const transformText = (text: string) => { @@ -144,8 +133,8 @@ export const transformText = (text: string) => { let lastNonEmptyLine = 0 - for (let i = 0; i < lines.length; i++) { - if (lines[i].match(/[^ \t]/)) { + for (const [i, line] of lines.entries()) { + if (/[^ \t]/.test(line)) { lastNonEmptyLine = i } } @@ -160,16 +149,16 @@ export const transformText = (text: string) => { const isLastNonEmptyLine = i === lastNonEmptyLine // replace rendered whitespace tabs with spaces - let trimmedLine = line.replace(/\t/g, ' ') + let trimmedLine = line.replaceAll('\t', ' ') // trim whitespace touching a newline if (!isFirstLine) { - trimmedLine = trimmedLine.replace(/^[ ]+/, '') + trimmedLine = trimmedLine.replace(/^ +/, '') } // trim whitespace touching an endline if (!isLastLine) { - trimmedLine = trimmedLine.replace(/[ ]+$/, '') + trimmedLine = trimmedLine.replace(/ +$/, '') } if (trimmedLine) { diff --git a/packages/babel-plugin-jsx/test/index.test.tsx b/packages/babel-plugin-jsx/test/index.test.tsx index ef71e20..edcfea2 100644 --- a/packages/babel-plugin-jsx/test/index.test.tsx +++ b/packages/babel-plugin-jsx/test/index.test.tsx @@ -1,12 +1,12 @@ +import { mount, shallowMount, type VueWrapper } from '@vue/test-utils' import { - type CSSProperties, - type ComponentPublicInstance, - Transition, defineComponent, reactive, ref, + Transition, + type ComponentPublicInstance, + type CSSProperties, } from 'vue' -import { type VueWrapper, mount, shallowMount } from '@vue/test-utils' const patchFlagExpect = ( wrapper: VueWrapper, @@ -129,21 +129,21 @@ describe('Transform JSX', () => { return () =>
}, }) - expect(wrapper.classes().sort()).toEqual(['a', 'b'].sort()) + expect(wrapper.classes().toSorted()).toEqual(['a', 'b'].toSorted()) }) test('Merge style', () => { const propsA = { style: { color: 'red', - } as CSSProperties, + } satisfies CSSProperties, } const propsB = { style: { color: 'blue', width: '300px', height: '300px', - } as CSSProperties, + } satisfies CSSProperties, } const wrapper = shallowMount({ setup() { @@ -369,7 +369,10 @@ describe('PatchFlags', () => { setup() { const foo = ref(0) return () => ( - + ) }, }) @@ -397,7 +400,7 @@ describe('PatchFlags', () => { await wrapper.trigger('click') - expect(wrapper.classes().sort()).toEqual(['b', 'static'].sort()) + expect(wrapper.classes().toSorted()).toEqual(['b', 'static'].toSorted()) }) }) @@ -428,7 +431,7 @@ describe('variables outside slots', () => { }, render() { const attrs = { - innerHTML: `${this.val}`, + innerHTML: String(this.val), } return ( @@ -466,7 +469,7 @@ describe('variables outside slots', () => { }, render() { const attrs = { - innerHTML: `${this.val}`, + innerHTML: String(this.val), } const textarea =