Implement AST code generation

Author: vs-cristian

.babelrc

@@ -7,5 +7,8 @@
       }
     ],
     "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
   ]
 }

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 lib
 .idea
+/example/
 .vscode

.vscode/settings.json

@@ -40,6 +40,7 @@
   "devDependencies": {
     "@babel/cli": "^7.10.1",
     "@babel/core": "^7.10.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/preset-env": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
     "@types/babel-generator": "^6.25.3",

package.json

@@ -0,0 +1,52 @@
+import { getComponentVariables, getHOCVariables, getHookVariables } from '../utils';
+import { FileService } from './FileService';
+import { TemplateGenerator } from './TemplateGenerator';
+import { HOCTemplate } from './temlpates/components/HOCTemplate';
+import { ComponentTemplate } from './temlpates/components/ComponentTemplate';
+import { ComponentTestTemplate } from './temlpates/components/ComponentTestTemplate';
+import { HookTemplate } from './temlpates/components/HookTemplate';
+
+export class FileGenerateManager {
+  static generateHook(answers) {
+    const variables = getHookVariables(answers);
+
+    const fileService = new FileService(variables.fileName);
+    const templateGenerator = new TemplateGenerator(variables);
+
+    fileService.createDir();
+
+    const jsTemplate = templateGenerator.generateTemplate(HookTemplate);
+    fileService.genJs(jsTemplate);
+  }
+
+  static generateHOC(answers) {
+    const variables = getHOCVariables(answers);
+
+    const fileService = new FileService(variables.fileName);
+    const templateGenerator = new TemplateGenerator(variables);
+
+    fileService.createDir();
+
+    const jsTemplate = templateGenerator.generateTemplate(HOCTemplate);
+    fileService.genJs(jsTemplate);
+  }
+
+  static generateComponent(answers) {
+    const variables = getComponentVariables(answers);
+
+    const fileService = new FileService(variables.fileName);
+    const templateGenerator = new TemplateGenerator(variables);
+
+    fileService.createDir();
+
+    const jsTemplate = templateGenerator.generateTemplate(ComponentTemplate);
+    fileService.genJs(jsTemplate);
+
+    if (variables.test) {
+      const testTemplate = templateGenerator.generateTemplate(ComponentTestTemplate);
+      fileService.genTest(testTemplate);
+    }
+
+    fileService.genStyle('');
+  }
+}

src/core/FileGenerateManager.ts

@@ -41,7 +41,7 @@ export class Logger {
     return log(value);
   }
 
-  static log(value: LoggerValue, color = 'white', icon: string) {
+  static log(value: LoggerValue, color = 'white', icon?: string) {
     if (typeof value === 'function') value = value(chalk);
 
     if (icon) return console.log(icon, chalk[color](value));

src/core/Logger.ts

@@ -0,0 +1,17 @@
+import * as c from './temlpates/shared/utils';
+
+export class TemplateBase {
+  constructor(protected vars) {}
+
+  protected getReactImportSpecifier() {
+    return this.vars.hooks.map(hook => c.importSpec(hook));
+  }
+
+  protected hasHook(hook: string) {
+    return this.vars.hooks.includes(hook);
+  }
+
+  protected hasMod(mod: string) {
+    return this.vars.mods?.includes(mod);
+  }
+}

src/core/TemplateBase.ts

@@ -0,0 +1,29 @@
+import * as t from '@babel/types';
+import generate from '@babel/generator';
+import prettier from 'prettier';
+import { IComponentVariables, IHOCVariables, IHookVariables } from '../types';
+
+export type IVariables = IHookVariables | IHOCVariables | IComponentVariables;
+
+export interface Template {
+  generateAST(): t.File;
+}
+
+export class TemplateGenerator {
+  constructor(private vars: IVariables) {}
+
+  private static addEmptyLines(template) {
+    return template.replace(/^\s*;$/gm, '');
+  }
+
+  generateTemplate(FileTemplate) {
+    let template;
+    const ast = new FileTemplate(this.vars).generateAST();
+
+    template = generate(ast).code;
+    template = TemplateGenerator.addEmptyLines(template);
+    template = prettier.format(template, { parser: 'babel' });
+
+    return template;
+  }
+}

src/core/TemplateGenerator.ts

@@ -0,0 +1,39 @@
+import * as t from '@babel/types';
+import * as c from '../shared';
+import { Template } from '../../TemplateGenerator';
+import { TemplateBase } from '../../TemplateBase';
+import { generateHooks } from '../shared';
+
+export class ComponentTemplate extends TemplateBase implements Template {
+  getStyleImportStringLiteral() {
+    const name = `${this.vars.fileName}.styles.${this.vars.ext.style}`;
+    return t.stringLiteral(name);
+  }
+
+  generateAST() {
+    const body: t.Statement[] = [];
+
+    body.push(c.importDefault('React', 'react', this.getReactImportSpecifier()));
+
+    if (this.hasMod('propTypes')) {
+      body.push(c.importDefault('PropTypes', 'prop-types'));
+    }
+
+    body.push(t.importDeclaration([], this.getStyleImportStringLiteral()));
+    body.push(t.emptyStatement());
+
+    if (this.hasHook('useReducer')) {
+      body.push(c.useReducerInit());
+      body.push(t.emptyStatement());
+    }
+
+    body.push(c.component(this.vars.componentName, generateHooks(this.vars.hooks)));
+    body.push(t.emptyStatement());
+
+    if (this.hasMod('propTypes')) {
+      body.push(c.propTypes(this.vars.componentName));
+    }
+
+    return c.program(body);
+  }
+}