ui: use esbuild-loader & chunk-splitting

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

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { assign } from 'lodash';
 import tpl from 'vj/utils/tpl';
 import request from 'vj/utils/request';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
@@ -40,5 +40,5 @@ export default class DomainSelectAutoComplete extends AutoComplete {
   }
 }
 
-_.assign(DomainSelectAutoComplete, DOMAttachedObject);
+assign(DomainSelectAutoComplete, DOMAttachedObject);
 window.Hydro.components.DomainSelectAutoComplete = DomainSelectAutoComplete;

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

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { assign } from 'lodash';
 import tpl from 'vj/utils/tpl';
 import request from 'vj/utils/request';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
@@ -37,5 +37,5 @@ export default class ProblemSelectAutoComplete extends AutoComplete {
   }
 }
 
-_.assign(ProblemSelectAutoComplete, DOMAttachedObject);
+assign(ProblemSelectAutoComplete, DOMAttachedObject);
 window.Hydro.components.ProblemSelectAutoComplete = ProblemSelectAutoComplete;

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

@@ -1,5 +1,5 @@
 import Drop from 'tether-drop';
-import _ from 'lodash';
+import { assign } from 'lodash';
 import 'jquery-scroll-lock';
 
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
@@ -194,5 +194,5 @@ export default class AutoComplete extends DOMAttachedObject {
   }
 }
 
-_.assign(AutoComplete, DOMAttachedObject);
+assign(AutoComplete, DOMAttachedObject);
 window.Hydro.components.autocomplete = AutoComplete;

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

@@ -1,23 +1,28 @@
-/*
-
-To add a new language to highlight:
-1. Add language in babel in package.json
-2. Add new import statement in `components/cmeditor/vjcmeditor.js`
-3. Add new import statement in `components/scratchpad/ScratchpadEditorContainer.js`
-4. Add new meta data in `components/highlighter/meta.js`
-
- */
-
 import Prism from 'prismjs';
-
+import components from 'prismjs/components';
+import getLoader from 'prismjs/dependencies';
+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 Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
-
 import languageMeta from './meta';
 
-const languageExtMap = {};
+const files = require.context('prismjs/components/', true, /prism-[a-z0-9-]+\.js/);
+const loadedLanguages = new Set();
+function loadLanguages() {
+  const languages = Object.keys(components.languages).filter((l) => l !== 'meta');
+  const loaded = [...loadedLanguages, ...Object.keys(Prism.languages)];
+  getLoader(components, languages, loaded).load((lang) => {
+    files(`./prism-${lang}.js`);
+    loadedLanguages.add(lang);
+  });
+}
 
+const languageExtMap = {};
+loadLanguages();
 // Map possible language names to Prism language name
 languageMeta.forEach((meta) => {
   for (let i = 0; i < meta.ext.length; ++i) {

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
 import moment from 'dayjs';
@@ -55,7 +54,7 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
 
   renderInner() {
     if (this.props.activeId === null) return [];
-    return _.map(this.props.item.messages, (msg) => (
+    return this.props.item.messages.map((msg) => (
       <Message
         key={msg._id}
         isSelf={msg.from === UserContext._id}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import load from 'vj/components/wastyle/index';
 import monaco from 'vj/components/monaco/index';
+import Notification from 'vj/components/notification';
 
 const mapStateToProps = (state) => ({
   value: state.editor.code,
@@ -29,7 +31,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     const { language, theme } = this.props;
     if (this.props.language === 'blockly') {
       if (!this.blockly) {
-        import('./blockly.jsx').then(({ default: Blockly }) => {
+        import('./blockly').then(({ default: Blockly }) => {
           if (!this.blockly) return;
           Blockly.inject(this.containerElement, {
           });
@@ -51,6 +53,29 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       const fontSize = localStorage.getItem('scratchpad.editor.fontSize');
       if (fontSize && !Number.isNaN(+fontSize)) config.fontSize = +fontSize;
       this.editor = monaco.editor.create(this.containerElement, config);
+      this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_P, () => {
+        this.editor.getAction('editor.action.quickCommand').run();
+      });
+      load().then(([loaded, format]) => {
+        if (!loaded) return;
+        const formatAction = {
+          id: 'hydro.format',
+          label: 'Format Code',
+          contextMenuOrder: 0,
+          contextMenuGroupId: 'operation',
+          keybindings: [monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F],
+          run: () => {
+            if (!['cpp', 'c'].includes(this.model._languageIdentifier.language)) return;
+            const [success, result] = format(this.editor.getValue(), `${UserContext.astyleOptions.trim()} mode=c`);
+            if (success) this.editor.setValue(result);
+            else Notification.warn(result);
+          },
+        };
+        this.editor.addAction(formatAction);
+        this.editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, () => {
+          this.editor.getAction('hydro.format').run();
+        });
+      });
       this.disposable.push(
         this.editor.onDidChangeModelContent((event) => {
           if (!this.__prevent_trigger_change_event) {
@@ -69,7 +94,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     if (this.props.language === 'blockly') {
       if (!this.blockly) {
         this.editor.dispose();
-        import('./blockly.jsx').then(({ default: Blockly, toolbox }) => {
+        import('./blockly').then(({ default: Blockly, toolbox }) => {
           if (!this.blockly) return;
           Blockly.inject(this.containerElement, {
             toolbox,