Skip to content

Commit 3e80315

Browse files
nivekcodenivekcode
authored
Merge pull request #181 from theotonge/fix/type-complete-icon-set
fix: error for lots of icons in completeIconSet
2 parents 0b2ff27 + b0f2854 commit 3e80315

File tree

4 files changed

+127
-23
lines changed

4 files changed

+127
-23
lines changed

‎README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
![npms.io (final)](https://img.shields.io/npms-io/maintenance-score/svg-to-ts) ![GitHub Workflow](https://img.shields.io/github/workflow/status/kreuzerk/svg-to-ts/release) ![GitHub](https://img.shields.io/github/license/kreuzerk/svg-to-ts) ![npm](https://img.shields.io/npm/v/svg-to-ts)
88

99
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
10+
1011
[![All Contributors](https://img.shields.io/badge/all_contributors-20-orange.svg?style=flat-square)](#contributors-)
12+
1113
<!-- ALL-CONTRIBUTORS-BADGE:END -->
1214

1315
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -252,7 +254,7 @@ accepts an object with the filename as key and the svg data as key.
252254
| outputDirectory | string | "./dist" | name of the output directory |
253255
| objectName | string | default - export | name of the exported const - if nothing is set - default export will be used |
254256
| verbose | boolean | false | defines if the log should contain additional information. Can be useful for debugging |
255-
| generateType | boolean | true | defines if it's needed to generate type |
257+
| generateType | boolean | true | defines if a type should be generated |
256258
| typeName | string | MyIconType | name of the type to be used when `generateType` is set to `true` |
257259
| namePrefix | string | | prefix to be used for the name property included in the generated constant |
258260

@@ -295,9 +297,9 @@ Only the icons included in the consuming SPA also end up in the final bundle of
295297

296298
| --version | type | default | description |
297299
| --------------------- | -------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- |
298-
| typeName | string | myIcons | name of the generated type |
299300
| tsx | boolean | false | Generate TSX file which can be used as React components out of the box |
300-
| generateType | boolean | false | prevent generating enumeration type |
301+
| generateType | boolean | false | defines if a type should be generated |
302+
| typeName | string | myIcons | name of the type to be used when `generateType` is set to `true` |
301303
| generateTypeObject | boolean | false | generate type object |
302304
| generateEnum | boolean | false | generate enum object |
303305
| prefix | string | myIcon | prefix for the generated svg constants |
@@ -389,8 +391,8 @@ end up there.
389391
| ------------------------- | -------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
390392
| barrelFileName | string | index | name of the generated type |
391393
| tsx | boolean | false | Generate TSX file which can be used as React components out of the box |
392-
| typeName | string | myIcons | name of the generated type |
393-
| generateType | boolean | false | prevent generating enumeration type |
394+
| generateType | boolean | false | defines if a type should be generated |
395+
| typeName | string | myIcons | name of the type to be used when `generateType` is set to `true` |
394396
| generateTypeObject | boolean | false | generate type object |
395397
| generateEnum | boolean | false | generate enum object |
396398
| exportCompleteIconSet | boolean | false | Specifies if the complete icon set should be exported or not (can be very handy for showcases) |

‎src/lib/converters/files.converter.ts‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@ async function generateTSXFiles(conversionOptions: FilesConversionOptions) {
3636
iconsFolderName,
3737
exportCompleteIconSet,
3838
completeIconSetName,
39-
barrelFileName
39+
barrelFileName,
40+
interfaceName,
41+
generateType,
42+
modelFileName
4043
} = conversionOptions;
4144

4245
const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
@@ -51,7 +54,16 @@ async function generateTSXFiles(conversionOptions: FilesConversionOptions) {
5154

5255
if (exportCompleteIconSet) {
5356
await callAndMonitorAsync<void>(
54-
generateCompleteIconSet.bind({}, svgDefinitions, outputDirectory, iconsFolderName, completeIconSetName),
57+
generateCompleteIconSet.bind(
58+
{},
59+
svgDefinitions,
60+
outputDirectory,
61+
iconsFolderName,
62+
completeIconSetName,
63+
interfaceName,
64+
generateType,
65+
modelFileName
66+
),
5567
'Export complete icon set'
5668
);
5769
generatedFileNames.push(completeIconSetName);
@@ -80,7 +92,8 @@ async function generateTSFiles(conversionOptions: FilesConversionOptions) {
8092
exportCompleteIconSet,
8193
completeIconSetName,
8294
compilationOutput,
83-
barrelFileName
95+
barrelFileName,
96+
generateType
8497
} = conversionOptions;
8598
await callAndMonitorAsync<void>(
8699
deleteFolder.bind({}, `${outputDirectory}/${iconsFolderName}`),
@@ -98,7 +111,16 @@ async function generateTSFiles(conversionOptions: FilesConversionOptions) {
98111

99112
if (exportCompleteIconSet) {
100113
await callAndMonitorAsync<void>(
101-
generateCompleteIconSet.bind({}, svgDefinitions, outputDirectory, iconsFolderName, completeIconSetName),
114+
generateCompleteIconSet.bind(
115+
{},
116+
svgDefinitions,
117+
outputDirectory,
118+
iconsFolderName,
119+
completeIconSetName,
120+
interfaceName,
121+
modelFileName,
122+
generateType
123+
),
102124
'Export complete icon set'
103125
);
104126
generatedFileNames.push(completeIconSetName);
@@ -182,9 +204,18 @@ const generateCompleteIconSet = async (
182204
svgDefinitions: SvgDefinition[],
183205
outputDirectory: string,
184206
iconsFolderName: string,
185-
completeIconSetName: string
207+
completeIconSetName: string,
208+
interfaceName?: string,
209+
modelFileName?: string,
210+
generateType?: boolean
186211
): Promise<void> => {
187-
const completeIconSetContent = generateCompleteIconSetContent(svgDefinitions, completeIconSetName);
212+
const completeIconSetContent = generateCompleteIconSetContent(
213+
svgDefinitions,
214+
completeIconSetName,
215+
interfaceName,
216+
modelFileName,
217+
generateType
218+
);
188219
await writeFile(`${outputDirectory}/${iconsFolderName}`, completeIconSetName, completeIconSetContent);
189220
};
190221

‎src/lib/helpers/complete-icon-set-helper.spec.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,51 @@ describe('Complete Iconset-helper', () => {
1919
const generatedContent = generateCompleteIconSetContent(fileNamesWithDefinitions, completeIconSetName);
2020
expect(unformatedString(expectedContent)).toEqual(unformatedString(generatedContent));
2121
});
22+
it('should add interface when specified', () => {
23+
let completeIconSetName = 'all-icons';
24+
const fileNamesWithDefinitions = [
25+
{ variableName: 'foo', prefix: 'sampleIcon', filenameWithoutEnding: 'foo' },
26+
{ variableName: 'bar', prefix: 'sampleIcon', filenameWithoutEnding: 'bar' },
27+
{ variableName: 'baz', prefix: 'sampleIcon', filenameWithoutEnding: 'baz' }
28+
] as any;
29+
const expectedContent = `
30+
import {MyIcon} from './my-icons';
31+
import {foo} from './sampleIcon-foo.icon';
32+
import {bar} from './sampleIcon-bar.icon';
33+
import {baz} from './sampleIcon-baz.icon';
34+
35+
export const allIcons:MyIcon[] = [foo as MyIcon, bar as MyIcon, baz as MyIcon];`;
36+
37+
const generatedContent = generateCompleteIconSetContent(
38+
fileNamesWithDefinitions,
39+
completeIconSetName,
40+
'MyIcon',
41+
'my-icons',
42+
true
43+
);
44+
expect(unformatedString(expectedContent)).toEqual(unformatedString(generatedContent));
45+
});
46+
it('should not add interface when generateType is false', () => {
47+
let completeIconSetName = 'all-icons';
48+
const fileNamesWithDefinitions = [
49+
{ variableName: 'foo', prefix: 'sampleIcon', filenameWithoutEnding: 'foo' },
50+
{ variableName: 'bar', prefix: 'sampleIcon', filenameWithoutEnding: 'bar' },
51+
{ variableName: 'baz', prefix: 'sampleIcon', filenameWithoutEnding: 'baz' }
52+
] as any;
53+
const expectedContent = `
54+
import {foo} from './sampleIcon-foo.icon';
55+
import {bar} from './sampleIcon-bar.icon';
56+
import {baz} from './sampleIcon-baz.icon';
57+
58+
export const allIcons = [foo, bar, baz];`;
59+
60+
const generatedContent = generateCompleteIconSetContent(
61+
fileNamesWithDefinitions,
62+
completeIconSetName,
63+
'MyIcon',
64+
'my-icons',
65+
false
66+
);
67+
expect(unformatedString(expectedContent)).toEqual(unformatedString(generatedContent));
68+
});
2269
});

‎src/lib/helpers/complete-icon-set.helper.ts‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,61 @@ import { FILE_TYPE } from '../shared/file-type.model';
66

77
export const generateCompleteIconSetContent = (
88
svgDefinitions: SvgDefinition[],
9-
completeIconSetName: string
9+
completeIconSetName: string,
10+
interfaceName?: string,
11+
modelFileName?: string,
12+
generateType?: boolean
1013
): string => {
11-
const importSection = generateImportSection(svgDefinitions);
12-
const exportSection = generateExportSection(svgDefinitions, completeIconSetName);
14+
const importSection = generateImportSection(
15+
svgDefinitions,
16+
generateType ? interfaceName : undefined,
17+
generateType ? modelFileName : undefined
18+
);
19+
const exportSection = generateExportSection(
20+
svgDefinitions,
21+
completeIconSetName,
22+
FILE_TYPE.TS,
23+
generateType ? interfaceName : undefined
24+
);
1325
return `${importSection}${exportSection}`;
1426
};
1527

16-
const generateImportSection = (svgDefinitions: SvgDefinition[]): string =>
17-
svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition) => {
28+
const generateImportSection = (
29+
svgDefinitions: SvgDefinition[],
30+
interfaceName?: string,
31+
modelFileName?: string
32+
): string => {
33+
const imports =
34+
interfaceName && modelFileName ? generateNamedImportStatement(interfaceName, `./${modelFileName}`) : '';
35+
return svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition) => {
1836
acc += generateNamedImportStatement(
1937
svgDefinition.variableName,
2038
`./${svgDefinition.prefix}-${svgDefinition.filenameWithoutEnding}.icon`
2139
);
2240
return acc;
23-
}, '');
41+
}, imports);
42+
};
2443

2544
export const generateExportSection = (
2645
svgDefinitions: SvgDefinition[],
2746
completeIconSetName: string,
28-
fileType = FILE_TYPE.TS
29-
): string =>
30-
svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition, index: number) => {
47+
fileType = FILE_TYPE.TS,
48+
interfaceName?: string
49+
): string => {
50+
const interfaceSuffix = interfaceName ? `:${interfaceName}[]` : '';
51+
return svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition, index: number) => {
3152
const variableName =
3253
fileType === FILE_TYPE.TSX
3354
? svgDefinition.variableName.charAt(0).toUpperCase() + svgDefinition.variableName.slice(1)
3455
: svgDefinition.variableName;
3556

57+
const interfaceSuffix = interfaceName ? ` as ${interfaceName}` : '';
58+
3659
if (index === svgDefinitions.length - 1) {
37-
acc += `${variableName}];`;
60+
acc += `${variableName}${interfaceSuffix}];`;
3861
} else {
39-
acc += `${variableName},`;
62+
acc += `${variableName}${interfaceSuffix},`;
4063
}
4164
return acc;
42-
}, `export const ${camelCase(completeIconSetName)} = [`);
65+
}, `export const ${camelCase(completeIconSetName)}${interfaceSuffix} = [`);
66+
};

0 commit comments

Comments
 (0)