@module-federation/bridge-vue3 0.0.0-next-20241113082541 → 0.0.0-next-20241113115843

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/vue3-bridge"
   },
-  "version": "0.0.0-next-20241113082541",
+  "version": "0.0.0-next-20241113115843",
   "publishConfig": {
     "access": "public"
   },
@@ -29,12 +29,12 @@
   ],
   "peerDependencies": {
     "vue": "=3",
-    "vue-router": "=3",
-    "@module-federation/runtime": "0.0.0-next-20241113082541"
+    "vue-router": "=3"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.0.0-next-20241113082541",
-    "@module-federation/sdk": "0.0.0-next-20241113082541"
+    "@module-federation/bridge-shared": "0.0.0-next-20241113115843",
+    "@module-federation/sdk": "0.0.0-next-20241113115843",
+    "@module-federation/runtime": "0.0.0-next-20241113115843"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/provider.ts

@@ -2,37 +2,24 @@ 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;
 
-type DestroyParams = {
-  dom: HTMLElement;
-};
-
-type BridgeHooks = {
-  beforeBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-  afterBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-  beforeBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-  afterBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-};
-
 export function createBridgeComponent(bridgeInfo: any) {
   const rootMap = new Map();
-  return (params: { hooks?: BridgeHooks }) => {
+  const instance = getInstance();
+  return () => {
     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);
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
+
         const extraProps =
           beforeBridgeRenderRes &&
           typeof beforeBridgeRenderRes === 'object' &&
@@ -71,25 +58,15 @@ export function createBridgeComponent(bridgeInfo: any) {
           app.mount(info.dom);
         }
 
-        const afterBridgeRender =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeRender;
-        afterBridgeRender && afterBridgeRender(info);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(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);
-
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
         root?.unmount();
-        const afterBridgeDestroy =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeDestroy;
-        afterBridgeDestroy && afterBridgeDestroy(info);
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },
     };
   };

package/src/remoteApp.tsx

@@ -17,12 +17,13 @@ export default defineComponent({
     const providerInfoRef = ref(null);
     const pathname = ref('');
     const route = useRoute();
+    const hostInstance = getInstance();
 
     const renderComponent = () => {
-      const host = getInstance();
       const providerReturn = props.providerInfo?.();
       providerInfoRef.value = providerReturn;
-      const renderProps = {
+
+      let renderProps = {
         name: props.moduleName,
         dom: rootRef.value,
         basename: props.basename,
@@ -33,12 +34,14 @@ export default defineComponent({
         renderProps,
       );
 
-      if (host?.bridgeHook && host?.bridgeHook?.lifecycle?.beforeBridgeRender) {
-        host?.bridgeHook?.lifecycle?.beforeBridgeRender.emit({
-          ...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(
@@ -65,21 +68,25 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      const host = getInstance();
       LoggerInstance.log(`createRemoteComponent LazyComponent destroy >>>`, {
         ...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 });
-      if (host?.bridgeHook && host?.bridgeHook?.lifecycle?.afterBridgeDestroy) {
-        host?.bridgeHook?.lifecycle?.afterBridgeDestroy.emit({
-          name: props.moduleName,
-          dom: rootRef.value,
-          basename: props.basename,
-          memoryRoute: props.memoryRoute,
-        });
-      }
+      hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+      });
     });
 
     return () => <div ref={rootRef}></div>;