From aee78de8ac89d02327cee27215d8319db8757eb9 Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Wed, 26 Jun 2024 08:11:57 +0200 Subject: [PATCH] Refactor libraries (#189) --- .eslintrc.cjs | 6 +++- common/map.ts | 7 +++++ {plugin-src/utils => common}/sleep.ts | 0 package-lock.json | 4 +-- .../{libraries => }/RemoteComponents.ts | 6 ++-- plugin-src/libraries.ts | 10 +++++++ plugin-src/libraries/Components.ts | 23 -------------- plugin-src/libraries/Images.ts | 25 ---------------- plugin-src/libraries/Overrides.ts | 13 -------- plugin-src/libraries/PaintStyles.ts | 21 ------------- plugin-src/libraries/TextStyles.ts | 21 ------------- plugin-src/libraries/index.ts | 6 ---- plugin-src/processors/processImages.ts | 6 ++-- plugin-src/processors/processPages.ts | 3 +- plugin-src/processors/processPaintStyles.ts | 8 +++-- plugin-src/processors/processTextStyles.ts | 8 +++-- .../transformers/transformComponentNode.ts | 2 +- .../transformers/transformDocumentNode.ts | 4 ++- .../transformers/transformInstanceNode.ts | 4 +-- .../translators/fills/translateFills.ts | 2 +- .../translators/fills/translateImageFill.ts | 2 +- .../text/font/custom/translateCustomFont.ts | 1 + .../translators/text/translateTextSegments.ts | 2 +- plugin-src/translators/translateChildren.ts | 3 +- plugin-src/utils/index.ts | 1 - prettier.config.mjs | 2 +- tsconfig.base.json | 1 + ui-src/parser/creators/buildFile.ts | 10 +++---- ui-src/parser/creators/createColorsLibrary.ts | 9 +++--- ui-src/parser/creators/createComponent.ts | 16 +++++----- .../creators/createComponentInstance.ts | 5 ++-- .../creators/createComponentsLibrary.ts | 18 +++++------ ui-src/parser/creators/createPage.ts | 10 +------ ui-src/parser/creators/createText.ts | 3 +- ui-src/parser/creators/createTextLibrary.ts | 9 +++--- ui-src/parser/creators/symbols/symbolFills.ts | 2 +- ui-src/parser/index.ts | 1 + ui-src/parser/libraries.ts | 24 +++++++++++++++ ui-src/parser/libraries/Colors.ts | 19 ------------ ui-src/parser/libraries/Components.ts | 30 ------------------- ui-src/parser/libraries/Identifiers.ts | 19 ------------ ui-src/parser/libraries/Images.ts | 23 -------------- ui-src/parser/libraries/Typographies.ts | 19 ------------ ui-src/parser/libraries/index.ts | 5 ---- ui-src/parser/parse.ts | 18 +++++------ ui-src/parser/parseFigmaId.ts | 11 +++---- ui-src/tsconfig.json | 2 +- 47 files changed, 132 insertions(+), 312 deletions(-) create mode 100644 common/map.ts rename {plugin-src/utils => common}/sleep.ts (100%) rename plugin-src/{libraries => }/RemoteComponents.ts (84%) create mode 100644 plugin-src/libraries.ts delete mode 100644 plugin-src/libraries/Components.ts delete mode 100644 plugin-src/libraries/Images.ts delete mode 100644 plugin-src/libraries/Overrides.ts delete mode 100644 plugin-src/libraries/PaintStyles.ts delete mode 100644 plugin-src/libraries/TextStyles.ts delete mode 100644 plugin-src/libraries/index.ts create mode 100644 ui-src/parser/libraries.ts delete mode 100644 ui-src/parser/libraries/Colors.ts delete mode 100644 ui-src/parser/libraries/Components.ts delete mode 100644 ui-src/parser/libraries/Identifiers.ts delete mode 100644 ui-src/parser/libraries/Images.ts delete mode 100644 ui-src/parser/libraries/Typographies.ts delete mode 100644 ui-src/parser/libraries/index.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index bd6ddc9..7920ec6 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -23,7 +23,11 @@ module.exports = { rules: { '@typescript-eslint/no-unused-vars': [ 'error', - { ignoreRestSiblings: true, argsIgnorePattern: '^_' } + { + ignoreRestSiblings: true, + argsIgnorePattern: '^_', + destructuredArrayIgnorePattern: '^_' + } ] } }; diff --git a/common/map.ts b/common/map.ts new file mode 100644 index 0000000..bbb7deb --- /dev/null +++ b/common/map.ts @@ -0,0 +1,7 @@ +export const toObject = (map: Map): Record => { + return Object.fromEntries(map.entries()); +}; + +export const toArray = (map: Map): [string, T][] => { + return Array.from(map.entries()); +}; diff --git a/plugin-src/utils/sleep.ts b/common/sleep.ts similarity index 100% rename from plugin-src/utils/sleep.ts rename to common/sleep.ts diff --git a/package-lock.json b/package-lock.json index e981ff7..7686126 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "penpot-exporter", - "version": "0.7.0", + "version": "0.7.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "penpot-exporter", - "version": "0.7.0", + "version": "0.7.1", "license": "MPL2.0", "dependencies": { "@create-figma-plugin/ui": "^3.2", diff --git a/plugin-src/libraries/RemoteComponents.ts b/plugin-src/RemoteComponents.ts similarity index 84% rename from plugin-src/libraries/RemoteComponents.ts rename to plugin-src/RemoteComponents.ts index f3ca10a..f0dfbc0 100644 --- a/plugin-src/libraries/RemoteComponents.ts +++ b/plugin-src/RemoteComponents.ts @@ -1,9 +1,9 @@ -class RemoteComponentsLibrary { +export class RemoteComponentsLibrary { private components: Map = 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(); diff --git a/plugin-src/libraries.ts b/plugin-src/libraries.ts new file mode 100644 index 0000000..81207c4 --- /dev/null +++ b/plugin-src/libraries.ts @@ -0,0 +1,10 @@ +import { ComponentShape } from '@ui/lib/types/shapes/componentShape'; + +import { RemoteComponentsLibrary } from './RemoteComponents'; + +export const textStyles: Map = new Map(); +export const paintStyles: Map = new Map(); +export const overrides: Map = new Map(); +export const images: Map = new Map(); +export const components: Map = new Map(); +export const remoteComponents = new RemoteComponentsLibrary(); diff --git a/plugin-src/libraries/Components.ts b/plugin-src/libraries/Components.ts deleted file mode 100644 index dd70105..0000000 --- a/plugin-src/libraries/Components.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentShape } from '@ui/lib/types/shapes/componentShape'; - -class Components { - private components: Map = new Map(); - - public register(id: string, component: ComponentShape) { - this.components.set(id, component); - } - - public get(id: string): ComponentShape | undefined { - return this.components.get(id); - } - - public all(): Record { - return Object.fromEntries(this.components.entries()); - } - - public init(components: Record): void { - this.components = new Map(Object.entries(components)); - } -} - -export const components = new Components(); diff --git a/plugin-src/libraries/Images.ts b/plugin-src/libraries/Images.ts deleted file mode 100644 index d4db39d..0000000 --- a/plugin-src/libraries/Images.ts +++ /dev/null @@ -1,25 +0,0 @@ -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/libraries/Overrides.ts b/plugin-src/libraries/Overrides.ts deleted file mode 100644 index 4be0d7c..0000000 --- a/plugin-src/libraries/Overrides.ts +++ /dev/null @@ -1,13 +0,0 @@ -class Overrides { - private overrides: Map = new Map(); - - public register(nodeId: string, overrides: NodeChangeProperty[]): void { - this.overrides.set(nodeId, overrides); - } - - public get(nodeId: string): NodeChangeProperty[] | undefined { - return this.overrides.get(nodeId); - } -} - -export const overrides = new Overrides(); diff --git a/plugin-src/libraries/PaintStyles.ts b/plugin-src/libraries/PaintStyles.ts deleted file mode 100644 index a231f2e..0000000 --- a/plugin-src/libraries/PaintStyles.ts +++ /dev/null @@ -1,21 +0,0 @@ -class PaintStyles { - private styles: Map = new Map(); - - public register(id: string, styles?: PaintStyle | undefined) { - this.styles.set(id, styles); - } - - public get(id: string): PaintStyle | undefined { - return this.styles.get(id); - } - - public has(id: string): boolean { - return this.styles.has(id); - } - - public all(): Record { - return Object.fromEntries(this.styles.entries()); - } -} - -export const paintStyles = new PaintStyles(); diff --git a/plugin-src/libraries/TextStyles.ts b/plugin-src/libraries/TextStyles.ts deleted file mode 100644 index 8d3366d..0000000 --- a/plugin-src/libraries/TextStyles.ts +++ /dev/null @@ -1,21 +0,0 @@ -class TextStyles { - private styles: Map = new Map(); - - public register(id: string, styles?: TextStyle | undefined) { - this.styles.set(id, styles); - } - - public get(id: string): TextStyle | undefined { - return this.styles.get(id); - } - - public has(id: string): boolean { - return this.styles.has(id); - } - - public all(): Record { - return Object.fromEntries(this.styles.entries()); - } -} - -export const textStyles = new TextStyles(); diff --git a/plugin-src/libraries/index.ts b/plugin-src/libraries/index.ts deleted file mode 100644 index dea9da3..0000000 --- a/plugin-src/libraries/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './Components'; -export * from './Images'; -export * from './Overrides'; -export * from './RemoteComponents'; -export * from './PaintStyles'; -export * from './TextStyles'; diff --git a/plugin-src/processors/processImages.ts b/plugin-src/processors/processImages.ts index d112269..908e0dc 100644 --- a/plugin-src/processors/processImages.ts +++ b/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> => { - const imageToDownload = Object.entries(imagesLibrary.all()); + const imageToDownload = toArray(imagesLibrary); const images: Record = {}; if (imageToDownload.length === 0) return images; diff --git a/plugin-src/processors/processPages.ts b/plugin-src/processors/processPages.ts index 0af22fd..bc7e634 100644 --- a/plugin-src/processors/processPages.ts +++ b/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'; diff --git a/plugin-src/processors/processPaintStyles.ts b/plugin-src/processors/processPaintStyles.ts index 2d449f3..42288f9 100644 --- a/plugin-src/processors/processPaintStyles.ts +++ b/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> => { - const stylesToFetch = Object.entries(paintStyles.all()); + const stylesToFetch = toArray(paintStyles); const styles: Record = {}; if (stylesToFetch.length === 0) return styles; diff --git a/plugin-src/processors/processTextStyles.ts b/plugin-src/processors/processTextStyles.ts index c3a2596..b9c5c6b 100644 --- a/plugin-src/processors/processTextStyles.ts +++ b/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> => { - const stylesToFetch = Object.entries(textStyles.all()); + const stylesToFetch = toArray(textStyles); const styles: Record = {}; if (stylesToFetch.length === 0) return styles; diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts index bd76d85..06cb644 100644 --- a/plugin-src/transformers/transformComponentNode.ts +++ b/plugin-src/transformers/transformComponentNode.ts @@ -19,7 +19,7 @@ import { import { ComponentRoot } from '@ui/types'; export const transformComponentNode = async (node: ComponentNode): Promise => { - components.register(node.id, { + components.set(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 43cbf43..b3d32c5 100644 --- a/plugin-src/transformers/transformDocumentNode.ts +++ b/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 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']); }); } }; diff --git a/plugin-src/translators/fills/translateFills.ts b/plugin-src/translators/fills/translateFills.ts index b0ea7e3..c8f3b69 100644 --- a/plugin-src/translators/fills/translateFills.ts +++ b/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; diff --git a/plugin-src/translators/fills/translateImageFill.ts b/plugin-src/translators/fills/translateImageFill.ts index 70813ee..3fcfe7b 100644 --- a/plugin-src/translators/fills/translateImageFill.ts +++ b/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 { diff --git a/plugin-src/translators/text/font/custom/translateCustomFont.ts b/plugin-src/translators/text/font/custom/translateCustomFont.ts index 8c3cf89..6f370a1 100644 --- a/plugin-src/translators/text/font/custom/translateCustomFont.ts +++ b/plugin-src/translators/text/font/custom/translateCustomFont.ts @@ -7,6 +7,7 @@ export const translateCustomFont = ( fontWeight: string ): Pick | undefined => { const customFontId = getCustomFontId(fontName); + return { fontId: customFontId ? `custom-${customFontId}` : '', fontVariantId: translateFontVariantId(fontName, fontWeight), diff --git a/plugin-src/translators/text/translateTextSegments.ts b/plugin-src/translators/text/translateTextSegments.ts index 5efd4ab..51eede6 100644 --- a/plugin-src/translators/text/translateTextSegments.ts +++ b/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; diff --git a/plugin-src/translators/translateChildren.ts b/plugin-src/translators/translateChildren.ts index c532d4f..7f58fde 100644 --- a/plugin-src/translators/translateChildren.ts +++ b/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'; diff --git a/plugin-src/utils/index.ts b/plugin-src/utils/index.ts index f0a3ec4..bc262e3 100644 --- a/plugin-src/utils/index.ts +++ b/plugin-src/utils/index.ts @@ -5,4 +5,3 @@ export * from './calculateLinearGradient'; export * from './calculateRadialGradient'; export * from './matrixInvert'; export * from './rgbToHex'; -export * from './sleep'; diff --git a/prettier.config.mjs b/prettier.config.mjs index de1e896..99816c0 100644 --- a/prettier.config.mjs +++ b/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 }; diff --git a/tsconfig.base.json b/tsconfig.base.json index 8b1287b..8f76c81 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -2,6 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { + "@common/*": ["./common/*"], "@plugin/*": ["./plugin-src/*"], "@ui/*": ["./ui-src/*"] } diff --git a/ui-src/parser/creators/buildFile.ts b/ui-src/parser/creators/buildFile.ts index c26ab80..f955c69 100644 --- a/ui-src/parser/creators/buildFile.ts +++ b/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', diff --git a/ui-src/parser/creators/createColorsLibrary.ts b/ui-src/parser/creators/createColorsLibrary.ts index 7540930..fa430d6 100644 --- a/ui-src/parser/creators/createColorsLibrary.ts +++ b/ui-src/parser/creators/createColorsLibrary.ts @@ -1,12 +1,13 @@ -import { sleep } from '@plugin/utils/sleep'; +import { toArray } from '@common/map'; +import { sleep } from '@common/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { colors } from '@ui/parser/libraries'; +import { colors } from '@ui/parser'; export const createColorsLibrary = async (file: PenpotFile) => { let librariesBuilt = 1; - const libraries = colors.all(); + const libraries = toArray(colors); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', @@ -18,7 +19,7 @@ export const createColorsLibrary = async (file: PenpotFile) => { data: 'libraries' }); - for (const library of libraries) { + for (const [_, library] of libraries) { for (let index = 0; index < library.fills.length; index++) { file.addLibraryColor({ ...library.colors[index], diff --git a/ui-src/parser/creators/createComponent.ts b/ui-src/parser/creators/createComponent.ts index e869582..fd16482 100644 --- a/ui-src/parser/creators/createComponent.ts +++ b/ui-src/parser/creators/createComponent.ts @@ -1,20 +1,18 @@ -import { components } from '@plugin/libraries/Components'; - import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { components as uiComponents } from '@ui/parser/libraries'; +import { componentShapes, components } from '@ui/parser'; import { ComponentRoot } from '@ui/types'; import { createArtboard } from '.'; export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) => { - const component = components.get(figmaId); + const componentShape = componentShapes.get(figmaId); - if (!component) { + if (!componentShape) { return; } const componentId = getComponentId(file, figmaId); - const { type, ...shape } = component; + const { type, ...shape } = componentShape; shape.componentFile = file.getId(); shape.componentId = componentId; @@ -27,7 +25,7 @@ export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) => return; } - uiComponents.register(figmaId, { + components.set(figmaId, { componentId, mainInstancePage: file.getCurrentPageId(), componentFigmaId: figmaId, @@ -36,7 +34,7 @@ export const createComponent = (file: PenpotFile, { figmaId }: ComponentRoot) => }; const getComponentId = (file: PenpotFile, figmaId: string) => { - const uiComponent = uiComponents.get(figmaId); + const component = components.get(figmaId); - return uiComponent?.componentId ?? file.newId(); + return component?.componentId ?? file.newId(); }; diff --git a/ui-src/parser/creators/createComponentInstance.ts b/ui-src/parser/creators/createComponentInstance.ts index c7fdd00..03d5c61 100644 --- a/ui-src/parser/creators/createComponentInstance.ts +++ b/ui-src/parser/creators/createComponentInstance.ts @@ -1,6 +1,5 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { parseFigmaId } from '@ui/parser'; -import { components } from '@ui/parser/libraries'; +import { components, parseFigmaId } from '@ui/parser'; import { ComponentInstance } from '@ui/types'; import { createArtboard } from '.'; @@ -43,7 +42,7 @@ const createUiComponent = (file: PenpotFile, mainComponentFigmaId: string) => { mainInstanceId }; - components.register(mainComponentFigmaId, uiComponent); + components.set(mainComponentFigmaId, uiComponent); return uiComponent; }; diff --git a/ui-src/parser/creators/createComponentsLibrary.ts b/ui-src/parser/creators/createComponentsLibrary.ts index 9ff8c1c..8745731 100644 --- a/ui-src/parser/creators/createComponentsLibrary.ts +++ b/ui-src/parser/creators/createComponentsLibrary.ts @@ -1,16 +1,16 @@ -import { components } from '@plugin/libraries/Components'; -import { sleep } from '@plugin/utils/sleep'; +import { toArray } from '@common/map'; +import { sleep } from '@common/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; +import { UiComponent, componentShapes, components as uiComponents } from '@ui/parser'; import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols'; -import { UiComponent, components as uiComponents } from '@ui/parser/libraries'; import { createItems } from '.'; export const createComponentsLibrary = async (file: PenpotFile) => { let componentsBuilt = 1; - const components = uiComponents.all(); + const components = toArray(uiComponents); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', @@ -22,7 +22,7 @@ export const createComponentsLibrary = async (file: PenpotFile) => { data: 'components' }); - for (const uiComponent of components) { + for (const [_, uiComponent] of components) { createComponentLibrary(file, uiComponent); sendMessage({ @@ -34,14 +34,14 @@ export const createComponentsLibrary = async (file: PenpotFile) => { } }; -const createComponentLibrary = async (file: PenpotFile, uiComponent: UiComponent) => { - const component = components.get(uiComponent.componentFigmaId); +const createComponentLibrary = (file: PenpotFile, uiComponent: UiComponent) => { + const componentShape = componentShapes.get(uiComponent.componentFigmaId); - if (!component) { + if (!componentShape) { return; } - const { children = [], ...shape } = component; + const { children = [], ...shape } = componentShape; shape.fills = symbolFills(shape.fillStyleId, shape.fills); shape.strokes = symbolStrokes(shape.strokes); diff --git a/ui-src/parser/creators/createPage.ts b/ui-src/parser/creators/createPage.ts index 2f5b645..3e9cb18 100644 --- a/ui-src/parser/creators/createPage.ts +++ b/ui-src/parser/creators/createPage.ts @@ -1,20 +1,12 @@ -// @TODO: Direct import on purpose, to avoid problems with the tsc linting -import { sleep } from '@plugin/utils/sleep'; - import { PenpotFile } from '@ui/lib/types/penpotFile'; import { PenpotPage } from '@ui/lib/types/penpotPage'; import { createItems } from '.'; -export const createPage = async ( - file: PenpotFile, - { name, options, children = [] }: PenpotPage -) => { +export const createPage = (file: PenpotFile, { name, options, children = [] }: PenpotPage) => { file.addPage(name, options); createItems(file, children); - await sleep(0); - file.closePage(); }; diff --git a/ui-src/parser/creators/createText.ts b/ui-src/parser/creators/createText.ts index c6e8f43..c165f47 100644 --- a/ui-src/parser/creators/createText.ts +++ b/ui-src/parser/creators/createText.ts @@ -1,8 +1,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 { parseFigmaId, typographies } from '@ui/parser'; import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols'; -import { typographies } from '@ui/parser/libraries'; export const createText = ( file: PenpotFile, diff --git a/ui-src/parser/creators/createTextLibrary.ts b/ui-src/parser/creators/createTextLibrary.ts index d655c5d..961ef1a 100644 --- a/ui-src/parser/creators/createTextLibrary.ts +++ b/ui-src/parser/creators/createTextLibrary.ts @@ -1,12 +1,13 @@ -import { sleep } from '@plugin/utils/sleep'; +import { toArray } from '@common/map'; +import { sleep } from '@common/sleep'; import { sendMessage } from '@ui/context'; import { PenpotFile } from '@ui/lib/types/penpotFile'; -import { typographies } from '@ui/parser/libraries'; +import { typographies } from '@ui/parser'; export const createTextLibrary = async (file: PenpotFile) => { let librariesBuilt = 1; - const libraries = typographies.all(); + const libraries = toArray(typographies); sendMessage({ type: 'PROGRESS_TOTAL_ITEMS', @@ -18,7 +19,7 @@ export const createTextLibrary = async (file: PenpotFile) => { data: 'typoLibraries' }); - for (const library of libraries) { + for (const [_, library] of libraries) { file.addLibraryTypography({ ...library.typography, fontId: library.textStyle.fontId, diff --git a/ui-src/parser/creators/symbols/symbolFills.ts b/ui-src/parser/creators/symbols/symbolFills.ts index b09c899..08fee87 100644 --- a/ui-src/parser/creators/symbols/symbolFills.ts +++ b/ui-src/parser/creators/symbols/symbolFills.ts @@ -1,6 +1,6 @@ import { Fill } from '@ui/lib/types/utils/fill'; import { ImageColor, PartialImageColor } from '@ui/lib/types/utils/imageColor'; -import { colors, images } from '@ui/parser/libraries'; +import { colors, images } from '@ui/parser'; export const symbolFills = (fillStyleId?: string, fills?: Fill[]): Fill[] | undefined => { const nodeFills = fillStyleId ? colors.get(fillStyleId)?.fills : fills; diff --git a/ui-src/parser/index.ts b/ui-src/parser/index.ts index d23bd25..b5a57d0 100644 --- a/ui-src/parser/index.ts +++ b/ui-src/parser/index.ts @@ -1,3 +1,4 @@ +export * from './libraries'; export * from './parse'; export * from './parseImage'; export * from './parseFigmaId'; diff --git a/ui-src/parser/libraries.ts b/ui-src/parser/libraries.ts new file mode 100644 index 0000000..05619dd --- /dev/null +++ b/ui-src/parser/libraries.ts @@ -0,0 +1,24 @@ +import { ComponentShape } from '@ui/lib/types/shapes/componentShape'; +import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; +import { FillStyle } from '@ui/lib/types/utils/fill'; +import { ImageColor } from '@ui/lib/types/utils/imageColor'; +import { Uuid } from '@ui/lib/types/utils/uuid'; + +export type UiComponent = { + componentId: Uuid; + mainInstancePage?: Uuid; + mainInstanceId: Uuid; + componentFigmaId: string; +}; + +export const init = (records: Record, map: Map) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + map = new Map(Object.entries(records)); +}; + +export const typographies: Map = new Map(); +export const images: Map = new Map(); +export const identifiers: Map = new Map(); +export const components: Map = new Map(); +export const componentShapes: Map = new Map(); +export const colors: Map = new Map(); diff --git a/ui-src/parser/libraries/Colors.ts b/ui-src/parser/libraries/Colors.ts deleted file mode 100644 index 6d482e0..0000000 --- a/ui-src/parser/libraries/Colors.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { FillStyle } from '@ui/lib/types/utils/fill'; - -class Colors { - private libraries: Map = new Map(); - - public register(id: string, fillStyle: FillStyle) { - this.libraries.set(id, fillStyle); - } - - public get(id: string): FillStyle | undefined { - return this.libraries.get(id); - } - - public all(): FillStyle[] { - return Array.from(this.libraries.values()); - } -} - -export const colors = new Colors(); diff --git a/ui-src/parser/libraries/Components.ts b/ui-src/parser/libraries/Components.ts deleted file mode 100644 index fd071e5..0000000 --- a/ui-src/parser/libraries/Components.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Uuid } from '@ui/lib/types/utils/uuid'; - -export type UiComponent = { - componentId: Uuid; - mainInstancePage?: Uuid; - mainInstanceId: Uuid; - componentFigmaId: string; -}; - -class Components { - private components: Map = new Map(); - - public register(id: string, component: UiComponent) { - this.components.set(id, component); - } - - public get(id: string): UiComponent | undefined { - return this.components.get(id); - } - - public all(): UiComponent[] { - return Array.from(this.components.values()); - } - - public init() { - this.components.clear(); - } -} - -export const components = new Components(); diff --git a/ui-src/parser/libraries/Identifiers.ts b/ui-src/parser/libraries/Identifiers.ts deleted file mode 100644 index 3d08f5c..0000000 --- a/ui-src/parser/libraries/Identifiers.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Uuid } from '@ui/lib/types/utils/uuid'; - -class Identifiers { - private idMap: Map = new Map(); - - public init() { - this.idMap.clear(); - } - - public get(figmaId: string): Uuid | undefined { - return this.idMap.get(figmaId); - } - - public register(figmaId: string, id: Uuid) { - this.idMap.set(figmaId, id); - } -} - -export const identifiers = new Identifiers(); diff --git a/ui-src/parser/libraries/Images.ts b/ui-src/parser/libraries/Images.ts deleted file mode 100644 index 47907f0..0000000 --- a/ui-src/parser/libraries/Images.ts +++ /dev/null @@ -1,23 +0,0 @@ -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/Typographies.ts b/ui-src/parser/libraries/Typographies.ts deleted file mode 100644 index e4ae4ef..0000000 --- a/ui-src/parser/libraries/Typographies.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; - -class Typographies { - private libraries: Map = new Map(); - - public register(id: string, textStyle: TypographyStyle) { - this.libraries.set(id, textStyle); - } - - public get(id: string): TypographyStyle | undefined { - return this.libraries.get(id); - } - - public all(): TypographyStyle[] { - return Array.from(this.libraries.values()); - } -} - -export const typographies = new Typographies(); diff --git a/ui-src/parser/libraries/index.ts b/ui-src/parser/libraries/index.ts deleted file mode 100644 index ff701b2..0000000 --- a/ui-src/parser/libraries/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 7dc41b2..f1c6177 100644 --- a/ui-src/parser/parse.ts +++ b/ui-src/parser/parse.ts @@ -1,20 +1,18 @@ -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'; +import { sleep } from '@common/sleep'; import { sendMessage } from '@ui/context'; import { createFile } from '@ui/lib/penpot'; import { PenpotFile } from '@ui/lib/types/penpotFile'; import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; import { FillStyle } from '@ui/lib/types/utils/fill'; +import { colors, componentShapes, images, init, typographies } from '@ui/parser'; import { buildFile } from '@ui/parser/creators'; -import { colors, typographies, images as uiImages } from '@ui/parser/libraries'; import { PenpotDocument } from '@ui/types'; import { parseImage } from '.'; -const optimizeImages = async (images: Record) => { - const imagesToOptimize = Object.entries(images); +const optimizeImages = async (binaryImages: Record) => { + const imagesToOptimize = Object.entries(binaryImages); if (imagesToOptimize.length === 0) return; @@ -32,7 +30,7 @@ const optimizeImages = async (images: Record) => { for (const [key, bytes] of imagesToOptimize) { if (bytes) { - uiImages.register(key, await parseImage(bytes)); + images.set(key, await parseImage(bytes)); } sendMessage({ @@ -70,7 +68,7 @@ const prepareTypographyLibraries = async ( style.textStyle.typographyRefFile = file.getId(); style.typography.id = typographyId; - typographies.register(key, style); + typographies.set(key, style); sendMessage({ type: 'PROGRESS_PROCESSED_ITEMS', @@ -107,7 +105,7 @@ const prepareColorLibraries = async (file: PenpotFile, styles: Record { - componentsLibrary.init(components); + init(components, componentShapes); const file = createFile(name); diff --git a/ui-src/parser/parseFigmaId.ts b/ui-src/parser/parseFigmaId.ts index 1a1fa0f..53c093c 100644 --- a/ui-src/parser/parseFigmaId.ts +++ b/ui-src/parser/parseFigmaId.ts @@ -1,6 +1,6 @@ import { PenpotFile } from '@ui/lib/types/penpotFile'; import { Uuid } from '@ui/lib/types/utils/uuid'; -import { identifiers } from '@ui/parser/libraries'; +import { identifiers } from '@ui/parser'; export const parseFigmaId = ( file: PenpotFile, @@ -8,19 +8,20 @@ export const parseFigmaId = ( shapeRef: boolean = false ): Uuid | undefined => { if (!figmaId) { - if (shapeRef) { - return; - } + if (shapeRef) return; return file.newId(); } const id = identifiers.get(figmaId); + if (id) { return id; } const newId = file.newId(); - identifiers.register(figmaId, newId); + + identifiers.set(figmaId, newId); + return newId; }; diff --git a/ui-src/tsconfig.json b/ui-src/tsconfig.json index b71e408..7524681 100644 --- a/ui-src/tsconfig.json +++ b/ui-src/tsconfig.json @@ -5,7 +5,7 @@ "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "paths": { - "@plugin/*": ["./plugin-src/*"], + "@common/*": ["./common/*"], "@ui/*": ["./ui-src/*"], "react": ["./node_modules/preact/compat/"], "react-dom": ["./node_modules/preact/compat/"],