Switch to Vue's useTemplateRef() function (#8308)

eslint.config.mjs

@@ -119,6 +119,7 @@ export default [
       }],
 
       'vue/no-unused-emit-declarations': 'error',
+      'vue/prefer-use-template-ref': 'error',
 
       'jsdoc/check-alignment': 'error',
       'jsdoc/check-property-names': 'error',

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -251,7 +251,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import FtCard from '../ft-card/ft-card.vue'
@@ -381,7 +381,7 @@ function search(query) {
   emit('search', query)
 }
 
-const searchBar = ref(null)
+const searchBar = useTemplateRef('searchBar')
 
 /**
  * @param {KeyboardEvent} event

src/renderer/components/FtCommunityPost/FtCommunityPost.vue

@@ -163,7 +163,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import autolinker from 'autolinker'
 import { A11y, Navigation, Pagination } from 'swiper/modules'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, useTemplateRef } from 'vue'
 
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
@@ -305,7 +305,7 @@ function getBestQualityImage(imageArray) {
   return imageArrayCopy[0]?.url?.replace(/-c-fcrop64=[^-]+/i, '') ?? ''
 }
 
-const swiperContainerRef = ref(null)
+const swiperContainerRef = useTemplateRef('swiperContainerRef')
 
 if (postType === 'multiImage' && postContent.content.length > 0) {
   onMounted(() => {

src/renderer/components/FtCreatePlaylistPrompt/FtCreatePlaylistPrompt.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtButton from '../FtButton/FtButton.vue'
@@ -83,7 +83,7 @@ const playlistPersistenceDisabled = computed(() => {
   return playlistName.value === '' || playlistNameBlank.value || playlistWithNameExists.value
 })
 
-const playlistNameInput = ref(null)
+const playlistNameInput = useTemplateRef('playlistNameInput')
 
 onMounted(() => {
   // Faster to input required playlist name

src/renderer/components/FtInput/FtInput.vue

@@ -113,7 +113,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, reactive, ref, shallowRef, useId, watch } from 'vue'
+import { computed, reactive, ref, shallowRef, useId, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtTooltip from '../FtTooltip/FtTooltip.vue'
@@ -195,7 +195,7 @@ const emit = defineEmits(['clear', 'click', 'input', 'remove'])
 
 const id = useId()
 
-const inputRef = ref(null)
+const inputRef = useTemplateRef('inputRef')
 
 const inputData = ref(props.value)
 const searchState = reactive({

src/renderer/components/FtInputTags/FtInputTags.vue

@@ -79,7 +79,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { ref, useId } from 'vue'
+import { useId, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtInput from '../FtInput/FtInput.vue'
@@ -139,7 +139,7 @@ const { t } = useI18n()
 
 const id = useId()
 
-const tagNameInput = ref(null)
+const tagNameInput = useTemplateRef('tagNameInput')
 
 /**
  * @param {string} text

src/renderer/components/FtPlaylistAddVideoPrompt/FtPlaylistAddVideoPrompt.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -282,7 +282,7 @@ const anyPlaylistContainsVideosToBeAdded = computed(() => {
   return playlistIdsContainingVideosToBeAdded.value.size > 0
 })
 
-const searchBar = ref(null)
+const searchBar = useTemplateRef('searchBar')
 
 watch(allPlaylistsLength, (val, oldVal) => {
   const allPlaylistIds = new Set()

src/renderer/components/FtProfileSelector/FtProfileSelector.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, useId } from 'vue'
+import { computed, nextTick, ref, useId, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { useRouter } from 'vue-router'
 
@@ -143,7 +143,7 @@ function isActiveProfile(profile) {
   return profile._id === activeProfile.value._id
 }
 
-const profileListRef = ref(null)
+const profileListRef = useTemplateRef('profileListRef')
 
 function toggleProfileList() {
   profileListShown.value = !profileListShown.value
@@ -178,8 +178,7 @@ function handleProfileListFocusOut() {
   }
 }
 
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const iconButton = ref(null)
+const iconButton = useTemplateRef('iconButton')
 
 function handleProfileListEscape() {
   iconButton.value?.focus()

src/renderer/components/FtPrompt/FtPrompt.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, useId, useTemplateRef } from 'vue'
 
 import store from '../../store/index'
 
@@ -103,7 +103,7 @@ const emit = defineEmits(['click'])
 
 const id = useId()
 
-const promptCard = ref(null)
+const promptCard = useTemplateRef('promptCard')
 
 let promptButtons = []
 let lastActiveElement = null

src/renderer/components/FtShareButton/FtShareButton.vue

@@ -124,7 +124,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { copyToClipboard, openExternalLink } from '../../helpers/utils'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
@@ -165,7 +165,7 @@ const props = defineProps({
 })
 
 const includeTimestamp = ref(false)
-const iconButton = ref(null)
+const iconButton = useTemplateRef('iconButton')
 
 const isChannel = computed(() => {
   return props.shareTargetType === 'Channel'

src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue

@@ -90,7 +90,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, shallowRef, useId } from 'vue'
+import { computed, ref, shallowRef, useId, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtButton from '../FtButton/FtButton.vue'
@@ -242,7 +242,7 @@ function handleSubscription(profile) {
   }
 }
 
-const subscribeButton = ref(null)
+const subscribeButton = useTemplateRef('subscribeButton')
 
 function handleProfileDropdownFocusOut() {
   if (subscribeButton.value && !subscribeButton.value.matches(':focus-within')) {

src/renderer/components/PasswordDialog/PasswordDialog.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, useTemplateRef } from 'vue'
 
 import FtCard from '../ft-card/ft-card.vue'
 import FtInput from '../FtInput/FtInput.vue'
@@ -25,7 +25,7 @@ import store from '../../store/index'
 
 const emit = defineEmits(['unlocked'])
 
-const password = ref(null)
+const password = useTemplateRef('password')
 
 onMounted(() => {
   password.value.focus()

src/renderer/components/PlaylistInfo/PlaylistInfo.vue

@@ -263,7 +263,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { useRouter } from 'vue-router'
 
@@ -609,7 +609,7 @@ async function savePlaylistInfo() {
   }
 }
 
-const playlistTitleInput = ref(null)
+const playlistTitleInput = useTemplateRef('playlistTitleInput')
 
 function enterEditMode() {
   newTitle.value = props.title
@@ -893,7 +893,7 @@ const updateQueryDebounced = debounce((newQuery) => {
   emit('search-video-query-change', newQuery)
 }, 500)
 
-const searchInput = ref(null)
+const searchInput = useTemplateRef('searchInput')
 
 /**
  * @param {KeyboardEvent} event

src/renderer/components/SideNavMoreOptions/SideNavMoreOptions.vue

@@ -197,7 +197,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import store from '../../store/index'
@@ -206,7 +206,7 @@ const SUPPORTS_LOCAL_API = process.env.SUPPORTS_LOCAL_API
 
 const openMoreOptions = ref(false)
 
-const menuRef = ref(null)
+const menuRef = useTemplateRef('menuRef')
 
 /** @type {import('vue').ComputedRef<boolean>} */
 const trendingVisible = computed(() => {

src/renderer/components/TopNav/TopNav.vue

@@ -123,7 +123,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -369,10 +369,8 @@ function showSearchFilters() {
   store.dispatch('showSearchFilters')
 }
 
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const searchContainer = ref(null)
-/** @type {import('vue').Ref<InstanceType<typeof FtInput> | null>} */
-const searchInput = ref(null)
+const searchContainer = useTemplateRef('searchContainer')
+const searchInput = useTemplateRef('searchInput')
 
 /** @type {import('vue').ComputedRef<any>} */
 const searchSettings = computed(() => store.getters.getSearchSettings)

src/renderer/components/WatchVideoChapters/WatchVideoChapters.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import FtCard from '../ft-card/ft-card.vue'
@@ -86,8 +86,7 @@ const props = defineProps({
 
 const emit = defineEmits(['timestamp-event'])
 
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const chaptersWrapper = ref(null)
+const chaptersWrapper = useTemplateRef('chaptersWrapper')
 
 let chaptersVisible = false
 const currentIndex = ref(props.currentChapterIndex)

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -45,7 +45,7 @@
 <script setup>
 import autolinker from 'autolinker'
 
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, useTemplateRef } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../FtTimestampCatcher.vue'
 
@@ -67,7 +67,7 @@ const props = defineProps({
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
-const descriptionContainer = ref()
+const descriptionContainer = useTemplateRef('descriptionContainer')
 const showFullDescription = ref(false)
 const showControls = ref(false)
 

src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue

@@ -29,7 +29,6 @@
     </div>
     <div
       v-else-if="comments.length === 0"
-      ref="liveChatMessage"
       class="messageContainer liveChatMessage"
     >
       <p
@@ -225,7 +224,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import autolinker from 'autolinker'
-import { computed, nextTick, onBeforeUnmount, ref, shallowReactive } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, shallowReactive, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { YTNodes } from 'youtubei.js'
 
@@ -370,8 +369,7 @@ function startLiveChatLocal() {
   liveChatInstance.start()
 }
 
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const commentsRef = ref(null)
+const commentsRef = useTemplateRef('commentsRef')
 
 /**
  * @param {import ('youtubei.js/dist/src/parser/continuations').LiveChatContinuation} initialData

src/renderer/views/History/History.vue

@@ -82,7 +82,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
 
@@ -270,7 +270,7 @@ if (oldQuery != null && oldQuery !== '') {
   filterHistory()
 }
 
-const searchBar = ref(null)
+const searchBar = useTemplateRef('searchBar')
 
 /**
  * @param {KeyboardEvent} event

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -82,7 +82,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch, useTemplateRef } from 'vue'
 import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -110,8 +110,7 @@ const query = ref('')
 const subscribedChannels = ref([])
 const filteredChannels = ref([])
 
-/** @type {import('vue').Ref<HTMLInputElement | null>} */
-const searchBarChannels = ref(null)
+const searchBarChannels = useTemplateRef('searchBarChannels')
 
 /** @type {import('vue').ComputedRef<object>} */
 const activeProfile = computed(() => {

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -131,7 +131,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -244,14 +244,10 @@ function changeTab(tab) {
   }
 }
 
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const videosTab = ref(null)
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const liveTab = ref(null)
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const shortsTab = ref(null)
-/** @type {import('vue').Ref<HTMLDivElement | null>} */
-const communityTab = ref(null)
+const videosTab = useTemplateRef('videosTab')
+const liveTab = useTemplateRef('liveTab')
+const shortsTab = useTemplateRef('shortsTab')
+const communityTab = useTemplateRef('communityTab')
 
 /**
  * @param {KeyboardEvent} event

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -97,7 +97,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
 
@@ -409,7 +409,7 @@ if (oldQuery != null && oldQuery !== '') {
   filterPlaylist()
 }
 
-const searchBar = ref(null)
+const searchBar = useTemplateRef('searchBar')
 
 /**
  * @param {KeyboardEvent} event