w: upgrade deps

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(
-      <Component
-        ref={(ref) => { this.ref = ref; }}
-        value={value}
-        onChange={this.onChange}
-        multi={this.options.multi}
-      />,
-      this.container,
-    );
+    ReactDOM.createRoot(this.container).render(<Component
+      ref={(ref) => { this.ref = ref; }}
+      value={value}
+      onChange={this.onChange}
+      multi={this.options.multi}
+    />);
   }
 }
 

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
-monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
+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",
-    "@fontsource/dm-mono": "^4.5.7",
-    "@fontsource/fira-code": "^4.5.8",
-    "@fontsource/inconsolata": "^4.5.4",
-    "@fontsource/jetbrains-mono": "^4.5.5",
-    "@fontsource/pt-mono": "^4.5.5",
-    "@fontsource/roboto-mono": "^4.5.5",
-    "@fontsource/source-code-pro": "^4.5.6",
-    "@fontsource/ubuntu-mono": "^4.5.6",
+    "@blueprintjs/core": "^4.3.0",
+    "@fontsource/dm-mono": "^4.5.8",
+    "@fontsource/fira-code": "^4.5.9",
+    "@fontsource/inconsolata": "^4.5.6",
+    "@fontsource/jetbrains-mono": "^4.5.8",
+    "@fontsource/pt-mono": "^4.5.8",
+    "@fontsource/roboto-mono": "^4.5.7",
+    "@fontsource/source-code-pro": "^4.5.9",
+    "@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",
-    "monaco-editor": "^0.31.1",
+    "moment": "^2.29.3",
+    "monaco-editor": "^0.33.0",
     "monaco-editor-nls": "^2.0.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-themes": "^0.4.0",
-    "nanoid": "^3.3.2",
+    "monaco-themes": "^0.4.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-dnd": "^16.0.0",
-    "react-dnd-html5-backend": "^16.0.0",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.8",
+    "react": "^18.1.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.1.0",
+    "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-anchor": "^8.4.1",
+    "markdown-it": "^13.0.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 {
-      React, render, Provider, store,
-    } = await loadReactRedux(MessagePadReducer);
+    const { 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 {
-      React, render, Provider, store,
-    } = await loadReactRedux(ProblemConfigReducer);
+    const { 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 {
-      React, render, unmountComponentAtNode, Provider, store,
-    } = await loadReactRedux(ScratchpadReducer);
+    const { 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 = () => {
-      unmountComponentAtNode($('#scratchpad').get(0));
-    };
+    unmountReact = () => root.unmount();
     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([
-        import('vj/components/objective-question/index'),
-        import('react'),
-        import('react-dom'),
-      ]);
+      const { default: Objective } = await import('vj/components/objective-question/index');
 
-      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,
-    unmountComponentAtNode,
+    createRoot,
     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;