Upgrade to node 18 and dependencies (#46)

* upgrade to nodejs 18.

* npm update.

* upgrade linter.

* upgrade axios.

* upgrade saas loader.

* upgrade typescript.

.vscode/settings.json

@@ -20,6 +20,6 @@
   },
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-buster-slim
+FROM node:18-buster-slim
 
 COPY . /app
 

dev/build

@@ -7,4 +7,4 @@ docker run --rm -it \
     --volume "${PWD}/../:/app" \
     --entrypoint="npm" \
     --workdir="/app" \
-    node:16-buster-slim run build
+    node:18-buster-slim run build

dev/exec

@@ -7,4 +7,4 @@ docker run --rm -it \
     --volume "${PWD}/../:/app" \
     --entrypoint="/bin/bash" \
     --workdir="/app" \
-    node:16-buster-slim
+    node:18-buster-slim

dev/npm

@@ -7,4 +7,4 @@ docker run --rm -it \
     --volume "${PWD}/../:/app" \
     --entrypoint="npm" \
     --workdir="/app" \
-    node:16-buster-slim "$@"
+    node:18-buster-slim "$@"

dev/serve

@@ -31,4 +31,4 @@ docker run --rm -it \
     --volume "${PWD}/../:/app" \
     --entrypoint="npm" \
     --workdir="/app" \
-    node:16-buster-slim run serve
+    node:18-buster-slim run serve

package.json

@@ -16,33 +16,33 @@
     "build:page": "vue-cli-service build"
   },
   "dependencies": {
-    "axios": "^0.27.2",
+    "axios": "^1.6.7",
     "eventemitter3": "^5.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vue": "^2.6.14",
+    "vue": "^2.7.16",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@types/node": "^16.11.35",
+    "@types/node": "^18.0.0",
     "@types/vue": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@typescript-eslint/parser": "^6.19.1",
     "@vue/cli-plugin-babel": "^5.0.4",
     "@vue/cli-plugin-eslint": "^5.0.4",
     "@vue/cli-plugin-typescript": "^5.0.4",
     "@vue/cli-service": "^5.0.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.15.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.20.1",
-    "prettier": "^2.6.2",
+    "prettier": "^3.2.4",
     "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^14.0.0",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.4",
+    "typescript": "^5.3.3",
     "vue-template-compiler": "^2.6.14"
   },
   "files": [

src/component/internal/messages.ts

@@ -3,6 +3,7 @@ import * as EVENT from '../types/events'
 import * as message from '../types/messages'
 
 import EventEmitter from 'eventemitter3'
+import { AxiosProgressEvent } from 'axios'
 import { Logger } from '../utils/logger'
 import { NekoConnection } from './connection'
 import NekoState from '../types/state'
@@ -17,7 +18,7 @@ export interface NekoEvents {
 
   // drag and drop events
   ['upload.drop.started']: () => void
-  ['upload.drop.progress']: (progressEvent: ProgressEvent) => void
+  ['upload.drop.progress']: (progressEvent: AxiosProgressEvent) => void
   ['upload.drop.finished']: (error?: Error) => void
 
   // upload dialog events
@@ -340,7 +341,7 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     }
   }
 
-  protected [EVENT.FILE_CHOOSER_DIALOG_CLOSED]({ id }: message.SessionID) {
+  protected [EVENT.FILE_CHOOSER_DIALOG_CLOSED]({}: message.SessionID) {
     this._localLog.debug(`EVENT.FILE_CHOOSER_DIALOG_CLOSED`)
     this.emit('upload.dialog.closed')
   }

src/component/internal/video.ts

@@ -19,7 +19,7 @@ export function register(el: HTMLVideoElement, state: Video) {
     Vue.set(state, 'playable', false)
     Vue.set(state, 'playing', false)
   })
-  el.addEventListener('volumechange', (value) => {
+  el.addEventListener('volumechange', () => {
     Vue.set(state, 'muted', el.muted)
     Vue.set(state, 'volume', el.volume)
   })

src/component/internal/webrtc.ts

@@ -569,7 +569,7 @@ export class NekoWebRTC extends EventEmitter<NekoWebRTCEvents> {
         stats = await this._peer.getStats()
       } else {
         // callback browsers support
-        await new Promise((res, rej) => {
+        await new Promise((res) => {
           //@ts-ignore
           this._peer.getStats((stats) => res(stats))
         })

src/component/main.vue

@@ -77,7 +77,7 @@
   export * as webrtcTypes from './types/webrtc'
 
   import { Configuration } from './api/configuration'
-  import { AxiosInstance } from 'axios'
+  import { AxiosInstance, AxiosProgressEvent } from 'axios'
 
   import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
@@ -576,7 +576,7 @@
         this.events.emit('upload.drop.started')
 
         await this.api.room.uploadDrop(x, y, files, {
-          onUploadProgress: (progressEvent: ProgressEvent) => {
+          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
             this.events.emit('upload.drop.progress', progressEvent)
           },
         })

src/component/screencast.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
+  import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
   import { RoomApi } from './api'
 
   const REFRESH_RATE = 1e3

src/page/components/events.vue

@@ -20,8 +20,8 @@
             neko.state.connection.status == 'disconnected'
               ? 'background: red;'
               : neko.state.connection.status == 'connecting'
-              ? 'background: #17448a;'
+                ? 'background: #17448a;'
-              : ''
+                : ''
           "
         >
           {{ neko.state.connection.status }}

src/page/components/header.vue

@@ -85,7 +85,7 @@
 </style>
 
 <script lang="ts">
-  import { Component, Prop, Ref, Watch, Vue } from 'vue-property-decorator'
+  import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
   import Neko from '~/component/main.vue'
 
   @Component({

src/page/components/members.vue

@@ -498,7 +498,7 @@
 
     async updateProfile(memberId: string, memberProfile: ApiModels.MemberProfile) {
       try {
-        const res = await this.neko.members.membersUpdateProfile(memberId, memberProfile)
+        await this.neko.members.membersUpdateProfile(memberId, memberProfile)
         const members = this.members.map((member) => {
           if (member.id == memberId) {
             return {

src/page/main.vue

@@ -335,7 +335,8 @@
     })
   })(require.context('./plugins/', true, /(main-tabs|main-components)\.vue$/))
 
-  import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
+  import { Vue, Component, Ref } from 'vue-property-decorator'
+  import { AxiosProgressEvent } from 'axios'
   import NekoCanvas from '~/component/main.vue'
   import NekoHeader from './components/header.vue'
   import NekoConnect from './components/connect.vue'
@@ -398,7 +399,11 @@
       this.uploadProgress = 0
       try {
         await this.neko.room.uploadDialog([...files], {
-          onUploadProgress: (progressEvent: ProgressEvent) => {
+          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+            if (!progressEvent.total) {
+              this.uploadProgress = 0
+              return
+            }
             this.uploadProgress = (progressEvent.loaded / progressEvent.total) * 100
           },
         })
@@ -455,7 +460,11 @@
         this.uploadActive = true
         this.uploadProgress = 0
       })
-      this.neko.events.on('upload.drop.progress', (progressEvent: ProgressEvent) => {
+      this.neko.events.on('upload.drop.progress', (progressEvent: AxiosProgressEvent) => {
+        if (!progressEvent.total) {
+          this.uploadProgress = 0
+          return
+        }
         this.uploadProgress = (progressEvent.loaded / progressEvent.total) * 100
       })
       this.neko.events.on('upload.drop.finished', (e?: any) => {
@@ -473,6 +482,7 @@
       })
       this.neko.events.on('upload.dialog.overlay', (id: string) => {
         this.dialogOverlayActive = true
+        console.log('upload.dialog.overlay', id)
       })
       this.neko.events.on('upload.dialog.closed', () => {
         this.dialogOverlayActive = false