feat: colored logging

src/lib/logger.ts

@@ -0,0 +1,36 @@
+import { color, inspect } from "bun";
+
+const colors = [
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "brightRed",
+  "brightGreen",
+  "brightBlue",
+  "brightMagenta",
+  "orange",
+  "pink",
+  "turquoise",
+  "gold",
+];
+var i = 0;
+
+export function createLogger() {
+  const start = Date.now();
+  const col = color(colors[i], "ansi");
+  const reset = color("lightgray", "ansi");
+  i = (i + 1) % colors.length;
+  return function log(strings: TemplateStringsArray, ...values: unknown[]) {
+    const normalized = `${col}${Date.now() - start}ms - ${strings.reduce(
+      (out, str, i) =>
+        out +
+        str +
+        (typeof values[i] === "string" ? values[i] : inspect(values[i] ?? "")),
+      "",
+    )}${reset}\n`;
+    console.write(normalized);
+  };
+}

src/v1/card.tsx

@@ -25,6 +25,7 @@ import { WeaponGlazeSvg } from "@/assets/weapon-glaze";
 import type { App } from "@/index";
 import { AssetManager, getEnkaStores } from "@/lib/assets";
 import { Deduplicator } from "@/lib/dedupe";
+import { createLogger } from "@/lib/logger";
 import { mockData } from "@/lib/mock";
 import { buildDisplayRows } from "@/lib/rows";
 import { SubstatOrder } from "@/type/enka";
@@ -60,25 +61,20 @@ export function card(app: App) {
   return app
     .group("/card", (app) =>
       app
-        .state("start", Date.now())
+        .derive(() => ({
-        .derive(({ store }) => {
+          logger: createLogger(),
-          store.start = Date.now();
+        }))
-        })
         .head(
           "/genshin/:uid/:char/preload",
-          async ({ params: { uid }, store: { start } }) => {
+          async ({ params: { uid }, logger }) => {
-            console.log(`\nSTART - Preload ${uid}`);
+            logger`Preload ${uid}`;
             try {
               await Promise.all([
                 deduper.acquire("stores", () =>
-                  getEnkaStores().finally(() =>
+                  getEnkaStores().finally(() => logger`Stores loaded`),
-                    console.log(`${Date.now() - start}ms - Stores loaded`),
-                  ),
                 ),
                 deduper.acquire(`enka-${uid}`, () =>
-                  fetchEnka(uid, false).finally(() =>
+                  fetchEnka(uid, false).finally(() => logger`Enka data loaded`),
-                    console.log(`${Date.now() - start}ms - Enka data loaded`),
-                  ),
                 ),
               ]);
 
@@ -96,33 +92,28 @@ export function card(app: App) {
               tags: ["Card"],
               description: "Preload data required to render a card.",
             },
-            afterResponse: ({ store: { start } }) =>
+            afterResponse: ({ logger }) => logger`Data preload complete`,
-              console.log(`${Date.now() - start}ms - Data preload complete`),
           },
         )
         .get(
           "/genshin/:uid/:char",
           async ({
             params: { uid, char: charId },
-            store: { start },
+            logger,
             query: { debug, h: height = 1024 },
           }) => {
-            console.log(`\nSTART - Rendering ${uid}/${charId}`);
+            logger`Rendering ${uid}/${charId}`;
             try {
               // #region Data fetching
               const [[avatarStore, weaponStore, relicStore, locs], data] =
                 await Promise.all([
                   deduper.acquire("stores", () =>
-                    getEnkaStores().finally(() =>
+                    getEnkaStores().finally(() => logger`Stores loaded`),
-                      console.log(`${Date.now() - start}ms - Stores loaded`),
-                    ),
                   ),
                   feature("API") || uid !== "775956514"
                     ? deduper.acquire(`enka-${uid}`, () =>
-                        fetchEnka(uid, false).finally(() =>
+                        fetchEnka(uid, false).finally(
-                          console.log(
+                          () => logger`Enka data loaded`,
-                            `${Date.now() - start}ms - Enka data loaded`,
-                          ),
                         ),
                       )
                     : mockData,
@@ -273,14 +264,10 @@ export function card(app: App) {
                 src: string;
                 data: ArrayBuffer | Buffer;
               }>[]);
-              console.log(
+              logger`Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`;
-                `${Date.now() - start}ms - Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`,
-              );
 
               if (debug) {
-                console.log(
+                logger`Debug endpoint, returning JSON`;
-                  `${Date.now() - start}ms - Debug endpoint, returning JSON`,
-                );
                 return JSON.stringify(
                   {
                     charLvl,
@@ -740,8 +727,7 @@ export function card(app: App) {
               description:
                 "Generate a Genshin Impact enka.network card image from a UID.",
             },
-            afterResponse: ({ store: { start } }) =>
+            afterResponse: ({ logger }) => logger`Rendering completed`,
-              console.log(`${Date.now() - start}ms - Rendering completed`),
           },
         ),
     )