Use Babel to transpile icons into separate chunks and source maps - No bundling required (#280)

* Added missing type definitions

* Updated the icon templates to default export the icons

* Updated babel.config.json

* Transpile the generated icons to ESM and CJS

* Removed Rollup and dependendencies

* Auto generate type definitions

* Updated pre build script

* Generated type definitions in the root folder

* Updated exports for all CJS paths

Author: AbhayVAshokan

.github/pull_request_template.md

@@ -5,7 +5,6 @@
 **Checklist**
 
 - [ ] I have made corresponding changes to the documentation.
-- [ ] I have updated the types definition of modified exports.
 - [ ] I have verified the functionality in some of the neeto web-apps.
 - [ ] I have added the necessary label (patch/minor/major - If package publish
       is required).

.gitignore

@@ -94,3 +94,6 @@ lerna-debug.log
 .DS_Store
 Thumbs.db
 preview/
+
+# Generated type definitions
+*.d.ts

app-icons.d.ts

@@ -1,3 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}
+  "sourceMaps": true,
+  "presets": [
+    ["@babel/preset-env", { "modules": false }],
+    "@babel/preset-react"
+  ]
+}

babel.config.json

@@ -21,7 +21,13 @@ const commonProps = {
   },
 }
 
-const componentGenerationConfig = [
+const ICON_TYPE ="type IconProps = {\r\n\tsize?: string | number;\r\n\tstrokeWidth?: string | number;\r\n\tcolor?: string;\r\n} & React.SVGProps<SVGSVGElement>;\r\n"
+const TYPEFACE_ICON_TYPE = "type IconProps = { width?: string | number, height?: string | number } & React.SVGProps<SVGSVGElement>;\r\n";
+const OTHER_ICON_TYPE = "type IconProps = { size?: string | number } & React.SVGProps<SVGSVGElement>;\r\n";
+
+export const ENCODING_STANDARD = "utf-8";
+
+export const COMPONENT_GENERATION_CONFIG = [
   {
     options: {
       icon: true,
@@ -44,6 +50,7 @@ const componentGenerationConfig = [
     }},
     destination: "./generate/icons",
     source: "./source/icons/**.svg",
+    iconType: ICON_TYPE,
   },
   {
     options: {
@@ -55,6 +62,7 @@ const componentGenerationConfig = [
     },
     destination: "./generate/logos",
     source: "./source/logos/**.svg",
+    iconType: OTHER_ICON_TYPE,
   },
   {
     options: {
@@ -66,6 +74,7 @@ const componentGenerationConfig = [
     },
     destination: "./generate/app-icons",
     source: "./source/appIcons/**.svg",
+    iconType: OTHER_ICON_TYPE,
   },
   {
     options: {
@@ -77,6 +86,7 @@ const componentGenerationConfig = [
     },
     destination: "./generate/typeface-logos",
     source: "./source/typefaceLogos/**.svg",
+    iconType: TYPEFACE_ICON_TYPE,
   },
   {
     options: {
@@ -87,7 +97,6 @@ const componentGenerationConfig = [
     },
     destination: "./generate/misc",
     source: "./source/misc/**.svg",
+    iconType: OTHER_ICON_TYPE,
   },
 ];
-
-export default componentGenerationConfig;

build/componentGenerationConfig.mjs build/constants.mjsbuild/componentGenerationConfig.mjs renamed to build/constants.mjs

@@ -4,83 +4,124 @@ import uppercamelcase from "uppercamelcase";
 import path from "path";
 import mkdirp from "mkdirp";
 import { transform } from "@svgr/core";
-import * as cheerio from "cheerio"
+import * as cheerio from "cheerio";
+import {
+  COMPONENT_GENERATION_CONFIG,
+  ENCODING_STANDARD,
+} from "./constants.mjs";
 
-export const generateComponents = (config = {}) => {
-  return {
-    name: "generate-components",
-    buildStart: async () => {
-      await config.forEach(({
-        options = {},
-        source = "./source/icons/**.svg",
-        additionalTransformations = (string) => string,
-        destination = "./generate/icons",
-      }) => {
-        try {
-          const encodingStandard = "utf-8"
-          const indexFilePath = path.join(destination, "index.js");
-          const directory = path.parse(indexFilePath).dir;
+const generateComponents = () => {
+  // delete the dist and generate folders
+  try {
+    fs.rmSync("dist", { recursive: true, force: true });
+    fs.rmSync("generate", { recursive: true, force: true });
+  } catch (err) {
+    if (err.code !== "ENOENT") console.log(err);
+  }
 
-          // make the directory
-          mkdirp.sync(directory);
+  COMPONENT_GENERATION_CONFIG.forEach(
+    ({
+      options = {},
+      source = "./source/icons/**.svg",
+      additionalTransformations = (string) => string,
+      destination = "./generate/icons",
+      iconType,
+    }) => {
+      try {
+        const indexFilePath = path.join(destination, "index.js");
+        const typeFilePath = `${destination.split("/").at(-1)}.d.ts`;
+        const directory = path.parse(indexFilePath).dir;
 
-          // make the index file
-          fs.writeFileSync(indexFilePath, "", encodingStandard);
+        // make the directory
+        mkdirp.sync(directory);
 
-          // make the icon folder
-          mkdirp.sync(destination);
+        // make the index file
+        fs.writeFileSync(indexFilePath, "", ENCODING_STANDARD);
 
-          // read the icon source
-          glob(source, (err, icons) => {
-            if (err) {
-              throw err;
-            }
+        // make the type file
+        fs.writeFileSync(
+          typeFilePath,
+          `import React from "react";\n\n${iconType}\r\n`,
+          ENCODING_STANDARD
+        );
 
-            if (icons.length === 0) {
-              throw Error(
-                "Unable to find any icons. Make sure you use a glob format. [path/**.svg]",
-              );
-            }
+        // make the icon folder
+        mkdirp.sync(destination);
 
-            icons.forEach((iconPath) => {
-              const svg = cheerio.load(fs.readFileSync(iconPath, encodingStandard), { xmlMode: true });
-              const iconName = path.basename(iconPath, path.extname(iconPath));
-              const componentName = uppercamelcase(iconName);
-              const importStatement = `export * from "./${componentName}";\r\n`
-              const iconDestination = path.join(
-                destination,
-                componentName + ".js", );
+        // read the icon source
+        glob(source, (err, icons) => {
+          if (err) {
+            throw err;
+          }
 
-              // perform some santization and specific transformations besides
-              // the ones provided to us by svgr
-              svg("*").each((_, el) => {
-                const element = svg(el)
-                Object.keys(el.attribs).forEach((attribute) => {
-                  additionalTransformations(attribute, svg(el));
-                })
-                if (el.name === "svg") {
-                  element.removeAttr("class")
-                         .removeAttr("xmlns")
-                }
-              });
+          if (icons.length === 0) {
+            throw Error(
+              "Unable to find any icons. Make sure you use a glob format. [path/**.svg]"
+            );
+          }
 
-              // generate component code
-              const reactComponent = transform.sync(
-                svg("svg").toString(),
-                options,
-                { componentName, filePath: iconDestination },
-              );
+          const components = [];
+          icons.forEach((iconPath) => {
+            const svg = cheerio.load(
+              fs.readFileSync(iconPath, ENCODING_STANDARD),
+              { xmlMode: true }
+            );
+            const iconName = path.basename(iconPath, path.extname(iconPath));
+            const componentName = uppercamelcase(iconName);
+            const importStatement = `import ${componentName} from "./${componentName}";\r\n`;
+            const typeDefinition = `export const ${componentName}: React.FC<IconProps>;\r\n`;
+            const iconDestination = path.join(
+              destination,
+              componentName + ".js"
+            );
+            components.push(componentName);
 
-              // write component to file
-              fs.writeFileSync(iconDestination, reactComponent, encodingStandard);
-              // append component import statement to the index file
-              fs.appendFileSync( indexFilePath, importStatement, encodingStandard );
+            // perform some santization and specific transformations besides
+            // the ones provided to us by svgr
+            svg("*").each((_, el) => {
+              const element = svg(el);
+              Object.keys(el.attribs).forEach((attribute) => {
+                additionalTransformations(attribute, svg(el));
+              });
+              if (el.name === "svg") {
+                element.removeAttr("class").removeAttr("xmlns");
+              }
             });
+
+            // generate component code
+            const reactComponent = transform.sync(
+              svg("svg").toString(),
+              options,
+              { componentName, filePath: iconDestination }
+            );
+
+            // write component to file
+            fs.writeFileSync(
+              iconDestination,
+              reactComponent,
+              ENCODING_STANDARD
+            );
+            // append component import statement to the index file
+            fs.appendFileSync(
+              indexFilePath,
+              importStatement,
+              ENCODING_STANDARD
+            );
+            // append type definition
+            fs.appendFileSync(typeFilePath, typeDefinition, ENCODING_STANDARD);
           });
-        } catch (err) {
-          console.log(err);
-        }
-      });
-    },
-  };
+
+          const exportStatement = `export { \r\n\t${components.join(
+            ",\r\n\t"
+          )}\r\n};`;
+          // append export statement to the index file
+          fs.appendFileSync(indexFilePath, exportStatement, ENCODING_STANDARD);
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  );
 };
+
+generateComponents();

build/index.mjs

@@ -1,9 +1,11 @@
 const appIconTemplate = ({ componentName, jsx }, { tpl }) => tpl`
 import React from 'react';
 
-export const ${componentName} = ({size=36, ...props}) => {
+const ${componentName} = ({size=36, ...props}) => {
   return ${jsx};
 }
+
+export default ${componentName};
 `;
 
 export default appIconTemplate;

build/templates/app-icon-template.mjs

@@ -1,9 +1,11 @@
 const iconTemplate = ({ componentName, jsx }, { tpl }) => tpl`
 import React from 'react';
 
-export const ${componentName} = ({ size=24, color="currentColor", strokeWidth=1.5, ...props }) => {
+const ${componentName} = ({ size=24, color="currentColor", strokeWidth=1.5, ...props }) => {
   return ${jsx};
 }
+
+export default ${componentName};
 `;
 
 export default iconTemplate;

build/templates/icon-template.mjs

@@ -1,9 +1,11 @@
 const logoTemplate = ({ componentName, jsx }, { tpl }) => tpl`
 import React from 'react';
 
-export const ${componentName} = ({size=36, ...props}) => {
+const ${componentName} = ({size=36, ...props}) => {
   return ${jsx};
 }
+
+export default ${componentName};
 `;
 
 export default logoTemplate;

build/templates/logo-template.mjs

@@ -1,9 +1,11 @@
 const miscTemplate = ( { componentName, jsx }, { tpl }, ) => tpl`
 import React from "react";
 
-export const ${componentName} = ({size=24, ...props}) => {
+const ${componentName} = ({size=24, ...props}) => {
   return ${jsx};
 }
+
+export default ${componentName};
 `;
 
 export default miscTemplate;