From e8270cfd545aa415e2424a3ec16ba9e0dce1975a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Tue, 25 Jun 2024 17:12:20 +0200 Subject: [PATCH] Refactor (#188) * refactor * fixes * rename libraries * refactor libraries * fixes --- plugin-src/ImageLibrary.ts | 21 -- .../Components.ts} | 14 +- plugin-src/libraries/Images.ts | 25 +++ .../Overrides.ts} | 4 +- .../PaintStyles.ts} | 4 +- .../RemoteComponents.ts} | 19 +- .../TextStyles.ts} | 4 +- plugin-src/libraries/index.ts | 6 + plugin-src/processors/index.ts | 4 + plugin-src/processors/processImages.ts | 40 ++++ plugin-src/processors/processPages.ts | 50 +++++ plugin-src/processors/processPaintStyles.ts | 53 +++++ plugin-src/processors/processTextStyles.ts | 53 +++++ .../partials/transformOverrides.ts | 2 +- .../transformers/transformComponentNode.ts | 4 +- .../transformers/transformDocumentNode.ts | 200 ++---------------- .../transformers/transformInstanceNode.ts | 13 +- .../translators/fills/translateFills.ts | 6 +- .../translators/fills/translateImageFill.ts | 6 +- .../translators/styles/translateTextStyle.ts | 6 +- .../translators/text/translateTextSegments.ts | 6 +- plugin-src/translators/translateChildren.ts | 8 +- ui-src/parser/creators/buildFile.ts | 7 +- ui-src/parser/creators/createColorsLibrary.ts | 4 +- ui-src/parser/creators/createComponent.ts | 6 +- .../creators/createComponentInstance.ts | 6 +- .../creators/createComponentsLibrary.ts | 6 +- ui-src/parser/creators/createText.ts | 4 +- ui-src/parser/creators/createTextLibrary.ts | 4 +- ui-src/parser/creators/symbols/symbolFills.ts | 7 +- ui-src/parser/index.ts | 1 - .../{UiColorLibraries.ts => Colors.ts} | 4 +- .../{UiComponents.ts => Components.ts} | 14 +- .../Identifiers.ts} | 4 +- ui-src/parser/libraries/Images.ts | 23 ++ .../{UiTextLibraries.ts => Typographies.ts} | 4 +- ui-src/parser/libraries/UiImages.ts | 23 -- ui-src/parser/libraries/index.ts | 8 +- ui-src/parser/parse.ts | 17 +- ui-src/parser/parseFigmaId.ts | 7 +- ui-src/types/penpotDocument.ts | 4 +- 41 files changed, 373 insertions(+), 328 deletions(-) delete mode 100644 plugin-src/ImageLibrary.ts rename plugin-src/{ComponentLibrary.ts => libraries/Components.ts} (50%) create mode 100644 plugin-src/libraries/Images.ts rename plugin-src/{OverridesLibrary.ts => libraries/Overrides.ts} (78%) rename plugin-src/{StyleLibrary.ts => libraries/PaintStyles.ts} (86%) rename plugin-src/{RemoteComponentLibrary.ts => libraries/RemoteComponents.ts} (55%) rename plugin-src/{TextLibrary.ts => libraries/TextStyles.ts} (87%) create mode 100644 plugin-src/libraries/index.ts create mode 100644 plugin-src/processors/index.ts create mode 100644 plugin-src/processors/processImages.ts create mode 100644 plugin-src/processors/processPages.ts create mode 100644 plugin-src/processors/processPaintStyles.ts create mode 100644 plugin-src/processors/processTextStyles.ts rename ui-src/parser/libraries/{UiColorLibraries.ts => Colors.ts} (82%) rename ui-src/parser/libraries/{UiComponents.ts => Components.ts} (56%) rename ui-src/parser/{IdLibrary.ts => libraries/Identifiers.ts} (83%) create mode 100644 ui-src/parser/libraries/Images.ts rename ui-src/parser/libraries/{UiTextLibraries.ts => Typographies.ts} (84%) delete mode 100644 ui-src/parser/libraries/UiImages.ts diff --git a/plugin-src/ImageLibrary.ts b/plugin-src/ImageLibrary.ts deleted file mode 100644 index c8e0a83..0000000 --- a/plugin-src/ImageLibrary.ts +++ /dev/null @@ -1,21 +0,0 @@ -class ImageLibrary { - private images: Record = {}; - - public register(hash: string, image: Image | null) { - this.images[hash] = image; - } - - public get(hash: string): Image | null | undefined { - return this.images[hash]; - } - - public all(): Record { - return this.images; - } - - public init(images: Record): void { - this.images = images; - } -} - -export const imagesLibrary = new ImageLibrary(); diff --git a/plugin-src/ComponentLibrary.ts b/plugin-src/libraries/Components.ts similarity index 50% rename from plugin-src/ComponentLibrary.ts rename to plugin-src/libraries/Components.ts index 7caf425..dd70105 100644 --- a/plugin-src/ComponentLibrary.ts +++ b/plugin-src/libraries/Components.ts @@ -1,23 +1,23 @@ import { ComponentShape } from '@ui/lib/types/shapes/componentShape'; -class ComponentLibrary { - private components: Record = {}; +class Components { + private components: Map = 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 { - return this.components; + return Object.fromEntries(this.components.entries()); } public init(components: Record): void { - this.components = components; + this.components = new Map(Object.entries(components)); } } -export const componentsLibrary = new ComponentLibrary(); +export const components = new Components(); diff --git a/plugin-src/libraries/Images.ts b/plugin-src/libraries/Images.ts new file mode 100644 index 0000000..d4db39d --- /dev/null +++ b/plugin-src/libraries/Images.ts @@ -0,0 +1,25 @@ +class Images { + private images: Map = 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 { + return Object.fromEntries(this.images.entries()); + } + + public init(images: Record): void { + this.images = new Map(Object.entries(images)); + } +} + +export const images = new Images(); diff --git a/plugin-src/OverridesLibrary.ts b/plugin-src/libraries/Overrides.ts similarity index 78% rename from plugin-src/OverridesLibrary.ts rename to plugin-src/libraries/Overrides.ts index c633d32..4be0d7c 100644 --- a/plugin-src/OverridesLibrary.ts +++ b/plugin-src/libraries/Overrides.ts @@ -1,4 +1,4 @@ -class OverridesLibrary { +class Overrides { private overrides: Map = 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(); diff --git a/plugin-src/StyleLibrary.ts b/plugin-src/libraries/PaintStyles.ts similarity index 86% rename from plugin-src/StyleLibrary.ts rename to plugin-src/libraries/PaintStyles.ts index 1cfe112..a231f2e 100644 --- a/plugin-src/StyleLibrary.ts +++ b/plugin-src/libraries/PaintStyles.ts @@ -1,4 +1,4 @@ -class StyleLibrary { +class PaintStyles { private styles: Map = 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(); diff --git a/plugin-src/RemoteComponentLibrary.ts b/plugin-src/libraries/RemoteComponents.ts similarity index 55% rename from plugin-src/RemoteComponentLibrary.ts rename to plugin-src/libraries/RemoteComponents.ts index fd53770..f3ca10a 100644 --- a/plugin-src/RemoteComponentLibrary.ts +++ b/plugin-src/libraries/RemoteComponents.ts @@ -1,5 +1,5 @@ class RemoteComponentsLibrary { - private components: Record = {}; + private components: Map = new Map(); private queue: string[] = []; public register(id: string, component: ComponentNode | ComponentSetNode) { @@ -7,11 +7,15 @@ class RemoteComponentsLibrary { 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 { @@ -19,7 +23,10 @@ class RemoteComponentsLibrary { 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 { @@ -27,8 +34,8 @@ class RemoteComponentsLibrary { } public total(): number { - return Object.keys(this.components).length; + return this.components.size; } } -export const remoteComponentLibrary = new RemoteComponentsLibrary(); +export const remoteComponents = new RemoteComponentsLibrary(); diff --git a/plugin-src/TextLibrary.ts b/plugin-src/libraries/TextStyles.ts similarity index 87% rename from plugin-src/TextLibrary.ts rename to plugin-src/libraries/TextStyles.ts index 647c611..8d3366d 100644 --- a/plugin-src/TextLibrary.ts +++ b/plugin-src/libraries/TextStyles.ts @@ -1,4 +1,4 @@ -class TextLibrary { +class TextStyles { private styles: Map = 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(); diff --git a/plugin-src/libraries/index.ts b/plugin-src/libraries/index.ts new file mode 100644 index 0000000..dea9da3 --- /dev/null +++ b/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'; diff --git a/plugin-src/processors/index.ts b/plugin-src/processors/index.ts new file mode 100644 index 0000000..dcbdeac --- /dev/null +++ b/plugin-src/processors/index.ts @@ -0,0 +1,4 @@ +export * from './processImages'; +export * from './processPaintStyles'; +export * from './processTextStyles'; +export * from './processPages'; diff --git a/plugin-src/processors/processImages.ts b/plugin-src/processors/processImages.ts new file mode 100644 index 0000000..d112269 --- /dev/null +++ b/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> => { + const imageToDownload = Object.entries(imagesLibrary.all()); + const images: Record = {}; + + 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; +}; diff --git a/plugin-src/processors/processPages.ts b/plugin-src/processors/processPages.ts new file mode 100644 index 0000000..0af22fd --- /dev/null +++ b/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 => { + const children = await processLocalDocument(node); + const remoteComponents = await processRemoteComponents(); + if (remoteComponents) { + children.push(remoteComponents); + } + + return children; +}; + +const processRemoteComponents = async (): Promise => { + if (remoteComponents.remaining() > 0) { + return { + name: 'External Components', + children: await translateRemoteChildren() + }; + } +}; + +const processLocalDocument = async (node: DocumentNode): Promise => { + 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; +}; diff --git a/plugin-src/processors/processPaintStyles.ts b/plugin-src/processors/processPaintStyles.ts new file mode 100644 index 0000000..2d449f3 --- /dev/null +++ b/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> => { + const stylesToFetch = Object.entries(paintStyles.all()); + const styles: Record = {}; + + 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; +}; diff --git a/plugin-src/processors/processTextStyles.ts b/plugin-src/processors/processTextStyles.ts new file mode 100644 index 0000000..c3a2596 --- /dev/null +++ b/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> => { + const stylesToFetch = Object.entries(textStyles.all()); + const styles: Record = {}; + + 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; +}; diff --git a/plugin-src/transformers/partials/transformOverrides.ts b/plugin-src/transformers/partials/transformOverrides.ts index dd9cbd0..9845a83 100644 --- a/plugin-src/transformers/partials/transformOverrides.ts +++ b/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'; diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts index 311d872..bd76d85 100644 --- a/plugin-src/transformers/transformComponentNode.ts +++ b/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 => { - componentsLibrary.register(node.id, { + components.register(node.id, { type: 'component', name: node.name, path: node.parent?.type === 'COMPONENT_SET' ? node.parent.name : '', diff --git a/plugin-src/transformers/transformDocumentNode.ts b/plugin-src/transformers/transformDocumentNode.ts index d8aff13..43cbf43 100644 --- a/plugin-src/transformers/transformDocumentNode.ts +++ b/plugin-src/transformers/transformDocumentNode.ts @@ -1,196 +1,30 @@ -import { componentsLibrary } from '@plugin/ComponentLibrary'; -import { imagesLibrary } from '@plugin/ImageLibrary'; -import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary'; -import { styleLibrary } from '@plugin/StyleLibrary'; -import { textLibrary } from '@plugin/TextLibrary'; -import { translateRemoteChildren } from '@plugin/translators'; -import { translatePaintStyle, translateTextStyle } from '@plugin/translators/styles'; -import { sleep } from '@plugin/utils'; +import { components } from '@plugin/libraries'; +import { + processImages, + processPages, + processPaintStyles, + processTextStyles, + registerPaintStyles, + registerTextStyles +} from '@plugin/processors'; -import { PenpotPage } from '@ui/lib/types/penpotPage'; -import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; -import { FillStyle } from '@ui/lib/types/utils/fill'; import { PenpotDocument } from '@ui/types'; -import { transformPageNode } from '.'; - -const isPaintStyle = (style: BaseStyle): style is PaintStyle => { - return style.type === 'PAINT'; -}; - -const isTextStyle = (style: BaseStyle): style is TextStyle => { - return style.type === 'TEXT'; -}; - -const downloadImages = async (): Promise> => { - const imageToDownload = Object.entries(imagesLibrary.all()); - const images: Record = {}; - - 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; -}; - -const getFillStyles = async (): Promise> => { - const stylesToFetch = Object.entries(styleLibrary.all()); - const styles: Record = {}; - - 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; -}; - -const getTextStyles = async (): Promise> => { - const stylesToFetch = Object.entries(textLibrary.all()); - const styles: Record = {}; - - 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; -}; - -const processPages = async (node: DocumentNode): Promise => { - 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; -}; - export const transformDocumentNode = async (node: DocumentNode): Promise => { - const localPaintStyles = await figma.getLocalPaintStylesAsync(); - localPaintStyles.forEach(style => { - styleLibrary.register(style.id, style); - }); - - const localTextStyles = await figma.getLocalTextStylesAsync(); - localTextStyles.forEach(style => { - textLibrary.register(style.id, style); - }); + await registerPaintStyles(); + await registerTextStyles(); const children = await processPages(node); - - if (remoteComponentLibrary.remaining() > 0) { - children.push({ - name: 'External Components', - children: await translateRemoteChildren() - }); - } - - const styles = await getFillStyles(); - - const images = await downloadImages(); - - const typographies = await getTextStyles(); + const paintStyles = await processPaintStyles(); + const images = await processImages(); + const textStyles = await processTextStyles(); return { name: node.name, children, - components: componentsLibrary.all(), + components: components.all(), images, - styles, - typographies + paintStyles, + textStyles }; }; diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts index 2843d5c..7db5ed2 100644 --- a/plugin-src/transformers/transformInstanceNode.ts +++ b/plugin-src/transformers/transformInstanceNode.ts @@ -1,5 +1,4 @@ -import { overridesLibrary } from '@plugin/OverridesLibrary'; -import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary'; +import { overrides, remoteComponents } from '@plugin/libraries'; import { transformAutoLayout, transformBlend, @@ -40,9 +39,7 @@ export const transformInstanceNode = async ( registerTextVariableOverrides(node, primaryComponent); if (node.overrides.length > 0) { - node.overrides.forEach(override => - overridesLibrary.register(override.id, override.overriddenFields) - ); + node.overrides.forEach(override => overrides.register(override.id, override.overriddenFields)); } return { @@ -78,11 +75,11 @@ const getPrimaryComponent = (mainComponent: ComponentNode): ComponentNode | Comp }; const registerExternalComponents = (primaryComponent: ComponentNode | ComponentSetNode): void => { - if (remoteComponentLibrary.get(primaryComponent.id) !== undefined) { + if (remoteComponents.has(primaryComponent.id)) { return; } - remoteComponentLibrary.register(primaryComponent.id, primaryComponent); + remoteComponents.register(primaryComponent.id, primaryComponent); }; const getComponentTextPropertyOverrides = ( @@ -131,7 +128,7 @@ const registerTextVariableOverrides = ( }); textNodes.forEach(textNode => { - overridesLibrary.register(textNode.id, ['text']); + overrides.register(textNode.id, ['text']); }); } }; diff --git a/plugin-src/translators/fills/translateFills.ts b/plugin-src/translators/fills/translateFills.ts index 1ab56e4..b0ea7e3 100644 --- a/plugin-src/translators/fills/translateFills.ts +++ b/plugin-src/translators/fills/translateFills.ts @@ -1,4 +1,4 @@ -import { styleLibrary } from '@plugin/StyleLibrary'; +import { paintStyles } from '@plugin/libraries'; import { translateImageFill, translateSolidFill } from '@plugin/translators/fills'; import { translateGradientLinearFill, @@ -47,8 +47,8 @@ export const translateFillStyleId = ( ): string | undefined => { if (fillStyleId === figma.mixed || fillStyleId === undefined) return; - if (!styleLibrary.has(fillStyleId)) { - styleLibrary.register(fillStyleId); + if (!paintStyles.has(fillStyleId)) { + paintStyles.register(fillStyleId); } return fillStyleId; diff --git a/plugin-src/translators/fills/translateImageFill.ts b/plugin-src/translators/fills/translateImageFill.ts index 43f0300..70813ee 100644 --- a/plugin-src/translators/fills/translateImageFill.ts +++ b/plugin-src/translators/fills/translateImageFill.ts @@ -1,4 +1,4 @@ -import { imagesLibrary } from '@plugin/ImageLibrary'; +import { images } from '@plugin/libraries'; import { Fill } from '@ui/lib/types/utils/fill'; import { PartialImageColor } from '@ui/lib/types/utils/imageColor'; @@ -16,8 +16,8 @@ export const translateImageFill = (fill: ImagePaint): Fill | undefined => { const translateImage = (imageHash: string | null): PartialImageColor | undefined => { if (!imageHash) return; - if (imagesLibrary.get(imageHash) === undefined) { - imagesLibrary.register(imageHash, figma.getImageByHash(imageHash)); + if (!images.has(imageHash)) { + images.register(imageHash, figma.getImageByHash(imageHash)); } return { diff --git a/plugin-src/translators/styles/translateTextStyle.ts b/plugin-src/translators/styles/translateTextStyle.ts index fa17754..933c213 100644 --- a/plugin-src/translators/styles/translateTextStyle.ts +++ b/plugin-src/translators/styles/translateTextStyle.ts @@ -10,7 +10,7 @@ import { import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; export const translateTextStyle = (figmaStyle: TextStyle): TypographyStyle => { - const path = figmaStyle.remote ? 'Remote / ' : ''; + const name = (figmaStyle.remote ? 'Remote / ' : '') + figmaStyle.name; return { name: figmaStyle.name, @@ -25,8 +25,8 @@ export const translateTextStyle = (figmaStyle: TextStyle): TypographyStyle => { lineHeight: translateLineHeight(figmaStyle) }, typography: { - path, - name: figmaStyle.name + path: '', + name } }; }; diff --git a/plugin-src/translators/text/translateTextSegments.ts b/plugin-src/translators/text/translateTextSegments.ts index fee84cc..5efd4ab 100644 --- a/plugin-src/translators/text/translateTextSegments.ts +++ b/plugin-src/translators/text/translateTextSegments.ts @@ -1,4 +1,4 @@ -import { textLibrary } from '@plugin/TextLibrary'; +import { textStyles } from '@plugin/libraries'; import { transformFills } from '@plugin/transformers/partials'; import { translateFontName } from '@plugin/translators/text/font'; import { TextSegment, translateParagraphProperties } from '@plugin/translators/text/paragraph'; @@ -67,8 +67,8 @@ const hasTextStyle = (segment: TextSegment): boolean => { const translateTextStyleId = (textStyleId: string | undefined): string | undefined => { if (textStyleId === undefined) return; - if (!textLibrary.has(textStyleId)) { - textLibrary.register(textStyleId); + if (!textStyles.has(textStyleId)) { + textStyles.register(textStyleId); } return textStyleId; diff --git a/plugin-src/translators/translateChildren.ts b/plugin-src/translators/translateChildren.ts index 43e103c..c532d4f 100644 --- a/plugin-src/translators/translateChildren.ts +++ b/plugin-src/translators/translateChildren.ts @@ -1,4 +1,4 @@ -import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary'; +import { remoteComponents } from '@plugin/libraries'; import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers'; import { transformMaskFigmaIds } from '@plugin/transformers/partials'; import { sleep } from '@plugin/utils'; @@ -71,13 +71,13 @@ export const translateRemoteChildren = async (): Promise => { data: 'remote' }); - while (remoteComponentLibrary.remaining() > 0) { + while (remoteComponents.remaining() > 0) { figma.ui.postMessage({ type: 'PROGRESS_TOTAL_ITEMS', - data: remoteComponentLibrary.total() + data: remoteComponents.total() }); - const child = remoteComponentLibrary.next(); + const child = remoteComponents.next(); const penpotNode = await transformSceneNode(child); diff --git a/ui-src/parser/creators/buildFile.ts b/ui-src/parser/creators/buildFile.ts index a259f42..c26ab80 100644 --- a/ui-src/parser/creators/buildFile.ts +++ b/ui-src/parser/creators/buildFile.ts @@ -3,20 +3,19 @@ import { sleep } from '@plugin/utils/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; import { PenpotPage } from '@ui/lib/types/penpotPage'; -import { idLibrary } from '@ui/parser'; import { createColorsLibrary, createComponentsLibrary, createPage, createTextLibrary } from '@ui/parser/creators'; -import { uiComponents } from '@ui/parser/libraries'; +import { components, identifiers } from '@ui/parser/libraries'; export const buildFile = async (file: PenpotFile, children: PenpotPage[]) => { let pagesBuilt = 1; - uiComponents.init(); - idLibrary.init(); + components.init(); + identifiers.init(); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', diff --git a/ui-src/parser/creators/createColorsLibrary.ts b/ui-src/parser/creators/createColorsLibrary.ts index 25c96ad..7540930 100644 --- a/ui-src/parser/creators/createColorsLibrary.ts +++ b/ui-src/parser/creators/createColorsLibrary.ts @@ -2,11 +2,11 @@ import { sleep } from '@plugin/utils/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { uiColorLibraries } from '@ui/parser/libraries/UiColorLibraries'; +import { colors } from '@ui/parser/libraries'; export const createColorsLibrary = async (file: PenpotFile) => { let librariesBuilt = 1; - const libraries = uiColorLibraries.all(); + const libraries = colors.all(); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', diff --git a/ui-src/parser/creators/createComponent.ts b/ui-src/parser/creators/createComponent.ts index 47293f5..e869582 100644 --- a/ui-src/parser/creators/createComponent.ts +++ b/ui-src/parser/creators/createComponent.ts @@ -1,13 +1,13 @@ -import { componentsLibrary } from '@plugin/ComponentLibrary'; +import { components } from '@plugin/libraries/Components'; import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { uiComponents } from '@ui/parser/libraries'; +import { components as uiComponents } from '@ui/parser/libraries'; import { ComponentRoot } from '@ui/types'; import { createArtboard } from '.'; export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) => { - const component = componentsLibrary.get(figmaId); + const component = components.get(figmaId); if (!component) { return; diff --git a/ui-src/parser/creators/createComponentInstance.ts b/ui-src/parser/creators/createComponentInstance.ts index 44bcf9a..c7fdd00 100644 --- a/ui-src/parser/creators/createComponentInstance.ts +++ b/ui-src/parser/creators/createComponentInstance.ts @@ -1,6 +1,6 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; import { parseFigmaId } from '@ui/parser'; -import { uiComponents } from '@ui/parser/libraries'; +import { components } from '@ui/parser/libraries'; import { ComponentInstance } from '@ui/types'; import { createArtboard } from '.'; @@ -17,7 +17,7 @@ export const createComponentInstance = ( }: ComponentInstance ) => { const uiComponent = - uiComponents.get(mainComponentFigmaId) ?? createUiComponent(file, mainComponentFigmaId); + components.get(mainComponentFigmaId) ?? createUiComponent(file, mainComponentFigmaId); if (!uiComponent) { return; @@ -43,7 +43,7 @@ const createUiComponent = (file: PenpotFile, mainComponentFigmaId: string) => { mainInstanceId }; - uiComponents.register(mainComponentFigmaId, uiComponent); + components.register(mainComponentFigmaId, uiComponent); return uiComponent; }; diff --git a/ui-src/parser/creators/createComponentsLibrary.ts b/ui-src/parser/creators/createComponentsLibrary.ts index a00837f..9ff8c1c 100644 --- a/ui-src/parser/creators/createComponentsLibrary.ts +++ b/ui-src/parser/creators/createComponentsLibrary.ts @@ -1,10 +1,10 @@ -import { componentsLibrary } from '@plugin/ComponentLibrary'; +import { components } from '@plugin/libraries/Components'; import { sleep } from '@plugin/utils/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols'; -import { UiComponent, uiComponents } from '@ui/parser/libraries'; +import { UiComponent, components as uiComponents } from '@ui/parser/libraries'; import { createItems } from '.'; @@ -35,7 +35,7 @@ export const createComponentsLibrary = async (file: PenpotFile) => { }; const createComponentLibrary = async (file: PenpotFile, uiComponent: UiComponent) => { - const component = componentsLibrary.get(uiComponent.componentFigmaId); + const component = components.get(uiComponent.componentFigmaId); if (!component) { return; diff --git a/ui-src/parser/creators/createText.ts b/ui-src/parser/creators/createText.ts index e71117d..c6e8f43 100644 --- a/ui-src/parser/creators/createText.ts +++ b/ui-src/parser/creators/createText.ts @@ -2,7 +2,7 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; import { Paragraph, TextContent, TextNode, TextShape } from '@ui/lib/types/shapes/textShape'; import { parseFigmaId } from '@ui/parser'; import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols'; -import { uiTextLibraries } from '@ui/parser/libraries/UiTextLibraries'; +import { typographies } from '@ui/parser/libraries'; export const createText = ( file: PenpotFile, @@ -36,7 +36,7 @@ const parseTextStyle = (text: Paragraph | TextNode, textStyleId?: string): Parag let textStyle = text; textStyle.fills = symbolFills(text.fillStyleId, text.fills); - const libraryStyle = textStyleId ? uiTextLibraries.get(textStyleId) : undefined; + const libraryStyle = textStyleId ? typographies.get(textStyleId) : undefined; if (libraryStyle) { textStyle = { diff --git a/ui-src/parser/creators/createTextLibrary.ts b/ui-src/parser/creators/createTextLibrary.ts index b9fa30f..d655c5d 100644 --- a/ui-src/parser/creators/createTextLibrary.ts +++ b/ui-src/parser/creators/createTextLibrary.ts @@ -2,11 +2,11 @@ import { sleep } from '@plugin/utils/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { uiTextLibraries } from '@ui/parser/libraries/UiTextLibraries'; +import { typographies } from '@ui/parser/libraries'; export const createTextLibrary = async (file: PenpotFile) => { let librariesBuilt = 1; - const libraries = uiTextLibraries.all(); + const libraries = typographies.all(); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', diff --git a/ui-src/parser/creators/symbols/symbolFills.ts b/ui-src/parser/creators/symbols/symbolFills.ts index 46b26ec..b09c899 100644 --- a/ui-src/parser/creators/symbols/symbolFills.ts +++ b/ui-src/parser/creators/symbols/symbolFills.ts @@ -1,10 +1,9 @@ import { Fill } from '@ui/lib/types/utils/fill'; import { ImageColor, PartialImageColor } from '@ui/lib/types/utils/imageColor'; -import { uiImages } from '@ui/parser/libraries'; -import { uiColorLibraries } from '@ui/parser/libraries/UiColorLibraries'; +import { colors, images } from '@ui/parser/libraries'; export const symbolFills = (fillStyleId?: string, fills?: Fill[]): Fill[] | undefined => { - const nodeFills = fillStyleId ? uiColorLibraries.get(fillStyleId)?.fills : fills; + const nodeFills = fillStyleId ? colors.get(fillStyleId)?.fills : fills; if (!nodeFills) return; @@ -22,7 +21,7 @@ export const symbolFillImage = ( ): ImageColor | undefined => { if (!isPartialFillColor(fillImage)) return fillImage; - return uiImages.get(fillImage.imageHash); + return images.get(fillImage.imageHash); }; const isPartialFillColor = ( diff --git a/ui-src/parser/index.ts b/ui-src/parser/index.ts index 6d8e38f..d23bd25 100644 --- a/ui-src/parser/index.ts +++ b/ui-src/parser/index.ts @@ -1,4 +1,3 @@ -export * from './IdLibrary'; export * from './parse'; export * from './parseImage'; export * from './parseFigmaId'; diff --git a/ui-src/parser/libraries/UiColorLibraries.ts b/ui-src/parser/libraries/Colors.ts similarity index 82% rename from ui-src/parser/libraries/UiColorLibraries.ts rename to ui-src/parser/libraries/Colors.ts index 76b5ee5..6d482e0 100644 --- a/ui-src/parser/libraries/UiColorLibraries.ts +++ b/ui-src/parser/libraries/Colors.ts @@ -1,6 +1,6 @@ import { FillStyle } from '@ui/lib/types/utils/fill'; -class UiColorLibraries { +class Colors { private libraries: Map = new Map(); public register(id: string, fillStyle: FillStyle) { @@ -16,4 +16,4 @@ class UiColorLibraries { } } -export const uiColorLibraries = new UiColorLibraries(); +export const colors = new Colors(); diff --git a/ui-src/parser/libraries/UiComponents.ts b/ui-src/parser/libraries/Components.ts similarity index 56% rename from ui-src/parser/libraries/UiComponents.ts rename to ui-src/parser/libraries/Components.ts index cb95a46..fd071e5 100644 --- a/ui-src/parser/libraries/UiComponents.ts +++ b/ui-src/parser/libraries/Components.ts @@ -7,24 +7,24 @@ export type UiComponent = { componentFigmaId: string; }; -class UiComponents { - private components: Record = {}; +class Components { + private components: Map = new Map(); public register(id: string, component: UiComponent) { - this.components[id] = component; + this.components.set(id, component); } public get(id: string): UiComponent | undefined { - return this.components[id]; + return this.components.get(id); } public all(): UiComponent[] { - return Object.values(this.components); + return Array.from(this.components.values()); } public init() { - this.components = {}; + this.components.clear(); } } -export const uiComponents = new UiComponents(); +export const components = new Components(); diff --git a/ui-src/parser/IdLibrary.ts b/ui-src/parser/libraries/Identifiers.ts similarity index 83% rename from ui-src/parser/IdLibrary.ts rename to ui-src/parser/libraries/Identifiers.ts index a6d4020..3d08f5c 100644 --- a/ui-src/parser/IdLibrary.ts +++ b/ui-src/parser/libraries/Identifiers.ts @@ -1,6 +1,6 @@ import { Uuid } from '@ui/lib/types/utils/uuid'; -class IdLibrary { +class Identifiers { private idMap: Map = new Map(); public init() { @@ -16,4 +16,4 @@ class IdLibrary { } } -export const idLibrary = new IdLibrary(); +export const identifiers = new Identifiers(); diff --git a/ui-src/parser/libraries/Images.ts b/ui-src/parser/libraries/Images.ts new file mode 100644 index 0000000..47907f0 --- /dev/null +++ b/ui-src/parser/libraries/Images.ts @@ -0,0 +1,23 @@ +import { ImageColor } from '@ui/lib/types/utils/imageColor'; + +class Images { + private images: Map = new Map(); + + public register(id: string, image: ImageColor) { + this.images.set(id, image); + } + + public get(id: string): ImageColor | undefined { + return this.images.get(id); + } + + public all(): ImageColor[] { + return Array.from(this.images.values()); + } + + public init() { + this.images.clear(); + } +} + +export const images = new Images(); diff --git a/ui-src/parser/libraries/UiTextLibraries.ts b/ui-src/parser/libraries/Typographies.ts similarity index 84% rename from ui-src/parser/libraries/UiTextLibraries.ts rename to ui-src/parser/libraries/Typographies.ts index 208ac57..e4ae4ef 100644 --- a/ui-src/parser/libraries/UiTextLibraries.ts +++ b/ui-src/parser/libraries/Typographies.ts @@ -1,6 +1,6 @@ import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; -class UiTextLibraries { +class Typographies { private libraries: Map = new Map(); public register(id: string, textStyle: TypographyStyle) { @@ -16,4 +16,4 @@ class UiTextLibraries { } } -export const uiTextLibraries = new UiTextLibraries(); +export const typographies = new Typographies(); diff --git a/ui-src/parser/libraries/UiImages.ts b/ui-src/parser/libraries/UiImages.ts deleted file mode 100644 index ed819ff..0000000 --- a/ui-src/parser/libraries/UiImages.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ImageColor } from '@ui/lib/types/utils/imageColor'; - -class UiImages { - private images: Record = {}; - - public register(id: string, image: ImageColor) { - this.images[id] = image; - } - - public get(id: string): ImageColor | undefined { - return this.images[id]; - } - - public all(): ImageColor[] { - return Object.values(this.images); - } - - public init() { - this.images = {}; - } -} - -export const uiImages = new UiImages(); diff --git a/ui-src/parser/libraries/index.ts b/ui-src/parser/libraries/index.ts index 588c5f3..ff701b2 100644 --- a/ui-src/parser/libraries/index.ts +++ b/ui-src/parser/libraries/index.ts @@ -1,3 +1,5 @@ -export * from './UiComponents'; -export * from './UiImages'; -export * from './UiColorLibraries'; +export * from './Identifiers'; +export * from './Colors'; +export * from './Components'; +export * from './Images'; +export * from './Typographies'; diff --git a/ui-src/parser/parse.ts b/ui-src/parser/parse.ts index 9ccf507..7dc41b2 100644 --- a/ui-src/parser/parse.ts +++ b/ui-src/parser/parse.ts @@ -1,4 +1,4 @@ -import { componentsLibrary } from '@plugin/ComponentLibrary'; +import { components as componentsLibrary } from '@plugin/libraries/Components'; // @TODO: Direct import on purpose, to avoid problems with the tsc linting import { sleep } from '@plugin/utils/sleep'; @@ -8,8 +8,7 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; import { FillStyle } from '@ui/lib/types/utils/fill'; import { buildFile } from '@ui/parser/creators'; -import { uiColorLibraries, uiImages } from '@ui/parser/libraries'; -import { uiTextLibraries } from '@ui/parser/libraries/UiTextLibraries'; +import { colors, typographies, images as uiImages } from '@ui/parser/libraries'; import { PenpotDocument } from '@ui/types'; import { parseImage } from '.'; @@ -71,7 +70,7 @@ const prepareTypographyLibraries = async ( style.textStyle.typographyRefFile = file.getId(); style.typography.id = typographyId; - uiTextLibraries.register(key, style); + typographies.register(key, style); sendMessage({ type: 'PROGRESS_PROCESSED_ITEMS', @@ -108,7 +107,7 @@ const prepareColorLibraries = async (file: PenpotFile, styles: Record { componentsLibrary.init(components); const file = createFile(name); await optimizeImages(images); - await prepareColorLibraries(file, styles); - await prepareTypographyLibraries(file, typographies); + await prepareColorLibraries(file, paintStyles); + await prepareTypographyLibraries(file, textStyles); return buildFile(file, children); }; diff --git a/ui-src/parser/parseFigmaId.ts b/ui-src/parser/parseFigmaId.ts index 5a248ac..1a1fa0f 100644 --- a/ui-src/parser/parseFigmaId.ts +++ b/ui-src/parser/parseFigmaId.ts @@ -1,7 +1,6 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; import { Uuid } from '@ui/lib/types/utils/uuid'; - -import { idLibrary } from '.'; +import { identifiers } from '@ui/parser/libraries'; export const parseFigmaId = ( file: PenpotFile, @@ -16,12 +15,12 @@ export const parseFigmaId = ( return file.newId(); } - const id = idLibrary.get(figmaId); + const id = identifiers.get(figmaId); if (id) { return id; } const newId = file.newId(); - idLibrary.register(figmaId, newId); + identifiers.register(figmaId, newId); return newId; }; diff --git a/ui-src/types/penpotDocument.ts b/ui-src/types/penpotDocument.ts index 0bdc317..4057960 100644 --- a/ui-src/types/penpotDocument.ts +++ b/ui-src/types/penpotDocument.ts @@ -8,6 +8,6 @@ export type PenpotDocument = { children?: PenpotPage[]; components: Record; images: Record; - styles: Record; - typographies: Record; + paintStyles: Record; + textStyles: Record; };