w: upgrade deps

package.json

@@ -32,38 +32,37 @@
     "devDependencies": {
         "@types/autocannon": "^7.6.1",
         "@types/cross-spawn": "^6.0.2",
-        "@types/mocha": "^9.1.0",
+        "@types/mocha": "^9.1.1",
-        "@types/node": "^17.0.23",
+        "@types/node": "^17.0.32",
         "@types/semver": "^7.3.9",
         "@types/supertest": "^2.0.12",
-        "@typescript-eslint/eslint-plugin": "5.14.0",
+        "@typescript-eslint/eslint-plugin": "^5.23.0",
-        "@typescript-eslint/parser": "5.14.0",
+        "@typescript-eslint/parser": "^5.23.0",
-        "autocannon": "^7.8.1",
+        "autocannon": "^7.9.0",
         "cac": "^6.7.12",
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
         "esbuild": "0.14.3",
-        "eslint": "^8.12.0",
+        "eslint": "^8.15.0",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "16.1.1",
+        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-import-resolver-typescript": "2.5.0",
+        "eslint-import-resolver-typescript": "^2.7.1",
         "eslint-import-resolver-webpack": "^0.13.2",
-        "eslint-plugin-import": "2.25.4",
+        "eslint-plugin-import": "2.26.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-simple-import-sort": "7.0.0",
-        "fs-extra": "^10.0.1",
+        "fs-extra": "^10.1.0",
         "globby": "11.1.0",
         "latest-version": "^6.0.0",
-        "mocha": "^9.2.2",
+        "mocha": "^10.0.0",
-        "mongo-mock": "^4.1.0",
         "mongodb": "^3.7.3",
-        "mongodb-memory-server": "^8.4.2",
+        "mongodb-memory-server": "^8.5.2",
         "ora": "5.4.1",
-        "semver": "^7.3.5",
+        "semver": "^7.3.7",
-        "supertest": "^6.2.2",
+        "supertest": "^6.2.3",
-        "typedoc": "^0.22.13",
+        "typedoc": "^0.22.15",
-        "typescript": "4.6.2"
+        "typescript": "^4.6.4"
     },
     "resolutions": {
         "esbuild": "0.14.3"

packages/center/package.json

@@ -8,7 +8,7 @@
     "preferUnplugged": true,
     "dependencies": {
         "js-yaml": "^4.1.0",
-        "superagent": "^7.1.2"
+        "superagent": "^7.1.3"
     },
     "devDependencies": {
         "@types/js-yaml": "^4.0.5"

packages/elastic/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@hydrooj/elastic-search",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "main": "package.json",
     "repository": "https://github.com/hydro-dev/Hydro",
     "author": "undefined <i@undefined.moe>",
     "license": "AGPL-3.0-or-later",
     "dependencies": {
-        "@elastic/elasticsearch": "^8.1.0"
+        "@elastic/elasticsearch": "^8.2.0-patch.1"
     }
 }

packages/fps-importer/package.json

@@ -10,12 +10,12 @@
     "dependencies": {
         "adm-zip": "0.5.5",
         "decode-html": "^2.0.0",
-        "fs-extra": "^10.0.1",
+        "fs-extra": "^10.1.0",
         "mongodb": "^3.7.3",
         "xml2js": "^0.4.23"
     },
     "devDependencies": {
-        "@types/xml2js": "^0.4.9"
+        "@types/xml2js": "^0.4.11"
     },
     "peerDependencies": {
         "hydrooj": "*"

packages/hydrojudge/package.json

@@ -1,29 +1,29 @@
 {
     "name": "@hydrooj/hydrojudge",
     "bin": "bin/hydrojudge.js",
-    "version": "2.19.1",
+    "version": "2.19.2",
     "main": "package.json",
     "author": "undefined <i@undefined.moe>",
     "repository": "https://github.com/hydro-dev/Hydro.git",
     "dependencies": {
         "@hydrooj/utils": "workspace:*",
-        "axios": "^0.26.1",
+        "axios": "^0.27.2",
         "cac": "^6.7.12",
         "esbuild": "0.14.3",
-        "fs-extra": "^10.0.1",
+        "fs-extra": "^10.1.0",
         "js-yaml": "^4.1.0",
         "lodash": "^4.17.21",
         "mongodb": "^3.7.3",
         "p-queue": "^7.2.0",
         "shell-quote": "^1.7.3",
-        "ws": "^8.5.0"
+        "ws": "^8.6.0"
     },
     "preferUnplugged": true,
     "license": "AGPL-3.0-or-later",
     "devDependencies": {
         "@types/fs-extra": "^9.0.13",
         "@types/js-yaml": "^4.0.5",
-        "@types/lodash": "^4.14.181",
+        "@types/lodash": "^4.14.182",
         "@types/shell-quote": "^1.7.1",
         "@types/ws": "^8.5.3"
     },

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.13.2",
+    "version": "3.13.3",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",
@@ -12,7 +12,7 @@
     },
     "preferUnplugged": true,
     "dependencies": {
-        "@graphql-tools/schema": "^8.3.6",
+        "@graphql-tools/schema": "^8.3.11",
         "@hydrooj/utils": "workspace:*",
         "adm-zip": "0.5.5",
         "ajv": "^8.11.0",
@@ -23,32 +23,32 @@
         "emoji-regex": "^10.1.0",
         "emojis-list": "2.1.0",
         "esbuild": "0.14.3",
-        "fs-extra": "^10.0.1",
+        "fs-extra": "^10.1.0",
-        "graphql": "^16.3.0",
+        "graphql": "^16.5.0",
         "graphql-scalars": "1.17.0",
         "isbinaryfile": "^5.0.0",
         "js-yaml": "^4.1.0",
         "koa": "^2.13.4",
-        "koa-body": "^4.2.0",
+        "koa-body": "^5.0.0",
         "koa-compress": "^5.1.0",
         "koa-proxies": "^0.12.2",
         "koa-router": "^10.1.1",
         "koa-static-cache": "^5.1.4",
         "lodash": "^4.17.21",
-        "lru-cache": "7.7.3",
+        "lru-cache": "7.9.0",
         "mime-types": "^2.1.35",
         "minio": "7.0.25",
         "moment-timezone": "^0.5.34",
         "mongodb": "^3.7.3",
-        "nanoid": "^3.3.2",
+        "nanoid": "^3.3.4",
-        "nodemailer": "^6.7.3",
+        "nodemailer": "^6.7.5",
         "notp": "^2.0.3",
         "p-queue": "^7.2.0",
         "require-resolve-hook": "^1.1.0",
-        "semver": "^7.3.6",
+        "semver": "^7.3.7",
         "serialize-javascript": "^6.0.0",
         "source-map-support": "^0.5.21",
-        "superagent": "^7.1.2",
+        "superagent": "^7.1.3",
         "thirty-two": "^1.0.2",
         "tx2": "^1.0.5"
     },
@@ -60,7 +60,7 @@
         "@types/koa-compress": "^4.0.3",
         "@types/koa-router": "^7.4.4",
         "@types/koa-static-cache": "^5.1.1",
-        "@types/lodash": "^4.14.181",
+        "@types/lodash": "^4.14.182",
         "@types/lru-cache": "^7.6.1",
         "@types/mime-types": "^2.1.1",
         "@types/minio": "^7.0.12",
@@ -71,7 +71,7 @@
         "@types/serialize-javascript": "^5.0.2",
         "@types/source-map-support": "^0.5.4",
         "@types/superagent": "^4.1.15",
-        "moment": "^2.29.2",
+        "moment": "^2.29.3",
         "pm2": "^5.2.0"
     },
     "peerDependencies": {

packages/import-qduoj/package.json

@@ -10,6 +10,6 @@
     "dependencies": {
         "adm-zip": "0.5.5",
         "decode-html": "^2.0.0",
-        "fs-extra": "^10.0.1"
+        "fs-extra": "^10.1.0"
     }
 }

packages/login-with-github/package.json

@@ -13,6 +13,6 @@
         "hydrooj": "*"
     },
     "dependencies": {
-        "superagent": "^7.1.2"
+        "superagent": "^7.1.3"
     }
 }

packages/login-with-google/package.json

@@ -13,6 +13,6 @@
         "hydrooj": "*"
     },
     "dependencies": {
-        "superagent": "^7.1.2"
+        "superagent": "^7.1.3"
     }
 }

packages/recaptcha/package.json

@@ -8,6 +8,6 @@
     "license": "AGPL-3.0-or-later",
     "preferUnplugged": true,
     "dependencies": {
-        "superagent": "^7.1.2"
+        "superagent": "^7.1.3"
     }
 }

packages/ui-default/build/config/webpack.js

@@ -81,7 +81,7 @@ export default function (env = {}) {
     mode: (env.production || env.measure) ? 'production' : 'development',
     profile: true,
     context: root(),
-    devtool: env.production ? 'source-map' : 'eval-source-map',
+    devtool: env.production ? 'source-map' : false,
     entry: {
       hydro: './entry.js',
       polyfill: './polyfill.ts',
@@ -101,8 +101,6 @@ export default function (env = {}) {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       alias: {
         vj: root(),
-        'js-yaml': root('utils/yamlCompact'),
-        'real-js-yaml': require.resolve('js-yaml'),
       },
     },
     module: {
@@ -226,10 +224,10 @@ export default function (env = {}) {
         filename: '[name].[hash:10].worker.js',
         customLanguages: [{
           label: 'yaml',
-          entry: require.resolve('@undefined-moe/monaco-yaml/lib/esm/monaco.contribution'),
+          entry: require.resolve('monaco-yaml/index.js'),
           worker: {
             id: 'vs/language/yaml/yamlWorker',
-            entry: require.resolve('@undefined-moe/monaco-yaml/lib/esm/yaml.worker.js'),
+            entry: require.resolve('monaco-yaml/yaml.worker.js'),
           },
         }],
       }),

packages/ui-default/components/autocomplete/DomainSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
@@ -33,15 +33,12 @@ export default class DomainSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(<Component
-      <Component
+      ref={(ref) => { this.ref = ref; }}
-        ref={(ref) => { this.ref = ref; }}
+      value={value}
-        value={value}
+      onChange={this.onChange}
-        onChange={this.onChange}
+      multi={this.options.multi}
-        multi={this.options.multi}
+    />);
-      />,
-      this.container,
-    );
   }
 }
 

packages/ui-default/components/autocomplete/ProblemSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
@@ -33,14 +33,13 @@ export default class ProblemSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}
         multi={this.options.multi}
         onChange={this.onChange}
       />,
-      this.container,
     );
   }
 }

packages/ui-default/components/autocomplete/UserSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete, { AutoCompleteOptions } from '.';
@@ -38,14 +38,13 @@ export default class UserSelectAutoComplete<Multi extends boolean> extends AutoC
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}
         multi={this.options.multi}
         onChange={this.onChange}
       />,
-      this.container,
     );
   }
 }

packages/ui-default/components/autocomplete/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoCompleteFC from './components/AutoComplete';
@@ -64,7 +64,7 @@ export default class AutoComplete extends DOMAttachedObject {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <AutoCompleteFC
         ref={(ref) => { this.ref = ref; }}
         height="34px"
@@ -76,7 +76,6 @@ export default class AutoComplete extends DOMAttachedObject {
         multi={this.options.multi}
         freeSolo={this.options.multi}
       />,
-      this.container,
     );
   }
 

packages/ui-default/components/discussion/comments.page.tsx

@@ -1,7 +1,7 @@
 import 'jquery.easing';
 
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Popover } from '@blueprintjs/core';
 import { AutoloadPage } from 'vj/misc/Page';
 import CommentBox from 'vj/components/discussion/CommentBox';
@@ -256,7 +256,7 @@ const commentsPage = new AutoloadPage('commentsPage', () => {
 
   const canUseReaction = $('[data-op="react"]').length > 0;
   $('[data-op="react"]').each((i, e) => {
-    ReactDOM.render(<Reaction payload={$(e).data('form')} ele={$(e).closest('.media__body').find('.reactions')} />, e);
+    ReactDOM.createRoot(e).render(<Reaction payload={$(e).data('form')} ele={$(e).closest('.media__body').find('.reactions')} />);
   });
   $(document).on('click', '.reaction', async (e) => {
     if (!canUseReaction) {

packages/ui-default/components/monaco/languages/yaml.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { setDiagnosticsOptions } from 'monaco-yaml';
 
 /** @type {Record<string, import('json-schema').JSONSchema7Definition>} */
 const problemConfigSchemaDef = {
@@ -78,8 +78,7 @@ const problemConfigSchema = {
   additionalProperties: false,
 };
 
-// @ts-ignore
+setDiagnosticsOptions({
-monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
   validate: true,
   enableSchemaRequest: true,
   hover: true,
@@ -89,7 +88,7 @@ monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
     {
       uri: 'https://hydro.js.org/schema/problemConfig.json',
       fileMatch: ['hydro://problem/file/config.yaml'],
-      schema: problemConfigSchema,
+      schema: problemConfigSchema as any,
     },
     {
       uri: `${UiContext.cdn_prefix}manage/setting/schema.json`,

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.36.2",
+  "version": "4.37.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -10,23 +10,23 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@blueprintjs/core": "^4.2.1",
+    "@blueprintjs/core": "^4.3.0",
-    "@fontsource/dm-mono": "^4.5.7",
+    "@fontsource/dm-mono": "^4.5.8",
-    "@fontsource/fira-code": "^4.5.8",
+    "@fontsource/fira-code": "^4.5.9",
-    "@fontsource/inconsolata": "^4.5.4",
+    "@fontsource/inconsolata": "^4.5.6",
-    "@fontsource/jetbrains-mono": "^4.5.5",
+    "@fontsource/jetbrains-mono": "^4.5.8",
-    "@fontsource/pt-mono": "^4.5.5",
+    "@fontsource/pt-mono": "^4.5.8",
-    "@fontsource/roboto-mono": "^4.5.5",
+    "@fontsource/roboto-mono": "^4.5.7",
-    "@fontsource/source-code-pro": "^4.5.6",
+    "@fontsource/source-code-pro": "^4.5.9",
-    "@fontsource/ubuntu-mono": "^4.5.6",
+    "@fontsource/ubuntu-mono": "^4.5.9",
     "@hydrooj/utils": "workspace:*",
     "@types/gulp-if": "^0.0.34",
     "@types/jquery": "^3.5.14",
     "@types/json-schema": "^7.0.11",
     "@types/katex": "^0.14.0",
     "@types/qrcode": "^1.4.2",
+    "@types/react-dom": "^18.0.3",
     "@types/redux-logger": "^3.0.9",
-    "@undefined-moe/monaco-yaml": "^2.5.1",
     "ansi_up": "^5.1.0",
     "autoprefixer": "^9.8.8",
     "browser-update": "^3.3.38",
@@ -34,7 +34,7 @@
     "chunk-progress-webpack-plugin": "^2.0.1",
     "classnames": "^2.3.1",
     "clean-webpack-plugin": "^4.0.0",
-    "clipboard": "^2.0.10",
+    "clipboard": "^2.0.11",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^4.3.0",
     "diff": "^5.0.0",
@@ -43,11 +43,10 @@
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
     "esbuild-loader": "^2.18.0",
-    "eslint": "^8.12.0",
     "fancy-log": "^2.0.0",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "graphiql": "^1.8.3",
+    "graphiql": "^1.8.9",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.1",
@@ -59,31 +58,32 @@
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
     "mini-css-extract-plugin": "^1.6.2",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
-    "monaco-editor": "^0.31.1",
+    "monaco-editor": "^0.33.0",
     "monaco-editor-nls": "^2.0.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-themes": "^0.4.0",
+    "monaco-themes": "^0.4.2",
-    "nanoid": "^3.3.2",
+    "monaco-yaml": "^4.0.0-alpha.3",
+    "nanoid": "^3.3.4",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pickadate": "^3.6.4",
     "plugin-error": "^1.0.1",
     "postcss-loader": "^3.0.0",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.28.0",
     "prop-types": "^15.8.1",
     "qrcode": "^1.5.0",
     "queue-microtask": "^1.2.3",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
-    "react-dnd": "^16.0.0",
+    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.0",
+    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.0.1",
     "react-split-pane": "^0.1.92",
     "reconnecting-websocket": "^4.4.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.4.1",
@@ -102,7 +102,7 @@
     "timeago.js": "^4.0.2",
     "vditor": "^3.8.13",
     "vinyl-buffer": "^1.0.1",
-    "web-streams-polyfill": "^3.2.0",
+    "web-streams-polyfill": "^3.2.1",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^3.11.3",
@@ -110,13 +110,13 @@
   },
   "dependencies": {
     "esbuild": "0.14.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "js-yaml": "^4.1.0",
     "jsesc": "^3.0.2",
     "katex": "^0.15.3",
     "lodash": "^4.17.21",
-    "markdown-it": "^12.3.2",
+    "markdown-it": "^13.0.1",
-    "markdown-it-anchor": "^8.4.1",
+    "markdown-it-anchor": "^8.6.4",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-mark": "^3.0.1",

packages/ui-default/pages/api.page.tsx

@@ -2,7 +2,7 @@
 import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 const Logo = () => <span>Hydro API Console </span>;
 const defaultQuery = `\
@@ -43,7 +43,7 @@ const page = new NamedPage('api', async () => {
     />
   );
 
-  render(<App />, document.getElementById('graphiql'));
+  ReactDOM.createRoot(document.getElementById('graphiql')).render(<App />);
 });
 
 export default page;

packages/ui-default/pages/home_messages.page.jsx

@@ -1,4 +1,6 @@
 import { NamedPage } from 'vj/misc/Page';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import api, { gql } from 'vj/utils/api';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import parseQueryString from 'vj/utils/parseQueryString';
@@ -26,9 +28,7 @@ const page = new NamedPage('home_messages', () => {
     const { default: WebSocket } = await import('../components/socket');
     const { default: MessagePadApp } = await import('../components/messagepad');
     const { default: MessagePadReducer } = await import('../components/messagepad/reducers');
-    const {
+    const { Provider, store } = await loadReactRedux(MessagePadReducer);
-      React, render, Provider, store,
-    } = await loadReactRedux(MessagePadReducer);
 
     reduxStore = store;
 
@@ -71,7 +71,7 @@ const page = new NamedPage('home_messages', () => {
       return this;
     };
 
-    render(
+    createRoot($('#messagePad').get(0)).render(
       <Provider store={store}>
         <MessagePadApp
           onAdd={async () => {
@@ -84,7 +84,6 @@ const page = new NamedPage('home_messages', () => {
           }}
         />
       </Provider>,
-      $('#messagePad').get(0),
     );
   }
 

packages/ui-default/pages/problem_config.page.tsx

@@ -1,5 +1,7 @@
 import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import i18n from 'vj/utils/i18n';
 import yaml from 'js-yaml';
@@ -149,9 +151,7 @@ const page = new NamedPage('problem_config', () => {
       import('vj/components/problemconfig/reducer'),
     ]);
 
-    const {
+    const { Provider, store } = await loadReactRedux(ProblemConfigReducer);
-      React, render, Provider, store,
-    } = await loadReactRedux(ProblemConfigReducer);
 
     reduxStore = store;
 
@@ -179,7 +179,7 @@ const page = new NamedPage('problem_config', () => {
         subtasks: normalizeSubtasks(subtasks, (i) => i, state.config.time, state.config.memory, true),
       });
     });
-    render(
+    createRoot($('#ProblemConfig').get(0)).render(
       <Provider store={store}>
         <div className="row">
           <div className="medium-5 columns">
@@ -191,7 +191,6 @@ const page = new NamedPage('problem_config', () => {
         </div>
         <button className="rounded primary button" onClick={() => uploadConfig(store.getState().config)}>{i18n('Submit')}</button>
       </Provider>,
-      $('#ProblemConfig').get(0),
     );
   }
 

packages/ui-default/pages/problem_detail.page.jsx

@@ -1,4 +1,6 @@
 import yaml from 'js-yaml';
+import ReactDOM, { createRoot } from 'react-dom/client';
+import React from 'react';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
 import { NamedPage } from 'vj/misc/Page';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
@@ -132,9 +134,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     const { default: WebSocket } = await import('../components/socket');
     const { default: ScratchpadApp } = await import('../components/scratchpad');
     const { default: ScratchpadReducer } = await import('../components/scratchpad/reducers');
-    const {
+    const { Provider, store } = await loadReactRedux(ScratchpadReducer);
-      React, render, unmountComponentAtNode, Provider, store,
-    } = await loadReactRedux(ScratchpadReducer);
 
     const sock = new WebSocket(UiContext.pretestConnUrl);
     sock.onmessage = (message) => {
@@ -145,17 +145,15 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       });
     };
 
+    const root = createRoot($('#scratchpad').get(0));
     renderReact = () => {
-      render(
+      root.render(
         <Provider store={store}>
           <ScratchpadApp />
         </Provider>,
-        $('#scratchpad').get(0),
       );
     };
-    unmountReact = () => {
+    unmountReact = () => root.unmount();
-      unmountComponentAtNode($('#scratchpad').get(0));
-    };
     reactLoaded = true;
     $('.loader-container').hide();
   }
@@ -192,17 +190,12 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       const props = yaml.load(s);
       if (!(props instanceof Array)) return;
       $('.outer-loader-container').show();
-      const [{ default: Objective }, React, ReactDOM] = await Promise.all([
+      const { default: Objective } = await import('vj/components/objective-question/index');
-        import('vj/components/objective-question/index'),
-        import('react'),
-        import('react-dom'),
-      ]);
 
-      ReactDOM.render(
+      ReactDOM.createRoot($('.problem-content').get(0)).render(
         <div className="section__body typo">
           <Objective panel={props} target={UiContext.postSubmitUrl}></Objective>
         </div>,
-        $('.problem-content').get(0),
       );
       $('.outer-loader-container').hide();
     } catch (e) { }

packages/ui-default/utils/loadReactRedux.ts

@@ -2,7 +2,7 @@ import { Action, AnyAction, Reducer } from 'redux';
 
 export default async function loadReactRedux<S, A extends Action = AnyAction>(storeReducer: Reducer<S, A>) {
   const React = await import('react');
-  const { render, unmountComponentAtNode } = await import('react-dom');
+  const { createRoot } = await import('react-dom/client');
   const { Provider } = await import('react-redux');
   const { createStore, applyMiddleware } = await import('redux');
   const { default: reduxThunk } = await import('redux-thunk');
@@ -24,8 +24,7 @@ export default async function loadReactRedux<S, A extends Action = AnyAction>(st
 
   return {
     React,
-    render,
+    createRoot,
-    unmountComponentAtNode,
     Provider,
     store,
   };

packages/ui-default/utils/yamlCompact.js

@@ -1,8 +0,0 @@
-// eslint-disable-next-line import/no-unresolved
-import yaml, { Schema } from 'real-js-yaml';
-
-Schema.create = (arg1, arg2) => new Schema(arg1, arg2);
-
-// eslint-disable-next-line import/no-unresolved
-export * from 'real-js-yaml';
-export default yaml;

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hydrooj/utils",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "hydrooj utils",
     "main": "package.json",
     "repository": "https://github.com/hydro-dev/Hydro.git",
@@ -8,14 +8,13 @@
     "license": "AGPL-3.0-or-later",
     "preferUnplugged": true,
     "dependencies": {
-        "fs-extra": "^10.0.1",
+        "fs-extra": "^10.1.0",
         "js-yaml": "^4.1.0",
-        "moment": "^2.29.1",
+        "moment-timezone": "^0.5.34",
         "mongodb": "^3.7.3",
-        "systeminformation": "^5.11.9"
+        "systeminformation": "^5.11.14"
     },
     "devDependencies": {
-        "@types/fs-extra": "^9.0.13",
+        "@types/fs-extra": "^9.0.13"
-        "moment-timezone": "^0.5.34"
     }
 }

packages/vjudge/package.json

@@ -12,16 +12,16 @@
         "chrome-finder": "^1.0.7",
         "jsdom": "^19.0.0",
         "lodash": "^4.17.21",
-        "puppeteer-core": "^13.5.2",
+        "puppeteer-core": "^14.0.0",
         "puppeteer-extra": "^3.2.3",
         "puppeteer-extra-plugin-portal": "^3.0.1",
         "puppeteer-extra-plugin-stealth": "^2.9.0",
-        "superagent": "^7.1.2",
+        "superagent": "^7.1.3",
         "superagent-proxy": "^3.0.0"
     },
     "devDependencies": {
         "@types/jsdom": "^16.2.14",
-        "@types/lodash": "^4.14.181",
+        "@types/lodash": "^4.14.182",
         "@types/superagent": "^4.1.15",
         "@types/superagent-proxy": "^3.0.0"
     }