Merge pull request #6 from eddeee888/add-function-expression-option

Implement function / function expression config

Author: yeet-bix

README.md

@@ -25,3 +25,4 @@
 | `createReactComponent.testLibrary`            | Specifies what testing library to import <br><br> Options: <br> - `react-testing-library` (_default_) <br> - `enzyme`                    |
 | `createReactComponent.testingLibrary.cleanup` | Specifies whether or not to generate cleanup when using react-testing-library <br><br> Options: <br> - `true` <br> - `false` (_default_) |
 | `createReactComponent.module`                 | Specifies whether or not to create a module <br><br> Options: <br> - `true` (_default_) <br> - `false`                                   |
+| `createReactComponent.functionType`           | Specifies whether to use a normal function or function expression for the component <br><br> Options <br> - `function` (default) <br> - `expression` |

package.json

@@ -92,6 +92,18 @@
                     "type": "boolean",
                     "default": "true",
                     "description": "Specifies whether or not to create the component as a module"
+                },
+                "createReactComponent.functionType": {
+                    "type": "string",
+                    "enum": [
+                        "function",
+                        "expression"
+                    ],
+                    "enumDescriptions": [
+                        "Generate functions",
+                        "Generate function expressions"
+                    ],
+                    "default": "function"
                 }
             }
         }

src/extension.ts

@@ -3,7 +3,7 @@ import { createFolder, createFile } from './file';
 import { typescriptComponentTemplate, typescriptTestTemplate } from './template/typescriptTemplate';
 import { javascriptComponentTemplate, javascriptTestTemplate } from './template/javascriptTemplate';
 import { indexTemplate } from './template/indexTemplate';
-import TemplateOptions, { TestLibrary } from './template/templateOptions';
+import TemplateOptions, { TestLibrary, FunctionType } from './template/templateOptions';
 
 export function activate(context: vscode.ExtensionContext) {
     const disposable = vscode.commands.registerCommand('extension.createReactComponent', async (uri: vscode.Uri) => {
@@ -20,6 +20,7 @@ export function activate(context: vscode.ExtensionContext) {
                 name: componentName,
                 testLibrary: config.get('testingLibrary') as TestLibrary,
                 cleanup: config.get('testingLibrary.cleanup') as boolean,
+                functionType: config.get('functionType') as FunctionType
             };
 
             const createModule = config.get('createModule') as boolean;

src/template/javascriptTemplate.ts

@@ -1,8 +1,9 @@
-import TemplateOptions, { TestLibrary } from './templateOptions';
+import TemplateOptions, { TestLibrary, FunctionType } from './templateOptions';
 
-const javascriptComponentTemplate = ({ name }: TemplateOptions) => `import React from 'react';
+const javascriptComponentTemplate = ({ name, functionType }: TemplateOptions) => `import React from 'react';
 
-function ${name}({}) {
+${functionType === FunctionType.Function ? `function ${name}({}) {` : ''}
+${functionType === FunctionType.Expression ? `const ${name} = ({}) => {` : ''}
     return <>${name}</>
 };
 

src/template/templateOptions.ts

@@ -2,10 +2,17 @@ export enum TestLibrary {
     ReactTestingLibrary = 'react-testing-library',
     Enzyme = 'enzyme',
 }
+
+export enum FunctionType {
+    Function = "function",
+    Expression = "expression"
+}
+
 interface TemplateOptions {
     name: string;
     testLibrary: TestLibrary;
     cleanup: boolean;
+    functionType: FunctionType;
 }
 
 export default TemplateOptions;

src/template/typescriptTemplate.ts

@@ -1,10 +1,11 @@
-import TemplateOptions, { TestLibrary } from './templateOptions';
+import TemplateOptions, { TestLibrary, FunctionType } from './templateOptions';
 
-const typescriptComponentTemplate = ({ name }: TemplateOptions) => `import React from 'react';
+const typescriptComponentTemplate = ({ name, functionType }: TemplateOptions) => `import React from 'react';
 
 export interface ${name}Props {}
 
-function ${name}({ }: ${name}Props) {
+${functionType === FunctionType.Function ? `function ${name}({ }: ${name}Props) {` : ''}
+${functionType === FunctionType.Expression ? `const ${name}: React.FunctionComponent<${name}Props> = ({ }) => {` : ''}
     return <>${name}</>
 };