Update JS dependencies (#19675)

* Update JS dependencies

- Update all JS dependencies minus vue and vue-loader
- Adapt to jest 28
- Add new eslint rules
- Tested Mermaid and Swagger-UI

* switch to @happy-dom/jest-environment for faster tests

* bump eslint env to es2022

.eslintrc

@@ -18,7 +18,7 @@ extends:
   - plugin:vue/recommended
 
 env:
-  es2021: true
+  es2022: true
   node: true
 
 globals:
@@ -174,6 +174,7 @@ rules:
   no-confusing-arrow: [0]
   no-console: [1, {allow: [info, warn, error]}]
   no-const-assign: [2]
+  no-constant-binary-expression: [2]
   no-constant-condition: [0]
   no-constructor-return: [2]
   no-continue: [0]
@@ -384,12 +385,14 @@ rules:
   unicorn/no-thenable: [2]
   unicorn/no-this-assignment: [2]
   unicorn/no-unreadable-array-destructuring: [0]
+  unicorn/no-unreadable-iife: [2]
   unicorn/no-unsafe-regex: [0]
   unicorn/no-unused-properties: [2]
   unicorn/no-useless-fallback-in-spread: [2]
   unicorn/no-useless-length-check: [2]
   unicorn/no-useless-promise-resolve-reject: [2]
   unicorn/no-useless-spread: [2]
+  unicorn/no-useless-switch-case: [2]
   unicorn/no-useless-undefined: [0]
   unicorn/no-zero-fractions: [2]
   unicorn/number-literal-case: [0]
@@ -411,7 +414,9 @@ rules:
   unicorn/prefer-json-parse-buffer: [0]
   unicorn/prefer-math-trunc: [2]
   unicorn/prefer-modern-dom-apis: [0]
+  unicorn/prefer-modern-math-apis: [2]
   unicorn/prefer-module: [2]
+  unicorn/prefer-native-coercion-functions: [2]
   unicorn/prefer-negative-index: [2]
   unicorn/prefer-node-append: [0]
   unicorn/prefer-node-protocol: [0]

jest.config.js

@@ -1,11 +1,11 @@
 export default {
   rootDir: 'web_src',
   setupFilesAfterEnv: ['jest-extended/all'],
-  testEnvironment: 'jsdom',
+  testEnvironment: '@happy-dom/jest-environment',
   testMatch: ['<rootDir>/**/*.test.js'],
   testTimeout: 20000,
   transform: {
-    '\\.svg$': 'jest-raw-loader',
+    '\\.svg$': '<rootDir>/js/testUtils/jestRawLoader.js',
   },
   verbose: false,
 };

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.6",
-    "@primer/octicons": "17.0.0",
+    "@primer/octicons": "17.1.0",
     "add-asset-webpack-plugin": "2.0.1",
     "css-loader": "6.7.1",
     "dropzone": "6.0.0-beta.2",
@@ -22,13 +22,13 @@
     "less": "4.1.2",
     "less-loader": "10.2.0",
     "license-checker-webpack-plugin": "0.2.1",
-    "mermaid": "8.14.0",
+    "mermaid": "9.1.0",
     "mini-css-extract-plugin": "2.6.0",
     "monaco-editor": "0.33.0",
     "monaco-editor-webpack-plugin": "7.0.1",
     "pretty-ms": "7.0.1",
     "sortablejs": "1.15.0",
-    "swagger-ui-dist": "4.10.0",
+    "swagger-ui-dist": "4.11.0",
     "tributejs": "5.1.3",
     "uint8-to-base64": "0.2.0",
     "vue": "2.6.14",
@@ -36,27 +36,27 @@
     "vue-calendar-heatmap": "0.8.4",
     "vue-loader": "15.9.8",
     "vue-template-compiler": "2.6.14",
-    "webpack": "5.70.0",
+    "webpack": "5.72.1",
     "webpack-cli": "4.9.2",
-    "workbox-routing": "6.5.2",
+    "workbox-routing": "6.5.3",
-    "workbox-strategies": "6.5.2",
+    "workbox-strategies": "6.5.3",
     "worker-loader": "3.0.8",
     "wrap-ansi": "8.0.1"
   },
   "devDependencies": {
-    "eslint": "8.12.0",
+    "@happy-dom/jest-environment": "3.1.1",
+    "eslint": "8.15.0",
     "eslint-plugin-html": "6.2.0",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-unicorn": "41.0.1",
+    "eslint-plugin-unicorn": "42.0.0",
-    "eslint-plugin-vue": "8.5.0",
+    "eslint-plugin-vue": "8.7.1",
-    "jest": "27.5.1",
+    "jest": "28.1.0",
     "jest-extended": "2.0.0",
-    "jest-raw-loader": "1.0.1",
     "postcss-less": "6.0.0",
-    "stylelint": "14.6.1",
+    "stylelint": "14.8.2",
     "stylelint-config-standard": "25.0.0",
     "svgo": "2.8.0",
-    "updates": "13.0.4"
+    "updates": "13.0.5"
   },
   "browserslist": [
     "defaults",

public/img/svg/octicon-cloud-offline.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-cloud-offline" width="16" height="16" aria-hidden="true"><path d="M7.25 2c-.69 0-1.351.13-1.957.371a.75.75 0 1 0 .554 1.394c.43-.17.903-.265 1.403-.265a3.72 3.72 0 0 1 3.541 2.496.75.75 0 0 0 .709.504c1.676 0 3 1.324 3 3a3 3 0 0 1-.681 1.92.75.75 0 0 0 1.156.955A4.496 4.496 0 0 0 16 9.5a4.472 4.472 0 0 0-3.983-4.471A5.222 5.222 0 0 0 7.25 2z"/><path fill-rule="evenodd" d="M.72 1.72a.75.75 0 0 1 1.06 0l2.311 2.31c.03.025.056.052.08.08l8.531 8.532a.785.785 0 0 1 .035.034l2.043 2.044a.75.75 0 1 1-1.06 1.06l-1.8-1.799a4.64 4.64 0 0 1-.42.019h-8A3.475 3.475 0 0 1 0 10.5c0-1.41.809-2.614 2.001-3.17a5.218 5.218 0 0 1 .646-2.622L.72 2.78a.75.75 0 0 1 0-1.06zM3.5 7.25c0-.505.096-.983.271-1.418L10.44 12.5H3.5c-1.124 0-2-.876-2-2 0-.95.624-1.716 1.484-1.936a.75.75 0 0 0 .557-.833A4.1 4.1 0 0 1 3.5 7.25z"/></svg>

public/img/svg/octicon-cloud.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-cloud" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 7.25A5.225 5.225 0 0 1 7.25 2a5.222 5.222 0 0 1 4.767 3.029A4.472 4.472 0 0 1 16 9.5c0 2.505-1.995 4.5-4.5 4.5h-8A3.475 3.475 0 0 1 0 10.5c0-1.41.809-2.614 2.001-3.17L2 7.25zm1.54.482a.75.75 0 0 1-.556.832c-.86.22-1.484.987-1.484 1.936 0 1.124.876 2 2 2h8c1.676 0 3-1.324 3-3s-1.324-3-3-3a.75.75 0 0 1-.709-.504A3.72 3.72 0 0 0 7.25 3.5C5.16 3.5 3.5 5.16 3.5 7.25a3.276 3.276 0 0 0 .035.436l.004.036.001.008v.002z"/></svg>

public/img/svg/octicon-file-directory-open-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-file-directory-open-fill" width="16" height="16" aria-hidden="true"><path d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237z"/></svg>

public/img/svg/octicon-sliders.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-sliders" width="16" height="16" aria-hidden="true"><path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6zM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75z"/></svg>

web_src/js/testUtils/jestRawLoader.js

@@ -0,0 +1,5 @@
+export default { // eslint-disable-line import/no-unused-modules
+  process: (content) => {
+    return {code: `module.exports = ${JSON.stringify(content)}`};
+  },
+};