Merge pull request #76 from marcomontalbano/figmaexportrc-ts

Usage of .figmaexportrc.ts
marcomontalbano · Sep 18, 2020 · 7a9a2bf · 7a9a2bf
2 parents 4fdd70e + 96001fa
commit 7a9a2bf
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 15 deletions.
diff --git a/.figmaexportrc.example.js b/.figmaexportrc.example.js
@@ -1,6 +1,15 @@
 module.exports = {
 
     commands: [
+        ['styles', {
+            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
+            outputters: [
+                require('@figma-export/output-styles-as-sass')({
+                    output: './output'
+                })
+            ]
+        }],
+
         ['components', {
             fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
             onlyFromPages: ['icons', 'monochrome'],

diff --git a/.figmaexportrc.example.ts b/.figmaexportrc.example.ts
@@ -0,0 +1,49 @@
+/**
+ * If you want to try this configuration you can just run:
+ *   $ npm install --save-dev typescript ts-node @types/node @figma-export/types
+ *   $ npm install --save-dev @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg @figma-export/output-components-as-es6
+ */
+
+import { FigmaExportRC, StylesCommandOptions, ComponentsCommandOptions } from '@figma-export/types';
+
+import outputStylesAsSass from '@figma-export/output-styles-as-sass';
+import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo';
+import outputComponentsAsSvg from '@figma-export/output-components-as-svg';
+import outputComponentsAsEs6 from '@figma-export/output-components-as-es6';
+
+const styleOptions: StylesCommandOptions = {
+    fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
+    outputters: [
+        outputStylesAsSass({
+            output: './output'
+        })
+    ]
+};
+
+const componentOptions: ComponentsCommandOptions = {
+    fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
+    onlyFromPages: ['icons', 'monochrome'],
+    transformers: [
+        transformSvgWithSvgo({
+            plugins: [
+                { removeViewBox: false },
+                { removeDimensions: true }
+            ]
+        })
+    ],
+    outputters: [
+        outputComponentsAsSvg({
+            output: './output'
+        }),
+        outputComponentsAsEs6({
+            output: './output'
+        })
+    ]
+};
+
+(module.exports as FigmaExportRC) = {
+    commands: [
+        ['styles', styleOptions],
+        ['components', componentOptions]
+    ]
+};
diff --git a/README.md b/README.md
@@ -228,6 +228,27 @@ If needed you can also provide a different configuration file.
 }
 ```
 
+#### TypeScript
+
+If you prefer, you can create a `.figmaexportrc.ts` and use TypeScript instead.
+For doing so, you just need to install a few new dependencies in your project.
+
+```sh
+npm install --save-dev typescript ts-node @types/node @figma-export/types
+```
+
+and slightly change your `package.json`
+
+```diff
+{
+  "scripts": {
++   "figma:export": "ts-node ./node_modules/.bin/figma-export use-config .figmaexportrc.ts"
+  }
+}
+```
+
+Take a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more details.
+
 ## :books: More Packages
 
 For the list of all official packages or if you want to create your own transformer or outputter you can continue reading [CLI Documentation](/packages/cli#readme).
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "predebug": "yarn build",
-    "debug": "./packages/cli/bin/run use-config",
+    "debug": "./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')\"",
     "clean": "rm -rf node_modules/ output/ */*/node_modules */*/output */*/dist */*/tsconfig.tsbuildinfo",
     "postinstall": "lerna bootstrap",

diff --git a/packages/core/src/lib/export-components.ts b/packages/core/src/lib/export-components.ts
@@ -3,14 +3,7 @@ import { Document } from 'figma-js';
 
 import { getClient, getPages, enrichPagesWithSvg } from './figma';
 
-type Options = {
-    token: string;
-    fileId: string;
-    onlyFromPages?: string[];
-    transformers?: FigmaExport.StringTransformer[];
-    outputters?: FigmaExport.ComponentOutputter[];
-    log?: (msg: string) => void;
-}
+type Options = FigmaExport.BaseCommandOptions & FigmaExport.ComponentsCommandOptions;
 
 export const components = async ({
     token,

diff --git a/packages/core/src/lib/export-styles.ts b/packages/core/src/lib/export-styles.ts
@@ -3,12 +3,7 @@ import * as FigmaExport from '@figma-export/types';
 import { getClient } from './figma';
 import { fetchStyles, parseStyles } from './figmaStyles';
 
-type Options = {
-    token: string;
-    fileId: string;
-    outputters?: FigmaExport.StyleOutputter[];
-    log?: (msg: string) => void;
-}
+type Options = FigmaExport.BaseCommandOptions & FigmaExport.StylesCommandOptions;
 
 export const styles = async ({
     token,

diff --git a/packages/types/src/commands.ts b/packages/types/src/commands.ts
@@ -0,0 +1,23 @@
+import { StringTransformer, ComponentOutputter } from './global';
+import { StyleOutputter } from './styles';
+
+export type BaseCommandOptions = {
+    token: string;
+    log?: (msg: string) => void;
+}
+
+export type ComponentsCommandOptions = {
+    fileId: string;
+    onlyFromPages?: string[];
+    transformers?: StringTransformer[];
+    outputters?: ComponentOutputter[];
+}
+
+export type StylesCommandOptions = {
+    fileId: string;
+    outputters?: StyleOutputter[];
+}
+
+export type FigmaExportRC = {
+    commands: (['styles', StylesCommandOptions] | ['components', ComponentsCommandOptions])[]
+}
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -1,2 +1,3 @@
 export * from './global';
 export * from './styles';
+export * from './commands';