Refactor config & add css modules support

Author: vs-cristian

.babelrc

@@ -9,6 +9,12 @@
     "@babel/preset-typescript"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    ["module-resolver", {
+      "root": ".",
+      "alias": {
+        "@": "./src"
+      }
+    }]
   ]
 }

package-lock.json

@@ -55,6 +55,7 @@
     "@types/yargs": "^15.0.5",
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/parser": "^3.9.0",
+    "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-airbnb-typescript": "^8.0.2",

package.json

@@ -0,0 +1,73 @@
+import { FileNameCase, IConfig, StyleFormats } from '@/types';
+import defaultConfig from './default.json';
+
+export type ConfigPrefixes = {
+  style: 'module' | 'styles';
+  test: 'test';
+};
+
+export type ConfigExt = {
+  component: string;
+  script: string;
+  style: string;
+};
+
+export class Config implements IConfig {
+  config: IConfig;
+
+  fileNameCase: FileNameCase;
+
+  styles: StyleFormats;
+
+  path: string;
+
+  jsxExt: boolean;
+
+  typescript: boolean;
+
+  wrapFolder: boolean;
+
+  cssModules: boolean;
+
+  prefixes: ConfigPrefixes;
+
+  ext: ConfigExt;
+
+  constructor(config: IConfig) {
+    this.config = Object.assign(defaultConfig, config);
+
+    this.setInitialVariables();
+    this.setFilesExtension();
+    this.setPrefixes();
+  }
+
+  private setInitialVariables() {
+    this.fileNameCase = this.config.fileNameCase;
+    this.styles = this.config.styles;
+    this.path = this.config.path;
+    this.jsxExt = this.config.jsxExt;
+    this.typescript = this.config.typescript;
+    this.wrapFolder = this.config.wrapFolder;
+    this.cssModules = this.config.cssModules;
+  }
+
+  private setFilesExtension() {
+    let styleExt = this.styles.toLowerCase();
+    if (styleExt === 'stylus') {
+      styleExt = 'styl';
+    }
+
+    this.ext = {
+      component: this.typescript ? 'tsx' : `j${this.jsxExt ? 'sx' : 's'}`,
+      script: `${this.typescript ? 't' : 'j'}s`,
+      style: styleExt,
+    };
+  }
+
+  private setPrefixes() {
+    this.prefixes = {
+      style: this.cssModules ? 'module' : 'styles',
+      test: 'test',
+    };
+  }
+}

src/config/Config.ts

@@ -4,5 +4,6 @@
   "jsxExt": true,
   "wrapFolder": true,
   "fileNameCase": "pascal",
-  "path": "src/components"
+  "path": "src/components",
+  "cssModules": true
 }

src/config/default.json

@@ -0,0 +1,6 @@
+import { Config } from '@/config/Config';
+import { getUserConfig } from '@/utils';
+
+export { Config } from './Config';
+const userConfig = getUserConfig();
+export const config = new Config(userConfig);

src/config/index.ts

@@ -1,14 +1,6 @@
-import path from 'path';
-
-import { getAppRoot, getConfig, getStylesExtension } from '../utils';
-import { StyleFormats } from '../types';
+import { StyleFormats } from '@/types';
+import * as utils from '@/utils';
 
+// export const ROOT = path.dirname(require.main.filename);
 export const STYLE_FORMATS: StyleFormats[] = ['CSS', 'SCSS', 'SASS', 'Less', 'Stylus'];
-export const APP_ROOT = getAppRoot();
-export const ROOT = path.dirname(require.main.filename);
-export const CONFIG = getConfig();
-export const EXT = {
-  component: CONFIG.typescript ? 'tsx' : `j${CONFIG.jsxExt ? 'sx' : 's'}`,
-  script: `${CONFIG.typescript ? 't' : 'j'}s`,
-  style: getStylesExtension(CONFIG.styles),
-};
+export const APP_ROOT = utils.getAppRoot();

src/constants/index.ts

@@ -1,4 +1,4 @@
-import { getComponentVariables, getHOCVariables, getHookVariables } from '../utils';
+import * as utils from '../utils';
 import { FileService } from './FileService';
 import { TemplateGenerator } from './TemplateGenerator';
 import { HOCTemplate } from './temlpates/components/HOCTemplate';
@@ -8,7 +8,7 @@ import { HookTemplate } from './temlpates/components/HookTemplate';
 
 export class FileGenerateManager {
   static generateHook(answers) {
-    const variables = getHookVariables(answers);
+    const variables = utils.getHookVariables(answers);
 
     const fileService = new FileService(variables.fileName);
     const templateGenerator = new TemplateGenerator(variables);
@@ -20,7 +20,7 @@ export class FileGenerateManager {
   }
 
   static generateHOC(answers) {
-    const variables = getHOCVariables(answers);
+    const variables = utils.getHOCVariables(answers);
 
     const fileService = new FileService(variables.fileName);
     const templateGenerator = new TemplateGenerator(variables);
@@ -32,7 +32,7 @@ export class FileGenerateManager {
   }
 
   static generateComponent(answers) {
-    const variables = getComponentVariables(answers);
+    const variables = utils.getComponentVariables(answers);
 
     const fileService = new FileService(variables.fileName);
     const templateGenerator = new TemplateGenerator(variables);

src/core/FileGenerateManager.ts

@@ -1,11 +1,12 @@
 import fs from 'fs-extra';
 import path from 'path';
 
-import { CONFIG, EXT, APP_ROOT } from '../constants';
+import { APP_ROOT } from '@/constants';
+import { config } from '@/config';
 import { Logger } from './Logger';
 
 export class FileService {
-  private dirPath = path.resolve(CONFIG.path, CONFIG.wrapFolder ? this.fileName : '');
+  private dirPath = path.resolve(config.path, config.wrapFolder ? this.fileName : '');
 
   constructor(private fileName: string) {}
 
@@ -19,7 +20,7 @@ export class FileService {
   }
 
   genJs(template: string) {
-    const filePath = this.getFilePath(EXT.component);
+    const filePath = this.getFilePath(config.ext.component);
     if (!fs.pathExistsSync(filePath)) {
       fs.writeFileSync(filePath, template);
       Logger.success(
@@ -32,7 +33,7 @@ export class FileService {
   }
 
   genStyle(template: string) {
-    const filePath = this.getFilePath(EXT.style, 'styles');
+    const filePath = this.getFilePath(config.ext.style, config.prefixes.style);
     if (!fs.pathExistsSync(filePath)) {
       fs.writeFileSync(filePath, template);
       Logger.success(
@@ -45,7 +46,7 @@ export class FileService {
   }
 
   genTest(template: string) {
-    const filePath = this.getFilePath(EXT.component, 'test');
+    const filePath = this.getFilePath(config.ext.component, config.prefixes.test);
     if (!fs.pathExistsSync(filePath)) {
       fs.writeFileSync(filePath, template);
       Logger.success(

src/core/FileService.ts

@@ -1,4 +1,4 @@
-import * as c from './temlpates/shared/utils';
+import * as c from './temlpates/shared';
 
 export class TemplateBase {
   constructor(protected vars) {}