From 08282115f850453b3b135de7a9b81ae480dedb87 Mon Sep 17 00:00:00 2001 From: Yan-Fa Li Date: Thu, 15 Aug 2024 19:17:42 -0700 Subject: [PATCH] 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 | 8 +- .github/workflows/deploy_develop.yml | 6 +- .github/workflows/docker.yaml | 16 +- .nvmrc | 2 +- Dockerfile | 2 +- cypress.config.js | 24 + cypress.json | 9 - eslint.config.js | 21 + package.json | 33 +- src/components/BaseKey.vue | 3 +- src/components/ControllerBottom.vue | 8 +- src/components/ControllerTop.vue | 4 +- src/components/Keycode.vue | 2 +- src/components/Keycodes.vue | 2 +- src/components/Main.vue | 4 +- src/components/Modal.vue | 4 +- src/components/PrintKeymap.vue | 2 - src/components/Space.vue | 2 +- src/components/StatusBar.vue | 1 - src/components/Veil.vue | 2 +- src/components/VisualKeymap.vue | 10 - src/components/VisualTesterKeymap.vue | 2 - src/components/spinner.vue | 2 +- .../convert_keymap_extras_header.js | 16 +- src/scss/status-bar.scss | 5 +- src/scss/themes.scss | 7 +- src/store/index.js | 4 +- src/store/modules/app/actions.js | 2 - src/store/modules/app/state.js | 6 +- src/store/modules/keycodes/index.js | 2 +- src/store/modules/keymap.js | 8 +- src/views/Home.vue | 8 +- src/views/Print.vue | 2 +- yarn.lock | 6123 +++-------------- 34 files changed, 1218 insertions(+), 5134 deletions(-) create mode 100644 cypress.config.js delete mode 100644 cypress.json create mode 100644 eslint.config.js diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 4ba692434b..b1ead1d1e6 100644 --- a/.github/workflows/build.yml +++ b/.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: hello@qmk.fm SINGLE_COMMIT: true diff --git a/.github/workflows/deploy_develop.yml b/.github/workflows/deploy_develop.yml index a7a3f8e6a7..dcc07e726d 100644 --- a/.github/workflows/deploy_develop.yml +++ b/.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' diff --git a/.github/workflows/docker.yaml b/.github/workflows/docker.yaml index fba7120765..b5fc64cc23 100644 --- a/.github/workflows/docker.yaml +++ b/.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 diff --git a/.nvmrc b/.nvmrc index 5ab50cd8e9..209e3ef4b6 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.18.3 +20 diff --git a/Dockerfile b/Dockerfile index 9c38dc05b3..8b3cb0da56 100644 --- a/Dockerfile +++ b/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 diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 0000000000..d746d93e00 --- /dev/null +++ b/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 + } +}); diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 57bf416002..0000000000 --- a/cypress.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "baseUrl": "http://localhost:5173/", - "integrationFolder": "tests/integration", - "componentFolder": "src", - "fixturesFolder": "tests/fixtures", - "testFiles": "**/*.spec.js", - "chromeWebSecurity": false, - "video": false -} diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000000..98a4c153d9 --- /dev/null +++ b/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' + } + } +]; diff --git a/package.json b/package.json index 38240ba90d..7c8e59ac36 100644 --- a/package.json +++ b/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,26 +30,24 @@ "@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", @@ -54,25 +55,23 @@ "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", diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue index 9eb285fcb3..15c094e83d 100644 --- a/src/components/BaseKey.vue +++ b/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; diff --git a/src/components/ControllerBottom.vue b/src/components/ControllerBottom.vue index 40dbe5306b..181fb939b0 100644 --- a/src/components/ControllerBottom.vue +++ b/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) { diff --git a/src/components/ControllerTop.vue b/src/components/ControllerTop.vue index 0d3f7eb656..96a6cba5cb 100644 --- a/src/components/ControllerTop.vue +++ b/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() { diff --git a/src/components/Keycode.vue b/src/components/Keycode.vue index 6c8a70de09..a9b27413a8 100644 --- a/src/components/Keycode.vue +++ b/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, diff --git a/src/components/Keycodes.vue b/src/components/Keycodes.vue index 07e28e083a..17332b79d6 100644 --- a/src/components/Keycodes.vue +++ b/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() { diff --git a/src/components/Main.vue b/src/components/Main.vue index 5e3f2fcef5..1b269ff8a4 100644 --- a/src/components/Main.vue +++ b/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'); }); }, diff --git a/src/components/Modal.vue b/src/components/Modal.vue index 8aaa12c9c2..27b525d47f 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -2,5 +2,7 @@
diff --git a/src/components/PrintKeymap.vue b/src/components/PrintKeymap.vue index 82e793f7a4..5cd16b66a0 100644 --- a/src/components/PrintKeymap.vue +++ b/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; }, diff --git a/src/components/Space.vue b/src/components/Space.vue index d114c9c21e..9ec286d020 100644 --- a/src/components/Space.vue +++ b/src/components/Space.vue @@ -10,7 +10,7 @@