Support responsive components

Author: owjs3901

src/code-impl.ts

@@ -3,6 +3,7 @@ import { ResponsiveCodegen } from './codegen/responsive/ResponsiveCodegen'
 import { exportDevup, importDevup } from './commands/devup'
 import { exportAssets } from './commands/exportAssets'
 import { exportComponents } from './commands/exportComponents'
+import { getComponentName } from './utils'
 
 export function extractImports(
   componentsCodes: ReadonlyArray<readonly [string, string]>,
@@ -87,6 +88,27 @@ export function registerCodegen(ctx: typeof figma) {
           const codegen = new Codegen(node)
           await codegen.run()
           const componentsCodes = codegen.getComponentsCodes()
+
+          // Generate responsive component codes if viewport variant exists
+          let responsiveComponentsCodes: ReadonlyArray<
+            readonly [string, string]
+          > = []
+          if (codegen.hasViewportVariant() && node.type === 'COMPONENT_SET') {
+            try {
+              const componentName = getComponentName(node)
+              responsiveComponentsCodes =
+                await ResponsiveCodegen.generateViewportResponsiveComponents(
+                  node,
+                  componentName,
+                )
+            } catch (e) {
+              console.error(
+                '[responsive] Error generating responsive component code:',
+                e,
+              )
+            }
+          }
+
           console.info(`[benchmark] devup-ui end ${Date.now() - time}ms`)
 
           const parentSection = ResponsiveCodegen.hasParentSection(node)
@@ -144,6 +166,17 @@ export function registerCodegen(ctx: typeof figma) {
                   },
                 ] as const)
               : []),
+            ...(responsiveComponentsCodes.length > 0
+              ? [
+                  {
+                    title: `${node.name} - Components Responsive`,
+                    language: 'TYPESCRIPT' as const,
+                    code: responsiveComponentsCodes
+                      .map((code) => code[1])
+                      .join('\n\n'),
+                  },
+                ]
+              : []),
             ...responsiveResult,
           ]
         }

src/codegen/Codegen.ts

@@ -25,11 +25,17 @@ export class Codegen {
   private componentTrees: Map<SceneNode, ComponentTree> = new Map()
 
   constructor(private node: SceneNode) {
-    if (node.type === 'COMPONENT' && node.parent?.type === 'COMPONENT_SET') {
-      this.node = node.parent
-    } else {
-      this.node = node
-    }
+    this.node = node
+    // if (node.type === 'COMPONENT' && node.parent?.type === 'COMPONENT_SET') {
+    //   this.node = node.parent
+    // } else {
+    //   this.node = node
+    // }
+    // if (node.type === 'COMPONENT' && node.parent?.type === 'COMPONENT_SET') {
+    //   this.node = node.parent
+    // } else {
+    //   this.node = node
+    // }
   }
 
   getCode() {
@@ -293,6 +299,7 @@ export class Codegen {
    */
   async getTree(): Promise<NodeTree> {
     if (!this.tree) {
+      console.log('buildTree', this.node)
       this.tree = await this.buildTree(this.node)
     }
     return this.tree
@@ -344,6 +351,16 @@ export class Codegen {
     })
   }
 
+  /**
+   * Check if the node is a COMPONENT_SET with viewport variant.
+   */
+  hasViewportVariant(): boolean {
+    if (this.node.type !== 'COMPONENT_SET') return false
+    return Object.keys(
+      (this.node as ComponentSetNode).componentPropertyDefinitions,
+    ).some((key) => key.toLowerCase() === 'viewport')
+  }
+
   /**
    * Render a NodeTree to JSX string.
    * Static method so it can be used independently.