Yanfali updates (#1358)

* wip

* chore: update caniuse

* chore: update cypress to 13

* update workflow

* chore: update docker images

* chore: update cypress-io/github-action

* chore: disable unused cypress support file

* chore: remove trailing commas

* chore: clean up test running

 - update start-server-and-test
   - v2 doesn't work for some reason and it looks abandoned
 - add an optional runner for cypress open using start-server-and-test

* chore: more upgrades

* chore: update sass

 - fix warnings for deprecations

* chore: upgrade eslint to 9 and fix things

 - using only essential because strongly recommended causes hundreds of
   warnings

* chore: fix eslint js warnings

.github/workflows/build.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - id: nodeversion
         run: echo ::set-output name=NODE::$(cat .nvmrc)
       - name: restore Cache
@@ -21,7 +21,7 @@ jobs:
             /home/runner/.cache/Cypress
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Use Node.js ${{steps.nodeversion.outputs.NODE}}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ steps.nodeversion.outputs.NODE }}
       - name: install
@@ -33,7 +33,7 @@ jobs:
           yarn run json:check
           yarn run lint
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v6
         with:
           cache-key: node-on-${{ runner.os }}-hash-${{ hashFiles('yarn.lock') }}
           start: yarn dev
@@ -50,6 +50,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages
           FOLDER: ./dist
-          GIT_CONFIG_NAME : QMK Bot
+          GIT_CONFIG_NAME: QMK Bot
           GIT_CONFIG_EMAIL: [email protected]
           SINGLE_COMMIT: true

.github/workflows/deploy_develop.yml

@@ -13,7 +13,7 @@ jobs:
     if: github.repository == 'qmk/qmk_configurator'
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - id: nodeversion
         run: echo ::set-output name=NODE::$(cat .nvmrc)
@@ -43,7 +43,7 @@ jobs:
         uses: cypress-io/github-action@v2
         with:
           start: yarn dev
-          wait-on: "http://localhost:5173"
+          wait-on: 'http://localhost:5173'
 
       - name: build
         run: |
@@ -60,4 +60,4 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.SPACES_ACCESS_KEY }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SPACES_SECRET_KEY }}
           AWS_S3_ENDPOINT: https://nyc3.digitaloceanspaces.com
-          SOURCE_DIR: "dist"
+          SOURCE_DIR: 'dist'

.github/workflows/docker.yaml

@@ -13,12 +13,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-    - uses: redhat-actions/buildah-build@v2
-      id: build-image
-      with:
-        image: qmk/qmk_configurator
-        tags: latest ${{ github.sha }}
-        containerfiles: |
-          ./Dockerfile
+      - uses: redhat-actions/buildah-build@v2
+        id: build-image
+        with:
+          image: qmk/qmk_configurator
+          tags: latest ${{ github.sha }}
+          containerfiles: |
+            ./Dockerfile

.nvmrc

@@ -1 +1 @@
-14.18.3
+20

Dockerfile

@@ -1,7 +1,7 @@
 # This file uses a multi-stage build strategy. The build stage sets up the nvm environment and builds configurator, while the second stage copies this into a clean container without any build tools.
 
 ## First Stage- Build
-FROM node:14 as build
+FROM node:20 as build
 ENV LC_ALL=C.UTF-8
 ENV LANG=C.UTF-8
 

cypress.config.js

@@ -0,0 +1,24 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  fixturesFolder: 'tests/fixtures',
+  chromeWebSecurity: false,
+  video: false,
+  e2e: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite'
+    },
+    baseUrl: 'http://localhost:5173/',
+    specPattern: 'tests/integration/**/*.spec.js',
+    supportFile: false
+  },
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite'
+    },
+    specPattern: 'src/**/*.spec.js',
+    supportFile: false
+  }
+});

eslint.config.js

@@ -0,0 +1,21 @@
+const js = require('@eslint/js');
+const cypress = require('eslint-plugin-cypress');
+const eslintPluginVue = require('eslint-plugin-vue');
+module.exports = [
+  js.configs.recommended,
+  ...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

@@ -15,10 +15,13 @@
     "json:check": "node scripts/json/ajv.js public/keymaps",
     "test:cypress": "cypress run",
     "test:cypress:open": "cypress open",
-    "test:cypress:ci": "start-server-and-test dev http-get://localhost:5173 test:cypress",
+    "test:cypress:open:interactive": "start-server-and-test dev http://localhost:5173 test:cypress:open",
+    "test:cypress:ci": "start-server-and-test dev http://localhost:5173 test:cypress",
     "prepare": "husky install"
   },
   "dependencies": {
+    "@achrinza/node-ipc": "9",
+    "@eslint/js": "^9.9.0",
     "@fontsource/montserrat": "^4.5.1",
     "@fontsource/roboto": "^4.5.1",
     "@fontsource/roboto-mono": "^4.5.0",
@@ -27,52 +30,48 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.8",
     "autoprefixer": "^10.4.2",
-    "axios": "^1.6",
+    "axios": "1.7",
     "howler": "^2.1.3",
     "keypress.js": "^2.1.5",
     "lodash": "4.17.21",
     "v-tooltip": "^2.1.3",
-    "vue": "2.7",
+    "vue": "2",
     "vue-i18n": "^8.10.0",
     "vue-js-toggle-button": "^1.3.2",
     "vue-router": "^3.5.3",
     "vue-select": "^3",
+    "vue-template-compiler": "^2.7.16",
     "vue2-slideout-panel": "^2.2.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.2.2",
-    "@cypress/vue": "2.2.4",
     "@mixer/parallel-prettier": "^2.0.2",
     "@types/lodash": "^4.14.178",
-    "@vitejs/plugin-vue": "^2.3.4",
-    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vitejs/plugin-vue": "4",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/runtime-dom": "latest",
     "@vue/test-utils": "^1.0.0-beta.20",
     "ajv": "^8.6.2",
     "babel-core": "7.0.0-bridge.0",
     "csv-parse": "^4.8.2",
     "csv-stringify": "^5.3.4",
-    "cypress": "9.2.1",
-    "eslint": "8",
-    "eslint-plugin-cypress": "^2.6.1",
+    "cypress": "13",
+    "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",
     "local-cypress": "^1.2.3",
     "prettier": "^2",
-    "sass": "^1.54.5",
+    "sass": "1",
     "serialize-javascript": "^3.1.0",
     "simplecc-wasm": "^0.1.4",
-    "start-server-and-test": "^1.10.0",
+    "start-server-and-test": "1",
     "tar": "^6.2.1",
-    "vite": "^3.2.10",
-    "vite-plugin-vue2": "^1.9.2",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.14"
+    "vite": "4",
+    "vite-plugin-vue2": "^1.9.2"
   },
   "resolutions": {
     "glob-parent": "^5.1.2",

src/components/BaseKey.vue

@@ -136,9 +136,10 @@ export default {
     },
     displayName() {
       switch (this.legends) {
-        case 'size':
+        case 'size': {
           const { uh, uw } = this;
           return uh > uw ? (uw === 1 ? uh : `${uw} /\n ${uh}`) : uw;
+        }
         case 'matrix':
           if (this.matrix) {
             const [row, col] = this.matrix;

src/components/ControllerBottom.vue

@@ -226,6 +226,7 @@ export default {
         await this.loadJsonData(data);
       } catch (err) {
         alert('Seems like there is an issue trying to get the file');
+        console.error(err);
       }
       this.closeVeil();
     },
@@ -386,10 +387,9 @@ export default {
             throw err;
           });
 
-        var store = this.$store;
-        let promise = await new Promise((resolve) =>
-          this.setLoadingKeymapPromise(resolve)
-        );
+        // wait for keymap to load
+        await new Promise((resolve) => this.setLoadingKeymapPromise(resolve));
+
         const stats = await this.load_converted_keymap(data.layers);
         let msg = this.$t('statsTemplate', stats);
         if (stats.warnings.length > 0 || stats.errors.length > 0) {

src/components/ControllerTop.vue

@@ -381,7 +381,7 @@ export default {
           if (isNavigationFailure(failure, NavigationFailureType.cancelled)) {
             return;
           }
-          throw err;
+          throw failure;
         });
       this.$store.dispatch('status/viewReadme', this.keyboard);
     },
@@ -402,7 +402,7 @@ export default {
           if (isNavigationFailure(failure, NavigationFailureType.cancelled)) {
             return;
           }
-          throw err;
+          throw failure;
         });
     },
     compile() {

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,
@@ -117,7 +117,7 @@ export default {
           .replace(/Dcs/, 'DCS')
           .replace(/Dev Tty/, '/dev/tty')
           .replace(/ ?Plus/g, '+')
-          .replace(/ ?Dot ?/g, '\.')
+          .replace(/ ?Dot ?/g, '.')
           .replace(/Ascii/, 'ASCII');
       });
     },

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/StatusBar.vue

@@ -49,7 +49,6 @@
 </template>
 <script>
 import axios from 'axios';
-import escape from 'lodash/escape';
 import { backend_status_url } from '@/store/modules/constants';
 import { mapState, mapMutations } from 'vuex';
 /**

src/components/Veil.vue

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