refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.

1 files changed, 55 insertions, 0 deletions

diff --git a/subprojects/frontend/src/utils/getLogger.ts b/subprojects/frontend/src/utils/getLogger.ts
new file mode 100644
index 00000000..301fd76d
--- /dev/null
+++ b/subprojects/frontend/src/utils/getLogger.ts
@@ -0,0 +1,55 @@
+import styles, { type CSPair } from 'ansi-styles';
+import log from 'loglevel';
+import prefix from 'loglevel-plugin-prefix';
+
+const colors: Partial<Record<string, CSPair>> = {
+  TRACE: styles.magenta,
+  DEBUG: styles.cyan,
+  INFO: styles.blue,
+  WARN: styles.yellow,
+  ERROR: styles.red,
+};
+
+prefix.reg(log);
+
+if (import.meta.env.DEV) {
+  log.setLevel(log.levels.DEBUG);
+} else {
+  log.setLevel(log.levels.WARN);
+}
+
+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 levelColor = colors[level.toUpperCase()] || styles.red;
+      const formattedLevel = `${levelColor.open}${level}${levelColor.close}`;
+      const formattedName = `${styles.green.open}(${name || 'root'})${
+        styles.green.close
+      }`;
+      return `${formattedTimestamp} ${formattedLevel} ${formattedName}`;
+    },
+  });
+} else {
+  prefix.apply(log, {
+    template: '[%t] %l (%n)',
+  });
+}
+
+const appLogger = log.getLogger(import.meta.env.VITE_PACKAGE_NAME);
+
+appLogger.info(
+  'Version:',
+  import.meta.env.VITE_PACKAGE_NAME,
+  import.meta.env.VITE_PACKAGE_VERSION,
+);
+appLogger.info('Debug mode:', import.meta.env.DEV);
+
+export default function getLogger(name: string | symbol): log.Logger {
+  return log.getLogger(
+    `${import.meta.env.VITE_PACKAGE_NAME}.${name.toString()}`,
+  );
+}