fix(sources): support new Figma syntax for tracing component IDs to t…

…heir intrinsic dimensions (#252)
diez · Aug 16, 2019 · 112986e · 112986e
1 parent d18db10
commit 112986e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/packages/sources/src/exporters/figma.ts b/packages/sources/src/exporters/figma.ts
@@ -133,6 +133,7 @@ interface FigmaDimensions {
 
 interface FigmaNode {
   id: string;
+  componentId?: string;
   name: string;
   children?: FigmaNode[];
   absoluteBoundingBox?: FigmaDimensions;
@@ -379,6 +380,9 @@ const processFigmaNode = async (
   if (components.has(node.id) && node.absoluteBoundingBox) {
     componentDimensions.set(node.id, node.absoluteBoundingBox);
     components.delete(node.id);
+  } else if (node.componentId && components.has(node.componentId) && node.absoluteBoundingBox) {
+    componentDimensions.set(node.componentId, node.absoluteBoundingBox);
+    components.delete(node.componentId);
   }
 
   if (node.children) {

diff --git a/packages/sources/test/exporters/figma.test.ts b/packages/sources/test/exporters/figma.test.ts
@@ -39,13 +39,24 @@ const mockFullResponse: FigmaFile = {
   name: 'Hello',
   document: {
     children: [{
-      id: 'component',
+      // Legacy component format matches against ID.
+      id: 'legacyComponent',
       name: '',
       absoluteBoundingBox: {
         width: 1920,
         height: 1080,
       },
       children: [
+        {
+          id: '',
+          name: '',
+          // Modern component format matches against component ID.
+          componentId: 'component',
+          absoluteBoundingBox: {
+            width: 640,
+            height: 480,
+          },
+        },
         {
           id: '',
           name: '',
@@ -207,6 +218,9 @@ const mockFullResponse: FigmaFile = {
     }],
   },
   components: {
+    legacyComponent: {
+      name: 'Legacy Team Component',
+    },
     component: {
       name: 'Team Component',
     },
@@ -280,10 +294,10 @@ describe('Figma', () => {
         switch (uri) {
           case 'https://api.figma.com/v1/files/key':
             return callback(undefined, {statusCode: 200}, mockFullResponse);
-          case 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=1':
-          case 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=2':
-          case 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=3':
-          case 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=4':
+          case 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=1':
+          case 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=2':
+          case 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=3':
+          case 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=4':
             return callback(undefined, {statusCode: 200}, {
               images: {
                 component: uri.charAt(uri.length - 1),
@@ -333,7 +347,7 @@ describe('Figma', () => {
         {
           headers: {Authorization: 'Bearer mock-token'},
           json: true,
-          uri: 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=1',
+          uri: 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=1',
         },
         expect.anything(),
       );
@@ -343,7 +357,7 @@ describe('Figma', () => {
         {
           headers: {Authorization: 'Bearer mock-token'},
           json: true,
-          uri: 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=2',
+          uri: 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=2',
         },
         expect.anything(),
       );
@@ -353,7 +367,7 @@ describe('Figma', () => {
         {
           headers: {Authorization: 'Bearer mock-token'},
           json: true,
-          uri: 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=3',
+          uri: 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=3',
         },
         expect.anything(),
       );
@@ -363,18 +377,24 @@ describe('Figma', () => {
         {
           headers: {Authorization: 'Bearer mock-token'},
           json: true,
-          uri: 'https://api.figma.com/v1/images/key?format=png&ids=component&scale=4',
+          uri: 'https://api.figma.com/v1/images/key?format=png&ids=legacyComponent%2Ccomponent&scale=4',
         },
         expect.anything(),
       );
 
       expect(mockCodegen).toHaveBeenCalledWith({
         assets: new Map([[
           'components',
-          new Map([[
-            'TeamComponent',
-            {width: 1920, height: 1080, src: 'out/Hello.figma.contents/components/TeamComponent.png'},
-          ]]),
+          new Map([
+            [
+              'LegacyTeamComponent',
+              {width: 1920, height: 1080, src: 'out/Hello.figma.contents/components/LegacyTeamComponent.png'},
+            ],
+            [
+              'TeamComponent',
+              {width: 640, height: 480, src: 'out/Hello.figma.contents/components/TeamComponent.png'},
+            ],
+          ]),
         ]]),
         assetsDirectory: 'out/Hello.figma.contents',
         colors: [