Fix eslint

front/.eslintrc.js

@@ -32,6 +32,9 @@ module.exports = {
     'no-unused-vars': 'off',
     'no-use-before-define': 'off',
 
+    // TODO (wvffle): VUI and #1618
+    'import/extensions': 'off',
+
     // TODO (wvffle): Enable these rules later
     'vue/multi-word-component-names': 'off',
     '@typescript-eslint/no-this-alias': 'off',
@@ -39,9 +42,6 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
 
     // TODO (wvffle): Migrate to pinia
-    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
-
-    // TODO (wvffle): Migrate to <script setup>
-    'vue/require-explicit-emits': 'off'
   }
 }

front/src/components/Sidebar.vue

@@ -16,10 +16,15 @@ import { useStore } from '~/store'
 import { setupDropdown } from '~/utils/fomantic'
 import { useCurrentElement } from '@vueuse/core'
 
+interface Events {
+  (e: 'show:set-instance-modal'): void
+}
+
 interface Props {
   width: number
 }
 
+const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const store = useStore()
@@ -579,7 +584,7 @@ onMounted(() => {
               role="button"
               href=""
               class="link item"
-              @click.prevent="$emit('show:set-instance-modal')"
+              @click.prevent="emit('show:set-instance-modal')"
             >Switch instance</a>
           </div>
         </nav>

front/src/components/admin/SettingsGroup.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* eslint-disable vue/valid-v-model */
 import type { BackendError, SettingsGroup, SettingsDataEntry, FunctionRef, Form } from '~/types'
 import axios from 'axios'
 import SignupFormBuilder from '~/components/admin/SignupFormBuilder.vue'
@@ -207,7 +208,7 @@ const save = async () => {
         class="ui search selection dropdown"
       >
         <option
-          v-for="v in setting.additional_data.choices"
+          v-for="v in setting.additional_data?.choices"
           :key="v[0]"
           :value="v[0]"
         >

front/src/components/audio/podcast/MobileRow.vue

@@ -33,7 +33,15 @@ interface Props extends PlayOptionsProps {
 const props = withDefaults(defineProps<Props>(), {
   showArt: true,
   isArtist: false,
-  isAlbum: false
+  isAlbum: false,
+
+  tracks: () => [],
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const showTrackModal = ref(false)

front/src/components/audio/podcast/Modal.vue

@@ -37,7 +37,15 @@ interface Props extends PlayOptionsProps {
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   isArtist: false,
-  isAlbum: false
+  isAlbum: false,
+
+  tracks: () => [],
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const modal = ref()

front/src/components/audio/podcast/Row.vue

@@ -34,7 +34,15 @@ interface Props extends PlayOptionsProps {
 const props = withDefaults(defineProps<Props>(), {
   showArt: true,
   displayActions: true,
-  defaultCover: null
+  defaultCover: null,
+
+  tracks: () => [],
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const description = ref('')

front/src/components/audio/track/MobileRow.vue

@@ -33,7 +33,15 @@ interface Props extends PlayOptionsProps {
 const props = withDefaults(defineProps<Props>(), {
   showArt: true,
   isArtist: false,
-  isAlbum: false
+  isAlbum: false,
+
+  tracks: () => [],
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const showTrackModal = ref(false)

front/src/components/audio/track/Modal.vue

@@ -37,7 +37,15 @@ interface Props extends PlayOptionsProps {
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   isArtist: false,
-  isAlbum: false
+  isAlbum: false,
+
+  tracks: () => [],
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const modal = ref()

front/src/components/audio/track/Row.vue

@@ -41,7 +41,14 @@ const props = withDefaults(defineProps<Props>(), {
   showArtist: true,
   showDuration: true,
   showPosition: false,
-  displayActions: true
+  displayActions: true,
+
+  artist: null,
+  album: null,
+  playlist: null,
+  library: null,
+  channel: null,
+  account: null
 })
 
 const { playing, loading } = usePlayer()

front/src/components/channels/AlbumModal.vue

@@ -4,10 +4,15 @@ import SemanticModal from '~/components/semantic/Modal.vue'
 import ChannelAlbumForm from '~/components/channels/AlbumForm.vue'
 import { watch, ref } from 'vue'
 
+interface Events {
+  (e: 'created'): void
+}
+
 interface Props {
   channel: Channel
 }
 
+const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const isLoading = ref(false)
@@ -47,7 +52,7 @@ const albumForm = ref()
         :channel="channel"
         @loading="isLoading = $event"
         @submittable="submittable = $event"
-        @created="$emit('created', $event)"
+        @created="emit('created')"
       />
     </div>
     <div class="actions">

front/src/components/common/EmptyState.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+interface Events {
+  (e: 'refresh'): void
+}
+
 interface Props {
   refresh?: boolean
 }
 
+const emit = defineEmits<Events>()
 withDefaults(defineProps<Props>(), {
   refresh: false
 })
@@ -25,7 +30,7 @@ withDefaults(defineProps<Props>(), {
       <button
         v-if="refresh"
         class="ui button"
-        @click="$emit('refresh')"
+        @click="emit('refresh')"
       >
         <translate translate-context="Content/*/Button.Label/Short, Verb">
           Refresh

front/src/components/federation/FetchButton.vue

@@ -6,10 +6,15 @@ import SemanticModal from '~/components/semantic/Modal.vue'
 import { useTimeoutFn } from '@vueuse/core'
 import { ref } from 'vue'
 
+interface Events {
+  (e: 'refresh'): void
+}
+
 interface Props {
   url: string
 }
 
+const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
 const MAX_POLLS = 15
@@ -264,7 +269,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
         <button
           v-if="data && data.status === 'finished'"
           class="ui confirm success button"
-          @click.prevent="showModal = false; $emit('refresh')"
+          @click.prevent="showModal = false; emit('refresh')"
         >
           <translate translate-context="*/*/Button.Label/Verb">
             Close and reload page

front/src/components/library/ArtistDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Artist, Track, Album } from '~/types'
+import type { Artist, Track, Album, Library } from '~/types'
 import type { ContentFilter } from '~/store/moderation'
 
 import { ref, computed, reactive } from 'vue'
@@ -13,6 +13,10 @@ import AlbumCard from '~/components/audio/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+interface Events {
+  (e: 'libraries-loaded', libraries: Library[]): void
+}
+
 interface Props {
   object: Artist
   tracks: Track[]
@@ -22,6 +26,7 @@ interface Props {
   nextAlbumsUrl?: string | null
 }
 
+const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   nextTracksUrl: null,
   nextAlbumsUrl: null
@@ -143,7 +148,7 @@ const loadMoreAlbums = async () => {
       </h2>
       <library-widget
         :url="'artists/' + object.id + '/libraries/'"
-        @loaded="$emit('libraries-loaded', $event)"
+        @loaded="emit('libraries-loaded', $event)"
       >
         <translate translate-context="Content/Artist/Paragraph">
           This artist is present in the following libraries:

front/src/components/library/EditForm.vue

@@ -273,11 +273,11 @@ const resetField = (fieldId: string) => {
                 </translate>
               </option>
               <option
-                v-for="license in licenses"
+                v-for="{ code, name } in licenses"
-                :key="license.code"
+                :key="code"
-                :value="license.code"
+                :value="code"
               >
-                {{ license.name }}
+                {{ name }}
               </option>
             </select>
             <button

front/src/components/library/FsLogs.vue

@@ -21,7 +21,10 @@ defineProps<Props>()
       </div>
     </div>
     <template v-else>
-      <p v-for="row in data.logs">
+      <p
+        v-for="row in data.logs"
+        :key="row"
+      >
         {{ row }}
       </p>
     </template>

front/src/components/library/TrackDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Track } from '~/types'
+import type { Track, Library } from '~/types'
 
 import { humanSize, momentFormat, truncate } from '~/utils/filters'
 import { computed, ref, watchEffect } from 'vue'
@@ -13,10 +13,15 @@ import TagsList from '~/components/tags/List.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+interface Events {
+  (e: 'libraries-loaded', libraries: Library[]): void
+}
+
 interface Props {
   track: Track
 }
 
+const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
 const musicbrainzUrl = computed(() => props.track.mbid
@@ -322,7 +327,7 @@ watchEffect(() => {
           </h2>
           <library-widget
             :url="`tracks/${track.id}/libraries/`"
-            @loaded="$emit('libraries-loaded', $event)"
+            @loaded="emit('libraries-loaded', $event)"
           >
             <translate translate-context="Content/Track/Paragraph">
               This track is present in the following libraries:

front/src/components/manage/moderation/InstancePolicyCard.vue

@@ -3,10 +3,15 @@ import type { InstancePolicy } from '~/types'
 
 import useMarkdown from '~/composables/useMarkdown'
 
+interface Events {
+  (e: 'update'): void
+}
+
 interface Props {
   object: InstancePolicy
 }
 
+const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
 const summary = useMarkdown(() => props.object.summary)
@@ -86,7 +91,7 @@ const summary = useMarkdown(() => props.object.summary)
     <div class="ui hidden divider" />
     <button
       class="ui right floated labeled icon button"
-      @click="$emit('update')"
+      @click="emit('update')"
     >
       <i class="edit icon" />
       <translate translate-context="Content/*/Button.Label/Verb">

front/src/components/playlists/Editor.vue

@@ -95,7 +95,7 @@ const reorder = async ({ oldIndex: from, newIndex: to }: { oldIndex: number, new
   isLoading.value = true
 
   try {
-    await axios.post(`playlists/${playlist.value!.id}/move/`, { from, to })
+    await axios.post(`playlists/${playlist.value?.id}/move/`, { from, to })
     await store.dispatch('playlists/fetchOwn')
     responseHandlers.success()
   } catch (error) {
@@ -110,7 +110,7 @@ const removePlaylistTrack = async (index: number) => {
 
   try {
     tracks.value.splice(index, 1)
-    await axios.post(`playlists/${playlist.value!.id}/remove/`, { index })
+    await axios.post(`playlists/${playlist.value?.id}/remove/`, { index })
     await store.dispatch('playlists/fetchOwn')
     responseHandlers.success()
   } catch (error) {
@@ -125,7 +125,7 @@ const clearPlaylist = async () => {
 
   try {
     tracks.value = []
-    await axios.post(`playlists/${playlist.value!.id}/clear/`)
+    await axios.post(`playlists/${playlist.value?.id}/clear/`)
     await store.dispatch('playlists/fetchOwn')
     responseHandlers.success()
   } catch (error) {
@@ -139,7 +139,7 @@ const insertMany = async (insertedTracks: Track[], allowDuplicates: boolean) =>
   isLoading.value = true
 
   try {
-    const response = await axios.post(`playlists/${playlist.value!.id}/add/`, {
+    const response = await axios.post(`playlists/${playlist.value?.id}/add/`, {
       allow_duplicates: allowDuplicates,
       tracks: insertedTracks.map(track => track.id)
     })

front/src/components/playlists/Form.vue

@@ -74,7 +74,7 @@ const submit = async () => {
   errors.value = []
 
   try {
-    const url = props.create ? 'playlists/' : `playlists/${playlist.value!.id}/`
+    const url = props.create ? 'playlists/' : `playlists/${playlist.value?.id}/`
     const method = props.create ? 'post' : 'patch'
 
     const data = {

front/src/views/Search.vue

@@ -105,7 +105,7 @@ const types = computed(() => [
   }
 ] as SearchType[])
 
-const currentType = computed(() => types.value.find(({ id }) => id === type.value)!)
+const currentType = computed(() => types.value.find(({ id }) => id === type.value))
 
 const axiosParams = computed(() => {
   const params = new URLSearchParams({
@@ -114,13 +114,13 @@ const axiosParams = computed(() => {
     page_size: paginateBy.value as unknown as string
   })
 
-  if (currentType.value.contentCategory) params.append('content_category', currentType.value.contentCategory)
+  if (currentType.value?.contentCategory) params.append('content_category', currentType.value.contentCategory)
-  if (currentType.value.includeChannels) params.append('include_channels', currentType.value.includeChannels as unknown as string)
+  if (currentType.value?.includeChannels) params.append('include_channels', currentType.value.includeChannels as unknown as string)
 
   return params
 })
 
-const currentResults = computed(() => results[currentType.value.id ?? 'artists'])
+const currentResults = computed(() => results[currentType.value?.id ?? 'artists'])
 
 const router = useRouter()
 const updateQueryString = () => router.replace({
@@ -133,6 +133,8 @@ const updateQueryString = () => router.replace({
 
 const isLoading = ref(false)
 const search = async () => {
+  if (!currentType.value) return
+
   if (!query.value) {
     for (const type of types.value) {
       results[type.id] = null
@@ -193,14 +195,14 @@ const labels = computed(() => ({
 const radioConfig = computed(() => {
   const results = Object.values(currentResults.value?.results ?? {})
   if (results.length) {
-    if (currentType.value.id === 'tags') {
+    if (currentType.value?.id === 'tags') {
       return {
         type: 'tag',
         names: results.map(({ name }) => name)
       } as RadioConfig
     }
 
-    if (currentType.value.id === 'artists') {
+    if (currentType.value?.id === 'artists') {
       return {
         type: 'artist',
         ids: results.map(({ id }) => id)

front/src/views/auth/ProfileBase.vue

@@ -11,11 +11,16 @@ import axios from 'axios'
 import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
 
+interface Events {
+  (e: 'updated', value: Actor): void
+}
+
 interface Props {
   username: string
   domain?: string | null
 }
 
+const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   domain: null
 })
@@ -161,7 +166,7 @@ watch(props, fetchData, { immediate: true })
               :field-name="'summary'"
               :update-url="`users/${$store.state.auth.username}/`"
               :can-update="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
-              @updated="$emit('updated', $event)"
+              @updated="emit('updated', $event)"
             />
           </div>
         </div>

front/src/views/auth/ProfileOverview.vue

@@ -7,10 +7,15 @@ import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
 import { ref } from 'vue'
 
+interface Events {
+  (e: 'updated', value: Actor): void
+}
+
 interface Props {
   object: Actor
 }
 
+const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const step = ref(1)
@@ -31,7 +36,7 @@ const createForm = ref()
         :field-name="'summary'"
         :update-url="`users/${$store.state.auth.username}/`"
         :can-update="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
-        @updated="$emit('updated', $event)"
+        @updated="emit('updated', $event)"
       />
       <div class="ui hidden divider" />
     </div>

front/src/views/library/Edit.vue

@@ -10,10 +10,15 @@ import LibraryForm from '~/views/content/libraries/Form.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+interface Events {
+  (e: 'updated'): void
+}
+
 interface Props {
   object: Library
 }
 
+const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
 type ResponseType = { count: number, results: any[] }
@@ -49,7 +54,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
   <section>
     <library-form
       :library="object"
-      @updated="$emit('updated')"
+      @updated="emit('updated')"
       @deleted="$router.push({name: 'profile.overview', params: {username: $store.state.auth.username}})"
     />
     <div class="ui hidden divider" />

front/src/views/library/Upload.vue

@@ -6,11 +6,16 @@ import { ref } from 'vue'
 
 import FileUpload from '~/components/library/FileUpload.vue'
 
+interface Events {
+  (e: 'uploads-finished', data: number): void
+}
+
 interface Props {
   object: Library
   defaultImportReference?: string
 }
 
+const emit = defineEmits<Events>()
 withDefaults(defineProps<Props>(), {
   defaultImportReference: ''
 })
@@ -36,7 +41,7 @@ onBeforeRouteLeave((to, from, next) => {
       ref="fileupload"
       :default-import-reference="defaultImportReference"
       :library="object"
-      @uploads-finished="$emit('uploads-finished', $event)"
+      @uploads-finished="emit('uploads-finished', $event)"
     />
   </section>
 </template>