refactor(vue3-bridge): refactor of createBridgeComponent to add the ability to register plugins inside the function (#3297)

Co-authored-by: Zack Jackson <[email protected]>

Author: Dell-it

.changeset/heavy-flowers-compare.md

@@ -0,0 +1,9 @@
+---
+'@module-federation/bridge-vue3': patch
+---
+
+1. Added type annotations for the argument in the `createBridgeComponent` function.
+2. Added passing the instance of the created Vue-application to `appOptions` so that necessary plugins can be registered in this callback.
+3. Made `router` returned from `appOptions` optional.
+4. Fixed issues reported by TypeScript and ESLint, including allowing `beforeBridgeRenderRes` to be a promise.
+5. Updated the documentation.

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

@@ -35,6 +35,12 @@ function createRemoteComponent<T, E extends keyof T>(
 
 function createBridgeComponent(bridgeInfo: {
   rootComponent: VueComponent;
+  appOptions?: (params: {
+    app: Vue.App<VueComponent>;
+    basename?: string;
+    memoryRoute?: { entryPath: string };
+    [key: string]: any;
+  }) => { router?: Router } | void;
 }): () => {
   render(info: {
     name?: string;
@@ -58,13 +64,17 @@ function createBridgeComponent(bridgeInfo: {
 // ./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}
+  },
 });
 ```
 
@@ -193,11 +203,14 @@ export default router;
 #### createBridgeComponent
 
 ```tsx
-function createBridgeComponent<T>(bridgeInfo: {
+function createBridgeComponent(bridgeInfo: {
   rootComponent: VueComponent;
-  appOptions?: () => ({
-    router: Router;
-  });
+  appOptions?: (params: {
+    app: Vue.App<VueComponent>;
+    basename?: string;
+    memoryRoute?: { entryPath: string };
+    [key: string]: any;
+  }) => { router?: Router } | void;
 }): () => {
   render(info: {
     name?: string;
@@ -212,21 +225,25 @@ function createBridgeComponent<T>(bridgeInfo: {
 ```
 
 * `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}
+  },
 });
 ```

packages/bridge/vue3-bridge/src/provider.ts

@@ -6,19 +6,33 @@ import { getInstance } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 
-export function createBridgeComponent(bridgeInfo: any) {
+type AddOptionsFnParams = {
+  app: Vue.App<Vue.Component>;
+  basename: RenderFnParams['basename'];
+  memoryRoute: RenderFnParams['memoryRoute'];
+  [key: string]: any;
+};
+
+export type ProviderFnParams = {
+  rootComponent: Vue.Component;
+  appOptions: (
+    params: AddOptionsFnParams,
+  ) => { router?: VueRouter.Router } | void;
+};
+
+export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
   const rootMap = new Map();
   const instance = getInstance();
   return () => {
     return {
       __APP_VERSION__,
-      render(info: RenderFnParams) {
+      async render(info: RenderFnParams) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const app = Vue.createApp(bridgeInfo.rootComponent);
         rootMap.set(info.dom, app);
 
         const beforeBridgeRenderRes =
-          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
+          await instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info);
 
         const extraProps =
           beforeBridgeRenderRes &&
@@ -27,38 +41,38 @@ export function createBridgeComponent(bridgeInfo: any) {
             ? beforeBridgeRenderRes?.extraProps
             : {};
 
-        const appOptions = bridgeInfo.appOptions({
+        const bridgeOptions = bridgeInfo.appOptions({
+          app,
           basename: info.basename,
           memoryRoute: info.memoryRoute,
           ...extraProps,
         });
 
-        const history = info.memoryRoute
-          ? VueRouter.createMemoryHistory(info.basename)
-          : VueRouter.createWebHistory(info.basename);
+        if (bridgeOptions?.router) {
+          const history = info.memoryRoute
+            ? VueRouter.createMemoryHistory(info.basename)
+            : VueRouter.createWebHistory(info.basename);
 
-        const router = VueRouter.createRouter({
-          ...appOptions.router.options,
-          history,
-          routes: appOptions.router.getRoutes(),
-        });
+          const router = VueRouter.createRouter({
+            ...bridgeOptions.router.options,
+            history,
+            routes: bridgeOptions.router.getRoutes(),
+          });
 
-        LoggerInstance.log(`createBridgeComponent render router info>>>`, {
-          name: info.moduleName,
-          router,
-        });
-        // memory route Initializes the route
-        if (info.memoryRoute) {
-          router.push(info.memoryRoute.entryPath).then(() => {
-            app.use(router);
-            app.mount(info.dom);
+          LoggerInstance.log(`createBridgeComponent render router info>>>`, {
+            name: info.moduleName,
+            router,
           });
-        } else {
+          // memory route Initializes the route
+          if (info.memoryRoute) {
+            await router.push(info.memoryRoute.entryPath);
+          }
+
           app.use(router);
-          app.mount(info.dom);
         }
 
-        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
+        app.mount(info.dom);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info);
       },
       destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, info);