Support for Dynamic Remotes

[jzsplk]

Is your feature request related to a problem? Please describe.

For now we have to define the remotes in host at buildtime Is there a way that remotes can be defined dynamically at run time instead?

Describe the solution you'd like

Would like a solution for dynamic import remote component from an remote url at runtime, no need define the remote in the vite plugin conifg. like in wepack, can ref here: https://github.com/webpack/webpack/issues/11033 will this feature be in the roadmap?

Describe alternatives you've considered

Additional context

basicly same as issue https://github.com/originjs/vite-plugin-federation/issues/121

[flyfishzy]

Not supported yet, but contributions are welcome!

[T0miii]

Hello, thank you for you work.

Is there an example how the dynamic remotes are working? Is it similar to webpacks approach?

await __webpack_init_sharing__("default");
// TODO: load the script tag somehow. e. g. with a script loader
const container = window.application_a;
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const module = await container.get("./module");

[ruleeeer]

Hello, thank you for you work.

Is there an example how the dynamic remotes are working? Is it similar to webpacks approach?

await __webpack_init_sharing__("default");
// TODO: load the script tag somehow. e. g. with a script loader
const container = window.application_a;
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const module = await container.get("./module");

I have released version 1.1.5, you can check the readme and demo for usage

[T0miii]

Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right?

[ruleeeer]

Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right?

You can try to dynamically fetch a component or register a remote by adding the following code to the compiled code,Please note that the values of the parameters from , format etc. are adjusted according to the different configurations

// dynamic is your remote name
remotesMap['dynamic'] = {
    url: "http://localhost:5003/assets/remoteEntry.js",
    format: 'esm',
    from: 'vite'
}
const comp = await __federation_method_getRemote('dynamic', '. /Button');

Or you can refer to the previous issue https://github.com/originjs/vite-plugin-federation/issues/121#issuecomment-1024912006

[T0miii]

Very nice, this is what i was looking for, ill give it a spin and come back with feedback, thx a lot.

[philals]

Thanks

This test works for me:

   "@squad2": {
          external: `Promise.resolve(window.localStorage.setItem("address2","http://localhost:3002/assets/remoteEntry.js") || window.localStorage.getItem('address2'))`,
          externalType: "promise",
        },

[DileSoft]

It will be good if I can change remotesMap directly from code, if it will be attached to window object for example.

[T0miii]

Collaborator

i think with this solution you can change it in the code, but before resolveing your remote component, you would have to update the remoteMap, if i understand you correctly.

[DileSoft]

I want to use it on dev and prod both and in main code, don't manually edit generated code by plugin.

[DileSoft]

What I want exactly:

In React code made dynamic import of remote app and remote component, both names of app and component set from variables dynamically depend of props.

[DileSoft]

Maybe __federation_method_getRemote and remotesMap should be attached to window and could be accesses from anywhere.

[T0miii]

Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right?

You can try to dynamically fetch a component or register a remote by adding the following code to the compiled code,Please note that the values of the parameters from , format etc. are adjusted according to the different configurations

// dynamic is your remote name
remotesMap['dynamic'] = {
    url: "http://localhost:5003/assets/remoteEntry.js",
    format: 'esm',
    from: 'vite'
}
const comp = await __federation_method_getRemote('dynamic', '. /Button');

Or you can refer to the previous issue #121 (comment)

@ruleeeer i see that the https://github.com/originjs/vite-plugin-federation/blob/2ea723884914d63d8dc2c33f5b43c1fe03ec7191/packages/lib/src/prod/remote-production.ts#L146

is exported, but when using it in the code its undefined, do we need to import someting else first? @DileSoft did you had any success with this?

[iconag-bbasmer]

I have setup an example for loading components completely dynamic, reading which components to load from a .json file. The only issue there is: There seems to be some kind of race condition for loading multiple components when it comes to Hooks. If I only add one component to load in the json file, then everything works fine. If I have multiple, like in the example, the components that use React functionality like Hooks fail loading with an error message telling that Hooks functionality does not exist (see vapp1 in the example).

Repo with example: https://github.com/iconag-bbasmer/vite-module-federation-test

[SepVeneto]

Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right?

You can try to dynamically fetch a component or register a remote by adding the following code to the compiled code,Please note that the values of the parameters from , format etc. are adjusted according to the different configurations

// dynamic is your remote name
remotesMap['dynamic'] = {
    url: "http://localhost:5003/assets/remoteEntry.js",
    format: 'esm',
    from: 'vite'
}
const comp = await __federation_method_getRemote('dynamic', '. /Button');

Or you can refer to the previous issue #121 (comment)

@ruleeeer i see that the

https://github.com/originjs/vite-plugin-federation/blob/2ea723884914d63d8dc2c33f5b43c1fe03ec7191/packages/lib/src/prod/remote-production.ts#L146

is exported, but when using it in the code its undefined, do we need to import someting else first? @DileSoft did you had any success with this?

@T0miii maybe need to add the fields remotes in plugin options, even if there is no static remote components. like this, packages/examples/vue3-demo-esm

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        // host: "192.168.56.1",
        // port: 5100
    },
    cacheDir: 'node_modules/.cacheDir',
    plugins: [
        vue(),
        federation({
            name: 'layout',
            filename: 'remoteEntry.js',
+           remotes: {} ,
-           remotes: {
-               home: {
-                   external: `Promise.resolve('http://localhost:5001/assets/remoteEntry.js')`,
-                   externalType: "promise"
-               },
-               'common-lib': {
-                   external:`new Promise(resolve=>resolve('http://localhost:5002/assets/remoteEntry.js'))`,
-                   externalType:"promise"
-               },
-               'css-modules': 'http://localhost:5003/assets/remoteEntry.js'
-           },
            shared: {
                vue:{
                    // This is an invalid configuration, because the generate attribute is not supported on the host side
                },
                pinia:{
                }
            }
        })
    ],
    build: {
        target: 'esnext',
        minify: false,
        cssCodeSplit: true,
        rollupOptions: {
            output: {
                minifyInternalExports: false
            }
        }
    }
})