feat: allow ignoring specific component instances (#35)

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,13 +53,16 @@ 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
     this.nearestInference = this.config.nearestInference
     this.theme = this.config.theme
     this.newBuilder = this.config.newBuilder
     this.variableNameTransformations = this.config.variableNameTransformations
+    this.ignoredComponentInstances = this.config.ignoredComponentInstances
   }
 
   public get colorLookup(): InferenceColorMap {

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)
 })

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<InstanceNodeData> {
+  private createInstanceNode(node: InstanceNode): TreeNode<InstanceNodeData> | null {
+    if (this.config.ignoredComponentInstances.includes(node.name))
+      return null
+
     return {
       children: [],
       data: {

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

packages/types/src/types.ts

@@ -22,4 +22,5 @@ export interface IConfiguration {
   theme: Theme
   newBuilder: boolean
   variableNameTransformations: VariableNameTransformations
+  ignoredComponentInstances: string[]
 }

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[] = [
 </script>
 
 <template>
-  <div class="font-sans text-xs font-semibold color-$figma-color-text flex gap-4">
+  <div class="font-sans text-xs font-semibold color-$figma-color-text flex gap-4 overflow-x-scroll w-full">
     <div>
       <h2>
         Mode
@@ -81,5 +88,17 @@ const options: SelectOption[] = [
 
       <Switch v-model="configuration.newBuilder" class="mt-2" />
     </div>
+
+    <div>
+      <h2>
+        Ignored Component Instances
+      </h2>
+
+      <input
+        v-model="ignoredComponentInstancesModel"
+        class="w-32 mt-2 p-2 border border-$figma-color-border rounded"
+        placeholder="Comma separated list of component instance names"
+      >
+    </div>
   </div>
 </template>

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 }))
   })