Add new arrowFunction config option

Author: vs-cristian

src/config/Config.ts

@@ -29,6 +29,8 @@ export class Config implements IConfig {
 
   cssModules: boolean;
 
+  arrowFunction: boolean;
+
   prefixes: ConfigPrefixes;
 
   ext: ConfigExt;
@@ -52,6 +54,7 @@ export class Config implements IConfig {
     this.wrapFolder = this.config.wrapFolder;
     this.cssModules = this.config.cssModules;
     this.exportType = this.config.exportType;
+    this.arrowFunction = this.config.arrowFunction;
   }
 
   private setFilesExtension() {

src/config/default.json

@@ -6,5 +6,6 @@
   "fileNameCase": "pascal",
   "path": "src/components",
   "cssModules": true,
-  "exportType": "named"
+  "exportType": "default",
+  "arrowFunction": true
 }

src/core/temlpates/components/ComponentTemplate.ts

@@ -33,7 +33,14 @@ export class ComponentTemplate extends TemplateBase implements Template {
       body.push(t.emptyStatement());
     }
 
-    const component = c.component(this.vars.componentName, c.generateHooks(this.vars.hooks));
+    const functionContainer = config.arrowFunction
+      ? c.arrowFunctionDeclaration
+      : c.regularFunctionDeclaration;
+    const component = functionContainer(
+      this.vars.componentName,
+      [t.identifier('props')],
+      c.component(this.vars.componentName, c.generateHooks(this.vars.hooks))
+    );
 
     if (config.exportType === 'named') {
       body.push(t.exportNamedDeclaration(component));

src/core/temlpates/components/HOCTemplate.ts

@@ -16,7 +16,21 @@ export class HOCTemplate extends TemplateBase implements Template {
       body.push(t.emptyStatement());
     }
 
-    const hoc = c.hoc(this.vars.componentName, c.generateHooks(this.vars.hooks));
+    const functionContainer = config.arrowFunction
+      ? c.arrowFunctionDeclaration
+      : c.regularFunctionDeclaration;
+
+    const hocBody = c.hocBody(c.generateHooks(this.vars.hooks));
+
+    const functionExpression = config.arrowFunction
+      ? t.arrowFunctionExpression([t.identifier('props')], hocBody)
+      : t.functionExpression(null, [t.identifier('props')], hocBody);
+
+    const hoc = functionContainer(
+      this.vars.componentName,
+      [t.identifier('WrappedComponent')],
+      [t.returnStatement(functionExpression)]
+    );
 
     if (config.exportType === 'named') {
       body.push(t.exportNamedDeclaration(hoc));

src/core/temlpates/components/HookTemplate.ts

@@ -20,7 +20,15 @@ export class HookTemplate extends TemplateBase implements Template {
       body.push(t.emptyStatement());
     }
 
-    const hook = c.hook(this.vars.componentName, c.generateHooks(this.vars.hooks));
+    const functionContainer = config.arrowFunction
+      ? c.arrowFunctionDeclaration
+      : c.regularFunctionDeclaration;
+
+    const hook = functionContainer(
+      this.vars.componentName,
+      [],
+      [...c.generateHooks(this.vars.hooks), t.returnStatement(t.nullLiteral())]
+    );
 
     if (config.exportType === 'named') {
       body.push(t.exportNamedDeclaration(hook));

src/core/temlpates/shared/component.ts

@@ -1,24 +1,16 @@
 import * as t from '@babel/types';
 
 export const component = (componentName: string, contentStatement: t.Statement[] = []) => {
-  return t.variableDeclaration('const', [
-    t.variableDeclarator(
-      t.identifier(componentName),
-      t.arrowFunctionExpression(
-        [t.identifier('props')],
-        t.blockStatement([
-          ...contentStatement,
-          t.returnStatement(
-            t.jsxElement(
-              t.jsxOpeningElement(t.jsxIdentifier('div'), [], false),
-              t.jsxClosingElement(t.jsxIdentifier('div')),
-              []
-            )
-          ),
-        ])
+  return [
+    ...contentStatement,
+    t.returnStatement(
+      t.jsxElement(
+        t.jsxOpeningElement(t.jsxIdentifier('div'), [], false),
+        t.jsxClosingElement(t.jsxIdentifier('div')),
+        []
       )
     ),
-  ]);
+  ];
 };
 
 export const test = (componentName: string) => {
@@ -56,38 +48,19 @@ export const test = (componentName: string) => {
   );
 };
 
-export const hoc = (hocName: string, contentStatement: t.Statement[] = []) => {
-  return t.functionDeclaration(
-    t.identifier(hocName),
-    [t.identifier('WrappedComponent')],
-    t.blockStatement([
-      t.returnStatement(
-        t.arrowFunctionExpression(
-          [t.identifier('props')],
-          t.blockStatement([
-            ...contentStatement,
-            t.returnStatement(
-              t.jsxElement(
-                t.jsxOpeningElement(
-                  t.jsxIdentifier('WrappedComponent'),
-                  [t.jsxSpreadAttribute(t.identifier('props'))],
-                  true
-                ),
-                null,
-                []
-              )
-            ),
-          ])
-        )
-      ),
-    ])
-  );
-};
-
-export const hook = (hookName: string, contentStatement: t.Statement[] = []) => {
-  return t.functionDeclaration(
-    t.identifier(hookName),
-    [],
-    t.blockStatement([...contentStatement, t.returnStatement(t.nullLiteral())])
-  );
+export const hocBody = (contentStatement: t.Statement[] = []) => {
+  return t.blockStatement([
+    ...contentStatement,
+    t.returnStatement(
+      t.jsxElement(
+        t.jsxOpeningElement(
+          t.jsxIdentifier('WrappedComponent'),
+          [t.jsxSpreadAttribute(t.identifier('props'))],
+          true
+        ),
+        null,
+        []
+      )
+    ),
+  ]);
 };

src/core/temlpates/shared/utils.ts

@@ -14,6 +14,27 @@ export const importNamed = (imports: t.ImportSpecifier[], from: string) => {
   return t.importDeclaration(imports, t.stringLiteral(from));
 };
 
+export const arrowFunctionDeclaration = (
+  name: string,
+  params: t.Identifier[],
+  body: t.Statement[]
+) => {
+  return t.variableDeclaration('const', [
+    t.variableDeclarator(
+      t.identifier(name),
+      t.arrowFunctionExpression(params, t.blockStatement(body))
+    ),
+  ]);
+};
+
+export const regularFunctionDeclaration = (
+  name: string,
+  params: t.Identifier[],
+  body: t.Statement[]
+) => {
+  return t.functionDeclaration(t.identifier(name), params, t.blockStatement(body));
+};
+
 export const importDefault = (name, from, specs = []) => {
   return t.importDeclaration(
     [t.importDefaultSpecifier(t.identifier(name)), ...specs],
@@ -25,7 +46,7 @@ export const propTypes = (componentName: string) => {
   return t.expressionStatement(
     t.assignmentExpression(
       '=',
-      t.memberExpression(t.identifier(componentName), t.identifier('propTypes'), false),
+      t.memberExpression(t.identifier(componentName), t.identifier('propTypes')),
       t.objectExpression([])
     )
   );

src/init/index.ts

@@ -27,6 +27,7 @@ export async function initConfigFile() {
     path: answers.path,
     wrapFolder: answers.wrapFolder,
     cssModules: answers.cssModules,
+    arrowFunction: answers.arrowFunction,
   };
 
   const content = JSON.stringify(config, null, 2);

src/init/questions.ts

@@ -36,6 +36,11 @@ export const question = [
     name: 'wrapFolder',
     message: 'Should create a wrap folder?',
   },
+  {
+    type: 'confirm',
+    name: 'arrowFunction',
+    message: 'Use arrow function syntax?',
+  },
   {
     type: 'list',
     name: 'fileNameCase',

src/types/types.ts

@@ -11,6 +11,7 @@ export interface IConfig {
   wrapFolder: boolean;
   cssModules: boolean;
   exportType: ExportType;
+  arrowFunction: boolean;
 }
 
 interface IBaseVariables {