ui: external module support

packages/ui-default/.eslintrc.js

@@ -42,6 +42,7 @@ module.exports = {
     __webpack_require__: true,
     UiContext: true,
     UserContext: true,
+    externalModules: true,
     LOCALES: true,
     window: true,
     JQuery: true,

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

@@ -1,3 +1,5 @@
+import loadExternalModule from 'vj/utils/loadModule';
+
 let loaded;
 const loaders = {
   i18n: async () => {
@@ -16,6 +18,11 @@ const loaders = {
   markdown: () => import('./languages/markdown'),
   typescript: () => import('./languages/typescript'),
   yaml: () => import('./languages/yaml'),
+  external: async (monaco, feat) => {
+    let apply = await loadExternalModule(window.externalModules[`monaco-${feat}`]);
+    if (typeof apply !== 'function') apply = apply.default || apply.apply;
+    if (typeof apply === 'function') await apply(monaco);
+  },
 };
 
 export async function load(features = ['markdown']) {
@@ -26,18 +33,19 @@ export async function load(features = ['markdown']) {
   }
   const res = await import('./index');
   if (!loaded) {
-    console.log('Loaded monaco editor in ', Date.now() - s, 'ms');
+    console.log('Loaded monaco editor in', Date.now() - s, 'ms');
     loaded = [];
   }
   for (const feat of features) {
     if (loaded.includes(feat)) continue;
-    if (!loaders[feat]) {
+    if (!loaders[feat] && !window.externalModules[`monaco-${feat}`]) {
       console.error('Unknown monaco feature:', feat);
       continue;
     }
     s = Date.now();
     console.log('Loading monaco feature:', feat);
-    await loaders[feat]();
+    if (loaders[feat]) await loaders[feat]();
+    else await loaders.external(res.default, feat);
     console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
     loaded.push(feat);
   }

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

@@ -79,7 +79,6 @@ function handleNavbar() {
     if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
       $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
       $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
-      console.log('hide', navItems[navItem]);
       $(menu).prepend($(navItems[navItem]));
     }
     navItem--;
@@ -91,7 +90,6 @@ function handleNavbar() {
       const ele = menu.children(0);
       $(ele).addClass('nav__list-item').removeClass('menu__item');
       $(ele).children('a').addClass('nav__item').removeClass('menu__link');
-      console.log('show', ele);
       ele.insertBefore(trigger);
     }
   }
@@ -103,7 +101,6 @@ function handleNavbar() {
       if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
         $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
         $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
-        console.log('hide', navItems[navItem]);
         $(menu).prepend($(navItems[navItem]));
         break;
       }
@@ -111,7 +108,6 @@ function handleNavbar() {
     }
   }
 
-  console.log('children', menu.children());
   if (!menu.children().length) trigger.hide();
 }
 

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

@@ -25,9 +25,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     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'));
+    this.model = monaco.editor.createModel(value, language, monaco.Uri.parse(`file:///${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`));
     if (this.containerElement) {
       /** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
       const config = {
@@ -108,7 +107,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
           width: '100%',
         }}
         className="ScratchpadMonacoEditor"
-      />
+      >
+        <div className="loader-container"><div className="loader"></div></div>
+      </div>
     );
   }
 });

packages/ui-default/entry.js

@@ -5,6 +5,7 @@ window.Hydro = {
   utils: {},
   node_modules: {},
 };
+window.externalModules = {};
 
 console.log(
   '%c%s%c%s',

packages/ui-default/hydro.ts

@@ -12,6 +12,7 @@ declare global {
     Hydro: any;
     // eslint-disable-next-line camelcase
     node_modules: any;
+    externalModules: Record<string, string>;
   }
 }
 

packages/ui-default/package.json

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

packages/ui-default/utils/loadModule.ts

@@ -0,0 +1,10 @@
+export default async function loadExternalModule(target: string) {
+  const ele = document.createElement('script');
+  ele.src = target;
+  await new Promise((resolve, reject) => {
+    ele.onload = resolve;
+    ele.onerror = reject;
+    document.head.appendChild(ele);
+  });
+  return window.exports;
+}