Add image library to optimize performance

.changeset/tasty-geckos-eat.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Optimize image exporting when there are multiple copies of the same image in the file

plugin-src/ImageLibrary.ts

@@ -0,0 +1,23 @@
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
+
+class ImageLibrary {
+  private images: Record<string, ImageColor> = {};
+
+  public register(hash: string, image: ImageColor) {
+    this.images[hash] = image;
+  }
+
+  public get(hash: string): ImageColor | undefined {
+    return this.images[hash];
+  }
+
+  public all(): Record<string, ImageColor> {
+    return this.images;
+  }
+
+  public init(images: Record<string, ImageColor>): void {
+    this.images = images;
+  }
+}
+
+export const imagesLibrary = new ImageLibrary();

plugin-src/transformers/transformDocumentNode.ts

@@ -1,4 +1,5 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
+import { imagesLibrary } from '@plugin/ImageLibrary';
 
 import { PenpotDocument } from '@ui/types';
 
@@ -27,6 +28,7 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
   return {
     name: node.name,
     children,
-    components: componentsLibrary.all()
+    components: componentsLibrary.all(),
+    images: imagesLibrary.all()
   };
 };

plugin-src/translators/fills/translateImageFill.ts

@@ -1,3 +1,4 @@
+import { imagesLibrary } from '@plugin/ImageLibrary';
 import { detectMimeType } from '@plugin/utils';
 
 import { Fill } from '@ui/lib/types/utils/fill';
@@ -9,28 +10,46 @@ export const translateImageFill = async (fill: ImagePaint): Promise<Fill | undef
 
   return {
     fillOpacity: !fill.visible ? 0 : fill.opacity,
-    fillImage: fillImage
+    fillImage
   };
 };
 
 const translateImage = async (imageHash: string | null): Promise<ImageColor | undefined> => {
   if (!imageHash) return;
 
+  const imageColor = imagesLibrary.get(imageHash) ?? (await generateAndRegister(imageHash));
+
+  if (!imageColor) return;
+
+  const { dataUri, ...rest } = imageColor;
+
+  return {
+    ...rest,
+    imageHash
+  };
+};
+
+const generateAndRegister = async (imageHash: string) => {
   const image = figma.getImageByHash(imageHash);
+
   if (!image) return;
 
   const bytes = await image.getBytesAsync();
-  const size = await image.getSizeAsync();
+  const { width, height } = await image.getSizeAsync();
   const b64 = figma.base64Encode(bytes);
-  const mimeType = detectMimeType(b64);
-  const dataUri = `data:${mimeType};base64,${b64}`;
+  const mtype = detectMimeType(b64);
+  const dataUri = `data:${mtype};base64,${b64}`;
 
-  return {
-    width: size.width,
-    height: size.height,
-    mtype: mimeType,
+  const imageColor: ImageColor = {
+    width,
+    height,
+    mtype,
+    dataUri,
     keepAspectRatio: true,
-    dataUri: dataUri,
     id: '00000000-0000-0000-0000-000000000000'
   };
+
+  imagesLibrary.register(imageHash, imageColor);
+
+  return imageColor;
 };

ui-src/lib/types/utils/imageColor.ts

@@ -9,4 +9,5 @@ export type ImageColor = {
   id?: Uuid;
   keepAspectRatio?: boolean;
   dataUri?: string;
+  imageHash?: string;
 };

ui-src/parser/creators/symbols/symbolFillGradients.ts

@@ -1,3 +1,5 @@
+import { imagesLibrary } from '@plugin/ImageLibrary';
+
 import { Fill } from '@ui/lib/types/utils/fill';
 import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient';
 
@@ -9,6 +11,16 @@ export const symbolFillGradients = (fills?: Fill[]): Fill[] | undefined => {
       fill.fillColorGradient = symbolFillGradient(fill.fillColorGradient);
     }
 
+    if (fill.fillImage?.imageHash) {
+      const imageColor = imagesLibrary.get(fill.fillImage?.imageHash);
+      const { imageHash, ...rest } = fill.fillImage;
+
+      fill.fillImage = {
+        ...rest,
+        dataUri: imageColor?.dataUri
+      };
+    }
+
     return fill;
   });
 };

ui-src/parser/parse.ts

@@ -1,4 +1,5 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
+import { imagesLibrary } from '@plugin/ImageLibrary';
 
 import { createFile } from '@ui/lib/penpot';
 import { createComponentLibrary, createPage } from '@ui/parser/creators';
@@ -7,8 +8,10 @@ import { PenpotDocument } from '@ui/types';
 
 import { idLibrary } from '.';
 
-export const parse = ({ name, children = [], components }: PenpotDocument) => {
+export const parse = ({ name, children = [], components, images }: PenpotDocument) => {
   componentsLibrary.init(components);
+  imagesLibrary.init(images);
+
   uiComponents.init();
   idLibrary.init();
 

ui-src/types/penpotDocument.ts

@@ -1,8 +1,10 @@
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 import { ComponentShape } from '@ui/lib/types/shapes/componentShape';
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
 
 export type PenpotDocument = {
   name: string;
   children?: PenpotPage[];
   components: Record<string, ComponentShape>;
+  images: Record<string, ImageColor>;
 };