build: use vue-tsc to generate dts (#16111)

* build: use vue-tsc to generate dts

* reduce inline type declaration

* fix: type checking failed

* apply suggestions from code review

* address PR comments

internal/build/package.json

@@ -33,7 +33,6 @@
     "lodash": "^4.17.21",
     "rollup": "^2.75.7",
     "rollup-plugin-esbuild": "^4.9.1",
-    "ts-morph": "^14.0.0",
     "unplugin-vue-macros": "^0.11.2"
   },
   "devDependencies": {

internal/build/src/tasks/types-definitions.ts

@@ -1,158 +1,25 @@
-import process from 'process'
 import path from 'path'
-import { mkdir, readFile, writeFile } from 'fs/promises'
-import consola from 'consola'
-import * as vueCompiler from 'vue/compiler-sfc'
+import { readFile, writeFile } from 'fs/promises'
 import glob from 'fast-glob'
-import chalk from 'chalk'
-import { Project } from 'ts-morph'
-import {
-  buildOutput,
-  epRoot,
-  excludeFiles,
-  pkgRoot,
-  projRoot,
-} from '@element-plus/build-utils'
-import { pathRewriter } from '../utils'
-import type { CompilerOptions, SourceFile } from 'ts-morph'
+import { copy, remove } from 'fs-extra'
+import { buildOutput } from '@element-plus/build-utils'
+import { pathRewriter, run } from '../utils'
 
-const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.web.json')
-const outDir = path.resolve(buildOutput, 'types')
-
-/**
- * fork = require( https://github.com/egoist/vue-dts-gen/blob/main/src/index.ts
- */
 export const generateTypesDefinitions = async () => {
-  const compilerOptions: CompilerOptions = {
-    emitDeclarationOnly: true,
-    outDir,
-    baseUrl: projRoot,
-    preserveSymlinks: true,
-    skipLibCheck: true,
-    noImplicitAny: false,
-  }
-  const project = new Project({
-    compilerOptions,
-    tsConfigFilePath: TSCONFIG_PATH,
-    skipAddingFilesFromTsConfig: true,
-  })
-
-  const sourceFiles = await addSourceFiles(project)
-  consola.success('Added source files')
-
-  typeCheck(project)
-  consola.success('Type check passed!')
-
-  await project.emit({
-    emitOnlyDtsFiles: true,
-  })
-
-  const tasks = sourceFiles.map(async (sourceFile) => {
-    const relativePath = path.relative(pkgRoot, sourceFile.getFilePath())
-    consola.trace(
-      chalk.yellow(
-        `Generating definition for file: ${chalk.bold(relativePath)}`
-      )
-    )
-
-    const emitOutput = sourceFile.getEmitOutput()
-    const emitFiles = emitOutput.getOutputFiles()
-    if (emitFiles.length === 0) {
-      throw new Error(`Emit no file: ${chalk.bold(relativePath)}`)
-    }
-
-    const subTasks = emitFiles.map(async (outputFile) => {
-      const filepath = outputFile.getFilePath()
-      await mkdir(path.dirname(filepath), {
-        recursive: true,
-      })
-
-      await writeFile(
-        filepath,
-        pathRewriter('esm')(outputFile.getText()),
-        'utf8'
-      )
-
-      consola.success(
-        chalk.green(
-          `Definition for file: ${chalk.bold(relativePath)} generated`
-        )
-      )
-    })
-
-    await Promise.all(subTasks)
-  })
-
-  await Promise.all(tasks)
-}
-
-async function addSourceFiles(project: Project) {
-  project.addSourceFileAtPath(path.resolve(projRoot, 'typings/env.d.ts'))
-
-  const globSourceFile = '**/*.{js?(x),ts?(x),vue}'
-  const filePaths = excludeFiles(
-    await glob([globSourceFile, '!element-plus/**/*'], {
-      cwd: pkgRoot,
-      absolute: true,
-      onlyFiles: true,
-    })
+  await run(
+    'npx vue-tsc -p tsconfig.web.json --declaration --emitDeclarationOnly --declarationDir dist/types'
   )
-  const epPaths = excludeFiles(
-    await glob(globSourceFile, {
-      cwd: epRoot,
-      onlyFiles: true,
-    })
-  )
-
-  const sourceFiles: SourceFile[] = []
-  await Promise.all([
-    ...filePaths.map(async (file) => {
-      if (file.endsWith('.vue')) {
-        const content = await readFile(file, 'utf-8')
-        const hasTsNoCheck = content.includes('@ts-nocheck')
-
-        const sfc = vueCompiler.parse(content)
-        const { script, scriptSetup } = sfc.descriptor
-        if (script || scriptSetup) {
-          let content =
-            (hasTsNoCheck ? '// @ts-nocheck\n' : '') + (script?.content ?? '')
-
-          if (scriptSetup) {
-            const compiled = vueCompiler.compileScript(sfc.descriptor, {
-              id: 'xxx',
-            })
-            content += compiled.content
-          }
-
-          const lang = scriptSetup?.lang || script?.lang || 'js'
-          const sourceFile = project.createSourceFile(
-            `${path.relative(process.cwd(), file)}.${lang}`,
-            content
-          )
-          sourceFiles.push(sourceFile)
-        }
-      } else {
-        const sourceFile = project.addSourceFileAtPath(file)
-        sourceFiles.push(sourceFile)
-      }
-    }),
-    ...epPaths.map(async (file) => {
-      const content = await readFile(path.resolve(epRoot, file), 'utf-8')
-      sourceFiles.push(
-        project.createSourceFile(path.resolve(pkgRoot, file), content)
-      )
-    }),
-  ])
-
-  return sourceFiles
-}
-
-function typeCheck(project: Project) {
-  const diagnostics = project.getPreEmitDiagnostics()
-  if (diagnostics.length > 0) {
-    consola.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
-    const err = new Error('Failed to generate dts.')
-    consola.error(err)
-    throw err
-  }
+  const typesDir = path.join(buildOutput, 'types', 'packages')
+  const filePaths = await glob(`**/*.d.ts`, {
+    cwd: typesDir,
+    absolute: true,
+  })
+  const rewriteTasks = filePaths.map(async (filePath) => {
+    const content = await readFile(filePath, 'utf8')
+    await writeFile(filePath, pathRewriter('esm')(content), 'utf8')
+  })
+  await Promise.all(rewriteTasks)
+  const sourceDir = path.join(typesDir, 'element-plus')
+  await copy(sourceDir, typesDir)
+  await remove(sourceDir)
 }

package.json

@@ -109,7 +109,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
-    "ts-morph": "^14.0.0",
     "tsx": "^4.7.1",
     "type-fest": "^2.14.0",
     "typescript": "^4.7.4",
@@ -118,7 +117,7 @@
     "vitest": "1.6.0",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^1.8.27"
   },
   "engines": {
     "node": ">= 18"

packages/components/affix/index.ts

@@ -1,8 +1,7 @@
 import { withInstall } from '@element-plus/utils'
-
 import Affix from './src/affix.vue'
-
-export const ElAffix = withInstall(Affix)
+import type { SFCWithInstall } from '@element-plus/utils'
+export const ElAffix: SFCWithInstall<typeof Affix> = withInstall(Affix)
 export default ElAffix
 
 export * from './src/affix'

packages/components/alert/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@element-plus/utils'
-
 import Alert from './src/alert.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElAlert = withInstall(Alert)
+export const ElAlert: SFCWithInstall<typeof Alert> = withInstall(Alert)
 export default ElAlert
 
 export * from './src/alert'

packages/components/anchor/index.ts

@@ -1,11 +1,15 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Anchor from './src/anchor.vue'
 import AnchorLink from './src/anchor-link.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElAnchor = withInstall(Anchor, {
+export const ElAnchor: SFCWithInstall<typeof Anchor> & {
+  AnchorLink: typeof AnchorLink
+} = withInstall(Anchor, {
   AnchorLink,
 })
-export const ElAnchorLink = withNoopInstall(AnchorLink)
+export const ElAnchorLink: SFCWithInstall<typeof AnchorLink> =
+  withNoopInstall(AnchorLink)
 export default ElAnchor
 
 export * from './src/anchor'

packages/components/autocomplete/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import Autocomplete from './src/autocomplete.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElAutocomplete = withInstall(Autocomplete)
+export const ElAutocomplete: SFCWithInstall<typeof Autocomplete> =
+  withInstall(Autocomplete)
 
 export default ElAutocomplete
 

packages/components/avatar/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Avatar from './src/avatar.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElAvatar = withInstall(Avatar)
+export const ElAvatar: SFCWithInstall<typeof Avatar> = withInstall(Avatar)
 export default ElAvatar
 
 export * from './src/avatar'

packages/components/backtop/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@element-plus/utils'
-
 import Backtop from './src/backtop.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElBacktop = withInstall(Backtop)
+export const ElBacktop: SFCWithInstall<typeof Backtop> = withInstall(Backtop)
 export default ElBacktop
 
 export * from './src/backtop'

packages/components/badge/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@element-plus/utils'
-
 import Badge from './src/badge.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElBadge = withInstall(Badge)
+export const ElBadge: SFCWithInstall<typeof Badge> = withInstall(Badge)
 export default ElBadge
 
 export * from './src/badge'

packages/components/breadcrumb/index.ts

@@ -2,11 +2,15 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 
 import Breadcrumb from './src/breadcrumb.vue'
 import BreadcrumbItem from './src/breadcrumb-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElBreadcrumb = withInstall(Breadcrumb, {
+export const ElBreadcrumb: SFCWithInstall<typeof Breadcrumb> & {
+  BreadcrumbItem: typeof BreadcrumbItem
+} = withInstall(Breadcrumb, {
   BreadcrumbItem,
 })
-export const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem)
+export const ElBreadcrumbItem: SFCWithInstall<typeof BreadcrumbItem> =
+  withNoopInstall(BreadcrumbItem)
 export default ElBreadcrumb
 
 export * from './src/breadcrumb'

packages/components/button/index.ts

@@ -1,11 +1,15 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Button from './src/button.vue'
 import ButtonGroup from './src/button-group.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElButton = withInstall(Button, {
+export const ElButton: SFCWithInstall<typeof Button> & {
+  ButtonGroup: typeof ButtonGroup
+} = withInstall(Button, {
   ButtonGroup,
 })
-export const ElButtonGroup = withNoopInstall(ButtonGroup)
+export const ElButtonGroup: SFCWithInstall<typeof ButtonGroup> =
+  withNoopInstall(ButtonGroup)
 export default ElButton
 
 export * from './src/button'

packages/components/calendar/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Calendar from './src/calendar.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCalendar = withInstall(Calendar)
+export const ElCalendar: SFCWithInstall<typeof Calendar> = withInstall(Calendar)
 export default ElCalendar
 
 export * from './src/calendar'

packages/components/card/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Card from './src/card.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCard = withInstall(Card)
+export const ElCard: SFCWithInstall<typeof Card> = withInstall(Card)
 export default ElCard
 
 export * from './src/card'

packages/components/carousel/index.ts

@@ -1,14 +1,18 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Carousel from './src/carousel.vue'
 import CarouselItem from './src/carousel-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCarousel = withInstall(Carousel, {
+export const ElCarousel: SFCWithInstall<typeof Carousel> & {
+  CarouselItem: typeof CarouselItem
+} = withInstall(Carousel, {
   CarouselItem,
 })
 
 export default ElCarousel
 
-export const ElCarouselItem = withNoopInstall(CarouselItem)
+export const ElCarouselItem: SFCWithInstall<typeof CarouselItem> =
+  withNoopInstall(CarouselItem)
 
 export * from './src/carousel'
 export * from './src/carousel-item'

packages/components/cascader-panel/__tests__/cascader-panel.test.tsx

@@ -138,7 +138,7 @@ describe('CascaderPanel.vue', () => {
         v-model={value.value}
         options={NORMAL_OPTIONS}
         onChange={handleChange}
-        onExpandChange={handleExpandChange}
+        onExpand-change={handleExpandChange}
       />
     ))
 
@@ -223,7 +223,7 @@ describe('CascaderPanel.vue', () => {
         v-model={value.value}
         options={DISABLED_OPTIONS}
         onChange={handleChange}
-        onExpandChange={handleExpandChange}
+        onExpand-change={handleExpandChange}
       />
     ))
 

packages/components/cascader-panel/index.ts

@@ -1,15 +1,11 @@
+import { withInstall } from '@element-plus/utils'
 import CascaderPanel from './src/index.vue'
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-CascaderPanel.install = (app: App): void => {
-  app.component(CascaderPanel.name!, CascaderPanel)
-}
+export const ElCascaderPanel: SFCWithInstall<typeof CascaderPanel> =
+  withInstall(CascaderPanel)
 
-const _CascaderPanel = CascaderPanel as SFCWithInstall<typeof CascaderPanel>
-
-export default _CascaderPanel
-export const ElCascaderPanel = _CascaderPanel
+export default ElCascaderPanel
 export * from './src/types'
 export * from './src/config'
 export * from './src/instance'

packages/components/cascader/index.ts

@@ -1,15 +1,10 @@
+import { withInstall } from '@element-plus/utils'
 import Cascader from './src/cascader.vue'
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-Cascader.install = (app: App): void => {
-  app.component(Cascader.name!, Cascader)
-}
+export const ElCascader: SFCWithInstall<typeof Cascader> = withInstall(Cascader)
 
-const _Cascader = Cascader as SFCWithInstall<typeof Cascader>
-
-export default _Cascader
-export const ElCascader = _Cascader
+export default ElCascader
 
 export * from './src/cascader'
 export * from './src/instances'

packages/components/check-tag/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import CheckTag from './src/check-tag.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCheckTag = withInstall(CheckTag)
+export const ElCheckTag: SFCWithInstall<typeof CheckTag> = withInstall(CheckTag)
 export default ElCheckTag
 
 export * from './src/check-tag'

packages/components/checkbox/index.ts

@@ -3,15 +3,21 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'
 import CheckboxGroup from './src/checkbox-group.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCheckbox = withInstall(Checkbox, {
+export const ElCheckbox: SFCWithInstall<typeof Checkbox> & {
+  CheckboxButton: typeof CheckboxButton
+  CheckboxGroup: typeof CheckboxGroup
+} = withInstall(Checkbox, {
   CheckboxButton,
   CheckboxGroup,
 })
 export default ElCheckbox
 
-export const ElCheckboxButton = withNoopInstall(CheckboxButton)
-export const ElCheckboxGroup = withNoopInstall(CheckboxGroup)
+export const ElCheckboxButton: SFCWithInstall<typeof CheckboxButton> =
+  withNoopInstall(CheckboxButton)
+export const ElCheckboxGroup: SFCWithInstall<typeof CheckboxGroup> =
+  withNoopInstall(CheckboxGroup)
 
 export * from './src/checkbox-group'
 export * from './src/checkbox'

packages/components/col/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Col from './src/col.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCol = withInstall(Col)
+export const ElCol: SFCWithInstall<typeof Col> = withInstall(Col)
 export default ElCol
 
 export * from './src/col'

packages/components/collapse-transition/index.ts

@@ -1,14 +1,8 @@
+import { withInstall } from '@element-plus/utils'
 import CollapseTransition from './src/collapse-transition.vue'
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-CollapseTransition.install = (app: App): void => {
-  app.component(CollapseTransition.name!, CollapseTransition)
-}
+export const ElCollapseTransition: SFCWithInstall<typeof CollapseTransition> =
+  withInstall(CollapseTransition)
 
-const _CollapseTransition = CollapseTransition as SFCWithInstall<
-  typeof CollapseTransition
->
-
-export default _CollapseTransition
-export const ElCollapseTransition = _CollapseTransition
+export default ElCollapseTransition

packages/components/collapse/index.ts

@@ -2,12 +2,16 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 
 import Collapse from './src/collapse.vue'
 import CollapseItem from './src/collapse-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCollapse = withInstall(Collapse, {
+export const ElCollapse: SFCWithInstall<typeof Collapse> & {
+  CollapseItem: typeof CollapseItem
+} = withInstall(Collapse, {
   CollapseItem,
 })
 export default ElCollapse
-export const ElCollapseItem = withNoopInstall(CollapseItem)
+export const ElCollapseItem: SFCWithInstall<typeof CollapseItem> =
+  withNoopInstall(CollapseItem)
 
 export * from './src/collapse'
 export * from './src/collapse-item'

packages/components/color-picker/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import ColorPicker from './src/color-picker.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElColorPicker = withInstall(ColorPicker)
+export const ElColorPicker: SFCWithInstall<typeof ColorPicker> =
+  withInstall(ColorPicker)
 export default ElColorPicker
 
 export * from './src/color-picker'

packages/components/config-provider/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import ConfigProvider from './src/config-provider'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElConfigProvider = withInstall(ConfigProvider)
+export const ElConfigProvider: SFCWithInstall<typeof ConfigProvider> =
+  withInstall(ConfigProvider)
 export default ElConfigProvider
 
 export * from './src/config-provider'

packages/components/container/index.ts

@@ -5,8 +5,14 @@ import Aside from './src/aside.vue'
 import Footer from './src/footer.vue'
 import Header from './src/header.vue'
 import Main from './src/main.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElContainer = withInstall(Container, {
+export const ElContainer: SFCWithInstall<typeof Container> & {
+  Aside: typeof Aside
+  Footer: typeof Footer
+  Header: typeof Header
+  Main: typeof Main
+} = withInstall(Container, {
   Aside,
   Footer,
   Header,
@@ -14,10 +20,10 @@ export const ElContainer = withInstall(Container, {
 })
 
 export default ElContainer
-export const ElAside = withNoopInstall(Aside)
-export const ElFooter = withNoopInstall(Footer)
-export const ElHeader = withNoopInstall(Header)
-export const ElMain = withNoopInstall(Main)
+export const ElAside: SFCWithInstall<typeof Aside> = withNoopInstall(Aside)
+export const ElFooter: SFCWithInstall<typeof Footer> = withNoopInstall(Footer)
+export const ElHeader: SFCWithInstall<typeof Header> = withNoopInstall(Header)
+export const ElMain: SFCWithInstall<typeof Main> = withNoopInstall(Main)
 
 export type ContainerInstance = InstanceType<typeof Container>
 export type AsideInstance = InstanceType<typeof Aside>

packages/components/countdown/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import Countdown from './src/countdown.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElCountdown = withInstall(Countdown)
+export const ElCountdown: SFCWithInstall<typeof Countdown> =
+  withInstall(Countdown)
 export default ElCountdown
 
 export * from './src/countdown'

packages/components/date-picker/index.ts

@@ -1,16 +1,12 @@
+import { withInstall } from '@element-plus/utils'
 import DatePicker from './src/date-picker'
 
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-const _DatePicker = DatePicker as SFCWithInstall<typeof DatePicker>
+export const ElDatePicker: SFCWithInstall<typeof DatePicker> =
+  withInstall(DatePicker)
 
-_DatePicker.install = (app: App) => {
-  app.component(_DatePicker.name!, _DatePicker)
-}
-
-export default _DatePicker
-export const ElDatePicker = _DatePicker
+export default ElDatePicker
 export * from './src/constants'
 export * from './src/props/date-picker'
 export type { DatePickerInstance } from './src/instance'

packages/components/descriptions/index.ts

@@ -2,12 +2,16 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 
 import Descriptions from './src/description.vue'
 import DescriptionsItem from './src/description-item'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElDescriptions = withInstall(Descriptions, {
+export const ElDescriptions: SFCWithInstall<typeof Descriptions> & {
+  DescriptionsItem: typeof DescriptionsItem
+} = withInstall(Descriptions, {
   DescriptionsItem,
 })
 
-export const ElDescriptionsItem = withNoopInstall(DescriptionsItem)
+export const ElDescriptionsItem: SFCWithInstall<typeof DescriptionsItem> =
+  withNoopInstall(DescriptionsItem)
 
 export default ElDescriptions
 

packages/components/dialog/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Dialog from './src/dialog.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElDialog = withInstall(Dialog)
+export const ElDialog: SFCWithInstall<typeof Dialog> = withInstall(Dialog)
 export default ElDialog
 
 export * from './src/use-dialog'

packages/components/divider/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Divider from './src/divider.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElDivider = withInstall(Divider)
+export const ElDivider: SFCWithInstall<typeof Divider> = withInstall(Divider)
 export default ElDivider
 
 export * from './src/divider'

packages/components/drawer/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Drawer from './src/drawer.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElDrawer = withInstall(Drawer)
+export const ElDrawer: SFCWithInstall<typeof Drawer> = withInstall(Drawer)
 export default ElDrawer
 
 export * from './src/drawer'

packages/components/dropdown/index.ts

@@ -3,14 +3,20 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Dropdown from './src/dropdown.vue'
 import DropdownItem from './src/dropdown-item.vue'
 import DropdownMenu from './src/dropdown-menu.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElDropdown = withInstall(Dropdown, {
+export const ElDropdown: SFCWithInstall<typeof Dropdown> & {
+  DropdownItem: typeof DropdownItem
+  DropdownMenu: typeof DropdownMenu
+} = withInstall(Dropdown, {
   DropdownItem,
   DropdownMenu,
 })
 export default ElDropdown
-export const ElDropdownItem = withNoopInstall(DropdownItem)
-export const ElDropdownMenu = withNoopInstall(DropdownMenu)
+export const ElDropdownItem: SFCWithInstall<typeof DropdownItem> =
+  withNoopInstall(DropdownItem)
+export const ElDropdownMenu: SFCWithInstall<typeof DropdownMenu> =
+  withNoopInstall(DropdownMenu)
 export * from './src/dropdown'
 export * from './src/instance'
 export * from './src/tokens'

packages/components/empty/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Empty from './src/empty.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElEmpty = withInstall(Empty)
+export const ElEmpty: SFCWithInstall<typeof Empty> = withInstall(Empty)
 export default ElEmpty
 
 export * from './src/empty'

packages/components/form/index.ts

@@ -1,12 +1,16 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Form from './src/form.vue'
 import FormItem from './src/form-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElForm = withInstall(Form, {
+export const ElForm: SFCWithInstall<typeof Form> & {
+  FormItem: typeof FormItem
+} = withInstall(Form, {
   FormItem,
 })
 export default ElForm
-export const ElFormItem = withNoopInstall(FormItem)
+export const ElFormItem: SFCWithInstall<typeof FormItem> =
+  withNoopInstall(FormItem)
 
 export * from './src/form'
 export * from './src/form-item'

packages/components/icon/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Icon from './src/icon.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElIcon = withInstall(Icon)
+export const ElIcon: SFCWithInstall<typeof Icon> = withInstall(Icon)
 export default ElIcon
 
 export * from './src/icon'

packages/components/image-viewer/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import ImageViewer from './src/image-viewer.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElImageViewer = withInstall(ImageViewer)
+export const ElImageViewer: SFCWithInstall<typeof ImageViewer> =
+  withInstall(ImageViewer)
 export default ElImageViewer
 
 export * from './src/image-viewer'

packages/components/image/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Image from './src/image.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElImage = withInstall(Image)
+export const ElImage: SFCWithInstall<typeof Image> = withInstall(Image)
 export default ElImage
 
 export * from './src/image'

packages/components/input-number/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import InputNumber from './src/input-number.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElInputNumber = withInstall(InputNumber)
+export const ElInputNumber: SFCWithInstall<typeof InputNumber> =
+  withInstall(InputNumber)
 
 export default ElInputNumber
 export * from './src/input-number'

packages/components/input/__tests__/input.test.tsx

@@ -146,7 +146,9 @@ describe('Input.vue', () => {
   })
 
   test('rows', () => {
-    const wrapper = mount(() => <Input type="textarea" rows={3} />)
+    const wrapper = mount(() => {
+      return <Input type="textarea" rows={3} />
+    })
     expect(wrapper.find('textarea').element.rows).toEqual(3)
   })
 

packages/components/input/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@element-plus/utils'
-
 import Input from './src/input.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElInput = withInstall(Input)
+export const ElInput: SFCWithInstall<typeof Input> = withInstall(Input)
 export default ElInput
 
 export * from './src/input'

packages/components/link/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Link from './src/link.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElLink = withInstall(Link)
+export const ElLink: SFCWithInstall<typeof Link> = withInstall(Link)
 export default ElLink
 
 export * from './src/link'

packages/components/menu/index.ts

@@ -4,16 +4,24 @@ import Menu from './src/menu'
 import MenuItem from './src/menu-item.vue'
 import MenuItemGroup from './src/menu-item-group.vue'
 import SubMenu from './src/sub-menu'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElMenu = withInstall(Menu, {
+export const ElMenu: SFCWithInstall<typeof Menu> & {
+  MenuItem: typeof MenuItem
+  MenuItemGroup: typeof MenuItemGroup
+  SubMenu: typeof SubMenu
+} = withInstall(Menu, {
   MenuItem,
   MenuItemGroup,
   SubMenu,
 })
 export default ElMenu
-export const ElMenuItem = withNoopInstall(MenuItem)
-export const ElMenuItemGroup = withNoopInstall(MenuItemGroup)
-export const ElSubMenu = withNoopInstall(SubMenu)
+export const ElMenuItem: SFCWithInstall<typeof MenuItem> =
+  withNoopInstall(MenuItem)
+export const ElMenuItemGroup: SFCWithInstall<typeof MenuItemGroup> =
+  withNoopInstall(MenuItemGroup)
+export const ElSubMenu: SFCWithInstall<typeof SubMenu> =
+  withNoopInstall(SubMenu)
 
 export * from './src/menu'
 export * from './src/menu-item'

packages/components/page-header/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import PageHeader from './src/page-header.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElPageHeader = withInstall(PageHeader)
+export const ElPageHeader: SFCWithInstall<typeof PageHeader> =
+  withInstall(PageHeader)
 export default ElPageHeader
 
 export * from './src/page-header'

packages/components/pagination/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import Pagination from './src/pagination'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElPagination = withInstall(Pagination)
+export const ElPagination: SFCWithInstall<typeof Pagination> =
+  withInstall(Pagination)
 export default ElPagination
 
 export * from './src/pagination'

packages/components/popconfirm/__tests__/popconfirm.test.tsx

@@ -17,7 +17,6 @@ describe('Popconfirm.vue', () => {
     const wrapper = mount(() => (
       <>
         <Popconfirm
-          attachTo="body"
           v-slots={{
             reference: () => <div class="reference">{AXIOM}</div>,
           }}
@@ -46,7 +45,6 @@ describe('Popconfirm.vue', () => {
       mount(() => (
         <>
           <Popconfirm
-            attachTo="body"
             v-slots={{
               reference: () => <div class="reference">{AXIOM}</div>,
             }}
@@ -66,7 +64,6 @@ describe('Popconfirm.vue', () => {
       mount(() => (
         <>
           <Popconfirm
-            attachTo="body"
             teleported={false}
             v-slots={{
               reference: () => <div class="reference">{AXIOM}</div>,

packages/components/popconfirm/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import Popconfirm from './src/popconfirm.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElPopconfirm = withInstall(Popconfirm)
+export const ElPopconfirm: SFCWithInstall<typeof Popconfirm> =
+  withInstall(Popconfirm)
 export default ElPopconfirm
 
 export * from './src/popconfirm'

packages/components/popover/__tests__/popover.test.tsx

@@ -76,6 +76,8 @@ describe('Popover.vue', () => {
       <Popover
         content={content}
         teleported={false}
+        // type checking failed as `virtualRef` is a fallthrough attribute
+        // @ts-ignore
         virtualRef={virtualRef}
         virtualTriggering
       />

packages/components/popover/index.ts

@@ -2,13 +2,14 @@ import { withInstall, withInstallDirective } from '@element-plus/utils'
 
 import Popover from './src/popover.vue'
 import PopoverDirective, { VPopover } from './src/directive'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElPopoverDirective = withInstallDirective(
-  PopoverDirective,
-  VPopover
-)
+export const ElPopoverDirective: SFCWithInstall<typeof PopoverDirective> =
+  withInstallDirective(PopoverDirective, VPopover)
 
-export const ElPopover = withInstall(Popover, {
+export const ElPopover: SFCWithInstall<typeof Popover> & {
+  directive: typeof ElPopoverDirective
+} = withInstall(Popover, {
   directive: ElPopoverDirective,
 })
 export default ElPopover

packages/components/popper/index.ts

@@ -4,10 +4,11 @@ import Popper from './src/popper.vue'
 import ElPopperArrow from './src/arrow.vue'
 import ElPopperTrigger from './src/trigger.vue'
 import ElPopperContent from './src/content.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
 export { ElPopperArrow, ElPopperTrigger, ElPopperContent }
 
-export const ElPopper = withInstall(Popper)
+export const ElPopper: SFCWithInstall<typeof Popper> = withInstall(Popper)
 export default ElPopper
 
 export * from './src/popper'

packages/components/progress/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Progress from './src/progress.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElProgress = withInstall(Progress)
+export const ElProgress: SFCWithInstall<typeof Progress> = withInstall(Progress)
 export default ElProgress
 
 export * from './src/progress'

packages/components/radio/index.ts

@@ -3,14 +3,20 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Radio from './src/radio.vue'
 import RadioButton from './src/radio-button.vue'
 import RadioGroup from './src/radio-group.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElRadio = withInstall(Radio, {
+export const ElRadio: SFCWithInstall<typeof Radio> & {
+  RadioButton: typeof RadioButton
+  RadioGroup: typeof RadioGroup
+} = withInstall(Radio, {
   RadioButton,
   RadioGroup,
 })
 export default ElRadio
-export const ElRadioGroup = withNoopInstall(RadioGroup)
-export const ElRadioButton = withNoopInstall(RadioButton)
+export const ElRadioGroup: SFCWithInstall<typeof RadioGroup> =
+  withNoopInstall(RadioGroup)
+export const ElRadioButton: SFCWithInstall<typeof RadioButton> =
+  withNoopInstall(RadioButton)
 
 export * from './src/radio'
 export * from './src/radio-group'

packages/components/rate/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Rate from './src/rate.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElRate = withInstall(Rate)
+export const ElRate: SFCWithInstall<typeof Rate> = withInstall(Rate)
 export default ElRate
 
 export * from './src/rate'

packages/components/result/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Result from './src/result.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElResult = withInstall(Result)
+export const ElResult: SFCWithInstall<typeof Result> = withInstall(Result)
 
 export default ElResult
 

packages/components/row/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Row from './src/row.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElRow = withInstall(Row)
+export const ElRow: SFCWithInstall<typeof Row> = withInstall(Row)
 export default ElRow
 
 export * from './src/row'

packages/components/scrollbar/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
 
 import Scrollbar from './src/scrollbar.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElScrollbar = withInstall(Scrollbar)
+export const ElScrollbar: SFCWithInstall<typeof Scrollbar> =
+  withInstall(Scrollbar)
 export default ElScrollbar
 
 export * from './src/util'

packages/components/select-v2/index.ts

@@ -1,15 +1,9 @@
+import { withInstall } from '@element-plus/utils'
 import Select from './src/select.vue'
 
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-Select.install = (app: App): void => {
-  app.component(Select.name!, Select)
-}
-
-const _Select = Select as SFCWithInstall<typeof Select>
-
-export default _Select
-export const ElSelectV2 = _Select
+export const ElSelectV2: SFCWithInstall<typeof Select> = withInstall(Select)
+export default ElSelectV2
 
 export * from './src/token'

packages/components/select/index.ts

@@ -3,13 +3,18 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Select from './src/select.vue'
 import Option from './src/option.vue'
 import OptionGroup from './src/option-group.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSelect = withInstall(Select, {
+export const ElSelect: SFCWithInstall<typeof Select> & {
+  Option: typeof Option
+  OptionGroup: typeof OptionGroup
+} = withInstall(Select, {
   Option,
   OptionGroup,
 })
 export default ElSelect
-export const ElOption = withNoopInstall(Option)
-export const ElOptionGroup = withNoopInstall(OptionGroup)
+export const ElOption: SFCWithInstall<typeof Option> = withNoopInstall(Option)
+export const ElOptionGroup: SFCWithInstall<typeof OptionGroup> =
+  withNoopInstall(OptionGroup)
 
 export * from './src/token'

packages/components/skeleton/index.ts

@@ -2,11 +2,15 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 
 import Skeleton from './src/skeleton.vue'
 import SkeletonItem from './src/skeleton-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSkeleton = withInstall(Skeleton, {
+export const ElSkeleton: SFCWithInstall<typeof Skeleton> & {
+  SkeletonItem: typeof SkeletonItem
+} = withInstall(Skeleton, {
   SkeletonItem,
 })
-export const ElSkeletonItem = withNoopInstall(SkeletonItem)
+export const ElSkeletonItem: SFCWithInstall<typeof SkeletonItem> =
+  withNoopInstall(SkeletonItem)
 export default ElSkeleton
 
 export * from './src/skeleton'

packages/components/slider/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Slider from './src/slider.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSlider = withInstall(Slider)
+export const ElSlider: SFCWithInstall<typeof Slider> = withInstall(Slider)
 export default ElSlider
 
 export * from './src/slider'

packages/components/space/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Space from './src/space'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSpace = withInstall(Space)
+export const ElSpace: SFCWithInstall<typeof Space> = withInstall(Space)
 export default ElSpace
 
 export * from './src/space'

packages/components/statistic/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import Statistic from './src/statistic.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElStatistic = withInstall(Statistic)
+export const ElStatistic: SFCWithInstall<typeof Statistic> =
+  withInstall(Statistic)
 
 export default ElStatistic
 export * from './src/statistic'

packages/components/steps/index.ts

@@ -2,12 +2,15 @@ import { withInstall, withNoopInstall } from '@element-plus/utils'
 
 import Steps from './src/steps.vue'
 import Step from './src/item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSteps = withInstall(Steps, {
+export const ElSteps: SFCWithInstall<typeof Steps> & {
+  Step: typeof Step
+} = withInstall(Steps, {
   Step,
 })
 export default ElSteps
-export const ElStep = withNoopInstall(Step)
+export const ElStep: SFCWithInstall<typeof Step> = withNoopInstall(Step)
 
 export * from './src/item'
 export * from './src/steps'

packages/components/switch/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Switch from './src/switch.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElSwitch = withInstall(Switch)
+export const ElSwitch: SFCWithInstall<typeof Switch> = withInstall(Switch)
 export default ElSwitch
 
 export * from './src/switch'

packages/components/table-v2/index.ts

@@ -1,6 +1,7 @@
 import { withInstall } from '@element-plus/utils'
 import TableV2 from './src/table-v2'
 import AutoResizer from './src/components/auto-resizer'
+import type { SFCWithInstall } from '@element-plus/utils'
 
 export {
   Alignment as TableV2Alignment,
@@ -11,8 +12,9 @@ export { default as TableV2 } from './src/table-v2'
 export * from './src/auto-resizer'
 export { placeholderSign as TableV2Placeholder } from './src/private'
 
-export const ElTableV2 = withInstall(TableV2)
-export const ElAutoResizer = withInstall(AutoResizer)
+export const ElTableV2: SFCWithInstall<typeof TableV2> = withInstall(TableV2)
+export const ElAutoResizer: SFCWithInstall<typeof AutoResizer> =
+  withInstall(AutoResizer)
 
 export type {
   Column,

packages/components/table/index.ts

@@ -1,12 +1,16 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Table from './src/table.vue'
 import TableColumn from './src/tableColumn'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTable = withInstall(Table, {
+export const ElTable: SFCWithInstall<typeof Table> & {
+  TableColumn: typeof TableColumn
+} = withInstall(Table, {
   TableColumn,
 })
 export default ElTable
-export const ElTableColumn = withNoopInstall(TableColumn)
+export const ElTableColumn: SFCWithInstall<typeof TableColumn> =
+  withNoopInstall(TableColumn)
 
 export type TableInstance = InstanceType<typeof Table>
 

packages/components/tabs/index.ts

@@ -1,11 +1,15 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Tabs from './src/tabs'
 import TabPane from './src/tab-pane.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTabs = withInstall(Tabs, {
+export const ElTabs: SFCWithInstall<typeof Tabs> & {
+  TabPane: typeof TabPane
+} = withInstall(Tabs, {
   TabPane,
 })
-export const ElTabPane = withNoopInstall(TabPane)
+export const ElTabPane: SFCWithInstall<typeof TabPane> =
+  withNoopInstall(TabPane)
 export default ElTabs
 
 export * from './src/tabs'

packages/components/tag/__tests__/tag.test.tsx

@@ -52,6 +52,7 @@ describe('Tag.vue', () => {
   test('disableTransitions', () => {
     const wrapper = mount(() => <Tag disableTransitions={true} />)
     const vm = wrapper.vm
+    // FIXME: This check actually is useless as there is no the class `md-fade-center` in the code.
     expect(vm.$el.classList.contains('md-fade-center')).toEqual(false)
   })
 

packages/components/tag/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Tag from './src/tag.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTag = withInstall(Tag)
+export const ElTag: SFCWithInstall<typeof Tag> = withInstall(Tag)
 export default ElTag
 
 export * from './src/tag'

packages/components/teleport/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Teleport from './src/teleport.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTeleport = withInstall(Teleport)
+export const ElTeleport: SFCWithInstall<typeof Teleport> = withInstall(Teleport)
 
 export default ElTeleport
 

packages/components/text/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Text from './src/text.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElText = withInstall(Text)
+export const ElText: SFCWithInstall<typeof Text> = withInstall(Text)
 export default ElText
 
 export * from './src/text'

packages/components/time-picker/index.ts

@@ -1,20 +1,16 @@
+import { withInstall } from '@element-plus/utils'
 import TimePicker from './src/time-picker'
 import CommonPicker from './src/common/picker.vue'
 import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'
 
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
 export * from './src/utils'
 export * from './src/constants'
 export * from './src/common/props'
 
-const _TimePicker = TimePicker as SFCWithInstall<typeof TimePicker>
-
-_TimePicker.install = (app: App) => {
-  app.component(_TimePicker.name!, _TimePicker)
-}
+export const ElTimePicker: SFCWithInstall<typeof TimePicker> =
+  withInstall(TimePicker)
 
 export { CommonPicker, TimePickPanel }
-export default _TimePicker
-export const ElTimePicker = _TimePicker
+export default ElTimePicker

packages/components/time-select/__tests__/time-select.test.tsx

@@ -207,7 +207,11 @@ describe('TimeSelect', () => {
     it('specified id attachment', async () => {
       const wrapper = mount(() => (
         <ElFormItem label="Foobar" data-test-ref="item">
-          <TimeSelect id="foobar" />
+          <TimeSelect
+            // type checking failed as `id` is a fallthrough attribute
+            // @ts-ignore
+            id="foobar"
+          />
         </ElFormItem>
       ))
 

packages/components/time-select/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '@element-plus/utils'
-
 import TimeSelect from './src/time-select.vue'
 
-export const ElTimeSelect = withInstall(TimeSelect)
+import type { SFCWithInstall } from '@element-plus/utils'
+
+export const ElTimeSelect: SFCWithInstall<typeof TimeSelect> =
+  withInstall(TimeSelect)
 export default ElTimeSelect
 
 export * from './src/time-select'

packages/components/timeline/index.ts

@@ -1,12 +1,16 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Timeline from './src/timeline'
 import TimelineItem from './src/timeline-item.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTimeline = withInstall(Timeline, {
+export const ElTimeline: SFCWithInstall<typeof Timeline> & {
+  TimelineItem: typeof TimelineItem
+} = withInstall(Timeline, {
   TimelineItem,
 })
 export default ElTimeline
-export const ElTimelineItem = withNoopInstall(TimelineItem)
+export const ElTimelineItem: SFCWithInstall<typeof TimelineItem> =
+  withNoopInstall(TimelineItem)
 
 export * from './src/timeline'
 export * from './src/timeline-item'

packages/components/tooltip-v2/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import TooltipV2 from './src/tooltip.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTooltipV2 = withInstall(TooltipV2)
+export const ElTooltipV2: SFCWithInstall<typeof TooltipV2> =
+  withInstall(TooltipV2)
 export * from './src/arrow'
 export * from './src/content'
 export * from './src/root'

packages/components/tooltip/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Tooltip from './src/tooltip.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTooltip = withInstall(Tooltip)
+export const ElTooltip: SFCWithInstall<typeof Tooltip> = withInstall(Tooltip)
 export * from './src/tooltip'
 export * from './src/trigger'
 export * from './src/content'

packages/components/tour/index.ts

@@ -1,11 +1,15 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils'
 import Tour from './src/tour.vue'
 import TourStep from './src/step.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTour = withInstall(Tour, {
+export const ElTour: SFCWithInstall<typeof Tour> & {
+  TourStep: typeof TourStep
+} = withInstall(Tour, {
   TourStep,
 })
-export const ElTourStep = withNoopInstall(TourStep)
+export const ElTourStep: SFCWithInstall<typeof TourStep> =
+  withNoopInstall(TourStep)
 export default ElTour
 
 export * from './src/tour'

packages/components/transfer/index.ts

@@ -1,8 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 
 import Transfer from './src/transfer.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTransfer = withInstall(Transfer)
+export const ElTransfer: SFCWithInstall<typeof Transfer> = withInstall(Transfer)
 export default ElTransfer
 
 export * from './src/transfer'

packages/components/transfer/src/transfer-panel.vue

@@ -71,7 +71,7 @@ const props = defineProps(transferPanelProps)
 const emit = defineEmits(transferPanelEmits)
 const slots = useSlots()
 
-const OptionContent = ({ option }: { option: VNode | VNode[] }) => option
+const OptionContent = ({ option }: { option?: VNode | VNode[] }) => option
 
 const { t } = useLocale()
 const ns = useNamespace('transfer')

packages/components/tree-select/index.ts

@@ -1,13 +1,9 @@
+import { withInstall } from '@element-plus/utils'
 import TreeSelect from './src/tree-select.vue'
 
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-TreeSelect.install = (app: App): void => {
-  app.component(TreeSelect.name!, TreeSelect)
-}
+export const ElTreeSelect: SFCWithInstall<typeof TreeSelect> =
+  withInstall(TreeSelect)
 
-const _TreeSelect = TreeSelect as SFCWithInstall<typeof TreeSelect>
-
-export default _TreeSelect
-export const ElTreeSelect = _TreeSelect
+export default ElTreeSelect

packages/components/tree-v2/index.ts

@@ -1,5 +1,6 @@
 import { withInstall } from '@element-plus/utils'
 import TreeV2 from './src/tree.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElTreeV2 = withInstall(TreeV2)
+export const ElTreeV2: SFCWithInstall<typeof TreeV2> = withInstall(TreeV2)
 export default ElTreeV2

packages/components/tree/index.ts

@@ -1,14 +1,8 @@
+import { withInstall } from '@element-plus/utils'
 import Tree from './src/tree.vue'
 
-import type { App } from 'vue'
 import type { SFCWithInstall } from '@element-plus/utils'
 
-Tree.install = (app: App): void => {
-  app.component(Tree.name!, Tree)
-}
+export const ElTree: SFCWithInstall<typeof Tree> = withInstall(Tree)
 
-const _Tree = Tree as SFCWithInstall<typeof Tree>
-
-export default _Tree
-export const ElTree = _Tree
-export type { TreeInstance } from './src/instance'
+export default ElTree

packages/components/upload/index.ts

@@ -1,7 +1,8 @@
 import { withInstall } from '@element-plus/utils'
 import Upload from './src/upload.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElUpload = withInstall(Upload)
+export const ElUpload: SFCWithInstall<typeof Upload> = withInstall(Upload)
 export default ElUpload
 
 export * from './src/upload'

packages/components/virtual-list/__tests__/dynamic-size-grid.test.ts

@@ -2,7 +2,6 @@ import { nextTick, unref } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
 import makeScroll from '@element-plus/test-utils/make-scroll'
-import setupMock from '../setup-mock'
 import {
   CENTERED_ALIGNMENT,
   END_ALIGNMENT,
@@ -10,6 +9,7 @@ import {
   START_ALIGNMENT,
 } from '../src/defaults'
 import { DynamicSizeGrid } from '..'
+import setupMock from './setup-mock'
 
 import type { GridExposes } from '../src/types'
 

packages/components/virtual-list/__tests__/dynamic-size-list.test.ts

@@ -2,7 +2,6 @@
 import { nextTick } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
-import setupMock from '../setup-mock'
 import {
   END_ALIGNMENT,
   HORIZONTAL,
@@ -10,6 +9,7 @@ import {
   START_ALIGNMENT,
 } from '../src/defaults'
 import { DynamicSizeList } from '..'
+import setupMock from './setup-mock'
 
 import type { ListExposes } from '../src/types'
 type ListRef = ListExposes

packages/components/virtual-list/__tests__/fixed-size-grid.test.ts

@@ -2,7 +2,6 @@ import { nextTick, unref } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
 import makeScroll from '@element-plus/test-utils/make-scroll'
-import setupMock from '../setup-mock'
 import {
   CENTERED_ALIGNMENT,
   END_ALIGNMENT,
@@ -10,6 +9,7 @@ import {
   START_ALIGNMENT,
 } from '../src/defaults'
 import { FixedSizeGrid } from '..'
+import setupMock from './setup-mock'
 
 import type { GridExposes } from '../src/types'
 

packages/components/virtual-list/__tests__/fixed-size-list.test.ts

@@ -3,7 +3,6 @@ import { nextTick } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
 import makeScroll from '@element-plus/test-utils/make-scroll'
-import setupMock from '../setup-mock'
 import {
   CENTERED_ALIGNMENT,
   END_ALIGNMENT,
@@ -13,6 +12,7 @@ import {
   START_ALIGNMENT,
 } from '../src/defaults'
 import { FixedSizeList } from '..'
+import setupMock from './setup-mock'
 
 import type { SpyInstance } from 'vitest'
 import type { ListExposes } from '../src/types'

packages/components/watermark/index.ts

@@ -1,7 +1,9 @@
 import { withInstall } from '@element-plus/utils'
 import Watermark from './src/watermark.vue'
+import type { SFCWithInstall } from '@element-plus/utils'
 
-export const ElWatermark = withInstall(Watermark)
+export const ElWatermark: SFCWithInstall<typeof Watermark> =
+  withInstall(Watermark)
 export default ElWatermark
 
 export * from './src/watermark'

pnpm-lock.yaml

@@ -124,7 +124,7 @@ importers:
         version: 1.43.1
       '@vitejs/plugin-vue':
         specifier: ^2.3.3
-        version: 2.3.3(vite@2.9.15)(vue@3.2.37)
+        version: 2.3.3(vue@3.2.37)
       '@vitejs/plugin-vue-jsx':
         specifier: ^1.3.10
         version: 1.3.10
@@ -203,9 +203,6 @@ importers:
       sass:
         specifier: ^1.53.0
         version: 1.53.0
-      ts-morph:
-        specifier: ^14.0.0
-        version: 14.0.0
       tsx:
         specifier: ^4.7.1
         version: 4.7.1
@@ -231,8 +228,8 @@ importers:
         specifier: ^4.0.16
         version: 4.0.16(vue@3.2.37)
       vue-tsc:
-        specifier: ^0.38.2
-        version: 0.38.2(typescript@4.7.4)
+        specifier: ^1.8.27
+        version: 1.8.27(typescript@4.7.4)
 
   docs:
     dependencies:
@@ -368,7 +365,7 @@ importers:
         version: 5.0.5(rollup@2.75.7)
       '@vitejs/plugin-vue':
         specifier: ^2.3.3
-        version: 2.3.3(vite@2.9.15)(vue@3.2.37)
+        version: 2.3.3(vue@3.2.37)
       '@vitejs/plugin-vue-jsx':
         specifier: ^1.3.10
         version: 1.3.10
@@ -402,9 +399,6 @@ importers:
       rollup-plugin-esbuild:
         specifier: ^4.9.1
         version: 4.9.1(esbuild@0.14.47)(rollup@2.75.7)
-      ts-morph:
-        specifier: ^14.0.0
-        version: 14.0.0
       unplugin-vue-macros:
         specifier: ^0.11.2
         version: 0.11.2(esbuild@0.14.47)(rollup@2.75.7)(vue@3.2.37)
@@ -426,7 +420,7 @@ importers:
     devDependencies:
       unbuild:
         specifier: ^2.0.0
-        version: 2.0.0(sass@1.53.0)(typescript@5.5.4)(vue-tsc@0.38.2)
+        version: 2.0.0(sass@1.53.0)(typescript@4.7.4)(vue-tsc@1.8.27)
 
   internal/build-utils:
     dependencies:
@@ -442,7 +436,7 @@ importers:
     devDependencies:
       unbuild:
         specifier: ^2.0.0
-        version: 2.0.0(sass@1.53.0)(typescript@5.5.4)(vue-tsc@0.38.2)
+        version: 2.0.0(sass@1.53.0)(typescript@4.7.4)(vue-tsc@1.8.27)
 
   internal/eslint-config:
     dependencies:
@@ -4461,6 +4455,20 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
+  /@rollup/pluginutils@5.1.0:
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@rollup/pluginutils@5.1.0(rollup@2.75.7):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -4671,14 +4679,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
-  /@ts-morph/common@0.13.0:
-    resolution: {integrity: sha512-fEJ6j7Cu8yiWjA4UmybOBH9Efgb/64ZTWuvCF4KysGu4xz8ettfyaqFt8WZ1btCxXsGZJjZ2/3svOF6rL+UFdQ==}
-    dependencies:
-      fast-glob: 3.2.11
-      minimatch: 5.1.6
-      mkdirp: 1.0.4
-      path-browserify: 1.0.1
-
   /@tsconfig/node10@1.0.8:
     resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
     dev: true
@@ -4864,12 +4864,6 @@ packages:
       undici-types: 5.26.5
     dev: true
 
-  /@types/node@20.14.12:
-    resolution: {integrity: sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==}
-    dependencies:
-      undici-types: 5.26.5
-    dev: true
-
   /@types/node@20.14.9:
     resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==}
     dependencies:
@@ -5246,6 +5240,19 @@ packages:
     dependencies:
       vite: 2.9.15(sass@1.53.0)
       vue: 3.2.37
+    dev: true
+
+  /@vitejs/plugin-vue@2.3.3(vue@3.2.37):
+    resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      vue: 3.2.37
 
   /@vitejs/plugin-vue@5.0.5(vite@5.3.3)(vue@3.4.31):
     resolution: {integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==}
@@ -5338,34 +5345,23 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@volar/code-gen@0.38.2:
-    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
+  /@volar/language-core@1.11.1:
+    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
     dependencies:
-      '@volar/source-map': 0.38.2
+      '@volar/source-map': 1.11.1
     dev: true
 
-  /@volar/source-map@0.38.2:
-    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
+  /@volar/source-map@1.11.1:
+    resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
+    dependencies:
+      muggle-string: 0.3.1
     dev: true
 
-  /@volar/vue-code-gen@0.38.2:
-    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
+  /@volar/typescript@1.11.1:
+    resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
     dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
-      '@vue/compiler-core': 3.4.31
-      '@vue/compiler-dom': 3.4.31
-      '@vue/shared': 3.4.31
-    dev: true
-
-  /@volar/vue-typescript@0.38.2:
-    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
-    dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
-      '@volar/vue-code-gen': 0.38.2
-      '@vue/compiler-sfc': 3.4.31
-      '@vue/reactivity': 3.2.37
+      '@volar/language-core': 1.11.1
+      path-browserify: 1.0.1
     dev: true
 
   /@vue-macros/api@0.9.3(vue@3.2.37):
@@ -5432,7 +5428,7 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.24.0
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0
       '@vue/compiler-sfc': 3.4.31
       ast-kit: 0.11.3
       local-pkg: 0.5.0
@@ -6011,6 +6007,26 @@ packages:
       rfdc: 1.4.1
     dev: true
 
+  /@vue/language-core@1.8.27(typescript@4.7.4):
+    resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 1.11.1
+      '@volar/source-map': 1.11.1
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.3.1
+      path-browserify: 1.0.1
+      typescript: 4.7.4
+      vue-template-compiler: 2.7.16
+    dev: true
+
   /@vue/reactivity-transform@3.2.37:
     resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
     dependencies:
@@ -6964,6 +6980,7 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
+    dev: true
 
   /braces@2.3.2:
     resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
@@ -7395,11 +7412,6 @@ packages:
       readable-stream: 2.3.7
     dev: false
 
-  /code-block-writer@11.0.0:
-    resolution: {integrity: sha512-GEqWvEWWsOvER+g9keO4ohFoD3ymwyCnqY3hoTr7GZipYFwEhMHJw+TtV0rfgRhNImM6QWZGO2XYjlJVyYT62w==}
-    dependencies:
-      tslib: 2.3.1
-
   /code-point-at@1.1.0:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
@@ -7508,6 +7520,10 @@ packages:
       fast-glob: 3.2.11
     dev: false
 
+  /computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -7970,6 +7986,10 @@ packages:
     resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==}
     dev: false
 
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: true
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -10435,6 +10455,11 @@ packages:
     dependencies:
       function-bind: 1.1.2
 
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
   /homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -10545,6 +10570,7 @@ packages:
 
   /immutable@4.1.0:
     resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
+    dev: true
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -11092,7 +11118,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.14.12
+      '@types/node': 18.19.25
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -11250,7 +11276,7 @@ packages:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
 
   /jsonparse@1.3.1:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
@@ -11943,6 +11969,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       brace-expansion: 2.0.1
+    dev: true
 
   /minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
@@ -12007,6 +12034,7 @@ packages:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
     hasBin: true
+    dev: true
 
   /mkdist@0.3.10(typescript@4.7.3):
     resolution: {integrity: sha512-Aoc6hjILr2JPUJU2OUvBiD5sZ/CG1FeiXwk6KKPqE0iSTjBCrjrVK/fP5ig+TB3AKHvh2aA2QXXGeXVCJBdSwg==}
@@ -12027,7 +12055,7 @@ packages:
       typescript: 4.7.3
     dev: true
 
-  /mkdist@1.5.3(sass@1.53.0)(typescript@5.5.4)(vue-tsc@0.38.2):
+  /mkdist@1.5.3(sass@1.53.0)(typescript@4.7.4)(vue-tsc@1.8.27):
     resolution: {integrity: sha512-XXvaXyS3k/fCExY2/c9z0fmJ9kWq/UZeZZGQ0R693M004lowXNJKIENdH5Cf5Uu3LtSB9vhGu/1YM7IGjWbfxA==}
     hasBin: true
     peerDependencies:
@@ -12058,8 +12086,8 @@ packages:
       postcss-nested: 6.0.1(postcss@8.4.39)
       sass: 1.53.0
       semver: 7.6.2
-      typescript: 5.5.4
-      vue-tsc: 0.38.2(typescript@4.7.4)
+      typescript: 4.7.4
+      vue-tsc: 1.8.27(typescript@4.7.4)
     dev: true
 
   /mlly@0.3.19:
@@ -12107,6 +12135,10 @@ packages:
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  /muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
+    dev: true
+
   /mute-stdout@1.0.1:
     resolution: {integrity: sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==}
     engines: {node: '>= 0.10'}
@@ -12612,6 +12644,7 @@ packages:
 
   /path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
 
   /path-dirname@1.0.2:
     resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
@@ -14022,7 +14055,7 @@ packages:
       '@babel/code-frame': 7.24.7
     dev: true
 
-  /rollup-plugin-dts@6.1.1(rollup@3.29.4)(typescript@5.5.4):
+  /rollup-plugin-dts@6.1.1(rollup@3.29.4)(typescript@4.7.4):
     resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -14031,7 +14064,7 @@ packages:
     dependencies:
       magic-string: 0.30.10
       rollup: 3.29.4
-      typescript: 5.5.4
+      typescript: 4.7.4
     optionalDependencies:
       '@babel/code-frame': 7.24.7
     dev: true
@@ -14209,6 +14242,7 @@ packages:
       chokidar: 3.5.3
       immutable: 4.1.0
       source-map-js: 1.0.2
+    dev: true
 
   /sax@1.2.1:
     resolution: {integrity: sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==}
@@ -14462,6 +14496,7 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
@@ -15097,12 +15132,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-morph@14.0.0:
-    resolution: {integrity: sha512-tO8YQ1dP41fw8GVmeQAdNsD8roZi1JMqB7YwZrqU856DvmG5/710e41q2XauzTYrygH9XmMryaFeLo+kdCziyA==}
-    dependencies:
-      '@ts-morph/common': 0.13.0
-      code-block-writer: 11.0.0
-
   /ts-node@10.8.1(@types/node@18.19.25)(typescript@4.7.4):
     resolution: {integrity: sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==}
     hasBin: true
@@ -15147,9 +15176,6 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: false
 
-  /tslib@2.3.1:
-    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
-
   /tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -15306,12 +15332,6 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
-  /typescript@5.5.4:
-    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: true
-
   /uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
     dev: true
@@ -15371,7 +15391,7 @@ packages:
       - supports-color
     dev: true
 
-  /unbuild@2.0.0(sass@1.53.0)(typescript@5.5.4)(vue-tsc@0.38.2):
+  /unbuild@2.0.0(sass@1.53.0)(typescript@4.7.4)(vue-tsc@1.8.27):
     resolution: {integrity: sha512-JWCUYx3Oxdzvw2J9kTAp+DKE8df/BnH/JTSj6JyA4SH40ECdFu7FoJJcrm8G92B7TjofQ6GZGjJs50TRxoH6Wg==}
     hasBin: true
     peerDependencies:
@@ -15395,15 +15415,15 @@ packages:
       hookable: 5.5.3
       jiti: 1.21.6
       magic-string: 0.30.10
-      mkdist: 1.5.3(sass@1.53.0)(typescript@5.5.4)(vue-tsc@0.38.2)
+      mkdist: 1.5.3(sass@1.53.0)(typescript@4.7.4)(vue-tsc@1.8.27)
       mlly: 1.7.1
       pathe: 1.1.2
       pkg-types: 1.1.3
       pretty-bytes: 6.1.1
       rollup: 3.29.4
-      rollup-plugin-dts: 6.1.1(rollup@3.29.4)(typescript@5.5.4)
+      rollup-plugin-dts: 6.1.1(rollup@3.29.4)(typescript@4.7.4)
       scule: 1.3.0
-      typescript: 5.5.4
+      typescript: 4.7.4
       untyped: 1.4.2
     transitivePeerDependencies:
       - sass
@@ -16311,6 +16331,7 @@ packages:
       sass: 1.53.0
     optionalDependencies:
       fsevents: 2.3.3
+    dev: true
 
   /vite@5.1.6(@types/node@18.19.25)(sass@1.53.0):
     resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==}
@@ -16557,13 +16578,22 @@ packages:
       vue: 3.2.37
     dev: true
 
-  /vue-tsc@0.38.2(typescript@4.7.4):
-    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
+  /vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: true
+
+  /vue-tsc@1.8.27(typescript@4.7.4):
+    resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-typescript': 0.38.2
+      '@volar/typescript': 1.11.1
+      '@vue/language-core': 1.8.27(typescript@4.7.4)
+      semver: 7.6.2
       typescript: 4.7.4
     dev: true
 

tsconfig.base.json

@@ -17,6 +17,7 @@
     "types": [],
     "paths": {
       "@element-plus/*": ["packages/*"]
-    }
+    },
+    "preserveSymlinks": true
   }
 }