Clean Code

Author: fulviocanducci

package.json

@@ -1,13 +1,17 @@
 {
   "name": "create-reactjs-components",
-  "displayName": "create-reactjs-components",
-  "description": "Create Component and Context",
-  "version": "1.2.1",
+  "displayName": "Create React Component and Context",
+  "description": "Create React Component and Context",
+  "version": "1.2.2",
   "publisher": "canducci",
   "icon": "images/logo-three.png",
   "engines": {
     "vscode": "^1.48.0"
   },
+  "galleryBanner": {
+    "theme": "dark",
+    "color": "#3f79a5"
+  },
   "author": {
     "email": "fulviocanducci@hotmail.com",
     "name": "Fúlvio Cezar Canducci Dias"
@@ -171,16 +175,19 @@
     "test": "node ./out/test/runTest.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.48.0",
     "@types/glob": "^7.1.3",
     "@types/mocha": "^8.0.0",
     "@types/node": "^14.0.27",
-    "eslint": "^7.6.0",
+    "@types/vscode": "^1.48.0",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",
+    "eslint": "^7.6.0",
     "glob": "^7.1.6",
     "mocha": "^8.0.1",
     "typescript": "^3.8.3",
     "vscode-test": "^1.4.0"
+  },
+  "dependencies": {
+    "pascal-case": "^3.1.1"
   }
 }

src/commands/js.ts

@@ -1,24 +1,24 @@
 import * as vscode from 'vscode';
 import js from '../templates/js';
-import { componentFolder, contextFolder, createCommand } from '../utils/index';
+import { componentPath, contextPath, createCommandAsync } from '../utils/index';
 
 const commands: Array<vscode.Disposable> = [
   vscode.commands.registerCommand(
     'canducci.js.component',
-    async (args: any) => await createCommand(args, js.component, componentFolder, 'Component')
+    async (args: any) => await createCommandAsync(args, js.component, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.js.statelessComponent',
     async (args: any) =>
-      await createCommand(args, js.statelessComponent, componentFolder, 'Component')
+      await createCommandAsync(args, js.statelessComponent, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.js.context',
-    async (args: any) => await createCommand(args, js.context, contextFolder, 'Context')
+    async (args: any) => await createCommandAsync(args, js.context, contextPath, 'Context')
   ),
   vscode.commands.registerCommand(
     'canducci.js.statelessContext',
-    async (args: any) => await createCommand(args, js.statelessContext, contextFolder, 'Context')
+    async (args: any) => await createCommandAsync(args, js.statelessContext, contextPath, 'Context')
   ),
 ];
 

src/commands/jsx.ts

@@ -1,24 +1,25 @@
 import * as vscode from 'vscode';
 import jsx from '../templates/jsx';
-import { componentFolder, contextFolder, createCommand } from '../utils/index';
+import { componentPath, contextPath, createCommandAsync } from '../utils/index';
 
 const commands: Array<vscode.Disposable> = [
   vscode.commands.registerCommand(
     'canducci.jsx.component',
-    async (args: any) => await createCommand(args, jsx.component, componentFolder, 'Component')
+    async (args: any) => await createCommandAsync(args, jsx.component, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.jsx.statelessComponent',
     async (args: any) =>
-      await createCommand(args, jsx.statelessComponent, componentFolder, 'Component')
+      await createCommandAsync(args, jsx.statelessComponent, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.jsx.context',
-    async (args: any) => await createCommand(args, jsx.context, contextFolder, 'Context')
+    async (args: any) => await createCommandAsync(args, jsx.context, contextPath, 'Context')
   ),
   vscode.commands.registerCommand(
     'canducci.jsx.statelessContext',
-    async (args: any) => await createCommand(args, jsx.statelessContext, contextFolder, 'Context')
+    async (args: any) =>
+      await createCommandAsync(args, jsx.statelessContext, contextPath, 'Context')
   ),
 ];
 

src/commands/tsx.ts

@@ -1,24 +1,25 @@
 import * as vscode from 'vscode';
 import tsx from '../templates/tsx';
-import { componentFolder, contextFolder, createCommand } from '../utils/index';
+import { componentPath, contextPath, createCommandAsync } from '../utils/index';
 
 const commands: Array<vscode.Disposable> = [
   vscode.commands.registerCommand(
     'canducci.tsx.component',
-    async (args: any) => await createCommand(args, tsx.component, componentFolder, 'Component')
+    async (args: any) => await createCommandAsync(args, tsx.component, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.tsx.statelessComponent',
     async (args: any) =>
-      await createCommand(args, tsx.statelessComponent, componentFolder, 'Component')
+      await createCommandAsync(args, tsx.statelessComponent, componentPath, 'Component')
   ),
   vscode.commands.registerCommand(
     'canducci.tsx.context',
-    async (args: any) => await createCommand(args, tsx.context, contextFolder, 'Context')
+    async (args: any) => await createCommandAsync(args, tsx.context, contextPath, 'Context')
   ),
   vscode.commands.registerCommand(
     'canducci.tsx.statelessContext',
-    async (args: any) => await createCommand(args, tsx.statelessContext, contextFolder, 'Context')
+    async (args: any) =>
+      await createCommandAsync(args, tsx.statelessContext, contextPath, 'Context')
   ),
 ];
 

src/templates/base/index.ts

@@ -40,15 +40,15 @@ import React, { createContext } from "react";
 
 const ${name}Context = createContext();
 
-const ${name}ContextProvider = ({ children }) => {
+const ${name}Provider = ({ children }) => {
   return (
     <${name}Context.Provider value={{ }}>
       {children}
     </${name}Context.Provider>
   );
 }
 
-export default ${name}ContextProvider;
+export default ${name}Provider;
 `,
   };
 }
@@ -61,15 +61,15 @@ import React, { createContext } from "react";
 
 const ${name}Context = createContext();
 
-function ${name}ContextProvider({ children }) {
+function ${name}Provider({ children }) {
   return (
     <${name}Context.Provider value={{ }}>
       {children}
     </${name}Context.Provider>
   );
 }
 
-export default ${name}ContextProvider;
+export default ${name}Provider;
 `,
   };
 }

src/utils/index.ts

@@ -1,3 +1,3 @@
-import { componentFolder, contextFolder, createCommand } from './operations';
+import { componentPath, contextPath, createCommandAsync } from './operations';
 
-export { contextFolder, componentFolder, createCommand };
+export { contextPath, componentPath, createCommandAsync };

src/utils/operations.ts

@@ -1,55 +1,56 @@
 import * as fs from 'fs';
+import { pascalCase } from 'pascal-case';
 import * as path from 'path';
 import * as vscode from 'vscode';
 
-export function mergerDir(...values: Array<string>): string {
-  return values.join('');
+interface IPath {
+  dir: string;
+  file: string;
 }
 
-export function getProjetctRoot(): string {
-  return (vscode.workspace.workspaceFolders as any)[0].uri.fsPath;
-}
+const joinDir = (...values: Array<string>): string => values.join('');
 
-export function componentFolder(name: string, sep: string): string {
-  return mergerDir(getProjetctRoot(), sep, 'src', sep, 'components', sep, name);
-}
+const getPath = (name: string, type: string, extension: string): IPath => {
+  const fsPath = (vscode.workspace.workspaceFolders as any)[0].uri.fsPath;
+  const sep = path.sep;
+  const dir = joinDir(fsPath, sep, 'src', sep, type, sep, name);
+  const file = joinDir(dir, path.sep, 'index.', extension);
+  return {
+    dir,
+    file,
+  };
+};
 
-export function contextFolder(name: string, sep: string): string {
-  return mergerDir(getProjetctRoot(), sep, 'src', sep, 'contexts', sep, name);
-}
+export const componentPath = (name: string, extension: string): IPath =>
+  getPath(name, 'components', extension);
 
-export function existsDir(dir: string): boolean {
-  return fs.existsSync(dir);
-}
+export const contextPath = (name: string, extension: string): IPath =>
+  getPath(name, 'contexts', extension);
 
-export function createDir(dir: string): boolean {
+const existsDir = (dir: string): boolean => fs.existsSync(dir);
+
+const createDir = (dir: string) => {
   try {
-    fs.mkdirSync(dir, { recursive: true });
-    return true;
+    return fs.mkdirSync(dir, { recursive: true });
   } catch (error) {}
-  return false;
-}
+};
 
-export function createFile(dirFile: string, context: string): boolean {
+const createFile = (file: string, context: string) => {
   try {
-    fs.writeFileSync(dirFile, context.trimLeft().trimRight());
-    return true;
+    fs.writeFileSync(file, context.trimLeft().trimRight());
   } catch (error) {}
-  return false;
-}
+};
 
-export function openFileCreated(dirFile: string) {
-  setTimeout(() => {
-    vscode.workspace.openTextDocument(dirFile).then((editor) => {
-      if (!editor) {
-        return;
-      }
-      vscode.window.showTextDocument(editor);
-    });
-  }, 50);
-}
+const openFile = (file: string) => {
+  vscode.workspace.openTextDocument(file).then((editor) => {
+    if (!editor) {
+      return;
+    }
+    vscode.window.showTextDocument(editor, { preview: false });
+  });
+};
 
-export const optionsFileName = (title: string): vscode.InputBoxOptions => {
+const optionsFileName = (title: string): vscode.InputBoxOptions => {
   return {
     prompt: `Enter the ${title.toLowerCase()} name: `,
     placeHolder: `${title} name`,
@@ -58,31 +59,62 @@ export const optionsFileName = (title: string): vscode.InputBoxOptions => {
   };
 };
 
-export async function createCommand(
+const multiNames = (name: string): Array<string> => {
+  const names: Array<string> = name.split(new RegExp('[,;]')).map((v) => pascalCase(v.trim()));
+  return names;
+};
+
+const nameRules = (name: string | null): boolean => {
+  return (
+    name !== null &&
+    name.length > 0 &&
+    ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(name.charAt(0)) === false
+  );
+};
+
+export const createCommandAsync = async (
   args: any,
   callBackTemplate: Function,
   callBackFolder: Function,
   title: string
-) {
+) => {
   const { showInputBox, showErrorMessage, showInformationMessage } = vscode.window;
-  const name = await showInputBox(optionsFileName(title));
-  if (!name) {
+  let names = await showInputBox(optionsFileName(title));
+  if (!names) {
     showErrorMessage('Operation canceled !!!');
   } else {
-    const dir = callBackFolder(name, path.sep);
-    const { content, extension } = callBackTemplate(name);
-    const dirFile = mergerDir(dir, path.sep, 'index.', extension);
-    try {
-      if (!existsDir(dir)) {
-        createDir(dir);
-        createFile(dirFile, content);
-        openFileCreated(dirFile);
-        showInformationMessage(`${title} successfully created.`);
+    let created: Array<string> = [];
+    let existed: Array<string> = [];
+    let errors: Array<string> = [];
+    for (const name of multiNames(names)) {
+      if (nameRules(name)) {
+        const { content, extension } = callBackTemplate(name);
+        const { dir, file } = callBackFolder(name, extension);
+        try {
+          if (!existsDir(dir)) {
+            createDir(dir);
+            createFile(file, content);
+            openFile(file);
+            created.push(name);
+          } else {
+            existed.push(name);
+          }
+        } catch (error) {
+          await showErrorMessage(error);
+        }
       } else {
-        showInformationMessage(`${title} exists`);
+        errors.push(name.length === 0 ? 'empty' : name);
       }
-    } catch (error) {
-      showInformationMessage(error);
+    }
+
+    if (created.length > 0) {
+      showInformationMessage(`${title} ${created.join(', ')} successfully created.`);
+    }
+    if (existed.length > 0) {
+      showInformationMessage(`${title} ${existed.join(', ')} exists.`);
+    }
+    if (errors.length > 0) {
+      showErrorMessage(`${title} ${errors.join(', ')} is invalid.`);
     }
   }
-}
+};