refactor: remove unnecessary utils

resources/assets/js/App.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, nextTick, onMounted, ref } from 'vue'
-import { $, eventBus, hideOverlay, showOverlay } from '@/utils'
+import { eventBus, hideOverlay, showOverlay } from '@/utils'
 import { commonStore, preferenceStore as preferences } from '@/stores'
 import { authService, playbackService, socketListener, socketService } from '@/services'
 
@@ -65,7 +65,7 @@ onMounted(async () => {
 
   // Add an ugly mac/non-mac class for OS-targeting styles.
   // I'm crying inside.
-  $.addClass(document.documentElement, navigator.userAgent.includes('Mac') ? 'mac' : 'non-mac')
+  document.documentElement.classList.add(navigator.userAgent.includes('Mac') ? 'mac' : 'non-mac')
 })
 
 const init = async () => {

resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue

@@ -99,7 +99,7 @@
 import isMobile from 'ismobilejs'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { ref, toRef, watch } from 'vue'
-import { $, eventBus } from '@/utils'
+import { eventBus } from '@/utils'
 import { albumStore, artistStore, preferenceStore as preferences } from '@/stores'
 import { useThirdPartyServices } from '@/composables'
 
@@ -122,9 +122,9 @@ const album = ref<Album>()
 
 watch(showing, (showingExtraPanel) => {
   if (showingExtraPanel && !isMobile.any) {
-    $.addClass(document.documentElement, 'with-extra-panel')
+    document.documentElement.classList.add('with-extra-panel')
   } else {
-    $.removeClass(document.documentElement, 'with-extra-panel')
+    document.documentElement.classList.remove('with-extra-panel')
   }
 })
 
@@ -142,7 +142,7 @@ eventBus.on({
   'SONG_STARTED': async (song: Song) => await fetchSongInfo(song),
   'LOAD_MAIN_CONTENT': (): void => {
     // On ready, add 'with-extra-panel' class.
-    isMobile.any || $.addClass(document.documentElement, 'with-extra-panel')
+    isMobile.any || document.documentElement.classList.add('with-extra-panel')
 
     // Hide the extra panel if on mobile
     isMobile.phone && (showing.value = false)

resources/assets/js/components/song/SongList.vue

@@ -105,7 +105,7 @@ import isMobile from 'ismobilejs'
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { $, eventBus, requireInjection, startDragging } from '@/utils'
+import { eventBus, requireInjection, startDragging } from '@/utils'
 import {
   SelectedSongsKey,
   SongListConfigKey,
@@ -267,9 +267,9 @@ const rowDragStart = (row: SongRow, event: DragEvent) => {
  * Add a "droppable" class and set the drop effect when other songs are dragged over a row.
  */
 const allowDrop = (event: DragEvent) => {
-  if (!allowReordering) return
-
-  $.addClass((event.target as Element).parentElement, 'droppable')
+  if (!allowReordering) return;
+  
+  (event.target as Element).parentElement.classList.add('droppable')
   event.dataTransfer!.dropEffect = 'move'
 
   return false
@@ -289,7 +289,7 @@ const handleDrop = (item: SongRow, event: DragEvent) => {
 }
 
 const removeDroppableState = (event: DragEvent) => {
-  $.removeClass((event.target as Element).parentElement, 'droppable')
+  (event.target as Element).parentElement.classList.remove('droppable')
   return false
 }
 

resources/assets/js/components/utils/HotkeyListener.vue

@@ -10,15 +10,15 @@
 
 <script lang="ts" setup>
 import { GlobalEvents } from 'vue-global-events'
-import { $, eventBus } from '@/utils'
+import { eventBus } from '@/utils'
 import { playbackService, socketService } from '@/services'
 import { favoriteStore, queueStore } from '@/stores'
 
 const togglePlayback = (e: KeyboardEvent) => {
   if (
     !(e.target instanceof Document) &&
-    $.is(e.target as Element, 'input, textarea, button, select') &&
-    !$.is(e.target as Element, 'input[type=range]')
+    (e.target as Element).matches('input, textarea, button, select') &&
+    !(e.target as Element).matches('input[type=range]')
   ) {
     return true
   }
@@ -32,7 +32,7 @@ const togglePlayback = (e: KeyboardEvent) => {
  * Play the previous song when user presses K.
  */
 const playPrev = (e: KeyboardEvent) => {
-  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
+  if (!(e.target instanceof Document) && (e.target as Element).matches('input, select, textarea')) {
     return true
   }
 
@@ -46,7 +46,7 @@ const playPrev = (e: KeyboardEvent) => {
  * Play the next song when user presses J.
  */
 const playNext = (e: KeyboardEvent) => {
-  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
+  if (!(e.target instanceof Document) && (e.target as Element).matches('input, select, textarea')) {
     return true
   }
 
@@ -62,7 +62,7 @@ const playNext = (e: KeyboardEvent) => {
 const search = (e: KeyboardEvent) => {
   if (
     !(e.target instanceof Document) &&
-    ($.is(e.target as Element, 'input, select, textarea') && !$.is(e.target as Element, 'input[type=range]'))
+    (e.target as Element).matches('input, select, textarea') && !(e.target as Element).matches('input[type=range]')
   ) {
     return true
   }
@@ -81,7 +81,7 @@ const search = (e: KeyboardEvent) => {
  * Like/unlike the current song when use presses L.
  */
 const toggleLike = (e: KeyboardEvent) => {
-  if (!(e.target instanceof Document) && $.is(e.target as Element, 'input, select, textarea')) {
+  if (!(e.target instanceof Document) && (e.target as Element).matches('input, select, textarea')) {
     return true
   }
 

resources/assets/js/directives/droppable.ts

@@ -1,23 +1,22 @@
 import { Directive } from 'vue'
-import { $ } from '@/utils'
 
 export const droppable: Directive = {
   created: (el: HTMLElement, binding) => {
     el.addEventListener('dragenter', (event: DragEvent) => {
       event.preventDefault()
-      $.addClass(el, 'droppable')
+      el.classList.add('droppable')
       event.dataTransfer!.dropEffect = 'move'
 
       return false
     })
 
     el.addEventListener('dragover', (event: DragEvent) => event.preventDefault())
-    el.addEventListener('dragleave', () => $.removeClass(el, 'droppable'))
+    el.addEventListener('dragleave', () => el.classList.remove('droppable'))
 
     el.addEventListener('drop', (event: DragEvent) => {
       event.preventDefault()
       event.stopPropagation()
-      $.removeClass(el, 'droppable')
+      el.classList.remove('droppable')
       binding.value(event)
     })
   }

resources/assets/js/utils/$.ts

@@ -2,10 +2,6 @@
  * A utility that aims to replace jQuery for the most basic DOM methods.
  */
 export const $ = {
-  is: (el: Element, selector: string) => el.matches(selector),
-  addClass: (el: Element | null, className: string) => el?.classList.add(className),
-  removeClass: (el: Element | null, className: string) => el?.classList.remove(className),
-
   scrollTo (el: Element, to: number, duration: number, cb?: Closure) {
     if (duration <= 0 || !el) {
       return