ui: fix build errors

build/prepare.js

@@ -40,10 +40,13 @@ const configFlat = (name) => (name === 'packages/ui-default' ? {
     exclude: [
         './public',
     ],
+    include: ['**/*.ts'],
     compilerOptions: {
+        experimentalDecorators: true,
         resolveJsonModule: true,
         jsx: 'react',
-        module: 'es2020',
+        module: 'commonjs',
+        skipLibCheck: true,
         allowSyntheticDefaultImports: true,
         target: 'es2020',
         baseUrl: '.',

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

@@ -12,7 +12,7 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import WebpackBar from 'webpackbar';
 import root from '../utils/root';
 
-export default function (env: { production?: boolean, measure?: boolean } = {}) {
+export default function (env: { watch?: boolean, production?: boolean, measure?: boolean } = {}) {
   function esbuildLoader() {
     return {
       loader: 'esbuild-loader',

packages/ui-default/components/editor/index.ts

@@ -29,6 +29,7 @@ export const config = {
     theme: {
       // eslint-disable-next-line no-template-curly-in-string
       path: `${UiContext.cdn_prefix}vditor/dist/css/content-theme`,
+      current: 'light',
     },
   },
 };

packages/ui-default/components/message/index.page.ts

@@ -44,6 +44,7 @@ const endpoint = url.toString().replace('http', 'ws');
 
 const initWorkerMode = () => {
   console.log('Messages: using SharedWorker');
+  // @ts-ignore
   const worker = new SharedWorker(new URL('./worker?inline', import.meta.url), { name: 'HydroMessagesWorker' });
   worker.port.start();
   window.addEventListener('beforeunload', () => {

packages/ui-default/components/problemconfig/ProblemConfigForm.tsx

@@ -83,9 +83,9 @@ function ExtraFilesConfig() {
 
 function LangConfig() {
   const langs = useSelector((state: RootState) => state.config.langs) || [];
-  const prefixes = new Set(Object.keys(LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+  const prefixes = new Set(Object.keys(window.LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
-  const data = Object.keys(LANGS).filter((i) => !prefixes.has(i))
+  const data = Object.keys(window.LANGS).filter((i) => !prefixes.has(i))
-    .map((i) => ({ name: LANGS[i].display, _id: i }));
+    .map((i) => ({ name: window.LANGS[i].display, _id: i }));
   const dispatch = useDispatch();
   const ref = React.useRef<any>();
   const selectedKeys = langs.filter((i) => !prefixes.has(i));

packages/ui-default/components/problemconfig/SubtaskTable.tsx

@@ -1,6 +1,6 @@
 import { Card, NumericInput, Tag } from '@blueprintjs/core';
 import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
-import { SubtaskConfig } from 'hydrooj/src/interface';
+import type { SubtaskConfig } from 'hydrooj/src/interface';
 import { isEqual, pick } from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';

packages/ui-default/handler.ts

@@ -22,9 +22,9 @@ declare module 'hydrooj' {
     'ui-default.nav_logo_dark_2x': string;
   }
   interface UiContextBase {
-    nav_logo_dark: string;
+    nav_logo_dark?: string;
-    nav_logo_dark_2x: string;
+    nav_logo_dark_2x?: string;
-    constantVersion: string;
+    constantVersion?: string;
   }
 }
 

packages/ui-default/package.json

@@ -33,6 +33,7 @@
     "@types/redux-logger": "^3.0.9",
     "@types/serviceworker": "^0.0.51",
     "@types/sharedworker": "^0.0.80",
+    "@types/webpack-env": "^1.18.0",
     "@vscode/codicons": "^0.0.32",
     "autoprefixer": "^10.4.8",
     "browser-update": "^3.3.40",

packages/ui-default/pages/problem_config.page.tsx

@@ -1,5 +1,5 @@
 import { normalizeSubtasks, readSubtasksFromFiles, size } from '@hydrooj/utils/lib/common';
-import { SubtaskType } from 'hydrooj/src/interface';
+import type { SubtaskType } from 'hydrooj/src/interface';
 import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';

packages/ui-default/sw.ts

@@ -4,7 +4,7 @@ const target = [
   'https://us.hydro.ac',
 ];
 
-this.addEventListener('install', () => {
+(this as any).addEventListener('install', () => {
   console.log('Service Worker installing');
 });
 async function get(url) {
@@ -23,7 +23,7 @@ async function get(url) {
   }
   return response;
 }
-this.addEventListener('fetch', (event) => {
+(this as any).addEventListener('fetch', (event) => {
   // eslint-disable-next-line no-restricted-globals
   if (new URL(event.request.url).origin !== location.origin) return;
   event.respondWith(get(event.request.url));

packages/ui-default/utils/availableLangs.ts

@@ -1,12 +1,12 @@
-const prefixes = new Set(Object.keys(LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+const prefixes = new Set(Object.keys(window.LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
 
 export default function getAvailableLangs(langsList?: string[]) {
   const Langs = {};
-  for (const key in LANGS) {
+  for (const key in window.LANGS) {
     if (prefixes.has(key)) continue;
     if (langsList && langsList.length && langsList.join('') && !langsList.includes(key)) continue;
-    else if (LANGS[key].hidden && !langsList?.includes(key)) continue;
+    else if (window.LANGS[key].hidden && !langsList?.includes(key)) continue;
-    Langs[key] = LANGS[key];
+    Langs[key] = window.LANGS[key];
   }
   return Langs;
 }