chore: add english documentation for bridge chapter (#2862)

Author: danpeen

.changeset/polite-toys-turn.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react-webpack-plugin': patch
+---
+
+feat: enchance react-bridge react-router-dom alias according to origin react-router-dom version

apps/router-demo/router-host-2000/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.6",
     "@module-federation/bridge-react": "workspace:*",
-    "@module-federation/enhanced": "workspace:*"
+    "@module-federation/enhanced": "workspace:*",
+    "react-router-dom": "6.24.1"
   },
   "devDependencies": {
     "@rsbuild/core": "^0.6.15",

apps/router-demo/router-remote1-2001/rsbuild.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
       react: path.resolve(__dirname, 'node_modules/react'),
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
       // set `react-router-dom/` to reference react-router-dom v5 which shoule be find in node_modules/react-router-dom, otherwise it will cause app.tsx fail to work which in react-router-dom v5 mode.
-      'react-router-dom/$': path.resolve(
+      'react-router-dom': path.resolve(
         __dirname,
         'node_modules/react-router-dom',
       ),

apps/website-new/docs/en/practice/bridge/index.mdx

@@ -2,27 +2,50 @@
 
 ## Introduction
 
-The `MF bridge` is a utility function provided by `Module Federation` to help users load application-level modules through `Module Federation`. It automatically provides the necessary application lifecycle functions `render` and `destroy` required by the `provider` function and ensures compatibility with different framework versions. Additionally, it allows proper routing collaboration between applications.
+`Bridge` is a utility function provided by `Module Federation` for loading application-level modules.
+"Application-level modules" are modules that can run like applications, with framework rendering capabilities and routing abilities.
+With `Bridge`, you can render your application in different frameworks and ensure that routing between applications works collaboratively. This is particularly useful for micro-frontend applications.
 
 :::tip
-Before reading this chapter, it's assumed you are already familiar with:
+Before reading this chapter, it's assumed you're familiar with:
 
 - [How to consume and export modules](../../guide/start/quick-start.mdx)
 - [Module Federation Builder plugin](../../guide/basic/rspack.mdx)
-- [Features and capabilities of the Module Federation Runtime](../../guide/basic/runtime.mdx)
+- [Characteristics and capabilities of Module Federation Runtime](../../guide/basic/runtime.mdx)
 
 :::
 
 ## Toolkits
 
 ### @module-federation/bridge-react
 
-The `@module-federation/bridge-react` toolkit is a `bridge` utility function package provided by MF for React v18 applications. The exported `createBridgeComponent` can be used for exporting modules in React v18 applications. Usage examples of `@module-federation/bridge-react` can be found in the [Host demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-host-2000) and [Remote demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-remote2-2002).
+`@module-federation/bridge-react` is suitable for React framework types, currently supporting React v16, v17, and v18 versions.
+
+This toolkit provides two APIs:
+
+- createBridgeComponent
+
+> Used to create React application-type module exports. If your application is React-based and you want it to be loaded as an application-type module by another MF application, you should use this to create standard-compliant exports for your application.
+
+- createRemoteComponent
+
+> Used to load application-type modules in a React application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteComponent` will automatically create a rendering context in your application to ensure the module works properly.
+
+For usage of `@module-federation/bridge-react`, see [Host demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-host-2000) and [Remote demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-remote2-2002).
 
 ### @module-federation/bridge-vue3
 
-The `@module-federation/bridge-vue3` toolkit is a `bridge` utility function package provided by MF for Vue v3 applications. The exported `createBridgeComponent` can be used for exporting modules in Vue v3 sub-applications. Usage examples of `@module-federation/bridge-vue3` can be found in the [Host demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-host-2100) and [Remote demo](https://github.com/module-federation/core/tree/main/apps/router-demo/router-remote3-2003).
+`@module-federation/bridge-vue3` is suitable for Vue framework types, currently supporting Vue v3 version.
+
+This toolkit provides two APIs:
 
+- createBridgeComponent
+
+> Used to create Vue application-type module exports. If your application is Vue v3-based and you want it to be loaded as an application-type module by another MF application, you should use this to create standard-compliant exports for your application.
+
+- createRemoteComponent
+
+> Used to load application-type modules in a Vue application. The loaded module must be wrapped by `createBridgeComponent`. `createRemoteComponent` will automatically create a rendering context in your application to ensure the module works properly.
 
 ## FAQ
 
@@ -31,17 +54,17 @@ The `@module-federation/bridge-vue3` toolkit is a `bridge` utility function pack
 Bridge is mainly used to solve two problems:
 
 * Cross-application framework (React, Vue) loading and rendering
-* Support for loading modules with routes (routes can work together properly)
+* Support for loading modules with routing (routes can work well together)
 
-These two problems are important features in the "micro-frontend framework".
+These two issues are important features in "micro-frontend frameworks"
 
-### How to solve it if the corresponding framework bridge is not provided?
+### How to solve if there's no bridge provided for a specific framework?
 
-Currently, `Module Federation` provides official bridge toolkits. If you need bridge toolkits for other frameworks, you can provide feedback via [issue](https://github.com/module-federation/core/issues) or refer to the existing [`Bridge`](https://github.com/module-federation/core/blob/34ba220bcee3d032e4083aae37f802d1ed20d61b/packages/bridge/bridge-react) to implement it yourself.
+Currently, `Module Federation` provides official bridge toolkits. If you need bridge toolkits for other frameworks, you can provide feedback through [issues](https://github.com/module-federation/core/issues), or refer to the existing [`Bridge`](https://github.com/module-federation/core/blob/34ba220bcee3d032e4083aae37f802d1ed20d61b/packages/bridge/bridge-react) implementation.
 
-The implementation of `Bridge` is very simple. The core is based on `DOM` rendering. Here is the pseudocode:
+The implementation of `Bridge` is very simple, with the core based on `DOM` rendering. Here's some pseudocode:
 
-> Export module
+> Exporting module
 
 ```tsx
 export default function () {
@@ -50,21 +73,24 @@ export default function () {
     render(info: { dom: HTMLElement; basename?: string; memoryRoute?: { entryPath: string; } }) {
       const root = ReactDOM.createRoot(info.dom);
       rootMap.set(info.dom, root);
-      root.render(<App />);
+      root.render(
+        <App />,
+      );
     },
     destroy(info: { dom: HTMLElement }) {
       const root = rootMap.get(info.dom);
       root?.unmount();
     },
-  };
+  }
 }
 ```
 
-> Load module
+> Loading module
 
 ```tsx
-const LazyComponent = React.lazy(async () => {
+const LazyComponent =  React.lazy(async () => {
   const m = await loadRemote('remote1/export-app');
+  const providerInfo = m.default;
   return {
     default: () => {
       const rootRef = useRef(null);
@@ -82,15 +108,14 @@ const LazyComponent = React.lazy(async () => {
         };
       }, []);
       return <div ref={rootRef}></div>;
-    },
+    }
   };
 });
 
-function Component() {
-  return (
-    <React.Suspense fallback={<div>loading</div>}>
-      <LazyComponent />
-    </React.Suspense>
-  );
+function Component () {
+  return (<React.Suspense fallback={<div>loading</div>}>
+  <LazyComponent />
+</React.Suspense>)
 }
 ```
+