@module-federation/bridge-vue3 0.0.0-next-20240923065315 → 0.0.0-next-20240923073245

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/bridge-vue3",
   "author": "zhouxiao <codingzx@gmail.com>",
-  "version": "0.0.0-next-20240923065315",
+  "version": "0.0.0-next-20240923073245",
   "publishConfig": {
     "access": "public"
   },
@@ -24,10 +24,10 @@
   "peerDependencies": {
     "vue": "=3",
     "vue-router": "=3",
-    "@module-federation/runtime": "0.0.0-next-20240923065315"
+    "@module-federation/runtime": "0.0.0-next-20240923073245"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.0.0-next-20240923065315"
+    "@module-federation/bridge-shared": "0.0.0-next-20240923073245"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/create.ts

@@ -1,6 +1,5 @@
 import { defineAsyncComponent, h } from 'vue';
 import { useRoute } from 'vue-router';
-
 import RemoteApp from './remoteApp.jsx';
 import { LoggerInstance } from './utils.js';
 

package/src/index.ts

@@ -1,4 +1,3 @@
 export { createBridgeComponent } from './provider';
 export { createRemoteComponent } from './create';
 export type { RenderFnParams } from '@module-federation/bridge-shared';
-export type { BridgeRuntimePlugin } from './lifecycle';

package/src/lifecycle.ts

@@ -1,18 +1,29 @@
 import { getInstance } from '@module-federation/runtime';
 import helper from '@module-federation/runtime/helpers';
 
-const registerPlugin = helper.global.registerPlugins;
-const pluginHelper = helper.global.pluginHelper;
-const host = getInstance()!;
-const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
-  beforeBridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], void>(),
-});
+function registerBridgeLifeCycle() {
+  const { registerPlugins, pluginHelper } = helper.global;
+  const host = getInstance();
+  const pluginSystem = new pluginHelper.PluginSystem({
+    beforeBridgeRender: new pluginHelper.SyncHook<
+      [Record<string, any>],
+      void
+    >(),
+    beforeBridgeDestroy: new pluginHelper.SyncHook<
+      [Record<string, any>],
+      void
+    >(),
+  });
 
-registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(
-  host?.options?.plugins,
-  [pluginSystem],
-);
+  if (host) {
+    registerPlugins<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+      host?.options?.plugins,
+      [pluginSystem],
+    );
+    return pluginSystem;
+  }
 
-export default pluginSystem;
-export type BridgeRuntimePlugin = typeof pluginSystem;
+  return null;
+}
+
+export { registerBridgeLifeCycle };

package/src/remoteApp.tsx

@@ -1,8 +1,7 @@
 import { ref, onMounted, onBeforeUnmount, watch, defineComponent } from 'vue';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { useRoute } from 'vue-router';
-
-import hook from './lifecycle';
+import { registerBridgeLifeCycle } from './lifecycle';
 import { LoggerInstance } from './utils';
 
 export default defineComponent({
@@ -18,6 +17,7 @@ export default defineComponent({
     const providerInfoRef = ref(null);
     const pathname = ref('');
     const route = useRoute();
+    const bridgeHook = registerBridgeLifeCycle();
 
     const renderComponent = () => {
       const providerReturn = props.providerInfo?.();
@@ -32,9 +32,12 @@ export default defineComponent({
         `createRemoteComponent LazyComponent render >>>`,
         renderProps,
       );
-      hook.lifecycle.beforeBridgeRender.emit({
-        ...renderProps,
-      });
+
+      if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeRender) {
+        bridgeHook?.lifecycle?.beforeBridgeRender.emit({
+          ...renderProps,
+        });
+      }
       providerReturn.render(renderProps);
     };
 
@@ -66,12 +69,15 @@ export default defineComponent({
         ...props,
       });
       watchStopHandle();
-      hook.lifecycle.beforeBridgeDestroy.emit({
-        name: props.moduleName,
-        dom: rootRef.value,
-        basename: props.basename,
-        memoryRoute: props.memoryRoute,
-      });
+      if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeRender) {
+        bridgeHook?.lifecycle?.beforeBridgeDestroy.emit({
+          name: props.moduleName,
+          dom: rootRef.value,
+          basename: props.basename,
+          memoryRoute: props.memoryRoute,
+        });
+      }
+
       (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
     });