create-module-federation 0.0.0-1737428758075 → 0.0.0-next-20250305075427

package/dist/index.js

@@ -1,5 +1,7 @@
+#!/usr/bin/env node
 import * as __WEBPACK_EXTERNAL_MODULE_path__ from "path";
 import * as __WEBPACK_EXTERNAL_MODULE_fs__ from "fs";
+import * as __WEBPACK_EXTERNAL_MODULE_url__ from "url";
 import * as __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__ from "@clack/prompts";
 import * as __WEBPACK_EXTERNAL_MODULE_minimist__ from "minimist";
 import * as __WEBPACK_EXTERNAL_MODULE_rslog__ from "rslog";
@@ -75,7 +77,7 @@ class HandlebarsAPI {
         if (templateResource._type !== FS_RESOURCE) throw new Error('resource not match');
         const resourceValue = await templateResource.value();
         if ('string' != typeof resourceValue.content) throw new Error(`resource.value is not string, resourceValue=${resourceValue}`);
-        await outputFs(target, renderString(resourceValue.content, parameters), outputFilePath, {
+        await outputFs(target, templateResource.resourceKey.endsWith('.handlebars') ? renderString(resourceValue.content, parameters) : resourceValue.content, outputFilePath, {
             encoding: 'utf-8'
         });
     }
@@ -89,6 +91,9 @@ class HandlebarsAPI {
         }));
     }
 }
+const create_filename = (0, __WEBPACK_EXTERNAL_MODULE_url__.fileURLToPath)(import.meta.url);
+const create_dirname = __WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(create_filename);
+const packageDir = __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(create_dirname, '..');
 function upperFirst(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
@@ -125,9 +130,11 @@ function checkCancel(value) {
     if ((0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.isCancel)(value)) cancelAndExit();
     return value;
 }
-function formatDir(input) {
+function formatProjectName(input) {
+    const formatted = input.trim().replace(/\/+$/g, '');
     return {
-        targetDir: input.trim().replace(/\/+$/g, '')
+        packageName: input,
+        targetDir: formatted
     };
 }
 function isEmptyDir(path) {
@@ -136,26 +143,6 @@ function isEmptyDir(path) {
 }
 async function getAppTemplateName({ roleType, framework }, { template }) {
     if (template) return `${template}-ts`;
-    let providerInfo = {
-        name: '',
-        entry: ''
-    };
-    if ('consumer' === roleType) {
-        const providerName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
-            message: 'Please input your provider name (You can skip by press "enter"):',
-            defaultValue: ''
-        }));
-        if (providerName) {
-            providerInfo.name = providerName;
-            const providerEntry = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
-                message: `Please input your provider("${providerName}") entry:`,
-                validate (value) {
-                    if (0 === value.length) return 'Entry is required';
-                }
-            }));
-            providerInfo.entry = providerEntry;
-        }
-    }
     return `${roleType}-${framework}-ts`;
 }
 async function getLibTemplateName({ template }) {
@@ -181,7 +168,7 @@ async function getLibTemplateName({ template }) {
     }));
     const roleType = 'provider';
     if (!tools || !Object.keys(tools).length) return `${roleType}-${templateName}-ts`;
-    return `${roleType}-${templateName}-[${Object.keys(tools)}]-ts`;
+    return `${roleType}-${templateName}-${tools[0]}-ts`;
 }
 function getTemplateName({ projectType, roleType, framework }, args) {
     if ('app' === projectType) return getAppTemplateName({
@@ -230,7 +217,7 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
         framework,
         roleType
     }, argv);
-    const material = new FsMaterial(__dirname);
+    const material = new FsMaterial(packageDir);
     const renderTemplate = async (templateDir)=>{
         const templatePattern = `${templateDir}**/*`;
         const resourceMap = await material.find(templatePattern, {
@@ -271,16 +258,15 @@ async function create({ name, templates }) {
     const cwd = process.cwd();
     const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
     const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
-    const mfName = argv.dir ?? checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
+    const mfName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
         message: 'Please input Module Federation name:',
-        placeholder: 'mf-project-name',
-        defaultValue: 'mf-project-name',
+        placeholder: 'mf_project_name',
+        defaultValue: 'mf_project_name',
         validate (value) {
             if (0 === value.length) return 'Name is required';
         }
     }));
-    const dir = argv.dir || 'mf-project';
-    const { targetDir } = formatDir(dir);
+    const { targetDir } = formatProjectName(__WEBPACK_EXTERNAL_MODULE_path__["default"].join(argv.dir || '', mfName));
     const distFolder = __WEBPACK_EXTERNAL_MODULE_path__["default"].isAbsolute(targetDir) ? targetDir : __WEBPACK_EXTERNAL_MODULE_path__["default"].join(cwd, targetDir);
     if (!argv.override && __WEBPACK_EXTERNAL_MODULE_fs__["default"].existsSync(distFolder) && !isEmptyDir(distFolder)) {
         const option = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
@@ -322,7 +308,7 @@ async function create({ name, templates }) {
     const nextSteps = [
         `cd ${targetDir}`,
         `${pkgManager} install`,
-        `${pkgManager} run dev`
+        `${pkgManager} run ${'lib' === projectType ? 'mf-dev' : 'dev'}`
     ];
     (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(nextSteps.join('\n'), 'Next steps');
     (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');

package/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-next-20250305075427",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,15 +14,15 @@
     "access": "public"
   },
   "type": "module",
-  "scripts": {
-    "build": "rslib build"
-  },
   "main": "./dist/index.js",
+  "engines": {
+    "node": ">=16.7.0"
+  },
   "bin": {
     "create-module-federation": "./dist/index.js"
   },
   "files": [
-    "template",
+    "templates",
     "dist"
   ],
   "dependencies": {
@@ -40,5 +40,8 @@
     "@types/fs-extra": "9.0.6",
     "@rslib/core": "^0.3.1",
     "rsbuild-plugin-publint": "^0.2.1"
+  },
+  "scripts": {
+    "build": "rslib build"
   }
-}
+}

package/templates/consumer-modern-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-modern-ts/src/routes/page.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+import Provider from 'provider';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+
+    <div className="landing-page">
+      <Provider />
+    </div>
+  </div>
+);
+
+export default Index;

package/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-rsbuild-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import Provider from 'provider';
+
+const App = () => {
+  return (
+    <div className="content">
+      <Provider />
+    </div>
+  );
+};
+
+export default App;

package/templates/lib-common/module-federation.config.ts.handlebars

@@ -0,0 +1,17 @@
+import {createModuleFederationConfig} from '@module-federation/rsbuild-plugin';
+import pkg from './package.json';
+
+export default createModuleFederationConfig({
+  name: pkg.name,
+  exposes: {
+    '.': './src/index.tsx',
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react-dom': {
+      singleton: true,
+    },
+  },
+})

package/templates/lib-common/rslib.config.ts

@@ -0,0 +1,46 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+
+const shared = {
+  dts: {
+    bundle: false,
+  },
+};
+
+export default defineConfig({
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'mf',
+      output: {
+        distPath: {
+          root: './dist/mf',
+        },
+      },
+    },
+  ],
+  server: {
+    port: 3001,
+  },
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});

package/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);
+  }
+}

package/templates/lib-common/src/index.tsx

@@ -0,0 +1,19 @@
+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;

package/templates/lib-common/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2021"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}

package/templates/modern-common/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

package/templates/modern-common/.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

package/templates/modern-common/.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "styled-components.vscode-styled-components",
+    "EditorConfig.editorconfig",
+    "streetsidesoftware.code-spell-checker",
+    "codezombiech.gitignore",
+    "aaron-bond.better-comments",
+    "jasonnutter.search-node-modules",
+    "jock.svg",
+    "mikestead.dotenv",
+    "vscode-icons-team.vscode-icons",
+    "biomejs.biome"
+  ]
+}

package/templates/modern-common/.vscode/settings.json

@@ -0,0 +1,88 @@
+{
+  "files.associations": {
+    ".code-workspace": "jsonc",
+    ".stylelintrc": "jsonc",
+    "stylelintrc": "jsonc",
+    "README": "markdown"
+  },
+  "search.useIgnoreFiles": true,
+  "search.exclude": {
+    "**/dist": true,
+    "**/*.log": true,
+    "**/*.pid": true,
+    "**/.git": true,
+    "**/node_modules": true
+  },
+  //
+  "editor.rulers": [80, 120],
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  //
+  "cSpell.diagnosticLevel": "Hint",
+  "javascript.validate.enable": false,
+  "typescript.validate.enable": true,
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  "[css]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[less]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "emmet.triggerExpansionOnTab": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/templates/modern-common/README.md

@@ -0,0 +1,37 @@
+# Modern.js App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Enable optional features or add a new entry:
+
+```bash
+pnpm new
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).

package/templates/modern-common/biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "defaultBranch": "main",
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "arrowParentheses": "asNeeded",
+      "jsxQuoteStyle": "double",
+      "lineWidth": 80
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]
+  }
+}

package/templates/modern-common/modern.config.ts

@@ -0,0 +1,15 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
+    }),
+    moduleFederationPlugin(),
+  ],
+});

package/templates/modern-common/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "new-provider",
+  "version": "0.1.0",
+  "scripts": {
+    "reset": "npx rimraf node_modules ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "biome check",
+    "prepare": "simple-git-hooks",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "biome check --files-ignore-unknown=true"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "2.63.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "2.63.7",
+    "@modern-js/tsconfig": "2.63.7",
+    "@biomejs/biome": "1.8.3",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~18.11.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "lint-staged": "~13.1.0",
+    "simple-git-hooks": "^2.11.1",
+    "rimraf": "^6.0.1",
+    "@module-federation/modern-js": "^0.8.9"
+  }
+}

package/templates/modern-common/package.json.handlebars

@@ -0,0 +1,45 @@
+{
+  "name": "{{ mfName }}",
+  "version": "0.1.0",
+  "scripts": {
+    "reset": "npx rimraf node_modules ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "biome check",
+    "prepare": "simple-git-hooks",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "biome check --files-ignore-unknown=true"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "2.63.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "2.63.7",
+    "@modern-js/tsconfig": "2.63.7",
+    "@biomejs/biome": "1.8.3",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~18.11.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "lint-staged": "~13.1.0",
+    "simple-git-hooks": "^2.11.1",
+    "rimraf": "^6.0.1",
+    "@module-federation/modern-js":"^0.8.9"
+  }
+}

package/templates/modern-common/src/modern-app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />
+/// <reference types='@modern-js/runtime/types/router' />

package/templates/modern-common/src/modern.runtime.ts

@@ -0,0 +1,3 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({});

package/templates/modern-common/src/routes/index.css

@@ -0,0 +1,41 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container-box {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+
+.landing-page {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

package/templates/modern-common/src/routes/layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

package/templates/modern-common/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"],
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src", "shared", "config", "modern.config.ts"],
+  "exclude": ["**/node_modules"]
+}

package/templates/provider-modern-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  exposes: {
+    '.': './src/components/ProviderComponent.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/provider-modern-ts/src/components/ProviderComponent.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  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);
+  }
+}

package/templates/provider-modern-ts/src/components/ProviderComponent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProviderComponent.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;

package/templates/provider-modern-ts/src/routes/page.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+import Provider from '../components/ProviderComponent';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+
+    <div className="landing-page">
+      <Provider />
+    </div>
+  </div>
+);
+
+export default Index;

package/templates/provider-rsbuild-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  exposes: {
+    '.': './src/components/ProviderComponent.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/provider-rsbuild-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import Provider from './components/ProviderComponent';
+
+const App = () => {
+  return (
+    <div className="content">
+      <Provider />
+    </div>
+  );
+};
+
+export default App;

package/templates/provider-rsbuild-ts/src/components/ProviderComponent.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  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);
+  }
+}

package/templates/provider-rsbuild-ts/src/components/ProviderComponent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProviderComponent.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;

package/templates/provider-rslib-storybook-ts/.storybook/main.ts.handlebars

@@ -0,0 +1,41 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-react-rsbuild'),
+    options: {},
+  },
+  addons: [
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+      options: {
+        rslib: {
+          include: ['**/stories/**'],
+        },
+      },
+    },
+    {
+      name: '@module-federation/storybook-addon/preset',
+      options: {
+        remotes: {
+          provider: '{{mfName}}@http://localhost:3001/mf-manifest.json',
+        },
+      },
+    },
+  ],
+};
+
+export default config;

package/templates/provider-rslib-storybook-ts/README.md

@@ -0,0 +1,27 @@
+# Rslib MF Project
+
+This example demonstrates how to use Rslib to build a simple Module Federation React component.
+
+### Command
+
+Build package
+
+```
+pnpm build
+```
+
+Dev package
+
+1. 
+
+```
+pnpm mf-dev
+```
+
+2.
+
+```
+pnpm storybook
+```
+
+visit http://localhost:6006

package/templates/provider-rslib-storybook-ts/package.json.handlebars

@@ -0,0 +1,49 @@
+{
+  "name": "{{ mfName }}",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "build:storybook": "storybook build",
+    "dev": "rslib build --watch",
+    "storybook": "storybook dev -p 6006",
+    "mf-dev": "rslib mf-dev"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.2.15",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@rslib/core": "^0.5.3",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.4.7",
+    "storybook-addon-rslib": "^0.1.7",
+    "storybook-react-rsbuild": "^0.1.7",
+    "typescript": "^5.7.3",
+    "@module-federation/rsbuild-plugin":"^0.8.9",
+    "@module-federation/storybook-addon":"^4.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}

package/templates/provider-rslib-storybook-ts/stories/Index.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Provider from 'provider';
+
+const Component = () => <Provider />;
+
+export default {
+  title: 'Provider Component',
+  component: Component,
+};
+
+export const Basic = {};

package/templates/provider-rslib-ts/README.md

@@ -0,0 +1,19 @@
+# Rslib MF Project
+
+This example demonstrates how to use Rslib to build a simple Module Federation React component.
+
+### Command
+
+Build package
+
+```
+pnpm build
+```
+
+Dev package
+
+
+```
+pnpm mf-dev
+```
+

package/templates/provider-rslib-ts/package.json.handlebars

@@ -0,0 +1,34 @@
+{
+  "name": "{{ mfName }}",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "mf-dev": "rslib mf-dev"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.2.15",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@rslib/core": "^0.5.3",
+    "@types/react": "^18.3.11",
+    "react": "^18.3.1",
+    "typescript": "^5.7.3",
+    "@module-federation/rsbuild-plugin":"^0.8.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}

package/templates/rsbuild-common/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

package/templates/rsbuild-common/package.json.handlebars

@@ -0,0 +1,22 @@
+{
+  "name": "{{ mfName }}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.2.15",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "@module-federation/rsbuild-plugin":"^0.8.9"
+  }
+}

package/templates/rsbuild-common/rsbuild.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});

package/templates/rsbuild-common/src/App.css

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}

package/templates/rsbuild-common/src/bootstrap.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}

package/templates/rsbuild-common/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

package/templates/rsbuild-common/src/index.tsx

@@ -0,0 +1 @@
+import('./bootstrap');

package/templates/rsbuild-common/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}