add typescript template

Author: fulviocanducci

package.json

@@ -33,7 +33,11 @@
     "onCommand:canducci.createContextArrowFunctionJs",
     "onCommand:canducci.createContextFunctionJs",
     "onCommand:canducci.createContextArrowFunctionJsx",
-    "onCommand:canducci.createContextFunctionJsx"
+    "onCommand:canducci.createContextFunctionJsx",
+    "onCommand:canducci.arrowFunctionComponentTs",
+    "onCommand:canducci.functionComponentTs",
+    "onCommand:canducci.functionContextTs",
+    "onCommand:canducci.arrowFunctionContextTs"
   ],
   "main": "./out/extension.js",
   "contributes": {
@@ -69,6 +73,22 @@
       {
         "command": "canducci.createContextFunctionJsx",
         "title": "React Function Context (jsx)"
+      },
+      {
+        "command": "canducci.arrowFunctionComponentTs",
+        "title": "React Arrow Function Component (tsx)"
+      },
+      {
+        "command": "canducci.functionComponentTs",
+        "title": "React Function Component (tsx)"
+      },
+      {
+        "command": "canducci.arrowFunctionContextTs",
+        "title": "React Arrow Function Context (tsx)"
+      },
+      {
+        "command": "canducci.functionContextTs",
+        "title": "React Function Context (tsx)"
       }
     ],
     "menus": {
@@ -80,7 +100,7 @@
         },
         {
           "command": "canducci.functionComponentJs",
-          "group": "1_modification",
+          "group": "2_modification",
           "when": "explorerResourceIsFolder"
         },
         {
@@ -90,12 +110,12 @@
         },
         {
           "command": "canducci.functionComponentJsx",
-          "group": "1_modification",
+          "group": "2_modification",
           "when": "explorerResourceIsFolder"
         },
         {
           "command": "canducci.createContextArrowFunctionJs",
-          "group": "2_modification",
+          "group": "1_modification",
           "when": "explorerResourceIsFolder"
         },
         {
@@ -105,13 +125,33 @@
         },
         {
           "command": "canducci.createContextArrowFunctionJsx",
-          "group": "2_modification",
+          "group": "1_modification",
           "when": "explorerResourceIsFolder"
         },
         {
           "command": "canducci.createContextFunctionJsx",
           "group": "2_modification",
           "when": "explorerResourceIsFolder"
+        },
+        {
+          "command": "canducci.arrowFunctionComponentTs",
+          "group": "1_modification",
+          "when": "explorerResourceIsFolder"
+        },
+        {
+          "command": "canducci.functionComponentTs",
+          "group": "2_modification",
+          "when": "explorerResourceIsFolder"
+        },
+        {
+          "command": "canducci.functionContextTs",
+          "group": "2_modification",
+          "when": "explorerResourceIsFolder"
+        },
+        {
+          "command": "canducci.arrowFunctionContextTs",
+          "group": "1_modification",
+          "when": "explorerResourceIsFolder"
         }
       ]
     }

src/extension.ts

@@ -11,6 +11,12 @@ import {
   createContextFunctionJsx,
   functionComponentJsx,
 } from './templates/jsx';
+import {
+  arrowFunctionComponentTs,
+  arrowFunctionContextTs,
+  functionComponentTs,
+  functionContextTs,
+} from './templates/tsx';
 import createComponent from './utils/index';
 import {
   getProjectComponentFolder,
@@ -94,6 +100,39 @@ export function activate(context: vscode.ExtensionContext) {
           getProjectContextFolder
         )
     ),
+    /* React Typescript*/
+    registerCommand(
+      'canducci.arrowFunctionComponentTs',
+      async (args: any) =>
+        await createComponent(
+          args,
+          arrowFunctionComponentTs,
+          getProjectComponentFolder
+        )
+    ),
+    registerCommand(
+      'canducci.functionComponentTs',
+      async (args: any) =>
+        await createComponent(
+          args,
+          functionComponentTs,
+          getProjectComponentFolder
+        )
+    ),
+    registerCommand(
+      'canducci.functionContextTs',
+      async (args: any) =>
+        await createComponent(args, functionContextTs, getProjectContextFolder)
+    ),
+    registerCommand(
+      'canducci.arrowFunctionContextTs',
+      async (args: any) =>
+        await createComponent(
+          args,
+          arrowFunctionContextTs,
+          getProjectContextFolder
+        )
+    ),
   ];
 
   context.subscriptions.push(...disposables);

src/templates/base/index.ts

@@ -1,5 +1,6 @@
 import { IComponentReturn } from './types';
 
+/** Base - Component */
 export function functionComponentBase(
   name: string,
   extension: string
@@ -11,9 +12,7 @@ export function functionComponentBase(
 import React from 'react';
 
 function ${name}() {
-    return (
-        <div>${name}</div>
-    )
+    return <div>${name}</div>
 }
 
 export default ${name};
@@ -32,16 +31,15 @@ export function arrowFunctionComponentBase(
 import React from 'react';
 
 const ${name} = () => {
-    return (
-        <div>${name}</div>
-    )
+    return <div>${name}</div>
 }
 
 export default ${name};
 `,
   };
 }
 
+/** Base - ContextApi */
 export function createContextArrowFunctionBase(
   name: string,
   extension: string
@@ -91,3 +89,104 @@ export default ${name}ContextProvider;
 `,
   };
 }
+
+/** base - typescript */
+export function functionComponentTypescriptBase(
+  name: string,
+  extension: string
+): IComponentReturn {
+  return {
+    title: 'Component',
+    extension: extension,
+    content: `
+import React from 'react';
+
+interface ${name}Props { }
+
+function ${name}({ }: ${name}Props) {
+  return <div>${name}</div>;
+}
+
+export default ${name};
+    `,
+  };
+}
+
+export function arrowFunctionComponentTypescriptBase(
+  name: string,
+  extension: string
+): IComponentReturn {
+  return {
+    title: 'Component',
+    extension: extension,
+    content: `
+import React, { FC } from 'react';
+
+interface ${name}Props {}
+
+const ${name}: FC<${name}Props> = ({ }:${name}Props) => {
+  return <div>${name}</div>;
+};
+
+export default ${name};    
+    `,
+  };
+}
+export function functionContextTypescriptBase(
+  name: string,
+  extension: string
+): IComponentReturn {
+  return {
+    title: 'Context',
+    extension: extension,
+    content: `
+import React, { createContext, ReactNode } from 'react';
+
+interface ${name}ProviderProps {
+  children: ReactNode;
+}
+
+interface ${name}Props { }
+
+export const ${name}Context = createContext<${name}Props>({} as ${name}Props);
+
+function ${name}Provider({ children }: ${name}ProviderProps) {  
+  return (
+    <${name}Context.Provider value={{ }}>
+      {children}
+    </${name}Context.Provider>
+  );
+}
+
+export default ${name}Provider;`,
+  };
+}
+
+export function arrowFunctionContextTypescriptBase(
+  name: string,
+  extension: string
+): IComponentReturn {
+  return {
+    title: 'Context',
+    extension: extension,
+    content: `
+import React, { createContext, FC, ReactNode } from 'react';
+
+interface ${name}ContextProps { }
+
+export const ${name}Context = createContext<${name}ContextProps>(
+  {} as ${name}ContextProps
+);
+
+const ${name}Provider: FC<{ children: ReactNode }> = ({ children }) => {
+return (
+    <${name}Context.Provider value={{ }}>
+      {children}
+    </${name}Context.Provider>
+  );
+};
+
+export default ${name}Provider;
+`,
+  };
+}

src/templates/tsx.ts

@@ -0,0 +1,24 @@
+import {
+  arrowFunctionComponentTypescriptBase,
+  arrowFunctionContextTypescriptBase,
+  functionComponentTypescriptBase,
+  functionContextTypescriptBase,
+} from './base/index';
+
+const arrowFunctionComponentTs = (name: string) =>
+  arrowFunctionComponentTypescriptBase(name, 'tsx');
+
+const functionComponentTs = (name: string) =>
+  functionComponentTypescriptBase(name, 'tsx');
+
+const functionContextTs = (name: string) =>
+  functionContextTypescriptBase(name, 'tsx');
+const arrowFunctionContextTs = (name: string) =>
+  arrowFunctionContextTypescriptBase(name, 'tsx');
+
+export {
+  arrowFunctionComponentTs,
+  functionComponentTs,
+  functionContextTs,
+  arrowFunctionContextTs,
+};