From 4edb964a96adb2cca196209fc547905f6cb90740 Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Tue, 18 Jun 2024 14:02:13 +0200 Subject: [PATCH] Cache google fonts traversal (#176) * wip * revert * extract as a class * fix * fix package.jsonm --- package-lock.json | 29 ++++++++++++------- package.json | 3 +- plugin-src/Cache.ts | 26 +++++++++++++++++ .../text/font/gfonts/translateGoogleFont.ts | 7 ++++- plugin-src/tsconfig.json | 1 + 5 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 plugin-src/Cache.ts diff --git a/package-lock.json b/package-lock.json index 327af4a..b7d4c6a 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.93.0.tgz", - "integrity": "sha512-R4iGdkHaoIeJENxz+VUmstOofataZ22Yi7urKS9mr6ZbMJ1TFPBDCrHbKXsJaevvizB9jLhCdNA1wtQci4Ynxg==", + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.96.0.tgz", + "integrity": "sha512-fk/izqv13KHh8SKQF0d3475j7K9RaQ1EhPQT9E3iuRJnf492qYwj68hy1rO1CdZjm++l6Lk6ayhSowPLARq7Zw==", "dev": true }, "node_modules/@humanwhocodes/config-array": { @@ -6065,12 +6075,11 @@ } }, "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" + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz", + "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==", + "engines": { + "node": "14 || >=16.14" } }, "node_modules/map-obj": { diff --git a/package.json b/package.json index f7f2c93..d63859d 100644 --- a/package.json +++ b/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", diff --git a/plugin-src/Cache.ts b/plugin-src/Cache.ts new file mode 100644 index 0000000..c10c9b5 --- /dev/null +++ b/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 { + private cache: LRUCache; + + public constructor(options: LRUCache.Options) { + 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; + } +} diff --git a/plugin-src/translators/text/font/gfonts/translateGoogleFont.ts b/plugin-src/translators/text/font/gfonts/translateGoogleFont.ts index e0eccb7..641ce8b 100644 --- a/plugin-src/translators/text/font/gfonts/translateGoogleFont.ts +++ b/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({ 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) + ); }; diff --git a/plugin-src/tsconfig.json b/plugin-src/tsconfig.json index 776a1f6..53ad9ac 100644 --- a/plugin-src/tsconfig.json +++ b/plugin-src/tsconfig.json @@ -6,6 +6,7 @@ "strict": true, "typeRoots": ["../node_modules/@figma"], "moduleResolution": "Node", + "skipLibCheck": true, "resolveJsonModule": true } }