Extension settings and component structure are refactored.

abdullahceylan · Dec 7, 2018 · 3e17dd8 · 3e17dd8
1 parent 2986d9c
commit 3e17dd8
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 105 deletions.
diff --git a/assets/templates/component-container.template b/assets/templates/component-container.template
@@ -18,12 +18,31 @@ class {componentName} extends PureComponent {
   componentDidMount = () => {
     console.log('{componentName} mounted');
   }
-
+<legacy>
   componentWillReceiveProps = (nextProps) => {
     console.log('{componentName} will receive props', nextProps);
   }
-
-  componentWillUnMount = () => {
+</legacy>
+<reactv16>
+  getDerivedStateFromProps = (nextProps, prevState) => {
+    console.log('{componentName} getDerivedStateFromProps', nextProps, prevState);
+  }
+</reactv16>
+<legacy>
+  componentWillUpdate = (nextProps, nextState) => {
+    console.log('{componentName} will update', nextProps, nextState);
+  }
+</legacy>
+<reactv16>
+  getSnapshotBeforeUpdate = (prevProps, prevState) => {
+    console.log('{componentName} getSnapshotBeforeUpdate', prevProps, prevState);
+  }
+</reactv16>
+  componentDidUpdate = () => {
+    console.log('{componentName} did update');
+  }
+
+  componentWillUnmount = () => {
     console.log('{componentName} will unmount');
   }
 

diff --git a/assets/templates/component-reduxContainer.template b/assets/templates/component-reduxContainer.template
@@ -19,12 +19,31 @@ class {componentName} extends PureComponent {
   componentDidMount = () => {
     console.log('{componentName} mounted');
   }
-
+<legacy>
   componentWillReceiveProps = (nextProps) => {
     console.log('{componentName} will receive props', nextProps);
   }
-
-  componentWillUnMount = () => {
+</legacy>
+<reactv16>
+  getDerivedStateFromProps = (nextProps, prevState) => {
+    console.log('{componentName} getDerivedStateFromProps', nextProps, prevState);
+  }
+</reactv16>
+<legacy>
+  componentWillUpdate = (nextProps, nextState) => {
+    console.log('{componentName} will update', nextProps, nextState);
+  }
+</legacy>
+<reactv16>
+  getSnapshotBeforeUpdate = (prevProps, prevState) => {
+    console.log('{componentName} getSnapshotBeforeUpdate', prevProps, prevState);
+  }
+</reactv16>
+  componentDidUpdate = () => {
+    console.log('{componentName} did update');
+  }
+
+  componentWillUnmount = () => {
     console.log('{componentName} will unmount');
   }
 

diff --git a/config/config.json b/config/config.json
diff --git a/package.json b/package.json
@@ -26,6 +26,8 @@
     "vscode": "^1.29.0"
   },
   "categories": [
+    "Programming Languages",
+    "Snippets",
     "Other"
   ],
   "keywords": [
@@ -50,9 +52,71 @@
       "type": "object",
       "title": "AC React Component Generator",
       "properties": {
-        "AC.ReactComponentGenerator.config": {
-          "type": "object",
-          "description": "vscode-react-component-generator configuration object. See: https://github.com/abdullahceylan/vscode-react-component-generator/blob/master/README.md for more information."
+        "ACReactComponentGenerator.global.quotes": {
+          "type": "string",
+          "enum": [
+            "single",
+            "double"
+          ],
+          "default": "single",
+          "description": "Options: `single` or `double` Result: `'`  or  `\"`"
+        },
+        "ACReactComponentGenerator.global.generateFolder": {
+          "type": "boolean",
+          "default": true,
+          "description": "Generate or not separate folder for newly created component"
+        },
+        "ACReactComponentGenerator.global.lifecycleType": {
+          "type": "string",
+          "default": "legacy",
+          "enum": [
+            "legacy",
+            "reactv16"
+          ],
+          "description": "The lifecycle type of generated component. `legacy` is contains componentWillReceiveProps, componentWillMount etc."
+        },
+        "ACReactComponentGenerator.mainFile.create": {
+          "type": "boolean",
+          "default": true,
+          "description": "Weather to generate component's main file or not. e.g.: ComponentName.(extension)"
+        },
+        "ACReactComponentGenerator.mainFile.extension": {
+          "type": "string",
+          "default": "jsx",
+          "description": "The extension of generated component file"
+        },
+        "ACReactComponentGenerator.styleFile.create": {
+          "type": "boolean",
+          "default": true,
+          "description": "Weather to generate component's style file or not. e.g.: ComponentName.(extension)"
+        },
+        "ACReactComponentGenerator.styleFile.type": {
+          "type": "string",
+          "enum": [
+            "styled-components (.js)",
+            "emotion (.js)",
+            "standard (.css)",
+            "sass (.sass)",
+            "less (.less)"
+          ],
+          "default": "styled-components (.js)",
+          "description": "The type of stylesheet file to create"
+        },
+
+        "ACReactComponentGenerator.styleFile.suffix": {
+          "type": "string",
+          "default": ".styles",
+          "description": "The suffix to add to the end of the stylesheet filename. Default: ComponentName.styles.(extension)"
+        },
+        "ACReactComponentGenerator.indexFile.create": {
+          "type": "boolean",
+          "default": true,
+          "description": "Weather to generate component's index file or not. e.g.: index.(extension)"
+        },
+        "ACReactComponentGenerator.indexFile.extension": {
+          "type": "string",
+          "default": "js",
+          "description": "The extension of generated component index file"
         }
       }
     },

diff --git a/src/config.interface.ts b/src/config.interface.ts
@@ -1,8 +1,6 @@
-import FileConfig from './interfaces/files.interface';
 import GlobalConfig from './interfaces/global.interface';
 import { WorkspaceConfiguration } from 'vscode';
 
 export interface Config extends WorkspaceConfiguration {
     global: GlobalConfig,
-    files: FileConfig
 };
diff --git a/src/extension.ts b/src/extension.ts
@@ -4,7 +4,6 @@
 import { ExtensionContext, workspace, window, commands } from 'vscode';
 import { paramCase } from 'change-case';
 import { Observable } from 'rxjs';
-import { assign } from "lodash";
 
 import { FileHelper, logger } from './helpers';
 import { Config as ConfigInterface } from './config.interface';
@@ -16,15 +15,6 @@ const TEMPLATE_SUFFIX_SEPERATOR = '-';
 export function activate(context: ExtensionContext) {
 
     const createComponent = (uri, suffix: string = '') => {
-        let configPrefix: String = 'AC.ReactComponentGenerator';
-        let defaultConfig: ConfigInterface = FileHelper.getDefaultConfig();
-        let userConfig: ConfigInterface = <ConfigInterface>workspace.getConfiguration((configPrefix + '.config'));
-        let config: ConfigInterface;
-
-        if (userConfig) {
-            config = assign(config, defaultConfig, userConfig) as ConfigInterface;
-        }
-
         // Display a dialog to the user
         let enterComponentNameDialog$ = Observable.from(
             window.showInputBox(
@@ -38,12 +28,12 @@ export function activate(context: ExtensionContext) {
                     throw new Error('Component name can not be empty!');
                 }
                 let componentName = paramCase(val);
-                let componentDir = FileHelper.createComponentDir(uri, componentName, config.global);
+                let componentDir = FileHelper.createComponentDir(uri, componentName);
 
                 return Observable.forkJoin(
-                    FileHelper.createComponent(componentDir, componentName, config.global, config.files, suffix),
-                    FileHelper.createIndexFile(componentDir, componentName, config.global, config.files.index),
-                    FileHelper.createCSS(componentDir, componentName, config.global, config.files.style),
+                    FileHelper.createComponent(componentDir, componentName, suffix),
+                    FileHelper.createIndexFile(componentDir, componentName),
+                    FileHelper.createCSS(componentDir, componentName),
                 );
             })
             .concatMap(result => Observable.from(result))