how load dynamic components

[klemenoslaj]

Is your feature request related to a problem?

In a highly configurable environments we would need a dynamic way to tell Qwik where to import a component from. Potentially by providing an import string or better yet a URL to the required component.

Describe the solution you'd like

component$(async ({ name }) => {
  const config = await fetch('/config');
  const Component = await fetchComponent(config[name].url);

  return <Component />;
});

Describe alternatives you've considered

Instead of runtime dependency we could declare a map of import promises and use that. However that would require a rebuild and redeploy.

Additional context

I guess what I am wondering here is if something similar to Module Federation would be possible directly from Qwik.

[zanettin]

I like the idea 👍 Just about this line:

I guess what I am wondering here is if something similar to Module Federation would be possible directly from Qwik.

Qwik has containers which is similar to micro frontends. link to the docs: https://qwik.builder.io/docs/advanced/containers/#what-do-containers-solve quick intro by @manucorporat : https://www.youtube.com/watch?v=Mi7udzhcCDQ&t=1753s

[klemenoslaj]

I like the idea 👍 Just about this line:

I guess what I am wondering here is if something similar to Module Federation would be possible directly from Qwik.

Qwik has containers which is similar to micro frontends. link to the docs: https://qwik.builder.io/docs/advanced/containers/#what-do-containers-solve quick intro by @manucorporat : https://www.youtube.com/watch?v=Mi7udzhcCDQ&t=1753s

Yes I saw the containers section in docs, but had no time to decipher yet how to include containers into another container.

Module federation can be powerful because the federated apps can be configured at runtime - (e.g. configuration that does not live in code), which provides a great deal of flexibility. Is that possible with containers in qwik?

[zanettin]

I haven't worked with containers so far, so i can't tell you if they are nestable or not. but i just found a vite based method to enable module federation: https://github.com/originjs/vite-plugin-federation. maybe that would be something to dive into.

[klemenoslaj]

I haven't worked with containers so far, so i can't tell you if they are nestable or not. but i just found a vite based method to enable module federation: https://github.com/originjs/vite-plugin-federation. maybe that would be something to dive into.

Yes, there are good alternatives to Webpack reference implementation, here is another one:

• native federation

I was just thinking if the same thing could be achieved by Qwik out of the box. I'd try to migrate some larger projects in this case.

[gioboa]

Hi @klemenoslaj did you find a solution for this issue? can we close it?

[klemenoslaj]

Hi @gioboa, no, sadly I haven't found a way in my limited exposure and didn't return to it ever since. If there is a way feel free to point me to it and I'll document it with a comment and close the issue myself.

[gioboa]

Hi @gioboa, no, sadly I haven't found a way in my limited exposure and didn't return to it ever since. If there is a way feel free to point me to it and I'll document it with a comment and close the issue myself.

I found this example created by the amazing @PatrickJS and it's exactly what you are asking for.

[PatrickJS]

yeah what I have there is the solution of dynamically grab any component at runtime (the method I posted in that stackblitz is just like how webpack module federation works). we ideally want to make it easier in qwik. @klemenoslaj feel free to message me in the qwik discord and I can help you set it up so we can close this issue

I'm also working on example repo for these patterns https://github.com/PatrickJS/experiments-qwik-runtime-components/tree/main

[gioboa]

Thanks @PatrickJS 👏 @klemenoslaj I'm closing this issue for now, feel free to re-open it if it's still an issue for you.