feat((tsx) add tsx option and add object converter): accepts a TSX flag for object conversion

TSX flag is accepted for all conversion types. At this point only object conversion uses the TSX
flag. Other converters will follow

#159

Author: nivekcode

.gitignore

@@ -62,5 +62,6 @@ typings/
 # next.js build output
 .next
 .idea
+.vscode
 dist
 additional

package.json

@@ -14,6 +14,7 @@
     "format:write": "prettier --write 'src/**/*.ts' && import-conductor -s 'src/**/*.ts' -i './src/bin/*.ts'",
     "prebuild": "npm run copy:readme",
     "start-object": "ts-node ./src/bin/svg-to-ts-object.ts -s './inputfiles/*.svg'",
+    "start-object:tsx": "ts-node ./src/bin/svg-to-ts-object.ts -s './inputfiles/*.svg' --tsx true",
     "start-object:help": "ts-node ./src/bin/svg-to-ts-object.ts --help",
     "start-object:regex": "ts-node ./src/bin/svg-to-ts-object.ts -s 'inputfiles/*.svg'",
     "start-object:kebab": "ts-node ./src/bin/svg-to-ts-object.ts -s 'inputfiles/*.svg' -d KEBAB",

src/lib/converters/object.converter.ts

@@ -6,30 +6,43 @@ import { ObjectConversionOptions } from '../options/conversion-options/object-co
 
 import { filesProcessor, SvgDefinition } from './shared.converter';
 
-const generateSVGObject = async (
-  svgDefinitions: SvgDefinition[],
-  objectName: string,
-  conversionOptions: ObjectConversionOptions
-): Promise<string> => {
-  const svgObject = {};
-  svgDefinitions.forEach((svgDefinition: SvgDefinition) => (svgObject[svgDefinition.typeName] = svgDefinition.data));
-  const typePatch = generateObjectInterface(!objectName, conversionOptions);
-
-  return !objectName
-    ? `export default ${JSON.stringify(svgObject)}${typePatch}`
-    : `export const ${objectName}${typePatch} = ${JSON.stringify(svgObject)}`;
-};
-
-export const convertToSingleObject = async (conversionOptions: ObjectConversionOptions): Promise<void> => {
-  const { outputDirectory, fileName, objectName } = conversionOptions;
+export async function convertToSingleObject(conversionOptions: ObjectConversionOptions): Promise<void> {
+  const { tsx } = conversionOptions;
   const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
     filesProcessor.bind({}, conversionOptions),
     'Processing SVG files'
   );
+
+  if (tsx) {
+    await generateTSXFile(svgDefinitions, conversionOptions);
+  } else {
+    await generateTSFile(svgDefinitions, conversionOptions);
+  }
+}
+
+async function generateTSXFile(svgDefinitions: SvgDefinition[], conversionOptions: ObjectConversionOptions) {
+  const { outputDirectory, fileName, objectName } = conversionOptions;
+
   const fileContent = await callAndMonitorAsync<string>(
-    generateSVGObject.bind({}, svgDefinitions, objectName, conversionOptions),
+    generateTSXObject.bind({}, svgDefinitions, objectName, conversionOptions),
+    'Generate TSX Object'
+  );
+
+  await callAndMonitorAsync<void>(
+    writeFile.bind({}, outputDirectory, fileName, `${fileContent}`, 'tsx'),
+    'Write content to file'
+  );
+  Logger.generationSuccess(outputDirectory);
+}
+
+async function generateTSFile(svgDefinitions: SvgDefinition[], conversionOptions: ObjectConversionOptions) {
+  const { outputDirectory, objectName, fileName } = conversionOptions;
+
+  const fileContent = await callAndMonitorAsync<string>(
+    generateTSObject.bind({}, svgDefinitions, objectName, conversionOptions),
     'Generate SVG Object'
   );
+
   const typeDefinition = callAndMonitor<string>(
     generateTypeDefinition.bind({}, conversionOptions, svgDefinitions),
     'Generate type definitions'
@@ -40,4 +53,29 @@ export const convertToSingleObject = async (conversionOptions: ObjectConversionO
     'Write content to file'
   );
   Logger.generationSuccess(outputDirectory);
-};
+}
+
+async function generateTSObject(
+  svgDefinitions: SvgDefinition[],
+  objectName: string,
+  conversionOptions: ObjectConversionOptions
+): Promise<string> {
+  const svgObject = {};
+  svgDefinitions.forEach((svgDefinition: SvgDefinition) => (svgObject[svgDefinition.typeName] = svgDefinition.data));
+  const typePatch = generateObjectInterface(!objectName, conversionOptions);
+
+  return !objectName
+    ? `export default ${JSON.stringify(svgObject)}${typePatch}`
+    : `export const ${objectName}${typePatch} = ${JSON.stringify(svgObject)}`;
+}
+
+async function generateTSXObject(svgDefinitions: SvgDefinition[], conversionOptions: ObjectConversionOptions) {
+  const { objectName } = conversionOptions;
+  let svgObject = '';
+  svgDefinitions.forEach((svgDefinition: SvgDefinition) => {
+    const capitalizedTypeName = svgDefinition.typeName.charAt(0).toUpperCase() + svgDefinition.typeName.slice(1);
+    svgObject += `${capitalizedTypeName}: () => (${svgDefinition.data}),\n`;
+  });
+
+  return !objectName ? `export default {${svgObject}}` : `export const ${objectName} = ${svgObject.toString()}`;
+}

src/lib/converters/shared.converter.ts

@@ -37,6 +37,7 @@ export const filesProcessor = async (conversionOptions): Promise<SvgDefinition[]
           const variableName = generateVariableName(prefix, filenameWithoutEnding);
 
           const typeName = generateTypeName(filenameWithoutEnding, delimiter);
+
           svgDefinition = {
             typeName,
             prefix,

src/lib/helpers/file-helpers.ts

@@ -12,18 +12,29 @@ 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, ' ');
 };
 
-export const writeFile = async (outputDirectory: string, fileName: string, fileContent: string): Promise<void> => {
-  const formattedFileContent = formatContent(`${fileComment}${fileContent}`);
+export async function writeFile(
+  outputDirectory: string,
+  fileName: string,
+  fileContent: string,
+  fileType = FILE_TYPE.TS
+): Promise<void> {
+  const formattedFileContent =
+    fileType === FILE_TYPE.TS ? formatContent(`${fileComment}${fileContent}`) : `${fileComment}${fileContent}`;
   if (!fs.existsSync(outputDirectory)) {
     fs.mkdirSync(outputDirectory, { recursive: true });
   }
-  await writeFileToFS(path.join(outputDirectory, `${fileName}.ts`), formattedFileContent);
-};
+  await writeFileToFS(path.join(outputDirectory, `${fileName}.${fileType}`), formattedFileContent);
+}
 
 export const readFile = async (filePath: string): Promise<string> => {
   return readfileFromFS(filePath, 'utf-8');

src/lib/options/commander/constant-options.commander.ts

@@ -9,6 +9,7 @@ export const setupConstantOptionsCommander = () => {
   commander
     .version(packgeJSON.version)
     .option('--config <string>', 'path to the configuration file')
+    .option('--tsx <boolean>', 'generate tsx files', false)
     .option(
       '-t --typeName <string>',
       'name of the generated enumeration type',

src/lib/options/commander/file-options.commander.ts

@@ -9,6 +9,7 @@ export const setupFilesOptionsCommander = () => {
   commander
     .version(packgeJSON.version)
     .option('--config <string>', 'path to the configuration file')
+    .option('--tsx <boolean>', 'generate tsx files', false)
     .option(
       '-t --typeName <string>',
       'name of the generated enumeration type',

src/lib/options/commander/object-options.commander.ts

@@ -9,6 +9,7 @@ export const setupObjectOptionsCommander = () => {
   commander
     .version(packgeJSON.version)
     .option('--config <string>', 'path to the configuration file')
+    .option('--tsx <boolean>', 'generate tsx files', false)
     .option(
       '-d --delimiter <Delimiter>',
       `delimiter which is used to generate the types and name properties (${Object.values(Delimiter).join(',')})`,

src/lib/options/conversion-options/constant-conversion-options.ts

@@ -1,6 +1,7 @@
 import { Delimiter } from '../../generators/code-snippet-generators';
 
 export interface ConstantsConversionOptions {
+  tsx: boolean;
   config?: string;
   srcFiles?: string[];
   outputDirectory?: string;

src/lib/options/conversion-options/files-conversion-options.ts

@@ -1,6 +1,7 @@
 import { Delimiter } from '../../generators/code-snippet-generators';
 
 export interface FilesConversionOptions {
+  tsx: boolean;
   config?: string;
   srcFiles?: string[];
   outputDirectory?: string;

src/lib/options/conversion-options/object-conversion-options.ts

@@ -1,6 +1,7 @@
 import { Delimiter } from '../../generators/code-snippet-generators';
 
 export interface ObjectConversionOptions {
+  tsx: boolean;
   config?: string;
   srcFiles?: string[];
   outputDirectory?: string;

src/lib/options/default-options/default-constants-conversion-options.ts

@@ -2,6 +2,7 @@ import { Delimiter } from '../../generators/code-snippet-generators';
 import { ConstantsConversionOptions } from '../conversion-options/constant-conversion-options';
 
 export const DEFAULT_CONST_CONVERSION_OPTIONS: ConstantsConversionOptions = {
+  tsx: false,
   fileName: 'my-icons',
   outputDirectory: './dist',
   prefix: 'myIcon',

src/lib/options/default-options/default-files-conversion-options.ts

@@ -2,6 +2,7 @@ import { Delimiter } from '../../generators/code-snippet-generators';
 import { FilesConversionOptions } from '../conversion-options/files-conversion-options';
 
 export const DEFAULT_FILES_CONVERSION_OPTIONS: FilesConversionOptions = {
+  tsx: false,
   interfaceName: 'MyIcon',
   outputDirectory: './dist',
   prefix: 'myIcon',

src/lib/options/default-options/default-object-conversion-options.ts

@@ -2,6 +2,7 @@ import { Delimiter } from '../../generators/code-snippet-generators';
 import { ObjectConversionOptions } from '../conversion-options/object-conversion-options';
 
 export const DEFAULT_OBJECT_CONVERSION_OPTIONS: ObjectConversionOptions = {
+  tsx: false,
   srcFiles: ['*.svg'],
   outputDirectory: './dist',
   delimiter: Delimiter.CAMEL,

src/lib/options/options-collector/command-line-options-collectors/commandline-consts-options.collector.ts

@@ -8,6 +8,7 @@ import { toBoolean } from './command-line-collector.helpers';
 
 export const collectCommandLineConstantOptions = async (): Promise<ConstantsConversionOptions> => {
   let {
+    tsx,
     delimiter,
     fileName,
     interfaceName,
@@ -23,6 +24,7 @@ export const collectCommandLineConstantOptions = async (): Promise<ConstantsConv
     verbose
   } = commander;
   let svgoConfig = commander.svgoConfig;
+  tsx = toBoolean(tsx, DEFAULT_CONST_CONVERSION_OPTIONS.tsx);
   generateType = toBoolean(generateType, DEFAULT_CONST_CONVERSION_OPTIONS.generateType);
   generateTypeObject = toBoolean(generateTypeObject, DEFAULT_CONST_CONVERSION_OPTIONS.generateTypeObject);
   generateEnum = toBoolean(generateEnum, DEFAULT_CONST_CONVERSION_OPTIONS.generateTypeObject);
@@ -38,6 +40,7 @@ export const collectCommandLineConstantOptions = async (): Promise<ConstantsConv
   svgoConfig = await getSvgoConfig(svgoConfig);
 
   return {
+    tsx,
     delimiter,
     fileName,
     enumName,

src/lib/options/options-collector/command-line-options-collectors/commandline-files-options.collector.ts

@@ -8,6 +8,7 @@ import { toBoolean } from './command-line-collector.helpers';
 
 export const collectCommandLineFileOptions = async (): Promise<FilesConversionOptions> => {
   let {
+    tsx,
     delimiter,
     barrelFileName,
     interfaceName,
@@ -29,6 +30,7 @@ export const collectCommandLineFileOptions = async (): Promise<FilesConversionOp
   let svgoConfig = commander.svgoConfig;
 
   // Parse boolean values
+  tsx = toBoolean(tsx, DEFAULT_FILES_CONVERSION_OPTIONS.tsx);
   generateType = toBoolean(generateType, DEFAULT_FILES_CONVERSION_OPTIONS.generateType);
   generateTypeObject = toBoolean(generateTypeObject, DEFAULT_FILES_CONVERSION_OPTIONS.generateTypeObject);
   exportCompleteIconSet = toBoolean(exportCompleteIconSet, DEFAULT_FILES_CONVERSION_OPTIONS.exportCompleteIconSet);
@@ -44,6 +46,7 @@ export const collectCommandLineFileOptions = async (): Promise<FilesConversionOp
   svgoConfig = await getSvgoConfig(svgoConfig);
 
   return {
+    tsx,
     delimiter,
     interfaceName,
     srcFiles,

src/lib/options/options-collector/command-line-options-collectors/commandline-object-options.collector.ts

@@ -7,7 +7,7 @@ import { DEFAULT_OBJECT_CONVERSION_OPTIONS } from '../../default-options/default
 import { toBoolean } from './command-line-collector.helpers';
 
 export const collectCommandLineObjectOptions = async (): Promise<ObjectConversionOptions> => {
-  let { objectName, delimiter, fileName, outputDirectory, verbose, generateType, typeName } = commander;
+  let { tsx, objectName, delimiter, fileName, outputDirectory, verbose, generateType, typeName } = commander;
   let svgoConfig = commander.svgoConfig;
 
   generateType = toBoolean(generateType, DEFAULT_OBJECT_CONVERSION_OPTIONS.generateType);
@@ -22,6 +22,7 @@ export const collectCommandLineObjectOptions = async (): Promise<ObjectConversio
   svgoConfig = await getSvgoConfig(svgoConfig);
 
   return {
+    tsx,
     delimiter,
     srcFiles,
     outputDirectory,

src/lib/options/options-collector/config-file-options-collector/config-file-constants-options.collector.ts

@@ -36,6 +36,11 @@ export const mergeWithDefaultConstantOptions = async (
 ): Promise<ConstantsConversionOptions> => {
   const configOptions = { ...options };
 
+  if (configOptions.tsx === undefined) {
+    configOptions.tsx = DEFAULT_CONST_CONVERSION_OPTIONS.tsx;
+    Logger.verboseInfo(`No 'tsx' property provided, "${DEFAULT_CONST_CONVERSION_OPTIONS.tsx}" will be used`);
+  }
+
   if (configOptions.verbose === undefined) {
     configOptions.verbose = DEFAULT_CONST_CONVERSION_OPTIONS.verbose;
     Logger.verboseInfo(`No 'verbose' property provided, "${DEFAULT_CONST_CONVERSION_OPTIONS.verbose}" will be used`);

src/lib/options/options-collector/config-file-options-collector/config-file-files-options.collector.ts

@@ -29,6 +29,11 @@ export const collectConfigFileFileOptions = async (): Promise<
 export const mergeWithDefaults = async (options): Promise<FilesConversionOptions> => {
   const configOptions = { ...options };
 
+  if (configOptions.tsx === undefined) {
+    configOptions.tsx = DEFAULT_FILES_CONVERSION_OPTIONS.tsx;
+    Logger.verboseInfo(`No 'tsx' property provided, "${DEFAULT_FILES_CONVERSION_OPTIONS.tsx}" will be used`);
+  }
+
   if (configOptions.verbose === undefined) {
     configOptions.verbose = DEFAULT_FILES_CONVERSION_OPTIONS.verbose;
     Logger.verboseInfo(`No "verbose" property provided, "${DEFAULT_FILES_CONVERSION_OPTIONS.verbose}" will be used`);

src/lib/options/options-collector/config-file-options-collector/config-file-object-options.collector.ts

@@ -29,6 +29,11 @@ export const collectConfigFileObjectOptions = async (): Promise<
 export const mergeWithDefaults = async (options: ObjectConversionOptions): Promise<ObjectConversionOptions> => {
   const configOptions = { ...options };
 
+  if (configOptions.tsx === undefined) {
+    configOptions.tsx = DEFAULT_OBJECT_CONVERSION_OPTIONS.tsx;
+    Logger.verboseInfo(`No 'tsx' property provided, "${DEFAULT_OBJECT_CONVERSION_OPTIONS.tsx}" will be used`);
+  }
+
   if (configOptions.verbose === undefined) {
     configOptions.verbose = DEFAULT_OBJECT_CONVERSION_OPTIONS.verbose;
     Logger.verboseInfo(`No 'verbose' property provided, "${DEFAULT_OBJECT_CONVERSION_OPTIONS.verbose}" will be used`);