@module-federation/bridge-vue3 0.8.4 → 0.8.6

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/vue3-bridge"
   },
-  "version": "0.8.4",
+  "version": "0.8.6",
   "publishConfig": {
     "access": "public"
   },
@@ -32,9 +32,9 @@
     "vue-router": "=3"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.8.4",
-    "@module-federation/sdk": "0.8.4",
-    "@module-federation/runtime": "0.8.4"
+    "@module-federation/bridge-shared": "0.8.6",
+    "@module-federation/sdk": "0.8.6",
+    "@module-federation/runtime": "0.8.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/create.ts

@@ -28,7 +28,7 @@ export function createRemoteComponent(info: {
       }
 
       const exportName = info?.export || 'default';
-      LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
         basename,
         info,
       });
@@ -37,7 +37,7 @@ export function createRemoteComponent(info: {
       const moduleName = module && module[Symbol.for('mf_module_id')];
       const exportFn = module[exportName];
 
-      LoggerInstance.log(
+      LoggerInstance.debug(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
         { name: moduleName, module, exportName, basename, route },
       );

package/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) {
-        LoggerInstance.log(`createBridgeComponent render Info`, info);
+      async render(info: RenderFnParams) {
+        LoggerInstance.debug(`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,41 +41,41 @@ 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);
+        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info?.dom);
 
         instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);

package/src/remoteApp.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
         basename: props.basename,
         memoryRoute: props.memoryRoute,
       };
-      LoggerInstance.log(
+      LoggerInstance.debug(
         `createRemoteComponent LazyComponent render >>>`,
         renderProps,
       );
@@ -53,10 +53,13 @@ export default defineComponent({
 
         // dispatchPopstateEnv
         if (pathname.value !== '' && pathname.value !== newPath) {
-          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            ...props,
-            pathname: route.path,
-          });
+          LoggerInstance.debug(
+            `createRemoteComponent dispatchPopstateEnv >>>`,
+            {
+              ...props,
+              pathname: route.path,
+            },
+          );
           dispatchPopstateEnv();
         }
         pathname.value = newPath;
@@ -68,7 +71,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      LoggerInstance.log(`createRemoteComponent LazyComponent destroy >>>`, {
+      LoggerInstance.debug(`createRemoteComponent LazyComponent destroy >>>`, {
         ...props,
       });
       watchStopHandle();