chore: upgrade eslint to 9 and fix things

 - using only essential because strongly recommended causes hundreds of
   warnings

eslint.config.js

@@ -0,0 +1,20 @@
+const cypress = require('eslint-plugin-cypress');
+const eslintPluginVue = require('eslint-plugin-vue');
+const cypressConfig = require('./cypress.config');
+module.exports = [
+  ...eslintPluginVue.configs['flat/vue2-essential'],
+  {
+    plugins: {
+      cypress: cypress
+    },
+    rules: {
+      'cypress/no-unnecessary-waiting': 'off',
+      'no-console': 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'comma-dangle': ['error', 'never'],
+      // this rule is incompatible with vue 2
+      // @see https://eslint.vuejs.org/rules/no-v-for-template-key-on-child.html
+      'vue/no-v-for-template-key-on-child': 'off'
+    }
+  }
+];

package.json

@@ -55,10 +55,10 @@
     "csv-parse": "^4.8.2",
     "csv-stringify": "^5.3.4",
     "cypress": "13",
-    "eslint": "8",
-    "eslint-plugin-cypress": "^2.6.1",
+    "eslint": "9",
+    "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "8",
+    "eslint-plugin-vue": "9",
     "growl": "^1.10.0",
     "https-proxy-agent": "^2.2.0",
     "husky": "^8.0.1",

src/components/Keycode.vue

@@ -25,7 +25,7 @@ import isUndefined from 'lodash/isUndefined';
 
 const debug = false;
 export default {
-  name: 'keycode',
+  name: 'keycode-component',
   props: {
     type: String,
     code: String,

src/components/Keycodes.vue

@@ -66,7 +66,7 @@ import Space from '@/components/Space.vue';
 import store from '@/store';
 
 export default {
-  name: 'keycodes',
+  name: 'keycodes-component',
   components: { Keycode, Space },
   props: {},
   data() {

src/components/Main.vue

@@ -77,7 +77,7 @@ import VisualKeymap from '@/components/VisualKeymap.vue';
 import LayerControl from '@/components/LayerControl.vue';
 
 export default {
-  name: 'Main',
+  name: 'MainComponent',
   props: {},
   components: {
     ControllerTop,

src/components/Modal.vue

@@ -2,5 +2,7 @@
   <div></div>
 </template>
 <script>
-export default {};
+export default {
+  name: 'modal-component'
+};
 </script>

src/components/PrintKeymap.vue

@@ -51,7 +51,6 @@ export default {
         return [];
       }
       // Calculate Max with given layout
-      // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
       const colorway = this.colorway;
       let curLayer = layout.map((pos, index) => {
@@ -69,7 +68,6 @@ export default {
           dims
         );
       });
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('currentLayer');
       return curLayer;
     },

src/components/Space.vue

@@ -10,7 +10,7 @@
 <script>
 import isUndefined from 'lodash/isUndefined';
 export default {
-  name: 'space',
+  name: 'space-component',
   props: {
     label: String,
     width: null,

src/components/Veil.vue

@@ -7,7 +7,7 @@
 </template>
 <script>
 export default {
-  name: 'Veil',
+  name: 'veil-component',
   props: {
     isVisible: {
       type: Boolean,

src/components/VisualKeymap.vue

@@ -50,7 +50,6 @@ export default {
         return [];
       }
       // Calculate Max with given layout
-      // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
       const colorway = this.colorway;
       let curLayer = layout.map((pos, index) => {
@@ -71,7 +70,6 @@ export default {
           dims
         );
       });
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('currentLayer');
       if (this.loadingKeymapPromise) {
         // signal to observers of keymap loading that UI component has finished calculations
@@ -85,7 +83,6 @@ export default {
   },
   watch: {
     layout(newLayout, oldLayout) {
-      // eslint-disable-next-line no-console
       this.profile && console.time('layout');
       if (
         !isUndefined(newLayout) &&
@@ -100,7 +97,6 @@ export default {
       ) {
         this.recalcEverything(oldLayout);
       }
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('layout');
     }
   },
@@ -149,24 +145,19 @@ export default {
       this.height = max.y;
     },
     recalcEverything(newLayout) {
-      // eslint-disable-next-line no-console
       this.profile && console.time('layout::reset');
       this.resetConfig();
       this.changeLayer(0);
-      // eslint-disable-next-line no-console
       this.profile && console.time('layout::initkeymap');
       if (this.getLayer(0).length === 0) {
         this.initKeymap({
           layer: 0,
           layout: this.layouts[newLayout]
         });
       }
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('layout::initkeymap');
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('layout::reset');
 
-      // eslint-disable-next-line no-console
       this.profile && console.time('layout::scale');
       const layout = this.layouts[newLayout];
       if (isUndefined(layout)) {
@@ -196,7 +187,6 @@ export default {
         max.y *= this.config.SCALE;
       }
       this.setSize(max);
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('layout::scale');
     }
   }

src/components/VisualTesterKeymap.vue

@@ -159,7 +159,6 @@ export default {
       }
 
       // Calculate Max with given layout
-      // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
       const curLayer = this.activeLayoutMeta.map((pos, index) => {
         const _pos = Object.assign({ w: 1, h: 1 }, pos);
@@ -175,7 +174,6 @@ export default {
           dims
         );
       });
-      // eslint-disable-next-line no-console
       this.profile && console.timeEnd('currentLayer');
       return curLayer;
     },

src/components/spinner.vue

@@ -16,7 +16,7 @@
 </template>
 <script>
 export default {
-  name: 'spinner',
+  name: 'spinner-component',
   props: {
     isVisible: {
       type: Boolean,

src/store/modules/app/actions.js

@@ -32,7 +32,6 @@ const actions = {
    */
   async loadDefaultKeymap({ state }) {
     const keyboardPath = state.keyboard.slice(0, 1).toLowerCase();
-    // eslint-disable-next-line
     const keyboardName = state.keyboard.replace(/\//g, '_');
     const resp = await axios.get(
       `keymaps/${keyboardPath}/${keyboardName}_default.json`
@@ -71,7 +70,6 @@ const actions = {
     commit('setLayout', undefined);
     await dispatch('loadLayouts');
     let nextLayout = getPreferredLayout(state.layouts);
-    // eslint-disable-next-line
     console.info(getPreferredLayout(state.layouts));
     if (oldLayout && !isUndefined(state.layouts[oldLayout])) {
       nextLayout = oldLayout;

src/store/modules/keymap.js

@@ -118,7 +118,6 @@ const getters = {
                   keycode = compiler ? key.text : `ANY(${key.text})`;
                 }
               } else {
-                // eslint-disable-next-line
                 console.error(`ERROR: unexpected keycode ${key}`, k, i, _layer);
               }
               newLayer.push(keycode);

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="main">
-      <Main />
+      <MainComponent />
     </div>
     <div>
       <keycodes />
@@ -11,13 +11,13 @@
 
 <script>
 // @ is an alias to /src
-import Main from '@/components/Main.vue';
+import MainComponent from '@/components/Main.vue';
 import Keycodes from '@/components/Keycodes.vue';
 
 export default {
-  name: 'configurator',
+  name: 'configurator-component',
   components: {
-    Main,
+    MainComponent,
     Keycodes
   },
   methods: {}

src/views/Print.vue

@@ -74,7 +74,7 @@ import Vue from 'vue';
 import PrintKeymap from '@/components/PrintKeymap.vue';
 import { mapState, mapGetters } from 'vuex';
 export default {
-  name: 'printerator',
+  name: 'printerator-component',
   computed: {
     ...mapState('app', ['keyboard', 'layout', 'layouts', 'author', 'notes']),
     ...mapGetters('keymap', ['activeLayers']),