refactor: lint

packages/jsx-explorer/package.json

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

packages/jsx-explorer/src/editor.worker.ts

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

packages/jsx-explorer/src/index.ts

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

packages/jsx-explorer/src/options.tsx

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

packages/jsx-explorer/vite.config.ts

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