ui: enhance resource load

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.2.34",
+    "version": "3.2.35",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",

packages/hydrooj/src/service/server.ts

@@ -698,7 +698,7 @@ async function handle(ctx, HandlerClass, checker) {
             } else if (typeof h.post !== 'function') {
                 throw new MethodNotAllowedError(method);
             }
-        } else if (typeof h[method] !== 'function') {
+        } else if (typeof h[method] !== 'function' && typeof h.all !== 'function') {
             throw new MethodNotAllowedError(method);
         }
 
@@ -712,6 +712,7 @@ async function handle(ctx, HandlerClass, checker) {
         await bail(`handler/before/${HandlerClass.name.replace(/Handler$/, '')}`, h);
         await bail('handler/before', h);
         h.args.__method = Date.now();
+        if (h.all) await h.all(args);
         if (h[method]) await h[method](args);
         h.args.__methodDone = Date.now();
         await bail(`handler/before-operation/${HandlerClass.name.replace(/Handler$/, '')}`, h);

packages/ui-default/entry.js

@@ -29,20 +29,32 @@ document.addEventListener('DOMContentLoaded', async () => {
   // eslint-disable-next-line camelcase
   try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 
-  // Locale & langs
+  const local = JSON.parse(localStorage.getItem('hydro-constant') || '{}');
-  const { version, payload } = JSON.parse(localStorage.getItem('hydro-constant') || '{}');
+  let { data } = local;
-  if (version === UiContext.constantVersion) {
+  if (local.version !== UiContext.constantVersion) {
-    eval(payload[0]); // eslint-disable-line no-eval
-    payload.shift();
-    window.Hydro.preload = payload;
-  } else {
     const res = await fetch(`/constant?version=${UiContext.constantVersion}`);
-    const data = await res.json();
+    data = await res.json();
-    eval(data.payload[0]); // eslint-disable-line no-eval
+    localStorage.setItem('hydro-constant', JSON.stringify({ data, version: UiContext.constantVersion }));
-    localStorage.setItem('hydro-constant', JSON.stringify(data));
-    data.payload.shift();
-    window.Hydro.preload = data.payload;
   }
+  eval(data[0]); // eslint-disable-line no-eval
+  data.shift();
+  window.Hydro.preload = data;
+
+  const e = document.createElement('style');
+  const dark = UiContext.domain.nav_logo_dark || UiContext.nav_logo_dark;
+  const dark2x = UiContext.domain.nav_logo_dark_2x || UiContext.nav_logo_dark_2x;
+  e.innerHTML = `
+    ${dark ? `.nav__logo { background-image: url(${dark}) !important }` : ''}
+    ${dark2x ? `
+      @media
+      only screen and (-webkit-min-device-pixel-ratio: 1.5), 
+      only screen and (min-resolution: 1.5dppx),
+      only screen and (min-resolution: 144dpi) {
+        .nav__logo, .header--mobile__domain {
+          background-image: url(${dark2x}) !important
+        }
+      }` : ''}`;
+  document.body.appendChild(e);
 
   import('./hydro');
 }, false);

packages/ui-default/handler.ts

@@ -6,86 +6,45 @@ import { join } from 'path';
 import { ObjectID } from 'mongodb';
 import * as bus from 'hydrooj/src/service/bus';
 import { Route, Handler } from 'hydrooj/src/service/server';
-import * as db from 'hydrooj/src/service/db';
 import { PERM } from 'hydrooj/src/model/builtin';
 import markdown from './backendlib/markdown';
 
 const {
-  system, domain, user, setting, problem, contest,
+  system, user, setting, problem, contest,
 } = global.Hydro.model;
 global.Hydro.version.ui = require('./package.json').version;
 
-interface ConstantArgs {
-  lang: string;
-  domainId: string;
-}
-
-declare module 'hydrooj/src/interface' {
-  interface Collections {
-    cache: {
-      _id: string;
-      value: any;
-    }
-  }
-}
-
-const cache = {};
-const coll = db.collection('cache');
 const pages = Object.keys(global.Hydro.ui.manifest)
   .filter((file) => file.endsWith('.page.js'))
   .map((i) => readFileSync(join(global.Hydro.ui.manifest[i], i), 'utf-8'));
 
-async function constant(args: ConstantArgs) {
+let constant = '';
-  // CompileLangs
+let hash = '';
-  const payload = [`window.LANGS=${JSON.stringify(setting.langs)};`];
 
-  // Locale
+function run() {
-  let { lang } = args;
+  const payload = [...pages];
-  if (!global.Hydro.locales[lang]) lang = system.get('server.language');
+  const [logo, logo2x] = system.getMany([
-  payload[0] += `window.LOCALES=${JSON.stringify(global.Hydro.locales[lang])};`;
-
-  // Extra style
-  let [nav_logo_dark, nav_logo_dark_2x] = system.getMany([
     'ui-default.nav_logo_dark', 'ui-default.nav_logo_dark_2x',
   ]);
-  const ddoc = await domain.get(args.domainId);
+  const res = [];
-  nav_logo_dark = ddoc.ui?.nav_logo_dark || nav_logo_dark;
+  res.push(`window.LANGS=${JSON.stringify(setting.langs)};`);
-  nav_logo_dark_2x = ddoc.ui?.nav_logo_dark_2x || nav_logo_dark_2x;
+  if (logo) res.push(`UiContext.nav_logo_dark="${logo}";`);
-  payload[0] += `\
+  if (logo2x) res.push(`UiContext.nav_logo_dark_2x="${logo2x}";`);
-    const e = document.createElement('style');
+  payload.unshift(res.join('\n'));
-    e.innerHTML = \`\
-      ${nav_logo_dark ? `.nav__logo { background-image: url(${nav_logo_dark}) !important }` : ''}
-      ${nav_logo_dark_2x ? `\
-      @media
-        only screen and (-webkit-min-device-pixel-ratio: 1.5), 
-        only screen and (min-resolution: 1.5dppx),
-        only screen and (min-resolution: 144dpi) {
-        .nav__logo, .header--mobile__domain {
-          background-image: url(${nav_logo_dark_2x}) !important
-        }
-    }` : ''}\`;
-    document.body.appendChild(e);`;
-
-  payload.push(...pages);
 
   const c = crypto.createHash('sha1');
   c.update(JSON.stringify(payload));
   const version = c.digest('hex');
-  cache[version] = { version, payload };
+  constant = JSON.stringify(payload);
-  await coll.updateOne({ _id: version }, { $set: { value: { version, payload } } }, { upsert: true });
+  hash = version;
-  return version;
-}
-
-const versionHandler = async (that) => {
-  if (that.response.template && !that.UiContext.constantVersion) {
-    that.UiContext.constantVersion = await constant({
-      domainId: that.domainId,
-      lang: that.session.viewLang || that.user.viewLang,
-    });
 }
+const versionHandler = (that) => {
+  that.UiContext.constantVersion = hash;
 };
 bus.on('handler/after', versionHandler);
 bus.on('handler/error', versionHandler);
+bus.on('app/started', run);
+bus.on('system/setting', run);
 
 class WikiHelpHandler extends Handler {
   noCheckPermView = true;
@@ -147,12 +106,28 @@ class MarkdownHandler extends Handler {
   }
 }
 
-class UiConstantsHandler extends Handler {
+class ResourceHandler extends Handler {
   noCheckPermView = true;
 
-  async get({ version }) {
+  async prepare() {
-    this.response.body = cache[version]
+    this.response.addHeader('Cache-Control', 'public, max-age=86400');
-      || (await coll.findOne({ _id: version }))?.value;
+  }
+}
+
+class UiConstantsHandler extends ResourceHandler {
+  async all() {
+    this.response.addHeader('ETag', hash);
+    this.response.body = constant;
+    this.response.type = 'application/json';
+  }
+}
+
+class LanguageHandler extends ResourceHandler {
+  async all() {
+    let lang = this.session.viewLang || this.user.viewLang;
+    if (!global.Hydro.locales[lang]) lang = system.get('server.language');
+    this.response.body = `window.LOCALES=${JSON.stringify(global.Hydro.locales[lang])};`;
+    this.response.type = 'application/javascript';
   }
 }
 
@@ -202,5 +177,6 @@ global.Hydro.handler.ui = async () => {
   Route('set_theme', '/set_theme/:id', SetThemeHandler);
   Route('constant', '/constant', UiConstantsHandler);
   Route('markdown', '/markdown', MarkdownHandler);
+  Route('lang', '/l/:lang', LanguageHandler);
   Route('media', '/media', RichMediaHandler);
 };

packages/ui-default/package.json

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

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

@@ -26,6 +26,7 @@
   {% endblock %}
   {% if not isIE(handler.request.headers['user-agent']) %}
     <script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version.ui }}"></script>
+    <script type="text/javascript" src="{{ static_url('l/'+handler.user.viewLang) }}"></script>
     {% if process.env.DEV %}
       <script type="text/javascript" src="{{ static_url('hydro.js') }}?version={{ global.Hydro.version.ui }}"></script>
     {% else %}