react-mfe-gen 1.2.5 → 1.2.9

package/src/templates/container/env-template.ts

@@ -1,8 +1,8 @@
-export const getEnvContent = (mfes:string[]) => {
-  let envTemplate = "";
-
-  for (let i = 0; i < mfes.length; i++) {
-    envTemplate += `REACT_APP_${mfes[i].toUpperCase()} = 900${i}\n`
-  }
-  return envTemplate;
+export const getEnvContent = (mfes:string[]) => {
+  let envTemplate = "";
+
+  for (let i = 0; i < mfes.length; i++) {
+    envTemplate += `REACT_APP_${mfes[i].toUpperCase()} = 900${i}\n`
+  }
+  return envTemplate;
 };

package/src/templates/container/heart-template.ts

@@ -1,60 +1,60 @@
-export 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;
-`
+export 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;
+`
 }

package/src/templates/container/index.ts

@@ -1,17 +1,17 @@
-import { getAppContent } from "./app-comp-template.js";
-
-import { getContainerCompContent } from "./container-comp-template.js";
-
-import { getEnvContent } from "./env-template.js";
-
-import { getHeartContent } from "./heart-template.js";
-
-import { getMfeCompContent } from "./mfe-comp-template.js";
-
-export {
-  getAppContent,
-  getContainerCompContent,
-  getEnvContent,
-  getHeartContent,
-  getMfeCompContent,
-};
+import { getAppContent } from "./app-comp-template.js";
+
+import { getContainerCompContent } from "./container-comp-template.js";
+
+import { getEnvContent } from "./env-template.js";
+
+import { getHeartContent } from "./heart-template.js";
+
+import { getMfeCompContent } from "./mfe-comp-template.js";
+
+export {
+  getAppContent,
+  getContainerCompContent,
+  getEnvContent,
+  getHeartContent,
+  getMfeCompContent,
+};

package/src/templates/container/mfe-comp-template.ts

@@ -1,8 +1,8 @@
-export const getMfeCompContent = (mfeName:string, isTypeScript:boolean) => {
-  return `import MicroFrontend from "../MicroFrontend";
-
-export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
-  return <MicroFrontend name={props.name} host={props.host} />;
-};
-`;
-};
+export const getMfeCompContent = (mfeName:string, isTypeScript:boolean) => {
+  return `import MicroFrontend from "../MicroFrontend";
+
+export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
+  return <MicroFrontend name={props.name} host={props.host} />;
+};
+`;
+};

package/src/templates/mfe/app-comp-template.ts

@@ -1,14 +1,14 @@
-export const getMfeAppContent=(mfeName='mfe',isTs:boolean)=>{
-    return`import React from 'react';
-
-function App(prop${isTs ? ": any" : ""}) {
-  return (
-   <div>
-    <h1>Hello from ${mfeName}</h1>
-   </div>
-  );
-}
-
-export default App;
-`
+export const getMfeAppContent=(mfeName='mfe',isTs:boolean)=>{
+    return`import React from 'react';
+
+function App(prop${isTs ? ": any" : ""}) {
+  return (
+   <div>
+    <h1>Hello from ${mfeName}</h1>
+   </div>
+  );
+}
+
+export default App;
+`
 }

package/src/templates/mfe/config-overrides-template.ts

@@ -1,13 +1,13 @@
-export const getConfigOverridesContent =()=>{
-    return`module.exports = {
-    webpack: (config, env) => {
-      config.optimization.runtimeChunk = false;
-      config.optimization.splitChunks = {
-        cacheGroups: {
-          default: false,
-        },
-      };
-      return config;
-    },
-  };`
+export const getConfigOverridesContent =()=>{
+    return`module.exports = {
+    webpack: (config, env) => {
+      config.optimization.runtimeChunk = false;
+      config.optimization.splitChunks = {
+        cacheGroups: {
+          default: false,
+        },
+      };
+      return config;
+    },
+  };`
 }

package/src/templates/mfe/index.ts

@@ -1,9 +1,9 @@
-import { getMfeAppContent } from "./app-comp-template.js";
-import { getConfigOverridesContent } from "./config-overrides-template.js";
-import { getmfeIndexContent } from "./mfe-index-template.js";
-
-export {
-  getMfeAppContent,
-  getConfigOverridesContent,
-  getmfeIndexContent
+import { getMfeAppContent } from "./app-comp-template.js";
+import { getConfigOverridesContent } from "./config-overrides-template.js";
+import { getmfeIndexContent } from "./mfe-index-template.js";
+
+export {
+  getMfeAppContent,
+  getConfigOverridesContent,
+  getmfeIndexContent
 };

package/src/templates/mfe/mfe-index-template.ts

@@ -1,37 +1,37 @@
-export const getmfeIndexContent=(mfeName='mfe',container:string,isTs:boolean)=>{
-    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 />);
-}
-
-
-`
+export const getmfeIndexContent=(mfeName='mfe',container:string,isTs:boolean)=>{
+    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 />);
+}
+
+
+`
 }

package/src/types/type.ts

@@ -1,3 +1,3 @@
-export type Constant = {
-  [key: string]: any;
-};
+export type Constant = {
+  [key: string]: any;
+};