ui: use vite

packages/ui-default/common/common.inc.styl

@@ -1,10 +1,278 @@
-// This file is imported in all stylus source code
+
+base-font-size ?= 16px
+rasterise-media-queries ?= false
+
+rupture = {
+  rasterise-media-queries: rasterise-media-queries
+  mobile-cutoff: 400px
+  desktop-cutoff: 1050px
+  hd-cutoff: 1800px
+  enable-em-breakpoints: false
+  base-font-size: base-font-size
+  anti-overlap: false
+  density-queries: 'dppx' 'webkit' 'moz' 'dpi'
+  retina-density: 1.5
+  use-device-width: false
+}
+rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff) (rupture.hd-cutoff)
+rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd'
+
+-is-string(val)
+  if typeof(val) is not 'unit'
+    if val is a 'string' or val is a 'ident'
+      true
+    else
+      false
+  else
+    false
+
+-get-scale-number(scale-name)
+  for list-item, i in rupture.scale-names
+    if list-item is scale-name
+      return i + 1
+  return false
+
+-convert-to(to-unit, value, context = rupture.base-font-size)
+  from-unit = unit(value)
+  return value if to-unit is from-unit
+  if to-unit in ('em' 'rem')
+    return value if from-unit in ('em' 'rem')
+    return unit((value / context), to-unit)
+  if to-unit is 'px'
+    return unit((value * context), 'px')
+
+-on-scale(n)
+  return unit(n) is ''
+
+-larger-than-scale(n)
+  return (n > (length(rupture.scale) - 1)) and -on-scale(n)
+
+-is-zero(n)
+  return n is 0
+
+-overlap-shift(anti-overlap, n)
+  shift-unit = unit(n)
+  anti-overlap = 0px unless anti-overlap
+  anti-overlap = 1px if anti-overlap is true
+  if length(anti-overlap) is 1
+    return -convert-to(shift-unit, anti-overlap)
+  for val in anti-overlap
+    return val if unit(val) is shift-unit
+
+-adjust-overlap(anti-overlap, n, side = 'min')
+  -shift = -overlap-shift(anti-overlap, n)
+  if (side is 'min' and -shift > 0) or (side is 'max' and -shift < 0)
+    n = n + -shift
+  return n
+
+-is-positive(n)
+  return n >= 0
+
+-density-queries(density)
+  if typeof(density) is not 'unit'
+    if not -is-string(density)
+      density = '%s' % density
+  density = rupture.retina-density if density is 'retina'
+  queries = ()
+  for query in rupture.density-queries
+    if query is 'webkit'
+      push(queries, '(-webkit-min-device-pixel-ratio: %s)' % (density))
+    else if query is 'moz'
+      push(queries, '(min--moz-device-pixel-ratio: %s)' % (density))
+    else if query is 'o'
+      push(queries, '(-o-min-device-pixel-ratio: %s/1)' % (density))
+    else if query is 'ratio'
+      push(queries, '(min-device-pixel-ratio: %s)' % (density))
+    else if query is 'dpi'
+      if -is-string(density)
+        density=convert(density)
+      push(queries, '(min-resolution: %sdpi)' % (round(density * 96, 1)))
+    else if query is 'dppx'
+      push(queries, '(min-resolution: %sdppx)' % (density))
+  return queries
+
+create-fallback-class(selected, class)
+  /{'' + class + ' ' + selected}
+    {block}
+
+// +between(min, max)
+// usage (scale can be mixed with custom values):
+//   - +between(1, 3) scale:scale
+//   - +between(0, 3) 0 width:scale
+//   - +between(200px, 500px) custom:custom
+//   - +between(0, 300px) 0 width:custom
+//   - +between(1, 300px) scale:custom
+//   - +between(200px, 4) custom:scale
+
+between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  selected = selector()
+
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  if -is-string(min)
+    min = -get-scale-number(min)
+  if -is-string(max)
+    max = -get-scale-number(max)
+
+  -min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min))
+  -max = rupture.scale[max] unless not -on-scale(max)
+  -min ?= min
+  -max ?= max
+
+  if (rupture.rasterise-media-queries)
+    if not (density or -max or orientation)
+      {block}
+  else
+    condition = 'only screen'
+    use-device-width = use-device-width ? 'device-' : ''
+    unless -min is 0
+      -min = -convert-to('em', -min) if rupture.enable-em-breakpoints
+      -min = -adjust-overlap(anti-overlap, -min, side: 'min')
+      condition = condition + ' and (min-' + use-device-width + 'width: %s)' % (-min)
+    unless -larger-than-scale(max)
+      -max = -convert-to('em', -max) if rupture.enable-em-breakpoints
+      -max = -adjust-overlap(anti-overlap, -max, side: 'max')
+      condition = condition + ' and (max-' + use-device-width + 'width: %s)' % (-max)
+    if orientation
+      condition = condition + ' and (orientation: %s)' % (orientation)
+    if density
+      conditions = ()
+      for query in -density-queries(density)
+        push(conditions, condition + ' and %s' % (query))
+      condition = join(', ', conditions)
+    @media condition
+      {block}
+  if fallback-class
+    +create-fallback-class(selected, fallback-class)
+      {block}
+
+at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+above = from-width
+
+to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+below = to-width
+
+mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+    {block}
+
+density(density, orientation = null, fallback-class = null)
+  selected = selector()
+  if not (rupture.rasterise-media-queries)
+    conditions = ()
+    for query in -density-queries(density)
+      condition = 'only screen and %s' % (query)
+      if orientation
+        condition = condition + ' and (orientation: %s)' % (orientation)
+      push(conditions, condition)
+    condition = join(', ', conditions)
+    @media condition
+      {block}
+    if fallback-class
+      +create-fallback-class(selected, fallback-class)
+        {block}
+
+pixel-ratio = density
+
+retina(orientation = null, fallback-class = null)
+  +density('retina', orientation, fallback-class)
+    {block}
+
+landscape(density = null, fallback-class = null)
+  selected = selector()
+  if not (rupture.rasterise-media-queries)
+    if -is-string(density)
+      density = convert(density)
+    if density
+      +pixel-ratio(density, orientation: landscape, fallback-class)
+        {block}
+    else
+      @media only screen and (orientation: landscape)
+        {block}
+      if fallback-class
+        +create-fallback-class(selected, fallback-class)
+          {block}
+
+portrait(density = null, fallback-class = null)
+  selected = selector()
+  if not (rupture.rasterise-media-queries)
+    if -is-string(density)
+      density = convert(density)
+    if density
+      +pixel-ratio(density, orientation: portrait, fallback-class)
+        {block}
+    else
+      @media only screen and (orientation: portrait)
+        {block}
+      if fallback-class
+        +create-fallback-class(selected, fallback-class)
+          {block}
+
+rupture-hover(density = null, orientation = null, fallback-class = null)
+  condition = "only screen and (hover: hover)";
+  @media ({condition})
+    {block}
+
+hover = rupture-hover
+
 breakpoints = json('../breakpoints.json', { hash: true })
 rupture.mobile-cutoff = unit(breakpoints.mobile, 'px')
 rupture.desktop-cutoff = unit(breakpoints.desktop, 'px')
 rupture.hd-cutoff = unit(breakpoints.hd, 'px')
 
-@import '~vj/misc/.iconfont/webicon.inc.styl'
+@import '../misc/.iconfont/webicon.inc.styl'
 @import 'color.inc.styl'
 @import 'variables.inc.styl'
 @import 'easing.inc.styl'

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 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) => {

packages/ui-default/entry.js → packages/ui-default/entry.jsx

@@ -7,6 +7,7 @@ window.Hydro = {
   node_modules: {},
   version: process.env.VERSION,
 };
+window.jQuery = $; // sticky-kit require this
 window.externalModules = {};
 window.lazyModuleResolver = {};
 
@@ -30,7 +31,11 @@ window.UserContext = JSON.parse(window.UserContext);
 try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 if ('serviceWorker' in navigator) {
   const encodedConfig = encodeURIComponent(JSON.stringify(UiContext.SWConfig));
-  navigator.serviceWorker.register(`/service-worker.js?config=${encodedConfig}`).then((registration) => {
+  const dev = process.env.NODE_ENV === 'development';
+  navigator.serviceWorker.register(
+    dev ? '/dev-sw.js?dev-sw' : `/sw.js?config=${encodedConfig}`,
+    { scope: '/', type: dev ? 'module' : 'classic' },
+  ).then((registration) => {
     console.log('SW registered: ', registration);
   }).catch((registrationError) => {
     console.log('SW registration failed: ', registrationError);

packages/ui-default/hydro.ts

@@ -82,6 +82,7 @@ export async function initPageLoader() {
       Notification.warn(`Failed to call '${type}Loading' of ${page.name}`);
       console.error(`Failed to call '${type}Loading' of ${page.name}\n${e.stack}`);
       console.error(e);
+      console.info(func.toString());
     }
     if (process.env.NODE_ENV !== 'production') {
       console.time(`${page.name}: ${type}Loading`);

packages/ui-default/misc/PageLoader.js

@@ -1,12 +1,10 @@
+import pages from '../__glob_page';
 import { Page } from './Page';
 
 export default class PageLoader {
   constructor() {
-    const pages = require.context('../pages/', true, /\.page\.[jt]sx?$/i);
-    const components = require.context('../components/', true, /\.page\.[jt]sx?$/i);
     this.pageInstances = [
-      ...pages.keys().map((key) => pages(key)),
-      ...components.keys().map((key) => components(key)),
+      ...pages,
       ...window.Hydro.extraPages,
     ].map((page) => {
       page = page?.default || page;