From 7a501f82b6e4e4a8746e0dc585713bb77eee8f9f Mon Sep 17 00:00:00 2001 From: fengdanping Date: Fri, 24 Jan 2025 18:06:16 +0800 Subject: [PATCH] chore: synchronize vue-bridge chinese and english documents --- .../docs/en/practice/bridge/react-bridge.mdx | 2 - .../docs/en/practice/bridge/vue-bridge.mdx | 13 +- .../docs/zh/practice/bridge/vue-bridge.mdx | 120 +++++++++++++----- 3 files changed, 92 insertions(+), 43 deletions(-) diff --git a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx index 562886a10b0..14eef4889ec 100644 --- a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx +++ b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx @@ -1,7 +1,5 @@ # React Bridge -# React Bridge - `@module-federation/bridge-react` provides bridge utility functions for React applications: - `createBridgeComponent`: Used for exporting application-level modules, suitable for producers to wrap modules exported as application types. - `createRemoteComponent`: Used for loading application-level modules, suitable for consumers to load modules as application types. diff --git a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx index ed052f672e9..ffac82fd21f 100644 --- a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx +++ b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx @@ -1,7 +1,6 @@ +# Vue Bridge (for Vue v3) -## Vue Bridge (for Vue v3) - -`@module-federation/bridge-vue3` provides a `bridge` utility function for Vue v3 applications. The provided `createBridgeComponent` can be used to export application-level modules, and `createRemoteComponent` can be used to load application-level modules. +`@module-federation/bridge-vue3` provides a `bridge` utility function for Vue V3 applications. The provided `createBridgeComponent` can be used to export application-level modules, and `createRemoteComponent` can be used to load application-level modules. ### Installation @@ -71,9 +70,8 @@ export default createBridgeComponent({ rootComponent: App, appOptions: ({app}) => { // Optional: adding a plugin to the new Vue instance on the host application side - app.use(customPlugin) - - return {router} + app.use(customPlugin); + return { router }; }, }); ``` @@ -242,8 +240,7 @@ export default createBridgeComponent({ appOptions: ({app}) => { // Optional: adding a plugin to the new Vue instance on the host application side app.use(customPlugin) - - return {router} + return { router }; }, }); ``` diff --git a/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx index 94fe7cd0c00..0ca273ac46c 100644 --- a/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx +++ b/apps/website-new/docs/zh/practice/bridge/vue-bridge.mdx @@ -1,6 +1,6 @@ # Vue Bridge（for Vue v3） -`@module-federation/bridge-vue3` 提供了用于 Vue v3 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/tree/main/apps/router-demo) +`@module-federation/bridge-vue3` 提供了用于 Vue V3 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/tree/main/apps/router-demo) ### 安装 @@ -14,6 +14,49 @@ import { PackageManagerTabs } from '@theme'; }} /> + +### 类型 + +```tsx +function createRemoteComponent( + options: { + // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app') + loader: () => Promise, + // Default is 'default', used to specify module export + export?: E, + // Parameters that will be passed to defineAsyncComponent + asyncComponentOptions?: Omit; + } +): (props: { + basename?: string; + memoryRoute?: { entryPath: string }; +}) => DefineComponent; + + +function createBridgeComponent(bridgeInfo: { + rootComponent: VueComponent; + appOptions?: (params: { + app: Vue.App; + basename?: string; + memoryRoute?: { entryPath: string }; + [key: string]: any; + }) => { router?: Router } | void; +}): () => { + render(info: { + name?: string; + basename?: string; + memoryRoute?: { + entryPath: string; + }; + dom?: HTMLElement; + }): void; + destroy(info: { + dom: HTMLElement; + }): void; +} +``` + + ### 示例 > Remote @@ -22,13 +65,16 @@ import { PackageManagerTabs } from '@theme'; // ./src/export-app.ts import App from './App.vue'; import router from './router'; +import customPlugin from './plugins/custom-vue-plugin'; import { createBridgeComponent } from '@module-federation/bridge-vue3'; export default createBridgeComponent({ rootComponent: App, - appOptions: () => ({ - router, - }), + appOptions: ({ app }) => { + // Optional: adding a plugin to the new Vue instance on the host application side + app.use(customPlugin); + return { router }; + }, }); ``` @@ -93,11 +139,13 @@ export default router; ```tsx function createRemoteComponent( - options?: { - // 加载远程应用的函数，例如：loadRemote('remote1/export-app')、import('remote1/export-app') + options: { + // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app') loader: () => Promise, - // 默认为 default，用于指定模块的 export + // Default is 'default', used to specify module export export?: E; + // Parameters that will be passed to defineAsyncComponent + asyncComponentOptions?: Omit; } ): (props: { basename?: string; @@ -105,19 +153,21 @@ function createRemoteComponent( }) => DefineComponent; ``` -* `options` - * `loader` - * type: `() => Promise` - * 作用: 用于加载远程模块的函数，例如：`loadRemote('remote1/export-app')`、`import('remote1/export-app')` ```tsx const Remote1App = createRemoteComponent({ loader: () => loadRemote('remote1/export-app') }); -const Remote2App = createRemoteComponent({ loader: () => import('remote2/export-app') }); ``` +* `options` + * `loader` + * type: `() => Promise` + * Purpose: Used to load remote modules, e.g., `loadRemote('remote1/export-app')` or `import('remote1/export-app')` * `export` * type: `string` - * 作用: 可以指定模块的 export + * Purpose: Used to specify module export + * `asyncComponentOptions` + * type: `Omit` + * Purpose: Parameters that will be passed to defineAsyncComponent, except for the loader parameter ```tsx // remote export const provider = createBridgeComponent({ @@ -127,28 +177,26 @@ export const provider = createBridgeComponent({ // host const Remote1App = createRemoteComponent({ loader: () => loadRemote('remote1/export-app'), + export: 'provider' }); - ``` * ReturnType * type: `VueComponent` - * 作用: 用于渲染远程模块组件 + * Purpose: Used to render remote module components ```tsx import * as bridge from '@module-federation/bridge-vue3'; -const remote1 = bridge.createRemoteComponent({ - loader: () => loadRemote('remote1/export-app'), -}); +const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app') }); const router = createRouter({ history: createWebHistory(), routes: [ - // 在这里定义你的路由 + // Define your routes here { path: '/', component: Home }, - { path: '/remote1/:pathMatch(.*)*', component: Remote1 }, - // 其他路由 + { path: '/remote1/:pathMatch(.*)*', component: Remote2 }, + // Other routes ], }); export default router; @@ -157,11 +205,14 @@ export default router; #### createBridgeComponent ```tsx -function createBridgeComponent(bridgeInfo: { +function createBridgeComponent(bridgeInfo: { rootComponent: VueComponent; - appOptions?: ()=> ({ - router: Router - }) + appOptions?: (params: { + app: Vue.App; + basename?: string; + memoryRoute?: { entryPath: string }; + [key: string]: any; + }) => { router?: Router } | void; }): () => { render(info: { name?: string; @@ -170,27 +221,30 @@ function createBridgeComponent(bridgeInfo: { entryPath: string; }; dom?: HTMLElement; -}): void; - destroy(info: { dom: HTMLElement}): void; + }): void; + destroy(info: { dom: HTMLElement }): void; } ``` * `bridgeInfo` - * type: `{ rootComponent: VueComponent; appOptions?: ()=> ({ router: Router }) }` - * 作用: 用于传递根组件 + * type: `{ rootComponent: VueComponent; appOptions?: (params: AddOptionsFnParams) => ({ router?: Router }) }` + * Purpose: Used to pass the root component * ReturnType * type: `() => { render: (info: RenderFnParams) => void; destroy: (info: { dom: HTMLElement}) => void; }` ```tsx // ./src/export-app.ts -import { createBridgeComponent } from '@module-federation/bridge-vue3'; +import { createBridgeComponent } from '@module-federation/bridge-vue3'; import App from './App.vue'; +import customPlugin from './plugins/custom-vue-plugin'; import router from './router'; export default createBridgeComponent({ rootComponent: App, - appOptions: () => ({ - router, - }), + appOptions: ({ app }) => { + // Optional: adding a plugin to the new Vue instance on the host application side + app.use(customPlugin); + return { router }; + }, }); ```