fix: error for too many icons in completeIconSet

When generating a complete icon set with a large number of icons.
Typescript build fails with error:
"Expression produces a union type that is too complex to represent"

Author: theotonge

src/lib/converters/files.converter.ts

@@ -36,7 +36,9 @@ async function generateTSXFiles(conversionOptions: FilesConversionOptions) {
     iconsFolderName,
     exportCompleteIconSet,
     completeIconSetName,
-    barrelFileName
+    barrelFileName,
+    interfaceName,
+    generateType
   } = conversionOptions;
 
   const svgDefinitions = await callAndMonitorAsync<SvgDefinition[]>(
@@ -51,7 +53,14 @@ async function generateTSXFiles(conversionOptions: FilesConversionOptions) {
 
   if (exportCompleteIconSet) {
     await callAndMonitorAsync<void>(
-      generateCompleteIconSet.bind({}, svgDefinitions, outputDirectory, iconsFolderName, completeIconSetName),
+      generateCompleteIconSet.bind(
+        {},
+        svgDefinitions,
+        outputDirectory,
+        iconsFolderName,
+        completeIconSetName,
+        generateType && interfaceName
+      ),
       'Export complete icon set'
     );
     generatedFileNames.push(completeIconSetName);
@@ -80,7 +89,8 @@ async function generateTSFiles(conversionOptions: FilesConversionOptions) {
     exportCompleteIconSet,
     completeIconSetName,
     compilationOutput,
-    barrelFileName
+    barrelFileName,
+    generateType
   } = conversionOptions;
   await callAndMonitorAsync<void>(
     deleteFolder.bind({}, `${outputDirectory}/${iconsFolderName}`),
@@ -98,7 +108,14 @@ async function generateTSFiles(conversionOptions: FilesConversionOptions) {
 
   if (exportCompleteIconSet) {
     await callAndMonitorAsync<void>(
-      generateCompleteIconSet.bind({}, svgDefinitions, outputDirectory, iconsFolderName, completeIconSetName),
+      generateCompleteIconSet.bind(
+        {},
+        svgDefinitions,
+        outputDirectory,
+        iconsFolderName,
+        completeIconSetName,
+        generateType && interfaceName
+      ),
       'Export complete icon set'
     );
     generatedFileNames.push(completeIconSetName);
@@ -182,9 +199,16 @@ const generateCompleteIconSet = async (
   svgDefinitions: SvgDefinition[],
   outputDirectory: string,
   iconsFolderName: string,
-  completeIconSetName: string
+  completeIconSetName: string,
+  interfaceName?: string,
+  modelFileName?: string
 ): Promise<void> => {
-  const completeIconSetContent = generateCompleteIconSetContent(svgDefinitions, completeIconSetName);
+  const completeIconSetContent = generateCompleteIconSetContent(
+    svgDefinitions,
+    completeIconSetName,
+    interfaceName,
+    modelFileName
+  );
   await writeFile(`${outputDirectory}/${iconsFolderName}`, completeIconSetName, completeIconSetContent);
 };
 

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

@@ -19,4 +19,27 @@ describe('Complete Iconset-helper', () => {
     const generatedContent = generateCompleteIconSetContent(fileNamesWithDefinitions, completeIconSetName);
     expect(unformatedString(expectedContent)).toEqual(unformatedString(generatedContent));
   });
+  it('should add interface when specified', () => {
+    let completeIconSetName = 'all-icons';
+    const fileNamesWithDefinitions = [
+      { variableName: 'foo', prefix: 'sampleIcon', filenameWithoutEnding: 'foo' },
+      { variableName: 'bar', prefix: 'sampleIcon', filenameWithoutEnding: 'bar' },
+      { variableName: 'baz', prefix: 'sampleIcon', filenameWithoutEnding: 'baz' }
+    ] as any;
+    const expectedContent = `
+    import {MyIcon} from './my-icons';
+    import {foo} from './sampleIcon-foo.icon';
+    import {bar} from './sampleIcon-bar.icon';
+    import {baz} from './sampleIcon-baz.icon';
+            
+    export const allIcons:MyIcon[] = [foo as MyIcon, bar as MyIcon, baz as MyIcon];`;
+
+    const generatedContent = generateCompleteIconSetContent(
+      fileNamesWithDefinitions,
+      completeIconSetName,
+      'MyIcon',
+      'my-icons'
+    );
+    expect(unformatedString(expectedContent)).toEqual(unformatedString(generatedContent));
+  });
 });

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

@@ -6,37 +6,51 @@ import { FILE_TYPE } from '../shared/file-type.model';
 
 export const generateCompleteIconSetContent = (
   svgDefinitions: SvgDefinition[],
-  completeIconSetName: string
+  completeIconSetName: string,
+  interfaceName?: string,
+  modelFileName?: string
 ): string => {
-  const importSection = generateImportSection(svgDefinitions);
-  const exportSection = generateExportSection(svgDefinitions, completeIconSetName);
+  const importSection = generateImportSection(svgDefinitions, interfaceName, modelFileName);
+  const exportSection = generateExportSection(svgDefinitions, completeIconSetName, FILE_TYPE.TS, interfaceName);
   return `${importSection}${exportSection}`;
 };
 
-const generateImportSection = (svgDefinitions: SvgDefinition[]): string =>
-  svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition) => {
+const generateImportSection = (
+  svgDefinitions: SvgDefinition[],
+  interfaceName?: string,
+  modelFileName?: string
+): string => {
+  const imports =
+    interfaceName && modelFileName ? generateNamedImportStatement(interfaceName, `./${modelFileName}`) : '';
+  return svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition) => {
     acc += generateNamedImportStatement(
       svgDefinition.variableName,
       `./${svgDefinition.prefix}-${svgDefinition.filenameWithoutEnding}.icon`
     );
     return acc;
-  }, '');
+  }, imports);
+};
 
 export const generateExportSection = (
   svgDefinitions: SvgDefinition[],
   completeIconSetName: string,
-  fileType = FILE_TYPE.TS
-): string =>
-  svgDefinitions.reduce((acc: string, svgDefinition: SvgDefinition, index: number) => {
+  fileType = FILE_TYPE.TS,
+  interfaceName?: string
+): string => {
+  const interfaceSuffix = interfaceName ? `:${interfaceName}[]` : '';
+  return 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;
 
+    const interfaceSuffix = interfaceName ? ` as ${interfaceName}` : '';
+
     if (index === svgDefinitions.length - 1) {
-      acc += `${variableName}];`;
+      acc += `${variableName}${interfaceSuffix}];`;
     } else {
-      acc += `${variableName},`;
+      acc += `${variableName}${interfaceSuffix},`;
     }
     return acc;
-  }, `export const ${camelCase(completeIconSetName)} = [`);
+  }, `export const ${camelCase(completeIconSetName)}${interfaceSuffix} = [`);
+};