chore: use create-vue defaults (fluidd-core#943)

Signed-off-by: Pedro Lamas <[email protected]>

.eslintrc.js

@@ -1,26 +1,16 @@
 module.exports = {
   root: true,
-  env: {
-    browser: true,
-    node: true
-  },
   extends: [
     'plugin:vue/recommended',
+    'eslint:recommended',
     '@vue/standard',
-    '@vue/typescript/recommended'
-  ],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module'
-  },
-  plugins: [
-    'vue'
+    '@vue/eslint-config-typescript/recommended'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     camelcase: 'off',
+    'getter-return': 'off',
     'no-use-before-define': 'off',
     'vue/no-v-html': 'off',
     'vue/no-v-text-v-html-on-component': 'off',

env.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest/globals" />
+/// <reference types="vuetify" />
+/// <reference types="vue-meta" />
+/// <reference types="vite-plugin-pwa/client" />
+
+declare module '*.yaml' {
+  const data: any
+  export default data
+}
+
+interface ImportMetaEnv {
+  readonly VUE_APP_I18N_LOCALE?: string
+  readonly VUE_APP_I18N_FALLBACK_LOCALE?: string
+  readonly VERSION: string
+  readonly HASH: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package.json

@@ -25,8 +25,9 @@
     "release:minor": "npm run release -- --release-as minor",
     "release:patch": "npm run release -- --release-as patch",
     "release:rc": "npm run release -- --prerelease rc",
-    "test": "vitest",
-    "test:unit": "vitest",
+    "test": "npm run test:unit",
+    "test:unit": "vitest --environment jsdom",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "theme:convert": "cd tools; node convertTheme.js"
   },
   "main": "index.js",
@@ -53,7 +54,7 @@
     "register-service-worker": "^1.7.2",
     "semver": "^7.3.8",
     "uuid": "^9.0.0",
-    "vue": "^2.7.13",
+    "vue": "^2.7.14",
     "vue-class-component": "^7.2.6",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.27.2",
@@ -71,36 +72,39 @@
   "devDependencies": {
     "@mdi/js": "^7.0.96",
     "@originjs/vite-plugin-content": "^1.0.1",
+    "@types/jsdom": "^20.0.1",
     "@types/lodash-es": "^4.17.6",
     "@types/md5": "^2.3.2",
-    "@types/semver": "^7.3.12",
+    "@types/node": "^18.11.9",
+    "@types/semver": "^7.3.13",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "@vitejs/plugin-vue2": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "@vitejs/plugin-vue2": "^2.0.1",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^1.3.3",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.26.0",
-    "eslint-plugin-vue": "^9.6.0",
+    "eslint": "^8.27.0",
+    "eslint-plugin-vue": "^9.7.0",
     "husky": "^7.0.4",
-    "jsdom": "^20.0.1",
-    "json-loader": "^0.5.7",
+    "jsdom": "^20.0.2",
     "mockdate": "^3.0.5",
     "monaco-vscode-textmate-theme-converter": "^0.1.7",
     "sass": "~1.32",
     "shx": "^0.3.4",
     "standard-version": "^9.5.0",
     "typescript": "^4.8.4",
     "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.1.8",
+    "vite": "^3.2.3",
     "vite-plugin-checker": "^0.5.1",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-pwa": "^0.13.1",
-    "vitest": "^0.24.3",
+    "vite-plugin-pwa": "^0.13.3",
+    "vitest": "^0.25.1",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
-    "vue-template-compiler": "^2.7.13"
+    "vue-template-compiler": "^2.7.14",
+    "vue-tsc": "^1.0.9"
   },
   "_id": "[email protected]",
   "bugs": {

src/App.vue

@@ -13,11 +13,11 @@
     />
 
     <flash-message
-      v-if="flashMessage"
-      v-model="flashMessage.open"
-      :text="flashMessage.text"
-      :type="flashMessage.type"
-      :timeout="flashMessage.timeout"
+      v-if="flashMessageState"
+      v-model="flashMessageState.open"
+      :text="flashMessageState.text"
+      :type="flashMessageState.type"
+      :timeout="flashMessageState.timeout"
     />
 
     <v-btn
@@ -106,7 +106,7 @@ export default class App extends Mixins(StateMixin, FilesMixin) {
   showUpdateUI = false
   customBackgroundImageStyle: Record<string, string> = {}
 
-  flashMessage: FlashMessage = {
+  flashMessageState: FlashMessage = {
     open: false,
     text: undefined,
     type: undefined
@@ -267,10 +267,10 @@ export default class App extends Mixins(StateMixin, FilesMixin) {
   mounted () {
     // this.onLoadLocale(this.$i18n.locale)
     EventBus.bus.$on('flashMessage', (payload: FlashMessage) => {
-      this.flashMessage.text = (payload && payload.text) || undefined
-      this.flashMessage.type = (payload && payload.type) || undefined
-      this.flashMessage.timeout = (payload && payload.timeout !== undefined) ? payload.timeout : undefined
-      this.flashMessage.open = true
+      this.flashMessageState.text = (payload && payload.text) || undefined
+      this.flashMessageState.type = (payload && payload.type) || undefined
+      this.flashMessageState.timeout = (payload && payload.timeout !== undefined) ? payload.timeout : undefined
+      this.flashMessageState.open = true
     })
 
     const legacyElementsSelectors = [

src/components/common/SocketDisconnected.vue

@@ -53,7 +53,6 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import { appInit } from '@/init'
 import StateMixin from '@/mixins/state'
-import { InitConfig, InstanceConfig } from '@/store/config/types'
 
 @Component({
   components: {}
@@ -63,23 +62,18 @@ export default class SocketDisconnected extends Mixins(StateMixin) {
     window.location.reload()
   }
 
-  get instances (): InstanceConfig[] {
-    return this.$store.getters['config/getInstances']
-  }
-
   get activeInstance () {
-    return this.instances.find(instance => instance.active)
+    return this.$store.getters['config/getCurrentInstance']
   }
 
-  reconnect (instance: InstanceConfig) {
+  async reconnect () {
     // Re-init the app.
-    appInit(instance, this.$store.state.config.hostConfig)
-      .then((config: InitConfig) => {
-        // Reconnect the socket with the instance url.
-        if (config.apiConfig.socketUrl && config.apiConnected && config.apiAuthenticated) {
-          this.$socket.connect(config.apiConfig.socketUrl)
-        }
-      })
+    const config = await appInit(this.activeInstance, this.$store.state.config.hostConfig)
+
+    // Reconnect the socket with the instance url.
+    if (config.apiConfig.socketUrl && config.apiConnected && config.apiAuthenticated) {
+      this.$socket.connect(config.apiConfig.socketUrl)
+    }
   }
 }
 </script>

src/components/layout/AppSettingsNav.vue

@@ -3,7 +3,7 @@
     dense
     width="180"
     class="grow pt-0"
-    :color="($vuetify.theme.isDark) ? '#1E1E20' : '#FFFFFF'"
+    :color="($vuetify.theme.dark) ? '#1E1E20' : '#FFFFFF'"
   >
     <template
       v-for="item in items"

src/components/settings/VersionInformationDialog.vue

@@ -4,7 +4,7 @@
     :max-width="850"
     scrollable
   >
-    <v-card v-if="component">
+    <v-card>
       <v-card-title class="card-heading py-2">
         <span
           v-if="'commits_behind' in component"
@@ -28,7 +28,7 @@
       <v-divider />
 
       <v-card-text
-        v-if="commitHistory"
+        v-if="'commits_behind' in component && commitHistory"
         class="py-0 pl-0"
       >
         <!-- History Items. -->
@@ -95,7 +95,7 @@
       </v-card-text>
 
       <v-card-text
-        v-if="component.package_list"
+        v-if="'package_list' in component"
         class="pt-4"
       >
         <!-- OS Packages -->

src/components/settings/auth/UserConfigDialog.vue

@@ -6,7 +6,7 @@
     <v-form
       ref="form"
       v-model="valid"
-      @submit.prevent="handleSave(user)"
+      @submit.prevent="handleSave"
     >
       <v-card>
         <v-card-title class="card-heading py-2">

src/components/settings/cameras/CameraConfigDialog.vue

@@ -8,7 +8,7 @@
       ref="form"
       v-model="valid"
       :disabled="camera.source === 'config'"
-      @submit.prevent="handleSave()"
+      @submit.prevent="handleSave"
     >
       <v-card>
         <v-card-title class="card-heading py-2">

src/components/settings/console/ConsoleSettings.vue

@@ -95,7 +95,7 @@ export default class ConsoleSettings extends Mixins(StateMixin) {
     return this.$store.getters['console/getFilters']
   }
 
-  handleEditFilterDialog (filter: ConsoleFilter) {
+  handleEditFilterDialog (filter: ConsoleFilter | null) {
     const filterCopy = filter
       ? { ...filter }
       : {

src/components/settings/macros/MacroCategories.vue

@@ -179,8 +179,8 @@ export default class MacroSettings extends Mixins(StateMixin) {
     this.$store.dispatch('macros/editCategory', category)
   }
 
-  handleCategoryClick (category: MacroCategory) {
-    const id = (category) ? category.id : 0
+  handleCategoryClick (category?: MacroCategory) {
+    const id = category?.id ?? 0
     this.$router.push(`/settings/macros/${id}`)
   }
 }

src/components/settings/macros/MacroSettings.vue

@@ -142,9 +142,12 @@ export default class MacroSettings extends Vue {
     return this.$store.getters['macros/getCategories']
   }
 
-  get category (): MacroCategory | undefined {
-    if (this.categoryId === '0') return { id: '0', name: this.$tc('app.general.label.uncategorized') }
-    return this.categories.find(category => category.id === this.categoryId)
+  get category () {
+    const category = this.categoryId !== '0' && this.categories.find(category => category.id === this.categoryId)
+
+    return category || {
+      id: '0', name: this.$tc('app.general.label.uncategorized')
+    }
   }
 
   beforeRouteEnter (to: any, from: any, next: any) {

src/components/settings/macros/MacroSettingsDialog.vue

@@ -9,7 +9,7 @@
       v-model="valid"
       @submit.prevent="handleSave"
     >
-      <v-card>
+      <v-card v-if="newMacro">
         <v-card-title class="card-heading py-2">
           <span class="focus--text">{{ newMacro.name.toUpperCase() }}</span>
         </v-card-title>

src/components/settings/presets/PresetDialog.vue

@@ -6,7 +6,7 @@
     <v-form
       ref="form"
       v-model="valid"
-      @submit.prevent="handleSave(preset)"
+      @submit.prevent="handleSave"
     >
       <v-card>
         <v-card-title class="card-heading py-2">

src/components/widgets/console/Console.vue

@@ -4,7 +4,7 @@
   >
     <console-command
       v-if="!readonly && flipLayout"
-      v-model="consoleCommand"
+      v-model="currentCommand"
       :disabled="!klippyReady"
       @send="sendCommand"
     />
@@ -43,7 +43,7 @@
     </v-card>
     <console-command
       v-if="!readonly && !flipLayout"
-      v-model="consoleCommand"
+      v-model="currentCommand"
       :disabled="!klippyReady"
       @send="sendCommand"
     />
@@ -57,6 +57,7 @@ import ConsoleCommand from './ConsoleCommand.vue'
 import ConsoleItem from './ConsoleItem.vue'
 import { SocketActions } from '@/api/socketActions'
 import { DinamicScroller } from 'vue-virtual-scroller'
+import { ConsoleEntry } from '@/store/console/types'
 
 @Component({
   components: {
@@ -66,7 +67,7 @@ import { DinamicScroller } from 'vue-virtual-scroller'
 })
 export default class Console extends Mixins(StateMixin) {
   @Prop({ type: Array, default: [] })
-  readonly items!: []
+  readonly items!: ConsoleEntry[]
 
   @Prop({ type: String, default: 'id' })
   readonly keyField!: string
@@ -86,11 +87,11 @@ export default class Console extends Mixins(StateMixin) {
     return this.$store.getters['console/getAllGcodeCommands']
   }
 
-  get consoleCommand () {
+  get currentCommand () {
     return this.$store.state.console.consoleCommand
   }
 
-  set consoleCommand (val: string) {
+  set currentCommand (val: string) {
     this.$store.commit('console/setConsoleCommand', val)
   }
 
@@ -176,12 +177,12 @@ export default class Console extends Mixins(StateMixin) {
         SocketActions.printerEmergencyStop()
       }
       this.sendGcode(command)
-      this.consoleCommand = ''
+      this.currentCommand = ''
     }
   }
 
   handleEntryClick (command: string) {
-    this.consoleCommand = command
+    this.currentCommand = command
   }
 }
 </script>