refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.

4 files changed, 26 insertions, 20 deletions

diff --git a/subprojects/frontend/src/utils/ConditionVariable.ts b/subprojects/frontend/src/utils/ConditionVariable.ts
index 0910dfa6..c8fae9e8 100644
--- a/subprojects/frontend/src/utils/ConditionVariable.ts
+++ b/subprojects/frontend/src/utils/ConditionVariable.ts
@@ -1,11 +1,11 @@
-import { getLogger } from './logger';
-import { PendingTask } from './PendingTask';
+import PendingTask from './PendingTask';
+import getLogger from './getLogger';
 
 const log = getLogger('utils.ConditionVariable');
 
 export type Condition = () => boolean;
 
-export class ConditionVariable {
+export default class ConditionVariable {
   condition: Condition;
 
   defaultTimeout: number;
diff --git a/subprojects/frontend/src/utils/PendingTask.ts b/subprojects/frontend/src/utils/PendingTask.ts
index 51b79fb0..086993d4 100644
--- a/subprojects/frontend/src/utils/PendingTask.ts
+++ b/subprojects/frontend/src/utils/PendingTask.ts
@@ -1,8 +1,8 @@
-import { getLogger } from './logger';
+import getLogger from './getLogger';
 
 const log = getLogger('utils.PendingTask');
 
-export class PendingTask<T> {
+export default class PendingTask<T> {
   private readonly resolveCallback: (value: T) => void;
 
   private readonly rejectCallback: (reason?: unknown) => void;
diff --git a/subprojects/frontend/src/utils/Timer.ts b/subprojects/frontend/src/utils/Timer.ts
index 8f653070..14e9eb81 100644
--- a/subprojects/frontend/src/utils/Timer.ts
+++ b/subprojects/frontend/src/utils/Timer.ts
@@ -1,4 +1,4 @@
-export class Timer {
+export default class Timer {
   readonly callback: () => void;
 
   readonly defaultTimeout: number;
diff --git a/subprojects/frontend/src/utils/logger.ts b/subprojects/frontend/src/utils/getLogger.ts
index 306d122c..301fd76d 100644
--- a/subprojects/frontend/src/utils/logger.ts
+++ b/subprojects/frontend/src/utils/getLogger.ts
@@ -1,6 +1,6 @@
-import styles, { CSPair } from 'ansi-styles';
+import styles, { type CSPair } from 'ansi-styles';
 import log from 'loglevel';
-import * as prefix from 'loglevel-plugin-prefix';
+import prefix from 'loglevel-plugin-prefix';
 
 const colors: Partial<Record<string, CSPair>> = {
   TRACE: styles.magenta,
@@ -12,7 +12,7 @@ const colors: Partial<Record<string, CSPair>> = {
 
 prefix.reg(log);
 
-if (DEBUG) {
+if (import.meta.env.DEV) {
   log.setLevel(log.levels.DEBUG);
 } else {
   log.setLevel(log.levels.WARN);
@@ -22,10 +22,14 @@ if ('chrome' in window) {
   // Only Chromium supports console ANSI escape sequences.
   prefix.apply(log, {
     format(level, name, timestamp) {
-      const formattedTimestamp = `${styles.gray.open}[${timestamp.toString()}]${styles.gray.close}`;
+      const formattedTimestamp = `${styles.gray.open}[${timestamp.toString()}]${
+        styles.gray.close
+      }`;
       const levelColor = colors[level.toUpperCase()] || styles.red;
       const formattedLevel = `${levelColor.open}${level}${levelColor.close}`;
-      const formattedName = `${styles.green.open}(${name || 'root'})${styles.green.close}`;
+      const formattedName = `${styles.green.open}(${name || 'root'})${
+        styles.green.close
+      }`;
       return `${formattedTimestamp} ${formattedLevel} ${formattedName}`;
     },
   });
@@ -35,15 +39,17 @@ if ('chrome' in window) {
   });
 }
 
-const appLogger = log.getLogger(PACKAGE_NAME);
+const appLogger = log.getLogger(import.meta.env.VITE_PACKAGE_NAME);
 
-appLogger.info('Version:', PACKAGE_NAME, PACKAGE_VERSION);
-appLogger.info('Debug mode:', DEBUG);
+appLogger.info(
+  'Version:',
+  import.meta.env.VITE_PACKAGE_NAME,
+  import.meta.env.VITE_PACKAGE_VERSION,
+);
+appLogger.info('Debug mode:', import.meta.env.DEV);
 
-export function getLoggerFromRoot(name: string | symbol): log.Logger {
-  return log.getLogger(name);
-}
-
-export function getLogger(name: string | symbol): log.Logger {
-  return getLoggerFromRoot(`${PACKAGE_NAME}.${name.toString()}`);
+export default function getLogger(name: string | symbol): log.Logger {
+  return log.getLogger(
+    `${import.meta.env.VITE_PACKAGE_NAME}.${name.toString()}`,
+  );
 }