ui: monaco: lazy load resources

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

@@ -36,7 +36,8 @@ export default class Editor extends DOMAttachedObject {
   }
 
   async initMonaco() {
-    const { default: monaco, registerAction } = await import('vj/components/monaco/index');
+    const { load } = await import('vj/components/monaco/loader');
+    const { monaco, registerAction } = await load(['markdown']);
     const {
       onChange, language = 'markdown',
       theme = UserContext.monacoTheme || 'vs-light',

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

@@ -1,9 +1,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import loadFormatter from 'vj/components/wastyle/index';
 import Notification from 'vj/components/notification';
-import './languages/markdown';
-import './languages/typescript';
-import './languages/yaml';
 import './monaco.css';
 
 export default monaco;

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

@@ -0,0 +1,46 @@
+let loaded;
+const loaders = {
+  i18n: async () => {
+    const { setLocaleData } = await import('vj/components/monaco/nls');
+    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);
+  },
+  markdown: () => import('./languages/markdown'),
+  typescript: () => import('./languages/typescript'),
+  yaml: () => import('./languages/yaml'),
+};
+
+export async function load(features = ['markdown']) {
+  let s = Date.now();
+  if (!loaded) {
+    await loaders.i18n();
+    console.log('Loading monaco editor');
+  }
+  const res = await import('./index');
+  if (!loaded) {
+    console.log('Loaded monaco editor in ', Date.now() - s, 'ms');
+    loaded = [];
+  }
+  for (const feat of features) {
+    if (loaded.includes(feat)) continue;
+    if (!loaders[feat]) {
+      console.error('Unknown monaco feature:', feat);
+      continue;
+    }
+    s = Date.now();
+    console.log('Loading monaco feature:', feat);
+    await loaders[feat]();
+    console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
+    loaded.push(feat);
+  }
+  return { monaco: res.default, registerAction: res.registerAction };
+}
+export default load;

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

@@ -18,10 +18,9 @@ export default function DataInputComponent(props) {
           className="scratchpad__data-input"
           style={{ overflowY: 'scroll' }}
           wrap="off"
-          contentEditable
         >
           {/* eslint-disable-next-line react/no-danger */}
-          <pre dangerouslySetInnerHTML={{ __html: value }} />
+          <pre dangerouslySetInnerHTML={{ __html: value }} contentEditable />
         </div>
       ) : (
         <textarea

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import monaco, { registerAction } from 'vj/components/monaco/index';
 
 const mapStateToProps = (state) => ({
   value: state.editor.code,
@@ -22,9 +21,12 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent {
   disposable = [];
 
-  componentDidMount() {
+  async componentDidMount() {
     const value = this.props.value || '';
     const { language, theme } = this.props;
+    const { load } = await import('vj/components/monaco/loader');
+    console.log(load);
+    const { monaco, registerAction } = await load([language]);
     this.model = monaco.editor.createModel(value, language, monaco.Uri.parse('file://model'));
     if (this.containerElement) {
       /** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
@@ -53,7 +55,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     }
   }
 
-  componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps) {
     const {
       value, language, theme, mainSize, recordSize, pretestSize,
     } = this.props;
@@ -73,6 +75,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       editor.pushUndoStop();
       this.__prevent_trigger_change_event = false;
     }
+    const { load } = await import('vj/components/monaco/loader');
+    const { monaco } = await load([language]);
     if (prevProps.language !== language) {
       monaco.editor.setModelLanguage(model, language);
       editor.updateOptions({ mode: language });

packages/ui-default/hydro.ts

@@ -4,7 +4,6 @@ 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 {
@@ -37,7 +36,6 @@ 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

@@ -1,14 +0,0 @@
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.28.1",
+  "version": "4.29.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",