@module-federation/bridge-vue3 0.0.0-next-20241106033302 → 0.0.0-next-20241106104434

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/vue3-bridge"
   },
-  "version": "0.0.0-next-20241106033302",
+  "version": "0.0.0-next-20241106104434",
   "publishConfig": {
     "access": "public"
   },
@@ -29,11 +29,12 @@
   ],
   "peerDependencies": {
     "vue": "=3",
-    "vue-router": "=3"
+    "vue-router": "=3",
+    "@module-federation/runtime": "0.0.0-next-20241106104434"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.0.0-next-20241106033302",
-    "@module-federation/sdk": "0.0.0-next-20241106033302"
+    "@module-federation/bridge-shared": "0.0.0-next-20241106104434",
+    "@module-federation/sdk": "0.0.0-next-20241106104434"
   },
   "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

@@ -5,23 +5,51 @@ import { LoggerInstance } from './utils';
 
 declare const __APP_VERSION__: string;
 
+type DestroyParams = {
+  dom: HTMLElement;
+};
+
+type BridgeHooks = {
+  beforeBridgeRender?: (params: RenderFnParams) => any;
+  afterBridgeRender?: (params: RenderFnParams) => any;
+  beforeBridgeDestroy?: (params: DestroyParams) => any;
+  afterBridgeDestroy?: (params: DestroyParams) => any;
+};
+
 export function createBridgeComponent(bridgeInfo: any) {
   const rootMap = new Map();
-  return () => {
+  return (params: { hooks?: BridgeHooks }) => {
     return {
       __APP_VERSION__,
       render(info: RenderFnParams) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const app = Vue.createApp(bridgeInfo.rootComponent);
         rootMap.set(info.dom, app);
+        // bridgeInfo?.renderLifecycle?.(info);
+        const beforeBridgeRender =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeRender) ||
+          params?.hooks?.beforeBridgeRender;
+
+        // you can return a props object through beforeBridgeRender to pass additional props parameters
+        const beforeBridgeRenderRes =
+          beforeBridgeRender && beforeBridgeRender(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 +70,26 @@ export function createBridgeComponent(bridgeInfo: any) {
           app.use(router);
           app.mount(info.dom);
         }
+
+        const afterBridgeRender =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
+          params?.hooks?.afterBridgeRender;
+        afterBridgeRender && afterBridgeRender(info);
       },
       destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info?.dom);
+
+        const beforeBridgeDestroy =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeDestroy) ||
+          params?.hooks?.beforeBridgeDestroy;
+        beforeBridgeDestroy && beforeBridgeDestroy(info);
+
         root?.unmount();
+        const afterBridgeDestroy =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
+          params?.hooks?.afterBridgeDestroy;
+        afterBridgeDestroy && afterBridgeDestroy(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',
@@ -18,6 +19,7 @@ export default defineComponent({
     const route = useRoute();
 
     const renderComponent = () => {
+      const host = getInstance();
       const providerReturn = props.providerInfo?.();
       providerInfoRef.value = providerReturn;
       const renderProps = {
@@ -30,6 +32,12 @@ export default defineComponent({
         `createRemoteComponent LazyComponent render >>>`,
         renderProps,
       );
+
+      if (host?.bridgeHook && host?.bridgeHook?.lifecycle?.beforeBridgeRender) {
+        host?.bridgeHook?.lifecycle?.beforeBridgeRender.emit({
+          ...renderProps,
+        });
+      }
       providerReturn.render(renderProps);
     };
 
@@ -57,11 +65,21 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
+      const host = getInstance();
       LoggerInstance.log(`createRemoteComponent LazyComponent destroy >>>`, {
         ...props,
       });
       watchStopHandle();
+
       (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
+      if (host?.bridgeHook && host?.bridgeHook?.lifecycle?.afterBridgeDestroy) {
+        host?.bridgeHook?.lifecycle?.afterBridgeDestroy.emit({
+          name: props.moduleName,
+          dom: rootRef.value,
+          basename: props.basename,
+          memoryRoute: props.memoryRoute,
+        });
+      }
     });
 
     return () => <div ref={rootRef}></div>;