Update Exporting

Author: owjs3901

manifest.json

@@ -36,6 +36,10 @@
     {
       "name": "Export Assets",
       "command": "export-assets"
+    },
+    {
+      "name": "Export Components",
+      "command": "export-components"
     }
   ]
 }

src/Element.ts

@@ -56,6 +56,7 @@ export class Element {
   componentType?: ComponentType
   skipChildren: boolean = false
   assets: Record<string, () => Promise<Uint8Array>> = {}
+  components: Record<string, () => Promise<string>> = {}
   constructor(node: SceneNode, parent?: Element) {
     this.node = node
     this.parent = parent
@@ -174,14 +175,25 @@ export class Element {
         break
       case 'RECTANGLE': {
         if (
-          (this.node.fills as any).length === 1 &&
-          (this.node.fills as any)[0].type === 'IMAGE'
+          (this.node.fills as any).find((fill: any) => fill.type === 'IMAGE')
         ) {
-          this.componentType = 'Image'
+          const css = await this.getCss()
+          this.componentType =
+            (this.node.fills as any).length === 1 ? 'Image' : 'Box'
           Object.assign(
             this.additionalProps,
             this.getImageProps('images', 'png'),
           )
+          if (this.componentType !== 'Image') {
+            this.additionalProps.bg = css.background.replace(
+              '<path-to-image>',
+              this.additionalProps.src,
+            )
+
+            delete this.additionalProps.src
+          } else {
+            this.additionalProps.bg = ''
+          }
           this.addAsset(this.node, 'png')
         }
         break
@@ -266,23 +278,46 @@ export class Element {
     return this.assets
   }
   addAsset(node: SceneNode, type: 'svg' | 'png') {
+    if (
+      type === 'svg' &&
+      this.getChildren().length &&
+      this.getChildren().every((c) => typeof c !== 'string' && !c.node.visible)
+    ) {
+      return
+    }
     if (this.parent) this.parent.addAsset(node, type)
     else
       this.assets[node.name + '.' + type] = async () => {
         const isSvg = type === 'svg'
-        const data = await node.exportAsync({
+        const options: ExportSettings = {
           format: isSvg ? 'SVG' : 'PNG',
-          constraint: isSvg
-            ? undefined
-            : {
-                type: 'SCALE',
-                value: 1.5,
-              },
-        })
+        }
+        if (options.format !== 'SVG') {
+          ;(options as any).constraint = {
+            type: 'SCALE',
+            value: 1.5,
+          }
+        } else {
+          ;(options as any).useAbsoluteBounds = true
+        }
+        const data = await node.exportAsync(options)
         return data
       }
   }
 
+  async getComponents(): Promise<Record<string, () => Promise<string>>> {
+    await this.render()
+    return this.components
+  }
+
+  addComponent(node: SceneNode) {
+    if (this.parent) this.parent.addComponent(node)
+    else
+      this.components[toPascal(node.name) + '.tsx'] = async () => {
+        return (await new Element(node).render()).trim()
+      }
+  }
+
   async render(dep: number = 0): Promise<string> {
     if (!this.node.visible) return ''
 
@@ -303,6 +338,7 @@ export class Element {
       const value = (
         await this.node.exportAsync({
           format: 'SVG_STRING',
+          useAbsoluteBounds: true,
         })
       ).toString()
 
@@ -492,6 +528,7 @@ export class Element {
     }
 
     if (this.node.type === 'COMPONENT') {
+      this.addComponent(this.node)
       const componentName = toPascal(this.node.name)
       const interfaceDecl = createInterface(
         componentName,

src/__tests__/Element.test.ts

@@ -17,6 +17,7 @@ function createNode(
     variantProperties,
     componentProperties,
     getMainComponentAsync,
+    visible = true,
     ...props
   }: {
     [_: string]: any
@@ -40,7 +41,7 @@ function createNode(
     textStyleId,
     parent,
     characters,
-    visible: true,
+    visible,
     layoutPositioning,
     width: props.width ? parseInt(props.width) : undefined,
     height: props.height ? parseInt(props.height) : undefined,
@@ -649,6 +650,7 @@ describe('Element', () => {
                   width: '6px',
                   height: '6px',
                   name: 'image',
+                  background: 'url(/images/image.png)',
                   fills: [
                     {
                       type: 'IMAGE',
@@ -694,6 +696,31 @@ describe('Element', () => {
 </Flex>`)
         })
       })
+
+      it('should render Rectangle with multiple fills', async () => {
+        const element = createElement('RECTANGLE', {
+          width: '6px',
+          height: '6px',
+          background: 'url(/images/image.png)',
+          fills: [
+            {
+              type: 'SOLID',
+              color: {
+                r: 1,
+                g: 0,
+                b: 0,
+                a: 1,
+              },
+            },
+            {
+              type: 'IMAGE',
+            },
+          ],
+        })
+        expect(await element.render()).toEqual(
+          `<Box bg="url(/images/image.png)" boxSize="6px" />`,
+        )
+      })
     })
 
     describe('Svg', () => {

src/__tests__/code.test.ts

@@ -1,8 +1,10 @@
 import { exportDevup, importDevup } from '../commands/devup'
 import { exportAssets } from '../commands/exportAssets'
+import { exportComponents } from '../commands/exportComponents'
 
 vi.mock('../commands/devup')
 vi.mock('../commands/exportAssets')
+vi.mock('../commands/exportComponents')
 
 beforeEach(() => {
   vi.resetModules()
@@ -47,7 +49,18 @@ it('should export assets', async () => {
   expect(exportAssets).toBeCalledTimes(1)
   expect(closePlugin).toBeCalledTimes(1)
 })
-
+it('should export components', async () => {
+  const closePlugin = vi.fn()
+  ;(globalThis as any).figma = {
+    editorType: 'figma',
+    command: 'export-components',
+    closePlugin,
+  }
+  vi.mocked(exportComponents).mockResolvedValueOnce()
+  await import('../code')
+  expect(exportComponents).toBeCalledTimes(1)
+  expect(closePlugin).toBeCalledTimes(1)
+})
 describe('codegen', () => {
   it('should generate code', async () => {
     const closePlugin = vi.fn()

src/code.ts

@@ -1,5 +1,6 @@
 import { exportDevup, importDevup } from './commands/devup'
 import { exportAssets } from './commands/exportAssets'
+import { exportComponents } from './commands/exportComponents'
 import { Element } from './Element'
 
 if (figma.editorType === 'dev' && figma.mode === 'codegen') {
@@ -23,4 +24,7 @@ switch (figma.command) {
   case 'export-assets':
     exportAssets().finally(() => figma.closePlugin())
     break
+  case 'export-components':
+    exportComponents().finally(() => figma.closePlugin())
+    break
 }

src/commands/__tests__/exportAssets.test.ts

@@ -33,6 +33,7 @@ function createNode(
     layoutSizingHorizontal,
     styledTextSegments = [],
     variantProperties,
+    visible = true,
     ...props
   }: {
     [_: string]: any
@@ -54,7 +55,7 @@ function createNode(
     textStyleId,
     parent,
     characters,
-    visible: true,
+    visible,
     layoutPositioning,
     width: props.width ? parseInt(props.width) : undefined,
     height: props.height ? parseInt(props.height) : undefined,
@@ -97,10 +98,22 @@ describe('exportAssets', () => {
     })
     ;(globalThis as any).figma.currentPage.selection = [node]
     await exportAssets()
-    expect(notifyMock).toHaveBeenCalledWith(
-      'No assets found',
-      expect.any(Object),
-    )
+    expect(notifyMock).toHaveBeenCalledWith('No assets found')
+  })
+
+  it('should not export assets if all children are invisible', async () => {
+    const node = createNode('GROUP', {
+      fills: [],
+      children: [
+        createNode('VECTOR', {
+          fills: [],
+          visible: false,
+        }),
+      ],
+    })
+    ;(globalThis as any).figma.currentPage.selection = [node]
+    await exportAssets()
+    expect(downloadFile).not.toHaveBeenCalled()
   })
 
   it('should export assets and call downloadFile', async () => {
@@ -122,6 +135,7 @@ describe('exportAssets', () => {
               scaleMode: 'FILL',
             },
           ],
+          background: 'red',
           width: '100px',
           height: '100px',
           name: 'image.png',
@@ -139,4 +153,21 @@ describe('exportAssets', () => {
       expect.any(Object),
     )
   })
+
+  it('should raise error if exportAsync fails', async () => {
+    const node = createNode('RECTANGLE', {
+      fills: [
+        {
+          type: 'IMAGE',
+        },
+      ],
+    })
+    ;(globalThis as any).figma.currentPage.selection = [node]
+    ;(node.exportAsync as any) = vi.fn().mockRejectedValue('test')
+    await exportAssets()
+    expect(notifyMock).toHaveBeenCalledWith('Error exporting assets', {
+      timeout: 3000,
+      error: true,
+    })
+  })
 })