fix: add Yarn support to Create React App and implement parallel async file write

add yarn support in create react app. write file async and parallelly to improve performance

Author: react-mern

src/global/global.ts

@@ -98,15 +98,15 @@ class GlobalStateUtility {
   }
 
   setDependencies(dependencies: string) {
-    this.dependencies += dependencies + " ";
+    this.dependencies += `${dependencies} `;
   }
 
   getDependencies() {
     return this.dependencies;
   }
 
   setDevDependencies(devDependencies: string) {
-    this.devDependencies += devDependencies + " ";
+    this.devDependencies += `${devDependencies} `;
   }
 
   getDevDependencies() {

src/index.ts

@@ -31,7 +31,6 @@ import readmeGenerator from "@/operation/readme";
 import cmdRunner from "@/utils/cmdRunner";
 import { NodePackageManager, SupportedProjectType } from "@/types";
 import addTestingInProject from "@/operation/testing";
-import { findFileRecursively, writeFile } from "./utils/file/file";
 
 /**
  * current we are storing the config with code but if we increase the number of features then we can have plugin dir that has it's own config file
@@ -88,7 +87,7 @@ async function main() {
     //getting project types if react then config related to react projects
     const projectType = getCurrentProject();
     if (projectType === SupportedProjectType.REACT) {
-      absolutePathConfigAdderInReact(selectedLanguage, selectedProjectType);
+      await absolutePathConfigAdderInReact(selectedLanguage, selectedProjectType);
       await reactRouterAdder();
     }
       // const result = findFileRecursively(projectName,"page");

src/operation/projectGenerator/projectGenerator.ts

@@ -86,13 +86,25 @@ async function initReactCraProject(
   packageManager: NodePackageManager,
   selectedLanguage: SupportedLanguage,
 ) {
-  const commandLine = ["create-react-app", projectName];
+  const packageManagerToUse = packageManager === NodePackageManager.NPM ? "npx" : packageManager;
 
-  if (selectedLanguage === "ts") commandLine.push("--template", "typescript");
+  const commandLine = [];
+
+  if (packageManager === "npm") {
+    commandLine.push("create-react-app");
+  } else {
+    commandLine.push("create","react-app");
+  }
+  commandLine.push(projectName);
+
+  if (selectedLanguage === SupportedLanguage.TS) {
+    commandLine.push("--template","typescript");
+  }
 
   try {
-    await cmdRunner("npx", commandLine);
+    await cmdRunner(packageManagerToUse, commandLine);
   } catch (error) {
+    console.log({ error11: error });
     process.exit(1);
   }
 }
@@ -134,7 +146,7 @@ export async function reactRouterAdder() {
 }
 
 //adds absolute path config in tsconfig.json or creates jsconfig.json if js project
-export function absolutePathConfigAdderInReact(
+export async function absolutePathConfigAdderInReact(
   selectedLanguage: SupportedLanguage,
   selectedProjectType: SupportedProjectGenerator,
 ) {
@@ -160,7 +172,7 @@ export function absolutePathConfigAdderInReact(
         return extraConfig + match;
       });
 
-      writeFile(viteConfigFileName, modifiedConfigString);
+     await writeFile(viteConfigFileName, modifiedConfigString);
     }
 
     if (selectedLanguage === SupportedLanguage.TS) {
@@ -194,7 +206,7 @@ export function absolutePathConfigAdderInReact(
         },
       };
 
-      writeFile("jsconfig.json", JSON.stringify(absolutePathConfigForJs));
+    await writeFile("jsconfig.json", JSON.stringify(absolutePathConfigForJs));
     }
   } catch (error) {
     console.log(error);

src/operation/readme/readme.ts

@@ -169,5 +169,5 @@ export default async function readmeGenerator({
   const readmeContent = readme.join("\n");
 
   //writing readme file with the dynamically generated readme content
-  writeFile("README.md", readmeContent);
+  await writeFile("README.md", readmeContent);
 }

src/operation/stateManagementCachingSol/graphql/graphql.ts

@@ -71,7 +71,7 @@ async function codegenAdder(currentPackageManager: NodePackageManager) {
     ...codegenDependencies.split(" "),
   ]);
 
-  writeFile("codegen.ts", reactCodeGenConfig, process.cwd());
+  await writeFile("codegen.ts", reactCodeGenConfig, process.cwd());
 
   const packageJsonPath = path.join(process.cwd(), "package.json");
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));

src/operation/testing/testing.ts

@@ -62,7 +62,7 @@ async function addTestingInReactViteProject() {
       `/// <reference types="vitest" /> \n` + modifiedViteConfig;
 
   //writing modified content in vite config
-  writeFile(viteConfigFileName, modifiedViteConfig);
+ await writeFile(viteConfigFileName, modifiedViteConfig);
 
   //adding type definition if language is typescript
   if (selectedLanguage === SupportedLanguage.TS) {
@@ -78,7 +78,7 @@ async function addTestingInReactViteProject() {
       viteEnvDeclaration +
       `\n/// <reference types="@testing-library/jest-dom" />`;
 
-    writeFile(
+   await writeFile(
       viteEnvDeclarationFileName,
       modifiedViteEnvDeclarationFile,
       path.join(process.cwd(), "src"),

src/operation/tooling/eslint/eslint.ts

@@ -32,7 +32,7 @@ async function addEslintInNext(currentPackageManager: NodePackageManager) {
   );
 
   //adding config file
-  writeFile(".eslintrc.json", config);
+  await writeFile(".eslintrc.json", config);
 
   // installing necessary dependencies
   await cmdRunner(currentPackageManager, [
@@ -69,7 +69,7 @@ async function addEslintInReact(currentPackageManager: NodePackageManager) {
   );
 
   //adding config file
-  writeFile(".eslintrc.json", config);
+  await writeFile(".eslintrc.json", config);
 
   // installing necessary dependencies
   await cmdRunner(currentPackageManager, [

src/utils/file/file.ts

@@ -1,4 +1,5 @@
 import fs, { readdirSync, unlinkSync } from "fs";
+import fsPromise from 'fs/promises'
 import path from "path";
 import {
   PluginConfigType,
@@ -107,16 +108,21 @@ export function writeFile(
   content: string,
   filePath?: string,
 ) {
+  return new Promise<string>((resolve,reject) =>{
   const writeFilePath = filePath
     ? path.join(filePath, fileName)
     : path.join(process.cwd(), fileName);
   try {
     filePath && fs.mkdirSync(filePath, { recursive: true });
 
-    fs.writeFileSync(writeFilePath, content, "utf8");
+   fsPromise.writeFile(writeFilePath,content,{encoding: "utf8"}).then(() =>{
+     resolve('done')
+   }).catch(err => reject(err))
   } catch (error) {
     console.log(error);
+    reject(error)
   }
+  })
 }
 
 /**
@@ -182,6 +188,7 @@ export async function writeFileFromConfig(baseConfig: PluginConfigType) {
     : { component: "jsx", native: "js" };
 
   //writing file from base config
+  const writeFilePromises: Promise<string>[] = []
   baseConfig.files.forEach((fileDetail) => {
     const content =
       typeof fileDetail.content === "function"
@@ -193,9 +200,11 @@ export async function writeFileFromConfig(baseConfig: PluginConfigType) {
         ? `${fileDetail.fileName}.${fileType[fileDetail.fileType]}`
         : fileDetail.fileName;
 
-    writeFile(fileName, content, path.join(process.cwd(), ...fileDetail.path));
+   writeFilePromises.push(writeFile(fileName, content, path.join(process.cwd(), ...fileDetail.path)));
   });
 
+  await Promise.allSettled(writeFilePromises)
+
   // If there are file modifications defined in the configuration, set them in the global state
   if (baseConfig?.fileModification) {
     globalInstance.setPluginAppEntryConfig(baseConfig.fileModification);
@@ -416,12 +425,13 @@ async function pluginEntryAdderInReact(pluginConfigArr: ReactPluginEntry[]) {
   const homePagePath = path.join(process.cwd(), "src", "components", "home");
 
   // Write the home page content and its CSS
+  await Promise.allSettled([
   writeFile(
     `Home.${isTsProject ? "tsx" : "jsx"}`,
     HomePageContent,
-    homePagePath,
-  );
-  writeFile("Home.module.css", homePageCss, homePagePath);
+    homePagePath,),
+    writeFile("Home.module.css", homePageCss, homePagePath)
+    ])
 }
 
 /**
@@ -472,10 +482,11 @@ async function pluginEntryAdderInNext(pluginConfigArr: NextPluginEntry[]) {
   const isTsProject = isFileExists(process.cwd(), "tsconfig.json");
   const homeContent = nextHomePageContent(isTsProject,importAndComponentValues.example);
   const homePath =  path.join(process.cwd(),"src","app");
-  writeFile(`page.${isTsProject ? "tsx" : "js"}`,homeContent,homePath);
-  writeFile("page.module.css",nextHomeCssContent(),homePath)
-  writeFile("globals.css","",homePath)
-
+  await Promise.allSettled([
+  writeFile(`page.${isTsProject ? "tsx" : "js"}`,homeContent,homePath),
+  writeFile("page.module.css",nextHomeCssContent(),homePath),
+  writeFile("globals.css","",homePath),
+  ])
 }
 
 /**