Cache google fonts traversal (#176)

* wip

* revert

* extract as a class

* fix

* fix package.jsonm

package-lock.json

@@ -12,6 +12,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",
@@ -23,7 +24,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",
@@ -199,6 +200,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -1492,9 +1502,9 @@
       }
     },
     "node_modules/@figma/plugin-typings": {
-      "version": "1.93.0",
+      "version": "1.96.0",
-      "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.93.0.tgz",
+      "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.96.0.tgz",
-      "integrity": "sha512-R4iGdkHaoIeJENxz+VUmstOofataZ22Yi7urKS9mr6ZbMJ1TFPBDCrHbKXsJaevvizB9jLhCdNA1wtQci4Ynxg==",
+      "integrity": "sha512-fk/izqv13KHh8SKQF0d3475j7K9RaQ1EhPQT9E3iuRJnf492qYwj68hy1rO1CdZjm++l6Lk6ayhSowPLARq7Zw==",
       "dev": true
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -6065,12 +6075,11 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "5.1.1",
+      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "dev": true,
+      "engines": {
-      "dependencies": {
+        "node": "14 || >=16.14"
-        "yallist": "^3.0.2"
       }
     },
     "node_modules/map-obj": {

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,5 +1,6 @@
 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';
@@ -7,6 +8,8 @@ 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
   }
 }