Update JS dependencies (#17611)

- Update monaco, adapting to breaking changes
- Update dropzone, adapting to breaking changes
- Update linters, fix new issues, disable opinionated stylelint rules
- Rebuild SVGs and images
- Tested Dropzone and Monaco

Replaces: https://github.com/go-gitea/gitea/pull/17574

.eslintrc

@@ -368,6 +368,7 @@ rules:
   unicorn/no-array-push-push: [2]
   unicorn/no-console-spaces: [0]
   unicorn/no-document-cookie: [2]
+  unicorn/no-empty-file: [2]
   unicorn/no-fn-reference-in-iterator: [0]
   unicorn/no-for-loop: [0]
   unicorn/no-hex-escape: [0]
@@ -404,6 +405,7 @@ rules:
   unicorn/prefer-date-now: [2]
   unicorn/prefer-default-parameters: [0]
   unicorn/prefer-event-key: [2]
+  unicorn/prefer-export-from: [2]
   unicorn/prefer-includes: [2]
   unicorn/prefer-math-trunc: [2]
   unicorn/prefer-modern-dom-apis: [0]

.stylelintrc

@@ -1,16 +1,31 @@
 extends: stylelint-config-standard
 
+overrides:
+  - files: ["**/*.less"]
+    customSyntax: postcss-less
+
 rules:
+  alpha-value-notation: null
   at-rule-empty-line-before: null
   block-closing-brace-empty-line-before: null
+  color-function-notation: null
   color-hex-length: null
   comment-empty-line-before: null
+  declaration-block-no-redundant-longhand-properties: null
   declaration-block-single-line-max-declarations: null
   declaration-empty-line-before: null
+  hue-degree-notation: null
   indentation: 2
+  max-line-length: null
   no-descending-specificity: null
+  no-invalid-position-at-import-rule: null
   number-leading-zero: never
+  number-max-precision: null
+  property-no-vendor-prefix: null
   rule-empty-line-before: null
+  selector-class-pattern: null
+  selector-id-pattern: null
   selector-pseudo-element-colon-notation: double
   shorthand-property-no-redundant-values: true
-  no-invalid-position-at-import-rule: null
+  string-quotes: null
+  value-no-vendor-prefix: null

package.json

@@ -7,11 +7,11 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.5",
-    "@primer/octicons": "16.0.0",
+    "@primer/octicons": "16.1.1",
     "add-asset-webpack-plugin": "2.0.1",
     "codemirror": "5.63.3",
-    "css-loader": "6.4.0",
+    "css-loader": "6.5.1",
-    "dropzone": "5.9.3",
+    "dropzone": "6.0.0-beta.1",
     "easymde": "2.15.0",
     "esbuild-loader": "2.16.0",
     "escape-goat": "4.0.0",
@@ -23,19 +23,19 @@
     "less-loader": "10.2.0",
     "license-checker-webpack-plugin": "0.2.1",
     "mermaid": "8.13.3",
-    "mini-css-extract-plugin": "2.4.2",
+    "mini-css-extract-plugin": "2.4.4",
-    "monaco-editor": "0.29.1",
+    "monaco-editor": "0.30.1",
-    "monaco-editor-webpack-plugin": "5.0.0",
+    "monaco-editor-webpack-plugin": "6.0.0",
     "pretty-ms": "7.0.1",
     "sortablejs": "1.14.0",
-    "swagger-ui-dist": "4.0.0-beta.4",
+    "swagger-ui-dist": "4.1.0",
     "tributejs": "5.1.3",
     "vue": "2.6.14",
     "vue-bar-graph": "1.3.0",
     "vue-calendar-heatmap": "0.8.4",
     "vue-loader": "15.9.8",
     "vue-template-compiler": "2.6.14",
-    "webpack": "5.59.1",
+    "webpack": "5.63.0",
     "webpack-cli": "4.9.1",
     "workbox-routing": "6.3.0",
     "workbox-strategies": "6.3.0",
@@ -44,16 +44,17 @@
   },
   "devDependencies": {
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.0.1",
+    "eslint": "8.2.0",
     "eslint-plugin-html": "6.2.0",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-unicorn": "37.0.1",
+    "eslint-plugin-unicorn": "38.0.1",
-    "eslint-plugin-vue": "7.19.1",
+    "eslint-plugin-vue": "8.0.3",
-    "jest": "27.3.0",
+    "jest": "27.3.1",
     "jest-extended": "1.1.0",
-    "stylelint": "13.13.1",
+    "postcss-less": "5.0.0",
-    "stylelint-config-standard": "22.0.0",
+    "stylelint": "14.0.1",
-    "svgo": "2.7.0",
+    "stylelint-config-standard": "23.0.0",
+    "svgo": "2.8.0",
     "updates": "12.2.2"
   },
   "browserslist": [

public/img/svg/octicon-no-entry.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" class="svg octicon-no-entry" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 8a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm3.25 7.75a.75.75 0 0 0 0-1.5h-6.5a.75.75 0 0 0 0 1.5h6.5z"/></svg>
+<svg viewBox="0 0 16 16" class="svg octicon-no-entry" width="16" height="16" aria-hidden="true"><path d="M4.25 7.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5z"/><path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1.5 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/></svg>

web_src/js/features/codeeditor.js

@@ -45,7 +45,7 @@ function getLanguage(filename) {
 function updateEditor(monaco, editor, filename, lineWrapExts) {
   editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
   const model = editor.getModel();
-  const language = model.getModeId();
+  const language = model.getLanguageId();
   const newLanguage = getLanguage(filename);
   if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
 }

web_src/js/features/dropzone.js

@@ -3,6 +3,5 @@ export default async function createDropzone(el, opts) {
     import(/* webpackChunkName: "dropzone" */'dropzone'),
     import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
   ]);
-  Dropzone.autoDiscover = false;
   return new Dropzone(el, opts);
 }

web_src/less/_form.less

@@ -18,7 +18,7 @@ textarea,
 .ui.selection.dropdown,
 .ui.checkbox label::before,
 .ui.checkbox input:checked ~ label::before,
-.ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
   background: var(--color-input-background);
   border-color: var(--color-input-border);
   color: var(--color-input-text);
@@ -98,8 +98,8 @@ textarea:focus,
 .ui.checkbox input:focus ~ label::after,
 .ui.checkbox input:checked ~ label::after,
 .ui.checkbox label:active::after,
-.ui.checkbox input:not([type=radio]):indeterminate ~ label::after,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
 .ui.checkbox input:checked:focus ~ label::after,
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] ~ label {
@@ -265,7 +265,7 @@ textarea:focus,
       }
     }
 
-    input[type=number] {
+    input[type="number"] {
       -moz-appearance: textfield;
     }
 

web_src/less/features/gitgraph.less

@@ -68,7 +68,7 @@
     align-items: center;
 
     .node-relation {
-      font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
+      font-family: "Bitstream Vera Sans Mono", Courier, monospace;
     }
 
     .author {

web_src/less/features/imagediff.less

@@ -4,7 +4,7 @@
 
   img {
     border: 1px solid var(--color-primary-light-7);
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7);
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
   }
 
   .before-container {