Cache google fonts traversal

package.json

@@ -25,6 +25,7 @@
     "@create-figma-plugin/ui": "^3.2",
     "base64-js": "^1.5",
     "classnames": "^2.5",
+    "lru-cache": "^10.2",
     "preact": "^10.22",
     "react-hook-form": "^7.51",
     "romans": "^2.0",
@@ -36,7 +37,7 @@
     "@changesets/changelog-github": "^0.5",
     "@changesets/cli": "^2.27",
     "@figma/eslint-plugin-figma-plugins": "^0.15",
-    "@figma/plugin-typings": "^1.93",
+    "@figma/plugin-typings": "^1.96",
     "@trivago/prettier-plugin-sort-imports": "^4.3",
     "@types/svg-path-parser": "^1.1",
     "@typescript-eslint/eslint-plugin": "^7.8",

plugin-src/Cache.ts

@@ -0,0 +1,26 @@
+import { LRUCache } from 'lru-cache';
+
+const empty: unique symbol = Symbol('noValue');
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export class Cache<K extends {}, V extends {}> {
+  private cache: LRUCache<K, V | typeof empty>;
+
+  public constructor(options: LRUCache.Options<K, V | typeof empty, unknown>) {
+    this.cache = new LRUCache(options);
+  }
+
+  public get(key: K, calculate: () => V | undefined): V | undefined {
+    if (this.cache.has(key)) {
+      const cacheItem = this.cache.get(key);
+
+      return cacheItem === empty ? undefined : cacheItem;
+    }
+
+    const calculated = calculate();
+
+    this.cache.set(key, calculated ?? empty);
+
+    return calculated;
+  }
+}

plugin-src/translators/text/font/gfonts/translateGoogleFont.ts

@@ -1,12 +1,15 @@
 import slugify from 'slugify';
 
+import { Cache } from '@plugin/Cache';
 import { translateFontVariantId } from '@plugin/translators/text/font/gfonts';
 
 import { FontId } from '@ui/lib/types/shapes/textShape';
 
 import { items as gfonts } from './gfonts.json';
 import { GoogleFont } from './googleFont';
 
+const fontsCache = new Cache<string, GoogleFont>({ max: 30 });
+
 export const translateGoogleFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
   const googleFont = getGoogleFont(fontName);
 
@@ -23,5 +26,7 @@ export const isGoogleFont = (fontName: FontName): boolean => {
 };
 
 const getGoogleFont = (fontName: FontName): GoogleFont | undefined => {
-  return gfonts.find(font => font.family === fontName.family);
+  return fontsCache.get(fontName.family, () =>
+    gfonts.find(font => font.family === fontName.family)
+  );
 };

plugin-src/tsconfig.json

@@ -6,6 +6,7 @@
     "strict": true,
     "typeRoots": ["../node_modules/@figma"],
     "moduleResolution": "Node",
+    "skipLibCheck": true,
     "resolveJsonModule": true
   }
 }