react-mfe-gen 1.1.0 → 1.1.2

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+# Live release🌍 version(x.xx)
+
+## Description:
+
+please describe new features introduced in this PR.
+
+## Check list:
+- [ ] Version upgraded in the package.json file.
+- [ ] E2E flow tested in local.

package/README.md

@@ -6,11 +6,12 @@ This tool uses the Runtime Integration approach — meaning each MFE is built as
 
 ## 🚀 Features:
 
-- Quickly set up a React microfront end base project.
-- Follows Runtime Integration best practices.
-- Outputs ready-to-execute code with fully dynamic, seamlessly integrated components..
-- Dynamically installs additional libraries based on user choices, such as state management, styling, and form handling.
-- Automatically cleans up any incomplete code if an unexpected issue occurs during the process.
+- Spin up a React Microfrontend Base in Seconds – No hassle, just code.
+- Built on Runtime Integration Best Practices – Seamless, scalable, and future-proof.
+- Generates Production-Ready Microfrontends – Pre-configured and good to go.
+- Smart Library Installer – Dynamically adds state management, styling, and form tools based on your choices.
+- Self-Healing Setup – Auto-cleans incomplete code if something breaks mid-process.
+- True Cross-Platform Compatibility – Works flawlessly on Windows, macOS, and Linux.
 
 ## 📦 Prerequisites:
 

package/creation/container-creation.js

@@ -1,6 +1,6 @@
 import inquirer from "inquirer";
 import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "../constants.js";
-import utils from "../utility.js";
+import { utils } from "../utility.js";
 
 const containerCreation = async (language) => {
   // To store different working dir
@@ -72,7 +72,8 @@ const containerCreation = async (language) => {
     console.log(
       `${INFO_MESSAGE.SUCCESS.CONTAINER}\n${INFO_MESSAGE.HAPPY_CODING}`
     );
-  } catch {
+  } catch (e) {
+    console.log("Error:", e);
     utils.cleanupProject(workingDirectories);
   }
 };

package/creation/new-pro-creation.js

@@ -6,7 +6,7 @@ import {
   QUESTION,
   CHOICE_CONSTANTS,
 } from "../constants.js";
-import utils from "../utility.js";
+import { utils, mfeGenLogger } from "../utility.js";
 
 const newProjectCreation = async (language) => {
   // To store different working dir
@@ -89,7 +89,7 @@ const newProjectCreation = async (language) => {
       // store working dir
       const mfeFullPath = path.join(mfeInfo.path, mfeName);
       workingDirectories.push(mfeFullPath);
-       // Go inside user specified mfe dir
+      // Go inside user specified mfe dir
       process.chdir(mfeInfo.path);
       const mfeAppCommand = utils.getLanguageTemplate(mfeName, isTypeScript);
 
@@ -104,10 +104,9 @@ const newProjectCreation = async (language) => {
       );
     }
 
-    console.log(
-      `${INFO_MESSAGE.SUCCESS.NEW_PRO}\n${INFO_MESSAGE.HAPPY_CODING}`
-    );
-  } catch {
+    mfeGenLogger.successLog(`${INFO_MESSAGE.SUCCESS.NEW_PRO}\n${INFO_MESSAGE.HAPPY_CODING}`);
+  } catch (e) {
+    mfeGenLogger.ErrorLog(`Error: ${e}`)
     utils.cleanupProject(workingDirectories);
   }
 };

package/creation/single-mfe-creation.js

@@ -1,6 +1,6 @@
 import inquirer from "inquirer";
 import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "../constants.js";
-import utils from "../utility.js";
+import { utils } from "../utility.js";
 
 const singleMfeCreation = async (language) => {
   // To store different working dir
@@ -34,15 +34,16 @@ const singleMfeCreation = async (language) => {
 
     // Make normal react app into MFE container
     await utils.configureMfe(
-      { ...mfeInfo, projectName: mfeName,mfeDescription, isTypeScript },
+      { ...mfeInfo, projectName: mfeName, mfeDescription, isTypeScript },
       mfeName,
       0
     );
 
-    console.log(
+    mfeGenLogger.successLog(
       `${INFO_MESSAGE.SUCCESS.ONE_MFE}\n${INFO_MESSAGE.HAPPY_CODING}`
     );
-  } catch {
+  } catch (e) {
+    mfeGenLogger.ErrorLog(`Error: ${e}`);
     utils.cleanupProject(workingDirectories);
   }
 };

package/docs/ANSI-COLOR-CODES.md

@@ -0,0 +1,14 @@
+
+\x1b[31m → Red
+
+\x1b[32m → Green
+
+\x1b[33m → Yellow
+
+\x1b[34m → Blue
+
+\x1b[35m → Magenta
+
+\x1b[36m → Cyan
+
+\x1b[0m → Reset

package/mfe-gen.js

@@ -1,9 +1,14 @@
 import inquirer from "inquirer";
 import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "./constants.js";
-import {newProjectCreation,containerCreation,singleMfeCreation} from "./creation/index.js";
+import {
+  newProjectCreation,
+  containerCreation,
+  singleMfeCreation,
+} from "./creation/index.js";
+import { mfeGenLogger } from "./utility.js";
 
 const mfeGen = async () => {
-  console.log(INFO_MESSAGE.DISCLAIMER);
+  mfeGenLogger.notifyLog(INFO_MESSAGE.DISCLAIMER);
 
   const { typeOfAction, language } = await inquirer.prompt(PROMPT.USER_NEED);
   switch (typeOfAction) {

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-mfe-gen",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Generate React micro-frontends, containers, and projects using a simple CLI with runtime integration support.",
   "main": "index.js",
   "scripts": {
+    "start": "node ./index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

package/templates/container/container-comp-template.js

@@ -1,10 +1,12 @@
-import utils from "../../utility.js";
+import { utils } from "../../utility.js";
 
 export const getContainerCompContent = (containerCompName, mfes) => {
   let containerComp = `import React from "react";\n`;
 
   for (let i = 0; i < mfes.length; i++) {
-    containerComp += `import {${utils.toCompName(mfes[i])}} from "./microfrontends/${utils.toCompName(mfes[i])}";\n`;
+    containerComp += `import {${utils.toCompName(
+      mfes[i]
+    )}} from "./microfrontends/${utils.toCompName(mfes[i])}";\n`;
   }
 
   containerComp += `\n\nfunction ${containerCompName}() {
@@ -15,7 +17,13 @@ export const getContainerCompContent = (containerCompName, mfes) => {
       <h1>Hello from ${containerCompName}</h1>\n`;
 
   for (let i = 0; i < mfes.length; i++) {
-    containerComp += `      <${utils.toCompName(mfes[i]) } name={"${utils.toCompName(mfes[i])}"} host={getMfeOrigin(process.env.REACT_APP_${mfes[i].toUpperCase()})} />\n`;
+    containerComp += `      <${utils.toCompName(
+      mfes[i]
+    )} name={"${utils.toCompName(
+      mfes[i]
+    )}"} host={getMfeOrigin(process.env.REACT_APP_${mfes[
+      i
+    ].toUpperCase()})} />\n`;
   }
 
   containerComp += `</div>

package/utility.js

@@ -39,11 +39,11 @@ class utils {
   static async cleanupProject(dirs) {
     try {
       for (let i = 0; i < dirs.length; i++) {
-        console.log(`Cleaning up the project directory: ${dirs[i]}`);
+        mfeGenLogger.notifyLog(`Cleaning up the project directory: ${dirs[i]}`);
         await rm(dirs[i], { recursive: true });
       }
     } catch (err) {
-      console.log(`Failed to clean project directory\n Error:${err}`);
+      mfeGenLogger.ErrorLog(`Failed to clean project directory\n Error:${err}`);
     }
   }
 
@@ -224,4 +224,16 @@ class utils {
   }
 }
 
-export default utils;
+class mfeGenLogger {
+  static successLog(message) {
+    console.log(`\x1b[32m${message}\x1b[0m`);
+  }
+  static ErrorLog(message) {
+    console.log(`\x1b[31m${message}\x1b[0m`);
+  }
+  static notifyLog(message) {
+    console.log(`\x1b[33m${message}\x1b[0m`);
+  }
+}
+
+export { utils, mfeGenLogger };