chore: linting

resources/assets/.eslintrc → .eslintrc

@@ -12,6 +12,11 @@
     "@vue/standard",
     "@vue/typescript/recommended"
   ],
+  "ignorePatterns": [
+    "cypress/fixtures",
+    "cypress/screenshots",
+    "resources/assets/js/tests/__coverage__"
+  ],
   "plugins": [
     "@typescript-eslint"
   ],

cypress/integration/favorites.spec.ts

@@ -55,7 +55,6 @@ context('Favorites', { scrollBehavior: false }, () => {
     cy.$assertFavoriteSongCount(4)
   })
 
-
   it('deletes a favorite with Unlike button', () => {
     cy.intercept('POST', '/api/interaction/like', {})
     cy.$clickSidebarItem('Favorites')

cypress/integration/playlists.spec.ts

@@ -229,8 +229,8 @@ context('Playlists', () => {
     cy.findByText('Created playlist "My Smart Playlist."').should('be.visible')
 
     cy.get('#playlistWrapper .heading-wrapper')
-        .should('be.visible')
-        .and('contain', 'My Smart Playlist')
+      .should('be.visible')
+      .and('contain', 'My Smart Playlist')
 
     cy.$assertSidebarItemActive('My Smart Playlist')
     cy.$assertPlaylistSongCount('My Smart Playlist', 3)

cypress/integration/song-context-menu.spec.ts

@@ -84,9 +84,9 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
       })
 
       cy.findByTestId('song-context-menu').within(() => {
-          cy.findByText('Add To').click()
-          cy.findByText(config.menuItem).click()
-        })
+        cy.findByText('Add To').click()
+        cy.findByText(config.menuItem).click()
+      })
 
       cy.$clickSidebarItem('Current Queue')
       cy.get('#queueWrapper').within(() => {
@@ -197,13 +197,13 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.findByTestId('song-context-menu').within(() => cy.findByText('Edit').should('not.exist'))
   })
 
-  it("copies a song's URL", () => {
+  it('copies a song\'s URL', () => {
     cy.$login()
     cy.$clickSidebarItem('All Songs')
 
-    cy.window().then(window => cy.spy(window.document, 'execCommand').as('copy'));
+    cy.window().then(window => cy.spy(window.document, 'execCommand').as('copy'))
     cy.get('#songsWrapper').within(() => cy.get('tr.song-item:first-child').rightclick())
     cy.findByTestId('song-context-menu').within(() => cy.findByText('Copy Shareable URL').click())
-    cy.get('@copy').should('be.calledWithExactly', 'copy');
+    cy.get('@copy').should('be.calledWithExactly', 'copy')
   })
 })

package.json

@@ -94,15 +94,11 @@
     "webpack-node-externals": "^3.0.0"
   },
   "scripts": {
-    "lint": "eslint ./cypress/**/*.ts",
-    "watch.bak": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll.bak": "yarn watch -- --watch-poll",
-    "hot.bak": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "lint": "eslint ./resources/assets/js/**/*.ts && eslint ./cypress/**/*.ts",
     "test:e2e": "kill-port 8080 && start-test dev :8080 'cypress open'",
     "test:e2e:ci": "kill-port 8080 && start-test 'php artisan serve --port=8080 --quiet' :8080 'cypress run'",
     "build": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "build-demo": "cross-env NODE_ENV=demo node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js -p",
-    "production.bak": "yarn build",
     "dev": "start-test 'php artisan serve --port=8000 --quiet' :8000 hot",
     "development": "mix",
     "watch": "mix watch",
@@ -122,6 +118,9 @@
     ],
     "resources/assets/**/*.ts": [
       "eslint"
+    ],
+    "cypress/**/*.ts": [
+      "eslint"
     ]
   }
 }

resources/assets/js/__tests__/setup.ts

@@ -1,4 +1,3 @@
-/// <reference path="./types.d.ts"/>
 import '@babel/polyfill'
 import Vue from 'vue'
 import lodash from 'lodash'

resources/assets/js/__tests__/types.d.ts

@@ -12,7 +12,7 @@ declare namespace NodeJS {
     Vue: any
     __UNIT_TESTING__: boolean
     _: any
-    noop: Function
+    noop: TAnyFunction,
     IntersectionObserver: any
 
     document: Document

resources/assets/js/composables/useSongList.ts

@@ -6,12 +6,12 @@ import isMobile from 'ismobilejs'
 
 import { playbackService } from '@/services'
 import { eventBus } from '@/utils'
+import { queueStore, songStore } from '@/stores'
+import router from '@/router'
 
 import ControlsToggler from '@/components/ui/ScreenControlsToggler.vue'
 import SongList from '@/components/song/SongList.vue'
 import SongListControls from '@/components/song/SongListControls.vue'
-import { queueStore, songStore } from '@/stores'
-import router from '@/router'
 
 export const useSongList = (songs: Ref<Song[]>, controlsConfig: Partial<SongListControlsConfig> = {}) => {
   const vm = getCurrentInstance()

resources/assets/js/directives/droppable.ts

@@ -2,12 +2,12 @@ import { $ } from '@/utils'
 import { Directive } from 'vue'
 
 export const droppable: Directive = {
-  created: (el: HTMLElement, { value }: { value: Function | never }): void => {
+  created: (el: HTMLElement, { value }: { value: TAnyFunction | never }) => {
     if (!(value instanceof Function)) {
       throw new Error(`Expect a function, received ${typeof value}`)
     }
 
-    el.addEventListener('dragenter', (event: DragEvent): boolean => {
+    el.addEventListener('dragenter', (event: DragEvent) => {
       event.preventDefault()
       $.addClass(el, 'droppable')
       event.dataTransfer!.dropEffect = 'move'
@@ -17,9 +17,9 @@ export const droppable: Directive = {
 
     el.addEventListener('dragover', (event: DragEvent): void => event.preventDefault())
 
-    el.addEventListener('dragleave', (): void => $.removeClass(el, 'droppable'))
+    el.addEventListener('dragleave', () => $.removeClass(el, 'droppable'))
 
-    el.addEventListener('drop', (event: DragEvent): void => {
+    el.addEventListener('drop', (event: DragEvent) => {
       event.preventDefault()
       event.stopPropagation()
       $.removeClass(el, 'droppable')

resources/assets/js/utils/$.ts

@@ -2,31 +2,19 @@
  * A utility that aims to replace jQuery for the most basic DOM methods.
  */
 export const $ = {
-  is: (el: Element, selector: string): boolean => {
-    return el.matches(selector)
-  },
+  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),
 
-  addClass: (el: Element | null, className: string): void => {
-    if (el) {
-      el.classList.add(className)
-    }
-  },
-
-  removeClass: (el: Element | null, className: string): void => {
-    if (el) {
-      el.classList.remove(className)
-    }
-  },
-
-  scrollTo (el: Element, to: number, duration: number, cb?: Function): void {
+  scrollTo (el: Element, to: number, duration: number, cb?: TAnyFunction) {
     if (duration <= 0 || !el) {
       return
     }
 
     const difference = to - el.scrollTop
     const perTick = difference / duration * 10
 
-    window.setTimeout((): void => {
+    window.setTimeout(() => {
       el.scrollTop = el.scrollTop + perTick
 
       if (el.scrollTop === to) {