feat(vue3-bridge): add support for passing parameters to defineAsyncComponent (#3268)

Author: Dell-it

.changeset/rude-berries-look.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/bridge-vue3': minor
+---
+
+Added the ability to pass parameters to `defineAsyncComponent`, which solves the following issues: 
+- Enables control over fallback components and their display parameters; 
+- Improves compatibility with Nuxt by allowing configuration of the `suspensible` parameter; 
+- Eliminates the package requirement to `Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"`.

apps/website-new/docs/en/practice/bridge/vue-bridge.mdx

@@ -19,18 +19,20 @@ import { PackageManagerTabs } from '@theme';
 
 ```tsx
 function createRemoteComponent<T, E extends keyof T>(
-  // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
-  lazyComponent: () => Promise<T>,
-  info?:
- {
+  options: {
+    // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
+    loader: () => Promise<T>,
     // Default is 'default', used to specify module export
-    export?: E;
+    export?: E,
+    // Parameters that will be passed to defineAsyncComponent
+    asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
   }
 ): (props: {
     basename?: string;
     memoryRoute?: { entryPath: string };
 }) => DefineComponent;
 
+
 function createBridgeComponent(bridgeInfo: {
   rootComponent: VueComponent;
 }): () => {
@@ -105,9 +107,7 @@ export default defineConfig({
 // ./src/router.ts
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent(() =>
-  loadRemote('remote1/export-app'),
-);
+const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app') });
 
 const router = createRouter({
   history: createWebHistory(),
@@ -132,6 +132,8 @@ function createRemoteComponent<T, E extends keyof T>(
     loader: () => Promise<T>,
     // Default is 'default', used to specify module export
     export?: E;
+    // Parameters that will be passed to defineAsyncComponent
+    asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
   }
 ): (props: {
     basename?: string;
@@ -141,7 +143,7 @@ function createRemoteComponent<T, E extends keyof T>(
 
 
 ```tsx
-const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'));
+const Remote1App = createRemoteComponent({ loader: () => loadRemote('remote1/export-app') });
 ```
 
 * `options`
@@ -151,14 +153,18 @@ const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'))
   * `export`
     * type: `string`
     * Purpose: Used to specify module export
+  * `asyncComponentOptions`
+    * type: `Omit<AsyncComponentOptions, 'loader'>`
+    * Purpose: Parameters that will be passed to defineAsyncComponent, except for the loader parameter
 ```tsx
 // remote
 export const provider = createBridgeComponent({
   rootComponent: App
 });
 
 // host
-const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'), {
+const Remote1App = createRemoteComponent({
+  loader: () => loadRemote('remote1/export-app'),
   export: 'provider'
 });
 ```
@@ -170,9 +176,7 @@ const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'),
 ```tsx
 import * as bridge from '@module-federation/bridge-vue3';
 
-const Remote2 = bridge.createRemoteComponent(() =>
-  loadRemote('remote1/export-app'),
-);
+const Remote2 = bridge.createRemoteComponent({ loader: () => loadRemote('remote1/export-app') });
 
 const router = createRouter({
   history: createWebHistory(),

packages/bridge/vue3-bridge/src/create.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent, h } from 'vue';
+import { type AsyncComponentOptions, defineAsyncComponent, h } from 'vue';
 import { useRoute } from 'vue-router';
 import RemoteApp from './remoteApp.jsx';
 import { LoggerInstance } from './utils.js';
@@ -8,9 +8,11 @@ declare const __APP_VERSION__: string;
 export function createRemoteComponent(info: {
   loader: () => Promise<any>;
   export?: string;
+  asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
 }) {
   return defineAsyncComponent({
     __APP_VERSION__,
+    ...info.asyncComponentOptions,
     //@ts-ignore
     loader: async () => {
       const route = useRoute();
@@ -45,7 +47,6 @@ export function createRemoteComponent(info: {
           render() {
             return h(RemoteApp, {
               moduleName,
-              ...info,
               providerInfo: exportFn,
               basename,
             });
@@ -54,13 +55,5 @@ export function createRemoteComponent(info: {
       }
       throw new Error('module not found');
     },
-    loadingComponent: {
-      template: '<div>Loading...</div>',
-    },
-    errorComponent: {
-      template: '<div>Error loading component</div>',
-    },
-    delay: 200,
-    timeout: 3000,
   });
 }