Add case

owjs3901 · owjs3901 · commit 258f9e821b56 · 2025-12-24T23:36:49.000+09:00
diff --git a/src/__tests__/code.test.ts b/src/__tests__/code.test.ts
@@ -214,3 +214,332 @@ describe('extractImports', () => {
     expect(result).toContain('Box')
   })
 })
+
+describe('extractCustomComponentImports', () => {
+  it('should extract custom component imports', () => {
+    const result = codeModule.extractCustomComponentImports([
+      ['MyComponent', '<Box><CustomButton /><CustomInput /></Box>'],
+    ])
+    expect(result).toContain('CustomButton')
+    expect(result).toContain('CustomInput')
+    expect(result).not.toContain('Box')
+    expect(result).not.toContain('MyComponent')
+  })
+
+  it('should not include devup-ui components', () => {
+    const result = codeModule.extractCustomComponentImports([
+      [
+        'MyComponent',
+        '<Box><Flex><VStack><CustomCard /></VStack></Flex></Box>',
+      ],
+    ])
+    expect(result).toContain('CustomCard')
+    expect(result).not.toContain('Box')
+    expect(result).not.toContain('Flex')
+    expect(result).not.toContain('VStack')
+  })
+
+  it('should return empty array when no custom components', () => {
+    const result = codeModule.extractCustomComponentImports([
+      ['MyComponent', '<Box><Flex><Text>Hello</Text></Flex></Box>'],
+    ])
+    expect(result).toEqual([])
+  })
+
+  it('should sort custom components alphabetically', () => {
+    const result = codeModule.extractCustomComponentImports([
+      ['MyComponent', '<Box><Zebra /><Apple /><Mango /></Box>'],
+    ])
+    expect(result).toEqual(['Apple', 'Mango', 'Zebra'])
+  })
+
+  it('should handle multiple components with same custom component', () => {
+    const result = codeModule.extractCustomComponentImports([
+      ['ComponentA', '<Box><SharedButton /></Box>'],
+      ['ComponentB', '<Flex><SharedButton /></Flex>'],
+    ])
+    expect(result).toEqual(['SharedButton'])
+  })
+
+  it('should handle nested custom components', () => {
+    const result = codeModule.extractCustomComponentImports([
+      ['Parent', '<Box><ChildA><ChildB><ChildC /></ChildB></ChildA></Box>'],
+    ])
+    expect(result).toContain('ChildA')
+    expect(result).toContain('ChildB')
+    expect(result).toContain('ChildC')
+  })
+})
+
+describe('registerCodegen with viewport variant', () => {
+  type CodegenHandler = (event: {
+    node: SceneNode
+    language: string
+  }) => Promise<unknown[]>
+
+  it('should generate responsive component codes for COMPONENT_SET with viewport variant', async () => {
+    let capturedHandler: CodegenHandler | null = null
+
+    const figmaMock = {
+      editorType: 'dev',
+      mode: 'codegen',
+      command: 'noop',
+      codegen: {
+        on: (_event: string, handler: CodegenHandler) => {
+          capturedHandler = handler
+        },
+      },
+      closePlugin: mock(() => {}),
+    } as unknown as typeof figma
+
+    codeModule.registerCodegen(figmaMock)
+
+    expect(capturedHandler).not.toBeNull()
+    if (capturedHandler === null) throw new Error('Handler not captured')
+
+    const componentSetNode = {
+      type: 'COMPONENT_SET',
+      name: 'ResponsiveButton',
+      visible: true,
+      componentPropertyDefinitions: {
+        viewport: {
+          type: 'VARIANT',
+          defaultValue: 'desktop',
+          variantOptions: ['mobile', 'desktop'],
+        },
+      },
+      children: [
+        {
+          type: 'COMPONENT',
+          name: 'viewport=mobile',
+          visible: true,
+          variantProperties: { viewport: 'mobile' },
+          children: [],
+          layoutMode: 'VERTICAL',
+          width: 320,
+          height: 100,
+        },
+        {
+          type: 'COMPONENT',
+          name: 'viewport=desktop',
+          visible: true,
+          variantProperties: { viewport: 'desktop' },
+          children: [],
+          layoutMode: 'HORIZONTAL',
+          width: 1200,
+          height: 100,
+        },
+      ],
+      defaultVariant: {
+        type: 'COMPONENT',
+        name: 'viewport=desktop',
+        visible: true,
+        variantProperties: { viewport: 'desktop' },
+        children: [],
+      },
+    } as unknown as SceneNode
+
+    const handler = capturedHandler as CodegenHandler
+    const result = await handler({
+      node: componentSetNode,
+      language: 'devup-ui',
+    })
+
+    // Should include responsive components result
+    const responsiveResult = result.find(
+      (r: unknown) =>
+        typeof r === 'object' &&
+        r !== null &&
+        'title' in r &&
+        (r as { title: string }).title.includes('Responsive'),
+    )
+    expect(responsiveResult).toBeDefined()
+  })
+
+  it('should generate responsive code for node with parent SECTION', async () => {
+    let capturedHandler: CodegenHandler | null = null
+
+    const figmaMock = {
+      editorType: 'dev',
+      mode: 'codegen',
+      command: 'noop',
+      codegen: {
+        on: (_event: string, handler: CodegenHandler) => {
+          capturedHandler = handler
+        },
+      },
+      closePlugin: mock(() => {}),
+    } as unknown as typeof figma
+
+    codeModule.registerCodegen(figmaMock)
+
+    expect(capturedHandler).not.toBeNull()
+    if (capturedHandler === null) throw new Error('Handler not captured')
+
+    // Create a SECTION node with children of different widths
+    const sectionNode = {
+      type: 'SECTION',
+      name: 'ResponsiveSection',
+      visible: true,
+      children: [
+        {
+          type: 'FRAME',
+          name: 'MobileFrame',
+          visible: true,
+          width: 375,
+          height: 200,
+          children: [],
+          layoutMode: 'VERTICAL',
+        },
+        {
+          type: 'FRAME',
+          name: 'DesktopFrame',
+          visible: true,
+          width: 1200,
+          height: 200,
+          children: [],
+          layoutMode: 'HORIZONTAL',
+        },
+      ],
+    }
+
+    // Create a child node that has the SECTION as parent
+    const childNode = {
+      type: 'FRAME',
+      name: 'ChildFrame',
+      visible: true,
+      width: 375,
+      height: 100,
+      children: [],
+      layoutMode: 'VERTICAL',
+      parent: sectionNode,
+    } as unknown as SceneNode
+
+    const handler = capturedHandler as CodegenHandler
+    const result = await handler({
+      node: childNode,
+      language: 'devup-ui',
+    })
+
+    // Should include responsive result from parent section
+    const responsiveResult = result.find(
+      (r: unknown) =>
+        typeof r === 'object' &&
+        r !== null &&
+        'title' in r &&
+        (r as { title: string }).title.includes('Responsive'),
+    )
+    expect(responsiveResult).toBeDefined()
+  })
+
+  it('should generate CLI with custom component imports', async () => {
+    let capturedHandler: CodegenHandler | null = null
+
+    const figmaMock = {
+      editorType: 'dev',
+      mode: 'codegen',
+      command: 'noop',
+      codegen: {
+        on: (_event: string, handler: CodegenHandler) => {
+          capturedHandler = handler
+        },
+      },
+      closePlugin: mock(() => {}),
+    } as unknown as typeof figma
+
+    codeModule.registerCodegen(figmaMock)
+
+    expect(capturedHandler).not.toBeNull()
+    if (capturedHandler === null) throw new Error('Handler not captured')
+
+    // Create a custom component that will be referenced
+    const customComponent = {
+      type: 'COMPONENT',
+      name: 'CustomButton',
+      visible: true,
+      children: [],
+      width: 100,
+      height: 40,
+      layoutMode: 'NONE',
+      componentPropertyDefinitions: {},
+      parent: null,
+    }
+
+    // Create an INSTANCE referencing the custom component
+    const instanceNode = {
+      type: 'INSTANCE',
+      name: 'CustomButton',
+      visible: true,
+      width: 100,
+      height: 40,
+      getMainComponentAsync: async () => customComponent,
+    }
+
+    // Create a COMPONENT that contains the INSTANCE
+    const componentNode = {
+      type: 'COMPONENT',
+      name: 'MyComponent',
+      visible: true,
+      children: [instanceNode],
+      width: 200,
+      height: 100,
+      layoutMode: 'VERTICAL',
+      componentPropertyDefinitions: {},
+      reactions: [],
+      parent: null,
+    } as unknown as SceneNode
+
+    // Create COMPONENT_SET parent with proper children array
+    const componentSetNode = {
+      type: 'COMPONENT_SET',
+      name: 'MyComponentSet',
+      componentPropertyDefinitions: {},
+      children: [componentNode],
+      defaultVariant: componentNode,
+      reactions: [],
+    }
+
+    // Set parent reference
+    ;(componentNode as { parent: unknown }).parent = componentSetNode
+
+    const handler = capturedHandler as CodegenHandler
+    const result = await handler({
+      node: componentNode,
+      language: 'devup-ui',
+    })
+
+    // Should include CLI outputs
+    const bashCLI = result.find(
+      (r: unknown) =>
+        typeof r === 'object' &&
+        r !== null &&
+        'title' in r &&
+        (r as { title: string }).title.includes('CLI (Bash)'),
+    )
+    const powershellCLI = result.find(
+      (r: unknown) =>
+        typeof r === 'object' &&
+        r !== null &&
+        'title' in r &&
+        (r as { title: string }).title.includes('CLI (PowerShell)'),
+    )
+
+    expect(bashCLI).toBeDefined()
+    expect(powershellCLI).toBeDefined()
+
+    // Check that custom component import is included (bash escapes quotes)
+    const bashCode = (bashCLI as { code: string } | undefined)?.code
+    const powershellCode = (powershellCLI as { code: string } | undefined)?.code
+
+    if (bashCode) {
+      expect(bashCode).toContain(
+        "import { CustomButton } from \\'@/components/CustomButton\\'",
+      )
+    }
+    if (powershellCode) {
+      expect(powershellCode).toContain(
+        "import { CustomButton } from '@/components/CustomButton'",
+      )
+    }
+  })
+})
diff --git a/src/code-impl.ts b/src/code-impl.ts
@@ -129,19 +129,12 @@ export function registerCodegen(ctx: typeof figma) {
             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,
+            const componentName = getComponentName(node)
+            responsiveComponentsCodes =
+              await ResponsiveCodegen.generateViewportResponsiveComponents(
+                node,
+                componentName,
               )
-            }
           }
 
           console.info(`[benchmark] devup-ui end ${Date.now() - time}ms`)
