Convert to TypeScript (#36)

Author: phanan

.babelrc

@@ -1,13 +1,5 @@
 {
   "presets": [
-    "env",
-    "stage-0"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "babel-plugin-dynamic-import-node"
-      ]
-    }
-  }
+    "@babel/preset-env"
+  ]
 }

.eslintrc

@@ -1,6 +1,20 @@
 {
-  "parser": "babel-eslint",
-  "extends": "vue",
+  "parser": "vue-eslint-parser",
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "ecmaVersion": 2020
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "@vue/standard",
+    "@vue/typescript/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "globals": {
     "KOEL_ENV": true,
     "NODE_ENV": true,
@@ -10,7 +24,17 @@
   "rules": {
     "camelcase": 0,
     "no-multi-str": 0,
-    "quotes": 0
+    "no-empty": 0,
+    "quotes": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/camelcase": 0,
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/consistent-type-assertions": 0,
+    "@typescript-eslint/no-inferrable-types": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/ban-ts-ignore": 0,
+    "vue/no-side-effects-in-computed-properties": 0,
+    "vue/valid-v-on": 0
   }
 }
-

.travis.yml

@@ -1,13 +1,9 @@
 language: node_js
 node_js:
+  - 14
   - 13
   - 12
   - 11
   - 10
-  - 8
-
-matrix:
-  allow_failures:
-    - node_js: 13
 
 script: yarn coverage

jest.config.js

@@ -1,12 +1,14 @@
 module.exports = {
   moduleFileExtensions: [
+    'ts',
     'js',
     'vue'
   ],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/js/$1'
   },
   transform: {
+    '^.+\\.ts?$': '<rootDir>/node_modules/ts-jest',
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
   },
@@ -17,7 +19,7 @@ module.exports = {
     KOEL_ENV: 'web',
     NODE_ENV: 'test'
   },
-  setupTestFrameworkScriptFile: '<rootDir>/js/tests/setup.js',
+  setupFilesAfterEnv: ['<rootDir>/js/tests/setup.ts'],
   verbose: true,
   collectCoverage: true,
   coverageReporters: ['lcov', 'json', 'html'],

js/app.js

@@ -0,0 +1,28 @@
+/// <reference path="./types.d.ts"/>
+import './static-loader'
+import Vue, { VNode, CreateElement } from 'vue'
+import App from './app.vue'
+import { http } from './services/index'
+
+if (KOEL_ENV === 'app') {
+  Vue.use(require('vue-electron'))
+}
+
+Vue.config.productionTip = false
+
+/**
+ * For Ancelot, the ancient cross of war
+ * for the holy town of Gods
+ * Gloria, gloria perpetua
+ * in this dawn of victorya
+ */
+/* eslint no-new: 0 */
+new Vue({
+  el: '#app',
+  render: (h: CreateElement): VNode => h(App),
+  created: (): void => http.init()
+})
+
+if (KOEL_ENV !== 'app' && 'serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw.js').then((): void => console.log('Service Worker Registered'))
+}

js/app.ts

@@ -20,23 +20,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue'
 
-import AppHeader from '@/components/layout/app-header'
-import AppFooter from '@/components/layout/app-footer/index'
-import EventListeners from '@/components/utils/event-listeners'
-import Hotkeys from '@/components/utils/hotkeys'
-import LoginForm from '@/components/auth/login-form'
-import MainWrapper from '@/components/layout/main-wrapper/index'
-import Overlay from '@/components/ui/overlay'
+import AppHeader from '@/components/layout/app-header.vue'
+import AppFooter from '@/components/layout/app-footer/index.vue'
+import EventListeners from '@/components/utils/event-listeners.vue'
+import Hotkeys from '@/components/utils/hotkeys.vue'
+import LoginForm from '@/components/auth/login-form.vue'
+import MainWrapper from '@/components/layout/main-wrapper/index.vue'
+import Overlay from '@/components/ui/overlay.vue'
 
 import { event, showOverlay, hideOverlay, $, app as appUtils } from '@/utils'
 import { sharedStore, favoriteStore, queueStore, preferenceStore as preferences } from '@/stores'
 import { playback, ls, socket, http } from '@/services'
 import { clickaway, droppable, focus } from '@/directives'
 
-export default {
+export default Vue.extend({
   components: {
     Hotkeys,
     AppHeader,
@@ -45,47 +45,38 @@ export default {
     Overlay,
     LoginForm,
     EventListeners,
-    SongContextMenu: () => import('@/components/song/context-menu'),
-    SupportKoel: () => import('@/components/meta/support-koel')
+    SongContextMenu: () => import('@/components/song/context-menu.vue'),
+    SupportKoel: () => import('@/components/meta/support-koel.vue')
   },
 
   data: () => ({
     authenticated: false,
     isDesktopApp: KOEL_ENV === 'app',
-    contextMenuSongs: []
+    contextMenuSongs: [] as Song[]
   }),
 
-  async mounted () {
+  async mounted (): Promise<void> {
     // The app has just been initialized, check if we can get the user data with an already existing token
     if (ls.get('jwt-token')) {
       this.authenticated = true
       await this.init()
     }
 
-    // Create the element to be the ghost drag image.
-    const dragGhost = document.createElement('div')
-    dragGhost.id = 'dragGhost'
-    document.body.appendChild(dragGhost)
-
-    // And the textarea to copy stuff
-    const copyArea = document.createElement('textarea')
-    copyArea.id = 'copyArea'
-    document.body.appendChild(copyArea)
-
     // 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')
   },
 
   created () {
-    event.on(event.$names.CONTEXT_MENU_REQUESTED, (clickEvent, songs) => {
-      this.contextMenuSongs = [].concat(songs)
-      this.$nextTick(() => this.$refs.songContextMenu.open(clickEvent.pageY, clickEvent.pageX))
+    event.on(event.$names.CONTEXT_MENU_REQUESTED, (e: MouseEvent, songs: Song[]): void => {
+      this.contextMenuSongs = ([] as Song[]).concat(songs)
+      // @ts-ignore because of .open()
+      this.$nextTick((): void => this.$refs.songContextMenu.open(e.pageY, e.pageX))
     })
   },
 
   methods: {
-    async init () {
+    async init (): Promise<void> {
       showOverlay()
       await socket.init()
 
@@ -100,20 +91,18 @@ export default {
 
           this.requestNotifPermission()
 
-          // To confirm or not to confirm closing, it's a question.
-          window.onbeforeunload = e => {
+          window.addEventListener('beforeunload', (e: BeforeUnloadEvent): void => {
             if (!preferences.confirmClosing) {
               return
             }
 
-            // Notice that a custom message like this has ceased to be supported
-            // starting from Chrome 51.
-            return 'You asked Koel to confirm before closing, so here it is.'
-          }
+            e.preventDefault()
+            e.returnValue = ''
+          })
 
           // Ping the server everytime the window is focused, so that we don't have those
           // "suddent" logout.
-          window.addEventListener('focus', () => http.get('/ping'))
+          window.addEventListener('focus', (): void => http.get('/ping'))
 
           this.subscribeToBroadcastedEvents()
 
@@ -129,32 +118,30 @@ export default {
     /**
      * Request for notification permission if it's not provided and the user is OK with notifs.
      */
-    requestNotifPermission () {
+    requestNotifPermission (): void {
       if (window.Notification && preferences.notify && window.Notification.permission !== 'granted') {
-        window.Notification.requestPermission(result => (result === 'denied' && (preferences.notify = false)))
+        window.Notification.requestPermission().then((result: string): void => {
+          preferences.notify = result === 'denied'
+        })
       }
     },
 
-    /**
-     * When the user logs in, set the whole app to be "authenticated" and initialize it.
-     */
-    onUserLoggedIn () {
+    onUserLoggedIn (): void {
       this.authenticated = true
       this.init()
     },
 
-    /**
-     * Subscribes to the events broadcasted e.g. from the remote controller.
-     */
-    subscribeToBroadcastedEvents () {
-      socket.listen(event.$names.SOCKET_TOGGLE_FAVORITE, () => {
-        queueStore.current && favoriteStore.toggleOne(queueStore.current)
+    subscribeToBroadcastedEvents (): void {
+      socket.listen(event.$names.SOCKET_TOGGLE_FAVORITE, (): void => {
+        if (queueStore.current) {
+          favoriteStore.toggleOne(queueStore.current)
+        }
       })
     },
 
-    triggerMaximize: () => appUtils.triggerMaximize()
+    triggerMaximize: (): void => appUtils.triggerMaximize()
   }
-}
+})
 
 // …and the global directives
 Vue.directive('koel-focus', focus)
@@ -166,7 +153,6 @@ Vue.directive('koel-droppable', droppable)
 @import "~#/app.scss";
 
 #dragGhost {
-  position: absolute;
   display: inline-block;
   background: $colorGreen;
   padding: .8rem;
@@ -175,8 +161,10 @@ Vue.directive('koel-droppable', droppable)
   font-family: $fontFamily;
   font-size: 1rem;
   font-weight: $fontWeight_Thin;
-  top: -100px;
-  left: 0px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
 
   /**
    * We can totally hide this element on touch devices, because there's