Merge pull request #13 from marcomontalbano/add-datauri-to-output-com…

…ponents-as-es6 Add 'useDataUri' option
marcomontalbano · Nov 19, 2019 · 80f6579 · 80f6579
2 parents 5eac29d + 93cb3f3
commit 80f6579
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/packages/output-components-as-es6/index.js b/packages/output-components-as-es6/index.js
@@ -1,24 +1,44 @@
 const fs = require('fs');
 const path = require('path');
 const makeDir = require('make-dir');
+const svgToMiniDataURI = require('mini-svg-data-uri');
 
 const camelCase = (str) => str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => {
     if (p2) return p2.toUpperCase();
     return p1.toLowerCase();
 });
 
-module.exports = ({ output, useBase64 = false }) => {
+const getVariableName = (componentName) => {
+    const variableName = camelCase(componentName);
+
+    if (/^[\d]+/.test(variableName)) {
+        throw new Error(`"${componentName}" - Component names cannot start with a number.`);
+    }
+
+    return variableName;
+};
+
+module.exports = ({ output, useBase64 = false, useDataUri = false }) => {
     makeDir.sync(output);
     return async (pages) => {
         pages.forEach(({ name: pageName, components }) => {
             let code = '';
 
             components.forEach(({ name: componentName, svg }) => {
-                const variableName = camelCase(componentName);
-                if (/^[\d]+/.test(variableName)) {
-                    throw new Error(`"${componentName}" - Component names cannot start with a number.`);
+                const variableName = getVariableName(componentName);
+                let variableValue = svg;
+
+                // eslint-disable-next-line default-case
+                switch (true) {
+                case useBase64:
+                    variableValue = Buffer.from(svg).toString('base64');
+                    break;
+                case useDataUri:
+                    variableValue = svgToMiniDataURI(svg);
+                    break;
                 }
-                code += `export const ${variableName} = \`${useBase64 ? Buffer.from(svg).toString('base64') : svg}\`;\n`;
+
+                code += `export const ${variableName} = \`${variableValue}\`;\n`;
             });
 
             const filePath = path.resolve(output, `${pageName}.js`);

diff --git a/packages/output-components-as-es6/index.test.js b/packages/output-components-as-es6/index.test.js
@@ -47,6 +47,23 @@ describe('outputter as es6', () => {
         );
     });
 
+    it('should export all components into an es6 file using dataUri if set', async () => {
+        const writeFileSync = sinon.stub(fs, 'writeFileSync');
+        const pages = figma.getPages({ children: [figmaDocument.page1] });
+
+        await outputter({
+            output: 'output',
+            useDataUri: true,
+        })(pages);
+
+        expect(writeFileSync).to.be.calledOnce;
+        expect(writeFileSync).to.be.calledWithMatch(
+            'output/page1.js',
+            // eslint-disable-next-line max-len
+            "export const figmaLogo = `data:image/svg+xml,%3csvg width='40' height='60' viewBox='0 0 40 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3c/svg%3e`;",
+        );
+    });
+
     it('should throw an error if component starts with a number', async () => {
         const page = {
             ...figmaDocument.page1,

diff --git a/packages/output-components-as-es6/package-lock.json b/packages/output-components-as-es6/package-lock.json
diff --git a/packages/output-components-as-es6/package.json b/packages/output-components-as-es6/package.json
@@ -14,6 +14,7 @@
         "access": "public"
     },
     "dependencies": {
-        "make-dir": "~3.0.0"
+        "make-dir": "~3.0.0",
+        "mini-svg-data-uri": "~1.1.3"
     }
 }