search

module-federation / module-federation-examples

Implementation examples of module federation , by the creators of module federation
https://module-federation.io/
MIT License
5.63k stars 1.75k forks source link

Module federation 2.0 with esbuild support (OR translating Native-foundation remoteEntry.json) #4258

Closed joon84 closed 1 week ago

joon84 commented 2 months ago

Will there be any support for esbuild (specifically for angular remote/ mfe) in module federation 2.0 in future? OR maybe the question should be, will there be any translation/conversation logic be ever made to handle remotes/mfes built with "native-foundation" ?? maybe both directions .. ??

If host/ shell side decides to use module-federation, then so far there is not so good package/ solution present for remotes/ mfes built with esbuild... Angular is leaning more towards esbuild, and native-foundation.. and its kind of blocking to use module-federation with native-federation or vice-versa...

ScriptedAlchemy commented 1 month ago

i was working on this and have a esbuild plugin, that mostly work via top level await and implements module federation runtime.

ScriptedAlchemy commented 1 month ago

Native Federation etc will have to adopt my runtime libraries. import maps is too limited and federation needs a runtime design to actually work. You can look at module-federation/core repo - theres an esbuild package which is in early stages and a esbuild sample

joon84 commented 1 month ago

i was working on this and have a esbuild plugin, that mostly work via top level await and implements module federation runtime.

thanks for the reply.

we guess you are talking about https://www.npmjs.com/package/@module-federation/esbuild ??

our angular remote exposed with esbuild through this plugin generates remoteEntry.js, seems quite some importMaps stuffs there. our react host using module fed 2.0 is not able to parse this, due to some undefined objects related to importMaps from remote side.. we are really looking forward for this, hope there will be prod ready versions from you soon on this ...

//bhaskar

ScriptedAlchemy commented 1 month ago

ahh interop between others who are webpack/rspack built does not work yet - due to esm etc and lack of build, i have to construct some informaiton at runtime, such as the export map of the modules so i can generate strings of these to inject on the fly. This is something that the other bundlers dont need to do / dont expose their own for this type of thing. More contribution is needed on the esbuild side, similar to what happened to the module-federation/vite plugin.

If anyone has a good demo repo thats real world, i can work with that, since i dont have any use cases or userbase who has really come forwards on it :P and i dont really use angular either so its been less of a priority.

Theres a few approaches that can be taken as well. For instance one could either wrap everything like i do in the plugin, wheere all imports resolve to virtual modules etc. Or we could just make it all externals etc, use import map for everything and use federation+runtime plugin to essentially write the import map as a blob during await init() in the host application. To federation manages the import map at runtime and writes strings/blobs to the import map that are esm modules that export await loadRemote or loadShare from federation again, and skip the linking and resolve phases during build alltogether etc.