Skip to content

Commit f482cdd

Browse files
nivekcodenivekcode
committed
feat((tsx)): generate SVG constants into multiple TSX files
Generate SVG files into multpile TSX file #159
1 parent 5baac39 commit f482cdd

File tree

2 files changed

+125
-57
lines changed

2 files changed

+125
-57
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"start-constants:completeIconSet": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfiles/*.svg' --exportCompleteIconSet true",
3939
"start-constants:completeIconSetName": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfiles/*.svg' --exportCompleteIconSet true --completeIconSetName myCompleteSet",
4040
"start-files": "ts-node ./src/bin/svg-to-ts-files.ts -s './inputfiles/*.svg'",
41+
"start-files:tsx": "ts-node ./src/bin/svg-to-ts-files.ts -s './inputfiles/*.svg' --tsx true",
4142
"start-files:help": "ts-node ./src/bin/svg-to-ts-files.ts --help",
4243
"start-files:invalid-path": "ts-node ./src/bin/svg-to-ts-files.ts -s './doesntExist/*.svg'",
4344
"start-files:barrel": "ts-node ./src/bin/svg-to-ts-files.ts -s './inputfiles/*.svg' --barrelFileName public_api",

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

+124-57
Original file line numberDiff line numberDiff line change
@@ -6,82 +6,66 @@ import {
66
generateSvgConstant,
77
generateTypeDefinition,
88
generateTypeHelperWithImport
9-
} from '../generators/code-snippet-generators';
9+
, generateTSXConstant } from '../generators/code-snippet-generators';
1010
import { generateCompleteIconSetContent } from '../helpers/complete-icon-set.helper';
1111
import { deleteFiles, deleteFolder, writeFile } from '../helpers/file-helpers';
1212
import { Logger } from '../helpers/logger';
1313
import { callAndMonitor, callAndMonitorAsync } from '../helpers/monitor';
1414
import { getFilePathsFromRegex } from '../helpers/regex-helpers';
1515
import { FilesConversionOptions } from '../options/conversion-options/files-conversion-options';
16+
import { FILE_TYPE } from '../shared/file-type.model';
1617

1718
import { filesProcessor, SvgDefinition } from './shared.converter';
1819

19-
const generateSVGConstants = async (
20-
svgDefinitions: SvgDefinition[],
21-
outputDirectory: string,
22-
iconsFolderName: string
23-
): Promise<string[]> => {
24-
const generatedFileNames: string[] = [];
25-
await Promise.all(
26-
svgDefinitions.map(async svgDefinition => {
27-
const svgConstant = generateSvgConstant(svgDefinition.variableName, svgDefinition.typeName, svgDefinition.data);
28-
const generatedFileName = `${svgDefinition.prefix}-${svgDefinition.filenameWithoutEnding}.icon`;
29-
generatedFileNames.push(generatedFileName);
30-
await writeFile(`${outputDirectory}/${iconsFolderName}`, generatedFileName, svgConstant);
31-
Logger.verboseInfo(`write file svg: ${outputDirectory}/${iconsFolderName}/${generatedFileName}.ts`);
32-
})
33-
);
34-
return generatedFileNames;
20+
export const convertToFiles = async (conversionOptions: FilesConversionOptions): Promise<void> => {
21+
const { tsx } = conversionOptions;
22+
if (tsx) {
23+
await generateTSXFiles(conversionOptions);
24+
} else {
25+
await generateTSFiles(conversionOptions);
26+
}
3527
};
3628

37-
const generateCompleteIconSet = async (
38-
svgDefinitions: SvgDefinition[],
39-
outputDirectory: string,
40-
iconsFolderName: string,
41-
completeIconSetName: string
42-
): Promise<void> => {
43-
const completeIconSetContent = generateCompleteIconSetContent(svgDefinitions, completeIconSetName);
44-
await writeFile(`${outputDirectory}/${iconsFolderName}`, completeIconSetName, completeIconSetContent);
45-
};
29+
async function generateTSXFiles(conversionOptions: FilesConversionOptions) {
30+
const {
31+
outputDirectory,
32+
iconsFolderName,
33+
exportCompleteIconSet,
34+
completeIconSetName,
35+
barrelFileName
36+
} = conversionOptions;
4637

47-
const generateModelFile = async (
48-
conversionOptions: FilesConversionOptions,
49-
svgDefinitions: SvgDefinition[]
50-
): Promise<string> => {
51-
const { outputDirectory, modelFileName, additionalModelOutputPath, iconsFolderName } = conversionOptions;
38+
const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
39+
filesProcessor.bind({}, conversionOptions),
40+
'Processing SVG files'
41+
);
5242

53-
const typeDefinition = generateTypeDefinition(conversionOptions, svgDefinitions);
54-
const enumDefinition = generateEnumDefinition(conversionOptions, svgDefinitions);
55-
const interfaceDefinition = generateInterfaceDefinition(conversionOptions);
56-
const modelFile = `${typeDefinition}${interfaceDefinition}${enumDefinition}`;
57-
await writeFile(`${outputDirectory}/${iconsFolderName}`, modelFileName, modelFile);
58-
Logger.verboseInfo(
59-
`model-file successfully generated under ${outputDirectory}/${iconsFolderName}/${modelFileName}.ts`
43+
const generatedFileNames = await callAndMonitorAsync<string[]>(
44+
generateTSXFileConstants.bind({}, svgDefinitions, outputDirectory, iconsFolderName),
45+
'Generate TSX constants'
6046
);
6147

62-
if (additionalModelOutputPath) {
63-
await writeFile(`${additionalModelOutputPath}`, modelFileName, modelFile);
64-
Logger.verboseInfo(
65-
`additional model-file successfully generated under ${additionalModelOutputPath}/${modelFileName}.ts`
48+
if (exportCompleteIconSet) {
49+
await callAndMonitorAsync<void>(
50+
generateCompleteIconSet.bind({}, svgDefinitions, outputDirectory, iconsFolderName, completeIconSetName),
51+
'Export complete icon set'
6652
);
53+
generatedFileNames.push(completeIconSetName);
6754
}
68-
return modelFile;
69-
};
7055

71-
const compileTypeScriptToJS = async (
72-
outputDirectory: string,
73-
iconsFolderName: string,
74-
barrelFileName: string
75-
): Promise<void> => {
76-
const generatedTypeScriptFilePaths = await getFilePathsFromRegex([
77-
`${outputDirectory}/${iconsFolderName}/*.ts`,
78-
`${outputDirectory}/${barrelFileName}.ts`
79-
]);
80-
compile(generatedTypeScriptFilePaths);
81-
deleteFiles(generatedTypeScriptFilePaths);
82-
};
56+
const indexFileContent = generatedFileNames
57+
.map((generatedFileName: string) => generateExportStatement(generatedFileName, iconsFolderName))
58+
.join('');
8359

84-
export const convertToFiles = async (conversionOptions: FilesConversionOptions): Promise<void> => {
60+
await callAndMonitorAsync<void>(
61+
writeFile.bind({}, outputDirectory, barrelFileName, indexFileContent),
62+
'Generate barrel file'
63+
);
64+
65+
Logger.generationSuccess(outputDirectory);
66+
}
67+
68+
async function generateTSFiles(conversionOptions: FilesConversionOptions) {
8569
const {
8670
outputDirectory,
8771
modelFileName,
@@ -151,4 +135,87 @@ export const convertToFiles = async (conversionOptions: FilesConversionOptions):
151135
);
152136
}
153137
Logger.generationSuccess(outputDirectory);
138+
}
139+
140+
const generateSVGConstants = async (
141+
svgDefinitions: SvgDefinition[],
142+
outputDirectory: string,
143+
iconsFolderName: string
144+
): Promise<string[]> => {
145+
const generatedFileNames: string[] = [];
146+
await Promise.all(
147+
svgDefinitions.map(async svgDefinition => {
148+
const svgConstant = generateSvgConstant(svgDefinition.variableName, svgDefinition.typeName, svgDefinition.data);
149+
const generatedFileName = `${svgDefinition.prefix}-${svgDefinition.filenameWithoutEnding}.icon`;
150+
generatedFileNames.push(generatedFileName);
151+
await writeFile(`${outputDirectory}/${iconsFolderName}`, generatedFileName, svgConstant);
152+
Logger.verboseInfo(`write file svg: ${outputDirectory}/${iconsFolderName}/${generatedFileName}.ts`);
153+
})
154+
);
155+
return generatedFileNames;
156+
};
157+
158+
const generateTSXFileConstants = async (
159+
svgDefinitions: SvgDefinition[],
160+
outputDirectory: string,
161+
iconsFolderName: string
162+
): Promise<string[]> => {
163+
const generatedFileNames: string[] = [];
164+
await Promise.all(
165+
svgDefinitions.map(async svgDefinition => {
166+
const tsxConstant = generateTSXConstant(svgDefinition.variableName, svgDefinition.data);
167+
const generatedFileName = `${svgDefinition.prefix}-${svgDefinition.filenameWithoutEnding}.icon`;
168+
generatedFileNames.push(generatedFileName);
169+
await writeFile(`${outputDirectory}/${iconsFolderName}`, generatedFileName, tsxConstant, FILE_TYPE.TSX);
170+
Logger.verboseInfo(`write file svg: ${outputDirectory}/${iconsFolderName}/${generatedFileName}.tsx`);
171+
})
172+
);
173+
return generatedFileNames;
174+
};
175+
176+
const generateCompleteIconSet = async (
177+
svgDefinitions: SvgDefinition[],
178+
outputDirectory: string,
179+
iconsFolderName: string,
180+
completeIconSetName: string
181+
): Promise<void> => {
182+
const completeIconSetContent = generateCompleteIconSetContent(svgDefinitions, completeIconSetName);
183+
await writeFile(`${outputDirectory}/${iconsFolderName}`, completeIconSetName, completeIconSetContent);
184+
};
185+
186+
const generateModelFile = async (
187+
conversionOptions: FilesConversionOptions,
188+
svgDefinitions: SvgDefinition[]
189+
): Promise<string> => {
190+
const { outputDirectory, modelFileName, additionalModelOutputPath, iconsFolderName } = conversionOptions;
191+
192+
const typeDefinition = generateTypeDefinition(conversionOptions, svgDefinitions);
193+
const enumDefinition = generateEnumDefinition(conversionOptions, svgDefinitions);
194+
const interfaceDefinition = generateInterfaceDefinition(conversionOptions);
195+
const modelFile = `${typeDefinition}${interfaceDefinition}${enumDefinition}`;
196+
await writeFile(`${outputDirectory}/${iconsFolderName}`, modelFileName, modelFile);
197+
Logger.verboseInfo(
198+
`model-file successfully generated under ${outputDirectory}/${iconsFolderName}/${modelFileName}.ts`
199+
);
200+
201+
if (additionalModelOutputPath) {
202+
await writeFile(`${additionalModelOutputPath}`, modelFileName, modelFile);
203+
Logger.verboseInfo(
204+
`additional model-file successfully generated under ${additionalModelOutputPath}/${modelFileName}.ts`
205+
);
206+
}
207+
return modelFile;
208+
};
209+
210+
const compileTypeScriptToJS = async (
211+
outputDirectory: string,
212+
iconsFolderName: string,
213+
barrelFileName: string
214+
): Promise<void> => {
215+
const generatedTypeScriptFilePaths = await getFilePathsFromRegex([
216+
`${outputDirectory}/${iconsFolderName}/*.ts`,
217+
`${outputDirectory}/${barrelFileName}.ts`
218+
]);
219+
compile(generatedTypeScriptFilePaths);
220+
deleteFiles(generatedTypeScriptFilePaths);
154221
};

0 commit comments

Comments
 (0)