feat: measure time used by each extension

Author: JacobLinCool

package.json

@@ -16,8 +16,8 @@
         "test": "jest --config jestconfig.json --coverage",
         "prepare": "npm run build",
         "dev": "wrangler dev",
-        "build:worker": "esbuild src/cloudflare-worker/index.ts --outfile=dist/worker.js --bundle --minify --format=esm --loader:.html=text --external:events",
-        "build:package": "esbuild src/core/index.ts --outfile=lib/index.js --bundle --format=esm --external:events",
+        "build:worker": "esbuild src/cloudflare-worker/index.ts --outfile=dist/worker.js --bundle --minify --format=esm --loader:.html=text --external:events --keep-names",
+        "build:package": "esbuild src/core/index.ts --outfile=lib/index.js --bundle --format=esm --external:events --keep-names",
         "build": "npm run build:worker && npm run build:package",
         "format": "prettier --write '**/*.{js,ts,jsx,tsx,json,yml,yaml,md,html}' '!dist' '!coverage'",
         "lint": "eslint .",

src/core/card.ts

@@ -25,12 +25,23 @@ export class Generator {
 
         this.config = config;
 
-        const extensions = this.config.extensions.map((init) => init(this)) ?? [];
-        const data = this.fetch(config.username, config.site);
+        const extensions =
+            this.config.extensions.map(async (init) => {
+                const start = Date.now();
+                const ext = await init(this);
+                this.log(`extension "${ext.name}" initialized in ${Date.now() - start} ms`);
+                return ext;
+            }) ?? [];
+        const data = (async () => {
+            const start = Date.now();
+            const data = await this.fetch(config.username, config.site);
+            this.log(`user data fetched in ${Date.now() - start} ms`);
+            return data;
+        })();
         const body = this.body();
 
         const result = await this.hydrate(await data, body, await Promise.all(extensions));
-        this.log(`card generated in ${Date.now() - start_time}ms`);
+        this.log(`card generated in ${Date.now() - start_time} ms`);
         return result;
     }
 
@@ -116,9 +127,11 @@ export class Generator {
 
         for (const extension of extensions) {
             try {
+                const start = Date.now();
                 await extension(this, data, body, ext_styles);
+                this.log(`extension "${extension.name}" hydrated in ${Date.now() - start} ms`);
             } catch (err) {
-                this.log("Extension Failed", err);
+                this.log(`extension "${extension.name}" failed`, err);
             }
         }
 

src/core/exts/activity.ts

@@ -38,7 +38,7 @@ const langs: Record<string, string> = {
 };
 
 export function ActivityExtension(generator: Generator): Extension {
-    return async (generator, data, body, styles) => {
+    return async function Activity(generator, data, body, styles) {
         if (generator.config.height < 400) {
             generator.config.height = 400;
         }

src/core/exts/animation.ts

@@ -26,7 +26,7 @@ const order: typeof selectors[number][] = [
 ];
 
 export function AnimationExtension(generator: Generator): Extension {
-    return async (generator, data, body, styles) => {
+    return async function Animation(generator, data, body, styles) {
         if (generator.config.animation === false) {
             return;
         }

src/core/exts/font.ts

@@ -38,7 +38,7 @@ export async function FontExtension(generator: Generator): Promise<Extension> {
                     if (res.ok) {
                         const data = await res.json<{ name: string; base64: string }>();
                         supported[name.toLowerCase()] = { name, base64: data.base64 };
-                        generator.log(`Loaded remote font ${name}`);
+                        generator.log(`loaded remote font "${name}"`);
                         generator.cache.put(url, data);
                     } else {
                         return;
@@ -48,7 +48,7 @@ export async function FontExtension(generator: Generator): Promise<Extension> {
         }),
     );
 
-    return async (generator, data, body, styles) => {
+    return async function Font(generator, data, body, styles) {
         if (Array.isArray(config.fonts)) {
             const list = config.fonts.map((font: string) => {
                 if (supported[font.toLowerCase()]) {

src/core/exts/remote-style.ts

@@ -27,7 +27,7 @@ export function RemoteStyleExtension(generator: Generator): Extension {
         );
     }
 
-    return async (generator, data, body, styles) => {
+    return async function RemoteStyle(generator, data, body, styles) {
         for (const css of externals) {
             styles.push(await css);
         }

src/core/exts/theme.ts

@@ -18,7 +18,7 @@ export const supported: Record<string, Theme> = {
 };
 
 export function ThemeExtension(generator: Generator): Extension {
-    return async (generator, data, body, styles) => {
+    return async function Theme(generator, data, body, styles) {
         if (!generator.config?.theme) {
             return;
         }

wrangler.toml

@@ -4,6 +4,7 @@ account_id = "b1c3d1b89f9131a84a0f1f6a973232f1"
 workers_dev = true
 compatibility_date = "2022-05-26"
 kv_namespaces = []
+node_compat = true
 
 [build]
 command = "npm run -s build:worker"