Update JS dependencies and eslint config (#21388)

- Update all JS dependencies and playwright image
- Add new eslint rules, enable a few more, fix issues
- Regenerate SVGs
- Tested Vue and Swagger

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

.drone.yml

@@ -571,7 +571,7 @@ steps:
 
   # TODO: We should probably build all dependencies into a test image
   - name: test-e2e
-    image: mcr.microsoft.com/playwright:v1.26.1-focal
+    image: mcr.microsoft.com/playwright:v1.27.0-focal
     commands:
       - curl -sLO https://go.dev/dl/go1.19.linux-amd64.tar.gz && tar -C /usr/local -xzf go1.19.linux-amd64.tar.gz
       - groupadd --gid 1001 gitea && useradd -m --gid 1001 --uid 1001 gitea

.eslintrc.yaml

@@ -185,6 +185,7 @@ rules:
   linebreak-style: [2, unix]
   lines-around-comment: [0]
   lines-between-class-members: [0]
+  logical-assignment-operators: [0]
   max-classes-per-file: [0]
   max-depth: [0]
   max-len: [0]
@@ -245,7 +246,7 @@ rules:
   no-floating-decimal: [0]
   no-func-assign: [2]
   no-global-assign: [2]
-  no-implicit-coercion: [0]
+  no-implicit-coercion: [2]
   no-implicit-globals: [0]
   no-implied-eval: [2]
   no-import-assign: [2]
@@ -322,7 +323,7 @@ rules:
   no-unused-private-class-members: [2]
   no-unused-vars: [2, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, caughtErrorsIgnorePattern: ^_, destructuredArrayIgnorePattern: ^_, ignoreRestSiblings: false}]
   no-use-before-define: [2, {functions: false, classes: true, variables: true, allowNamedExports: true}]
-  no-useless-backreference: [0]
+  no-useless-backreference: [2]
   no-useless-call: [2]
   no-useless-catch: [2]
   no-useless-computed-key: [2]
@@ -353,7 +354,7 @@ rules:
   prefer-named-capture-group: [0]
   prefer-numeric-literals: [2]
   prefer-object-has-own: [0]
-  prefer-object-spread: [0]
+  prefer-object-spread: [2]
   prefer-promise-reject-errors: [2, {allowEmptyReject: false}]
   prefer-regex-literals: [2]
   prefer-rest-params: [2]
@@ -455,6 +456,7 @@ rules:
   unicorn/no-static-only-class: [2]
   unicorn/no-thenable: [2]
   unicorn/no-this-assignment: [2]
+  unicorn/no-unnecessary-await: [2]
   unicorn/no-unreadable-array-destructuring: [0]
   unicorn/no-unreadable-iife: [2]
   unicorn/no-unsafe-regex: [0]
@@ -519,6 +521,7 @@ rules:
   unicorn/require-number-to-fixed-digits-argument: [2]
   unicorn/require-post-message-target-origin: [0]
   unicorn/string-content: [0]
+  unicorn/switch-case-braces: [0]
   unicorn/template-indent: [2]
   unicorn/text-encoding-identifier-case: [0]
   unicorn/throw-new-error: [2]

Makefile

@@ -341,7 +341,7 @@ lint: lint-frontend lint-backend
 
 .PHONY: lint-frontend
 lint-frontend: node_modules
-	npx eslint --color --max-warnings=0 --ext js,vue web_src/js build *.config.js docs/assets/js tests/e2e/*.test.e2e.js tests/e2e/utils_e2e.js
+	npx eslint --color --max-warnings=0 --ext js,vue web_src/js build *.config.js docs/assets/js tests/e2e
 	npx stylelint --color --max-warnings=0 web_src/less
 	npx spectral lint -q -F hint $(SWAGGER_SPEC)
 	npx markdownlint docs *.md

package.json

@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.6",
-    "@mcaptcha/vanilla-glue": "0.1.0-alpha-2",
-    "@primer/octicons": "17.5.0",
-    "@vue/compiler-sfc": "3.2.37",
+    "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+    "@primer/octicons": "17.7.0",
+    "@vue/compiler-sfc": "3.2.40",
     "add-asset-webpack-plugin": "2.0.1",
     "css-loader": "6.7.1",
     "dropzone": "6.0.0-beta.2",
-    "easymde": "2.17.0",
+    "easymde": "2.18.0",
     "esbuild-loader": "2.20.0",
     "escape-goat": "4.0.0",
     "fast-glob": "3.2.12",
@@ -23,19 +23,19 @@
     "jquery.are-you-sure": "1.9.0",
     "katex": "0.16.2",
     "less": "4.1.3",
-    "less-loader": "11.0.0",
+    "less-loader": "11.1.0",
     "license-checker-webpack-plugin": "0.2.1",
-    "mermaid": "9.1.6",
+    "mermaid": "9.1.7",
     "mini-css-extract-plugin": "2.6.1",
     "monaco-editor": "0.34.0",
     "monaco-editor-webpack-plugin": "7.0.1",
     "pretty-ms": "8.0.0",
     "sortablejs": "1.15.0",
-    "swagger-ui-dist": "4.14.0",
+    "swagger-ui-dist": "4.14.2",
     "tippy.js": "6.3.7",
     "tributejs": "5.1.3",
     "uint8-to-base64": "0.2.0",
-    "vue": "3.2.37",
+    "vue": "3.2.40",
     "vue-bar-graph": "2.0.0",
     "vue-loader": "17.0.0",
     "vue3-calendar-heatmap": "2.0.0",
@@ -47,23 +47,23 @@
     "wrap-ansi": "8.0.1"
   },
   "devDependencies": {
-    "@playwright/test": "1.26.1",
+    "@playwright/test": "1.27.0",
     "@stoplight/spectral-cli": "6.5.1",
-    "eslint": "8.23.0",
+    "eslint": "8.25.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jquery": "1.5.1",
     "eslint-plugin-sonarjs": "0.15.0",
-    "eslint-plugin-unicorn": "43.0.2",
-    "eslint-plugin-vue": "9.4.0",
-    "jest": "29.0.3",
-    "jest-environment-jsdom": "29.0.3",
+    "eslint-plugin-unicorn": "44.0.2",
+    "eslint-plugin-vue": "9.6.0",
+    "jest": "29.1.2",
+    "jest-environment-jsdom": "29.1.2",
     "jest-extended": "3.1.0",
     "markdownlint-cli": "0.32.2",
     "postcss-less": "6.0.0",
-    "stylelint": "14.11.0",
+    "stylelint": "14.13.0",
     "stylelint-config-standard": "28.0.0",
     "svgo": "2.8.0",
-    "updates": "13.1.5"
+    "updates": "13.1.8"
   },
   "browserslist": [
     "defaults",

playwright.config.js

@@ -24,7 +24,7 @@ export default {
   },
 
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: Boolean(process.env.CI),
 
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,

public/img/svg/octicon-alert-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-alert-fill" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575L6.457 1.047zM8 5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 8 5zm1 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>

web_src/js/components/VueComponentLoader.js

@@ -44,6 +44,6 @@ export function initVueApp(el, opts = {}) {
   if (!el) return null;
 
   return createApp(
-    Object.assign({delimiters: vueDelimiters}, opts)
+    {delimiters: vueDelimiters, ...opts}
   ).mount(el);
 }

web_src/js/features/stopwatch.js

@@ -135,7 +135,7 @@ function updateStopwatchData(data) {
     updateStopwatchTime(seconds);
     btnEl.removeClass('hidden');
   }
-  return !!data.length;
+  return Boolean(data.length);
 }
 
 let updateTimeIntervalId = null; // holds setInterval id when active

webpack.config.js

@@ -261,7 +261,7 @@ export default {
     excludeAssets: [
       /^js\/monaco-language-.+\.js$/,
       !isProduction && /^js\/licenses.txt$/,
-    ].filter((item) => !!item),
+    ].filter(Boolean),
     groupAssetsByChunk: false,
     groupAssetsByEmitStatus: false,
     groupAssetsByInfo: false,