diff --git a/.changeset/beige-otters-tease.md b/.changeset/beige-otters-tease.md
new file mode 100644
index 00000000000..228fdb22eb0
--- /dev/null
+++ b/.changeset/beige-otters-tease.md
@@ -0,0 +1,5 @@
+---
+'create-module-federation': minor
+---
+
+feat: add Create a new Module Federation project cli
diff --git a/.changeset/config.json b/.changeset/config.json
index 5d217131121..48ecd9e0391 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -25,7 +25,8 @@
"@module-federation/rsbuild-plugin",
"@module-federation/error-codes",
"@module-federation/inject-external-runtime-core-plugin",
- "@module-federation/runtime-core"
+ "@module-federation/runtime-core",
+ "create-module-federation"
]
],
"ignorePatterns": ["^alpha|^beta"],
diff --git a/.changeset/dirty-rivers-sing.md b/.changeset/dirty-rivers-sing.md
new file mode 100644
index 00000000000..07aefa80d87
--- /dev/null
+++ b/.changeset/dirty-rivers-sing.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/rsbuild-plugin': patch
+---
+
+chore(rsbuild-plugin): set 'loaded-first' as default shareStrategy
diff --git a/.eslintignore b/.eslintignore
index 52908858183..91aba082d89 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,3 @@
node_modules/
vite.config.ts
-**/dist/**
\ No newline at end of file
+**/dist/**
diff --git a/.github/workflows/e2e-modern-ssr.yml b/.github/workflows/e2e-modern-ssr.yml
index f9734661e65..896a409e087 100644
--- a/.github/workflows/e2e-modern-ssr.yml
+++ b/.github/workflows/e2e-modern-ssr.yml
@@ -48,12 +48,12 @@ jobs:
lsof -ti tcp:3050,3051,3052,3053,3054,3055,3056 | xargs -r kill &&
pnpm run app:modern:dev &
sleep 30 &&
- npx wait-on http://127.0.0.1:3050/mf-manifest.json &&
npx wait-on http://127.0.0.1:3051/mf-manifest.json &&
- npx wait-on http://127.0.0.1:3052/mf-manifest.json &&
npx wait-on http://127.0.0.1:3053/mf-manifest.json &&
- npx wait-on http://127.0.0.1:3054/mf-manifest.json &&
npx wait-on http://127.0.0.1:3055/mf-manifest.json &&
npx wait-on http://127.0.0.1:3056/mf-manifest.json &&
+ npx wait-on http://127.0.0.1:3054/mf-manifest.json &&
+ npx wait-on http://127.0.0.1:3052/mf-manifest.json &&
+ npx wait-on http://127.0.0.1:3050/mf-manifest.json &&
npx nx run modernjs-ssr-host:e2e &&
lsof -ti tcp:3050,3051,3052,3053,3054,3055,3056 | xargs kill
diff --git a/.prettierignore b/.prettierignore
index 53d01379255..149a6d43d01 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,5 @@ apps/website-new/docs
/.nx/workspace-data
/.nx/cache
+
+**/*.handlebars
diff --git a/apps/rslib-module/rslib.config.ts b/apps/rslib-module/rslib.config.ts
index dd3763fa44b..5e22e8f0955 100644
--- a/apps/rslib-module/rslib.config.ts
+++ b/apps/rslib-module/rslib.config.ts
@@ -36,11 +36,11 @@ export default defineConfig({
root: './dist/mf',
},
},
- server: {
- port: 3001,
- },
},
],
+ server: {
+ port: 3001,
+ },
plugins: [
pluginReact(),
pluginModuleFederation({
diff --git a/apps/website-new/docs/en/guide/start/quick-start.mdx b/apps/website-new/docs/en/guide/start/quick-start.mdx
index 0721955470e..e30c6bf8c0f 100644
--- a/apps/website-new/docs/en/guide/start/quick-start.mdx
+++ b/apps/website-new/docs/en/guide/start/quick-start.mdx
@@ -1,4 +1,4 @@
-import { Badge } from "@theme";
+import { Badge, PackageManagerTabs } from "@theme";
# Quick Start Guide
@@ -6,14 +6,169 @@ Before reading this guide, please first read the [Setting Up Environment](./sett
_ You can also use [Nx](https://nx.dev) to rapidly scaffold Module Federation projects for [React](../../practice/frameworks/react/using-nx-for-react) and [Angular](../../practice/frameworks/angular/using-nx-for-angular)._
-## Creating a Producer
+## Creating a New Project
-### 1. Initializing the Project
+Module Federation provides the `create-module-federation` tool to create projects. You don't need to install it globally; you can directly use `npx` to run it on-demand.
-Use [Rsbuild](https://rsbuild.dev/) to create a producer and call the following command:
+You can use `create-module-federation` to create a Module Federation project by running the following command:
+
+
+Just follow the prompts step by step. During the creation process, you can select the project type, role type, etc.
+
+### Templates
+
+When creating a project, you can choose from the following templates provided by `create-module-federation`:
+
+| Template | Description |
+| --------------------- | ------------------------------------------------------------ |
+| provider-modern | A provider using [Modern.js](https://modernjs.dev/) |
+| provider-rsbuild | A provider using [Rsbuild](https://rsbuild.dev/) |
+| provider-rslib | A provider using [Rslib](https://lib.rsbuild.dev/) |
+| provider-rslib-storybook | A provider using [Rslib](https://lib.rsbuild.dev/) with the storybook feature enabled |
+| consumer-modern | A consumer using [Modern.js](https://modernjs.dev/) |
+| consumer-rsbuild | A consumer using [Rsbuild](https://rsbuild.dev/) |
+
+### Quick Creation
+
+[create-module-federation](https://www.npmjs.com/package/create-module-federation) provides some CLI options. By setting these CLI options, you can skip the interactive selection steps and create a project with one click.
+
+For example, to create a Modern.js provider project named `provider` in the `my-project` directory with one click:
+
+```bash
+npx create-module-federation --dir my-project --template provider-modern --name provider
+
+# Use abbreviations
+npx create-module-federation -d my-project -t provider-modern -n provider
+```
+
+The complete CLI options for `create-module-federation` are as follows:
+
+```text
+Usage: create-module-federation [options]
+
+Options:
+
+ -h, --help display help for command
+ -d, --dir create project in specified directory
+ -t, --template specify the template to use
+ -n, --name specify the mf name
+ -r, --role specify the mf role type: provider or consumer
+ --override override files in target directory
+
+Templates:
+
+ provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
+```
+
+### Create a provider
+
+Execute the `create-module-federation` command, select the required framework and type according to your needs, and select the role type as provider to create a project.
+
+Here we take creating an rsbuild provider project as an example:
+
+```bash
+➜ ~ ✗ npm create module-federation@latest
+
+> npx
+> create-module-federation
+
+◆ Create Module Federation Project
+│
+◇ Please input Module Federation name:
+│ mf_provider
+│
+◇ Please select the type of project you want to create:
+│ Application
+│
+◇ Select template
+│ Rsbuild
+│
+◇ Please select the role of project you want to create:
+│ Provider
+│
+◇ Next steps ─────╮
+│ │
+│ cd mf_provider │
+│ npm install │
+│ npm run dev │
+│ │
+├──────────────────╯
+│
+└ Done.
+```
+
+### Create a consumer
+
+Execute the `create-module-federation` command, select the required framework and type according to your needs, and select the role type as consumer to create a project.
+
+Here is an example of creating an rsbuild consumer project:
+
+```bash
+➜ ~ ✗ npm create module-federation@latest
+
+> npx
+> create-module-federation
+
+◆ Create Module Federation Project
+│
+◇ Please input Module Federation name:
+│ mf_consumer
+│
+◇ Please select the type of project you want to create:
+│ Application
+│
+◇ Select template
+│ Rsbuild
+│
+◇ Please select the role of project you want to create:
+│ Consumer
+│
+◇ Next steps ─────╮
+│ │
+│ cd mf_provider │
+│ npm install │
+│ npm run dev │
+│ │
+├──────────────────╯
+│
+└ Done.
+```
+
+#### Replace provider
+
+The default consumer project created will consume a published provider. If you want to replace the provider, you need to modify the `remotes` configuration in `module-federation.config.ts`.
+
+```diff title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+ name: 'mf_consumer',
+ remotes: {
+- 'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
++ 'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
+ },
+ shared: {
+ react: { singleton: true },
+ 'react-dom': { singleton: true },
+ },
+});
+
+```
+
+## Create from existing project
+
+### Creating a Producer
+
+#### 1. Initializing the Project
-import { PackageManagerTabs } from '@theme';
+Use [Rsbuild](https://rsbuild.dev/) to create a provider and call the following command:
TypeScript
```
-### 2. Installing Module Federation Build Plugin
+#### 2. Installing Module Federation Build Plugin
Following the steps above for initializing the project, we created a `React` project named `federation_provider`. Execute the following commands in sequence:
@@ -62,7 +217,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
}}
/>
-### 3. Exporting Modules by the Producer
+#### 3. Exporting Modules by the Producer
> Change the entry file to asynchronous
@@ -118,7 +273,7 @@ export default defineConfig({
});
```
-### 4. Starting the Producer
+#### 4. Starting the Producer
TypeScript
```
-### 2. Installing Module Federation Build Plugin
+#### 2. Installing Module Federation Build Plugin
Following the steps above for initializing the project, we created a `React` project named `federation_consumer`. Execute the following commands in sequence:
@@ -201,7 +356,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
/>
-### 3. Consuming the Producer
+#### 3. Consuming the Producer
> Declare the `Module Federation` type path in `tsconfig.json`
@@ -285,7 +440,7 @@ export default App;
## Summary
-Through the above process, you have completed the export of a component from a 'producer' for use by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and shared in the Module Federation plugin.
+Through the above process, you have completed the export of a component from a 'provider' for use by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and shared in the Module Federation plugin.
If you wish to learn how to directly export and consume remote modules on Webpack and Rspack build tools, you can refer to: [Rspack Plugin](../basic/rspack), [Webpack Plugin](../basic/webpack)
diff --git a/apps/website-new/docs/zh/guide/start/quick-start.mdx b/apps/website-new/docs/zh/guide/start/quick-start.mdx
index a56370b78fb..718ceaa4662 100644
--- a/apps/website-new/docs/zh/guide/start/quick-start.mdx
+++ b/apps/website-new/docs/zh/guide/start/quick-start.mdx
@@ -2,14 +2,173 @@
在阅读本指南前，请先阅读 [设置环境](./setting-up-env)。本指南将引导你逐步学习使用 Module Federation。我们将构建两个独立的单页面应用程序 (SPA)，它们会使用 Module Federation 共享组件，下文中遇到不熟的名词请查看[名词解释](./glossary)。
-## 创建一个生产者
+## 新项目创建
-### 1. 初始化项目
+Module Federation 提供了 `create-module-federation` 工具来创建项目，不需要全局安装，直接使用 npx 按需运行即可。
-使用 [Rsbuild](https://rsbuild.dev/) 来创建一个生产者，调用以下命令：
+你可以使用 `create-module-federation` 来创建一个 Module Federation 项目，调用以下命令：
import { PackageManagerTabs } from '@theme';
+
+
+按照提示一步步操作即可。在创建过程中，你可以选择项目类型、角色类型等。
+
+### 模板
+
+在创建项目时，你可以选择 `create-module-federation` 提供的下列模板：
+
+| 模板 | 描述 |
+| ------------------------- | ------------------------------------------------------------ |
+| provider-modern | 使用 [Modern.js](https://modernjs.dev/) 的生产者 |
+| provider-rsbuild | 使用 [Rsbuild](https://rsbuild.dev/) 的生产者 |
+| provider-rslib | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者 |
+| provider-rslib-storybook | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者，并且开启了 storybook 功能 |
+| consumer-modern | 使用 [Modern.js](https://modernjs.dev/) 的消费者 |
+| consumer-rsbuild | 使用 [Rsbuild](https://rsbuild.dev/) 的消费者 |
+
+
+### 快速创建
+
+[create-module-federation](https://www.npmjs.com/package/create-module-federation) 提供了一些 CLI 选项。通过设置这些 CLI 选项，你可以跳过交互式的选择步骤，一键创建项目。
+
+比如，一键创建名称为 provider 的 Modern.js 生产者项目到 `my-project` 目录：
+
+```bash
+npx create-module-federation --dir my-project --template provider-modern --name provider
+
+# 使用缩写
+npx create-module-federation -d my-project -t provider-modern -n provider
+```
+
+`create-module-federation` 完整的 CLI 选项如下：
+
+```text
+Usage: create-module-federation [options]
+
+Options:
+
+ -h, --help display help for command
+ -d, --dir create project in specified directory
+ -t, --template specify the template to use
+ -n, --name specify the mf name
+ -r, --role specify the mf role type: provider or consumer
+ --override override files in target directory
+
+Templates:
+
+ provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
+```
+
+### 创建一个生产者
+
+执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为生产者即可创建项目。
+
+此处以创建一个 rsbuild 生产者项目为例：
+
+```bash
+➜ ~ ✗ npm create module-federation@latest
+
+> npx
+> create-module-federation
+
+◆ Create Module Federation Project
+│
+◇ Please input Module Federation name:
+│ mf_provider
+│
+◇ Please select the type of project you want to create:
+│ Application
+│
+◇ Select template
+│ Rsbuild
+│
+◇ Please select the role of project you want to create:
+│ Provider
+│
+◇ Next steps ─────╮
+│ │
+│ cd mf_provider │
+│ npm install │
+│ npm run dev │
+│ │
+├──────────────────╯
+│
+└ Done.
+```
+
+### 创建一个消费者
+
+执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为消费者即可创建项目。
+
+此处以创建一个 rsbuild 消费者项目为例：
+
+```bash
+➜ ~ ✗ npm create module-federation@latest
+
+> npx
+> create-module-federation
+
+◆ Create Module Federation Project
+│
+◇ Please input Module Federation name:
+│ mf_consumer
+│
+◇ Please select the type of project you want to create:
+│ Application
+│
+◇ Select template
+│ Rsbuild
+│
+◇ Please select the role of project you want to create:
+│ Consumer
+│
+◇ Next steps ─────╮
+│ │
+│ cd mf_provider │
+│ npm install │
+│ npm run dev │
+│ │
+├──────────────────╯
+│
+└ Done.
+```
+
+#### 替换生产者
+
+默认创建的消费者项目会消费一个已发布的生产者，如果你想替换生产者，需要在 `module-federation.config.ts` 中修改 `remotes` 配置。
+
+```diff title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+ name: 'mf_consumer',
+ remotes: {
+- 'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
++ 'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
+ },
+ shared: {
+ react: { singleton: true },
+ 'react-dom': { singleton: true },
+ },
+});
+
+```
+
+## 已有项目创建
+
+### 创建一个生产者
+
+#### 1. 初始化项目
+
+使用 [Rsbuild](https://rsbuild.dev/) 来创建一个生产者，调用以下命令：
+
TypeScript
```
-### 2. 安装 Module Federation 构建插件
+#### 2. 安装 Module Federation 构建插件
根据上面初始化项目的步骤，我们创建了名为 `federation_provider` 的 `React` 项目，依次执行以下命令
@@ -56,7 +215,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
}}
/>
-### 3. 生产者导出模块
+#### 3. 生产者导出模块
> 将入口改为异步
@@ -111,7 +270,7 @@ export default defineConfig({
});
```
-### 4. 启动生产者
+#### 4. 启动生产者
TypeScript
```
-### 2. 安装 Module Federation 构建插件
+#### 2. 安装 Module Federation 构建插件
根据上面初始化项目的步骤，我们创建了名为 `federation_consumer` 的 `React` 项目，依次执行以下命令
@@ -192,7 +351,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
}}
/>
-### 3. 消费生产者
+#### 3. 消费生产者
> 增加 Module Federation 插件消费远程模块
diff --git a/packages/create-module-federation/CHANGELOG.md b/packages/create-module-federation/CHANGELOG.md
new file mode 100644
index 00000000000..992a0c9c99a
--- /dev/null
+++ b/packages/create-module-federation/CHANGELOG.md
@@ -0,0 +1 @@
+# create-module-federation
diff --git a/packages/create-module-federation/LICENSE b/packages/create-module-federation/LICENSE
new file mode 100644
index 00000000000..f428f6109cd
--- /dev/null
+++ b/packages/create-module-federation/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present hanric(2heal1)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/create-module-federation/README.md b/packages/create-module-federation/README.md
new file mode 100644
index 00000000000..9e8eab0b2e8
--- /dev/null
+++ b/packages/create-module-federation/README.md
@@ -0,0 +1,40 @@
+
+ 
+
+
+# create-module-federation
+
+Create a new Module Federation project.
+
+
+
+ 
+
+ 
+ 
+
+
+## Usage
+
+Using `npm create`:
+
+```bash
+npm create module-federation@latest
+```
+
+Using CLI flags:
+
+```bash
+npx create-module-federation --dir my-project --template provider-modern --name provider
+
+# Using abbreviations
+npx create-module-federation -d my-project -t provider-modern -n provider
+```
+
+## Documentation
+
+See [Documentation](https://module-federation.io/guide/start/quick-start).
+
+## License
+
+[MIT](https://github.com/module-federation/core/blob/main/LICENSE).
diff --git a/packages/create-module-federation/jest.config.js b/packages/create-module-federation/jest.config.js
new file mode 100644
index 00000000000..e99f20c50b7
--- /dev/null
+++ b/packages/create-module-federation/jest.config.js
@@ -0,0 +1,27 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+ clearMocks: true,
+ testEnvironment: 'jsdom',
+ coveragePathIgnorePatterns: ['__tests__', '/node_modules/'],
+ coverageProvider: 'v8',
+ coverageReporters: ['cobertura', 'clover', 'json', 'lcov', 'text'],
+ globals: {
+ __DEV__: true,
+ __TEST__: true,
+ __BROWSER__: false,
+ __VERSION__: '"unknown"',
+ },
+ preset: 'ts-jest',
+ transformIgnorePatterns: [
+ // Change MODULE_NAME_HERE to your module that isn't being compiled
+ '/node_modules/(?!((@byted/garfish-)|(byted-tea-sdk))).+\\.js$',
+ ],
+ transform: {
+ '^.+\\.(t|j)sx?$': ['@swc/jest'],
+ },
+ rootDir: __dirname,
+ testMatch: ['__tests__/**/**.spec.[jt]s?(x)'],
+ testPathIgnorePatterns: ['/node_modules/'],
+};
diff --git a/packages/create-module-federation/package.json b/packages/create-module-federation/package.json
new file mode 100644
index 00000000000..bd629425fb1
--- /dev/null
+++ b/packages/create-module-federation/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "create-module-federation",
+ "description": "Create a new Module Federation project",
+ "public": true,
+ "sideEffects": false,
+ "version": "0.10.0",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/module-federation/core/",
+ "directory": "packages/create-module-federation"
+ },
+ "publishConfig": {
+ "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": [
+ "templates",
+ "dist"
+ ],
+ "dependencies": {
+ "@clack/prompts": "^0.8.2",
+ "execa": "5.1.1",
+ "fs-extra": "9.1.0",
+ "minimist": "^1.2.8",
+ "rslog": "^1.2.3",
+ "glob": "7.2.0",
+ "handlebars": "4.7.7"
+ },
+ "devDependencies": {
+ "@types/glob": "7.2.0",
+ "@types/minimist": "^1.2.5",
+ "@types/fs-extra": "9.0.6",
+ "@rslib/core": "^0.3.1",
+ "rsbuild-plugin-publint": "^0.2.1"
+ }
+}
diff --git a/packages/create-module-federation/project.json b/packages/create-module-federation/project.json
new file mode 100644
index 00000000000..97a9be02ad8
--- /dev/null
+++ b/packages/create-module-federation/project.json
@@ -0,0 +1,64 @@
+{
+ "name": "create-module-federation",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "packages/create-module-federation/src",
+ "projectType": "library",
+ "tags": ["type:pkg"],
+ "targets": {
+ "build": {
+ "executor": "nx:run-commands",
+ "options": {
+ "parallel": false,
+ "dependsOn": [
+ {
+ "target": "build",
+ "dependencies": true
+ }
+ ],
+ "commands": [
+ "cd packages/create-module-federation; pnpm run build",
+ "cp packages/create-module-federation/LICENSE packages/create-module-federation/dist"
+ ]
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint",
+ "outputs": ["{options.outputFile}"],
+ "options": {
+ "lintFilePatterns": [
+ "packages/create-module-federation/**/*.ts",
+ "packages/create-module-federation/package.json"
+ ]
+ }
+ },
+ "test": {
+ "executor": "nx:run-commands",
+ "options": {
+ "parallel": false,
+ "dependsOn": [
+ {
+ "target": "build",
+ "dependencies": true
+ }
+ ],
+ "commands": ["echo 'no test'"]
+ }
+ },
+ "pre-release": {
+ "executor": "nx:run-commands",
+ "options": {
+ "parallel": false,
+ "commands": [
+ {
+ "command": "nx run create-module-federation:test",
+ "forwardAllArgs": false
+ },
+ {
+ "command": "nx run create-module-federation:build",
+ "forwardAllArgs": false
+ }
+ ]
+ }
+ }
+ }
+}
diff --git a/packages/create-module-federation/rslib.config.ts b/packages/create-module-federation/rslib.config.ts
new file mode 100644
index 00000000000..1d1da13fdf5
--- /dev/null
+++ b/packages/create-module-federation/rslib.config.ts
@@ -0,0 +1,13 @@
+import { pluginPublint } from 'rsbuild-plugin-publint';
+import { defineConfig } from '@rslib/core';
+import pkg from './package.json';
+
+export default defineConfig({
+ lib: [{ format: 'esm' }],
+ plugins: [pluginPublint()],
+ source: {
+ define: {
+ __VERSION__: JSON.stringify(pkg.version),
+ },
+ },
+});
diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
new file mode 100644
index 00000000000..ec495119628
--- /dev/null
+++ b/packages/create-module-federation/src/create.ts
@@ -0,0 +1,441 @@
+/**
+ * forked from https://github.com/rspack-contrib/create-rstack
+ * license at https://github.com/rspack-contrib/create-rstack/blob/main/LICENSE
+ */
+import path from 'path';
+import fs from 'fs';
+import { spawnSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import {
+ cancel,
+ isCancel,
+ multiselect,
+ note,
+ outro,
+ select,
+ text,
+} from '@clack/prompts';
+import minimist from 'minimist';
+import { logger } from 'rslog';
+import { FsMaterial } from './materials/FsMaterial';
+import { HandlebarsAPI } from './handlebars';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageDir = path.resolve(__dirname, '..');
+
+declare const __VERSION__: string;
+
+const enum ProjectType {
+ app = 'app',
+ lib = 'lib',
+ zephyr = 'zephyr',
+ // not used yet
+ other = 'other',
+}
+
+const enum RoleType {
+ consumer = 'consumer',
+ provider = 'provider',
+}
+
+type Argv = {
+ help?: boolean;
+ dir?: string;
+ template?: string;
+ override?: boolean;
+ name?: string;
+ role?: RoleType;
+};
+
+const OTHER_TYPE: {
+ [typeName: string]: {
+ label: string;
+ packageName: string;
+ hint?: string;
+ };
+} = {
+ zephyr: {
+ label: 'zephyr',
+ packageName: 'zephyr-apps@latest',
+ hint: 'create zephyr-apps@latest',
+ },
+};
+
+type AppTemplateName = 'modern' | 'rsbuild';
+type LibTemplateName = 'rslib';
+
+function upperFirst(str: string) {
+ return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function logHelpMessage(name: string, templates: string[]) {
+ logger.log(`
+ Usage: create-${name} [options]
+
+ Options:
+
+ -h, --help display help for command
+ -d, --dir create project in specified directory
+ -t, --template specify the template to use
+ -n, --name specify the mf name
+ -r, --role specify the mf role type: provider or consumer
+ --override override files in target directory
+
+ Templates:
+ ${templates.filter((t) => !t.startsWith('zephyr')).join(', ')}
+`);
+}
+
+function pkgFromUserAgent(userAgent: string | undefined) {
+ if (!userAgent) return undefined;
+ const pkgSpec = userAgent.split(' ')[0];
+ const pkgSpecArr = pkgSpec.split('/');
+ return {
+ name: pkgSpecArr[0],
+ version: pkgSpecArr[1],
+ };
+}
+
+function cancelAndExit() {
+ cancel('Operation cancelled.');
+ process.exit(0);
+}
+
+function checkCancel(value: unknown) {
+ if (isCancel(value)) {
+ cancelAndExit();
+ }
+ return value as T;
+}
+
+/**
+ * 1. Input: 'foo'
+ * Output: folder `/foo`, `package.json#name` -> `foo`
+ *
+ * 2. Input: 'foo/bar'
+ * Output: folder -> `/foo/bar` folder, `package.json#name` -> `bar`
+ *
+ * 3. Input: '@scope/foo'
+ * Output: folder -> `/@scope/bar` folder, `package.json#name` -> `@scope/foo`
+ *
+ * 4. Input: './foo/bar'
+ * Output: folder -> `/foo/bar` folder, `package.json#name` -> `bar`
+ *
+ * 5. Input: '/root/path/to/foo'
+ * Output: folder -> `'/root/path/to/foo'` folder, `package.json#name` -> `foo`
+ */
+function formatProjectName(input: string) {
+ const formatted = input.trim().replace(/\/+$/g, '');
+ return {
+ packageName: input,
+ targetDir: formatted,
+ };
+}
+
+function isEmptyDir(path: string) {
+ const files = fs.readdirSync(path);
+ return files.length === 0 || (files.length === 1 && files[0] === '.git');
+}
+
+async function getAppTemplateName(
+ {
+ roleType,
+ framework,
+ }: {
+ roleType: RoleType;
+ framework: AppTemplateName;
+ },
+ { template }: Argv,
+) {
+ if (template) {
+ return `${template}-ts`;
+ }
+
+ return `${roleType}-${framework}-ts`;
+}
+
+async function getLibTemplateName({ template, role }: Argv) {
+ if (template) {
+ return `${template}-ts`;
+ }
+
+ const templateName = checkCancel(
+ await select({
+ message: 'Select template',
+ options: [{ value: 'rslib', label: 'Rslib' }],
+ }),
+ );
+
+ type ExcludesFalse = (x: T | false) => x is T;
+ const tools = checkCancel(
+ await multiselect({
+ message:
+ 'Select development tools (Use to select, to continue)',
+ required: false,
+ options: [
+ {
+ value: 'storybook',
+ label: 'Storybook',
+ },
+ // TODO: support Rspress Module doc in the future
+ ].filter(Boolean as any as ExcludesFalse),
+ }),
+ );
+
+ // not support consumer yet, only support consume by runtime api
+ const roleType: RoleType = role || RoleType.provider;
+
+ if (!tools || !Object.keys(tools).length) {
+ return `${roleType}-${templateName}-ts`;
+ }
+
+ return `${roleType}-${templateName}-${tools[0]}-ts`;
+}
+
+function getTemplateName(
+ {
+ projectType,
+ roleType,
+ framework,
+ }: {
+ projectType: ProjectType;
+ roleType: RoleType;
+ framework: AppTemplateName;
+ },
+ args: Argv,
+) {
+ if (projectType === 'app') {
+ return getAppTemplateName(
+ {
+ roleType,
+ framework,
+ },
+ args,
+ );
+ }
+ return getLibTemplateName(args);
+}
+
+function getTemplateDir(templateName: string) {
+ return `templates/${templateName}/`;
+}
+
+async function getProjectType(template?: string) {
+ if (!template) {
+ return checkCancel(
+ await select({
+ message: 'Please select the type of project you want to create:',
+ options: [
+ { value: ProjectType.app, label: 'Application' },
+ { value: ProjectType.lib, label: 'Lib' },
+ {
+ value: ProjectType.zephyr,
+ label: 'Zephyr Powered (Learn more at https://zephyr-cloud.io)',
+ },
+ ],
+ }),
+ );
+ }
+
+ if (template.includes('lib')) {
+ return ProjectType.lib;
+ }
+
+ return ProjectType.app;
+}
+async function forgeTemplate({
+ projectType,
+ argv,
+ templateParameters,
+ distFolder,
+}: {
+ projectType: ProjectType;
+ argv: Argv;
+ templateParameters: Record;
+ distFolder: string;
+}) {
+ let framework: AppTemplateName = 'modern';
+ let roleType: RoleType = RoleType.provider;
+
+ if (!argv?.template && projectType === 'app') {
+ framework = checkCancel(
+ await select({
+ message: 'Select template',
+ options: [
+ { value: 'modern', label: 'Modern.js Framework' },
+ { value: 'rsbuild', label: 'Rsbuild' },
+ ],
+ }),
+ );
+
+ roleType =
+ argv.role ||
+ checkCancel(
+ await select({
+ message: 'Please select the role of project you want to create:',
+ initialValue: 'provider',
+ options: [
+ { value: 'consumer', label: 'Consumer' },
+ { value: 'provider', label: 'Provider' },
+ ],
+ }),
+ );
+ }
+
+ const templateName = await getTemplateName(
+ {
+ projectType,
+ framework,
+ roleType,
+ },
+ argv,
+ );
+ const material = new FsMaterial(packageDir);
+
+ const renderTemplate = async (templateDir: string) => {
+ const templatePattern = `${templateDir}**/*`;
+ const resourceMap = await material.find(templatePattern, {
+ nodir: true,
+ dot: true,
+ });
+
+ const parameters = {
+ ...templateParameters,
+ };
+
+ await Promise.all(
+ Object.keys(resourceMap).map(async (resourceKey) => {
+ const target = resourceKey
+ .replace(templateDir, ``)
+ .replace('.handlebars', ``);
+
+ const handlebarsAPI = new HandlebarsAPI();
+ await handlebarsAPI.renderTemplate(
+ material.get(resourceKey),
+ target,
+ distFolder,
+ {
+ ...parameters,
+ },
+ );
+ }),
+ );
+ };
+
+ const templateDir = getTemplateDir(templateName);
+
+ let commonTemplateDir = '';
+ if (projectType === ProjectType.lib) {
+ commonTemplateDir = 'templates/lib-common/';
+ } else if (projectType === 'app') {
+ commonTemplateDir = `templates/${framework}-common/`;
+ }
+
+ // Only render common templates if they exist and are applicable
+ if (commonTemplateDir) {
+ await renderTemplate(commonTemplateDir);
+ }
+ await renderTemplate(templateDir);
+}
+
+export async function create({
+ name,
+ templates,
+}: {
+ name: string;
+ templates: string[];
+}) {
+ const argv = minimist(process.argv.slice(2), {
+ alias: { h: 'help', d: 'dir', t: 'template', n: 'name', r: 'role' },
+ });
+
+ console.log('');
+ logger.greet(`◆ Create ${upperFirst(name)} Project`);
+
+ if (argv.help) {
+ logHelpMessage(name, templates);
+ return;
+ }
+
+ const cwd = process.cwd();
+ const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
+ const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
+ const mfVersion = __VERSION__;
+
+ argv.template = templates.includes(argv.template || '')
+ ? argv.template
+ : undefined;
+
+ const projectType = await getProjectType(argv.template);
+
+ if (projectType === ProjectType.zephyr) {
+ const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
+ const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
+ note(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
+
+ spawnSync(pkgManager, ['create', zephyrPackage], {
+ stdio: 'inherit',
+ shell: true,
+ });
+
+ outro('Done.');
+ return;
+ }
+
+ const mfName =
+ argv.name ||
+ checkCancel(
+ await text({
+ message: 'Please input Module Federation name:',
+ placeholder: 'mf_project_name',
+ defaultValue: 'mf_project_name',
+ validate(value) {
+ if (value.length === 0) {
+ return 'Name is required';
+ }
+ },
+ }),
+ );
+
+ const { targetDir } = formatProjectName(path.join(argv.dir || mfName));
+ const distFolder = path.isAbsolute(targetDir)
+ ? targetDir
+ : path.join(cwd, targetDir);
+
+ if (!argv.override && fs.existsSync(distFolder) && !isEmptyDir(distFolder)) {
+ const option = checkCancel(
+ await select({
+ message: `"${targetDir}" is not empty, please choose:`,
+ options: [
+ { value: 'yes', label: 'Continue and override files' },
+ { value: 'no', label: 'Cancel operation' },
+ ],
+ }),
+ );
+
+ if (option === 'no') {
+ cancelAndExit();
+ }
+ }
+
+ await forgeTemplate({
+ projectType,
+ argv,
+ templateParameters: {
+ mfName,
+ mfVersion,
+ },
+ distFolder,
+ });
+
+ const nextSteps = [
+ `cd ${targetDir}`,
+ `${pkgManager} install`,
+ `${pkgManager} run ${projectType === ProjectType.lib ? 'mf-dev' : 'dev'}`,
+ ];
+
+ note(nextSteps.join('\n'), 'Next steps');
+
+ outro('Done.');
+}
diff --git a/packages/create-module-federation/src/handlebars/index.ts b/packages/create-module-federation/src/handlebars/index.ts
new file mode 100644
index 00000000000..09e55cb41f0
--- /dev/null
+++ b/packages/create-module-federation/src/handlebars/index.ts
@@ -0,0 +1,68 @@
+import { FS_RESOURCE } from '../materials';
+import { renderString, outputFs } from './utils';
+
+import type { FsMaterial, FsResource } from '../materials';
+
+type TargetFunction = (globMatch: string) => string;
+
+type RenderTemplateDirOptions = {
+ nodir?: boolean;
+ dot?: boolean;
+ ignore?: string | readonly string[];
+ parameters?: Record;
+};
+
+export { renderString };
+
+export class HandlebarsAPI {
+ async renderTemplate(
+ templateResource: FsResource,
+ target: string,
+ outputFilePath: string,
+ parameters: Record = {},
+ ) {
+ if (templateResource._type !== FS_RESOURCE) {
+ throw new Error('resource not match');
+ }
+ const resourceValue = await templateResource.value();
+ if (typeof resourceValue.content !== 'string') {
+ throw new Error(
+ `resource.value is not string, resourceValue=${
+ resourceValue as unknown as string
+ }`,
+ );
+ }
+ await outputFs(
+ target,
+ templateResource.resourceKey.endsWith('.handlebars')
+ ? renderString(resourceValue.content, parameters)
+ : resourceValue.content,
+ outputFilePath,
+ { encoding: 'utf-8' },
+ );
+ }
+
+ async renderTemplateDir(
+ material: FsMaterial,
+ findGlob: string,
+ target: TargetFunction,
+ outputFilePath: string,
+ options?: RenderTemplateDirOptions,
+ ) {
+ const resourceMap = await material.find(findGlob, {
+ nodir: true,
+ ...options,
+ });
+ await Promise.all(
+ // resourceKey is relate path. example: in `garr-master/package.json`, package.json is resourceKey
+ Object.keys(resourceMap).map(async (resourceKey) => {
+ await this.renderTemplate(
+ material.get(resourceKey),
+ target(resourceKey),
+ outputFilePath,
+ options?.parameters,
+ );
+ }),
+ );
+ }
+}
diff --git a/packages/create-module-federation/src/handlebars/utils.ts b/packages/create-module-federation/src/handlebars/utils.ts
new file mode 100644
index 00000000000..73c93ff827f
--- /dev/null
+++ b/packages/create-module-federation/src/handlebars/utils.ts
@@ -0,0 +1,21 @@
+import fs from 'fs-extra';
+import path from 'path';
+import handlebars from 'handlebars';
+
+export function renderString(
+ template: string,
+ fullData: Record,
+): string {
+ return handlebars.compile(template)(fullData) || '';
+}
+
+export async function outputFs(
+ file: string | number,
+ content: any,
+ outputPath: string,
+ options?: fs.WriteFileOptions | string,
+) {
+ const filePath = path.resolve(outputPath, file.toString());
+ await fs.mkdirp(path.dirname(filePath));
+ await fs.writeFile(filePath, content, options);
+}
diff --git a/packages/create-module-federation/src/index.ts b/packages/create-module-federation/src/index.ts
new file mode 100644
index 00000000000..e5915cef078
--- /dev/null
+++ b/packages/create-module-federation/src/index.ts
@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import { create } from './create';
+
+interface Template {
+ template: string;
+ tools?: Record;
+}
+
+export const TEMPLATES = [
+ 'provider-modern',
+ 'provider-rsbuild',
+ 'provider-rslib',
+ 'provider-rslib-storybook',
+ 'consumer-modern',
+ 'consumer-rsbuild',
+];
+
+create({
+ name: 'Module Federation',
+ templates: TEMPLATES,
+});
diff --git a/packages/create-module-federation/src/materials/FsMaterial.ts b/packages/create-module-federation/src/materials/FsMaterial.ts
new file mode 100644
index 00000000000..a91eabc506c
--- /dev/null
+++ b/packages/create-module-federation/src/materials/FsMaterial.ts
@@ -0,0 +1,48 @@
+import path from 'path';
+import glob from 'glob';
+import { FsResource } from './FsResource';
+
+const promisifyGlob = (
+ pattern: string,
+ options: glob.IOptions,
+): Promise =>
+ new Promise((resolve, reject) => {
+ glob(pattern, options, (err, files) =>
+ err === null ? resolve(files) : reject(err),
+ );
+ });
+
+export class FsMaterial {
+ basePath: string;
+
+ constructor(basePath: string) {
+ this.basePath = basePath;
+ }
+
+ get(resourceKey: string) {
+ return new FsResource(
+ path.resolve(this.basePath, resourceKey),
+ resourceKey,
+ );
+ }
+
+ async find(
+ globStr: string,
+ options?: {
+ nodir?: boolean;
+ dot?: boolean;
+ ignore?: string | readonly string[];
+ },
+ ): Promise> {
+ const matches = await promisifyGlob(globStr, {
+ cwd: path.resolve(this.basePath),
+ nodir: options?.nodir,
+ dot: options?.dot,
+ ignore: options?.ignore,
+ });
+ return matches.reduce>((pre, cur) => {
+ pre[cur] = new FsResource(path.resolve(this.basePath, cur), cur);
+ return pre;
+ }, {});
+ }
+}
diff --git a/packages/create-module-federation/src/materials/FsResource.ts b/packages/create-module-federation/src/materials/FsResource.ts
new file mode 100644
index 00000000000..1dbbacd7d92
--- /dev/null
+++ b/packages/create-module-federation/src/materials/FsResource.ts
@@ -0,0 +1,29 @@
+import type { Buffer } from 'buffer';
+import path from 'path';
+import fs from 'fs-extra';
+import { IMAGE_EXT_LIST } from './constants';
+
+export const FS_RESOURCE = '_mf_fs_resource';
+
+export class FsResource {
+ _type: string = FS_RESOURCE;
+
+ filePath: string;
+
+ resourceKey: string;
+
+ constructor(filePath: string, resourceKey: string) {
+ this.filePath = filePath;
+ this.resourceKey = resourceKey;
+ }
+
+ async value(): Promise<{ content: string | Buffer }> {
+ const resourceFileExt = path.extname(this.filePath);
+ if (IMAGE_EXT_LIST.includes(resourceFileExt)) {
+ const buffer = await fs.readFile(path.resolve(this.filePath));
+ return { content: buffer };
+ }
+ const text = await fs.readFile(path.resolve(this.filePath), 'utf8');
+ return { content: text };
+ }
+}
diff --git a/packages/create-module-federation/src/materials/constants.ts b/packages/create-module-federation/src/materials/constants.ts
new file mode 100644
index 00000000000..32e6a4449ec
--- /dev/null
+++ b/packages/create-module-federation/src/materials/constants.ts
@@ -0,0 +1,12 @@
+export const IMAGE_EXT_LIST = [
+ '.jpg',
+ '.jpeg',
+ '.png',
+ '.gif',
+ '.bmp',
+ '.ico',
+ '.icon',
+ '.mpt',
+ '.psd',
+ '.wmf',
+];
diff --git a/packages/create-module-federation/src/materials/index.ts b/packages/create-module-federation/src/materials/index.ts
new file mode 100644
index 00000000000..4ec1a014781
--- /dev/null
+++ b/packages/create-module-federation/src/materials/index.ts
@@ -0,0 +1,2 @@
+export { FsMaterial } from './FsMaterial';
+export { FsResource, FS_RESOURCE } from './FsResource';
diff --git a/packages/create-module-federation/templates/consumer-modern-ts/modern.config.ts b/packages/create-module-federation/templates/consumer-modern-ts/modern.config.ts
new file mode 100644
index 00000000000..acaec611f69
--- /dev/null
+++ b/packages/create-module-federation/templates/consumer-modern-ts/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(),
+ ],
+});
diff --git a/packages/create-module-federation/templates/consumer-modern-ts/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/consumer-modern-ts/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..28dbf654e4d
--- /dev/null
+++ b/packages/create-module-federation/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 },
+ },
+});
diff --git a/packages/create-module-federation/templates/consumer-modern-ts/src/routes/page.tsx b/packages/create-module-federation/templates/consumer-modern-ts/src/routes/page.tsx
new file mode 100644
index 00000000000..8ba40d36e3a
--- /dev/null
+++ b/packages/create-module-federation/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 = () => (
+
+);
+
+export default Index;
diff --git a/packages/create-module-federation/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..51de1d0375f
--- /dev/null
+++ b/packages/create-module-federation/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 },
+ },
+});
diff --git a/packages/create-module-federation/templates/consumer-rsbuild-ts/rsbuild.config.ts b/packages/create-module-federation/templates/consumer-rsbuild-ts/rsbuild.config.ts
new file mode 100644
index 00000000000..b593e818429
--- /dev/null
+++ b/packages/create-module-federation/templates/consumer-rsbuild-ts/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)],
+});
diff --git a/packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx b/packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx
new file mode 100644
index 00000000000..9b16a426363
--- /dev/null
+++ b/packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+import Provider from 'provider';
+
+const App = () => {
+ return (
+
+ );
+};
+
+export default App;
diff --git a/packages/create-module-federation/templates/lib-common/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/lib-common/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..acf4fd99828
--- /dev/null
+++ b/packages/create-module-federation/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,
+ },
+ },
+})
diff --git a/packages/create-module-federation/templates/lib-common/rslib.config.ts b/packages/create-module-federation/templates/lib-common/rslib.config.ts
new file mode 100644
index 00000000000..6a527ba269a
--- /dev/null
+++ b/packages/create-module-federation/templates/lib-common/rslib.config.ts
@@ -0,0 +1,52 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+import pkg from './package.json';
+
+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: {
+ // set unpkg cdn as assetPrefix if you want to publish
+ assetPrefix:
+ process.env.NODE_ENV === 'production'
+ ? `https://unpkg.com/${pkg.name}@latest/dist/mf/`
+ : undefined,
+ distPath: {
+ root: './dist/mf',
+ },
+ },
+ },
+ ],
+ server: {
+ port: 3001,
+ },
+ plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});
diff --git a/packages/create-module-federation/templates/lib-common/src/index.css b/packages/create-module-federation/templates/lib-common/src/index.css
new file mode 100644
index 00000000000..a5408717129
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/packages/create-module-federation/templates/lib-common/src/index.tsx b/packages/create-module-federation/templates/lib-common/src/index.tsx
new file mode 100644
index 00000000000..88e092d7d7e
--- /dev/null
+++ b/packages/create-module-federation/templates/lib-common/src/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.css';
+
+const Provider: React.FC = () => {
+ return (
+
+
+
+
+
Hello Module Federation 2.0
+
+
+
+ );
+}
diff --git a/packages/create-module-federation/templates/modern-common/tsconfig.json b/packages/create-module-federation/templates/modern-common/tsconfig.json
new file mode 100644
index 00000000000..26ef0ff0304
--- /dev/null
+++ b/packages/create-module-federation/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"]
+}
diff --git a/packages/create-module-federation/templates/provider-modern-ts/modern.config.ts b/packages/create-module-federation/templates/provider-modern-ts/modern.config.ts
new file mode 100644
index 00000000000..616290711f3
--- /dev/null
+++ b/packages/create-module-federation/templates/provider-modern-ts/modern.config.ts
@@ -0,0 +1,18 @@
+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(),
+ ],
+ server: {
+ port: 3001,
+ },
+});
diff --git a/packages/create-module-federation/templates/provider-modern-ts/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/provider-modern-ts/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..fbe462949ce
--- /dev/null
+++ b/packages/create-module-federation/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 },
+ },
+});
diff --git a/packages/create-module-federation/templates/provider-modern-ts/src/components/ProviderComponent.css b/packages/create-module-federation/templates/provider-modern-ts/src/components/ProviderComponent.css
new file mode 100644
index 00000000000..1deda4d67ee
--- /dev/null
+++ b/packages/create-module-federation/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);
+ }
+}
diff --git a/packages/create-module-federation/templates/provider-modern-ts/src/components/ProviderComponent.tsx b/packages/create-module-federation/templates/provider-modern-ts/src/components/ProviderComponent.tsx
new file mode 100644
index 00000000000..83d8aa0512b
--- /dev/null
+++ b/packages/create-module-federation/templates/provider-modern-ts/src/components/ProviderComponent.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProviderComponent.css';
+
+const Provider: React.FC = () => {
+ return (
+
+
+
+
+
Hello Module Federation 2.0
+
+
+
+
+
Hello Module Federation 2.0
+