ui: add matchMedia().addEventListener polyfill

.vscode/settings.json

@@ -3,8 +3,6 @@
     "files.encoding": "utf8",
     "files.eol": "\n",
     "editor.detectIndentation": true,
-    "editor.formatOnSave": true,
-    "editor.renderWhitespace": "boundary",
     "typescript.tsdk": "node_modules/typescript/lib",
     "[json]": {
         "files.insertFinalNewline": true,

package.json

@@ -33,24 +33,24 @@
         "@types/autocannon": "^7.6.1",
         "@types/cross-spawn": "^6.0.2",
         "@types/mocha": "^9.1.1",
-        "@types/node": "^17.0.33",
+        "@types/node": "^17.0.35",
         "@types/semver": "^7.3.9",
         "@types/supertest": "^2.0.12",
-        "@typescript-eslint/eslint-plugin": "^5.23.0",
-        "@typescript-eslint/parser": "^5.23.0",
+        "@typescript-eslint/eslint-plugin": "^5.25.0",
+        "@typescript-eslint/parser": "^5.25.0",
         "autocannon": "^7.9.0",
         "cac": "^6.7.12",
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
         "esbuild": "0.14.3",
-        "eslint": "^8.15.0",
+        "eslint": "^8.16.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-import-resolver-typescript": "^2.7.1",
         "eslint-import-resolver-webpack": "^0.13.2",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react": "^7.30.0",
         "eslint-plugin-simple-import-sort": "7.0.0",
         "fs-extra": "^10.1.0",
         "globby": "11.1.0",

packages/hydrooj/package.json

@@ -12,7 +12,7 @@
     },
     "preferUnplugged": true,
     "dependencies": {
-        "@graphql-tools/schema": "^8.3.11",
+        "@graphql-tools/schema": "^8.3.13",
         "@hydrooj/utils": "workspace:*",
         "adm-zip": "0.5.5",
         "ajv": "^8.11.0",

packages/ui-default/components/editor/index.ts

@@ -265,6 +265,8 @@ export default class Editor extends DOMAttachedObject {
 
   focus() {
     this.ensureValid();
+    this.vditor?.focus();
+    if (!this.editor || !this.model) return;
     this.editor.focus();
     const range = this.model.getFullModelRange();
     this.editor.setPosition({ lineNumber: range.endLineNumber, column: range.endColumn });

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.37.10",
+  "version": "4.37.11",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -10,7 +10,7 @@
     "lint": "eslint"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^4.3.1",
+    "@blueprintjs/core": "^4.3.2",
     "@fontsource/dm-mono": "^4.5.8",
     "@fontsource/fira-code": "^4.5.9",
     "@fontsource/inconsolata": "^4.5.6",
@@ -43,11 +43,11 @@
     "echarts": "^5.3.2",
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
-    "esbuild-loader": "^2.18.0",
+    "esbuild-loader": "^2.19.0",
     "fancy-log": "^2.0.0",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "graphiql": "1.8.9",
+    "graphiql": "1.8.10",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.1",
@@ -58,6 +58,7 @@
     "jquery-scroll-lock": "^3.1.3",
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
+    "matchmedia-polyfill": "^0.3.2",
     "mini-css-extract-plugin": "^1.6.2",
     "moment": "^2.29.3",
     "monaco-editor": "^0.33.0",
@@ -114,7 +115,7 @@
     "fs-extra": "^10.1.0",
     "js-yaml": "^4.1.0",
     "jsesc": "^3.0.2",
-    "katex": "^0.15.3",
+    "katex": "^0.15.6",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.4",

packages/ui-default/polyfill.ts

@@ -1,5 +1,6 @@
 import queueMicrotask from 'queue-microtask';
 import browserUpdate from 'browser-update';
+import 'matchmedia-polyfill';
 
 window.queueMicrotask = queueMicrotask;
 browserUpdate({
@@ -9,3 +10,66 @@ browserUpdate({
   insecure: true,
   api: 2022.03,
 });
+
+// monaco-editor requires this polyfill
+if (window.MediaQueryList) {
+  MediaQueryList.prototype.addEventListener = (k, listener) => {
+    MediaQueryList.prototype.addListener(listener);
+  };
+}
+if (!(window.matchMedia('all').addListener || window.matchMedia('all').addEventListener)) {
+  const localMatchMedia = window.matchMedia;
+  const hasMediaQueries = localMatchMedia('only all').matches;
+  let isListening = false;
+  let timeoutID;
+  const queries = [];
+  const handleChange = function () {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(() => {
+      for (let i = 0, il = queries.length; i < il; i++) {
+        const { mql } = queries[i];
+        const listeners = queries[i].listeners || [];
+        const { matches } = localMatchMedia(mql.media);
+        if (matches !== mql.matches) {
+          mql.matches = matches;
+          for (let j = 0, jl = listeners.length; j < jl; j++) {
+            listeners[j].call(window, mql);
+          }
+        }
+      }
+    }, 30);
+  };
+  window.matchMedia = function (media) {
+    const mql = localMatchMedia(media);
+    const listeners = [];
+    let index = 0;
+    if (!mql.addListener) {
+      mql.addListener = function (listener) {
+        if (!hasMediaQueries) return;
+        if (!isListening) {
+          isListening = true;
+          window.addEventListener('resize', handleChange, true);
+        }
+        if (index === 0) {
+          index = queries.push({
+            mql,
+            listeners,
+          });
+        }
+        listeners.push(listener);
+      };
+      mql.removeListener = function (listener) {
+        for (let i = 0, il = listeners.length; i < il; i++) {
+          if (listeners[i] === listener) {
+            listeners.splice(i, 1);
+          }
+        }
+      };
+    }
+    if (!mql.addEventListener) {
+      mql.addEventListener = (k, listener) => mql.addListener(listener);
+      mql.removeEventListener = (k, listener) => mql.removeListener(listener);
+    }
+    return mql;
+  };
+}

packages/ui-default/templates/layout/html5.html

@@ -42,7 +42,7 @@
       var _htmlNode = document.documentElement;
       _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
       try {
-        import('data:text/javascript,');Object.fromEntries([])
+        import('data:text/javascript,');Object.fromEntries([]);window.matchMedia('all').addEventListener('change',()=>{});
       } catch(e) {
         const s = document.createElement('script');
         s.async = false;

packages/vjudge/package.json

@@ -12,7 +12,7 @@
         "chrome-finder": "^1.0.7",
         "jsdom": "^19.0.0",
         "lodash": "^4.17.21",
-        "puppeteer-core": "^14.1.0",
+        "puppeteer-core": "^14.1.1",
         "puppeteer-extra": "^3.2.3",
         "puppeteer-extra-plugin-portal": "^3.1.0",
         "puppeteer-extra-plugin-stealth": "^2.9.0",