ui: update resource loader

packages/hydrooj/src/loader.ts

@@ -73,7 +73,9 @@ export class Loader {
                 const original = plugin.apply;
                 const apply = (...args) => {
                     const start = Date.now();
-                    const result = Promise.resolve(original(...args)).catch((e) => logger.error(e));
+                    const result = Promise.resolve()
+                        .then(() => original(...args))
+                        .catch((e) => logger.error(e));
                     Promise.race([
                         result,
                         new Promise((resolve) => {

packages/ui-default/.eslintrc.js

@@ -60,6 +60,7 @@ module.exports = {
     '@typescript-eslint/return-await': 'off',
     '@typescript-eslint/no-shadow': 'warn',
     'no-shadow': 'off',
+    'guard-for-in': 'off',
     '@typescript-eslint/quotes': ['warn', 'single', { avoidEscape: true }],
 
     // FIXME A bug with eslint-parser

packages/ui-default/backendlib/builder.ts

@@ -71,6 +71,7 @@ const build = async (contents: string) => {
 };
 
 export async function buildUI() {
+  console.log(1, 'building');
   const start = Date.now();
   let totalSize = 0;
   const entryPoints: string[] = [];
@@ -85,28 +86,33 @@ export async function buildUI() {
       if (/\.lazy\.[jt]sx?$/.test(target)) lazyModules.push(join(publicPath, target));
     }
   }
+  function addFile(name: string, content: string) {
+    vfs[name] = content;
+    hashes[name] = sha1(content).substring(0, 8);
+    logger.info('+ %s-%s: %s', name, hashes[name].substring(0, 6), size(content.length));
+    newFiles.push(name);
+    totalSize += content.length;
+  }
   for (const m of lazyModules) {
     const name = basename(m).split('.')[0];
     const { outputFiles } = await build(`window.lazyModuleResolver['${name}'](require('${relative(tmp, m)}'))`);
     for (const file of outputFiles) {
-      const key = basename(m).replace(/\.[tj]sx?$/, '.js');
+      addFile(basename(m).replace(/\.[tj]sx?$/, '.js'), file.text);
-      vfs[key] = file.text;
-      hashes[key] = sha1(file.text).substring(0, 8);
-      logger.info('+ %s-%s: %s', key.split('.lazy.')[0], hashes[key].substring(0, 6), size(file.text.length));
-      newFiles.push(key);
-      totalSize += file.text.length;
     }
   }
+  for (const lang in global.Hydro.locales) {
+    if (!/^[a-zA-Z_]+$/.test(lang)) continue;
+    const str = `window.LOCALES=${JSON.stringify(global.Hydro.locales[lang][Symbol.for('iterate')])};`;
+    addFile(`lang-${lang}.js`, str);
+  }
   const entry = await build([
     `window.lazyloadMetadata = ${JSON.stringify(hashes)};`,
     ...entryPoints.map((i) => `import '${relative(tmp, i)}';`),
   ].join('\n'));
   const pages = entry.outputFiles.map((i) => i.text);
   const str = `window.LANGS=${JSON.stringify(SettingModel.langs)};${pages.join('\n')}`;
-  vfs['entry.js'] = str;
+  addFile('entry.js', str);
-  UiContextBase.constantVersion = hashes['entry.js'] = sha1(str).substring(0, 8);
+  UiContextBase.constantVersion = hashes['entry.js'];
-  logger.info('+ %s-%s: %s', 'entry', hashes['entry.js'].substring(0, 6), size(str.length));
-  totalSize += str.length;
   for (const key in vfs) {
     if (newFiles.includes(key)) continue;
     delete vfs[key];
@@ -132,6 +138,7 @@ class UiConstantsHandler extends Handler {
 export async function apply(ctx: Context) {
   ctx.Route('constant', '/constant/:version', UiConstantsHandler);
   ctx.Route('constant', '/lazy/:version/:name', UiConstantsHandler);
+  ctx.Route('constant', '/resource/:version/:name', UiConstantsHandler);
   ctx.on('app/started', updateLogo);
   ctx.on('app/started', buildUI);
   const debouncedBuildUI = debounce(buildUI, 2000, { trailing: true });

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

@@ -190,9 +190,11 @@ export default function (env: { watch?: boolean, production?: boolean, measure?:
         automaticNameDelimiter: '-',
         cacheGroups: {
           style: {
-            test: /\.(css|styl|less|s[ac]ss)$/,
             priority: 99,
-            name: 'style',
+            name: 'theme',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
           },
           vendors: {
             test: /[\\/]node_modules[\\/].+\.([jt]sx?|json|yaml)$/,

packages/ui-default/build/main.ts

@@ -120,8 +120,8 @@ async function main() {
     if (fs.existsSync('public/polyfill.js')) {
       fs.copyFileSync('public/polyfill.js', `public/polyfill-${pkg.version}.js`);
     }
-    if (fs.existsSync('public/default.theme.css')) {
+    if (fs.existsSync('public/theme.css')) {
-      fs.copyFileSync('public/default.theme.css', `public/default-${pkg.version}.theme.css`);
+      fs.copyFileSync('public/theme.css', `public/theme-${pkg.version}.css`);
     }
     if (argv.options.production) {
       for (const f of ['echarts', 'graphviz', 'mermaid', 'mathjax']) {

packages/ui-default/index.ts

@@ -78,24 +78,11 @@ class MarkdownHandler extends Handler {
   }
 }
 
-class ResourceHandler extends Handler {
+class SWConfigHandler extends Handler {
   noCheckPermView = true;
 
-  async prepare() {
-    this.response.addHeader('Cache-Control', 'public, max-age=86400');
-  }
-}
-
-class LanguageHandler extends ResourceHandler {
-  async all({ lang }) {
-    if (!global.Hydro.locales[lang]) lang = SystemModel.get('server.language');
-    this.response.body = `window.LOCALES=${JSON.stringify(global.Hydro.locales[lang][Symbol.for('iterate')])};`;
-    this.response.type = 'application/javascript';
-  }
-}
-
-class SWConfigHandler extends ResourceHandler {
   async get() {
+    this.response.addHeader('Cache-Control', 'public, max-age=86400');
     this.response.body = {
       preload: SystemModel.get('ui-default.preload'),
       hosts: [
@@ -174,7 +161,6 @@ export function apply(ctx: Context) {
   ctx.Route('set_legacy', '/legacy', LegacyModeHandler);
   ctx.Route('markdown', '/markdown', MarkdownHandler);
   ctx.Route('config_schema', '/manage/config/schema.json', SystemConfigSchemaHandler, PRIV.PRIV_EDIT_SYSTEM);
-  ctx.Route('lang', '/l/:lang', LanguageHandler);
   ctx.Route('sw_config', '/sw-config', SWConfigHandler);
   ctx.Route('media', '/media', RichMediaHandler);
   ctx.plugin(require('./backendlib/builder'));

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

@@ -37,10 +37,10 @@
     {% endif %}
   </style>
   {% if process.env.DEV %}
-    <link rel="stylesheet" media="all" href="/default.theme.css">
+    <script src="/default.theme.js?version={{ global.Hydro.version['ui-default'] }}"></script>
+    <link rel="stylesheet" media="all" href="/theme.css?version={{ global.Hydro.version['ui-default'] }}">
   {% else %}
-    <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}default-{{ global.Hydro.version['ui-default'] }}.theme.css">
+    <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}theme-{{ global.Hydro.version['ui-default'] }}.css">
-    <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}hydro.css">
   {% endif %}
   {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
     <script>
@@ -64,11 +64,11 @@
       var UiContext = '{{ UiContext|json|jsesc|safe }}';
       var UserContext = '{{ UserContext|json|jsesc|safe }}';
     </script>
-    <script type="text/javascript" src="{{ UiContext.cdn_prefix }}l/{{ _('__id') }}"></script>
-    <script src="{{ UiContext.cdn_prefix }}default.theme.js?version={{ global.Hydro.version['ui-default'] }}"></script>
     {% 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>
     {% else %}
+      <script type="text/javascript" src="{{ UiContext.cdn_prefix }}resource/{{ global.Hydro.version['ui-default'] }}/lang-{{ _('__id') }}.js"></script>
       <script type="text/javascript" src="{{ UiContext.cdn_prefix }}hydro-{{ global.Hydro.version['ui-default'] }}.js"></script>
     {% endif %}
   {% endif %}