Merge branch 'wvffle/dependency-maintenance' into 'develop'

Frontend dependency maintanence

See merge request funkwhale/funkwhale!2772

.pre-commit-config.yaml

@@ -6,6 +6,7 @@ repos:
     rev: v4.4.0
     hooks:
       - id: check-added-large-files
+        exclude: ^(front/patches/)
       - id: check-case-conflict
       - id: check-executables-have-shebangs
       - id: check-shebang-scripts-are-executable
@@ -20,9 +21,11 @@ repos:
       - id: check-vcs-permalinks
       - id: check-merge-conflict
       - id: end-of-file-fixer
-        exclude: ^(docs/locales/.*/LC_MESSAGES)
+        exclude: ^(docs/locales/.*/LC_MESSAGES|front/patches/)
       - id: mixed-line-ending
+        exclude: ^(front/patches/)
       - id: trailing-whitespace
+        exclude: ^(front/patches/)
 
   - repo: https://github.com/python-poetry/poetry
     rev: 1.5.1
@@ -68,6 +71,7 @@ repos:
     hooks:
       - id: codespell
         additional_dependencies: [tomli]
+        exclude: ^(front/patches/)
 
   - repo: https://github.com/shellcheck-py/shellcheck-py
     rev: v0.9.0.5

changes/changelog.d/patch-package.feature

@@ -0,0 +1 @@
+Added `patch-package` to fronted, so that we can automatically patch `fomantic-ui-css` without running scripts every time.

front/package.json

@@ -15,74 +15,70 @@
     "lint": "eslint --cache --cache-strategy content --ext .ts,.js,.vue,.json,.html src test cypress public/embed.html",
     "lint:tsc": "vue-tsc --noEmit --incremental && tsc --noEmit --incremental -p cypress",
     "fix-fomantic-css": "scripts/fix-fomantic-css.sh",
-    "postinstall": "yarn run fix-fomantic-css"
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@funkwhale/ui": "0.2.2",
-    "@sentry/tracing": "7.47.0",
-    "@sentry/vue": "7.47.0",
+    "@sentry/tracing": "7.107.0",
+    "@sentry/vue": "7.107.0",
     "@tauri-apps/api": "2.0.0-beta.1",
-    "@vue/runtime-core": "3.3.11",
-    "@vueuse/core": "10.3.0",
-    "@vueuse/integrations": "10.3.0",
-    "@vueuse/math": "10.3.0",
-    "@vueuse/router": "10.3.0",
-    "axios": "1.2.3",
+    "@vue/runtime-core": "3.4.21",
+    "@vueuse/core": "10.9.0",
+    "@vueuse/integrations": "10.9.0",
+    "@vueuse/math": "10.9.0",
+    "@vueuse/router": "10.9.0",
+    "axios": "1.6.7",
     "axios-auth-refresh": "3.3.6",
     "butterchurn": "3.0.0-beta.4",
     "butterchurn-presets": "3.0.0-beta.4",
-    "diff": "5.1.0",
-    "dompurify": "3.0.8",
-    "focus-trap": "7.2.0",
+    "diff": "5.2.0",
+    "dompurify": "3.0.9",
+    "focus-trap": "7.5.4",
     "fomantic-ui-css": "2.9.3",
     "idb-keyval": "6.2.1",
     "lodash-es": "4.17.21",
     "lru-cache": "10.2.0",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
     "showdown": "2.1.0",
     "stacktrace-js": "2.0.2",
-    "standardized-audio-context": "25.3.60",
+    "standardized-audio-context": "25.3.66",
     "text-clipper": "2.2.0",
     "transliteration": "2.3.5",
-    "universal-cookie": "4.0.4",
-    "vite-plugin-pwa": "0.14.4",
-    "vue": "3.3.11",
-    "vue-gettext": "2.1.12",
-    "vue-i18n": "9.9.1",
-    "vue-router": "4.2.5",
+    "vite-plugin-pwa": "0.19.3",
+    "vue": "3.4.21",
+    "vue-i18n": "9.10.1",
+    "vue-router": "4.3.0",
     "vue-upload-component": "3.1.8",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue3-gettext": "2.3.4",
     "vue3-lazyload": "0.3.8",
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
-    "vuex-persistedstate": "4.1.0",
-    "vuex-router-sync": "5.0.0"
+    "vuex-persistedstate": "4.1.0"
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.1",
     "@intlify/eslint-plugin-vue-i18n": "2.0.0",
-    "@intlify/unplugin-vue-i18n": "2.0.0",
+    "@intlify/unplugin-vue-i18n": "3.0.1",
     "@tauri-apps/cli": "2.0.0-beta.2",
     "@types/diff": "5.0.9",
     "@types/dompurify": "3.0.5",
     "@types/jquery": "3.5.29",
     "@types/lodash-es": "4.17.12",
     "@types/moxios": "0.4.17",
-    "@types/qs": "6.9.10",
+    "@types/qs": "6.9.12",
     "@types/semantic-ui": "2.2.9",
     "@types/showdown": "2.0.6",
     "@types/vue-virtual-scroller": "npm:@earltp/vue-virtual-scroller",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@vitejs/plugin-vue": "5.0.4",
     "@vitest/coverage-v8": "1.3.1",
-    "@vue-macros/volar": "0.13.3",
-    "@vue/compiler-sfc": "3.3.11",
+    "@vue-macros/volar": "0.18.11",
+    "@vue/compiler-sfc": "3.4.21",
     "@vue/eslint-config-standard": "8.0.1",
-    "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.2.7",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/test-utils": "2.4.5",
     "@vue/tsconfig": "0.5.1",
-    "cypress": "13.6.4",
+    "cypress": "13.7.0",
     "eslint": "8.57.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-html": "8.0.0",
@@ -90,25 +86,24 @@
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-vue": "9.23.0",
     "jsdom": "24.0.0",
     "jsonc-eslint-parser": "2.4.0",
-    "msw": "2.2.1",
+    "msw": "2.2.3",
     "msw-auto-mock": "0.18.0",
     "patch-package": "8.0.0",
-    "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.57.1",
-    "sinon": "15.0.2",
-    "standardized-audio-context-mock": "9.6.32",
-    "typescript": "5.3.3",
-    "unplugin-vue-macros": "2.4.6",
-    "utility-types": "3.10.0",
-    "vite": "5.1.3",
+    "postinstall-postinstall": "2.1.0",
+    "rollup-plugin-visualizer": "5.12.0",
+    "sass": "1.72.0",
+    "standardized-audio-context-mock": "9.7.2",
+    "typescript": "5.4.2",
+    "unplugin-vue-macros": "2.7.10",
+    "vite": "5.1.6",
     "vitest": "1.3.1",
-    "vue-tsc": "1.8.27",
-    "workbox-core": "6.5.4",
-    "workbox-precaching": "6.5.4",
-    "workbox-routing": "6.5.4",
-    "workbox-strategies": "6.5.4"
+    "vue-tsc": "2.0.6",
+    "workbox-core": "7.0.0",
+    "workbox-precaching": "7.0.0",
+    "workbox-routing": "7.0.0",
+    "workbox-strategies": "7.0.0"
   }
 }

front/src/api/player.ts

@@ -38,9 +38,9 @@ export interface Sound {
   onSoundEnd: EventHookOn<Sound>
 }
 
-export const soundImplementations = reactive(new Set<Constructor<Sound>>())
+export const soundImplementations: Set<Constructor<Sound>> = reactive(new Set<Constructor<Sound>>())
 
-export const registerSoundImplementation = <T extends Constructor<Sound>>(implementation: T) => {
+export const registerSoundImplementation = <T extends Sound>(implementation: Constructor<T>): Constructor<T> => {
   soundImplementations.add(implementation)
   return implementation
 }
@@ -49,8 +49,8 @@ export const registerSoundImplementation = <T extends Constructor<Sound>>(implem
 @registerSoundImplementation
 export class HTMLSound implements Sound {
   #audio = new Audio()
-  #soundLoopEventHook = createEventHook<HTMLSound>()
-  #soundEndEventHook = createEventHook<HTMLSound>()
+  #soundLoopEventHook = createEventHook<Sound>()
+  #soundEndEventHook = createEventHook<Sound>()
   #ignoreError = false
   #scope = effectScope()
 
@@ -59,8 +59,8 @@ export class HTMLSound implements Sound {
   readonly isDisposed = ref(false)
 
   audioNode = createAudioSource(this.#audio)
-  onSoundLoop: EventHookOn<HTMLSound>
-  onSoundEnd: EventHookOn<HTMLSound>
+  onSoundLoop: EventHookOn<Sound>
+  onSoundEnd: EventHookOn<Sound>
 
   constructor (sources: SoundSource[]) {
     this.onSoundLoop = this.#soundLoopEventHook.on

front/src/components/Queue.vue

@@ -83,6 +83,7 @@ watchEffect(async () => {
 const list = ref()
 const el = useCurrentElement()
 const scrollToCurrent = (behavior: ScrollBehavior = 'smooth') => {
+  if (!(el.value instanceof HTMLElement)) return
   const item = el.value?.querySelector('.queue-item.active')
   item?.scrollIntoView({
     behavior,
@@ -275,7 +276,7 @@ if (!isWebGLSupported) {
           <h1 class="ui header">
             <div class="content ellipsis">
               <router-link
-                class="small header discrete link track"
+                class="header discrete link track small"
                 :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
               >
                 {{ currentTrack.title }}
@@ -301,7 +302,7 @@ if (!isWebGLSupported) {
           </h1>
           <div
             v-if="currentTrack && errored"
-            class="ui small warning message"
+            class="ui warning message small"
           >
             <h3 class="header">
               {{ $t('components.Queue.header.failure') }}
@@ -316,7 +317,7 @@ if (!isWebGLSupported) {
           </div>
           <div
             v-else-if="currentSound && !currentSound.playable"
-            class="ui small warning message"
+            class="ui warning message small"
           >
             <h3 class="header">
               {{ $t('components.Queue.header.noSources') }}

front/src/components/audio/SearchBar.vue

@@ -64,6 +64,7 @@ const el = useCurrentElement()
 const query = ref()
 
 const enter = () => {
+  if (!(el.value instanceof HTMLElement)) return
   jQuery(el.value).search('cancel query')
 
   // Cancel any API search request to backend…
@@ -113,7 +114,7 @@ const categories = computed(() => [
     name: labels.value.tag,
     getId: (obj: Tag) => obj.name,
     getTitle: (obj: Tag) => `#${obj.name}`,
-    getDescription: (obj: Tag) => ''
+    getDescription: (_: Tag) => ''
   },
   {
     code: 'more',
@@ -132,6 +133,7 @@ const objectId = computed(() => {
 })
 
 onMounted(() => {
+  if (!(el.value instanceof HTMLElement)) return
   jQuery(el.value).search({
     type: 'category',
     minCharacters: 3,
@@ -142,13 +144,14 @@ onMounted(() => {
       noResults: t('components.audio.SearchBar.empty.noResults')
     },
 
-    onSelect (result, response) {
+    onSelect (result, _response) {
+      if (!(el.value instanceof HTMLElement)) return
       jQuery(el.value).search('set value', query.value)
       router.push(result.routerUrl)
       jQuery(el.value).search('hide results')
       return false
     },
-    onSearchQuery (value) {
+    onSearchQuery (_value) {
       // query.value = value
       emit('search')
     },

front/src/components/auth/Settings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { BackendError, Application, PrivacyLevel } from '~/types'
-import type { $ElementType } from 'utility-types'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -21,7 +20,7 @@ const SETTINGS_ORDER: FieldId[] = ['summary', 'privacy_level']
 
 type Field = { id: 'summary', type: 'content', value: { text: string, content_type: 'text/markdown' } }
   | { id: 'privacy_level', type: 'dropdown', choices: PrivacyLevel[], value: string }
-type FieldId = $ElementType<Field, 'id'>
+type FieldId = Field['id']
 
 interface Settings {
   success: boolean
@@ -274,7 +273,7 @@ fetchOwnedApps()
     class="main pusher"
   >
     <div class="ui vertical stripe segment">
-      <section class="ui text container">
+      <section class="container ui text">
         <h2 class="ui header">
           {{ $t('components.auth.Settings.header.accountSettings') }}
         </h2>
@@ -344,8 +343,8 @@ fetchOwnedApps()
           </button>
         </form>
       </section>
-      <section class="ui text container">
-        <div class="ui hidden divider" />
+      <section class="container ui text">
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           {{ $t('components.auth.Settings.header.avatar') }}
         </h2>
@@ -378,8 +377,8 @@ fetchOwnedApps()
         </div>
       </section>
 
-      <section class="ui text container">
-        <div class="ui hidden divider" />
+      <section class="container ui text">
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           {{ $t('components.auth.Settings.header.changePassword') }}
         </h2>
@@ -452,15 +451,15 @@ fetchOwnedApps()
             </template>
           </dangerous-button>
         </form>
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
         <subsonic-token-form />
       </section>
 
       <section
         id="content-filters"
-        class="ui text container"
+        class="container ui text"
       >
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="eye slash outline icon" />
           <div class="content">
@@ -481,7 +480,7 @@ fetchOwnedApps()
         <h3 class="ui header">
           {{ $t('components.auth.Settings.header.hiddenArtists') }}
         </h3>
-        <table class="ui compact very basic unstackable table">
+        <table class="table ui compact very basic unstackable">
           <thead>
             <tr>
               <th>
@@ -520,9 +519,9 @@ fetchOwnedApps()
       </section>
       <section
         id="grants"
-        class="ui text container"
+        class="container ui text"
       >
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="open lock icon" />
           <div class="content">
@@ -541,7 +540,7 @@ fetchOwnedApps()
         </button>
         <table
           v-if="apps.length > 0"
-          class="ui compact very basic unstackable table"
+          class="table ui compact very basic unstackable"
         >
           <thead>
             <tr>
@@ -600,9 +599,9 @@ fetchOwnedApps()
       </section>
       <section
         id="apps"
-        class="ui text container"
+        class="container ui text"
       >
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
@@ -620,7 +619,7 @@ fetchOwnedApps()
         </router-link>
         <table
           v-if="ownedApps.length > 0"
-          class="ui compact very basic unstackable table"
+          class="table ui compact very basic unstackable"
         >
           <thead>
             <tr>
@@ -694,9 +693,9 @@ fetchOwnedApps()
 
       <section
         id="plugins"
-        class="ui text container"
+        class="container ui text"
       >
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
@@ -713,8 +712,8 @@ fetchOwnedApps()
           {{ $t('components.auth.Settings.link.managePlugins') }}
         </router-link>
       </section>
-      <section class="ui text container">
-        <div class="ui hidden divider" />
+      <section class="container ui text">
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="comment icon" />
           <div class="content">
@@ -773,8 +772,8 @@ fetchOwnedApps()
           </button>
         </form>
       </section>
-      <section class="ui text container">
-        <div class="ui hidden divider" />
+      <section class="container ui text">
+        <div class="hidden ui divider" />
         <h2 class="ui header">
           <i class="trash icon" />
           <div class="content">

front/src/components/channels/UploadForm.vue

@@ -306,6 +306,7 @@ fetchQuota()
 //
 const el = useCurrentElement()
 watch(() => availableChannels.channels, () => {
+  if (!(el.value instanceof HTMLElement)) return
   $(el.value).find('#channel-dropdown').dropdown({
     onChange (value) {
       values.channel = value
@@ -496,7 +497,7 @@ defineExpose({
       <template v-else>
         <div
           v-if="step === 2 && draftUploads?.length > 0 && includeDraftUploads === undefined"
-          class="ui visible info message"
+          class="visible ui info message"
         >
           <p>
             <i class="redo icon" />
@@ -544,7 +545,7 @@ defineExpose({
               </div>
               <div
                 v-else-if="file.active && !file.response"
-                class="ui active slow inline loader"
+                class="inline ui slow loader active"
               />
             </div>
             <h4 class="ui header">
@@ -619,12 +620,12 @@ defineExpose({
             <i class="upload icon" />&nbsp;
             {{ $t('components.channels.UploadForm.message.dragAndDrop') }}
           </div>
-          <div class="ui very small divider" />
+          <div class="ui very divider small" />
           <div>
             {{ $t('components.channels.UploadForm.label.openBrowser') }}
           </div>
         </file-upload-widget>
-        <div class="ui hidden divider" />
+        <div class="hidden ui divider" />
       </template>
     </template>
   </form>

front/src/components/library/radios/Filter.vue

@@ -87,6 +87,7 @@ onMounted(() => {
       }
     }
 
+    if (!(el.value instanceof HTMLElement)) return
     $(el.value).find(selector).dropdown(settings)
   }
 })

front/src/components/playlists/Form.vue

@@ -64,6 +64,7 @@ const privacyLevelChoices = computed(() => [
 const el = useCurrentElement()
 onMounted(async () => {
   await nextTick()
+  if (!(el.value instanceof HTMLElement)) return
   $(el.value).find('.dropdown').dropdown()
 })
 

front/src/components/vui/list/VirtualList.vue

@@ -61,11 +61,11 @@ const onTouchmove = (event: TouchEvent) => {
   }
 }
 
-document.addEventListener('touchcancel', (event: TouchEvent) => {
+document.addEventListener('touchcancel', (_event: TouchEvent) => {
   cleanup()
 })
 
-const reorder = (event: MouseEvent | TouchEvent) => {
+const reorder = (_event: MouseEvent | TouchEvent) => {
   if (draggedItem.value) {
     const from = draggedItem.value.index
     let to = hoveredIndex.value
@@ -155,6 +155,7 @@ const { resume, pause } = useRafFn(() => {
   const now = +new Date()
   const direction = scrollDirection.value
 
+  if (!(el.value instanceof HTMLElement)) return
   if (direction && el.value?.children[0] && !isTouch.value) {
     el.value.children[0].scrollTop += 200 / (now - lastDate) * (direction === 'up' ? -1 : 1)
   }

front/src/composables/audio/usePlayOptions.ts

@@ -131,6 +131,7 @@ export default (props: PlayOptionsProps) => {
 
   const el = useCurrentElement()
   const enqueue = async () => {
+    if (!(el.value instanceof HTMLElement)) return
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
     const tracks = await getPlayableTracks()
@@ -139,6 +140,7 @@ export default (props: PlayOptionsProps) => {
   }
 
   const enqueueNext = async (next = false) => {
+    if (!(el.value instanceof HTMLElement)) return
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
     const tracks = await getPlayableTracks()
@@ -157,6 +159,7 @@ export default (props: PlayOptionsProps) => {
   const replacePlay = async (index?: number) => {
     await clear()
 
+    if (!(el.value instanceof HTMLElement)) return
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
     const tracksToPlay = await getPlayableTracks()

front/src/utils/fomantic.ts

@@ -1,8 +1,11 @@
 /// <reference types="semantic-ui" />
 
+import type { MaybeElement } from '@vueuse/core'
 import $ from 'jquery'
 
-export const setupDropdown = (selector: string | HTMLElement = '.ui.dropdown', el: Element = document.body) => {
+export const setupDropdown = (selector: string | HTMLElement = '.ui.dropdown', el: MaybeElement = document.body) => {
+  if (!(el instanceof Element)) return null
+
   const $dropdown = typeof selector === 'string'
     ? $(el).find(selector)
     : $(selector)

front/src/views/admin/Settings.vue

@@ -140,11 +140,13 @@ if (route.hash) {
 const el = useCurrentElement()
 onMounted(async () => {
   await nextTick()
+  if (!(el.value instanceof HTMLElement)) return
   $(el.value).find('select.dropdown').dropdown()
 })
 
 watch(settingsData, async () => {
   await nextTick()
+  if (!(el.value instanceof HTMLElement)) return
   $(el.value).find('.sticky').sticky({ context: '#settings-grid' })
 })
 
@@ -172,12 +174,12 @@ await nextTick()
     class="main pusher"
   >
     <div class="ui vertical stripe segment">
-      <div class="ui text container">
+      <div class="container ui text">
         <div :class="['ui', {'loading': isLoading}, 'form']" />
         <div
           v-if="settingsData"
           id="settings-grid"
-          class="ui grid"
+          class="grid ui"
         >
           <div class="twelve wide stretched column">
             <settings-group
@@ -188,7 +190,7 @@ await nextTick()
             />
           </div>
           <div class="four wide column">
-            <div class="ui sticky vertical secondary menu">
+            <div class="sticky ui vertical secondary menu">
               <div class="header item">
                 {{ $t('views.admin.Settings.header.sections') }}
               </div>

front/src/views/admin/moderation/AccountsDetail.vue

@@ -100,6 +100,7 @@ fetchData()
 const el = useCurrentElement()
 watch(object, async () => {
   await nextTick()
+  if (!(el.value instanceof HTMLElement)) return
   $(el.value).find('select.dropdown').dropdown()
 })
 
@@ -156,7 +157,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
         v-title="object.full_username"
         :class="['ui', 'head', 'vertical', 'stripe', 'segment']"
       >
-        <div class="ui stackable two column grid">
+        <div class="grid ui stackable two column">
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
@@ -281,7 +282,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
         </div>
       </section>
       <div class="ui vertical stripe segment">
-        <div class="ui stackable three column grid">
+        <div class="grid ui stackable three column">
           <div class="column">
             <section>
               <h3 class="ui header">
@@ -290,7 +291,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   {{ $t('views.admin.moderation.AccountsDetail.header.accountData') }}
                 </div>
               </h3>
-              <table class="ui very basic table">
+              <table class="table ui very basic">
                 <tbody>
                   <tr>
                     <td>
@@ -448,7 +449,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               </div>
               <table
                 v-else
-                class="ui very basic table"
+                class="table ui very basic"
               >
                 <tbody>
                   <tr v-if="!object.user">
@@ -527,7 +528,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               </div>
               <table
                 v-else
-                class="ui very basic table"
+                class="table ui very basic"
               >
                 <tbody>
                   <tr v-if="!object.user">

front/tsconfig.json

@@ -9,7 +9,6 @@
     "types": [
       "vitest/globals",
       "vite/client",
-      "vue/ref-macros",
       "vite-plugin-pwa/client",
       "unplugin-vue-macros/macros-global"
     ],
@@ -29,7 +28,8 @@
       "@vue-macros/volar/short-vmodel",
       "@vue-macros/volar/define-slots",
       "@vue-macros/volar/export-props",
-      "@vue-macros/volar/jsx-directive"
+      "@vue-macros/volar/jsx-directive",
+      "@vue-macros/volar/setup-jsdoc"
     ]
   }
 }