refactor: Always use helper file

Author: fwh1990

snapshots/all-in-one-js/Icon.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Svg, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
 
 
 // If you don't want to make all icons in one file,
@@ -94,20 +95,4 @@ Icon.defaultProps = {
   size: 14,
 };
 
-/**
- * @param {string | string[] | undefined} color
- * @param {number} index
- * @param {string} defaultColor
- * @return {string}
- */
-const getIconColor = (color, index, defaultColor) => {
-  return color
-    ? (
-      typeof color === 'string'
-        ? color
-        : color[index] || defaultColor
-    )
-    : defaultColor;
-};
-
 export default Icon;

snapshots/all-in-one-js/helper.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+
+export const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string;

snapshots/all-in-one-js/helper.js

@@ -0,0 +1,17 @@
+/* eslint-disable */
+
+/**
+ * @param {string | string[] | undefined} color
+ * @param {number} index
+ * @param {string} defaultColor
+ * @return {string}
+ */
+export const getIconColor = (color, index, defaultColor) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};

snapshots/all-in-one-ts/Icon.tsx

@@ -4,6 +4,7 @@
 import React, { FunctionComponent } from 'react';
 import { ViewProps } from 'react-native';
 import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
 
 
 export type IconNames = 'alipay' | 'user' | 'setup';
@@ -104,14 +105,4 @@ Icon.defaultProps = {
   size: 16,
 };
 
-const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
-  return color
-    ? (
-      typeof color === 'string'
-        ? color
-        : color[index] || defaultColor
-    )
-    : defaultColor;
-};
-
 export default Icon;

snapshots/all-in-one-ts/helper.ts

@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};

snapshots/depends-on-js/helper.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+
+export const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string;

src/libs/copyTemplate.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import path from 'path';
+
+export const copyTemplate = (fromFile: string, toFile: string) => {
+  return fs.copyFileSync(
+    path.join(__dirname, `../templates/${fromFile}.template`),
+    toFile,
+  );
+};

src/libs/generateComponent.ts

@@ -8,19 +8,22 @@ import { XmlData } from 'iconfont-parser';
 import { Config } from './getConfig';
 import { getTemplate } from './getTemplate';
 import {
-  replaceCases, replaceColorFunc,
+  replaceCases,
   replaceComponentName,
   replaceImports,
   replaceNames,
-  replaceNamesArray, replaceNoColor,
+  replaceNamesArray,
   replaceSingleIconContent,
   replaceSize, replaceSummaryIcon,
   replaceSvgComponents,
   replaceToDependsComments,
   replaceToOneComments,
+  replaceNoHelper,
+  replaceHelper,
 } from './replace';
 import { whitespace } from './whitespace';
 import { GENERATE_MODE } from './generateMode';
+import { copyTemplate } from './copyTemplate';
 
 const SVG_MAP = {
   path: 'Path',
@@ -48,11 +51,9 @@ export const generateComponent = (data: XmlData, config: Config) => {
     svgComponents.add('GProps');
   }
 
-  if (config.generate_mode === GENERATE_MODE.dependsOn) {
-    fs.copyFileSync(
-      path.join(__dirname, '..', 'templates', `helper${jsExtension}.template`),
-      path.join(saveDir, `helper${jsExtension}`),
-    );
+  copyTemplate(`helper${jsExtension}`, path.join(saveDir, `helper${jsExtension}`));
+  if (!config.use_typescript) {
+    copyTemplate('helper.d.ts', path.join(saveDir, 'helper.d.ts'));
   }
 
   data.svg.symbol.forEach((item) => {
@@ -104,6 +105,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
     singleFile = replaceComponentName(singleFile, componentName);
     singleFile = replaceSingleIconContent(singleFile, generateCase(item, 4));
     singleFile = replaceToOneComments(singleFile);
+    singleFile = replaceHelper(singleFile);
 
     fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile);
 
@@ -119,6 +121,12 @@ export const generateComponent = (data: XmlData, config: Config) => {
 
   let iconFile =  getTemplate('Icon' + jsxExtension);
 
+  if (config.generate_mode === GENERATE_MODE.dependsOn) {
+    iconFile = replaceNoHelper(iconFile);
+  } else {
+    iconFile = replaceHelper(iconFile);
+  }
+
   iconFile = replaceSize(iconFile, config.default_icon_size);
   iconFile = replaceCases(iconFile, cases);
   iconFile = replaceSvgComponents(iconFile, svgComponents);
@@ -138,10 +146,8 @@ export const generateComponent = (data: XmlData, config: Config) => {
 
   if (config.generate_mode === GENERATE_MODE.allInOne) {
     iconFile = replaceToDependsComments(iconFile);
-    iconFile = replaceColorFunc(iconFile, jsExtension);
   } else {
     iconFile = replaceToOneComments(iconFile);
-    iconFile = replaceNoColor(iconFile);
   }
 
   iconFile = replaceSummaryIcon(iconFile, config.summary_component_name);

src/libs/replace.ts

@@ -1,5 +1,4 @@
 import { GENERATE_MODE } from './generateMode';
-import { getTemplate } from './getTemplate';
 
 export const replaceSize = (content: string, size: number) => {
   return content.replace(/#size#/g, String(size));
@@ -61,12 +60,17 @@ export const replaceToDependsComments = (content: string) => {
   );
 };
 
-export const replaceColorFunc = (content: string, extension: string) => {
+export const replaceHelper = (content: string) => {
   return content.replace(
-    /#colorFunc#/,
-    getTemplate(`helper${extension}`)
-      .replace(/export\s+/g, '')
-      .replace(/\/\*\s.+?\s\*\/\n/g, '')
+    /#helper#/g,
+    'import { getIconColor } from \'./helper\';'
+  );
+};
+
+export const replaceNoHelper = (content: string) => {
+  return content.replace(
+    /#helper#\n/g,
+    ''
   );
 };
 

src/templates/Icon.js.template

@@ -2,6 +2,7 @@
 
 import React from 'react';
 #svgComponents#
+#helper#
 #imports#
 
 #comments#
@@ -16,5 +17,5 @@ export const #SummaryIcon# = ({ color, name, size, ...rest }) => {
 #SummaryIcon#.defaultProps = {
   size: #size#,
 };
-#colorFunc#
+
 export default #SummaryIcon#;