ui: upgrade to webpack5

packages/ui-default/components/DOMAttachedObject.ts

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 let removalChecker = null;
 const res = [];
 

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

@@ -1,6 +1,6 @@
+import { assign } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
 import DomainSelectAutoCompleteFC from './components/DomainSelectAutoComplete';

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

@@ -1,6 +1,6 @@
+import { assign } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
 import ProblemSelectAutoCompleteFC from './components/ProblemSelectAutoComplete';

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

@@ -1,6 +1,6 @@
+import { assign } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete, { AutoCompleteOptions } from '.';
 import UserSelectAutoCompleteFC from './components/UserSelectAutoComplete';

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

@@ -1,12 +1,13 @@
 /* eslint-disable jsx-a11y/role-supports-aria-props */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import { debounce, uniqueId } from 'lodash';
+import PropTypes from 'prop-types';
 import React, {
-  forwardRef, useState, useRef, useImperativeHandle, useEffect,
+  forwardRef, useEffect,
+  useImperativeHandle, useRef, useState,
 } from 'react';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import PropTypes from 'prop-types';
-import { debounce, uniqueId } from 'lodash';
 import Icon from 'vj/components/react/IconComponent';
 
 export interface AutoCompleteProps<Item> {

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import AutoComplete from './AutoComplete';
 
 type DefaultProps = {

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

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import request from 'vj/utils/request';
 import type { DomainDoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import request from 'vj/utils/request';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const DomainSelectAutoComplete = forwardRef<AutoCompleteHandle<DomainDoc>, AutoCompleteProps<DomainDoc>>((props, ref) => (

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import AutoComplete from './AutoComplete';
 
 type DefaultProps = {

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

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import type { ProblemDoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import api, { gql } from 'vj/utils/api';
 import request from 'vj/utils/request';
-import type { ProblemDoc } from 'hydrooj/src/interface';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, AutoCompleteProps<ProblemDoc>>((props, ref) => (

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

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import api, { gql } from 'vj/utils/api';
 import type { Udoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import api, { gql } from 'vj/utils/api';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 // eslint-disable-next-line prefer-arrow-callback

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

@@ -1,6 +1,6 @@
+import { assign } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoCompleteFC from './components/AutoComplete';
 

packages/ui-default/components/calendar/index.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import moment from 'moment';
 import tpl from 'vj/utils/tpl';

packages/ui-default/components/contest/contest.page.ts

@@ -1,8 +1,9 @@
+import $ from 'jquery';
+import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
 import delay from 'vj/utils/delay';
 import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
-import Notification from 'vj/components/notification';
 
 const contestPage = new AutoloadPage('contestPage', () => {
   $('[data-contest-code]').on('click', (ev) => {

packages/ui-default/components/datepicker/datepicker.page.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 const datepickerPage = new AutoloadPage('datepickerPage', async () => {

packages/ui-default/components/dialog/DomDialog.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import zIndexManager from 'vj/utils/zIndexManager';

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

@@ -1,5 +1,6 @@
-import tpl from 'vj/utils/tpl';
+import $ from 'jquery';
 import i18n from 'vj/utils/i18n';
+import tpl from 'vj/utils/tpl';
 import DomDialog, { DialogOptions } from './DomDialog';
 
 export class Dialog {

packages/ui-default/components/discussion/CommentBox.js

@@ -1,8 +1,9 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import request from 'vj/utils/request';
 import TextareaHandler from 'vj/components/editor/textareaHandler';
 import Notification from 'vj/components/notification';
+import request from 'vj/utils/request';
 
 let initialized = false;
 const $template = $('.dczcomments__box').eq(0).clone();

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

@@ -1,13 +1,13 @@
 import 'jquery.easing';
 
-import { AutoloadPage } from 'vj/misc/Page';
-import CommentBox from 'vj/components/discussion/CommentBox';
+import $ from 'jquery';
 import { ConfirmDialog } from 'vj/components/dialog';
-
+import CommentBox from 'vj/components/discussion/CommentBox';
+import { AutoloadPage } from 'vj/misc/Page';
 import delay from 'vj/utils/delay';
-import { slideDown, slideUp } from 'vj/utils/slide';
-import request from 'vj/utils/request';
 import i18n from 'vj/utils/i18n';
+import request from 'vj/utils/request';
+import { slideDown, slideUp } from 'vj/utils/slide';
 import tpl from 'vj/utils/tpl';
 
 const $replyTemplate = $('.commentbox-container').eq(0).clone();

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

@@ -1,12 +1,12 @@
 import 'jquery.easing';
 
+import { Popover } from '@blueprintjs/core';
+import $ from 'jquery';
+import { chunk } from 'lodash';
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Popover } from '@blueprintjs/core';
 import { AutoloadPage } from 'vj/misc/Page';
-
 import request from 'vj/utils/request';
-import { chunk } from 'lodash';
 
 function renderReactions(reactions, self, rootEle) {
   let html = '';

packages/ui-default/components/dropdown/Dropdown.js

@@ -1,10 +1,9 @@
-import Drop from 'tether-drop';
 import _ from 'lodash';
-import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import Drop from 'tether-drop';
 import responsiveCutoff from 'vj/breakpoints.json';
-
-import zIndexManager from 'vj/utils/zIndexManager';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import { isBelow } from 'vj/utils/mediaQuery';
+import zIndexManager from 'vj/utils/zIndexManager';
 
 export default class Dropdown extends DOMAttachedObject {
   static DOMAttachKey = 'vjDropdownInstance';

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

@@ -1,7 +1,8 @@
+import $ from 'jquery';
 import _ from 'lodash';
-import Notification from 'vj/components/notification';
-import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import { nanoid } from 'nanoid';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import Notification from 'vj/components/notification';
 import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
 

packages/ui-default/components/footer/footer.page.ts

@@ -1,7 +1,8 @@
+import $ from 'jquery';
+import responsiveCutoff from 'vj/breakpoints.json';
 import { AutoloadPage } from 'vj/misc/Page';
 import { isBelow } from 'vj/utils/mediaQuery';
-import { slideUp, slideDown } from 'vj/utils/slide';
-import responsiveCutoff from 'vj/breakpoints.json';
+import { slideDown, slideUp } from 'vj/utils/slide';
 
 const footerPage = new AutoloadPage('footerPage', () => {
   if (!$('.footer').length) return;

packages/ui-default/components/form/form.page.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 import delay from 'vj/utils/delay';
 

packages/ui-default/components/form/multiSelectCheckbox.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 const lastSelectionByGroup = {};

packages/ui-default/components/form/textbox.page.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 const textboxPage = new AutoloadPage('textboxPage', () => {

packages/ui-default/components/highlighter/highlighter.page.ts

@@ -1,6 +1,7 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import tpl from 'vj/utils/tpl';
 import i18n from 'vj/utils/i18n';
+import tpl from 'vj/utils/tpl';
 
 const highlighterPage = new AutoloadPage('highlighterPage', () => {
   import('./prismjs').then(({ default: prismjs }) => {

packages/ui-default/components/highlighter/prismjs.js

@@ -1,11 +1,14 @@
-import Prism from 'prismjs';
-import components from 'prismjs/components';
-import getLoader from 'prismjs/dependencies';
+import Prism from 'prismjs'; // eslint-disable-line
+
 import 'prismjs/plugins/toolbar/prism-toolbar';
 import 'prismjs/plugins/toolbar/prism-toolbar.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+
 import Clipboard from 'clipboard';
+import $ from 'jquery';
+import components from 'prismjs/components';
+import getLoader from 'prismjs/dependencies';
 import Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
 import languageMeta from './meta';

packages/ui-default/components/hint.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { InfoDialog } from 'vj/components/dialog';
 import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';

packages/ui-default/components/hitokoto/index.page.js

@@ -1,6 +1,7 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
 import i18n from 'vj/utils/i18n';
+import request from 'vj/utils/request';
 import tpl from 'vj/utils/tpl';
 
 const hitokotoPage = new AutoloadPage('hitokotoPage', () => {

packages/ui-default/components/hotkey/hotkey.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import { AutoloadPage } from 'vj/misc/Page';
 

packages/ui-default/components/katex/katex.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 const katexPage = new AutoloadPage('katexPage', () => {

packages/ui-default/components/languageselect.tsx

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import i18n from 'vj/utils/i18n';

packages/ui-default/components/marker/Marker.js

@@ -1,6 +1,7 @@
+import $ from 'jquery';
 import _ from 'lodash';
-import delay from 'vj/utils/delay';
 import Tooltip from 'vj/components/tooltip/Tooltip';
+import delay from 'vj/utils/delay';
 import i18n from 'vj/utils/i18n';
 
 const MARKER_ID = `marker_${Math.floor(Math.random() * 0xFFFFFF).toString(16)}`;

packages/ui-default/components/marker/MarkerReactive.js

@@ -1,7 +1,7 @@
+import $ from 'jquery';
 import _ from 'lodash';
-
-import delay from 'vj/utils/delay';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import delay from 'vj/utils/delay';
 import Marker from './Marker';
 
 export default class MarkerReactive extends DOMAttachedObject {

packages/ui-default/components/media/media.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 

packages/ui-default/components/menu/menu-heading.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 import tpl from 'vj/utils/tpl';
 

packages/ui-default/components/menu/menu.page.js

@@ -1,6 +1,7 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import { slideDown } from 'vj/utils/slide';
 import delay from 'vj/utils/delay';
+import { slideDown } from 'vj/utils/slide';
 
 function expandMenu($menu) {
   slideDown($menu, 500, { opacity: 0 }, { opacity: 1 });

packages/ui-default/components/message/index.page.ts

@@ -1,11 +1,11 @@
-import { AutoloadPage } from 'vj/misc/Page';
+import { nanoid } from 'nanoid';
+import ReconnectingWebsocket from 'reconnecting-websocket';
 import { InfoDialog } from 'vj/components/dialog';
 import VjNotification from 'vj/components/notification/index';
-import ReconnectingWebsocket from 'reconnecting-websocket';
 import { FLAG_ALERT } from 'vj/constant/message';
+import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';
-import { nanoid } from 'nanoid';
 
 const onmessage = (msg) => {
   console.log('Received message', msg);

packages/ui-default/components/messagepad/DialogueListItemComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function DialogueListItemComponent(props) {
   const {

packages/ui-default/components/messagepad/MessageComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function MessageComponent(props) {
   const {

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -1,9 +1,11 @@
+import 'jquery-scroll-lock';
+import 'jquery.easing';
+
+import $ from 'jquery';
+import moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
-import 'jquery-scroll-lock';
-import 'jquery.easing';
 import i18n from 'vj/utils/i18n';
 import { parse as parseMongoId } from 'vj/utils/mongoId';
 import Message from './MessageComponent';

packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import _ from 'lodash';
-import { connect } from 'react-redux';
 import 'jquery-scroll-lock';
 
+import $ from 'jquery';
+import _ from 'lodash';
+import React from 'react';
+import { connect } from 'react-redux';
 import i18n from 'vj/utils/i18n';
 import ListItem from './DialogueListItemComponent';
 

packages/ui-default/components/messagepad/MessagePadInputContainer.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-
 import request from 'vj/utils/request';
 
 const mapStateToProps = (state) => ({

packages/ui-default/components/messagepad/index.jsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
-
-import request from 'vj/utils/request';
-import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
-import MessagePadDialogueList from './MessagePadDialogueListContainer';
+import i18n from 'vj/utils/i18n';
+import request from 'vj/utils/request';
 import MessagePadDialogueContent from './MessagePadDialogueContentContainer';
+import MessagePadDialogueList from './MessagePadDialogueListContainer';
 import MessagePadInput from './MessagePadInputContainer';
 
 const mapDispatchToProps = (dispatch) => ({

packages/ui-default/components/messagepad/reducers/activeId.js

@@ -1,5 +1,7 @@
 import 'jquery.easing';
 
+import $ from 'jquery';
+
 function scrollToViewport() {
   const BOUND_TOP = 60;
   const BOUND_BOTTOM = 20;

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

@@ -1,11 +1,13 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import './monaco.styl';
+
+import $ from 'jquery';
 import { EditorAction, registerEditorAction } from 'monaco-editor/esm/vs/editor/browser/editorExtensions';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
 import list from 'monaco-themes/themes/themelist.json';
 import { nanoid } from 'nanoid';
 import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
-import './monaco.styl';
 
 export default monaco;
 export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');

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

@@ -1,6 +1,6 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import list from 'emojis-list';
 import keyword from 'emojis-keywords';
+import list from 'emojis-list';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import api, { gql } from 'vj/utils/api';
 
 const qqEmojies = [

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

@@ -1,6 +1,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-const types = require.context('!!raw-loader!@types/node/', true, /\.d\.ts$/);
+const types = require.context('@types/node/', true, /\.d\.ts$/, 'lazy-once');
 
 const diagnosticsOptions: monaco.languages.typescript.DiagnosticsOptions = {
   noSemanticValidation: false,
@@ -24,17 +24,21 @@ const libUri = 'ts:filename/basic.d.ts';
 monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
 monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
 const modules = [];
-for (const key of types.keys()) {
-  const val = types(key).default.replace('declare var require: NodeRequire;', '');
-  if (val.includes('declare module ')) {
-    modules.push(val.toString().split('declare module \'')[1].split('\'')[0]);
+(async () => {
+  for (const key of types.keys()) {
+    if (!key.startsWith('.')) continue;
+    const m = await types(key);
+    const val = m.replace('declare var require: NodeRequire;', '');
+    if (val.includes('declare module ')) {
+      modules.push(val.toString().split('declare module \'')[1].split('\'')[0]);
+    }
+    const uri = `ts:node/${key.split('./')[1]}`;
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(val, uri);
+    monaco.editor.createModel(val, 'typescript', monaco.Uri.parse(uri));
   }
-  const uri = `ts:node/${key.split('./')[1]}`;
-  monaco.languages.typescript.javascriptDefaults.addExtraLib(val, uri);
-  monaco.editor.createModel(val, 'typescript', monaco.Uri.parse(uri));
-}
-let val = 'declare var require:';
-for (const m of modules) val += `((id:'${m}')=>(typeof import('${m}')))&`;
-val += '((id:string)=>any)';
-monaco.languages.typescript.javascriptDefaults.addExtraLib(val, 'ts:node/require.d.ts');
-monaco.editor.createModel(val, 'typescript', monaco.Uri.parse('ts:node/require.d.ts'));
+  let val = 'declare var require:';
+  for (const m of modules) val += `((id:'${m}')=>(typeof import('${m}')))&`;
+  val += '((id:string)=>any)';
+  monaco.languages.typescript.javascriptDefaults.addExtraLib(val, 'ts:node/require.d.ts');
+  monaco.editor.createModel(val, 'typescript', monaco.Uri.parse('ts:node/require.d.ts'));
+})();

packages/ui-default/components/navigation/navigation.page.js

@@ -1,12 +1,13 @@
+import $ from 'jquery';
 import Slideout from 'slideout';
+import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
+import { ActionDialog } from 'vj/components/dialog';
 import createHint from 'vj/components/hint';
-import tpl from 'vj/utils/tpl';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
-import { ActionDialog } from 'vj/components/dialog';
-import Notification from 'vj/components/notification';
-import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { AutoloadPage } from 'vj/misc/Page';
+import tpl from 'vj/utils/tpl';
 
 function handleNavLogoutClick(ev) {
   const $logoutLink = $(ev.currentTarget);

packages/ui-default/components/notification/index.js

@@ -1,4 +1,5 @@
-import { Position, Toaster, Intent } from '@blueprintjs/core';
+import { Intent, Position, Toaster } from '@blueprintjs/core';
+import $ from 'jquery';
 import tpl from 'vj/utils/tpl';
 import zIndexManager from 'vj/utils/zIndexManager';
 

packages/ui-default/components/notification/notification.page.js

@@ -1,5 +1,5 @@
-import { AutoloadPage } from 'vj/misc/Page';
 import Notification from 'vj/components/notification/index';
+import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 
 export default new AutoloadPage('notificationPage', (pagename) => {

packages/ui-default/components/problem/create.page.js

@@ -1,7 +1,8 @@
-import { NamedPage } from 'vj/misc/Page';
+import $ from 'jquery';
 import { InfoDialog } from 'vj/components/dialog';
-import tpl from 'vj/utils/tpl';
+import { NamedPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
+import tpl from 'vj/utils/tpl';
 
 export default new NamedPage(['problem_create', 'problem_edit'], () => {
   $('input[name="pid"]').on('blur', () => {

packages/ui-default/components/problem/list.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 export default new AutoloadPage('problemListPage', () => {

packages/ui-default/components/problemconfig/BasicForm.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'vj/utils/i18n';
-import type { RootState } from './reducer/index';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
+import type { RootState } from './reducer/index';
 
 export function FormItem({
   columns, label, children, helpText = '', disableLabel = false, ...props

packages/ui-default/components/problemconfig/ProblemConfigEditor.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import type { editor } from 'monaco-editor';
-import { connect } from 'react-redux';
-import { load } from 'vj/components/monaco/loader';
-import Editor from 'vj/components/editor';
 import { diffLines } from 'diff';
-import yaml from 'js-yaml';
 import type { ProblemConfigFile, TestCaseConfig } from 'hydrooj/src/interface';
+import $ from 'jquery';
+import yaml from 'js-yaml';
+import type { editor } from 'monaco-editor';
+import React from 'react';
+import { connect } from 'react-redux';
+import Editor from 'vj/components/editor';
+import { load } from 'vj/components/monaco/loader';
 
 const mapStateToProps = (state) => ({
   config: state.config,

packages/ui-default/components/problemconfig/ProblemConfigForm.tsx

@@ -1,14 +1,14 @@
+import {
+  Card, InputGroup, Tab, Tabs, Tag,
+} from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'vj/utils/i18n';
-import {
-  Card, Tab, Tabs, InputGroup, Tag,
-} from '@blueprintjs/core';
-import type { RootState } from './reducer/index';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import { FormItem } from './BasicForm';
 import ProblemType from './ProblemType';
+import type { RootState } from './reducer/index';
 import { TaskConfig } from './SubtaskTable';
 
 function FileIOConfig() {

packages/ui-default/components/problemconfig/ProblemType.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
 import {
   Card, Switch, Tab, Tabs,
 } from '@blueprintjs/core';
-import type { RootState } from './reducer/index';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import i18n from 'vj/utils/i18n';
 import { FormItem, ManagedSelect, SingleFileSelect } from './BasicForm';
+import type { RootState } from './reducer/index';
 
 export default function ProblemType() {
   const Type = useSelector((state: RootState) => state.config.type);

packages/ui-default/components/problemconfig/SubtaskTable.tsx

@@ -1,9 +1,9 @@
 import { Card, NumericInput, Tag } from '@blueprintjs/core';
-import { pick, isEqual } from 'lodash';
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
 import { SubtaskConfig } from 'hydrooj/src/interface';
-import { parseTimeMS, parseMemoryMB } from '@hydrooj/utils/lib/common';
+import { isEqual, pick } from 'lodash';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'vj/utils/i18n';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import { FormItem } from './BasicForm';

packages/ui-default/components/problemconfig/TestCasesTable.tsx

@@ -1,12 +1,12 @@
+import { NumericInput, Tag } from '@blueprintjs/core';
+import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
+import type { SubtaskConfig } from 'hydrooj/src/interface';
+import { isEqual } from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'vj/utils/i18n';
-import { isEqual } from 'lodash';
-import { Tag, NumericInput } from '@blueprintjs/core';
-import { parseTimeMS, parseMemoryMB } from '@hydrooj/utils/lib/common';
-import type { SubtaskConfig } from 'hydrooj/src/interface';
-import type { RootState } from './reducer/index';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
+import type { RootState } from './reducer/index';
 
 const eq = (a: SubtaskConfig, b: SubtaskConfig) => isEqual(a, b);
 const eqArr = (a: any[], b: any[]) => isEqual(a, b);

packages/ui-default/components/problemconfig/reducer/config.ts

@@ -1,7 +1,7 @@
-import yaml from 'js-yaml';
-import type { ProblemConfigFile } from 'hydrooj/src/interface';
-import { cloneDeep } from 'lodash';
 import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
+import type { ProblemConfigFile } from 'hydrooj/src/interface';
+import yaml from 'js-yaml';
+import { cloneDeep } from 'lodash';
 
 type State = ProblemConfigFile & { __loaded: boolean };
 

packages/ui-default/components/react-splitpane/SplitPaneFillOverlayComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function SplitPaneFillOverlayComponent(props) {
   const {

packages/ui-default/components/react/DomComponent.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import $ from 'jquery';
 import { omit } from 'lodash';
+import React from 'react';
 
 const tempDoms = {};
 

packages/ui-default/components/react/IconComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function IconComponent(props) {
   const {

packages/ui-default/components/rotator/index.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import delay from 'vj/utils/delay';

packages/ui-default/components/scratchpad/DataInputComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function DataInputComponent(props) {
   const {

packages/ui-default/components/scratchpad/PanelButtonComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function PanelButtonComponent(props) {
   const {

packages/ui-default/components/scratchpad/PanelComponent.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 
 export default function PanelComponent(props) {

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -1,11 +1,10 @@
+import AnsiUp from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
-import AnsiUp from 'ansi_up';
-
-import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
-import Panel from './PanelComponent';
+import i18n from 'vj/utils/i18n';
 import DataInput from './DataInputComponent';
+import Panel from './PanelComponent';
 
 const AU = new AnsiUp();
 

packages/ui-default/components/scratchpad/ScratchpadRecordsContainer.jsx

@@ -1,8 +1,8 @@
+import classNames from 'classnames';
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
-import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
+import i18n from 'vj/utils/i18n';
 import Panel from './PanelComponent';
 import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
 

packages/ui-default/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -1,15 +1,14 @@
-import React from 'react';
 import classNames from 'classnames';
+import _ from 'lodash';
+import moment from 'moment';
+import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
-import _ from 'lodash';
-
-import substitute from 'vj/utils/substitute';
-import emulateAnchorClick from 'vj/utils/emulateAnchorClick';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
-import i18n from 'vj/utils/i18n';
 import * as recordEnum from 'vj/constant/record';
+import emulateAnchorClick from 'vj/utils/emulateAnchorClick';
+import i18n from 'vj/utils/i18n';
+import { parse as parseMongoId } from 'vj/utils/mongoId';
+import substitute from 'vj/utils/substitute';
 
 const shouldShowDetail = (data) => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
 

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -1,16 +1,15 @@
 /* eslint-disable react/static-property-placement */
 import _ from 'lodash';
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
-
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
 import Icon from 'vj/components/react/IconComponent';
 import getAvailableLangs from 'vj/utils/availableLangs';
+import i18n from 'vj/utils/i18n';
+import request from 'vj/utils/request';
 import Toolbar, {
-  ToolbarItemComponent as ToolbarItem,
   ToolbarButtonComponent as ToolbarButton,
+  ToolbarItemComponent as ToolbarItem,
   ToolbarSplitComponent as ToolbarSplit,
 } from './ToolbarComponent';
 

packages/ui-default/components/scratchpad/ToolbarComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function ToolbarComponent(props) {
   const {

packages/ui-default/components/scratchpad/index.jsx

@@ -1,14 +1,15 @@
-import React from 'react';
-import SplitPane from 'react-split-pane';
-import { useDispatch, useSelector } from 'react-redux';
-import _ from 'lodash';
-import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
+import $ from 'jquery';
+import _ from 'lodash';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import SplitPane from 'react-split-pane';
 import Dom from 'vj/components/react/DomComponent';
-import ScratchpadToolbar from './ScratchpadToolbarContainer';
+import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
+import ScratchpadToolbar from './ScratchpadToolbarContainer';
 
 function buildNestedPane([a, ...panes], mode = 'horizontal') {
   const elements = [

packages/ui-default/components/scratchpad/reducers/index.ts

@@ -1,9 +1,9 @@
 import { combineReducers } from 'redux';
-import ui from './ui';
 import editor from './editor';
 import pretest from './pretest';
 import records from './records';
 import state from './state';
+import ui from './ui';
 
 const reducer = combineReducers({
   ui,

packages/ui-default/components/signin/signInDialog.page.js

@@ -1,9 +1,10 @@
-import { AutoloadPage } from 'vj/misc/Page';
+import $ from 'jquery';
+import responsiveCutoff from 'vj/breakpoints.json';
 import DomDialog from 'vj/components/dialog/DomDialog';
 import { InfoDialog } from 'vj/components/dialog/index';
-import responsiveCutoff from 'vj/breakpoints.json';
-import { isBelow } from 'vj/utils/mediaQuery';
+import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
+import { isBelow } from 'vj/utils/mediaQuery';
 import tpl from 'vj/utils/tpl';
 
 const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {

packages/ui-default/components/smoothscroll/smoothscroll.page.js

@@ -1,4 +1,6 @@
 import 'jquery.easing';
+
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 
 const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {

packages/ui-default/components/star/star.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 

packages/ui-default/components/sticky/sticky.page.js

@@ -1,8 +1,10 @@
 import 'sticky-kit/dist/sticky-kit';
+
+import $ from 'jquery';
 import _ from 'lodash';
-import { isBelow, isAbove } from 'vj/utils/mediaQuery';
-import { AutoloadPage } from 'vj/misc/Page';
 import responsiveCutoff from 'vj/breakpoints.json';
+import { AutoloadPage } from 'vj/misc/Page';
+import { isAbove, isBelow } from 'vj/utils/mediaQuery';
 
 const navHeight = isBelow(responsiveCutoff.mobile)
   ? 0

packages/ui-default/components/tab/Tab.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 

packages/ui-default/components/table/StyledTable.js

@@ -1,8 +1,10 @@
 import 'sticky-kit/dist/sticky-kit';
+
+import $ from 'jquery';
 import _ from 'lodash';
+import responsiveCutoff from 'vj/breakpoints.json';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import { isBelow } from 'vj/utils/mediaQuery';
-import responsiveCutoff from 'vj/breakpoints.json';
 
 const navHeight = isBelow(responsiveCutoff.mobile)
   ? 0

packages/ui-default/components/time/time.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import * as timeago from 'timeago.js';
 import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';

packages/ui-default/components/tooltip/Tooltip.js

@@ -1,5 +1,5 @@
-import Drop from 'tether-drop';
 import _ from 'lodash';
+import Drop from 'tether-drop';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 
 export default class Tooltip extends DOMAttachedObject {

packages/ui-default/components/tooltip/tooltip.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
 import Tooltip from './Tooltip';
 

packages/ui-default/components/vote/vote.page.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import Rotator from 'vj/components/rotator';
 import { AutoloadPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';

packages/ui-default/components/zipDownloader/index.js

@@ -1,12 +1,12 @@
 import { dump } from 'js-yaml';
+import PQueue from 'p-queue';
 import streamsaver from 'streamsaver';
-import { createZipStream } from 'vj/utils/zip';
-import pipeStream from 'vj/utils/pipeStream';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import PQueue from 'p-queue/dist/index';
 import Notification from 'vj/components/notification';
 import api, { gql } from 'vj/utils/api';
+import i18n from 'vj/utils/i18n';
+import pipeStream from 'vj/utils/pipeStream';
+import request from 'vj/utils/request';
+import { createZipStream } from 'vj/utils/zip';
 
 let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
 function onBeforeUnload(e) {