Refactor libraries (#189)

.eslintrc.cjs

@@ -23,7 +23,11 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-unused-vars': [
       'error',
-      { ignoreRestSiblings: true, argsIgnorePattern: '^_' }
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_'
+      }
     ]
   }
 };

common/map.ts

@@ -0,0 +1,7 @@
+export const toObject = <T>(map: Map<string, T>): Record<string, T> => {
+  return Object.fromEntries(map.entries());
+};
+
+export const toArray = <T>(map: Map<string, T>): [string, T][] => {
+  return Array.from(map.entries());
+};

plugin-src/libraries/RemoteComponents.ts → plugin-src/RemoteComponents.ts

@@ -1,9 +1,9 @@
-class RemoteComponentsLibrary {
+export class RemoteComponentsLibrary {
   private components: Map<string, ComponentNode | ComponentSetNode> = new Map();
   private queue: string[] = [];
 
   public register(id: string, component: ComponentNode | ComponentSetNode) {
-    if (!Object.prototype.hasOwnProperty.call(this.components, id)) {
+    if (!this.components.has(id)) {
       this.queue.push(id);
     }
 
@@ -37,5 +37,3 @@ class RemoteComponentsLibrary {
     return this.components.size;
   }
 }
-
-export const remoteComponents = new RemoteComponentsLibrary();

plugin-src/libraries.ts

@@ -0,0 +1,10 @@
+import { ComponentShape } from '@ui/lib/types/shapes/componentShape';
+
+import { RemoteComponentsLibrary } from './RemoteComponents';
+
+export const textStyles: Map<string, TextStyle | undefined> = new Map();
+export const paintStyles: Map<string, PaintStyle | undefined> = new Map();
+export const overrides: Map<string, NodeChangeProperty[]> = new Map();
+export const images: Map<string, Image | null> = new Map();
+export const components: Map<string, ComponentShape> = new Map();
+export const remoteComponents = new RemoteComponentsLibrary();

plugin-src/processors/processImages.ts

@@ -1,8 +1,10 @@
+import { toArray } from '@common/map';
+import { sleep } from '@common/sleep';
+
 import { images as imagesLibrary } from '@plugin/libraries';
-import { sleep } from '@plugin/utils';
 
 export const processImages = async (): Promise<Record<string, Uint8Array>> => {
-  const imageToDownload = Object.entries(imagesLibrary.all());
+  const imageToDownload = toArray(imagesLibrary);
   const images: Record<string, Uint8Array> = {};
 
   if (imageToDownload.length === 0) return images;

plugin-src/processors/processPages.ts

@@ -1,7 +1,8 @@
+import { sleep } from '@common/sleep';
+
 import { remoteComponents } from '@plugin/libraries';
 import { transformPageNode } from '@plugin/transformers';
 import { translateRemoteChildren } from '@plugin/translators';
-import { sleep } from '@plugin/utils';
 
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 

plugin-src/processors/processPaintStyles.ts

@@ -1,6 +1,8 @@
+import { toArray } from '@common/map';
+import { sleep } from '@common/sleep';
+
 import { paintStyles } from '@plugin/libraries';
 import { translatePaintStyle } from '@plugin/translators/styles';
-import { sleep } from '@plugin/utils';
 
 import { FillStyle } from '@ui/lib/types/utils/fill';
 
@@ -11,12 +13,12 @@ const isPaintStyle = (style: BaseStyle): style is PaintStyle => {
 export const registerPaintStyles = async () => {
   const localPaintStyles = await figma.getLocalPaintStylesAsync();
   localPaintStyles.forEach(style => {
-    paintStyles.register(style.id, style);
+    paintStyles.set(style.id, style);
   });
 };
 
 export const processPaintStyles = async (): Promise<Record<string, FillStyle>> => {
-  const stylesToFetch = Object.entries(paintStyles.all());
+  const stylesToFetch = toArray(paintStyles);
   const styles: Record<string, FillStyle> = {};
 
   if (stylesToFetch.length === 0) return styles;

plugin-src/processors/processTextStyles.ts

@@ -1,6 +1,8 @@
+import { toArray } from '@common/map';
+import { sleep } from '@common/sleep';
+
 import { textStyles } from '@plugin/libraries';
 import { translateTextStyle } from '@plugin/translators/styles';
-import { sleep } from '@plugin/utils';
 
 import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
 
@@ -11,12 +13,12 @@ const isTextStyle = (style: BaseStyle): style is TextStyle => {
 export const registerTextStyles = async () => {
   const localTextStyles = await figma.getLocalTextStylesAsync();
   localTextStyles.forEach(style => {
-    textStyles.register(style.id, style);
+    textStyles.set(style.id, style);
   });
 };
 
 export const processTextStyles = async (): Promise<Record<string, TypographyStyle>> => {
-  const stylesToFetch = Object.entries(textStyles.all());
+  const stylesToFetch = toArray(textStyles);
   const styles: Record<string, TypographyStyle> = {};
 
   if (stylesToFetch.length === 0) return styles;

plugin-src/transformers/transformComponentNode.ts

@@ -19,7 +19,7 @@ import {
 import { ComponentRoot } from '@ui/types';
 
 export const transformComponentNode = async (node: ComponentNode): Promise<ComponentRoot> => {
-  components.register(node.id, {
+  components.set(node.id, {
     type: 'component',
     name: node.name,
     path: node.parent?.type === 'COMPONENT_SET' ? node.parent.name : '',

plugin-src/transformers/transformDocumentNode.ts

@@ -1,3 +1,5 @@
+import { toObject } from '@common/map';
+
 import { components } from '@plugin/libraries';
 import {
   processImages,
@@ -22,7 +24,7 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
   return {
     name: node.name,
     children,
-    components: components.all(),
+    components: toObject(components),
     images,
     paintStyles,
     textStyles

plugin-src/transformers/transformInstanceNode.ts

@@ -39,7 +39,7 @@ export const transformInstanceNode = async (
   registerTextVariableOverrides(node, primaryComponent);
 
   if (node.overrides.length > 0) {
-    node.overrides.forEach(override => overrides.register(override.id, override.overriddenFields));
+    node.overrides.forEach(override => overrides.set(override.id, override.overriddenFields));
   }
 
   return {
@@ -128,7 +128,7 @@ const registerTextVariableOverrides = (
       });
 
     textNodes.forEach(textNode => {
-      overrides.register(textNode.id, ['text']);
+      overrides.set(textNode.id, ['text']);
     });
   }
 };

plugin-src/translators/fills/translateFills.ts

@@ -48,7 +48,7 @@ export const translateFillStyleId = (
   if (fillStyleId === figma.mixed || fillStyleId === undefined) return;
 
   if (!paintStyles.has(fillStyleId)) {
-    paintStyles.register(fillStyleId);
+    paintStyles.set(fillStyleId, undefined);
   }
 
   return fillStyleId;

plugin-src/translators/fills/translateImageFill.ts

@@ -17,7 +17,7 @@ const translateImage = (imageHash: string | null): PartialImageColor | undefined
   if (!imageHash) return;
 
   if (!images.has(imageHash)) {
-    images.register(imageHash, figma.getImageByHash(imageHash));
+    images.set(imageHash, figma.getImageByHash(imageHash));
   }
 
   return {

plugin-src/translators/text/font/custom/translateCustomFont.ts

@@ -7,6 +7,7 @@ export const translateCustomFont = (
   fontWeight: string
 ): Pick<TextTypography, 'fontId' | 'fontVariantId' | 'fontWeight'> | undefined => {
   const customFontId = getCustomFontId(fontName);
+
   return {
     fontId: customFontId ? `custom-${customFontId}` : '',
     fontVariantId: translateFontVariantId(fontName, fontWeight),

plugin-src/translators/text/translateTextSegments.ts

@@ -68,7 +68,7 @@ const translateTextStyleId = (textStyleId: string | undefined): string | undefin
   if (textStyleId === undefined) return;
 
   if (!textStyles.has(textStyleId)) {
-    textStyles.register(textStyleId);
+    textStyles.set(textStyleId, undefined);
   }
 
   return textStyleId;

plugin-src/translators/translateChildren.ts

@@ -1,7 +1,8 @@
+import { sleep } from '@common/sleep';
+
 import { remoteComponents } from '@plugin/libraries';
 import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers';
 import { transformMaskFigmaIds } from '@plugin/transformers/partials';
-import { sleep } from '@plugin/utils';
 
 import { PenpotNode } from '@ui/types';
 

plugin-src/utils/index.ts

@@ -5,4 +5,3 @@ export * from './calculateLinearGradient';
 export * from './calculateRadialGradient';
 export * from './matrixInvert';
 export * from './rgbToHex';
-export * from './sleep';

prettier.config.mjs

@@ -11,7 +11,7 @@ const config = {
   trailingComma: 'none',
   useTabs: false,
   plugins: ['@trivago/prettier-plugin-sort-imports'],
-  importOrder: ['^@plugin/(.*)$', '^@ui/(.*)$', '^[./]'],
+  importOrder: ['^@common/(.*)$', '^@plugin/(.*)$', '^@ui/(.*)$', '^[./]'],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true
 };

tsconfig.base.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@common/*": ["./common/*"],
       "@plugin/*": ["./plugin-src/*"],
       "@ui/*": ["./ui-src/*"]
     }

ui-src/parser/creators/buildFile.ts

@@ -1,21 +1,21 @@
-import { sleep } from '@plugin/utils/sleep';
+import { sleep } from '@common/sleep';
 
 import { sendMessage } from '@ui/context';
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { PenpotPage } from '@ui/lib/types/penpotPage';
+import { components, identifiers } from '@ui/parser';
 import {
   createColorsLibrary,
   createComponentsLibrary,
   createPage,
   createTextLibrary
 } from '@ui/parser/creators';
-import { components, identifiers } from '@ui/parser/libraries';
 
 export const buildFile = async (file: PenpotFile, children: PenpotPage[]) => {
   let pagesBuilt = 1;
 
-  components.init();
-  identifiers.init();
+  components.clear();
+  identifiers.clear();
 
   sendMessage({
     type: 'PROGRESS_TOTAL_ITEMS',
@@ -28,7 +28,7 @@ export const buildFile = async (file: PenpotFile, children: PenpotPage[]) => {
   });
 
   for (const page of children) {
-    await createPage(file, page);
+    createPage(file, page);
 
     sendMessage({
       type: 'PROGRESS_PROCESSED_ITEMS',