Update dependencies

.github/workflows/main.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [10.13.0, 10.x, 12.x, 13.x, 14.x, 15.x, 16.x]
+        node: [10.13.0, 10.x, 12.x, 14.x, 15.x, 16.x]
 
     steps:
     - name: Checkout 🛎️

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/marcomontalbano/figma-export"
   },
   "scripts": {
+    "prepare": "husky install",
     "predebug": "yarn build",
     "debug": "ts-node ./packages/cli/bin/run use-config .figmaexportrc.ts",
     "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
@@ -27,7 +28,8 @@
     "website:build": "lerna run --scope @figma-export/website build --stream",
     "website:serve": "lerna run --scope @figma-export/website serve --stream",
     "lerna:version": "lerna version",
-    "lerna:ncu": "npx lerna exec 'npx npm-check-updates -u' --stream"
+    "lerna:ncu": "npx lerna exec 'npx npm-check-updates -u' --stream",
+    "pre-commit": "lint-staged -c ./lint-staged.config.js"
   },
   "author": "Marco Montalbano <me@marcomontalbano.com>",
   "nyc": {
@@ -38,42 +40,37 @@
     ]
   },
   "devDependencies": {
-    "@types/chai": "~4.2.16",
-    "@types/chai-as-promised": "^7.1.3",
+    "@types/chai": "~4.2.19",
+    "@types/chai-as-promised": "^7.1.4",
     "@types/chai-things": "0.0.34",
     "@types/mocha": "~8.2.2",
-    "@types/node": "~14.14.41",
+    "@types/node": "~14.17.3",
     "@types/sinon": "~9.0.11",
     "@types/sinon-chai": "~3.2.5",
-    "@typescript-eslint/eslint-plugin": "~4.22.0",
-    "@typescript-eslint/parser": "~4.22.0",
+    "@typescript-eslint/eslint-plugin": "~4.28.0",
+    "@typescript-eslint/parser": "~4.28.0",
     "chai": "~4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-things": "~0.2.0",
-    "eslint": "~7.24.0",
+    "eslint": "~7.29.0",
     "eslint-config-airbnb-base": "~14.2.1",
     "eslint-config-developit": "~1.2.0",
-    "eslint-plugin-chai-friendly": "~0.6.0",
-    "eslint-plugin-import": "~2.22.1",
-    "husky": "~4.3.8",
+    "eslint-plugin-chai-friendly": "~0.7.1",
+    "eslint-plugin-import": "~2.23.4",
+    "husky": "~6.0.0",
     "lerna": "~3.22.1",
     "lerna-changelog": "~1.0.1",
     "lint-staged": "~10.5.4",
-    "mocha": "~8.3.2",
-    "nock": "~13.0.11",
+    "mocha": "~8.4.0",
+    "nock": "~13.1.0",
     "nyc": "~15.1.0",
     "sinon": "~9.2.4",
-    "sinon-chai": "~3.6.0",
+    "sinon-chai": "~3.7.0",
     "ts-node": "~9.1.1",
-    "typescript": "~4.2.4"
+    "typescript": "~4.3.4"
   },
   "dependencies": {},
   "engines": {
     "node": ">= 10.13"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged -c ./lint-staged.config.js"
-    }
   }
 }

packages/cli/package.json

@@ -16,12 +16,12 @@
     "@oclif/config": "~1.17.0",
     "@oclif/errors": "~1.3.4",
     "@oclif/plugin-help": "~3.2.2",
-    "ora": "~5.4.0"
+    "ora": "~5.4.1"
   },
   "devDependencies": {
     "@oclif/dev-cli": "~1.26.0",
     "@oclif/test": "~1.2.8",
-    "globby": "~11.0.3"
+    "globby": "~11.0.4"
   },
   "engines": {
     "node": ">= 10.13"

packages/core/package.json

@@ -25,7 +25,7 @@
     "dependencies": {
         "@figma-export/types": "^3.3.0",
         "axios": "~0.21.1",
-        "figma-js": "~1.13.0",
+        "figma-js": "~1.14.0",
         "p-limit": "^3.1.0"
     },
     "engines": {

packages/core/src/lib/_config.test.ts

@@ -2,7 +2,7 @@
 import * as FigmaExport from '@figma-export/types';
 import * as Figma from 'figma-js';
 
-const svg = {
+export const svg = {
     domain: 'https://s3-us-west-2.amazonaws.com',
     path: '/figma-alpha-api/img/7d80/9a7f/49ce9d382e188bc37b1fa83f83ff7c3f',
     content: '<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>',
@@ -11,64 +11,85 @@ const svg = {
     },
 };
 
-const componentWithNumber = {
+export const componentWithNumber = {
     id: '12:3',
     name: '1-icon',
     type: 'COMPONENT',
 };
 
-const componentWithSlashedName = {
+export const componentWithSlashedName: Figma.Node = {
+    ...({} as Figma.Component),
     id: '9:10',
     name: 'icon/eye',
     type: 'COMPONENT',
+};
+
+export const componentWithSlashedNameOutput: FigmaExport.ComponentNode = {
+    ...componentWithSlashedName,
     svg: svg.content,
+    figmaExport: {
+        dirname: '.',
+        basename: 'icon/eye',
+    },
 };
 
-const component1: FigmaExport.ComponentNode = {
+export const component1: Figma.Node = {
     ...({} as Figma.Component),
     id: '10:8',
     name: 'Figma-Logo',
     type: 'COMPONENT',
-    svg: svg.content,
+};
+
+export const componentOutput1: FigmaExport.ComponentNode = {
+    ...component1,
+    svg: '',
     figmaExport: {
         dirname: '.',
         basename: 'Figma-Logo',
     },
 };
 
-const component2: FigmaExport.ComponentNode = {
+export const component2: Figma.Node = {
     ...({} as Figma.Component),
     id: '8:1',
     name: 'Search',
     type: 'COMPONENT',
-    svg: svg.content,
+};
+
+export const componentOutput2: FigmaExport.ComponentNode = {
+    ...component2,
+    svg: '',
     figmaExport: {
         dirname: '.',
         basename: 'Figma-Search',
     },
 };
 
-const component3: FigmaExport.ComponentNode = {
+export const component3: Figma.Node = {
     ...({} as Figma.Component),
     id: '9:1',
     name: 'Login',
     type: 'COMPONENT',
-    svg: svg.content,
+};
+
+export const componentOutput3: FigmaExport.ComponentNode = {
+    ...component3,
+    svg: '',
     figmaExport: {
         dirname: '.',
         basename: 'Login',
     },
 };
 
-const group1: Figma.Group = {
+export const group1: Figma.Group = {
     ...({} as Figma.Group),
     id: '26:0',
     name: 'A Group',
     type: 'GROUP',
     children: [component3],
 };
 
-const page1: Figma.Canvas = {
+export const page1: Figma.Canvas = {
     ...({} as Figma.Canvas),
     id: '10:6',
     name: 'page1',
@@ -79,7 +100,7 @@ const page1: Figma.Canvas = {
     ],
 };
 
-const page2: Figma.Canvas = {
+export const page2: Figma.Canvas = {
     ...({} as Figma.Canvas),
     id: '10:7',
     name: 'page2',
@@ -89,20 +110,20 @@ const page2: Figma.Canvas = {
     ],
 };
 
-const pageWithoutComponents: Figma.Canvas = {
+export const pageWithoutComponents: Figma.Canvas = {
     ...({} as Figma.Canvas),
     id: '10:7',
     name: 'page2',
     type: 'CANVAS',
     children: [],
 };
 
-const createDocument = (props: any): Figma.Document => ({
+export const createDocument = (props: any): Figma.Document => ({
     ...({} as Figma.Document),
     ...props,
 });
 
-const createPage = (children: any): Figma.Document => ({
+export const createPage = (children: any): Figma.Document => ({
     ...({} as Figma.Document),
     children: [{
         ...({} as Figma.Canvas),
@@ -111,18 +132,3 @@ const createPage = (children: any): Figma.Document => ({
         children,
     }],
 });
-
-export {
-    componentWithNumber,
-    componentWithSlashedName,
-    component1,
-    component2,
-    component3,
-    group1,
-    page1,
-    page2,
-    pageWithoutComponents,
-    svg,
-    createPage,
-    createDocument,
-};

packages/core/src/lib/figma.test.ts

@@ -28,8 +28,8 @@ describe('figma.', () => {
                 figmaDocument.component1,
                 figmaDocument.group1,
             ])).to.eql([
-                figmaDocument.component1,
-                figmaDocument.component3,
+                figmaDocument.componentOutput1,
+                figmaDocument.componentOutput3,
             ]);
         });
     });

packages/core/src/lib/figma.ts

@@ -12,15 +12,14 @@ import {
     chunk,
 } from './utils';
 
-type NodeWithChildren = FigmaExport.ComponentNode | Figma.Group | Figma.Frame | Figma.Instance | Figma.BooleanGroup;
-
-const getComponents = (children: readonly NodeWithChildren[] = []): FigmaExport.ComponentNode[] => {
+const getComponents = (children: readonly Figma.Node[] = []): FigmaExport.ComponentNode[] => {
     let components: FigmaExport.ComponentNode[] = [];
 
     children.forEach((component) => {
         if (component.type === 'COMPONENT') {
             components.push({
                 ...component,
+                svg: '',
                 figmaExport: {
                     dirname: dirname(component.name),
                     basename: basename(component.name),
@@ -29,10 +28,12 @@ const getComponents = (children: readonly NodeWithChildren[] = []): FigmaExport.
             return;
         }
 
-        components = [
-            ...components,
-            ...getComponents((component.children as NodeWithChildren[])),
-        ];
+        if ('children' in component) {
+            components = [
+                ...components,
+                ...getComponents((component.children)),
+            ];
+        }
     });
 
     return components;

packages/output-components-as-es6/package.json

@@ -26,7 +26,7 @@
         "@figma-export/types": "^3.3.0",
         "@figma-export/utils": "^3.3.0",
         "make-dir": "~3.1.0",
-        "mini-svg-data-uri": "~1.2.3"
+        "mini-svg-data-uri": "~1.3.3"
     },
     "engines": {
         "node": ">= 10.13"