ui: polyfill queueMicrotask

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

@@ -83,6 +83,7 @@ export default function (env = {}) {
     context: root(),
     entry: {
       hydro: './entry.js',
+      polyfill: './polyfill.ts',
       'default.theme': './theme/default.js',
     },
     output: {

packages/ui-default/build/index.js

@@ -1,11 +1,7 @@
 const esbuild = require('esbuild');
 const fs = require('fs');
 
-let transformTimeUsage = 0;
-let transformCount = 0;
-let displayTimeout;
 function transform(filename) {
-  const start = new Date();
   const result = esbuild.buildSync({
     entryPoints: [filename],
     sourcemap: 'inline',
@@ -16,10 +12,6 @@ function transform(filename) {
     write: false,
   });
   if (result.warnings.length) console.warn(result.warnings);
-  transformTimeUsage += new Date().getTime() - start.getTime();
-  transformCount++;
-  if (displayTimeout) clearTimeout(displayTimeout);
-  displayTimeout = setTimeout(() => console.log(`Transformed ${transformCount} files. (${transformTimeUsage}ms)`), 1000);
   return result.outputFiles[0].text;
 }
 require.extensions['.js'] = function loader(module, filename) {
@@ -32,6 +24,6 @@ require.extensions['.js'] = function loader(module, filename) {
 require.extensions['.ts'] = function loader(module, filename) {
   return module._compile(transform(filename), filename);
 };
-const main = require('./main.js');
+const main = require('./main');
 
 if (!module.parent) main();

packages/ui-default/build/main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-import-module-exports */
 /* eslint-disable import/no-extraneous-dependencies */
 import cac from 'cac';
 import fs from 'fs-extra';
@@ -90,6 +91,9 @@ async function main() {
   if (fs.existsSync('public/hydro.js')) {
     fs.copyFileSync('public/hydro.js', `public/hydro-${pkg.version}.js`);
   }
+  if (fs.existsSync('public/polyfill.js')) {
+    fs.copyFileSync('public/polyfill.js', `public/polyfill-${pkg.version}.js`);
+  }
   if (fs.existsSync('public/default.theme.css')) {
     fs.copyFileSync('public/default.theme.css', `public/default-${pkg.version}.theme.css`);
   }

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

@@ -44,10 +44,14 @@ export async function load(features = ['markdown']) {
     }
     s = Date.now();
     console.log('Loading monaco feature:', feat);
-    if (loaders[feat]) await loaders[feat]();
+    try {
-    else await loaders.external(res.default, feat);
+      if (loaders[feat]) await loaders[feat]();
-    console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
+      else await loaders.external(res.default, feat);
-    loaded.push(feat);
+      console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
+      loaded.push(feat);
+    } catch (e) {
+      console.log('Monaco feat', feat, 'failed to load:', e);
+    }
   }
   await res.loadThemePromise;
   return { monaco: res.default, registerAction: res.registerAction };

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.34.3",
+  "version": "4.34.4",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -72,6 +72,7 @@
     "prismjs": "^1.27.0",
     "prop-types": "^15.8.1",
     "qrcode": "^1.5.0",
+    "queue-microtask": "^1.2.3",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/ui-default/polyfill.ts

@@ -0,0 +1,11 @@
+import queueMicrotask from 'queue-microtask';
+import browserUpdate from 'browser-update';
+
+window.queueMicrotask = queueMicrotask;
+browserUpdate({
+  required: {
+    e: -10, f: -10, o: -3, s: -1, c: -10,
+  },
+  insecure: true,
+  api: 2022.03,
+});

packages/ui-default/templates/layout/html5.html

@@ -5,7 +5,7 @@
 {% import "components/noscript_note.html" as noscript_note with context %}
 {% import "components/user.html" as user with context %}
 <!DOCTYPE html>
-<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} nojs" lang="{{ handler.viewLang }}">
+<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} nojs" lang="{{ handler.viewLang }}" data-app="Hydro">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
@@ -29,6 +29,7 @@
     body {
       --font-family: "{{ UserContext.fontFamily }}", "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans";
       --code-font-family: "{{ UserContext.codeFontFamily }}", "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace";
+      --font-ligatures: {{ "normal" if UserContext.codeFontLigatures else "none" }} !important;
     }
   </style>
   {% if process.env.DEV %}
@@ -40,6 +41,14 @@
     <script>
       var _htmlNode = document.documentElement;
       _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
+      try {
+        import('data:text/javascript,');Object.fromEntries([])
+      } catch(e) {
+        const s = document.createElement('script');
+        s.async = false;
+        s.src = "{{ '/polyfill.js' if process.env.DEV else static_url(global.Hydro.version['ui-default'] + '.polyfill.js') }}";
+        document.head.appendChild(s);
+      }
     </script>
   {% endif %}
 </head>