chore: update template

packages/create-module-federation/package.json

@@ -3,7 +3,7 @@
   "description": "Create a new Module Federation project",
   "public": true,
   "sideEffects": false,
-  "version": "0.0.0-1737428758075",
+  "version": "0.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/create-module-federation/templates/consumer-modern-ts/src/routes/page.tsx

@@ -1,8 +1,6 @@
 import { Helmet } from '@modern-js/runtime/head';
 import './index.css';
-import Header from 'provider/Header';
-import Description from 'provider/Description';
-import Footer from 'provider/Footer';
+import Provider from 'provider';
 
 const Index = () => (
   <div className="container-box">
@@ -15,9 +13,7 @@ const Index = () => (
     </Helmet>
 
     <div className="landing-page">
-      <Header />
-      <Description />
-      <Footer />
+      <Provider />
     </div>
   </div>
 );

packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx

@@ -1,14 +1,10 @@
 import './App.css';
-import Header from 'provider/Header';
-import Description from 'provider/Description';
-import Footer from 'provider/Footer';
+import Provider from 'provider';
 
 const App = () => {
   return (
     <div className="content">
-      <Header />
-      <Description />
-      <Footer />
+      <Provider />
     </div>
   );
 };

packages/create-module-federation/templates/lib-common/module-federation.config.ts.handlebars

@@ -2,9 +2,6 @@ export default {
   name: '{{mfName}}',
   exposes: {
     '.': './src/index.tsx',
-    './Header': './src/Header.tsx',
-    './Description': './src/Description.tsx',
-    './Footer': './src/Footer.tsx',
   },
   shared: {
     react: {

packages/create-module-federation/templates/lib-common/src/index.css

@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  padding: 10vh;
+  background: linear-gradient(45deg, #3a65f2, #6a5acd, #8a2be2, #023cfc);
+  background-size: 400% 400%;
+  animation: gradientFlow 6s ease infinite;
+}
+
+.icon-container {
+  width: 180px;
+  margin-bottom: 20px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.logo-image {
+  width: 100%;
+  transition: opacity 0.3s ease;
+}
+
+.title {
+  font-size: 3rem;
+  color: #fff;
+  margin-bottom: 20px;
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes gradientFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

packages/create-module-federation/templates/lib-common/src/index.tsx

@@ -1,3 +1,19 @@
-export * as Description from './Description';
-export * as Footer from './Footer';
-export * as Header from './Header';
+import React from 'react';
+import './index.css';
+
+const Provider: React.FC = () => {
+  return (
+    <div className="container">
+      <div className="icon-container">
+        <img
+          src="https://module-federation.io/svg.svg"
+          alt="logo"
+          className="logo-image"
+        />
+      </div>
+      <h1 className="title">Hello Module Federation 2.0</h1>
+    </div>
+  );
+};
+
+export default Provider;

packages/create-module-federation/templates/provider-modern-ts/module-federation.config.ts.handlebars

@@ -3,9 +3,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: '{{mfName}}',
   exposes: {
-    './Header': './src/components/Header.tsx',
-    './Description': './src/components/Description.tsx',
-    './Footer': './src/components/Footer.tsx',
+    '.': './src/components/ProviderComponent.tsx',
   },
   shared: {
     react: { singleton: true },