refactor: lint

This commit is contained in:
Kevin Deng
2025-11-26 17:12:35 +08:00
parent 620450b5ba
commit 5279b2eb69
33 changed files with 2271 additions and 449 deletions

View File

@@ -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'

View File

@@ -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.

View File

@@ -1,5 +0,0 @@
node_modules
dist
coverage
pnpm-lock.yaml
CHANGELOG.md

View File

@@ -1,4 +0,0 @@
{
"semi": false,
"singleQuote": true
}

View File

@@ -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',
'import/no-default-export': 'off',
'unicorn/filename-case': 'off',
},
],
'@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,
},
],
},
},
eslintConfigPrettier,
{
ignores: ['**/dist/', '**/coverage/'],
},
)

View File

@@ -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"
}

View File

@@ -2,4 +2,5 @@ declare function transformOn(
obj: Record<string, any>,
): Record<`on${string}`, any>
export { transformOn as default, transformOn as 'module.exports' }
export default transformOn
export { transformOn as 'module.exports' }

View File

@@ -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' }

View File

@@ -1,17 +1,17 @@
{
"name": "@vue/babel-helper-vue-transform-on",
"version": "2.0.1",
"type": "module",
"description": "to help transform on",
"author": "Amour1688 <lcz_1996@foxmail.com>",
"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 <lcz_1996@foxmail.com>",
"exports": {
".": "./index.mjs",
"./package.json": "./package.json"
}
}

View File

@@ -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
<input v-model={[val, ['modifier']]} />
<input v-model={[val, ['modifier']]} />;
// 或者
<input v-model_modifier={val} />
```
```jsx
<A v-model={[val, 'argument', ['modifier']]} />
<A v-model={[val, 'argument', ['modifier']]} />;
// 或者
<input v-model:argument_modifier={val} />
```
@@ -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: () => <div>A</div>,
@@ -295,7 +295,7 @@ const App = {
}
// 或者,当 `enableObjectSlots` 不是 `false` 时,您可以使用对象插槽
const App = {
const App3 = {
setup() {
return () => (
<>

View File

@@ -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
<input v-model={[val, ['modifier']]} />
<input v-model={[val, ['modifier']]} />;
// Or
<input v-model_modifier={val} />
```
```jsx
<A v-model={[val, 'argument', ['modifier']]} />
<A v-model={[val, 'argument', ['modifier']]} />;
// Or
<input v-model:argument_modifier={val} />
```
@@ -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: () => <div>A</div>,
@@ -299,7 +299,7 @@ const App = {
}
// or you can use object slots when `enableObjectSlots` is not false.
const App = {
const App3 = {
setup() {
return () => (
<>

View File

@@ -2,37 +2,45 @@
"name": "@vue/babel-plugin-jsx",
"version": "2.0.1",
"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",
"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 <lcz_1996@foxmail.com>",
"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
}
}
}

View File

@@ -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<t.Program>) => {
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(
const lastImport = nodePaths.findLast(
(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()
if (lastImport) {
lastImport.insertAfter(ast)
}

View File

@@ -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

View File

@@ -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)
}

View File

@@ -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,

View File

@@ -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

View File

@@ -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<t.JSXFragment>,

View File

@@ -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<t.JSXElement>, 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()}`,

View File

@@ -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<t.JSXOpeningElement>,
@@ -136,7 +125,7 @@ export const transformJSXText = (
path: NodePath<t.JSXText | t.StringLiteral>,
): 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) {

View File

@@ -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<ComponentPublicInstance>,
@@ -129,21 +129,21 @@ describe('Transform JSX', () => {
return () => <div class="a" {...{ class: 'b' }} />
},
})
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 () => (
<button value={`${foo.value}`} onClick={() => foo.value++}></button>
<button
value={String(foo.value)}
onClick={() => foo.value++}
></button>
)
},
})
@@ -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 (
<A inc={this.inc}>
@@ -466,7 +469,7 @@ describe('variables outside slots', () => {
},
render() {
const attrs = {
innerHTML: `${this.val}`,
innerHTML: String(this.val),
}
const textarea = <textarea id="textarea" {...attrs} />
return (

View File

@@ -1,5 +1,5 @@
import { mount, shallowMount } from '@vue/test-utils'
import { type VNode, defineComponent } from 'vue'
import { defineComponent, type VNode } from 'vue'
test('input[type="checkbox"] should work', async () => {
const wrapper = shallowMount(

View File

@@ -2,38 +2,38 @@
"name": "@vue/babel-plugin-resolve-type",
"version": "2.0.1",
"description": "Babel plugin for resolving Vue types.",
"author": "Kevin Deng <sxzz@sxzz.moe>",
"funding": "https://github.com/sponsors/sxzz",
"homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-resolve-type#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-resolve-type#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-resolve-type"
},
"bugs": {
"url": "https://github.com/vuejs/babel-plugin-jsx/issues"
},
"author": "Kevin Deng <sxzz@sxzz.moe>",
"funding": "https://github.com/sponsors/sxzz",
"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"
},

View File

@@ -1,14 +1,14 @@
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'
import { parseExpression } from '@babel/parser'
import {
extractRuntimeEmits,
extractRuntimeProps,
type SimpleTypeResolveContext,
type SimpleTypeResolveOptions,
} from '@vue/compiler-sfc'
import type * as BabelCore from '@babel/core'
export { SimpleTypeResolveOptions as Options }
@@ -27,7 +27,7 @@ const plugin: (
const filename = file.opts.filename || 'unknown.js'
helpers = new Set()
ctx = {
filename: filename,
filename,
source: file.code,
options,
ast: file.ast.program.body,
@@ -75,12 +75,15 @@ const plugin: (
if (!t.isIdentifier(node.callee, { name: 'defineComponent' })) return
if (!checkDefineComponent(path)) return
// eslint-disable-next-line baseline-js/use-baseline
const comp = node.arguments[0]
if (!comp || !t.isFunction(comp)) return
// eslint-disable-next-line baseline-js/use-baseline
let options = node.arguments[1]
if (!options) {
options = t.objectExpression([])
// eslint-disable-next-line baseline-js/use-baseline
node.arguments.push(options)
}
@@ -91,9 +94,12 @@ const plugin: (
emitsGenerics = node.typeParameters.params[1]
}
// eslint-disable-next-line baseline-js/use-baseline
node.arguments[1] =
processProps(comp, propsGenerics, options) || options
// eslint-disable-next-line baseline-js/use-baseline
node.arguments[1] =
// eslint-disable-next-line baseline-js/use-baseline
processEmits(comp, emitsGenerics, node.arguments[1]) || options
},
VariableDeclarator(path) {
@@ -125,6 +131,7 @@ const plugin: (
if (args.length === 0) return
if (args.length === 1) {
// eslint-disable-next-line baseline-js/use-baseline
init.node.arguments.push(t.objectExpression([]))
}
args[1] = addProperty(t, args[1], nameProperty)
@@ -148,13 +155,11 @@ const plugin: (
ctx!.propsTypeDecl = getTypeAnnotation(props.left)
}
ctx!.propsRuntimeDefaults = props.right
} else {
if (generics) {
} else if (generics) {
ctx!.propsTypeDecl = resolveTypeReference(generics)
} else {
ctx!.propsTypeDecl = getTypeAnnotation(props)
}
}
if (!ctx!.propsTypeDecl) return
@@ -305,7 +310,7 @@ function checkDefineComponent(
return (
defineCompImport.type === 'ImportDeclaration' &&
/^@?vue(\/|$)/.test(defineCompImport.source.value)
/^@?vue(?:\/|$)/.test(defineCompImport.source.value)
)
}

View File

@@ -1,8 +1,8 @@
{
"name": "@vue/jsx-explorer",
"version": "2.0.1",
"type": "module",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",

View File

@@ -2,7 +2,7 @@ import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
// @ts-ignore
self.MonacoEnvironment = {
globalThis.MonacoEnvironment = {
globalAPI: true,
getWorker(_: any, label: string) {
if (label === 'typescript' || label === 'javascript') {

View File

@@ -1,13 +1,13 @@
import * as monaco from 'monaco-editor'
import { watchEffect } from 'vue'
import { transform } from '@babel/standalone'
import babelPluginJsx from '@vue/babel-plugin-jsx'
// @ts-expect-error missing types
import typescript from '@babel/plugin-syntax-typescript'
import { transform } from '@babel/standalone'
import babelPluginJsx from '@vue/babel-plugin-jsx'
import * as monaco from 'monaco-editor'
import { watchEffect } from 'vue'
import {
type VueJSXPluginOptions,
compilerOptions,
initOptions,
type VueJSXPluginOptions,
} from './options'
import './editor.worker'
import './index.css'
@@ -53,10 +53,10 @@ function main() {
isolatedModules: true,
})
const editor = monaco.editor.create(document.getElementById('source')!, {
const editor = monaco.editor.create(document.querySelector('#source')!, {
...sharedEditorOptions,
model: monaco.editor.createModel(
decodeURIComponent(window.location.hash.slice(1)) ||
decodeURIComponent(globalThis.location.hash.slice(1)) ||
persistedState.src ||
`import { defineComponent } from 'vue'
@@ -66,7 +66,7 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
),
})
const output = monaco.editor.create(document.getElementById('output')!, {
const output = monaco.editor.create(document.querySelector('#output')!, {
readOnly: true,
...sharedEditorOptions,
model: monaco.editor.createModel(
@@ -83,7 +83,7 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
options: compilerOptions,
})
localStorage.setItem('state', state)
window.location.hash = encodeURIComponent(src)
globalThis.location.hash = encodeURIComponent(src)
console.clear()
try {
const res = transform(src, {
@@ -94,11 +94,11 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
],
ast: true,
})
console.log('AST', res.ast!)
console.info('AST', res.ast!)
output.setValue(res.code!)
} catch (err: any) {
console.error(err)
output.setValue(err.message!)
} catch (error: any) {
console.error(error)
output.setValue(error.message!)
}
}
@@ -116,12 +116,12 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
}
function debounce<T extends (...args: any[]) => any>(fn: T, delay = 300): T {
let prevTimer: number | null = null
let prevTimer: ReturnType<typeof setTimeout> | null = null
return ((...args: any[]) => {
if (prevTimer) {
clearTimeout(prevTimer)
}
prevTimer = window.setTimeout(() => {
prevTimer = globalThis.setTimeout(() => {
fn(...args)
prevTimer = null
}, delay)

View File

@@ -1,5 +1,5 @@
import { createApp, defineComponent, reactive } from 'vue'
import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
export { VueJSXPluginOptions }
@@ -107,5 +107,5 @@ const App = defineComponent({
})
export function initOptions() {
createApp(App).mount(document.getElementById('header')!)
createApp(App).mount(document.querySelector('#header')!)
}

View File

@@ -1,5 +1,5 @@
import { defineConfig } from 'vite'
import VueJSX from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {

2238
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,19 +1,19 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "preserve",
"jsxImportSource": "vue",
"lib": ["ES2023", "DOM", "DOM.Iterable"],
"customConditions": ["dev"],
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"types": ["vitest/globals"],
"allowJs": true,
"strict": true,
"noUnusedLocals": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "vue",
"types": ["vitest/globals"],
"skipLibCheck": true,
"noEmit": true,
"customConditions": ["dev"]
"esModuleInterop": true,
"skipLibCheck": true
}
}

View File

@@ -13,5 +13,5 @@ export default defineConfig({
exports: {
devExports: 'dev',
},
fixedExtension: true,
publint: 'ci-only',
})

View File

@@ -1,5 +1,5 @@
import { defineConfig } from 'vitest/config'
import { babel } from '@rollup/plugin-babel'
import { defineConfig } from 'vitest/config'
import Jsx from './packages/babel-plugin-jsx/src'
export default defineConfig({
@@ -16,7 +16,10 @@ export default defineConfig({
plugins: [
[
Jsx,
{ optimize: true, isCustomElement: (tag: string) => /^x-/.test(tag) },
{
optimize: true,
isCustomElement: (tag: string) => tag.startsWith('x-'),
},
],
],
}),