feat: add dts cli (#3578)

Author: 2heal1

.changeset/config.json

@@ -26,7 +26,8 @@
       "@module-federation/error-codes",
       "@module-federation/inject-external-runtime-core-plugin",
       "@module-federation/runtime-core",
-      "create-module-federation"
+      "create-module-federation",
+      "@module-federation/cli"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

apps/website-new/docs/en/configure/dts.mdx

@@ -209,6 +209,75 @@ Before loading type files, whether to delete the previously loaded `typesFolder`
 
 `typesFolder` corresponding to `remotes` directory configuration
 
+#### remoteTypeUrls
+
+- Type: `(() => Promise<RemoteTypeUrls>) | RemoteTypeUrls`
+- Required: No
+- Default value:`undefined`
+
+Used for getting the address of the `remote` type file.
+
+Application scenarios:
+
+* Only the runtime API is used to load the producer, and no build plugin is used. The MF type file address is informed by creating a `module-federation.config.ts` configuration file and setting this configuration.
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';
+
+export default createModuleFederationConfig({
+  // ...
+  remotes: {
+    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
+  },
+  dts:{
+    consumeTypes:{
+      remoteTypeUrls: async()=>{
+        // Simulate the request interface to obtain the type file address
+        const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
+          setTimeout(()=>{
+            resolve({
+              remote1:{
+                alias: 'remote1-alias',
+                api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
+                zip:'http://localhost:8081/custom-dir/@mf-types.zip'
+              }
+            } )
+          },1000)
+        });
+
+        return data;
+      }
+    }
+  }
+});
+```
+
+
+* When remote is `remoteEntry.js`, the type file address usually directly replaces the js file with the corresponding type file, such as `@mf-types.zip`, but the actual uploaded type file address is not this, so you can tell MF the real type file address by setting this configuration.
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/enhanced';
+
+export default createModuleFederationConfig({
+  // ...
+  remotes: {
+    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
+  },
+  dts:{
+    consumeTypes:{
+      remoteTypeUrls: {
+        // remote name
+        remote1:{
+          alias: 'remote1-alias',
+          api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
+          zip:'http://localhost:8081/custom-dir/@mf-types.zip'
+        }
+      }
+    }
+  }
+});
+```
+
 ### tsConfigPath
 
 - Type: `string`

apps/website-new/docs/en/guide/basic/_meta.json

@@ -1 +1 @@
-["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt"]
+["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"]

apps/website-new/docs/en/guide/basic/cli.mdx

@@ -0,0 +1,64 @@
+# CLI
+
+`@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI.
+
+## All commands
+
+To view all available CLI commands, run the following command in the project directory:
+
+```bash
+npx mf -h
+```
+
+The output is shown below:
+
+```text
+Usage: mf <command> [options]
+
+Options:
+  -V, --version   output the version number
+  -h, --help      display help for command
+
+Commands:
+  dts [options]   generate or fetch the mf types
+  help [command]  display help for command
+```
+
+## Common flags
+
+Module Federation CLI provides several common flags that can be used with all commands:
+
+| Flag                       | Description                                                                                                                                       |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-c, --config <config>`    | Specify the configuration file, can be a relative or absolute path, default value is `module-federation.ts` |
+| `-m, --mode <mode>`        | Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the `process.env.NODE_ENV` environment variable will be automatically injected with "development" or "production" according to the value. |
+| `-h, --help`               | Display help for command                                                                                                                          |
+
+## mf dts
+
+The `mf dts` command is used to generate or fetch remote types.
+
+```bash
+Usage: mf dts [options]
+
+generate or fetch the mf types
+
+Options:
+  --root <root>         specify the project root directory
+  --output <output>     specify the generated dts output directory
+  --fetch <boolean>     fetch types from remote, default is true (default: true)
+  --generate <boolean>  generate types, default is true (default: true)
+  -c --config <config>  specify the configuration file, can be a relative or absolute path
+  -m --mode <mode>      Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the process.env.NODE_ENV environment variable will be
+                        automatically injected with "development" or "production" according to the value. (default: "dev")
+  -h, --help            display help for command
+```
+
+:::info Note
+
+The `mf dts` command will automatically generate or pull type declaration files based on the configuration in `module-federation.config.ts`. This means you must provide a valid configuration file, otherwise the command will not work properly.
+
+If you only use the runtime API, you need to create a temporary `module-federation.config.ts` file, write the remote configuration you need to get the type, and then run the `mf dts` command.
+If you are only using the runtime API, you need to create a temporary `module-federation.config.ts` file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command.
+
+:::

apps/website-new/docs/zh/configure/dts.mdx

@@ -209,6 +209,74 @@ interface DtsHostOptions {
 
 对应 `remotes` 目录配置的 `typesFolder`
 
+#### remoteTypeUrls
+
+- 类型：`(() => Promise<RemoteTypeUrls>) | RemoteTypeUrls`
+- 是否必填：否
+- 默认值：`undefined`
+
+用于获取 `remote` 类型文件的地址。
+
+应用场景：
+
+* 只使用了 runtime API 加载生产者，没使用构建插件，通过创建 `module-federation.config.ts` 配置文件，并设置此配置，来告知 MF 类型文件地址。
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';
+
+export default createModuleFederationConfig({
+  // ...
+  remotes: {
+    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
+  },
+  dts:{
+    consumeTypes:{
+      remoteTypeUrls: async()=>{
+        // 模拟请求接口获取类型文件地址
+        const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
+          setTimeout(()=>{
+            resolve({
+              remote1:{
+                alias: 'remote1-alias',
+                api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
+                zip:'http://localhost:8081/custom-dir/@mf-types.zip'
+              }
+            } )
+          },1000)
+        });
+
+        return data;
+      }
+    }
+  }
+});
+```
+
+* 当 remote 为 `remoteEntry.js` 时，类型文件地址通常会直接替换 js 文件为对应的类型文件，例如 `@mf-types.zip` ，但是实际上传的类型文件地址不是这个，那么可以通过设置此配置来告知 MF 真正的类型文件地址。
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/enhanced';
+
+export default createModuleFederationConfig({
+  // ...
+  remotes: {
+    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
+  },
+  dts:{
+    consumeTypes:{
+      remoteTypeUrls: {
+        // remote name
+        remote1:{
+          alias: 'remote1-alias',
+          api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
+          zip:'http://localhost:8081/custom-dir/@mf-types.zip'
+        }
+      }
+    }
+  }
+});
+```
+
 ### tsConfigPath
 
 - 类型：`string`

apps/website-new/docs/zh/guide/basic/_meta.json

@@ -1 +1 @@
-["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt"]
+["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"]

apps/website-new/docs/zh/guide/basic/cli.mdx

@@ -0,0 +1,63 @@
+# 命令行工具
+
+`@module-federation/enhanced` 和 `@module-federation/modern-js` 提供了轻量的命令行工具。
+
+## 查看所有命令
+
+如果你需要查看所有可用的 CLI 命令，请在项目目录中运行以下命令：
+
+```bash
+npx mf -h
+```
+
+输出如下：
+
+```text
+Usage: mf <command> [options]
+
+Options:
+  -V, --version   output the version number
+  -h, --help      display help for command
+
+Commands:
+  dts [options]   generate or fetch the mf types
+  help [command]  display help for command
+```
+
+## 公共选项
+
+Module Federation CLI 提供了一些公共选项，可以用于所有命令：
+
+| 选项                       | 描述                                                                                                              |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `-c, --config <config>`    | 指定配置文件路径，可以为相对路径或绝对路径，默认值为 `module-federation.config.ts`      |
+| `-m, --mode <mode>`        | 指定运行环境，可以选择 "dev" 或 "prod" ，默认值为 "dev" ，设置后会按照值自动往 `process.env.NODE_ENV` 环境变量注入  "development" 或 "production"   |
+| `-h, --help`               | 显示命令帮助                                                                                                      |
+
+## mf dts
+
+`mf dts` 命令用于拉取或生成 TypeScript 类型声明文件。
+
+```bash
+Usage: mf dts [options]
+
+generate or fetch the mf types
+
+Options:
+  --root <root>         specify the project root directory
+  --output <output>     specify the generated dts output directory
+  --fetch <boolean>     fetch types from remote, default is true (default: true)
+  --generate <boolean>  generate types, default is true (default: true)
+  -c --config <config>  specify the configuration file, can be a relative or absolute path
+  -m --mode <mode>      Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the process.env.NODE_ENV environment variable will be
+                        automatically injected with "development" or "production" according to the value. (default: "dev")
+  -h, --help            display help for command
+```
+
+:::info 注意
+
+`mf dts` 命令会自动根据 `module-federation.config.ts` 中的配置生成或拉取类型声明文件。 这意味着你必须提供一个有效的配置文件，否则命令将无法正常运行。
+
+如果你是只使用了 runtime API，那么你需要创建一份临时的 `module-federation.config.ts` 文件，配置 [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls)，然后运行 `mf dts` 命令。
+
+:::

packages/cli/CHANGELOG.md

@@ -0,0 +1 @@
+# @module-federation/cli

packages/cli/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-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.

packages/cli/README.md

@@ -0,0 +1,15 @@
+<p align="center">
+  <a href="https://module-federation.io/" target="blank"><img src="https://module-federation.io/module-federation.svg" alt="Module Federation 2.0" /></a>
+</p>
+
+# @module-federation/cli
+
+Module Federation CLI
+
+<p>
+  <a href="https://npmjs.com/package/@module-federation/cli">
+   <img src="https://img.shields.io/npm/v/@module-federation/cli?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
+  <a href="https://npmcharts.com/compare/@module-federation/cli?minimal=true"><img src="https://img.shields.io/npm/dm/@module-federation/cli.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
+</p>