✨ Add typescript templates

Author: jstorm31

src/model.ts

@@ -1,12 +1,21 @@
 import * as vscode from "vscode";
 import * as fs from "fs";
 import * as shell from "shelljs";
-import * as path from "path";
 
-import * as templates from "./template/component";
+import * as templatesJavascript from "./template/component";
+import * as templatesTypescript from "./template/componentsTypescrip";
 import config from "./config";
 
 export default class Model {
+  getConfiguration(): vscode.WorkspaceConfiguration {
+    return vscode.workspace.getConfiguration(config.namespace);
+  }
+
+  getTemplates() {
+    const configuration = this.getConfiguration();
+    return configuration.typescript ? templatesTypescript : templatesJavascript;
+  }
+
   createComponent(contextUri: string) {
     vscode.window
       .showInputBox({
@@ -50,7 +59,7 @@ export default class Model {
         this.createFolder(folderPath);
         this.createIndexFile(name, folderPath, true);
         this.createComponentFile(folderPath, name, true);
-        this.createFile(folderPath, `${name}.styles.js`, templates.styles);
+        this.createStyleFile(folderPath, name);
 
         vscode.window.showInformationMessage(
           "The component has been successfuly created."
@@ -59,30 +68,46 @@ export default class Model {
   }
 
   createComponentFile(path: string, name: string, fela: boolean) {
-    const fullName = name + ".jsx";
-    const configuration = vscode.workspace.getConfiguration(config.namespace);
+    const configuration = this.getConfiguration();
+    const templates = this.getTemplates();
+    const fullName = `${name}.${configuration.typescript ? "t" : "j"}sx`;
 
     let content;
-    if (fela && !configuration.felaHooks) {
+    if (fela && !configuration.felaHooks) {
       content = templates.felaComponent(name, configuration.moduleDependencies);
-    } else if (fela && configuration.felaHooks) {
-      content = templates.felaHookComponent(name, configuration.moduleDependencies);
+    } else if (fela && configuration.felaHooks) {
+      content = templates.felaHookComponent(
+        name,
+        configuration.moduleDependencies
+      );
     } else {
       content = templates.component(name, configuration.moduleDependencies);
     }
 
     this.createFile(path, fullName, content);
   }
 
+  createStyleFile(path: string, name: string) {
+    const configuration = this.getConfiguration();
+    const templates = this.getTemplates();
+    const fullName = `${name}.styles.${configuration.typescript ? "t" : "j"}s`;
+
+    this.createFile(
+      path,
+      fullName,
+      templates.styles(configuration.moduleDependencies)
+    );
+  }
+
   createIndexFile(componentName: string, path: string, fela: boolean) {
-    const name = "index.js";
     const configuration = vscode.workspace.getConfiguration(config.namespace);
+    const name = `index.${configuration.typescript ? "t" : "j"}s`;
 
     let content;
     if (!fela || (fela && configuration.felaHooks)) {
-      content = templates.index(componentName);
+      content = templatesJavascript.index(componentName);
     } else {
-      content = templates.indexFela(componentName);
+      content = templatesJavascript.indexFela(componentName);
     }
 
     this.createFile(path, name, content);

src/template/component.ts

@@ -57,7 +57,8 @@ ${name}.propTypes = {
 export default ${name};
 `;
 
-export const styles = "export const container = () => ({});\n";
+export const styles = (dependencies: boolean) =>
+  "export const container = () => ({});\n";
 
 export const component = (name: string, dependencies: boolean) => `${
   dependencies

src/template/componentsTypescrip.ts

@@ -0,0 +1,67 @@
+export const felaComponent = (name: string, dependencies: boolean) => `${
+    dependencies
+      ? "import { React,  FunctionComponent } from '../../dependencies';"
+      : "import React, { FunctionComponent } from 'react';"
+  }
+
+type ${name}Props = {
+    styles: object
+}
+
+const ${name}: FunctionComponent<${name}Props> = ({ styles }) => (
+    <div className={styles.container}>
+        
+    </div>
+);
+
+export default ${name};
+`;
+
+export const felaHookComponent = (name: string, dependencies: boolean) => `${
+  dependencies
+    ? "import { React,  FunctionComponent, useFelaEnhanced } from '../../dependencies';"
+    : "import React, { FunctionComponent } from 'react';\nimport { useFelaEnhanced } from 'hooks';"
+}
+
+import * as rules from './${name}.styles';
+
+type ${name}Props = {}
+
+const ${name}: FunctionComponent<${name}Props> = () => {
+    const { styles } = useFelaEnhanced(rules);
+
+    return (
+        <div className={styles.container}>
+
+        </div>
+    );
+};
+
+export default ${name};
+`;
+
+export const styles = (dependencies: boolean) => `${
+  dependencies
+    ? "import { TRule } from '../../dependencies';\n"
+    : "import type { TRule } from 'fela';"
+}
+
+export const container: TRule = () => ({});
+`;
+
+export const component = (name: string, dependencies: boolean) => `${
+  dependencies
+    ? "import { React, FunctionComponent } from '../../dependencies';"
+    : "import React, { FunctionComponent } from 'react';"
+}
+
+type ${name}Props = {}
+
+const ${name}: FunctionComponent<${name}Props> = () => (
+    <>
+        
+    </>
+);
+
+export default ${name};
+`;