@figma-export/output-components-as-es6 - npm Package Compare versions

index.js

		@@ -11,16 +11,17 @@ const fs = require('fs');
		return async (pages) => {
		let code = '';
		Object.entries(pages).forEach(([, page]) => {
		Object.entries(page).forEach(([filename, { svg }]) => {
		const variableName = camelCase(filename);
		pages.forEach(({ name: pageName, components }) => {
		let code = '';

		components.forEach(({ name: componentName, svg }) => {
		const variableName = camelCase(componentName);
		if (/^[\d]+/.test(variableName)) {
		throw new Error(`"${filename}" - Component names cannot start with a number.`);
		throw new Error(`"${componentName}" - Component names cannot start with a number.`);
		}
		code += `export const ${variableName} = \`${svg}\`;\n`;
		});

		const filePath = path.resolve(output, `${pageName}.js`);
		fs.writeFileSync(filePath, code);
		});

		const filePath = path.resolve(output, 'figma-components.js');
		fs.writeFileSync(filePath, code);
		};
		};

index.test.js

		@@ -14,14 +14,8 @@ /* eslint-disable no-console */
		describe('outputter as es6', () => {
		let sandbox;

		beforeEach(() => {
		sandbox = sinon.createSandbox();
		});

		afterEach(() => {
		sandbox.restore();
		sinon.restore();
		});

		it('should export all components into an es6 file', async () => {
		const writeFileSync = sandbox.stub(fs, 'writeFileSync');
		const writeFileSync = sinon.stub(fs, 'writeFileSync');
		const pages = utils.getPages({ children: [figmaDocument.page1] });
		@@ -34,4 +28,25 @@
		expect(writeFileSync).to.be.calledOnce;
		expect(writeFileSync).to.be.calledWithMatch('output/figma-components.js', 'export const figmaLogo = `undefined`;');
		expect(writeFileSync).to.be.calledWithMatch('output/page1.js', 'export const figmaLogo = `undefined`;');
		});

		it('should throw an error if component starts with a number', async () => {
		const page = {
		...figmaDocument.page1,
		children: [figmaDocument.componentWithNumber],
		};

		sinon.stub(fs, 'writeFileSync');

		const pages = utils.getPages({ children: [page] });
		const spyOutputter = sinon.spy(outputter);

		return spyOutputter({
		output: 'output',
		})(pages).then(() => {
		sinon.assert.fail();
		}).catch((err) => {
		expect(err).to.be.an('Error');
		expect(err.message).to.be.equal('"1-icon" - Component names cannot start with a number.');
		});
		});
		});

package.json

		{
		"name": "@figma-export/output-components-as-es6",
		"version": "0.0.1-alpha.5",
		"version": "0.0.1-alpha.6",
		"description": "Outputter for @figma-export that exports components in javascript file",
		@@ -16,3 +16,3 @@ "main": "index.js",
		},
		"gitHead": "50c474ee19e7b9e91a6cb941bc22f883181cba6d"
		"gitHead": "c6a3927a3a1d7eb2a116afc134fa2492a4c251f9"
		}

README.md

		@@ -5,2 +5,22 @@ # @figma-export/output-components-as-es6

		With this outputter you can export all components as variables insinde a `.js` file called with the page name.

		This is a sample of the output:

		```sh
		$ tree output/
		# output/
		# ├── icons.js
		# └── monochrome.js
		```

		For each file you will have a list of `export`.

		```js
		// icons.js

		export const figmaExport = `<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
		export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
		```

		## Install
		@@ -7,0 +27,0 @@

New alerts