feat: use native cache api

Author: JacobLinCool

src/cloudflare-worker/cache.ts

@@ -1,6 +1,5 @@
 import { Router } from "itty-router";
 import { Config, Generator } from "../core";
-import { Cache } from "./cache";
 import demo from "./demo";
 import Header from "./headers";
 import { sanitize } from "./sanitize";
@@ -25,17 +24,16 @@ async function generate(config: Record<string, string>, req: Request): Promise<R
     }
     console.log("sanitized config", JSON.stringify(sanitized, null, 4));
 
-    const cache_time = parseInt(config.cache || "60") ?? 60;
-    const cache_header =
-        `max-age=${cache_time}` + (cache_time <= 0 ? ", no-store, no-cache" : ", public");
+    const cache_time = parseInt(config.cache || "300") ?? 300;
+    const cache = await caches.open("leetcode");
 
-    const generator = new Generator(new Cache(cache_time), {
+    const generator = new Generator(cache, {
         "user-agent": req.headers.get("user-agent") || "Unknown",
     });
     generator.verbose = true;
 
     const headers = new Header().add("cors", "svg");
-    headers.set("cache-control", cache_header);
+    headers.set("cache-control", `public, max-age=${cache_time}`);
 
     return new Response(await generator.generate(sanitized), { headers });
 }
@@ -57,18 +55,6 @@ router.get("*", async (req: { query: Record<string, string> }) => {
     return await generate(req.query, req as unknown as Request);
 });
 
-router.delete("/:site/:username", async ({ params }) => {
-    if (params?.site && params?.username) {
-        const site = params.site.toLowerCase();
-        const username = params.username.toLowerCase();
-        const cache = new Cache(60);
-        return new Response(
-            JSON.stringify({ success: await cache.delete(`data-${username}-${site}`) }, null, 4),
-            { headers: new Header().add("cors", "json") },
-        );
-    }
-});
-
 // 404 for all other routes
 router.all("*", () => new Response("Not Found.", { status: 404 }));
 

src/cloudflare-worker/handler.ts

@@ -1,7 +1,7 @@
 import { Icon, Ranking, Root, Solved, TotalSolved, Username } from "./elements";
 import { Item } from "./item";
 import query from "./query";
-import { Cache, Config, Extension, FetchedData } from "./types";
+import { Config, Extension, FetchedData } from "./types";
 
 export class Generator {
     public verbose = false;
@@ -13,11 +13,11 @@ export class Generator {
         css: [],
         extensions: [],
     };
-    public cache: Cache;
+    public cache?: Cache;
     public headers: Record<string, string>;
-    public count = 0;
+    public fetches: Record<string, Promise<FetchedData>> = {};
 
-    constructor(cache: Cache, headers?: Record<string, string>) {
+    constructor(cache?: Cache, headers?: Record<string, string>) {
         this.cache = cache;
         this.headers = headers ?? {};
     }
@@ -38,7 +38,7 @@ export class Generator {
         const data = (async () => {
             const start = Date.now();
             const data = await this.fetch(config.username, config.site, this.headers);
-            this.log(`user data fetched in ${Date.now() - start} ms`, data);
+            this.log(`user data fetched in ${Date.now() - start} ms`, data.profile);
             return data;
         })();
         const body = this.body();
@@ -54,26 +54,56 @@ export class Generator {
         headers: Record<string, string>,
     ): Promise<FetchedData> {
         this.log("fetching", username, site);
-        const cache_key = `data-${username.toLowerCase()}-${site}`;
+        const cache_key = `https://leetcode-stats-card.local/data-${username.toLowerCase()}-${site}`;
         console.log("cache_key", cache_key);
 
-        await new Promise((resolve) => setTimeout(resolve, 200 * (this.count++ % 5)));
-        const cached: FetchedData | null = await this.cache.get(cache_key);
+        if (cache_key in this.fetches) {
+            return this.fetches[cache_key];
+        }
+        this.fetches[cache_key] = this._fetch(username, site, headers, cache_key);
+        this.fetches[cache_key].finally(() => {
+            delete this.fetches[cache_key];
+        });
+        return this.fetches[cache_key];
+    }
+
+    protected async _fetch(
+        username: string,
+        site: "us" | "cn",
+        headers: Record<string, string>,
+        cache_key: string,
+    ): Promise<FetchedData> {
+        this.log("fetching", username, site);
+        const cached = await this.cache?.match(cache_key);
         if (cached) {
             this.log("fetch cache hit");
-            return cached;
+            return cached.json();
         } else {
             this.log("fetch cache miss");
         }
 
         try {
             if (site === "us") {
                 const data = await query.us(username, headers);
-                this.cache.put(cache_key, data).catch(console.error);
+                await this.cache
+                    ?.put(
+                        cache_key,
+                        new Response(JSON.stringify(data), {
+                            headers: { "cache-control": "max-age=300" },
+                        }),
+                    )
+                    .catch(console.error);
                 return data;
             } else {
                 const data = await query.cn(username, headers);
-                this.cache.put(cache_key, data).catch(console.error);
+                await this.cache
+                    ?.put(
+                        cache_key,
+                        new Response(JSON.stringify(data), {
+                            headers: { "cache-control": "max-age=300" },
+                        }),
+                    )
+                    .catch(console.error);
                 return data;
             }
         } catch (err) {

src/core/cache.ts

@@ -1,4 +1,3 @@
-import { MemoryCache } from "./cache";
 import { Generator } from "./card";
 import { ActivityExtension } from "./exts/activity";
 import { AnimationExtension } from "./exts/animation";
@@ -9,18 +8,13 @@ import { RemoteStyleExtension } from "./exts/remote-style";
 import { ThemeExtension } from "./exts/theme";
 import { Config } from "./types";
 
-/**
- * The default in-memory cache instance.
- */
-export const cache = new MemoryCache();
-
 /**
  * Generate a card.
  * @param config The configuration of the card
  * @returns The card (svg)
  */
 export async function generate(config: Partial<Config>): Promise<string> {
-    const generator = new Generator(cache);
+    const generator = new Generator();
     return await generator.generate({
         username: "jacoblincool",
         site: "us",
@@ -44,7 +38,6 @@ export {
     FontExtension,
     Generator,
     HeatmapExtension,
-    MemoryCache,
     RemoteStyleExtension,
     ThemeExtension,
 };

src/core/card.ts

@@ -1,11 +1,5 @@
 import { Generator } from "./card";
 
-export interface Cache {
-    put: (key: string, value: unknown, options?: Record<string, unknown>) => Promise<void>;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    get: (key: string) => Promise<any | null>;
-}
-
 export interface Config {
     username: string;
     site: "us" | "cn";