ui: frontend api (#470) [skip-cache]

packages/onlyoffice/public/office.page.js

@@ -1,82 +1,81 @@
-(() => {
-    const { AutoloadPage } = window.Hydro;
-    const { $ } = window.node_modules;
+import { $ } from '@hydrooj/ui-default';
 
-    let loaded = false;
-    async function load() {
-        if (loaded) return Promise.resolve();
-        return new Promise((resolve, reject) => {
-            const scriptElement = document.createElement('script');
-            scriptElement.src = UiContext.onlyofficeApi;
-            scriptElement.async = true;
-            document.head.appendChild(scriptElement);
-            scriptElement.onload = resolve;
-            scriptElement.onerror = reject;
-            loaded = true;
-        });
-    }
+const { AutoloadPage } = window.Hydro;
 
-    const loader = mode => async (element) => {
-        const id = `${mode}-${Math.random().toString()}`;
-        $(element).attr('id', id);
-        const url = $(element).text();
-        const t = new URL(url, window.location.href).pathname.split('.');
-        const n = new URL(url, window.location.href).pathname.split('/');
-        const lang = UserContext.viewLang.includes('_') ? UserContext.viewLang.split('_')[0] : UserContext.viewLang;
-        // eslint-disable-next-line no-undef
-        window.editor = new DocsAPI.DocEditor(id, {
-            document: {
-                fileType: t[t.length - 1],
-                key: Math.random().toString(16),
-                title: decodeURIComponent(n[n.length - 1]),
-                url: new URL(url, window.location.href),
-                permissions: {
-                    comment: false,
-                    copy: true,
-                    download: true,
-                    edit: false,
-                    fillForms: false,
-                    modifyContentControl: false,
-                    modifyFilter: false,
-                    print: true,
-                    protect: false,
-                    review: false,
-                },
-            },
-            editorConfig: {
-                lang,
-                mode: 'view',
-                user: {
-                    group: "Hydro",
-                    id: UserContext._id.toString(),
-                    name: UserContext.uname,
-                },
-                customization: {
-                    chat: false,
-                    comments: false,
-                    help: false,
-                    hideRulers: true,
-                    plugins: false,
-                }
-            },
-            documentType: mode,
-            height: mode === 'slide' ? '560px' : '900px',
-        });
-    }
+let loaded = false;
+async function load() {
+  if (loaded) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const scriptElement = document.createElement('script');
+    scriptElement.src = UiContext.onlyofficeApi;
+    scriptElement.async = true;
+    document.head.appendChild(scriptElement);
+    scriptElement.onload = resolve;
+    scriptElement.onerror = reject;
+    loaded = true;
+  });
+}
 
-    const getEles = types => {
-        const eles = [];
-        for (const type of types) eles.push(...$('div[data-' + type + ']').get());
-        return eles;
-    }
+const loader = (mode) => async (element) => {
+  const id = `${mode}-${Math.random().toString()}`;
+  $(element).attr('id', id);
+  const url = $(element).text();
+  const t = new URL(url, window.location.href).pathname.split('.');
+  const n = new URL(url, window.location.href).pathname.split('/');
+  const lang = UserContext.viewLang.includes('_') ? UserContext.viewLang.split('_')[0] : UserContext.viewLang;
+  // eslint-disable-next-line no-undef
+  window.editor = new DocsAPI.DocEditor(id, {
+    document: {
+      fileType: t[t.length - 1],
+      key: Math.random().toString(16),
+      title: decodeURIComponent(n[n.length - 1]),
+      url: new URL(url, window.location.href),
+      permissions: {
+        comment: false,
+        copy: true,
+        download: true,
+        edit: false,
+        fillForms: false,
+        modifyContentControl: false,
+        modifyFilter: false,
+        print: true,
+        protect: false,
+        review: false,
+      },
+    },
+    editorConfig: {
+      lang,
+      mode: 'view',
+      user: {
+        group: 'Hydro',
+        id: UserContext._id.toString(),
+        name: UserContext.uname,
+      },
+      customization: {
+        chat: false,
+        comments: false,
+        help: false,
+        hideRulers: true,
+        plugins: false,
+      },
+    },
+    documentType: mode,
+    height: mode === 'slide' ? '560px' : '900px',
+  });
+};
 
-    const page = new AutoloadPage('onlyoffice', async () => {
-        let all = getEles(['doc', 'docx', 'cell', 'xls', 'xlsx', 'slide', 'ppt', 'pptx']);
-        if (all.length) await load();
-        getEles(['doc', 'docx']).forEach(loader('word'));
-        getEles(['cell', 'xls', 'xlsx']).forEach(loader('cell'))
-        getEles(['slide', 'ppt', 'pptx']).forEach(loader('slide'));
-    });
+const getEles = (types) => {
+  const eles = [];
+  for (const type of types) eles.push(...$(`div[data-${type}]`).get());
+  return eles;
+};
 
-    window.Hydro.extraPages.push(page);
-})();
+const page = new AutoloadPage('onlyoffice', async () => {
+  const all = getEles(['doc', 'docx', 'cell', 'xls', 'xlsx', 'slide', 'ppt', 'pptx']);
+  if (all.length) await load();
+  getEles(['doc', 'docx']).forEach(loader('word'));
+  getEles(['cell', 'xls', 'xlsx']).forEach(loader('cell'));
+  getEles(['slide', 'ppt', 'pptx']).forEach(loader('slide'));
+});
+
+window.Hydro.extraPages.push(page);

packages/ui-default/api.ts

@@ -0,0 +1,62 @@
+export * from './utils';
+export { default as Notification } from './components/notification';
+export * from './components/dialog';
+export * as bus from './bus';
+export { default as loadMonaco } from './components/monaco/loader';
+export * as redux from 'react-redux';
+export * from './components/zipDownloader';
+export { default as $ } from 'jquery';
+export { default as _ } from 'lodash';
+export { default as React } from 'react';
+export { default as ReactDOM } from 'react-dom/client';
+export * from './misc/Page';
+
+export default async function load(name: string) {
+  if (window.node_modules[name]) return window.node_modules[name];
+  if (name === 'echarts') return import('echarts');
+  if (name === 'moment') return import('moment');
+  throw new Error(`Module ${name} not found`);
+}
+
+import AutoComplete from './components/autocomplete';
+import CustomSelectAutoComplete from './components/autocomplete/CustomSelectAutoComplete';
+import DomainSelectAutoComplete from './components/autocomplete/DomainSelectAutoComplete';
+import ProblemSelectAutoComplete from './components/autocomplete/ProblemSelectAutoComplete';
+import UserSelectAutoComplete from './components/autocomplete/UserSelectAutoComplete';
+
+export {
+  load, AutoComplete, UserSelectAutoComplete, ProblemSelectAutoComplete, DomainSelectAutoComplete, CustomSelectAutoComplete,
+};
+export const { UserContext, UiContext } = window;
+export function addPage(page: import('./misc/Page').Page | (() => Promise<void> | void)) {
+  window.Hydro.extraPages.push(page);
+}
+
+declare global {
+  interface Window {
+    LANGS: Record<string, any>;
+  }
+
+  let UserContext: Record<string, any>;
+  let UiContext: Record<string, any>;
+}
+
+// Below are old version api compat
+/* eslint-disable import/order */
+import $ from 'jquery';
+import _ from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import * as redux from 'react-redux';
+
+const modules = {
+  _, $, React, redux, ReactDOM, load,
+};
+
+declare global {
+  interface Window {
+    node_modules: typeof modules;
+  }
+}
+
+Object.assign(window, { node_modules: modules, $, jQuery: $ });

packages/ui-default/build/utils/root.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import path from 'path';
 
 export default function root(fn = '.') {

packages/ui-default/bus.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-await-in-loop */
+import type * as monaco from 'monaco-editor';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const _hooks: Record<keyof any, Array<(...args: any[]) => any>> = {};
@@ -11,7 +12,7 @@ export type Disposable = () => void;
 export type VoidReturn = Promise<any> | any;
 
 export interface EventMap extends Record<string, any> {
-  'scratchpadEditorCreate': (editor, monaco) => any;
+  'scratchpadEditorCreate': (editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => any;
 }
 
 function getHooks<K extends keyof EventMap>(name: K) {

packages/ui-default/components/DOMAttachedObject.ts

@@ -23,7 +23,7 @@ function monitorResource(resource) {
   }
 }
 
-export default class DOMAttachedObject {
+class DOMAttachedObject {
   static uniqueIdCounter = 0;
   static DOMAttachKey: string;
   static DOMAttachSelector: string;
@@ -127,3 +127,5 @@ export default class DOMAttachedObject {
     if (monitorDetach) monitorResource(this);
   }
 }
+
+export default DOMAttachedObject as typeof DOMAttachedObject & DOMAttachedObject;

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

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

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

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

packages/ui-default/components/browser-update.page.ts

@@ -1,6 +1,5 @@
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 import { InfoDialog } from './dialog';
 
 function isSupported() {

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import moment from 'moment';
-import tpl from 'vj/utils/tpl';
+import { tpl } from 'vj/utils';
 
 export default class Calendar {
   constructor(events) {

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

@@ -1,9 +1,7 @@
 import Clipboard from 'clipboard';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
-import base64 from 'vj/utils/base64';
-import i18n from 'vj/utils/i18n';
-import substitute from 'vj/utils/substitute';
+import { base64, i18n, substitute } from 'vj/utils';
 
 export default new AutoloadPage('clipboard', () => {
   $('[data-copy]').get().forEach((el) => {

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

@@ -1,9 +1,7 @@
 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 { delay, i18n, request } from 'vj/utils';
 
 const contestPage = new AutoloadPage('contestPage', () => {
   $('[data-contest-code]').on('click', (ev) => {

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { zIndexManager } from 'vj/utils';
 
 export interface DialogOptions {
   classes: string;

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

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

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

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

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

@@ -4,11 +4,9 @@ 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 i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import { slideDown, slideUp } from 'vj/utils/slide';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, request, slideDown, slideUp, tpl,
+} from 'vj/utils';
 
 const $replyTemplate = $('.commentbox-container').eq(0).clone();
 

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

@@ -5,9 +5,7 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import TimeAgo from 'timeago-react';
 import { InfoDialog } from 'vj/components/dialog';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 async function historyDialog(payload, time, uid) {
   const ts = new Date(time).getTime();

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

@@ -6,7 +6,7 @@ import { chunk } from 'lodash';
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function renderReactions(reactions, self, rootEle) {
   let html = '';

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

@@ -2,8 +2,7 @@ import _ from 'lodash';
 import Drop from 'tether-drop';
 import responsiveCutoff from 'vj/breakpoints.json';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import { isBelow } from 'vj/utils/mediaQuery';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { mediaQuery, zIndexManager } from 'vj/utils';
 
 export default class Dropdown extends DOMAttachedObject {
   static DOMAttachKey = 'vjDropdownInstance';
@@ -12,7 +11,7 @@ export default class Dropdown extends DOMAttachedObject {
 
   constructor($dom, options = {}) {
     if ($dom.attr('data-dropdown-trigger-desktop-only') !== undefined) {
-      if (isBelow(responsiveCutoff.mobile)) {
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
         super(null);
         return;
       }

packages/ui-default/components/editor/cmeditor.page.ts

@@ -1,5 +1,5 @@
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 import CmEditor from '.';
 
 function runSubstitute($container: JQuery<Document | HTMLElement>) {

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

@@ -3,8 +3,7 @@ import _ from 'lodash';
 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';
+import { i18n, request } from 'vj/utils';
 
 export const config = {
   toolbar: [

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

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 
 const formPage = new AutoloadPage('formPage', () => {
   $(document).on('vjFormDisableUpdate', 'input, select, textarea', (ev) => {

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

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

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

@@ -11,7 +11,7 @@ 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 { i18n } from 'vj/utils';
 import languageMeta from './meta';
 
 const files = require.context('prismjs/components/', true, /prism-[a-z0-9-]+\.js/);

packages/ui-default/components/hint.ts

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import { InfoDialog } from 'vj/components/dialog';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 
 export default function createHint(message: string, element?: any) {
   if (i18n(message) === message || !element) return;

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

@@ -1,8 +1,6 @@
 import $ from 'jquery';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 export default new NamedPage('homepage', () => {
   function getHitokoto($containers) {

packages/ui-default/components/languageselect.tsx

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default function LanguageSelect({
   fieldSelector, firstLoadMain, firstLoadSub, availableLangs, mainLangs,

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

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

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

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

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

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 export default new AutoloadPage('media', async () => {
   async function parseMedia($dom = $(document.body)) {

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

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import tpl from 'vj/utils/tpl';
+import { tpl } from 'vj/utils';
 
 const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {
   $('[data-heading-extract-to]').get().forEach((container) => {

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

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

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

@@ -4,8 +4,7 @@ import { InfoDialog } from 'vj/components/dialog';
 import VjNotification from 'vj/components/notification/index';
 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 { i18n, tpl } from 'vj/utils';
 
 const onmessage = (msg) => {
   console.log('Received message', msg);

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

@@ -6,8 +6,7 @@ import moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import i18n from 'vj/utils/i18n';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
+import { i18n, mongoId } from 'vj/utils';
 import Message from './MessageComponent';
 
 const mapStateToProps = (state) => ({
@@ -70,7 +69,7 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
   renderInner() {
     if (this.props.activeId === null) return [];
     const sorted = this.props.item.messages
-      .sort((msg1, msg2) => parseMongoId(msg1._id).timestamp - parseMongoId(msg2._id).timestamp);
+      .sort((msg1, msg2) => mongoId(msg1._id).timestamp - mongoId(msg2._id).timestamp);
     return sorted.map((msg) => (
       <Message
         key={msg._id}
@@ -82,8 +81,8 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
         }
       >
         <div>{this.renderContent(msg)}</div>
-        <time data-tooltip={moment(parseMongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
-          <TimeAgo datetime={parseMongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
+        <time data-tooltip={moment(mongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
+          <TimeAgo datetime={mongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
         </time>
       </Message>
     ));

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

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import ListItem from './DialogueListItemComponent';
 
 const mapStateToProps = (state) => ({

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

@@ -3,7 +3,7 @@ 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';
+import { request } from 'vj/utils';
 
 const mapStateToProps = (state) => ({
   activeId: state.activeId,

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

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { i18n, request } from 'vj/utils';
 import MessagePadDialogueContent from './MessagePadDialogueContentContainer';
 import MessagePadDialogueList from './MessagePadDialogueListContainer';
 import MessagePadInput from './MessagePadInputContainer';

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

@@ -6,8 +6,7 @@ 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 { i18n, request } from 'vj/utils';
 
 export default monaco;
 export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');

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

@@ -1,7 +1,7 @@
 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';
+import { api, gql } from 'vj/utils';
 
 const qqEmojies = [
   'weixiao',

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

@@ -1,4 +1,4 @@
-import loadExternalModule from 'vj/utils/loadModule';
+import { loadExternalModule } from 'vj/utils';
 
 let loaded;
 const loaders = {

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

@@ -3,9 +3,7 @@ import Slideout from 'slideout';
 import Notification from 'vj/components/notification';
 import selectUser from 'vj/components/selectUser';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 function handleNavLogoutClick(ev) {
   const $logoutLink = $(ev.currentTarget);

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

@@ -1,7 +1,6 @@
 import { Intent, Position, Toaster } from '@blueprintjs/core';
 import $ from 'jquery';
-import tpl from 'vj/utils/tpl';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { tpl, zIndexManager } from 'vj/utils/base';
 
 const ToasterContainer = document.createElement('div');
 ToasterContainer.style.position = 'fixed';

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

@@ -1,6 +1,6 @@
 import Notification from 'vj/components/notification/index';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default new AutoloadPage('notificationPage', (pagename) => {
   const message = i18n(`Hint::Page::${pagename}`);

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

@@ -4,10 +4,9 @@ import { nanoid } from 'nanoid';
 import { ActionDialog, InfoDialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
 
 async function startEdit(filename, value, fileCategory = 'file') {
   const { default: Editor } = await import('vj/components/editor/index');

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import type { RootState } from './reducer/index';
 

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

@@ -3,7 +3,7 @@ import {
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import { FormItem } from './BasicForm';

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

@@ -3,7 +3,7 @@ import {
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import { FormItem, ManagedSelect, SingleFileSelect } from './BasicForm';
 import type { RootState } from './reducer/index';
 

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

@@ -4,7 +4,7 @@ import type { SubtaskConfig } from 'hydrooj/src/interface';
 import { isEqual, pick } from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import { FormItem } from './BasicForm';
 import { RootState } from './reducer';

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

@@ -4,7 +4,7 @@ import type { SubtaskConfig } from 'hydrooj/src/interface';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import type { RootState } from './reducer/index';
 

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 
 const ANIMATION_DURATION = 4000;
 

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

@@ -2,7 +2,7 @@ import AnsiUp from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import DataInput from './DataInputComponent';
 import Panel from './PanelComponent';
 

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

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

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

@@ -5,10 +5,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
 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';
+import {
+  emulateAnchorClick, i18n, mongoId, substitute,
+} from 'vj/utils';
 
 const shouldShowDetail = (data) => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
 
@@ -58,7 +57,7 @@ export default connect(mapStateToProps, null, mergeProps)(class ScratchpadRecord
 
   render() {
     const { data } = this.props;
-    const submitAt = parseMongoId(data._id).timestamp * 1000;
+    const submitAt = mongoId(data._id).timestamp * 1000;
     // Is pretest
     return data.contest?.toString() === '000000000000000000000000' ? null : (
       <tr onClick={(ev) => this.handleRowClick(ev, data._id)}>

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

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 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 { getAvailableLangs, i18n, request } from 'vj/utils';
 import Toolbar, {
   ToolbarButtonComponent as ToolbarButton,
   ToolbarItemComponent as ToolbarItem,

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

@@ -1,5 +1,5 @@
 import Notification from 'vj/components/notification';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default function reducer(state = {
   main: {

packages/ui-default/components/selectUser.ts

@@ -1,7 +1,6 @@
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
 import { ActionDialog } from 'vj/components/dialog';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 import createHint from './hint';
 
 let hintInserted = false;

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

@@ -3,9 +3,7 @@ import responsiveCutoff from 'vj/breakpoints.json';
 import DomDialog from 'vj/components/dialog/DomDialog';
 import { InfoDialog } from 'vj/components/dialog/index';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import { isBelow } from 'vj/utils/mediaQuery';
-import tpl from 'vj/utils/tpl';
+import { i18n, mediaQuery, tpl } from 'vj/utils';
 
 const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   const signInDialog = DomDialog.getOrConstruct($('.dialog--signin'), {
@@ -17,7 +15,7 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   if ($('[name="nav_login"]').length > 0) {
     // nav
     $('[name="nav_login"]').on('click', (ev) => {
-      if (isBelow(responsiveCutoff.mobile)) return;
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) return;
       if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
       signInDialog.show();
       ev.preventDefault();
@@ -32,7 +30,7 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   }
 
   window.showSignInDialog = () => {
-    if (isBelow(responsiveCutoff.mobile)) {
+    if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
       if ($('[name="nav_login"]').length > 0) {
         window.location.href = $('[name="nav_login"]').attr('href');
         return;

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

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function setStarButtonState($starButton, star) {
   if (star) {

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import * as timeago from 'timeago.js';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 try {
   const locales = require.context('timeago.js/lib/lang', false, /\.js$/);

packages/ui-default/components/upload.ts

@@ -1,9 +1,8 @@
 import { Dialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
+import {
+  delay, i18n, pjax, request,
+} from 'vj/utils';
 
 function onBeforeUnload(e) {
   e.returnValue = '';

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import Rotator from 'vj/components/rotator';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function setVoteState($container, value, status) {
   const $num = $container.find('.vote-number');

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

@@ -2,11 +2,9 @@ import { dump } from 'js-yaml';
 import PQueue from 'p-queue';
 import streamsaver from 'streamsaver';
 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';
+import {
+  api, createZipStream, gql, i18n, pipeStream, request,
+} from 'vj/utils';
 
 let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
 function onBeforeUnload(e) {
@@ -29,8 +27,8 @@ export default async function download(filename, targets) {
   await waitForWritableStream;
   const fileStream = streamsaver.createWriteStream(filename);
   const queue = new PQueue({ concurrency: 5 });
-  const abortCallbackReceiver = {};
-  function stopDownload() { abortCallbackReceiver.abort(); }
+  const abortCallbackReceiver: any = {};
+  function stopDownload() { abortCallbackReceiver.abort?.(); }
   let i = 0;
   async function downloadFile(target) {
     try {

packages/ui-default/entry.js

@@ -46,10 +46,11 @@ document.addEventListener('DOMContentLoaded', async () => {
   // eslint-disable-next-line camelcase
   try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 
-  const [data] = await Promise.all([
-    (await fetch(`/constant/${UiContext.constantVersion}`, { cache: 'force-cache' })).json(),
-    await import('./modules'),
+  const [data, HydroExports] = await Promise.all([
+    fetch(`/constant/${UiContext.constantVersion}`, { cache: 'force-cache' }).then((r) => r.json()),
+    import('./api'),
   ]);
+  Object.assign(window, { HydroExports });
   eval(data[0]); // eslint-disable-line no-eval
   data.shift();
   window.Hydro.preload = data;

packages/ui-default/hydro.ts

@@ -4,16 +4,15 @@ import $ from 'jquery';
 import _ from 'lodash';
 import Notification from 'vj/components/notification';
 import PageLoader from 'vj/misc/PageLoader';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 
 declare global {
   interface Window {
     UserContext: any;
     UiContext: any;
     Hydro: any;
-    // eslint-disable-next-line camelcase
-    node_modules: any;
     externalModules: Record<string, string>;
+    captureException?: (e: Error) => void;
   }
 }
 

packages/ui-default/index.ts

@@ -51,7 +51,22 @@ export async function buildUI() {
     target: [
       'chrome60',
     ],
-    plugins: global.Hydro.ui.esbuildPlugins || [],
+    plugins: [
+      ...(global.Hydro.ui.esbuildPlugins || []),
+      {
+        name: 'federation',
+        setup(b) {
+          b.onResolve({ filter: /^@hydrooj\/ui-default/ }, () => ({
+            path: 'api',
+            namespace: 'ui-default',
+          }));
+          b.onLoad({ filter: /.*/, namespace: 'ui-default' }, () => ({
+            contents: 'module.exports = window.HydroExports;',
+            loader: 'tsx',
+          }));
+        },
+      },
+    ],
     minify: !process.env.DEV,
   });
   if (build.errors.length) console.error(build.errors);

packages/ui-default/modules.js

@@ -1,37 +0,0 @@
-import './utils/delay';
-import './utils/emulateAnchorClick';
-import './utils/i18n';
-import './utils/loadReactRedux';
-import './utils/mediaQuery';
-import './utils/mongoId';
-import './utils/pipeStream';
-import './utils/pjax';
-import './utils/request';
-import './utils/slide';
-import './utils/substitute';
-import './utils/tpl';
-import './utils/zIndexManager';
-import './utils/zip';
-import './components/autocomplete';
-import './components/dialog';
-import './components/notification';
-import './components/monaco/loader';
-
-import $ from 'jquery';
-import _ from 'lodash';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import * as redux from 'react-redux';
-
-const modules = {
-  _, $, React, redux, ReactDOM,
-};
-export default async function load(name) {
-  if (modules[name]) return modules[name];
-  if (name === 'echarts') return import('echarts');
-  if (name === 'moment') return import('moment');
-  throw new Error(`Module ${name} not found`);
-}
-window.node_modules = { ...modules, load };
-window.$ = $;
-window.jQuery = $;

packages/ui-default/package.json

@@ -4,6 +4,7 @@
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "index.ts",
+  "types": "api.ts",
   "repository": "https://github.com/hydro-dev/Hydro.git",
   "preferUnplugged": true,
   "scripts": {
@@ -29,6 +30,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/pickadate": "^3.5.32",
     "@types/qrcode": "^1.5.0",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/serviceworker": "^0.0.57",

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

@@ -2,7 +2,7 @@ import { pick } from 'lodash';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { NamedPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 const defaultQuery = `\
 query Example(

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

@@ -1,7 +1,7 @@
 import { formatSeconds } from '@hydrooj/utils/lib/common';
 import NProgress from 'nprogress';
 import { NamedPage } from 'vj/misc/Page';
-import tpl from 'vj/utils/tpl';
+import { tpl } from 'vj/utils';
 
 const contestTimer = $(tpl`<pre class="contest-timer" style="display:none"></pre>`);
 contestTimer.appendTo(document.body);

packages/ui-default/pages/contest_edit.page.ts

@@ -2,9 +2,7 @@ import $ from 'jquery';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
 import { ConfirmDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 const page = new NamedPage(['contest_edit', 'contest_create', 'homework_create', 'homework_edit'], (pagename) => {
   ProblemSelectAutoComplete.getOrConstruct($('[name="pids"]'), { multi: true, clearDefaultValue: false });

packages/ui-default/pages/domain_group.page.ts

@@ -4,10 +4,9 @@ import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoCom
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import api, { gql } from 'vj/utils/api';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import {
+  api, delay, gql, i18n, tpl,
+} from 'vj/utils';
 
 function update(name: string, uids: number[]) {
   return api(gql`

packages/ui-default/pages/domain_role.page.js

@@ -3,10 +3,9 @@ import _ from 'lodash';
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, request, tpl,
+} from 'vj/utils';
 
 const page = new NamedPage('domain_role', () => {
   const createRoleDialog = new ActionDialog({

packages/ui-default/pages/domain_user.page.js

@@ -4,10 +4,9 @@ import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoCom
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, request, tpl,
+} from 'vj/utils';
 
 const page = new NamedPage('domain_user', () => {
   const addUserSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--add-user [name="user"]'));

packages/ui-default/pages/files.page.js

@@ -4,10 +4,9 @@ import { ConfirmDialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import uploadFiles from 'vj/components/upload';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
 
 function ensureAndGetSelectedFiles() {
   const files = _.map(

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

@@ -4,8 +4,7 @@ import { createRoot } from 'react-dom/client';
 import VjNotification from 'vj/components/notification';
 import selectUser from 'vj/components/selectUser';
 import { NamedPage } from 'vj/misc/Page';
-import api, { gql } from 'vj/utils/api';
-import loadReactRedux from 'vj/utils/loadReactRedux';
+import { api, gql, loadReactRedux } from 'vj/utils';
 
 const page = new NamedPage('home_messages', () => {
   let reduxStore;

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

@@ -1,10 +1,9 @@
 import $ from 'jquery';
 import { renderLanguageSelect } from 'vj/components/languageselect';
 import { NamedPage } from 'vj/misc/Page';
-import getAvailableLangs from 'vj/utils/availableLangs';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, getAvailableLangs, i18n, tpl,
+} from 'vj/utils';
 
 async function initCodeLangHelper() {
   const $el = $(tpl`<div class="row" id="codelang-select"></div>`);

packages/ui-default/pages/home_security.page.ts

@@ -3,10 +3,9 @@ import QRCode from 'qrcode';
 import { ActionDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import api, { gql } from 'vj/utils/api';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import {
+  api, delay, gql, i18n, tpl,
+} from 'vj/utils';
 
 export default new NamedPage('home_security', () => {
   $(document).on('click', '[name="tfa_enable"]', async () => {

packages/ui-default/pages/homework_main.page.js

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
+import { i18n, mongoId } from 'vj/utils';
 
 const page = new NamedPage('homework_main', async () => {
   // Homework Calendar
@@ -13,7 +12,7 @@ const page = new NamedPage('homework_main', async () => {
       title: doc.title,
       maskFrom: doc.penaltySince ? doc.penaltySince : null,
       maskTitle: i18n('Time Extension'),
-      colorIndex: parseMongoId(doc._id).timestamp % 12,
+      colorIndex: mongoId(doc._id).timestamp % 12,
       link: doc.url,
     }));
     const calendar = new Calendar(events);

packages/ui-default/pages/manage_script.page.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import { ActionDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 const page = new NamedPage('manage_script', () => {
   const runScriptDialog = new ActionDialog({

packages/ui-default/pages/manage_user_import.page.js

@@ -1,9 +1,7 @@
 import $ from 'jquery';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { delay, i18n, request } from 'vj/utils';
 
 const page = new NamedPage('manage_user_import', () => {
   async function post(draft) {

packages/ui-default/pages/manage_user_priv.page.js

@@ -3,9 +3,7 @@ import { ActionDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import selectUser from 'vj/components/selectUser';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
+import { i18n, pjax, request } from 'vj/utils';
 
 const page = new NamedPage('manage_user_priv', () => {
   const setPrivDialog = new ActionDialog({

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

@@ -10,10 +10,9 @@ import { configYamlFormat } from 'vj/components/problemconfig/ProblemConfigEdito
 import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import loadReactRedux from 'vj/utils/loadReactRedux';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  i18n, loadReactRedux, request, tpl,
+} from 'vj/utils';
 
 const page = new NamedPage('problem_config', () => {
   let reduxStore;
@@ -72,7 +71,7 @@ const page = new NamedPage('problem_config', () => {
   async function handleClickDownloadAll() {
     const files = reduxStore.getState().testdata.map((i) => i.name);
     const { links, pdoc } = await request.post('./files', { operation: 'get_links', files, type: 'testdata' });
-    const targets = [];
+    const targets: { filename: string, url: string }[] = [];
     for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
     await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
   }
@@ -103,7 +102,7 @@ const page = new NamedPage('problem_config', () => {
 
     store.dispatch({
       type: 'CONFIG_LOAD',
-      payload: request.get(),
+      payload: request.get(''),
     });
     const unsubscribe = store.subscribe(() => {
       // TODO set yaml schema
@@ -124,7 +123,7 @@ const page = new NamedPage('problem_config', () => {
         subtasks: normalizeSubtasks(subtasks, (i) => i, state.config.time, state.config.memory, true),
       });
     });
-    createRoot($('#ProblemConfig').get(0)).render(
+    createRoot(document.getElementById('ProblemConfig')!).render(
       <Provider store={store}>
         <div className="row">
           <div className="medium-5 columns">

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

@@ -6,12 +6,9 @@ import { createRoot } from 'react-dom/client';
 import Notification from 'vj/components/notification';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import loadReactRedux from 'vj/utils/loadReactRedux';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, loadReactRedux, pjax, request, tpl,
+} from 'vj/utils';
 
 class ProblemPageExtender {
   constructor() {

packages/ui-default/pages/problem_edit.page.js

@@ -8,10 +8,9 @@ import Notification from 'vj/components/notification';
 import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-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';
+import {
+  i18n, request, slideDown, slideUp, tpl,
+} from 'vj/utils';
 
 const categories = {};
 const dirtyCategories = [];

packages/ui-default/pages/problem_files.page.js

@@ -7,10 +7,9 @@ import { previewFile } from 'vj/components/preview/preview.page';
 import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
 
 async function downloadProblemFilesAsArchive(type, files) {
   const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });

packages/ui-default/pages/problem_main.page.js

@@ -6,11 +6,9 @@ import createHint from 'vj/components/hint';
 import Notification from 'vj/components/notification';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, pjax, request, tpl,
+} from 'vj/utils';
 
 const categories = {};
 const dirtyCategories = [];

packages/ui-default/pages/problem_sidebar.page.ts

@@ -2,9 +2,7 @@ import $ from 'jquery';
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 const page = new NamedPage([
   'problem_create', 'problem_edit', 'problem_solution', 'problem_submit',

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { renderLanguageSelect } from 'vj/components/languageselect';
 import { NamedPage } from 'vj/misc/Page';
-import getAvailableLangs from 'vj/utils/availableLangs';
+import { getAvailableLangs } from 'vj/utils';
 
 const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
   const { config } = UiContext.pdoc;

packages/ui-default/pages/record_main.page.ts

@@ -2,8 +2,7 @@ import $ from 'jquery';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
 import { NamedPage } from 'vj/misc/Page';
-import getAvailableLangs from 'vj/utils/availableLangs';
-import tpl from 'vj/utils/tpl';
+import { getAvailableLangs, tpl } from 'vj/utils';
 
 const page = new NamedPage('record_main', async () => {
   const [{ default: WebSocket }, { DiffDOM }] = await Promise.all([

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

@@ -2,7 +2,7 @@ import yaml from 'js-yaml';
 import Schema from 'schemastery';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 const page = new NamedPage('manage_config', async () => {
   const schema = new Schema(UiContext.schema);

packages/ui-default/pages/training_edit.page.ts

@@ -1,9 +1,7 @@
 import $ from 'jquery';
 import { ConfirmDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 export default new NamedPage('training_edit', () => {
   let confirmed = false;

packages/ui-default/pages/user_login.page.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import api, { gql } from 'vj/utils/api';
+import { api, gql } from 'vj/utils';
 
 export default new AutoloadPage('user_login', (pagename) => {
   (pagename === 'user_login' ? $(document) : $('.dialog--signin__main')).on('blur', '[name="uname"]', async () => {

packages/ui-default/types.ts

@@ -1,11 +0,0 @@
-declare global {
-  interface Window {
-    node_modules: any;
-    LANGS: Record<string, any>;
-  }
-
-  let UserContext: Record<string, any>;
-  let UiContext: Record<string, any>;
-}
-
-export { };

packages/ui-default/utils/api.ts

@@ -1,26 +0,0 @@
-import request from './request';
-
-export default async (q: string, path: string[] = []) => {
-  let query = q.trim();
-  if (!query.startsWith('query')) query = `query{${query}}`;
-  const res = await request.post(`/d/${UiContext.domainId}/api`, { query });
-  if (res.errors) throw new Error(res.errors[0].message);
-  let cursor = res;
-  for (const p of path) {
-    cursor = cursor[p];
-    if (!cursor) return undefined;
-  }
-  return cursor;
-};
-
-export const gql = (
-  pieces: TemplateStringsArray,
-  ...templates: (string | number | string[] | number[])[]
-) => {
-  let res = '';
-  for (let i = 0; i < pieces.length; i++) {
-    res += pieces[i];
-    if (templates[i]) res += JSON.stringify(templates[i]);
-  }
-  return res;
-};

packages/ui-default/utils/availableLangs.ts

@@ -1,12 +0,0 @@
-const prefixes = new Set(Object.keys(window.LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
-
-export default function getAvailableLangs(langsList?: string[]) {
-  const Langs = {};
-  for (const key in window.LANGS) {
-    if (prefixes.has(key)) continue;
-    if (langsList && langsList.length && langsList.join('') && !langsList.includes(key)) continue;
-    else if (window.LANGS[key].hidden && !langsList?.includes(key)) continue;
-    Langs[key] = window.LANGS[key];
-  }
-  return Langs;
-}

packages/ui-default/utils/base.ts

@@ -0,0 +1,153 @@
+import $ from 'jquery';
+import _ from 'lodash';
+
+export function substitute(str: string, obj: any) {
+  return str.replace(/\{([^{}]+)\}/g, (match, key) => {
+    if (obj[key] !== undefined) return obj[key].toString();
+    return `{${key}}`;
+  });
+}
+
+export function i18n(str: string, ...params: any[]) {
+  if (!str) return '';
+  return substitute((window as any).LOCALES?.[str] || str, params);
+}
+
+export function delay(ms) {
+  return new Promise((resolve) => { setTimeout(resolve, ms); });
+}
+
+type Substitution = string | number | { templateRaw: true, html: string };
+
+export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]) {
+  let result = pieces[0];
+  for (let i = 0; i < substitutions.length; ++i) {
+    const subst = substitutions[i];
+    let substHtml: string;
+    if (typeof subst === 'object' && subst.templateRaw) {
+      substHtml = subst.html;
+    } else substHtml = _.escape(String(subst));
+    result += substHtml + pieces[i + 1];
+  }
+  return result;
+}
+
+tpl.typoMsg = function (msg: string, raw = false) {
+  if (raw) return `<div class="typo"><p>${msg}</p></div>`;
+  const lines = msg.trim().split('\n');
+  return `<div class="typo">${lines.map((i) => `<p>${_.escape(i)}</p>`).join('\n')}</div>`;
+};
+
+export function rawHtml(html: string) {
+  return {
+    templateRaw: true,
+    html,
+  };
+}
+
+let zIndexCurrent = 1000;
+
+export const zIndexManager = {
+  getCurrent() {
+    return zIndexCurrent;
+  },
+  getNext() {
+    return ++zIndexCurrent;
+  },
+};
+
+export const request = {
+  async ajax(options: Record<string, any>) {
+    return new Promise<any>((resolve, reject) => {
+      $
+        .ajax({
+          dataType: 'json',
+          headers: {
+            Accept: 'application/json',
+          },
+          ...options,
+        })
+        .fail((jqXHR, textStatus, errorThrown: any) => {
+          if (textStatus === 'abort') {
+            const err = new Error(i18n('Aborted')) as any;
+            err.aborted = true;
+            reject(err);
+          } else if (jqXHR.readyState === 0) {
+            reject(new Error(i18n('Network error')));
+          } else if (typeof jqXHR.responseJSON === 'object' && jqXHR.responseJSON.error) {
+            const { error } = jqXHR.responseJSON;
+            if (error.params) {
+              const message = i18n(error.message, ...error.params);
+              const err = new Error(message === error.message && error.params.length
+                ? `${error.message}: ${error.params.join(' ')}`
+                : message) as any;
+              err.rawMessage = error.message;
+              err.params = error.params;
+              reject(err);
+            } else reject(new Error(jqXHR.responseJSON.error.message));
+          } else if (errorThrown instanceof Error) {
+            reject(errorThrown);
+          } else {
+            reject(new Error(textStatus));
+          }
+        })
+        .done(resolve);
+    });
+  },
+
+  postFile(url: string, form: FormData, options: any = {}) {
+    return this.ajax({
+      url,
+      data: form,
+      processData: false,
+      contentType: false,
+      type: 'POST',
+      dataType: undefined,
+      ...options,
+    });
+  },
+
+  post(url: string, dataOrForm: JQueryStatic | Node | string | Record<string, any> = {}, options: any = {}) {
+    let postData;
+    // @ts-ignore
+    if (dataOrForm instanceof $ && dataOrForm.is('form')) {
+      // $form
+      postData = (dataOrForm as any).serialize();
+    } else if (dataOrForm instanceof Node && $(dataOrForm).is('form')) {
+      // form
+      postData = $(dataOrForm).serialize();
+    } else if (typeof dataOrForm === 'string') {
+      // foo=bar&box=boz
+      postData = dataOrForm;
+    } else {
+      // {foo: 'bar'}
+      postData = JSON.stringify(dataOrForm);
+      options.contentType = 'application/json';
+    }
+    return request.ajax({
+      url,
+      method: 'post',
+      data: postData,
+      ...options,
+    });
+  },
+
+  get(url: string, qs: Record<string, any> = {}, options: Record<string, any> = {}) {
+    return request.ajax({
+      url,
+      data: qs,
+      method: 'get',
+      ...options,
+    });
+  },
+};
+
+Object.assign(window.Hydro.utils, {
+  i18n,
+  rawHtml,
+  substitute,
+  request,
+  tpl,
+  delay,
+  zIndexManager,
+});

packages/ui-default/utils/delay.js

@@ -1,5 +0,0 @@
-export default function delay(ms) {
-  return new Promise((resolve) => { setTimeout(resolve, ms); });
-}
-
-window.Hydro.utils.delay = delay;

packages/ui-default/utils/emulateAnchorClick.js

@@ -1,20 +0,0 @@
-/**
- * @param {Event} ev
- * @param {String} targetUrl
- * @param {Boolean} alwaysOpenInNewWindow
- */
-export default function emulateAnchorClick(ev, targetUrl, alwaysOpenInNewWindow = false) {
-  let openInNewWindow;
-  if (alwaysOpenInNewWindow) {
-    openInNewWindow = true;
-  } else {
-    openInNewWindow = (ev.ctrlKey || ev.shiftKey || ev.metaKey);
-  }
-  if (openInNewWindow) {
-    window.open(targetUrl);
-  } else {
-    window.location.href = targetUrl;
-  }
-}
-
-window.Hydro.utils.emulateAnchorClick = emulateAnchorClick;

packages/ui-default/utils/i18n.js

@@ -1,8 +0,0 @@
-import substitute from './substitute';
-
-export default function i18n(str, ...params) {
-  if (!str) return '';
-  return substitute(window.LOCALES?.[str] || str, params);
-}
-
-window.Hydro.utils.i18n = i18n;