Hydro/packages/ui-default/index.ts

/* eslint-disable no-return-await */
/* eslint-disable camelcase */
import crypto from 'crypto';
import esbuild from 'esbuild';
import {
  ContestModel, Context, fs, Handler, Logger, ObjectID, PERM, PRIV, ProblemModel, Schema,
  SettingModel, SystemModel, SystemSettings, UiContextBase, UserModel,
} from 'hydrooj';
import { debounce } from 'lodash';
import { tmpdir } from 'os';
import { join, resolve } from 'path';
import convert from 'schemastery-jsonschema';
import markdown from './backendlib/markdown';

declare module 'hydrooj' {
  interface UI {
    esbuildPlugins?: esbuild.Plugin[]
  }
  interface SystemKeys {
    'ui-default.nav_logo_dark': string;
  }
  interface UiContextBase {
    nav_logo_dark?: string;
    constantVersion?: string;
  }
}

let constant = '';
let hash = '';
const logger = new Logger('ui');

export async function buildUI() {
  const start = Date.now();
  const entryPoints: string[] = [];
  for (const addon of global.addons) {
    const publicPath = resolve(addon, 'public');
    if (fs.existsSync(publicPath)) {
      const targets = fs.readdirSync(publicPath);
      for (const target of targets) {
        if (/\.page\.[jt]sx?$/.test(target)) entryPoints.push(join(publicPath, target));
      }
    }
  }
  const build = await esbuild.build({
    format: 'iife',
    entryPoints,
    bundle: true,
    outdir: tmpdir(),
    splitting: false,
    write: false,
    target: [
      'chrome60',
    ],
    plugins: [
      ...(global.Hydro.ui.esbuildPlugins || []),
      {
        name: 'federation',
        setup(b) {
          b.onResolve({ filter: /^@hydrooj\/ui-default/ }, () => ({
            path: 'api',
            namespace: 'ui-default',
          }));
          b.onLoad({ filter: /.*/, namespace: 'ui-default' }, () => ({
            contents: 'module.exports = window.HydroExports;',
            loader: 'tsx',
          }));
        },
      },
    ],
    minify: !process.env.DEV,
  });
  if (build.errors.length) console.error(build.errors);
  if (build.warnings.length) console.warn(build.warnings);
  const pages = build.outputFiles.map((i) => i.text);
  const payload = [`window.LANGS=${JSON.stringify(SettingModel.langs)};`, ...pages];

  const c = crypto.createHash('sha1');
  c.update(JSON.stringify(payload));
  const version = c.digest('hex');
  constant = JSON.stringify(payload);
  UiContextBase.constantVersion = hash = version;
  logger.success('UI addons built in %d ms', Date.now() - start);
}
function updateLogo() {
  UiContextBase.nav_logo_dark = SystemModel.get('ui-default.nav_logo_dark');
}

class WikiHelpHandler extends Handler {
  noCheckPermView = true;

  async get({ domainId }) {
    const LANGS = SettingModel.langs;
    const languages = {};
    for (const key in LANGS) {
      if (LANGS[key].domain && !LANGS[key].domain.includes(domainId)) continue;
      if (LANGS[key].hidden) continue;
      languages[`${LANGS[key].display}(${key})`] = LANGS[key].compile || LANGS[key].execute;
    }
    this.response.body = { languages };
    this.response.template = 'wiki_help.html';
  }
}

class WikiAboutHandler extends Handler {
  noCheckPermView = true;

  async get() {
    let raw = SystemModel.get('ui-default.about') || '';
    // TODO template engine
    raw = raw.replace(/{{ name }}/g, this.domain.ui?.name || SystemModel.get('server.name')).trim();
    const lines = raw.split('\n');
    const sections = [];
    for (const line of lines) {
      if (line.startsWith('# ')) {
        const id = line.split(' ')[1];
        sections.push({
          id,
          title: line.split(id)[1].trim(),
          content: '',
        });
      } else sections[sections.length - 1].content += `${line}\n`;
    }
    this.response.template = 'about.html';
    this.response.body = { sections };
  }
}

class SetThemeHandler extends Handler {
  noCheckPermView = true;

  async get({ theme }) {
    this.checkPriv(PRIV.PRIV_USER_PROFILE);
    await UserModel.setById(this.user._id, { theme });
    this.back();
  }
}

class MarkdownHandler extends Handler {
  noCheckPermView = true;

  async post({ text, html = false, inline = false }) {
    this.response.body = inline
      ? markdown.renderInline(text, html)
      : markdown.render(text, html);
    this.response.type = 'text/html';
    this.response.status = 200;
  }
}

class ResourceHandler extends Handler {
  noCheckPermView = true;

  async prepare() {
    this.response.addHeader('Cache-Control', 'public, max-age=86400');
  }
}

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({ 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.body = {
      preload: SystemModel.get('ui-default.preload'),
      hosts: [
        `http://${this.request.host}`,
        `https://${this.request.host}`,
        SystemModel.get('server.url'),
        SystemModel.get('server.cdn'),
      ],
    };
  }
}

class SystemConfigSchemaHandler extends Handler {
  async get() {
    const schema = convert(Schema.intersect(SystemSettings) as any, true);
    this.response.body = schema;
  }
}

class RichMediaHandler extends Handler {
  async renderUser(domainId, payload) {
    let d = payload.domainId || domainId;
    const cur = payload.domainId ? await UserModel.getById(payload.domainId, this.user._id) : this.user;
    if (!cur.hasPerm(PERM.PERM_VIEW)) d = domainId;
    const udoc = Number.isNaN(+payload.id) ? await UserModel.getByUname(d, payload.id) : await UserModel.getById(d, +payload.id);
    return await this.renderHTML('partials/user.html', { udoc });
  }

  async renderProblem(domainId, payload) {
    const cur = payload.domainId ? await UserModel.getById(payload.domainId, this.user._id) : this.user;
    let pdoc = cur.hasPerm(PERM.PERM_VIEW | PERM.PERM_VIEW_PROBLEM)
      ? await ProblemModel.get(payload.domainId || domainId, payload.id) || ProblemModel.default
      : ProblemModel.default;
    if (pdoc.hidden && !cur.own(pdoc) && !cur.hasPerm(PERM.PERM_VIEW_PROBLEM_HIDDEN)) pdoc = ProblemModel.default;
    return await this.renderHTML('partials/problem.html', { pdoc });
  }

  async renderContest(domainId, payload) {
    const cur = payload.domainId ? await UserModel.getById(payload.domainId, this.user._id) : this.user;
    const tdoc = cur.hasPerm(PERM.PERM_VIEW | PERM.PERM_VIEW_CONTEST)
      ? await ContestModel.get(payload.domainId || domainId, new ObjectID(payload.id))
      : null;
    if (tdoc) return await this.renderHTML('partials/contest.html', { tdoc });
    return '';
  }

  async renderHomework(domainId, payload) {
    const cur = payload.domainId ? await UserModel.getById(payload.domainId, this.user._id) : this.user;
    const tdoc = cur.hasPerm(PERM.PERM_VIEW | PERM.PERM_VIEW_HOMEWORK)
      ? await ContestModel.get(payload.domainId || domainId, new ObjectID(payload.id))
      : null;
    if (tdoc) return await this.renderHTML('partials/homework.html', { tdoc });
    return '';
  }

  async post({ domainId, items }) {
    const res = [];
    for (const item of items) {
      if (item.domainId && item.domainId === domainId) delete item.domainId;
      if (item.type === 'user') res.push(this.renderUser(domainId, item).catch(() => ''));
      else if (item.type === 'problem') res.push(this.renderProblem(domainId, item).catch(() => ''));
      else if (item.type === 'contest') res.push(this.renderContest(domainId, item).catch(() => ''));
      else if (item.type === 'homework') res.push(this.renderHomework(domainId, item).catch(() => ''));
      else res.push('');
    }
    this.response.body = await Promise.all(res);
  }
}

export function apply(ctx: Context) {
  if (process.env.HYDRO_CLI) return;
  ctx.Route('wiki_help', '/wiki/help', WikiHelpHandler);
  ctx.Route('wiki_about', '/wiki/about', WikiAboutHandler);
  ctx.Route('set_theme', '/set_theme/:theme', SetThemeHandler);
  ctx.Route('constant', '/constant/:version', UiConstantsHandler);
  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.on('app/started', buildUI);
  ctx.on('app/started', updateLogo);
  const debouncedBuildUI = debounce(buildUI, 1000);
  const triggerHotUpdate = (path?: string) => {
    if (path && !path.includes('/ui-default/') && !path.includes('/public/')) return;
    debouncedBuildUI();
    updateLogo();
  };
  ctx.on('system/setting', () => triggerHotUpdate());
  ctx.on('app/watch/change', triggerHotUpdate);
  ctx.on('app/watch/unlink', triggerHotUpdate);
  ctx.on('handler/after/DiscussionRaw', async (that) => {
    if (that.args.render && that.response.type === 'text/markdown') {
      that.response.type = 'text/html';
      that.response.body = await markdown.render(that.response.body);
    }
  });
}