feat((tsx)): add tsx constants conversion

Add the functionality to generate TSX SVG constants

#159

package.json

@@ -26,6 +26,7 @@
     "start-object:generateType": "ts-node ./src/bin/svg-to-ts-object -s './inputfiles/*.svg' -o ./dist --objectName awesomeIcons --typeName MyIconType",
     "start-object:export-const": "ts-node ./src/bin/svg-to-ts-object.ts -s './inputfiles/*.svg' -o ./dist --objectName myIcons",
     "start-constants": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfiles/*.svg'",
+    "start-constants:tsx": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfiles/*.svg' --tsx true",
     "start-constants:help": "ts-node ./src/bin/svg-to-ts-constants.ts --help'",
     "start-constants:regex": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfilesRegex/**/*.svg'",
     "start-constants:kebab": "ts-node ./src/bin/svg-to-ts-constants.ts -s './inputfiles/*.svg' -d KEBAB",

src/lib/converters/constants.converter.ts

@@ -1,6 +1,7 @@
 import {
   generateInterfaceDefinition,
   generateSvgConstant,
+  generateTSXConstant,
   generateTypeDefinition,
   generateTypeHelper
 } from '../generators/code-snippet-generators';
@@ -9,49 +10,93 @@ import { writeFile } from '../helpers/file-helpers';
 import { Logger } from '../helpers/logger';
 import { callAndMonitor, callAndMonitorAsync } from '../helpers/monitor';
 import { ConstantsConversionOptions } from '../options/conversion-options/constant-conversion-options';
+import { FILE_TYPE } from '../shared/file-type.model';
 
 import { filesProcessor, SvgDefinition } from './shared.converter';
 
-const getSvgConstants = (svgDefinitions): string => {
-  const svgConstants = svgDefinitions.map(svgDefinition =>
-    generateSvgConstant(svgDefinition.variableName, svgDefinition.typeName, svgDefinition.data)
+export async function convertToConstants(conversionOptions: ConstantsConversionOptions): Promise<void> {
+  const { tsx } = conversionOptions;
+
+  const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
+    filesProcessor.bind({}, conversionOptions),
+    'Processing SVG files'
   );
-  return svgConstants.join('');
-};
 
-export const convertToConstants = async (conversionOptions: ConstantsConversionOptions): Promise<void> => {
+  if (!svgDefinitions.length) {
+    Logger.error('No SVG files found under ${outputDirectory}');
+    return;
+  }
+
+  if (tsx) {
+    await convertToTSXConstants(conversionOptions, svgDefinitions);
+  } else {
+    await convertToTSConstants(conversionOptions, svgDefinitions);
+  }
+}
+
+async function convertToTSConstants(conversionOptions: ConstantsConversionOptions, svgDefinitions: SvgDefinition[]) {
   const { outputDirectory, fileName, interfaceName, exportCompleteIconSet, completeIconSetName } = conversionOptions;
   let exportAllStatement = '';
 
-  const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
-    filesProcessor.bind({}, conversionOptions),
-    'Processing SVG files'
+  const svgContants = callAndMonitor<string>(getTSConstants.bind({}, svgDefinitions), 'Generate SVG constants');
+
+  const typeDefinition = callAndMonitor<string>(
+    generateTypeDefinition.bind({}, conversionOptions, svgDefinitions),
+    'Generate type definitions'
+  );
+  const interfaceDefinition = callAndMonitor<string>(
+    generateInterfaceDefinition.bind({}, conversionOptions),
+    'Generate Interface Definition'
   );
 
-  if (svgDefinitions.length) {
-    const svgContants = callAndMonitor<string>(getSvgConstants.bind({}, svgDefinitions), 'Generate SVG constants');
-    const typeDefinition = callAndMonitor<string>(
-      generateTypeDefinition.bind({}, conversionOptions, svgDefinitions),
-      'Generate type definitions'
-    );
-    const interfaceDefinition = callAndMonitor<string>(
-      generateInterfaceDefinition.bind({}, conversionOptions),
-      'Generate Interface Definition'
+  if (exportCompleteIconSet) {
+    exportAllStatement = callAndMonitor<string>(
+      generateExportSection.bind({}, svgDefinitions, completeIconSetName),
+      'Exporting all constants'
     );
+  }
+
+  const typeHelper = callAndMonitor<string>(generateTypeHelper.bind({}, interfaceName), 'Generate Type Helper');
+  const fileContent = `${svgContants}${typeDefinition}${interfaceDefinition}${typeHelper}${exportAllStatement}`;
+  await callAndMonitorAsync<void>(
+    writeFile.bind({}, outputDirectory, fileName, fileContent),
+    `Writing files to ${outputDirectory}`
+  );
+  Logger.generationSuccess(outputDirectory);
+}
+
+async function convertToTSXConstants(conversionOptions: ConstantsConversionOptions, svgDefinitions: SvgDefinition[]) {
+  const { exportCompleteIconSet, completeIconSetName, outputDirectory, fileName } = conversionOptions;
 
-    if (exportCompleteIconSet) {
-      exportAllStatement = callAndMonitor<string>(
-        generateExportSection.bind({}, svgDefinitions, completeIconSetName),
-        'Exporting all constants'
-      );
-    }
-
-    const typeHelper = callAndMonitor<string>(generateTypeHelper.bind({}, interfaceName), 'Generate Type Helper');
-    const fileContent = `${svgContants}${typeDefinition}${interfaceDefinition}${typeHelper}${exportAllStatement}`;
-    await callAndMonitorAsync<void>(
-      writeFile.bind({}, outputDirectory, fileName, fileContent),
-      `Writing files to ${outputDirectory}`
+  const tsxContants = callAndMonitor<string>(getTSXConstants.bind({}, svgDefinitions), 'Generate TSX constants');
+  let exportAllStatement = '';
+
+  if (exportCompleteIconSet) {
+    exportAllStatement = callAndMonitor<string>(
+      generateExportSection.bind({}, svgDefinitions, completeIconSetName, FILE_TYPE.TSX),
+      'Exporting all TSX constants as ${completeIconSetName}'
     );
-    Logger.generationSuccess(outputDirectory);
   }
-};
+
+  const fileContent = `${tsxContants}${exportAllStatement}`;
+
+  await callAndMonitorAsync<void>(
+    writeFile.bind({}, outputDirectory, fileName, fileContent, FILE_TYPE.TSX),
+    `Writing files to ${outputDirectory}`
+  );
+  Logger.generationSuccess(outputDirectory);
+}
+
+function getTSConstants(svgDefinitions): string {
+  const svgConstants = svgDefinitions.map(svgDefinition =>
+    generateSvgConstant(svgDefinition.variableName, svgDefinition.typeName, svgDefinition.data)
+  );
+  return svgConstants.join('');
+}
+
+function getTSXConstants(svgDefinitions): string {
+  const tsxConstants = svgDefinitions.map(svgDefinition =>
+    generateTSXConstant(svgDefinition.variableName, svgDefinition.data)
+  );
+  return tsxConstants.join('');
+}

src/lib/converters/object.converter.ts

@@ -3,6 +3,7 @@ import { writeFile } from '../helpers/file-helpers';
 import { Logger } from '../helpers/logger';
 import { callAndMonitor, callAndMonitorAsync } from '../helpers/monitor';
 import { ObjectConversionOptions } from '../options/conversion-options/object-conversion-options';
+import { FILE_TYPE } from '../shared/file-type.model';
 
 import { filesProcessor, SvgDefinition } from './shared.converter';
 
@@ -29,7 +30,7 @@ async function generateTSXFile(svgDefinitions: SvgDefinition[], conversionOption
   );
 
   await callAndMonitorAsync<void>(
-    writeFile.bind({}, outputDirectory, fileName, `${fileContent}`, 'tsx'),
+    writeFile.bind({}, outputDirectory, fileName, `${fileContent}`, FILE_TYPE.TSX),
     'Write content to file'
   );
   Logger.generationSuccess(outputDirectory);

src/lib/generators/code-snippet-generators.ts

@@ -109,6 +109,11 @@ export const generateSvgConstant = (variableName: string, filenameWithoutEnding:
             };`;
 };
 
+export function generateTSXConstant(variableName: string, svg: string) {
+  const variableNameCapitalized = variableName.charAt(0).toUpperCase() + variableName.slice(1);
+  return `export const ${variableNameCapitalized} = () => (${svg});`;
+}
+
 export const generateExportStatement = (fileName: string, generatedIconsFolderName?: string): string => {
   if (generatedIconsFolderName) {
     return `export * from './${generatedIconsFolderName}/${fileName}';`;

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

@@ -2,6 +2,7 @@ import camelCase from 'lodash.camelcase';
 
 import { SvgDefinition } from '../converters/shared.converter';
 import { generateNamedImportStatement } from '../generators/code-snippet-generators';
+import { FILE_TYPE } from '../shared/file-type.model';
 
 export const generateCompleteIconSetContent = (
   svgDefinitions: SvgDefinition[],
@@ -21,12 +22,21 @@ const generateImportSection = (svgDefinitions: SvgDefinition[]): string =>
     return acc;
   }, '');
 
-export const generateExportSection = (svgDefinitions: SvgDefinition[], completeIconSetName: string): string =>
+export const generateExportSection = (
+  svgDefinitions: SvgDefinition[],
+  completeIconSetName: string,
+  fileType = FILE_TYPE.TS
+): string =>
   svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition, index: number) => {
+    const variableName =
+      fileType === FILE_TYPE.TSX
+        ? svgDefinition.variableName.charAt(0).toUpperCase() + svgDefinition.variableName.slice(1)
+        : svgDefinition.variableName;
+
     if (index === svgDefinitions.length - 1) {
-      acc += `${svgDefinition.variableName}];`;
+      acc += `${variableName}];`;
     } else {
-      acc += `${svgDefinition.variableName},`;
+      acc += `${variableName},`;
     }
     return acc;
   }, `export const ${camelCase(completeIconSetName)} = [`);

src/lib/helpers/file-helpers.ts

@@ -5,18 +5,15 @@ import typescriptParser from 'prettier/parser-typescript';
 import prettier from 'prettier/standalone';
 import util from 'util';
 
+import { FILE_TYPE } from '../shared/file-type.model';
+
 gfs.gracefulify(fs);
 
 const readfileFromFS = util.promisify(fs.readFile);
 const writeFileToFS = util.promisify(fs.writeFile);
 
 const fileComment = '/* 🤖 this file was generated by svg-to-ts */\n';
 
-export enum FILE_TYPE {
-  TS = 'ts',
-  TSX = 'tsx'
-}
-
 export const extractSvgContent = async (filePath: string): Promise<string> => {
   const fileContentRaw = await readfileFromFS(filePath, 'utf-8');
   return fileContentRaw.replace(/\r?\n|\r/g, ' ');

src/lib/shared/file-type.model.ts

@@ -0,0 +1,4 @@
+export enum FILE_TYPE {
+  TS = 'ts',
+  TSX = 'tsx'
+}