ui: use vite

packages/ui-default/components/highlighter/prismjs.js

@@ -13,14 +13,14 @@ import getLoader from 'prismjs/dependencies';
 import Notification from 'vj/components/notification/index';
 import { i18n } from 'vj/utils';
 import languageMeta from './meta';
+import langs from 'prismjs/components/index';
 
-const files = require.context('prismjs/components/', true, /prism-[a-z0-9-]+\.js/);
 const loadedLanguages = new Set();
 function loadLanguages() {
   const languages = Object.keys(components.languages).filter((l) => l !== 'meta');
   const loaded = [...loadedLanguages, ...Object.keys(Prism.languages)];
   getLoader(components, languages, loaded).load((lang) => {
-    files(`./prism-${lang}.js`);
+    langs[lang]?.();
     loadedLanguages.add(lang);
   });
 }

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

@@ -61,7 +61,7 @@ const onmessage = (msg) => {
 
 const initWorkerMode = (endpoint) => {
   console.log('Messages: using SharedWorker');
-  const worker = new SharedWorker('/messages-shared-worker.js', { name: 'HydroMessagesWorker' });
+  const worker = new SharedWorker(new URL('./worker.ts?worker', import.meta.url), { name: 'HydroMessagesWorker' });
   worker.port.start();
   window.addEventListener('beforeunload', () => {
     worker.port.postMessage({ type: 'unload' });

packages/ui-default/components/scratchpad/DataInputComponent.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export default function DataInputComponent(props) {
   const {

packages/ui-default/components/scratchpad/ToolbarComponent.jsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export default function ToolbarComponent(props) {
   const {

packages/ui-default/components/time/time.page.js

@@ -1,19 +1,21 @@
 import $ from 'jquery';
 import * as timeago from 'timeago.js';
+import en_US from 'timeago.js/lib/lang/en_US';
+import ko from 'timeago.js/lib/lang/ko';
+import zh_CN from 'timeago.js/lib/lang/zh_CN';
+import zh_TW from 'timeago.js/lib/lang/zh_TW';
 import { AutoloadPage } from 'vj/misc/Page';
 import { i18n } from 'vj/utils';
 
 try {
-  const locales = require.context('timeago.js/lib/lang', false, /\.js$/);
-  let locale;
-  try {
-    locale = locales(`./${i18n('timeago_locale')}.js`).default;
-  } catch (e) {
-    locale = locales('./en_US.js').default;
-  }
+  const locales = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    zh_CN, zh_TW, ko, en_US,
+  };
+  const locale = locales[i18n('timeago_locale')] || locales.en_US;
   timeago.register(i18n('timeago_locale'), locale);
 } catch (e) {
-  console.error(`Cannot register timeago locale: ${i18n('timeago_locale')}`);
+  console.error(`Cannot register timeago locale: ${i18n('timeago_locale')}`, e);
 }
 function runRelativeTime($container) {
   $container.find('span.time.relative[data-timestamp]').get().forEach((element) => {