@module-federation/bridge-vue3 0.7.3 → 0.7.5

package/package.json

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

package/src/create.ts

@@ -1,7 +1,7 @@
 import { defineAsyncComponent, h } from 'vue';
+import { useRoute } from 'vue-router';
 import RemoteApp from './remoteApp.jsx';
 import { LoggerInstance } from './utils.js';
-import { useRoute } from 'vue-router';
 
 declare const __APP_VERSION__: string;
 

package/src/provider.ts

@@ -2,11 +2,13 @@ import * as Vue from 'vue';
 import * as VueRouter from 'vue-router';
 import { RenderFnParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
+import { getInstance } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 
 export function createBridgeComponent(bridgeInfo: any) {
   const rootMap = new Map();
+  const instance = getInstance();
   return () => {
     return {
       __APP_VERSION__,
@@ -14,14 +16,27 @@ export function createBridgeComponent(bridgeInfo: any) {
         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) || {};
+
+        const extraProps =
+          beforeBridgeRenderRes &&
+          typeof beforeBridgeRenderRes === 'object' &&
+          beforeBridgeRenderRes?.extraProps
+            ? beforeBridgeRenderRes?.extraProps
+            : {};
+
         const appOptions = bridgeInfo.appOptions({
           basename: info.basename,
           memoryRoute: info.memoryRoute,
+          ...extraProps,
         });
 
         const history = info.memoryRoute
           ? VueRouter.createMemoryHistory(info.basename)
           : VueRouter.createWebHistory(info.basename);
+
         const router = VueRouter.createRouter({
           ...appOptions.router.options,
           history,
@@ -42,11 +57,16 @@ export function createBridgeComponent(bridgeInfo: any) {
           app.use(router);
           app.mount(info.dom);
         }
+
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
       destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info?.dom);
+
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
         root?.unmount();
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },
     };
   };

package/src/remoteApp.tsx

@@ -1,7 +1,8 @@
 import { ref, onMounted, onBeforeUnmount, watch, defineComponent } from 'vue';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { useRoute } from 'vue-router';
 import { LoggerInstance } from './utils';
-import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+import { getInstance } from '@module-federation/runtime';
 
 export default defineComponent({
   name: 'RemoteApp',
@@ -16,11 +17,13 @@ export default defineComponent({
     const providerInfoRef = ref(null);
     const pathname = ref('');
     const route = useRoute();
+    const hostInstance = getInstance();
 
     const renderComponent = () => {
       const providerReturn = props.providerInfo?.();
       providerInfoRef.value = providerReturn;
-      const renderProps = {
+
+      let renderProps = {
         name: props.moduleName,
         dom: rootRef.value,
         basename: props.basename,
@@ -30,7 +33,15 @@ export default defineComponent({
         `createRemoteComponent LazyComponent render >>>`,
         renderProps,
       );
+
+      const beforeBridgeRenderRes =
+        hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+          renderProps,
+        ) || {};
+
+      renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
       providerReturn.render(renderProps);
+      hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
     };
 
     const watchStopHandle = watch(
@@ -61,7 +72,21 @@ export default defineComponent({
         ...props,
       });
       watchStopHandle();
+
+      hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+      });
+
       (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
+      hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+      });
     });
 
     return () => <div ref={rootRef}></div>;