Refactor

plugin-src/ComponentLibrary.ts → plugin-src/libraries/Components.ts

@@ -1,23 +1,23 @@
 import { ComponentShape } from '@ui/lib/types/shapes/componentShape';
 
-class ComponentLibrary {
-  private components: Record<string, ComponentShape> = {};
+class Components {
+  private components: Map<string, ComponentShape> = new Map();
 
   public register(id: string, component: ComponentShape) {
-    this.components[id] = component;
+    this.components.set(id, component);
   }
 
   public get(id: string): ComponentShape | undefined {
-    return this.components[id];
+    return this.components.get(id);
   }
 
   public all(): Record<string, ComponentShape> {
-    return this.components;
+    return Object.fromEntries(this.components.entries());
   }
 
   public init(components: Record<string, ComponentShape>): void {
-    this.components = components;
+    this.components = new Map(Object.entries(components));
   }
 }
 
-export const componentsLibrary = new ComponentLibrary();
+export const components = new Components();

plugin-src/libraries/Images.ts

@@ -0,0 +1,25 @@
+class Images {
+  private images: Map<string, Image | null> = new Map();
+
+  public register(hash: string, image: Image | null) {
+    this.images.set(hash, image);
+  }
+
+  public get(hash: string): Image | null | undefined {
+    return this.images.get(hash);
+  }
+
+  public has(hash: string): boolean {
+    return this.images.has(hash);
+  }
+
+  public all(): Record<string, Image | null> {
+    return Object.fromEntries(this.images.entries());
+  }
+
+  public init(images: Record<string, Image | null>): void {
+    this.images = new Map(Object.entries(images));
+  }
+}
+
+export const images = new Images();

plugin-src/OverridesLibrary.ts → plugin-src/libraries/Overrides.ts

@@ -1,4 +1,4 @@
-class OverridesLibrary {
+class Overrides {
   private overrides: Map<string, NodeChangeProperty[]> = new Map();
 
   public register(nodeId: string, overrides: NodeChangeProperty[]): void {
@@ -10,4 +10,4 @@ class OverridesLibrary {
   }
 }
 
-export const overridesLibrary = new OverridesLibrary();
+export const overrides = new Overrides();

plugin-src/StyleLibrary.ts → plugin-src/libraries/PaintStyles.ts

@@ -1,4 +1,4 @@
-class StyleLibrary {
+class PaintStyles {
   private styles: Map<string, PaintStyle | undefined> = new Map();
 
   public register(id: string, styles?: PaintStyle | undefined) {
@@ -18,4 +18,4 @@ class StyleLibrary {
   }
 }
 
-export const styleLibrary = new StyleLibrary();
+export const paintStyles = new PaintStyles();

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

@@ -1,34 +1,41 @@
 class RemoteComponentsLibrary {
-  private components: Record<string, ComponentNode | ComponentSetNode> = {};
+  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)) {
       this.queue.push(id);
     }
 
-    this.components[id] = component;
+    this.components.set(id, component);
   }
 
   public get(id: string): ComponentNode | ComponentSetNode | undefined {
-    return this.components[id];
+    return this.components.get(id);
+  }
+
+  public has(id: string): boolean {
+    return this.components.has(id);
   }
 
   public next(): ComponentNode | ComponentSetNode {
     const lastKey = this.queue.pop();
 
     if (!lastKey) throw new Error('No components to pop');
 
-    return this.components[lastKey];
+    const component = this.components.get(lastKey);
+    if (!component) throw new Error('Component not found');
+
+    return component;
   }
 
   public remaining(): number {
     return this.queue.length;
   }
 
   public total(): number {
-    return Object.keys(this.components).length;
+    return this.components.size;
   }
 }
 
-export const remoteComponentLibrary = new RemoteComponentsLibrary();
+export const remoteComponents = new RemoteComponentsLibrary();

plugin-src/TextLibrary.ts → plugin-src/libraries/TextStyles.ts

@@ -1,4 +1,4 @@
-class TextLibrary {
+class TextStyles {
   private styles: Map<string, TextStyle | undefined> = new Map();
 
   public register(id: string, styles?: TextStyle | undefined) {
@@ -18,4 +18,4 @@ class TextLibrary {
   }
 }
 
-export const textLibrary = new TextLibrary();
+export const textStyles = new TextStyles();

plugin-src/libraries/index.ts

@@ -0,0 +1,6 @@
+export * from './Components';
+export * from './Images';
+export * from './Overrides';
+export * from './RemoteComponents';
+export * from './PaintStyles';
+export * from './TextStyles';

plugin-src/processors/index.ts

@@ -0,0 +1,4 @@
+export * from './processImages';
+export * from './processPaintStyles';
+export * from './processTextStyles';
+export * from './processPages';

plugin-src/processors/processImages.ts

@@ -0,0 +1,40 @@
+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 images: Record<string, Uint8Array> = {};
+
+  if (imageToDownload.length === 0) return images;
+
+  let currentImage = 1;
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_TOTAL_ITEMS',
+    data: imageToDownload.length
+  });
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_STEP',
+    data: 'images'
+  });
+
+  for (const [key, image] of imageToDownload) {
+    const bytes = await image?.getBytesAsync();
+
+    if (bytes) {
+      images[key] = bytes;
+    }
+
+    figma.ui.postMessage({
+      type: 'PROGRESS_PROCESSED_ITEMS',
+      data: currentImage++
+    });
+
+    await sleep(0);
+  }
+
+  await sleep(20);
+
+  return images;
+};

plugin-src/processors/processPages.ts

@@ -0,0 +1,50 @@
+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';
+
+export const processPages = async (node: DocumentNode): Promise<PenpotPage[]> => {
+  const children = await processLocalDocument(node);
+  const remoteComponents = await processRemoteComponents();
+  if (remoteComponents) {
+    children.push(remoteComponents);
+  }
+
+  return children;
+};
+
+const processRemoteComponents = async (): Promise<PenpotPage | undefined> => {
+  if (remoteComponents.remaining() > 0) {
+    return {
+      name: 'External Components',
+      children: await translateRemoteChildren()
+    };
+  }
+};
+
+const processLocalDocument = async (node: DocumentNode): Promise<PenpotPage[]> => {
+  const children = [];
+  let currentPage = 1;
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_TOTAL_ITEMS',
+    data: node.children.length
+  });
+
+  for (const page of node.children) {
+    await page.loadAsync();
+
+    children.push(await transformPageNode(page));
+
+    figma.ui.postMessage({
+      type: 'PROGRESS_PROCESSED_ITEMS',
+      data: currentPage++
+    });
+
+    await sleep(0);
+  }
+
+  return children;
+};

plugin-src/processors/processPaintStyles.ts

@@ -0,0 +1,53 @@
+import { paintStyles } from '@plugin/libraries';
+import { translatePaintStyle } from '@plugin/translators/styles';
+import { sleep } from '@plugin/utils';
+
+import { FillStyle } from '@ui/lib/types/utils/fill';
+
+const isPaintStyle = (style: BaseStyle): style is PaintStyle => {
+  return style.type === 'PAINT';
+};
+
+export const registerPaintStyles = async () => {
+  const localPaintStyles = await figma.getLocalPaintStylesAsync();
+  localPaintStyles.forEach(style => {
+    paintStyles.register(style.id, style);
+  });
+};
+
+export const processPaintStyles = async (): Promise<Record<string, FillStyle>> => {
+  const stylesToFetch = Object.entries(paintStyles.all());
+  const styles: Record<string, FillStyle> = {};
+
+  if (stylesToFetch.length === 0) return styles;
+
+  let currentStyle = 1;
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_TOTAL_ITEMS',
+    data: stylesToFetch.length
+  });
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_STEP',
+    data: 'fills'
+  });
+
+  for (const [styleId, paintStyle] of stylesToFetch) {
+    const figmaStyle = paintStyle ?? (await figma.getStyleByIdAsync(styleId));
+    if (figmaStyle && isPaintStyle(figmaStyle)) {
+      styles[styleId] = translatePaintStyle(figmaStyle);
+    }
+
+    figma.ui.postMessage({
+      type: 'PROGRESS_PROCESSED_ITEMS',
+      data: currentStyle++
+    });
+
+    await sleep(0);
+  }
+
+  await sleep(20);
+
+  return styles;
+};

plugin-src/processors/processTextStyles.ts

@@ -0,0 +1,53 @@
+import { textStyles } from '@plugin/libraries';
+import { translateTextStyle } from '@plugin/translators/styles';
+import { sleep } from '@plugin/utils';
+
+import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
+
+const isTextStyle = (style: BaseStyle): style is TextStyle => {
+  return style.type === 'TEXT';
+};
+
+export const registerTextStyles = async () => {
+  const localTextStyles = await figma.getLocalTextStylesAsync();
+  localTextStyles.forEach(style => {
+    textStyles.register(style.id, style);
+  });
+};
+
+export const processTextStyles = async (): Promise<Record<string, TypographyStyle>> => {
+  const stylesToFetch = Object.entries(textStyles.all());
+  const styles: Record<string, TypographyStyle> = {};
+
+  if (stylesToFetch.length === 0) return styles;
+
+  let currentStyle = 1;
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_TOTAL_ITEMS',
+    data: stylesToFetch.length
+  });
+
+  figma.ui.postMessage({
+    type: 'PROGRESS_STEP',
+    data: 'typographies'
+  });
+
+  for (const [styleId, style] of stylesToFetch) {
+    const figmaStyle = style ?? (await figma.getStyleByIdAsync(styleId));
+    if (figmaStyle && isTextStyle(figmaStyle)) {
+      styles[styleId] = translateTextStyle(figmaStyle);
+    }
+
+    figma.ui.postMessage({
+      type: 'PROGRESS_PROCESSED_ITEMS',
+      data: currentStyle++
+    });
+
+    await sleep(0);
+  }
+
+  await sleep(20);
+
+  return styles;
+};

plugin-src/transformers/partials/transformOverrides.ts

@@ -1,4 +1,4 @@
-import { overridesLibrary } from '@plugin/OverridesLibrary';
+import { overrides as overridesLibrary } from '@plugin/libraries';
 import { syncAttributes } from '@plugin/utils/syncAttributes';
 
 import { SyncGroups } from '@ui/lib/types/utils/syncGroups';

plugin-src/transformers/transformComponentNode.ts

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