Merge pull request #4 from univdev/feature/create-react-context-and-provider

Create functions 'Create React Context' and 'Create React Provider'

Author: univdev

package.json

@@ -24,6 +24,14 @@
       {
         "command": "vscode-react-developer-toolkit.createReactHOC",
         "title": "Create React HOC"
+      },
+      {
+        "command": "vscode-react-developer-toolkit.createReactContext",
+        "title": "Create React Context"
+      },
+      {
+        "command": "vscode-react-developer-toolkit.createReactProvider",
+        "title": "Create React Provider"
       }
     ],
     "menus": {
@@ -46,6 +54,14 @@
         {
           "command": "vscode-react-developer-toolkit.createReactHOC",
           "group": "1_create"
+        },
+        {
+          "command": "vscode-react-developer-toolkit.createReactProvider",
+          "group": "1_create"
+        },
+        {
+          "command": "vscode-react-developer-toolkit.createReactContext",
+          "group": "1_create"
         }
       ]
     },

src/commands/CreateReactComponent.command.ts

@@ -13,8 +13,6 @@ export const createReactComponentCommand = (uri: vscode.Uri) => {
       placeHolder: 'MyComponent'
     }).then(componentName => {
       if (componentName) {
-        vscode.window.showInformationMessage(dirPath, componentName);
-
         const componentDir = path.join(dirPath, componentName);
         fs.mkdirSync(componentDir);
 

src/commands/CreateReactContext.command.ts

@@ -0,0 +1,22 @@
+import * as vscode from 'vscode';
+import * as fs from 'fs';
+import * as fspath from 'path';
+import { createReactContextFactory } from '../factory/CreateReactContext.factory';
+
+export const createReactContextCommand = (uri: vscode.Uri) => {
+  const path = uri.fsPath;
+
+  vscode.window.showInputBox({
+    prompt: 'Enter React context name',
+    placeHolder: 'MyContext (A .context prefix is added to the filename.)',
+  }).then((contextName) => {
+    if (contextName) {
+      const contextFileContent = createReactContextFactory(contextName);
+
+      fs.writeFileSync(
+        fspath.join(path, `${contextName}.context.ts`),
+        contextFileContent,
+      );
+    }
+  });
+};

src/commands/CreateReactProvider.command.ts

@@ -0,0 +1,31 @@
+import * as vscode from 'vscode';
+import * as fs from 'fs';
+import * as fspath from 'path';
+import { barrelFileFactory } from '../factory/BarrelFile.factory';
+import { createReactProviderFactory } from '../factory/CreateReactProvider.factory';
+
+export const createReactProviderCommand = (uri: vscode.Uri) => {
+  const path = uri.fsPath;
+
+  vscode.window.showInputBox({
+    prompt: 'Enter React provider name',
+    placeHolder: 'MyProvider (Provider: use same name as context)',
+  }).then((providerName) => {
+    if (providerName) {
+      const fileName = `${providerName}.provider.tsx`;
+
+      const contextFileContent = createReactProviderFactory(providerName);
+      const barrelFile = barrelFileFactory(fileName);
+
+      fs.mkdirSync(fspath.join(path, providerName));
+      fs.writeFileSync(
+        fspath.join(path, providerName, fileName),
+        contextFileContent,
+      );
+      fs.writeFileSync(
+        fspath.join(path, providerName, 'index.ts'),
+        barrelFile,
+      );
+    }
+  });
+};

src/factory/BarrelFile.factory.ts

@@ -1,3 +1,3 @@
-export const barrelFileFactory = (componentName: string) => {
-  return `export * from './${componentName}';`;
+export const barrelFileFactory = (fileName: string) => {
+  return `export * from './${fileName}';`;
 };

src/factory/Commands.factory.ts

@@ -2,6 +2,8 @@ import * as vscode from 'vscode';
 import { createReactComponentCommand } from "../commands/CreateReactComponent.command";
 import { createReactHookCommand } from '../commands/CreateReactHook.factory';
 import { createReactHOCCommand } from '../commands/CreateReactHOC.command';
+import { createReactProviderCommand } from '../commands/CreateReactProvider.command';
+import { createReactContextCommand } from '../commands/CreateReactContext.command';
 
 export const commandsFactory = (context: vscode.ExtensionContext) => {
   commands.forEach((command) => {
@@ -22,6 +24,14 @@ const commands = [
     'vscode-react-developer-toolkit.createReactHook',
     createReactHookCommand,
   ),
+  vscode.commands.registerCommand(
+    'vscode-react-developer-toolkit.createReactProvider',
+    createReactProviderCommand,
+  ),
+  vscode.commands.registerCommand(
+    'vscode-react-developer-toolkit.createReactContext',
+    createReactContextCommand,
+  ),
 ];
 
 export default commandsFactory;

src/factory/CreateReactContext.factory.ts

@@ -0,0 +1,10 @@
+export const createReactContextFactory = (contextName: string) => `import { createContext } from "react";
+
+export type I${contextName}ContextValue = {
+  // Enter context props
+};
+
+export const ${contextName}Context = createContext<I${contextName}ContextValue | undefined>(undefined);
+
+export default ${contextName}Context;
+`;

src/factory/CreateReactProvider.factory.ts

@@ -0,0 +1,14 @@
+export const createReactProviderFactory = (contextName: string) => `import { FC } from "react";
+
+export type ITestProviderProps = {
+  // Enter provider props
+};
+
+export const TestProvider: FC<ITestProviderProps> = () => {
+  return (
+
+  );
+};
+
+export default TestProvider;
+`;