images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-12-11 07:59:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: lint

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/babel-helper-vue-transform-on/index.d.mts
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' }

3
packages/babel-helper-vue-transform-on/index.mjs
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' }

12
packages/babel-helper-vue-transform-on/package.json
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"
}
}

14
packages/babel-plugin-jsx/README-zh_CN.md
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 () => (
<>

12
packages/babel-plugin-jsx/README.md
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 () => (
<>

58
packages/babel-plugin-jsx/package.json
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
}
}
}

41
packages/babel-plugin-jsx/src/index.ts
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(
(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)
}

4
packages/babel-plugin-jsx/src/interface.ts
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

5
packages/babel-plugin-jsx/src/parseDirectives.ts
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)
}

2
packages/babel-plugin-jsx/src/patchFlags.ts
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,

4
packages/babel-plugin-jsx/src/slotFlags.ts
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

4
packages/babel-plugin-jsx/src/sugar-fragment.ts
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>,

18
packages/babel-plugin-jsx/src/transform-vue-jsx.ts
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()}`,

29
packages/babel-plugin-jsx/src/utils.ts
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) {

25
packages/babel-plugin-jsx/test/index.test.tsx
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 (

2
packages/babel-plugin-jsx/test/v-model.test.tsx
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(

44
packages/babel-plugin-resolve-type/package.json
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"
},

35
packages/babel-plugin-resolve-type/src/index.ts
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,12 +155,10 @@ const plugin: (
ctx!.propsTypeDecl = getTypeAnnotation(props.left)
}
ctx!.propsRuntimeDefaults = props.right
} else if (generics) {
ctx!.propsTypeDecl = resolveTypeReference(generics)
} else {
if (generics) {
ctx!.propsTypeDecl = resolveTypeReference(generics)
} else {
ctx!.propsTypeDecl = getTypeAnnotation(props)
}
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)
)
}

2
packages/jsx-explorer/package.json
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",

2
packages/jsx-explorer/src/editor.worker.ts
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') {

30
packages/jsx-explorer/src/index.ts
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)

4
packages/jsx-explorer/src/options.tsx
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')!)
}

2
packages/jsx-explorer/vite.config.ts
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: {