@module-federation/bridge-vue3 0.9.0 → 0.10.0

package/package.json

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

package/src/create.ts

@@ -9,6 +9,7 @@ export function createRemoteComponent(info: {
   loader: () => Promise<any>;
   export?: string;
   asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
+  rootAttrs?: Record<string, unknown>;
 }) {
   return defineAsyncComponent({
     __APP_VERSION__,
@@ -39,7 +40,7 @@ export function createRemoteComponent(info: {
 
       LoggerInstance.debug(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module, exportName, basename, route },
+        { moduleName, module, exportName, basename, route },
       );
 
       if (exportName in module && typeof exportFn === 'function') {
@@ -49,6 +50,7 @@ export function createRemoteComponent(info: {
               moduleName,
               providerInfo: exportFn,
               basename,
+              rootAttrs: info.rootAttrs,
             });
           },
         };

package/src/provider.ts

@@ -30,7 +30,7 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const { moduleName, dom, basename, memoryRoute, ...propsInfo } = info;
         const app = Vue.createApp(bridgeInfo.rootComponent, propsInfo);
-        rootMap.set(info.dom, app);
+        rootMap.set(dom, app);
 
         const beforeBridgeRenderRes =
           await instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info);
@@ -61,19 +61,19 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
             routes: bridgeOptions.router.getRoutes(),
           });
 
-          LoggerInstance.log(`createBridgeComponent render router info>>>`, {
-            name: info.moduleName,
+          LoggerInstance.debug(`createBridgeComponent render router info>>>`, {
+            moduleName,
             router,
           });
           // memory route Initializes the route
-          if (info.memoryRoute) {
-            await router.push(info.memoryRoute.entryPath);
+          if (memoryRoute) {
+            await router.push(memoryRoute.entryPath);
           }
 
           app.use(router);
         }
 
-        app.mount(info.dom);
+        app.mount(dom);
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info);
       },
       destroy(info: { dom: HTMLElement }) {

package/src/remoteApp.tsx

@@ -1,4 +1,11 @@
-import { ref, onMounted, onBeforeUnmount, watch, defineComponent } from 'vue';
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  defineComponent,
+  useAttrs,
+} from 'vue';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { useRoute } from 'vue-router';
 import { LoggerInstance } from './utils';
@@ -11,20 +18,24 @@ export default defineComponent({
     basename: String,
     memoryRoute: Object,
     providerInfo: Function,
+    rootAttrs: Object,
   },
+  inheritAttrs: false,
   setup(props) {
     const rootRef = ref(null);
     const providerInfoRef = ref(null);
     const pathname = ref('');
     const route = useRoute();
     const hostInstance = getInstance();
+    const componentAttrs = useAttrs();
 
-    const renderComponent = () => {
+    const renderComponent = async () => {
       const providerReturn = props.providerInfo?.();
       providerInfoRef.value = providerReturn;
 
       let renderProps = {
-        name: props.moduleName,
+        ...componentAttrs,
+        moduleName: props.moduleName,
         dom: rootRef.value,
         basename: props.basename,
         memoryRoute: props.memoryRoute,
@@ -35,9 +46,9 @@ export default defineComponent({
       );
 
       const beforeBridgeRenderRes =
-        hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+        (await hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
           renderProps,
-        ) || {};
+        )) || {};
 
       renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
       providerReturn.render(renderProps);
@@ -92,6 +103,6 @@ export default defineComponent({
       });
     });
 
-    return () => <div ref={rootRef}></div>;
+    return () => <div {...(props.rootAttrs || {})} ref={rootRef}></div>;
   },
 });