react-mfe-gen 1.2.6 → 1.2.9

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +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.
+# 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/.github/workflows/npm-publish.yml

@@ -1,54 +1,23 @@
-name: Node.js Package
-
-on:
-  push:
-    branches:
-      - main
-      
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm ci
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-
-      - name: Get previous version from main
-        id: prev_version
-        run: |
-          git fetch origin main --depth=1
-          PREV_VERSION=$(git show origin/main:package.json | grep '"version":' | head -1 | sed -E 's/.*"([^"]+)".*/\1/')
-          echo "PREV_VERSION=$PREV_VERSION" >> $GITHUB_ENV
-
-      - name: Get current version
-        id: curr_version
-        run: |
-          CURR_VERSION=$(grep '"version":' package.json | head -1 | sed -E 's/.*"([^"]+)".*/\1/')
-          echo "CURR_VERSION=$CURR_VERSION" >> $GITHUB_ENV
-
-      - name: Check version change
-        run: |
-          echo "Previous version: $PREV_VERSION"
-          echo "Current version: $CURR_VERSION"
-          if [ "$PREV_VERSION" = "$CURR_VERSION" ]; then
-            echo "Version not changed. Skipping publish."
-            exit 0
-          fi
-
-      - name: Publish to npm
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
+name: Publish Package
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  id-token: write 
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish

package/README.md

@@ -1,34 +1,34 @@
-# React Microfront end generator (react-mfe-gen)
-
-<strong style="color:orange">⚠️ Important:</strong> Install this package globally using `npm install -g` to use the CLI anywhere on your system.
-
-react-mfe-gen is a CLI tool that helps you quickly scaffold a base setup for React Micro-Frontend (MFE) architecture.
-
-This tool uses the Runtime Integration approach — meaning each MFE is built as a Web Component and integrated dynamically at runtime. This keeps your applications modular, scalable, and independent.
-
-## Features:
-
-- 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:
-
-Node.js installed (latest LTS recommended).
-
-## Installation & Usage:
-
-- Install the package globally
-    `npm install -g react-mfe-gen`
-
-- Run the CLI
-    `create-react-mfe`
-
-- You will see the below message in your terminal
-
-![react-mfe-gen](./images/react-mfe-gen.png)
-
-- Answer the prompts to generate your project, container, or micro-frontend.
+# React Microfront end generator (react-mfe-gen)
+
+<strong style="color:orange">⚠️ Important:</strong> Install this package globally using `npm install -g` to use the CLI anywhere on your system.
+
+react-mfe-gen is a CLI tool that helps you quickly scaffold a base setup for React Micro-Frontend (MFE) architecture.
+
+This tool uses the Runtime Integration approach — meaning each MFE is built as a Web Component and integrated dynamically at runtime. This keeps your applications modular, scalable, and independent.
+
+## Features:
+
+- 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:
+
+Node.js installed (latest LTS recommended).
+
+## Installation & Usage:
+
+- Install the package globally
+    `npm install -g react-mfe-gen`
+
+- Run the CLI
+    `create-react-mfe`
+
+- You will see the below message in your terminal
+
+![react-mfe-gen](./images/react-mfe-gen.png)
+
+-That's it! Answer the prompts to generate your project, container, or micro-frontend.

package/dist/constants/constants.js

@@ -21,30 +21,30 @@ exports.QUESTION = {
 };
 exports.CHOICE_CONSTANTS = {
     ACTION: {
-        NEW_PROJECT: "Create a new project 🚀",
-        CONTAINER: "Create only a container 📦",
-        SINGLE_MFE: "Create a single micro-frontend 🌐",
+        NEW_PROJECT: "Create a new project",
+        CONTAINER: "Create only a container",
+        SINGLE_MFE: "Create a single micro-frontend",
     },
     STYLING: {
-        SASS: "Sass 🎨",
-        TAILWIND: "Tailwind 🌊",
-        MATERIAL_UI: "Material UI 🧩",
-        BOOTSTRAP: "Bootstrap 🥾",
-        STYLED_COMPONENTS: "Styled Components ✍️",
+        SASS: "Sass",
+        TAILWIND: "Tailwind",
+        MATERIAL_UI: "Material UI",
+        BOOTSTRAP: "Bootstrap",
+        STYLED_COMPONENTS: "Styled Components",
     },
     LANGUAGE: {
-        JAVA_SCRIPT: "JavaScript 🟨",
-        TYPE_SCRIPT: "TypeScript 🔷",
+        JAVA_SCRIPT: "JavaScript",
+        TYPE_SCRIPT: "TypeScript",
     },
     STATE_MANAGEMENT: {
-        REDUX: "Redux 🔄",
-        ZUSTAND: "Zustand 🐻",
+        REDUX: "Redux",
+        ZUSTAND: "Zustand",
     },
     FORM_MANAGEMENT: {
-        REACT_HOOK_FORM: "React-hook-form 🪝",
-        FORMIK: "Formik 📝",
+        REACT_HOOK_FORM: "React-hook-form",
+        FORMIK: "Formik",
     },
-    NONE: "None ❌",
+    NONE: "None",
 };
 exports.CHOICES = {
     ACTION: [
@@ -214,18 +214,18 @@ exports.PROMPT = {
     },
 };
 exports.INFO_MESSAGE = {
-    DISCLAIMER: "Hello there! 👋\n\nThis tool currently supports micro-frontend creation using runtime integration via custom script injection ⚙️.\nPlease keep this limitation in mind when developing your MFE applications 📌.\n",
+    DISCLAIMER: "Hello there! \n\nThis tool currently supports micro-frontend creation using runtime integration via custom script injection .\nPlease keep this limitation in mind when developing your MFE applications.\n",
     CREATE_APP: "Let's create ",
-    CONFIGURE_CONTAINER: "Configuring the container... 🛠️",
-    APP_CREATION: "Creating your React app... ⚛️  ",
-    i_DEPENDENCIES: "Installing dependencies... 📦  ",
-    i_DEV_DEPENDENCIES: "Installing dev dependencies... 🧩  ",
+    CONFIGURE_CONTAINER: "Configuring the container...",
+    APP_CREATION: "Creating your React app...",
+    i_DEPENDENCIES: "Installing dependencies...",
+    i_DEV_DEPENDENCIES: "Installing dev dependencies...",
     SUCCESS: {
-        NEW_PRO: "New project created successfully! 🎉",
-        CONTAINER: "Container created successfully! 📦",
-        ONE_MFE: "Microfront end created successfully! 🌐",
+        NEW_PRO: "New project created successfully!",
+        CONTAINER: "Container created successfully!",
+        ONE_MFE: "Microfront end created successfully!",
     },
-    HAPPY_CODING: "Happy coding! 💻✨",
+    HAPPY_CODING: "Happy coding!",
 };
 exports.LIBRARY_PAIR = {
     STYLING: {

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

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAppContent = void 0;
 const getAppContent = (containerName = 'container') => {
-    return `import ${containerName} from "./${containerName}";
-
-function App() {
-  return <${containerName} />;
-}
-
-export default App;
+    return `import ${containerName} from "./${containerName}";
+
+function App() {
+  return <${containerName} />;
+}
+
+export default App;
 `;
 };
 exports.getAppContent = getAppContent;

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

@@ -7,19 +7,19 @@ const getContainerCompContent = (containerCompName, mfes) => {
     for (let i = 0; i < mfes.length; i++) {
         containerComp += `import {${utility_1.utils.toCompName(mfes[i])}} from "./microfrontends/${utility_1.utils.toCompName(mfes[i])}";\n`;
     }
-    containerComp += `\n\nfunction ${containerCompName}() {
-  const getMfeOrigin =(port:string|undefined='')=> \`\${window.location.protocol}//\${window.location.hostname}:\${port}\`;
-
-  return (
-    <div>
+    containerComp += `\n\nfunction ${containerCompName}() {
+  const getMfeOrigin =(port:string|undefined='')=> \`\${window.location.protocol}//\${window.location.hostname}:\${port}\`;
+
+  return (
+    <div>
       <h1>Hello from ${containerCompName}</h1>\n`;
     for (let i = 0; i < mfes.length; i++) {
         containerComp += `      <${utility_1.utils.toCompName(mfes[i])} name={"${utility_1.utils.toCompName(mfes[i])}"} host={getMfeOrigin(process.env.REACT_APP_${mfes[i].toUpperCase()})} />\n`;
     }
-    containerComp += `</div>
-  );
-};
-
+    containerComp += `</div>
+  );
+};
+
 export default ${containerCompName};`;
     return containerComp;
 };

package/dist/templates/container/heart-template.js

@@ -2,63 +2,63 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getHeartContent = void 0;
 const getHeartContent = (containerName = 'container') => {
-    return `
-import React from "react";
-
-class MicroFrontend extends React.Component {
-  componentDidMount() {
-    const { name, host, document } = this.props;
-    const scriptId = \`micro-frontend-script-\${name}\`;
-
-    if (document.getElementById(scriptId)) {
-      this.renderMicroFrontend();
-      return;
-    }
-
-    fetch(\`\${host}/asset-manifest.json\`)
-      .then((res) => res.json())
-      .then((manifest) => {
-        const script = document.createElement("script");
-        script.id = scriptId;
-        script.crossOrigin = "";
-        script.src = \`\${host}\${manifest["files"]["main.js"]}\`;
-        script.onload = this.renderMicroFrontend;
-        document.head.appendChild(script);
-        const link = document.createElement("link");
-        link.id = scriptId;
-        link.href = \`\${host}\${manifest["files"]["main.css"]}\`;
-        link.onload = this.renderMicroFrontend;
-        link.rel = "stylesheet";
-        document.head.appendChild(link);
-      });
-  }
-
-  componentWillUnmount() {
-    const { name, window } = this.props;
-
-    window[\`unmount\${name}\`] && window[\`unmount\${name}\`](
-      \`\${name}-${containerName}\`
-    );
-  }
-
-  renderMicroFrontend = () => {
-    const { name, window, history } = this.props;
-
-    window[\`render\${name}\`] &&
-      window[\`render\${name}\`](\`\${name}-${containerName}\`, history);
-  };
-
-  render() {
-    return <main id={\`\${this.props.name}-${containerName}\`} />;
-  }
-}
-
-MicroFrontend.defaultProps = {
-  document,
-  window,
-};
-
-export default MicroFrontend;
+    return `
+import React from "react";
+
+class MicroFrontend extends React.Component {
+  componentDidMount() {
+    const { name, host, document } = this.props;
+    const scriptId = \`micro-frontend-script-\${name}\`;
+
+    if (document.getElementById(scriptId)) {
+      this.renderMicroFrontend();
+      return;
+    }
+
+    fetch(\`\${host}/asset-manifest.json\`)
+      .then((res) => res.json())
+      .then((manifest) => {
+        const script = document.createElement("script");
+        script.id = scriptId;
+        script.crossOrigin = "";
+        script.src = \`\${host}\${manifest["files"]["main.js"]}\`;
+        script.onload = this.renderMicroFrontend;
+        document.head.appendChild(script);
+        const link = document.createElement("link");
+        link.id = scriptId;
+        link.href = \`\${host}\${manifest["files"]["main.css"]}\`;
+        link.onload = this.renderMicroFrontend;
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      });
+  }
+
+  componentWillUnmount() {
+    const { name, window } = this.props;
+
+    window[\`unmount\${name}\`] && window[\`unmount\${name}\`](
+      \`\${name}-${containerName}\`
+    );
+  }
+
+  renderMicroFrontend = () => {
+    const { name, window, history } = this.props;
+
+    window[\`render\${name}\`] &&
+      window[\`render\${name}\`](\`\${name}-${containerName}\`, history);
+  };
+
+  render() {
+    return <main id={\`\${this.props.name}-${containerName}\`} />;
+  }
+}
+
+MicroFrontend.defaultProps = {
+  document,
+  window,
+};
+
+export default MicroFrontend;
 `;
 };
 exports.getHeartContent = getHeartContent;

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMfeCompContent = void 0;
 const getMfeCompContent = (mfeName, isTypeScript) => {
-    return `import MicroFrontend from "../MicroFrontend";
-
-export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
-  return <MicroFrontend name={props.name} host={props.host} />;
-};
+    return `import MicroFrontend from "../MicroFrontend";
+
+export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
+  return <MicroFrontend name={props.name} host={props.host} />;
+};
 `;
 };
 exports.getMfeCompContent = getMfeCompContent;

package/dist/templates/mfe/app-comp-template.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMfeAppContent = void 0;
 const getMfeAppContent = (mfeName = 'mfe', isTs) => {
-    return `import React from 'react';
-
-function App(prop${isTs ? ": any" : ""}) {
-  return (
-   <div>
-    <h1>Hello from ${mfeName}</h1>
-   </div>
-  );
-}
-
-export default App;
+    return `import React from 'react';
+
+function App(prop${isTs ? ": any" : ""}) {
+  return (
+   <div>
+    <h1>Hello from ${mfeName}</h1>
+   </div>
+  );
+}
+
+export default App;
 `;
 };
 exports.getMfeAppContent = getMfeAppContent;

package/dist/templates/mfe/config-overrides-template.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getConfigOverridesContent = void 0;
 const getConfigOverridesContent = () => {
-    return `module.exports = {
-    webpack: (config, env) => {
-      config.optimization.runtimeChunk = false;
-      config.optimization.splitChunks = {
-        cacheGroups: {
-          default: false,
-        },
-      };
-      return config;
-    },
+    return `module.exports = {
+    webpack: (config, env) => {
+      config.optimization.runtimeChunk = false;
+      config.optimization.splitChunks = {
+        cacheGroups: {
+          default: false,
+        },
+      };
+      return config;
+    },
   };`;
 };
 exports.getConfigOverridesContent = getConfigOverridesContent;

package/dist/templates/mfe/mfe-index-template.js

@@ -2,40 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getmfeIndexContent = void 0;
 const getmfeIndexContent = (mfeName = 'mfe', container, isTs) => {
-    return `import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-${isTs ? `declare global {
-  interface Window {
-    render${mfeName}: (containerId${isTs ? ": string" : ""}, history${isTs ? "?: any" : ""}) => void;
-    unmount${mfeName}: (containerId${isTs ? ": string" : ""}) => void;
-  }
-}` : ''}
-
-
-window.render${mfeName} = (containerId${isTs ? ": string" : ""}, history${isTs ? "?: any" : ""}) => {
-  const container${isTs ? ": any" : ""} = document.getElementById(containerId);
-  if (container) {
-    const root = createRoot(container);
-    root.render(<App history={history} />);
-  }
-};
-
-window.unmount${mfeName} = (containerId${isTs ? ": string" : ""}) => {
-  const container = document.getElementById(containerId);
-  if (container) {
-    const root = createRoot(container);
-    root.unmount();
-  }
-};
-
-const rootContainer = document.getElementById("root");
-if (rootContainer && !document.getElementById("${mfeName}-${container}")) {
-  createRoot(rootContainer).render(<App />);
-}
-
-
+    return `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+${isTs ? `declare global {
+  interface Window {
+    render${mfeName}: (containerId${isTs ? ": string" : ""}, history${isTs ? "?: any" : ""}) => void;
+    unmount${mfeName}: (containerId${isTs ? ": string" : ""}) => void;
+  }
+}` : ''}
+
+
+window.render${mfeName} = (containerId${isTs ? ": string" : ""}, history${isTs ? "?: any" : ""}) => {
+  const container${isTs ? ": any" : ""} = document.getElementById(containerId);
+  if (container) {
+    const root = createRoot(container);
+    root.render(<App history={history} />);
+  }
+};
+
+window.unmount${mfeName} = (containerId${isTs ? ": string" : ""}) => {
+  const container = document.getElementById(containerId);
+  if (container) {
+    const root = createRoot(container);
+    root.unmount();
+  }
+};
+
+const rootContainer = document.getElementById("root");
+if (rootContainer && !document.getElementById("${mfeName}-${container}")) {
+  createRoot(rootContainer).render(<App />);
+}
+
+
 `;
 };
 exports.getmfeIndexContent = getmfeIndexContent;

package/dist/utils/utility.js

@@ -109,7 +109,7 @@ class utils {
         ];
         await utils.installPackages(packagesList);
         await (0, promises_1.writeFile)("README.md", `# ${projectName}\n${projectDescription}`);
-        console.log(`${projectName} created ✅\n`);
+        console.log(`${projectName} created\n`);
     }
     static async configureMfe(info, mfeName, index) {
         const { projectName, formManagement, styling, stateManagement, mfeDescription = "", isTypeScript, } = info;

package/docs/ANSI-COLOR-CODES.md

@@ -1,15 +1,15 @@
-## Color codes for CLI logs:
-
-\x1b[31m → Red
-
-\x1b[32m → Green
-
-\x1b[33m → Yellow
-
-\x1b[34m → Blue
-
-\x1b[35m → Magenta
-
-\x1b[36m → Cyan
-
+## Color codes for CLI logs:
+
+\x1b[31m → Red
+
+\x1b[32m → Green
+
+\x1b[33m → Yellow
+
+\x1b[34m → Blue
+
+\x1b[35m → Magenta
+
+\x1b[36m → Cyan
+
 \x1b[0m → Reset