ui: optimize resource load

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

@@ -130,30 +130,21 @@ export default function (env = {}) {
         maxInitialRequests: 3,
         automaticNameDelimiter: '-',
         cacheGroups: {
-          monaco: {
-            test: /[\\/]monaco-editor[\\/]/,
-            priority: 9,
-            name: 'monaco',
-          },
-          vditor: {
-            test: /[\\/]vditor[\\/]/,
-            priority: 8,
-            name: 'vditor',
-          },
-          echarts: {
-            test: /[\\/]echarts[\\/]/,
-            priority: 7,
-            name: 'echarts',
-          },
-          graphql: {
-            test: /[\\/](graphiql|codemirror)[\\/]/,
-            priority: 6,
-            name: 'gql-cm',
+          style: {
+            test: /\.(css|styl|less|sass|scss)$/,
+            priority: 99,
+            name: 'style',
           },
           vendors: {
             test: /[\\/]node_modules[\\/].+\.([jt]sx?|json|yaml)$/,
             priority: -10,
-            name: 'vendors',
+            name(module) {
+              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+              if (packageName === 'monaco-editor-nls') {
+                return `i.monaco.${module.userRequest.split('/').pop().split('.')[0]}`;
+              }
+              return `n.${packageName.replace('@', '')}`;
+            },
             reuseExistingChunk: true,
           },
           default: {

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

@@ -5,7 +5,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
-import { Icon } from '@blueprintjs/core';
+import Icon from 'vj/components/react/IconComponent';
 
 // eslint-disable-next-line prefer-arrow-callback
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
@@ -199,7 +199,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         {multi && selected.map((item, idx) => (
           <div className="autocomplete-tag" key={selectedKeys[idx]}>
             <div>{itemText(item)}</div>
-            <Icon icon="cross" onClick={() => toggleItem(item)} />
+            <Icon name="close" onClick={() => toggleItem(item)} />
           </div>
         ))}
         <input
@@ -231,7 +231,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
               data-focus={idx === currentItem}
             >
               <div>{renderItem(item)}</div>
-              <Icon icon="tick" />
+              <Icon name="check" />
             </li>
           ))}
         </ul>

packages/ui-default/components/monaco/nls.js

@@ -1,9 +1,5 @@
 /* eslint-disable camelcase */
 import en_GB from 'monaco-editor-nls/locale/en-gb.json';
-import zh_CN from 'monaco-editor-nls/locale/zh-hans.json';
-import zh_TW from 'monaco-editor-nls/locale/zh-hant.json';
-import ko from 'monaco-editor-nls/locale/ko.json';
-import i18n from 'vj/utils/i18n';
 
 function _format(message, args) {
   let result;
@@ -51,10 +47,3 @@ export function loadMessageBundle(file) {
 export function config(opt) {
   return loadMessageBundle;
 }
-
-const languages = {
-  zh_CN,
-  zh_TW,
-  ko,
-};
-if (languages[i18n('timeago_locale')]) setLocaleData(languages[i18n('timeago_locale')]);

packages/ui-default/hydro.ts

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import Notification from 'vj/components/notification';
 import PageLoader from 'vj/misc/PageLoader';
 import delay from 'vj/utils/delay';
+import i18n from './i18n';
 
 declare global {
   interface Window {
@@ -36,6 +37,7 @@ function buildSequence(pages, type) {
 async function load() {
   for (const page of window.Hydro.preload) await eval(page); // eslint-disable-line no-eval
 
+  await i18n();
   const pageLoader = new PageLoader();
 
   const currentPageName = document.documentElement.getAttribute('data-page');

packages/ui-default/i18n.ts

@@ -0,0 +1,14 @@
+import { setLocaleData } from 'vj/components/monaco/nls';
+
+export default async function load() {
+  let resource;
+  const lang = UserContext.viewLang;
+  if (lang === 'zh') {
+    resource = await import('monaco-editor-nls/locale/zh-hans.json');
+  } else if (lang === 'zh_TW') {
+    resource = await import('monaco-editor-nls/locale/zh-hant.json');
+  } else if (lang === 'ko') {
+    resource = await import('monaco-editor-nls/locale/ko.json');
+  }
+  if (resource) setLocaleData(resource);
+}

packages/ui-default/misc/icons/book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path class="cls-1" d="M0 48.5v873A48.65 48.65 0 0048.5 970h97V0h-97A48.64 48.64 0 000 48.5zM679 0h-97v388l-97-97-97 97V0H194v970h485a48.65 48.65 0 0048.5-48.5v-873A48.64 48.64 0 00679 0z"/></svg>

packages/ui-default/misc/icons/comparison.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M300 400H50a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V450a50.15 50.15 0 00-50-50zm650-300H700a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V150a50.15 50.15 0 00-50-50zm0 150H700V150h250zM300 700H50a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V750a50.15 50.15 0 00-50-50zm0-600H50a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V150a50.15 50.15 0 00-50-50zM500 0a50.15 50.15 0 00-50 50v900a50.15 50.15 0 0050 50 50.15 50.15 0 0050-50V50a50.15 50.15 0 00-50-50zm450 700H700a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V750a50.15 50.15 0 00-50-50zm0 150H700V750h250zm0-450H700a50.15 50.15 0 00-50 50v100a50.15 50.15 0 0050 50h250a50.15 50.15 0 0050-50V450a50.15 50.15 0 00-50-50zm0 150H700V450h250z"/></svg>

packages/ui-default/misc/icons/stopwatch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M474 300c-196.34 0-355.5 134.31-355.5 300S277.66 900 474 900s355.5-134.31 355.5-300H474zm-59.14-96.92c-.07-1-.11-2-.11-3.08V100h-118.5C263.53 100 237 77.61 237 50s26.53-50 59.25-50h355.5C684.47 0 711 22.39 711 50s-26.53 50-59.25 50h-118.5v100c0 1 0 2.06-.11 3.08C767.06 227.65 948 396 948 600c0 220.91-212.22 400-474 400S0 820.91 0 600c0-204 180.99-372.35 414.86-396.92z"/></svg>

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.27.10",
+  "version": "4.27.11",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -11,8 +11,8 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^3.52.0",
-    "@blueprintjs/icons": "^3.31.0",
     "@hydrooj/utils": "workspace:*",
+    "@types/gulp-if": "^0.0.34",
     "@types/jquery": "^3.5.10",
     "@types/json-schema": "^7.0.9",
     "@types/katex": "^0.11.1",

packages/ui-default/templates/problem_detail.html

@@ -50,10 +50,10 @@
       <div class="section__body">
         <ul class="problem__tags">
           <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('ID') }}: {{ pdoc.docId }}</span>
-          <span class="bp3-tag bp3-large bp3-minimal problem__tag-item bp3-icon-standard bp3-icon-book">{{ _('problem_type.' + pdoc.config.type).format(pdoc.config.subType) }}</span>
+          <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-book">{{ _('problem_type.' + pdoc.config.type).format(pdoc.config.subType) }}</span>
           {% if pdoc.config.type != 'objective' and pdoc.config.type != 'submit_answer' %}
-            <span class="bp3-tag bp3-large bp3-minimal problem__tag-item bp3-icon-standard bp3-icon-stopwatch">{{ pdoc.config.timeMax if pdoc.config.timeMax == pdoc.config.timeMin else pdoc.config.timeMin+'~'+pdoc.config.timeMax }}ms</span>
-            <span class="bp3-tag bp3-large bp3-minimal problem__tag-item bp3-icon-standard bp3-icon-comparison">{{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</span>
+            <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-stopwatch">{{ pdoc.config.timeMax if pdoc.config.timeMax == pdoc.config.timeMin else pdoc.config.timeMin+'~'+pdoc.config.timeMax }}ms</span>
+            <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-comparison">{{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</span>
           {% endif %}
           {% if not tdoc %}
             <a class="bp3-tag bp3-large bp3-minimal bp3-interactive problem__tag-item" href="{{ url('record_main', query={pid:pdoc.docId}) }}">{{ _('Tried') }}: {{ pdoc.nSubmit }}</a>

packages/ui-default/theme/default.js

@@ -5,7 +5,6 @@ import 'pickadate/lib/themes/classic.date.css';
 import 'pickadate/lib/themes/classic.time.css';
 import 'katex/dist/katex.min.css';
 import '@blueprintjs/core/lib/css/blueprint.css';
-import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 
 import 'vj/misc/float.styl';
 import 'vj/misc/typography.styl';