Add new component hooks

Author: vs-cristian

.eslintrc.yml

@@ -4,6 +4,7 @@ env:
 extends:
   - airbnb-base
   - prettier
+#parser: babel
 globals:
   Atomics: readonly
   SharedArrayBuffer: readonly

package-lock.json

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

src/config/default.json

@@ -8,7 +8,6 @@ export class FileService {
   constructor(fileName) {
     this.fileName = fileName;
     this.dirPath = path.resolve(CONFIG.path, this.fileName);
-    console.log(fileName, CONFIG.path);
   }
 
   getFilePath(ext, type) {
@@ -17,7 +16,7 @@ export class FileService {
   }
 
   createDir() {
-    return fs.mkdirp(this.dirPath);
+    fs.mkdirpSync(this.dirPath);
   }
 
   genJs(template) {

src/core/FileService.js

@@ -3,7 +3,7 @@ import logSymbols from 'log-symbols';
 
 export class Logger {
   static info(value) {
-    const log = v => this.log(v, 'blue', logSymbols.info);
+    const log = v => Logger.log(v, 'blue', logSymbols.info);
 
     if (typeof value === 'function') {
       return log(value(chalk));
@@ -12,7 +12,7 @@ export class Logger {
   }
 
   static success(value) {
-    const log = v => this.log(v, 'green', logSymbols.success);
+    const log = v => Logger.log(v, 'green', logSymbols.success);
 
     if (typeof value === 'function') {
       return log(value(chalk));
@@ -21,7 +21,7 @@ export class Logger {
   }
 
   static warn(value) {
-    const log = v => this.log(v, 'yellow', logSymbols.warning);
+    const log = v => Logger.log(v, 'yellow', logSymbols.warning);
 
     if (typeof value === 'function') {
       return log(value(chalk));
@@ -30,7 +30,7 @@ export class Logger {
   }
 
   static error(value) {
-    const log = v => this.log(v, 'red', logSymbols.error);
+    const log = v => Logger.log(v, 'red', logSymbols.error);
 
     if (typeof value === 'function') {
       return log(value(chalk));

src/core/Logger.js

@@ -3,31 +3,36 @@ import fs from 'fs-extra';
 import Mustache from 'mustache';
 
 import { EXT, ROOT } from '../constants';
+import { Logger } from './Logger';
 
 export class TemplateService {
   constructor(variables) {
     this.variables = variables;
-    this.parse = this.parse.bind(this);
   }
 
-  parse(template) {
-    return Mustache.render(template, this.variables);
+  static getExt(format) {
+    switch (format) {
+      case 'script':
+      case 'test':
+        return EXT.component === 'js' ? 'jsx' : EXT.component;
+      case 'style':
+        return 'css';
+      default:
+        Logger.error(`Unhandled format ${format}`);
+        return process.exit(1);
+    }
   }
 
-  getScriptTemplate() {
-    const ext = EXT.component === 'js' ? 'jsx' : EXT.component;
-    const filePath = path.resolve(ROOT, `templates/component-${ext}.template`);
-    return fs.readFile(filePath, 'utf8').then(this.parse);
-  }
-
-  getStyleTemplate() {
-    const filePath = path.resolve(ROOT, `templates/style-css.template`);
-    return fs.readFile(filePath, 'utf8').then(this.parse);
-  }
+  getTemplate(format = 'script') {
+    const ext = TemplateService.getExt(format);
+    const { type } = this.variables;
 
-  getTestTemplate() {
-    const ext = EXT.component === 'js' ? 'jsx' : EXT.component;
-    const filePath = path.resolve(ROOT, `templates/test-${ext}.template`);
-    return fs.readFile(filePath, 'utf8').then(this.parse);
+    const filePath = path.resolve(ROOT, `templates/${type}/${type}-${format}-${ext}.template`);
+    if (fs.pathExistsSync(filePath)) {
+      const template = fs.readFileSync(filePath, 'utf8');
+      return Mustache.render(template, this.variables);
+    }
+    Logger.warn(chalk => `Couldn't find "${format}" template at ${chalk.white(filePath)}`);
+    return '// Template not found';
   }
 }

src/core/TemplateService.js

@@ -4,24 +4,34 @@ import inquirer from 'inquirer';
 
 import { FileService } from './core/FileService';
 import { TemplateService } from './core/TemplateService';
-import { getQuestions, getVariables, parseAnswers } from './utils';
+import { Logger } from './core/Logger';
+import { getVariables, parseAnswers } from './utils';
+import { getQuestions } from './questions/getQuestions';
+// import { type as typeQuestion } from './questions/questions';
 
+const type = 'component';
 inquirer
-  .prompt(getQuestions())
+  .prompt(getQuestions(type))
   .then(async answers => {
+    // const answers = await inquirer.prompt(getQuestions(type));
+
     process.stdout.write('\n');
-    const data = parseAnswers(answers);
+
+    const data = parseAnswers({ ...answers, type });
     const variables = getVariables(data);
 
-    const fileService = new FileService(variables.fileName());
+    const fileService = new FileService(variables.fileName(type));
     const templateService = new TemplateService(variables);
 
-    await fileService.createDir();
-    await fileService.genJs(await templateService.getScriptTemplate());
-    await fileService.genStyle(await templateService.getStyleTemplate());
-    if (answers.test) {
-      await fileService.genTest(await templateService.getTestTemplate());
+    fileService.createDir();
+    fileService.genJs(templateService.getTemplate());
+    if (data.type !== 'hoc') {
+      fileService.genStyle(templateService.getTemplate('style'));
     }
+    if (data.test) {
+      fileService.genTest(templateService.getTemplate('test'));
+    }
+
     process.stdout.write('\n');
   })
-  .catch(console.error);
+  .catch(Logger.error);

src/index.js

@@ -0,0 +1,36 @@
+import { CONFIG } from '../constants';
+import * as q from './questions';
+import { Logger } from '../core/Logger';
+
+const hooks = [
+  'useState',
+  'useEffect',
+  'useContext',
+  'useReducer',
+  'useRef',
+  'useMemo',
+  'useCallBack',
+];
+const mods = [];
+
+export function getQuestions(type) {
+  switch (type) {
+    case 'component': {
+      if (!CONFIG.typescript) mods.push('propTypes');
+
+      const val = [q.name('Component'), q.test, q.hooks(hooks)];
+      if (mods.length) val.push(q.mods(mods));
+
+      return val;
+    }
+    case 'hoc': {
+      const val = [q.name('HOC'), q.hooks(hooks)];
+      if (mods.length) val.push(q.mods(mods));
+
+      return val;
+    }
+    default:
+      Logger.error(`Unhandled generation type ${type}`);
+      return process.exit(1);
+  }
+}

src/questions/getQuestions.js

@@ -0,0 +1,41 @@
+export const type = {
+  type: 'list',
+  name: 'type',
+  message: 'Select type:',
+  choices: [
+    {
+      name: 'Component',
+      value: 'component',
+    },
+    {
+      name: 'High Order Component',
+      value: 'hoc',
+    },
+  ],
+};
+
+export const name = genType => ({
+  type: 'input',
+  name: 'name',
+  message: `${genType} name:`,
+});
+
+export const test = {
+  type: 'confirm',
+  name: 'test',
+  message: 'Create a test file?',
+};
+
+export const hooks = args => ({
+  type: 'checkbox',
+  name: 'hooks',
+  message: 'Add hooks:',
+  choices: args,
+});
+
+export const mods = args => ({
+  type: 'checkbox',
+  name: 'mods',
+  message: 'Add modifications:',
+  choices: args,
+});