Refactor scripts

scripts/build/generateExportsFile.js

@@ -4,12 +4,10 @@ import { generateComponentName, resetFile, writeFile, readFile } from './helpers
 
 export default function(inputEntry, outputDirectory, componentGetter, iconNodes) {
   const fileName = path.basename(inputEntry);
+
   // Reset file
   resetFile(fileName, outputDirectory);
 
-  // const content = readFile(inputEntry);
-  // writeFile(content, fileName, outputDirectory);
-
   const icons = Object.keys(iconNodes);
 
   // Generate Import for Icon VNodes
@@ -21,14 +19,5 @@ export default function(inputEntry, outputDirectory, componentGetter, iconNodes)
 
   writeFile('\n', fileName, outputDirectory);
 
-  // Generate export for all the icons
-  //
-  // (output): export const myIcon = getComponent(myIconVNode);
-  // icons.forEach(iconName => {
-  //   const componentName = generateComponentName(iconName);
-  //   const constantString = `export const ${componentName} = ${componentGetter}('${componentName}', ${componentName}Node);\n`;
-  //   writeFile(constantString, fileName, outputDirectory);
-  // });
-
   console.log(`Successfully generated ${fileName} file`);
 }

scripts/build/generateIconFiles.js

@@ -4,7 +4,7 @@ import path from 'path';
 import prettier from 'prettier';
 import { generateComponentName } from './helpers';
 
-export default function(iconNode, outputDirectory) {
+export default function(iconNode, outputDirectory, template) {
   const icons = Object.keys(iconNode);
   const iconsDistDirectory = path.join(outputDirectory, `icons`);
 
@@ -14,16 +14,14 @@ export default function(iconNode, outputDirectory) {
 
   icons.forEach(icon => {
     const location = path.join(iconsDistDirectory, `${icon}.js`);
-    const ComponentName = generateComponentName(icon);
+    const componentName = generateComponentName(icon);
 
-    const Node = JSON.stringify(iconNode[icon]);
+    const node = JSON.stringify(iconNode[icon]);
 
-    const element = `
-      export default ${Node};
-    `;
+    const elementTemplate = template({ componentName, node });
 
-    fs.writeFileSync(location, prettier.format(element, { parser: 'babel' }), 'utf-8');
+    fs.writeFileSync(location, prettier.format(elementTemplate, { parser: 'babel' }), 'utf-8');
 
-    console.log('Successfully built', ComponentName);
+    console.log('Successfully built', componentName);
   });
 }

scripts/buildIcons.js

@@ -21,7 +21,18 @@ const icons = renderIconsObject(svgFiles, getSvg);
 const iconVNodes = renderIconNodes(icons);
 
 // Generates iconsNodes files for each icon
-generateIconFiles(iconVNodes, OUTPUT_DIR);
+generateIconFiles(
+  iconVNodes,
+  OUTPUT_DIR,
+  ({ componentName, node }) => `
+  import createElement from '../../src/createElement';
+
+  const ${componentName} = ${node};
+
+  export const element = createElement('${componentName}', ${componentName});
+  export default ${componentName};
+`,
+);
 
 // Generates entry files for the compiler filled with icons exports
 generateExportsFile(
@@ -30,5 +41,3 @@ generateExportsFile(
   'getElement',
   iconVNodes,
 );
-// generateExportsFile('react.js', OUTPUT_DIR, 'getReactComponent', iconVNodes);
-// generateExportsFile('vue.js', OUTPUT_DIR, 'getVueComponent', iconVNodes);