docs(mf): polish docs

Author: fi3ework

.github/workflows/test.yml

@@ -158,7 +158,7 @@ jobs:
           cache: 'pnpm'
 
       - name: Install Dependencies
-        run: pnpm install && cd ./tests && npx playwright install chromium
+        run: pnpm install && cd ./tests && pnpm playwright install chromium
 
       # only run benchmark in Ubuntu
       - name: Benchmarks (Vitest)

examples/module-federation/README.md

@@ -0,0 +1,76 @@
+# @examples/module-federation
+
+Check out [Module Federation Documentation](https://module-federation.io/) for the glossary of `consumer`, `producer`, `remote`, and `host`.
+
+## Packages
+
+In this example directory, there are three projects included, which are:
+
+### [mf-react-component](./mf-react-component/)
+
+**Role**:
+
+- Rslib project: producer
+- Storybook: consumer
+
+A React component built with Rslib in the Module Federation format. It includes a Storybook configuration that demonstrates how to develop MF in Storybook.
+
+### [mf-remote](./mf-remote/)
+
+**Role**: producer
+
+A Module Federation remote module built with Rsbuild. It is consumed by [mf-react-component](./mf-react-component/) to show how a Rslib MF module could be consumed by another Rslib app while consuming other remote modules at the same time.
+
+Extra remote module is **optional**, it is used to demonstrate a complex Module Federation set up here.
+
+### [mf-host](./mf-host/)
+
+**Role**: consumer
+
+An Rsbuild app that consumes Module Federation remote module.
+
+## Development MF
+
+### With host app
+
+1. Start the remote module
+
+```bash
+pnpm dev:remote
+```
+
+2. Start the Rslib MF module
+
+```bash
+pnpm dev:rslib
+```
+
+3. Start the host app
+
+```bash
+pnpm dev:host
+```
+
+Then access the host app at http://localhost:3000.
+
+### With Storybook
+
+1. Start the remote module
+
+```bash
+pnpm dev:remote
+```
+
+2. Start the Rslib MF module
+
+```bash
+pnpm dev:rslib
+```
+
+2. Start the host app
+
+```bash
+pnpm dev:storybook
+```
+
+Then access the host app at http://localhost:6006.

examples/module-federation/mf-host/README.md

@@ -1,29 +1,30 @@
-# Rsbuild Project
+# @examples/mf-host
 
-Module Federation Host Example
+> [!NOTE]  
+> Check out [README](../README.md) to see how to develop a Rslib MF project in a host app or Storybook.
 
-## Setup
+An Rsbuild app that consumes Module Federation remote module.
 
-Install the dependencies:
+## Usage
 
-```bash
-pnpm install
-```
-
-## Get Started
+### Development
 
 Start the dev server:
 
 ```bash
 pnpm dev
 ```
 
+### Build
+
 Build the app for production:
 
 ```bash
 pnpm build
 ```
 
+### Preview
+
 Preview the production build locally:
 
 ```bash

examples/module-federation/mf-react-component/README.md

@@ -1,37 +1,28 @@
 # @examples/mf-react-component
 
-This example demonstrates how to use Rslib to build a simple Module Federation React component.
+> [!NOTE]  
+> Check out [README](../README.md) to see how to develop a Rslib MF project in a host app or Storybook.
 
-### Usage
+A React component built with Rslib in the Module Federation format. It includes a Storybook configuration that demonstrates how to develop MF in Storybook.
 
-Dev MF module
+## Usage
 
-1. Start remote module which is loaded by Rslib module.
+### Develop MF module
 
-```
-nx run @examples/mf-remote:dev
-```
-
-2. Start MF dev mode.
-
-```
-nx run @examples/mf-react-component:dev
+```bash
+pnpm run dev
 ```
 
-3. Use Storybook to development component.
+### Build and serve the dist in production mode
 
-```
-nx run @examples/mf-react-component:storybook
-```
-
-Build
+Build the project
 
-```
-nx run @examples/mf-react-component:build
+```bash
+pnpm run build
 ```
 
-Build and Serve dist
+Serve the dist
 
-```
-nx run @examples/mf-react-component:serve
+```bash
+pnpm run serve
 ```

examples/module-federation/mf-remote/README.md

@@ -1,14 +1,11 @@
-# Rsbuild Project
+# @examples/mf-remote
 
-Module Federation Remote Example
+> [!NOTE]  
+> Check out [README](../README.md) to see how to develop a Rslib MF project in a host app or Storybook.
 
-## Setup
+A Module Federation remote module built with Rsbuild. It is consumed by [mf-react-component](./mf-react-component/) to show how a Rslib MF module could be consumed by another Rslib app while consuming other remote modules at the same time.
 
-Install the dependencies:
-
-```bash
-pnpm install
-```
+Extra remote module is **optional**, it is used to demonstrate a complex Module Federation set up here.
 
 ## Get Started
 

examples/module-federation/package.json

@@ -1,10 +1,14 @@
 {
-  "name": "@examples/mf",
+  "name": "@examples/module-federation",
   "private": true,
   "scripts": {
-    "dev:all": "pnpm dev:host & pnpm serve:lib & pnpm dev:remote",
+    "build:lib": "pnpm --filter mf-react-component run build",
+    "dev:all:host": "pnpm dev:host & pnpm dev:mf & pnpm dev:remote",
+    "dev:all:storybook": "pnpm dev:mf & pnpm dev:storybook & pnpm dev:remote",
     "dev:host": "pnpm --filter mf-host dev",
+    "dev:mf": "pnpm --filter mf-react-component dev",
     "dev:remote": "pnpm --filter mf-remote dev",
+    "dev:storybook": "pnpm --filter mf-react-component storybook",
     "serve:lib": "pnpm --filter mf-react-component run serve"
   }
 }