ui: speed up page load

packages/ui-default/api.ts

@@ -14,6 +14,7 @@ export { default as _ } from 'lodash';
 export { default as React } from 'react';
 export { default as ReactDOM } from 'react-dom/client';
 export * from './misc/Page';
+export { initPageLoader } from './hydro';
 
 const lazyModules = {};
 export default async function load(name: string) {

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

@@ -1,11 +1,7 @@
-/* eslint-disable camelcase */
-import en_GB from 'monaco-editor-nls/locale/en-gb.json';
-
 function format(message, args) {
   let result;
-  if (args.length === 0) {
-    result = message;
-  } else {
+  if (!args.length) result = message;
+  else {
     result = String(message).replace(/\{(\d+)\}/g, (match, rest) => {
       const index = rest[0];
       return typeof args[index] !== 'undefined' ? args[index] : match;
@@ -18,28 +14,12 @@ export const getConfiguredDefaultLocale = () => 'zh';
 
 let CURRENT_LOCALE_DATA = {}; // eslint-disable-line @typescript-eslint/naming-convention
 
-function find(path, message) {
-  for (const key of Object.keys(CURRENT_LOCALE_DATA)) {
-    if (!CURRENT_LOCALE_DATA[key] || !en_GB[key]) continue;
-    if (CURRENT_LOCALE_DATA[key][path] && en_GB[key][path] === message) {
-      return CURRENT_LOCALE_DATA[key][path];
-    }
-  }
-  for (const key of Object.keys(CURRENT_LOCALE_DATA)) {
-    if (!CURRENT_LOCALE_DATA[key]) continue;
-    if (CURRENT_LOCALE_DATA[key][path]) {
-      return CURRENT_LOCALE_DATA[key][path];
-    }
-  }
-  return message;
-}
-
 export function localize(path, message, ...args) {
-  return format(find(path.key || path, message), args);
+  return format(CURRENT_LOCALE_DATA[path.key || path] || message, args);
 }
 
 export function setLocaleData(data) {
-  CURRENT_LOCALE_DATA = data;
+  CURRENT_LOCALE_DATA = Object.assign(...Object.values(data));
 }
 
 export function loadMessageBundle() {

packages/ui-default/entry.js

@@ -26,30 +26,30 @@ console.log(
 );
 
 window.UiContext = JSON.parse(window.UiContext);
+window.UserContext = JSON.parse(window.UserContext);
+try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    const encodedConfig = encodeURIComponent(JSON.stringify(UiContext.SWConfig));
-    navigator.serviceWorker.register(`/service-worker.js?config=${encodedConfig}`).then((registration) => {
-      console.log('SW registered: ', registration);
-    }).catch((registrationError) => {
-      console.log('SW registration failed: ', registrationError);
-    });
+  const encodedConfig = encodeURIComponent(JSON.stringify(UiContext.SWConfig));
+  navigator.serviceWorker.register(`/service-worker.js?config=${encodedConfig}`).then((registration) => {
+    console.log('SW registered: ', registration);
+  }).catch((registrationError) => {
+    console.log('SW registration failed: ', registrationError);
   });
 }
 
-document.addEventListener('DOMContentLoaded', async () => {
-  const PageLoader = '<div class="page-loader nojs--hide" style="display:none;"><div class="loader"></div></div>';
-  $('body').prepend(PageLoader);
-  $('.page-loader').fadeIn(500);
-  // eslint-disable-next-line camelcase
-  try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
+const PageLoader = '<div class="page-loader nojs--hide" style="display:none;"><div class="loader"></div></div>';
+$('body').prepend(PageLoader);
+$('.page-loader').fadeIn(500);
 
-  const [data, HydroExports] = await Promise.all([
-    fetch(`/constant/${UiContext.constantVersion}.js`).then((r) => r.text()),
-    import('./api'),
-  ]);
+const prefetch = Promise.all([
+  fetch(`/constant/${UiContext.constantVersion}.js`).then((r) => r.text()),
+  import('./api'),
+]);
+
+document.addEventListener('DOMContentLoaded', async () => {
+  Object.assign(window.UiContext, JSON.parse(window.UiContextNew))
+  const [data, HydroExports] = await prefetch;
   Object.assign(window, { HydroExports });
   eval(data); // eslint-disable-line no-eval
-
-  import('./hydro');
+  await HydroExports.initPageLoader();
 }, false);

packages/ui-default/hydro.ts

@@ -17,7 +17,6 @@ declare global {
 }
 
 const start = new Date();
-window.UserContext = JSON.parse(window.UserContext);
 
 function buildSequence(pages, type) {
   if (process.env.NODE_ENV !== 'production') {
@@ -52,7 +51,7 @@ async function animate() {
   }
 }
 
-async function load() {
+export async function initPageLoader() {
   const pageLoader = new PageLoader();
 
   const currentPageName = document.documentElement.getAttribute('data-page');
@@ -99,5 +98,3 @@ async function load() {
   $('.section').trigger('vjLayout');
   $(document).trigger('vjPageFullyInitialized');
 }
-
-load();

packages/ui-default/package.json

@@ -36,17 +36,17 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/redux-logger": "^3.0.9",
-    "@types/serviceworker": "^0.0.62",
-    "@types/sharedworker": "^0.0.91",
+    "@types/serviceworker": "^0.0.64",
+    "@types/sharedworker": "^0.0.93",
     "@types/webpack-env": "^1.18.0",
     "@vscode/codicons": "^0.0.32",
     "allotment": "^1.18.1",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "browser-update": "^3.3.44",
     "chalk": "^5.2.0",
     "classnames": "^2.3.2",
     "clipboard": "^2.0.11",
-    "cordis": "^2.7.3",
+    "cordis": "^2.7.4",
     "diff": "^5.1.0",
     "diff-dom": "^5.0.4",
     "echarts": "^5.4.1",
@@ -60,14 +60,14 @@
     "gulp-if": "^3.0.0",
     "gulp-plumber": "^1.2.1",
     "gulp-svgmin": "^4.1.0",
-    "jquery": "^3.6.3",
+    "jquery": "^3.6.4",
     "jquery-scroll-lock": "^3.1.3",
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
     "matchmedia-polyfill": "^0.3.2",
     "moment": "^2.29.4",
     "monaco-editor": "0.36.1",
-    "monaco-editor-nls": "^2.0.0",
+    "monaco-editor-nls": "^3.0.0",
     "monaco-themes": "^0.4.3",
     "monaco-yaml": "^4.0.4",
     "nanoid": "^4.0.1",
@@ -94,13 +94,13 @@
     "redux-promise-middleware": "^6.1.3",
     "redux-thunk": "^2.4.2",
     "rupture": "^0.7.1",
-    "schemastery": "^3.7.1",
+    "schemastery": "^3.7.2",
     "slideout": "^1.0.1",
     "sticky-kit": "^1.1.3",
     "tether": "1.4.7",
     "tether-drop": "^1.4.2",
     "through2": "^4.0.2",
-    "timeago-react": "^3.0.5",
+    "timeago-react": "^3.0.6",
     "timeago.js": "^4.0.2",
     "vditor": "^3.9.0",
     "vinyl-buffer": "^1.0.1",

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

@@ -58,12 +58,12 @@
   {% endif %}
 </head>
 <body>
-  {% block body %}{% endblock %}
   {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
     <script>
       var UiContext = '{{ UiContext|json|jsesc|safe }}';
       var UserContext = '{{ UserContext|json|jsesc|safe }}';
     </script>
+    {% set UiContext = Object.create(UiContext) %}
     {% if process.env.DEV %}
       <script type="text/javascript" src="/resource/hash/lang-{{ _('__id') }}.js?version={{ global.Hydro.version['ui-default'] }}"></script>
       <script type="text/javascript" src="/hydro.js?version={{ global.Hydro.version['ui-default'] }}"></script>
@@ -72,6 +72,10 @@
       <script type="text/javascript" src="{{ UiContext.cdn_prefix }}hydro-{{ global.Hydro.version['ui-default'] }}.js"></script>
     {% endif %}
   {% endif %}
+  {% block body %}{% endblock %}
   {% block script %}{% endblock %}
+  {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
+    <script>var UiContextNew = '{{ UiContext|json|jsesc|safe }}';</script>
+  {% endif %}
 </body>
 </html>

packages/ui-default/utils/base.ts

@@ -1,5 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
+import React from 'react';
+import DOMServer from 'react-dom/server.browser';
 
 export function substitute(str: string, obj: any) {
   return str.replace(/\{([^{}]+)\}/g, (match, key) => {
@@ -32,6 +34,7 @@ export function secureRandomString(digit = 32, dict = defaultDict) {
 type Substitution = string | number | { templateRaw: true, html: string };
 
 export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]) {
+  if (React.isValidElement(pieces)) return DOMServer.renderToStaticMarkup(pieces);
   let result = pieces[0];
   for (let i = 0; i < substitutions.length; ++i) {
     const subst = substitutions[i];