chore: some refactors and cleanups

js/app.js

@@ -1,6 +1,6 @@
 import './static-loader'
 import Vue from 'vue'
-import App from './app.vue'
+import App from './app'
 import { http } from './services'
 import { VirtualScroller } from 'vue-virtual-scroller/dist/vue-virtual-scroller'
 import GlobalEvents from 'vue-global-events'
@@ -27,5 +27,5 @@ new Vue({
 })
 
 if (KOEL_ENV !== 'app' && 'serviceWorker' in navigator) {
-  navigator.serviceWorker.register('./sw.js').then(() => { console.log('Service Worker Registered') })
+  navigator.serviceWorker.register('./sw.js').then(() => console.log('Service Worker Registered'))
 }

js/app.vue

@@ -43,7 +43,7 @@ export default {
     Overlay,
     LoginForm,
     EventListeners,
-    SupportKoel: () => import('@/components/meta/support-koel.vue')
+    SupportKoel: () => import('@/components/meta/support-koel')
   },
 
   data () {

js/components/album/info.vue

@@ -48,7 +48,7 @@ export default {
   },
 
   components: {
-    TrackList: () => import('./track-list.vue')
+    TrackList: () => import('./track-list')
   },
 
   data: () => ({

js/components/album/track-list.vue

@@ -25,7 +25,7 @@ export default {
   },
 
   components: {
-    TrackListItem: () => import('./track-list-item.vue')
+    TrackListItem: () => import('./track-list-item')
   }
 }
 </script>

js/components/layout/app-header.vue

@@ -30,8 +30,8 @@ import { event, app } from '@/utils'
 
 export default {
   components: {
-    SearchForm: () => import('@/components/ui/search-form.vue'),
-    UserBadge: () => import('@/components/user/badge.vue')
+    SearchForm: () => import('@/components/ui/search-form'),
+    UserBadge: () => import('@/components/user/badge')
   },
 
   data: () => ({

js/components/layout/main-wrapper/extra-panel.vue

@@ -105,10 +105,10 @@ EXTRA_PANEL_TABS.DEFAULT = EXTRA_PANEL_TABS.LYRICS
 
 export default {
   components: {
-    LyricsPane: () => import('@/components/ui/lyrics-pane.vue'),
-    ArtistInfo: () => import('@/components/artist/info.vue'),
-    AlbumInfo: () => import('@/components/album/info.vue'),
-    YouTubeVideoList: () => import('@/components/ui/youtube-video-list.vue')
+    LyricsPane: () => import('@/components/ui/lyrics-pane'),
+    ArtistInfo: () => import('@/components/artist/info'),
+    AlbumInfo: () => import('@/components/album/info'),
+    YouTubeVideoList: () => import('@/components/ui/youtube-video-list')
   },
 
   data: () => ({

js/components/layout/main-wrapper/index.vue

@@ -10,10 +10,10 @@
 <script>
 export default {
   components: {
-    Sidebar: () => import('@/components/layout/main-wrapper/sidebar.vue'),
-    MainContent: () => import('@/components/layout/main-wrapper/main-content.vue'),
-    ExtraPanel: () => import('@/components/layout/main-wrapper/extra-panel.vue'),
-    ModalWrapper: () => import('@/components/layout/modal-wrapper.vue')
+    Sidebar: () => import('@/components/layout/main-wrapper/sidebar'),
+    MainContent: () => import('@/components/layout/main-wrapper/main-content'),
+    ExtraPanel: () => import('@/components/layout/main-wrapper/extra-panel'),
+    ModalWrapper: () => import('@/components/layout/modal-wrapper')
   }
 }
 </script>

js/components/layout/main-wrapper/sidebar.vue

@@ -62,7 +62,7 @@ export default {
   views,
 
   components: {
-    PlaylistList: () => import('@/components/playlist/sidebar-list.vue')
+    PlaylistList: () => import('@/components/playlist/sidebar-list')
   },
 
   data: () => ({

js/components/layout/modal-wrapper.vue

@@ -14,12 +14,12 @@ import { event } from '@/utils'
 
 export default {
   components: {
-    CreateSmartPlaylistForm: () => import('@/components/playlist/smart-playlist/create-form.vue'),
-    EditSmartPlaylistForm: () => import('@/components/playlist/smart-playlist/edit-form.vue'),
-    AddUserForm: () => import('@/components/user/add-form.vue'),
-    EditUserForm: () => import('@/components/user/edit-form.vue'),
-    EditSongForm: () => import('@/components/song/edit-form.vue'),
-    AboutDialog: () => import('@/components/meta/about-dialog.vue')
+    CreateSmartPlaylistForm: () => import('@/components/playlist/smart-playlist/create-form'),
+    EditSmartPlaylistForm: () => import('@/components/playlist/smart-playlist/edit-form'),
+    AddUserForm: () => import('@/components/user/add-form'),
+    EditUserForm: () => import('@/components/user/edit-form'),
+    EditSongForm: () => import('@/components/song/edit-form'),
+    AboutDialog: () => import('@/components/meta/about-dialog')
   },
 
   data: () => ({

js/components/playlist/create-new-context-menu.vue

@@ -10,7 +10,7 @@ import { event } from '@/utils'
 
 export default {
   components: {
-    BaseContextMenu: () => import('@/components/ui/context-menu.vue')
+    BaseContextMenu: () => import('@/components/ui/context-menu')
   },
 
   methods: {

js/components/playlist/item-context-menu.vue

@@ -10,7 +10,7 @@ import { event } from '@/utils'
 
 export default {
   components: {
-    BaseContextMenu: () => import('@/components/ui/context-menu.vue')
+    BaseContextMenu: () => import('@/components/ui/context-menu')
   },
 
   props: {

js/components/playlist/sidebar-item.vue

@@ -33,8 +33,8 @@ const VALID_PLAYLIST_TYPES = ['playlist', 'favorites', 'recently-played']
 
 export default {
   components: {
-    ContextMenu: () => import('@/components/playlist/item-context-menu.vue'),
-    NameEditor: () => import('@/components/playlist/name-editor.vue')
+    ContextMenu: () => import('@/components/playlist/item-context-menu'),
+    NameEditor: () => import('@/components/playlist/name-editor')
   },
 
   props: {

js/components/playlist/sidebar-list.vue

@@ -42,8 +42,8 @@ import router from '@/router'
 
 export default {
   components: {
-    PlaylistItem: () => import('@/components/playlist/sidebar-item.vue'),
-    ContextMenu: () => import('@/components/playlist/create-new-context-menu.vue')
+    PlaylistItem: () => import('@/components/playlist/sidebar-item'),
+    ContextMenu: () => import('@/components/playlist/create-new-context-menu')
   },
 
   data: () => ({

js/components/playlist/smart-playlist/edit-form.vue

@@ -39,9 +39,9 @@ import { playlistStore } from '@/stores'
 
 export default {
   components: {
-    FormBase: () => import('./form-base.vue'),
-    RuleGroup: () => import('@/components/playlist/smart-playlist/rule-group.vue'),
-    SoundBar: () => import('@/components/ui/sound-bar.vue')
+    FormBase: () => import('./form-base'),
+    RuleGroup: () => import('@/components/playlist/smart-playlist/rule-group'),
+    SoundBar: () => import('@/components/ui/sound-bar')
   },
 
   props: {

js/components/screens/album-list.vue

@@ -21,8 +21,8 @@ export default {
   mixins: [infiniteScroll],
 
   components: {
-    AlbumCard: () => import('@/components/album/card.vue'),
-    ViewModeSwitch: () => import('@/components/ui/view-mode-switch.vue')
+    AlbumCard: () => import('@/components/album/card'),
+    ViewModeSwitch: () => import('@/components/ui/view-mode-switch')
   },
 
   data: () => ({

js/components/screens/artist-list.vue

@@ -21,8 +21,8 @@ import infiniteScroll from '@/mixins/infinite-scroll'
 export default {
   mixins: [infiniteScroll],
   components: {
-    ArtistCard: () => import('@/components/artist/card.vue'),
-    ViewModeSwitch: () => import('@/components/ui/view-mode-switch.vue')
+    ArtistCard: () => import('@/components/artist/card'),
+    ViewModeSwitch: () => import('@/components/ui/view-mode-switch')
   },
 
   data: () => ({

js/components/song/context-menu.vue

@@ -48,7 +48,7 @@ export default {
   mixins: [songMenuMethods],
 
   components: {
-    BaseContextMenu: () => import('@/components/ui/context-menu.vue')
+    BaseContextMenu: () => import('@/components/ui/context-menu')
   },
 
   data: () => ({

js/components/song/list.vue

@@ -55,7 +55,7 @@ import { playlistStore, queueStore, songStore, favoriteStore } from '@/stores'
 import { playback } from '@/services'
 import router from '@/router'
 
-const songItem = () => import('@/components/song/item.vue')
+const songItem = () => import('@/components/song/item')
 const VALID_SONG_LIST_TYPES = ['all-songs', 'queue', 'playlist', 'favorites', 'recently-played', 'artist', 'album']
 
 export default {
@@ -81,7 +81,7 @@ export default {
 
   components: {
     songItem,
-    ContextMenu: () => import('@/components/song/context-menu.vue')
+    ContextMenu: () => import('@/components/song/context-menu')
   },
 
   data: () => ({

js/components/ui/lyrics-pane.vue

@@ -20,7 +20,7 @@ export default {
   },
 
   components: {
-    TextZoomer: () => import('@/components/ui/text-zoomer.vue')
+    TextZoomer: () => import('@/components/ui/text-zoomer')
   },
 
   data: () => ({

js/components/ui/overlay.vue

@@ -20,7 +20,7 @@ import { event } from '@/utils'
 
 export default {
   components: {
-    SoundBar: () => import('@/components/ui/sound-bar.vue')
+    SoundBar: () => import('@/components/ui/sound-bar')
   },
 
   data: () => ({

js/mixins/has-song-list.js

@@ -10,9 +10,9 @@ import { event } from '@/utils'
 
 export default {
   components: {
-    SongList: () => import('@/components/song/list.vue'),
-    SongListControls: () => import('@/components/song/list-controls.vue'),
-    ControlsToggler: () => import('@/components/song/list-controls-toggler.vue')
+    SongList: () => import('@/components/song/list'),
+    SongListControls: () => import('@/components/song/list-controls'),
+    ControlsToggler: () => import('@/components/song/list-controls-toggler')
   },
 
   data: () => ({

js/mixins/infinite-scroll.js

@@ -5,7 +5,7 @@
  */
 export default {
   components: {
-    ToTopButton: () => import('@/components/ui/to-top-button.vue')
+    ToTopButton: () => import('@/components/ui/to-top-button')
   },
 
   data: () => ({

js/remote/app.js

@@ -1,7 +1,7 @@
 import './static-loader'
 import Vue from 'vue'
 import { http } from '@/services'
-import App from './app.vue'
+import App from './app'
 
 new Vue({
   el: '#app',

js/remote/app.vue

@@ -67,7 +67,7 @@
   import { socket, ls } from '@/services'
   import { userStore } from '@/stores'
   import { event } from '@/utils'
-  import loginForm from '@/components/auth/login-form.vue'
+  import loginForm from '@/components/auth/login-form'
 
   let volumeSlider
   const MAX_RETRIES = 10

js/router.js

@@ -4,6 +4,7 @@ import { loadMainView } from './utils'
 import { artistStore, albumStore, songStore, queueStore, playlistStore, userStore } from './stores'
 import { playback } from './services'
 import { views } from '@/config'
+import { use } from '@/utils'
 
 export default {
   routes: {
@@ -19,40 +20,19 @@ export default {
     '/youtube': () => loadMainView(views.YOUTUBE),
     '/visualizer': () => loadMainView(views.VISUALIZER),
     '/profile': () => loadMainView(views.PROFILE),
+    '/album/(\\d+)': id => use(albumStore.byId(~~id), album => loadMainView(views.ALBUM, album)),
+    '/artist/(\\d+)': id => use(artistStore.byId(~~id), artist => loadMainView(views.ARTIST, artist)),
+    '/playlist/(\\d+)': id => use(playlistStore.byId(~~id), playlist => loadMainView(views.PLAYLIST, playlist)),
 
-    '/album/(\\d+)': id => {
-      const album = albumStore.byId(~~id)
-      if (album) {
-        loadMainView(views.ALBUM, album)
-      }
-    },
-
-    '/artist/(\\d+)': id => {
-      const artist = artistStore.byId(~~id)
-      if (artist) {
-        loadMainView(views.ARTIST, artist)
-      }
-    },
-
-    '/playlist/(\\d+)': id => {
-      const playlist = playlistStore.byId(~~id)
-      if (playlist) {
-        loadMainView(views.PLAYLIST, playlist)
-      }
-    },
-
-    '/song/([a-z0-9]{32})': id => {
-      const song = songStore.byId(id)
-      if (!song) return
-
+    '/song/([a-z0-9]{32})': id => use(songStore.byId(id), song => {
       if (isMobile.apple.device) {
         // Mobile Safari doesn't allow autoplay, so we just queue.
         queueStore.queue(song)
         loadMainView(views.QUEUE)
       } else {
         playback.queueAndPlay(song)
       }
-    }
+    })
   },
 
   init () {

js/tests/components/album/info.spec.js

@@ -1,4 +1,4 @@
-import AlbumInfo from '@/components/album/info.vue'
+import AlbumInfo from '@/components/album/info'
 import factory from '@/tests/factory'
 
 describe('components/album/info', () => {

js/tests/components/album/track-list-item.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/album/track-list-item.vue'
+import Component from '@/components/album/track-list-item'
 import { sharedStore, songStore, queueStore } from '@/stores'
 import { playback, ls } from '@/services'
 import factory from '@/tests/factory'

js/tests/components/album/track-list.spec.js

@@ -1,5 +1,5 @@
-import Component from '@/components/album/track-list.vue'
-import TrackListItem from '@/components/album/track-list-item.vue'
+import Component from '@/components/album/track-list'
+import TrackListItem from '@/components/album/track-list-item'
 import factory from '@/tests/factory'
 
 describe('components/album/track-list', () => {

js/tests/components/artist/card.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/artist/card.vue'
+import Component from '@/components/artist/card'
 import Thumbnail from '@/components/ui/album-artist-thumbnail'
 import factory from '@/tests/factory'
 import { playback, download } from '@/services'

js/tests/components/artist/info.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/artist/info.vue'
+import Component from '@/components/artist/info'
 import factory from '@/tests/factory'
 
 describe('components/artist/info', () => {

js/tests/components/auth/login-form.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/auth/login-form.vue'
+import Component from '@/components/auth/login-form'
 import { userStore } from '@/stores'
 import { mock } from '@/tests/__helpers__'
 

js/tests/components/layout/app-header.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/layout/app-header.vue'
+import Component from '@/components/layout/app-header'
 import { event } from '@/utils'
 import { mock } from '@/tests/__helpers__'
 

js/tests/components/layout/main-wrapper/extra-panel.spec.js

@@ -1,5 +1,5 @@
 import each from 'jest-each'
-import Component from '@/components/layout/main-wrapper/extra-panel.vue'
+import Component from '@/components/layout/main-wrapper/extra-panel'
 import factory from '@/tests/factory'
 import { event } from '@/utils'
 import { songInfo } from '@/services'

js/tests/components/layout/main-wrapper/index.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/layout/main-wrapper/index.vue'
+import Component from '@/components/layout/main-wrapper/index'
 
 describe('component/layout/main-wrapper/index', () => {
   it('renders properly', async done => {

js/tests/components/layout/main-wrapper/main-content.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/layout/main-wrapper/main-content.vue'
+import Component from '@/components/layout/main-wrapper/main-content'
 import { event } from '@/utils'
 import factory from '@/tests/factory'
 

js/tests/components/layout/main-wrapper/sidebar.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/layout/main-wrapper/sidebar.vue'
+import Component from '@/components/layout/main-wrapper/sidebar'
 import { sharedStore } from '@/stores'
 import factory from '@/tests/factory'
 

js/tests/components/playlist/name-editor.spec.js

@@ -1,4 +1,4 @@
-import Component from '@/components/playlist/name-editor.vue'
+import Component from '@/components/playlist/name-editor'
 import factory from '@/tests/factory'
 import { playlistStore } from '@/stores'
 import { mock } from '@/tests/__helpers__'