Skip to content

Commit

Permalink
Merge ed3e7f2 into f6d05e6
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcomontalbano
marcomontalbano committed May 21, 2022
2 parents f6d05e6 + ed3e7f2 commit 15e648c
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 19 deletions.
4 changes: 2 additions & 2 deletions packages/core/src/lib/_config.test.ts
View file
Expand Up @@ -20,7 +20,7 @@ export const componentWithNumber = {
export const componentWithSlashedName: Figma.Node = {
...({} as Figma.Component),
id: '9:10',
name: 'icon/eye',
name: 'icon/Figma-logo',
type: 'COMPONENT',
};

Expand All @@ -30,7 +30,7 @@ export const componentWithSlashedNameOutput: FigmaExport.ComponentNode = {
figmaExport: {
id: '9:10',
dirname: '.',
basename: 'icon/eye',
basename: 'icon/Figma-logo',
},
};

Expand Down
6 changes: 3 additions & 3 deletions packages/output-components-as-svg/src/index.test.ts
View file
Expand Up @@ -39,7 +39,7 @@ describe('outputter as svg', () => {
})(pages);

expect(writeFileSync).to.be.calledOnce;
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.svg');
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Figma-logo.svg');
});

describe('options', () => {
Expand All @@ -55,7 +55,7 @@ describe('outputter as svg', () => {
})(pages);

expect(writeFileSync).to.be.calledOnce;
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/fakePage-eye.svg');
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/fakePage-Figma-logo.svg');
});

it('should be able to customize "dirname"', async () => {
Expand All @@ -68,7 +68,7 @@ describe('outputter as svg', () => {
})(pages);

expect(writeFileSync).to.be.calledOnce;
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/fakePage-eye.svg');
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/fakePage-Figma-logo.svg');
});
});
});
7 changes: 5 additions & 2 deletions packages/output-components-as-svgr/README.md
View file
Expand Up @@ -51,7 +51,7 @@ module.exports = {

`output` is **mandatory**.

`getDirname`, `getComponentName`, `getFileExtension`, `getExportTemplate` and `getSvgrConfig` are **optional**.
`getDirname`, `getComponentName`, `getComponentFilename`, `getFileExtension`, `getExportTemplate` and `getSvgrConfig` are **optional**.

```js
const path = require('path');
Expand All @@ -63,18 +63,21 @@ require('@figma-export/output-components-as-svgr')({
output: './output',
getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
getComponentName: (options) => `${pascalCase(options.basename)}`,
getComponentFilename = (options): string => `${getComponentName(options)}`,
getFileExtension: (options) => '.jsx',
getSvgrConfig: (options) => ({}),
getExportTemplate = (options): string => {
const reactComponentName = getComponentName(options);
const reactComponentFilename = `${reactComponentName}${getFileExtension(options)}`;
const reactComponentFilename = `${getComponentFilename(options)}${getFileExtension(options)}`;
return `export { default as ${reactComponentName} } from './${reactComponentFilename}';`;
},
})
```

> *defaults may change, please refer to `./src/index.ts`*
`getComponentFilename` if not set, it will use the same value for `getComponentName`.

`getSvgrConfig` is a function that returns the [SVGR configuration](https://react-svgr.com/docs/options/) object.

## Install
Expand Down
54 changes: 44 additions & 10 deletions packages/output-components-as-svgr/src/index.test.ts
View file
Expand Up @@ -2,6 +2,7 @@ import sinon from 'sinon';
import { expect } from 'chai';
import * as svgr from '@svgr/core';
import nock from 'nock';
import { camelCase, kebabCase } from '@figma-export/utils';
import * as figmaDocument from '../../core/src/lib/_config.test';
import * as figma from '../../core/src/lib/figma';
import fs = require('fs');
Expand Down Expand Up @@ -113,7 +114,7 @@ describe('outputter as svgr', () => {
})(pages);

expect(writeFileSync).to.be.calledTwice;
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.jsx');
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/FigmaLogo.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js');
});

Expand All @@ -127,18 +128,51 @@ describe('outputter as svgr', () => {
getDirname: (options) => `${options.dirname}`,
})(pages);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/Eye.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch('output/icon/index.js', "from './Eye.jsx';");
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/FigmaLogo.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch(
'output/icon/index.js',
"export { default as FigmaLogo } from './FigmaLogo.jsx';",
);
});

it('should be able to customize "componentName"', async () => {
it('should be able to customize "componentName" (also "componentFilename" will be updated if not set)', async () => {
await outputter({
output: 'output',
getComponentName: (options) => `${options.basename}`,
getComponentName: (options) => options.basename.toUpperCase(),
})(pages);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js', "from './eye.jsx';");
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/FIGMA-LOGO.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch(
'output/fakePage/icon/index.js',
"export { default as FIGMA-LOGO } from './FIGMA-LOGO.jsx';",
);
});

it('should be able to customize "componentFilename"', async () => {
await outputter({
output: 'output',
getComponentFilename: (options) => kebabCase(options.basename).toLowerCase(),
})(pages);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/figma-logo.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch(
'output/fakePage/icon/index.js',
"export { default as FigmaLogo } from './figma-logo.jsx';",
);
});

it('should be able to customize both "componentName" and "componentFilename"', async () => {
await outputter({
output: 'output',
getComponentName: (options) => options.basename.toUpperCase(),
getComponentFilename: (options) => camelCase(options.basename),
})(pages);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/figmaLogo.jsx');
expect(writeFileSync.secondCall).to.be.calledWithMatch(
'output/fakePage/icon/index.js',
"export { default as FIGMA-LOGO } from './figmaLogo.jsx';",
);
});

it('should be able to customize "fileExtension"', async () => {
Expand All @@ -147,8 +181,8 @@ describe('outputter as svgr', () => {
getFileExtension: () => '.js',
})(pages);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.js');
expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js', "from './Eye.js';");
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/FigmaLogo.js');
expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js', "from './FigmaLogo.js';");
});

it('should be able to customize "svgrConfig"', async () => {
Expand All @@ -159,7 +193,7 @@ describe('outputter as svgr', () => {
getSvgrConfig: () => ({ native: true }),
})(pagesWithSvg);

expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.jsx');
expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/FigmaLogo.jsx');
expect(svgrAsync.firstCall).to.be.calledWithMatch(figmaDocument.componentWithSlashedNameOutput.svg, { native: true });
});
});
Expand Down
6 changes: 4 additions & 2 deletions packages/output-components-as-svgr/src/index.ts
View file
Expand Up @@ -9,6 +9,7 @@ type Options = {
output: string;
getDirname?: (options: FigmaExport.ComponentOutputterParamOption) => string;
getComponentName?: (options: FigmaExport.ComponentOutputterParamOption) => string;
getComponentFilename?: (options: FigmaExport.ComponentOutputterParamOption) => string;
getFileExtension?: (options: FigmaExport.ComponentOutputterParamOption) => string;
getExportTemplate?: (options: FigmaExport.ComponentOutputterParamOption) => string;

Expand All @@ -30,11 +31,12 @@ export = ({
output,
getDirname = (options): string => `${options.pageName}${path.sep}${options.dirname}`,
getComponentName = (options): string => `${pascalCase(options.basename)}`,
getComponentFilename = (options): string => `${getComponentName(options)}`,
getFileExtension = (): string => '.jsx',
getSvgrConfig = (): Config => ({ }),
getExportTemplate = (options): string => {
const reactComponentName = getComponentName(options);
const reactComponentFilename = `${reactComponentName}${getFileExtension(options)}`;
const reactComponentFilename = `${getComponentFilename(options)}${getFileExtension(options)}`;
return `export { default as ${reactComponentName} } from './${reactComponentFilename}';`;
},
}: Options): FigmaExport.ComponentOutputter => {
Expand All @@ -50,7 +52,7 @@ export = ({
};

const reactComponentName = getComponentName(options);
const reactComponentFilename = `${reactComponentName}${getFileExtension(options)}`;
const reactComponentFilename = `${getComponentFilename(options)}${getFileExtension(options)}`;
const filePath = path.resolve(output, getDirname(options));

fs.mkdirSync(filePath, { recursive: true });
Expand Down

0 comments on commit 15e648c

Please sign in to comment.