From 1c461e8d0d9263940fa90a3b32eca4186bcec350 Mon Sep 17 00:00:00 2001 From: Miguel Franken Date: Tue, 23 Apr 2024 10:05:20 +0200 Subject: [PATCH] feat: allow ignoring specific component instances (#35) --- packages/code/src/config/config.ts | 5 ++++ packages/code/src/main.ts | 5 +++- .../code/src/parsers/figma-node.parser.ts | 5 +++- packages/types/src/events.ts | 7 ++++++ packages/types/src/types.ts | 1 + packages/ui/src/components/configuration.vue | 23 +++++++++++++++++-- packages/ui/src/stores/useConfiguration.ts | 1 + 7 files changed, 43 insertions(+), 4 deletions(-) diff --git a/packages/code/src/config/config.ts b/packages/code/src/config/config.ts index 1b748c8..fcb93f8 100644 --- a/packages/code/src/config/config.ts +++ b/packages/code/src/config/config.ts @@ -22,6 +22,7 @@ const defaultConfig: IConfiguration = { variableNameTransformations: { lowercase: false, }, + ignoredComponentInstances: [], } export class Configuration implements IConfiguration { @@ -32,6 +33,7 @@ export class Configuration implements IConfiguration { public theme: IConfiguration['theme'] public newBuilder: IConfiguration['newBuilder'] public variableNameTransformations: IConfiguration['variableNameTransformations'] + public ignoredComponentInstances: IConfiguration['ignoredComponentInstances'] public readonly config: IConfiguration @@ -51,6 +53,8 @@ export class Configuration implements IConfiguration { else this.config = defu(defaults[0], ...defaults.slice(1), defaultConfig) as IConfiguration + this.config.ignoredComponentInstances = config?.ignoredComponentInstances || defaultConfig.ignoredComponentInstances + this.mode = this.config.mode this.unit = this.config.unit this.variantGroup = this.config.variantGroup @@ -58,6 +62,7 @@ export class Configuration implements IConfiguration { this.theme = this.config.theme this.newBuilder = this.config.newBuilder this.variableNameTransformations = this.config.variableNameTransformations + this.ignoredComponentInstances = this.config.ignoredComponentInstances } public get colorLookup(): InferenceColorMap { diff --git a/packages/code/src/main.ts b/packages/code/src/main.ts index ecadd03..d774437 100644 --- a/packages/code/src/main.ts +++ b/packages/code/src/main.ts @@ -59,10 +59,13 @@ PluginMessages.on('variant-group-changed', async ({ variantGroup }) => { }) PluginMessages.on('variable-name-transformations-changed', async ({ variableNameTransformations }) => { - console.log('received event', variableNameTransformations) configurationManager.updateConfig({ variableNameTransformations }).then(generate) }) +PluginMessages.on('ignored-component-instances-changed', async ({ ignoredComponentInstances }) => { + configurationManager.updateConfig({ ignoredComponentInstances }).then(generate) +}) + PluginMessages.on('new-builder-changed', async ({ newBuilder }) => { configurationManager.updateConfig({ newBuilder }).then(generate) }) diff --git a/packages/code/src/parsers/figma-node.parser.ts b/packages/code/src/parsers/figma-node.parser.ts index 843c1b0..ba802c2 100644 --- a/packages/code/src/parsers/figma-node.parser.ts +++ b/packages/code/src/parsers/figma-node.parser.ts @@ -102,7 +102,10 @@ class FigmaNodeParser { * @param node - The instance node to process. * @returns {TreeNode} The generated tree node for the instance. */ - private createInstanceNode(node: InstanceNode): TreeNode { + private createInstanceNode(node: InstanceNode): TreeNode | null { + if (this.config.ignoredComponentInstances.includes(node.name)) + return null + return { children: [], data: { diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts index dbd0caa..be29512 100644 --- a/packages/types/src/events.ts +++ b/packages/types/src/events.ts @@ -65,6 +65,12 @@ interface VariableNameTransformationsChangedPluginMessageData { variableNameTransformations: VariableNameTransformations } +export type IgnoredComponentInstancesChangedPluginMessage = BasePluginMessage<'ignored-component-instances-changed', IgnoredComponentInstancesChangedPluginMessageData> + +interface IgnoredComponentInstancesChangedPluginMessageData { + ignoredComponentInstances: string[] +} + export type NewBuilderChangedPluginMessage = BasePluginMessage<'new-builder-changed', NewBuilderChangedPluginMessageData> interface NewBuilderChangedPluginMessageData { @@ -112,6 +118,7 @@ export type PluginMessage = | ModeChangedPluginMessage | NearestChangedPluginMessage | VariantGroupChangedPluginMessage + | IgnoredComponentInstancesChangedPluginMessage | VariableNameTransformationsChangedPluginMessage | NotificationPluginMessage | UnitChangedPluginMessage diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts index b3b012d..643b58b 100644 --- a/packages/types/src/types.ts +++ b/packages/types/src/types.ts @@ -22,4 +22,5 @@ export interface IConfiguration { theme: Theme newBuilder: boolean variableNameTransformations: VariableNameTransformations + ignoredComponentInstances: string[] } diff --git a/packages/ui/src/components/configuration.vue b/packages/ui/src/components/configuration.vue index f0ce2e7..4ef6bbc 100644 --- a/packages/ui/src/components/configuration.vue +++ b/packages/ui/src/components/configuration.vue @@ -2,8 +2,8 @@ import { computed } from 'vue' import { storeToRefs } from 'pinia' import Switch from './inputs/switch.vue' -import Select from './inputs/select.vue' import type { SelectOption } from './inputs/select.vue' +import Select from './inputs/select.vue' import { useConfiguration } from '@/stores/useConfiguration' const { configuration } = storeToRefs(useConfiguration()) @@ -22,6 +22,13 @@ const shouldLowercaseVariableNames = computed({ }, }) +const ignoredComponentInstancesModel = computed({ + get: () => configuration.value.ignoredComponentInstances.join(', '), + set: (ignoredComponentInstances) => { + configuration.value.ignoredComponentInstances = ignoredComponentInstances.split(',').map(name => name.trim()).filter(name => name.length > 0) + }, +}) + const options: SelectOption[] = [ { value: 'inferred', @@ -35,7 +42,7 @@ const options: SelectOption[] = [ diff --git a/packages/ui/src/stores/useConfiguration.ts b/packages/ui/src/stores/useConfiguration.ts index b987d98..2e1f4ff 100644 --- a/packages/ui/src/stores/useConfiguration.ts +++ b/packages/ui/src/stores/useConfiguration.ts @@ -23,6 +23,7 @@ export const useConfiguration = defineStore('configuration-store', () => { watch(() => configuration.value.variantGroup, (variantGroup: boolean) => emitPluginMessage('variant-group-changed', { variantGroup })) watch(() => configuration.value.mode, (mode: Mode) => emitPluginMessage('mode-changed', { mode })) watch(() => configuration.value.variableNameTransformations, (variableNameTransformations: VariableNameTransformations) => emitPluginMessage('variable-name-transformations-changed', { variableNameTransformations: toRaw(variableNameTransformations) }), { deep: true }) + watch(() => configuration.value.ignoredComponentInstances, (ignoredComponentInstances: string[]) => emitPluginMessage('ignored-component-instances-changed', { ignoredComponentInstances: toRaw(ignoredComponentInstances) })) watch(() => configuration.value.newBuilder, (newBuilder: boolean) => emitPluginMessage('new-builder-changed', { newBuilder })) })