Module federation support - stage 1

[GiladShoham]

This issue is working in progress, expect this description to be edited/updated

Full roadmap for module federation support can be found here - #4640

The main goal for this issue is to list and describe the main milestones we need to achieve in order to support module federation natively by bit.

The scope of this issue is about:

1. provide a way to consume any component exported to a bit scope via a federated module by setting the scope as a remote in the consumer MF plugin
2. Using the federated modules of the components within the overview and composition tabs of the workspace/scope UI.

outside of the scope of this task

1. Advanced handling of dependency detection/configuration/resolution via bit's dependency resolver aspect is out of scope.
2. A simple API/syntax for a user to consume another bit component from a bit component via MF with a fallback to consume it via npm is also out of scope

Those will be addressed later by different issues and PRs.

high-level task list

• initial POC of consuming bit component over MF by external ap - hardcoded POC of bundling a bit component alone in a capsule, serve it via external web server, consume it from another app and see it renders.
• change bit build system to support component level bundling with dynamic MF plugin config for component
  • support component level bundling strategy
  • create different webpack configs for the env itself (docs template for example) and components
  • extend bit's bundler target interface to support MF configs
  • dynamically configure the MF exposes plugin with the component data
• supporting dev server for everything
  • bundle the components on the fly
  • bundle the env on the fly
• serving component MF from the workspace
• serving env bundle from the workspace
• make an MF aspect
  • add a route that proxy the remote entry files of different components with different versions
  • register the mf task / component strategy from there
• create a new build task for bundling the env itself
• add a route to the scope server to serve the MF components
• add a route to the scope server to serve the env
• using the MF components by the env
  • support loading the MF component in the composition tab
  • knowing to separate the different compositions provided by the same file/MF
  • support loading the MF component in the docs tab
• handle versioning properly
  • Decide on a convention for versioning naming
  • support serving different versions from the scope server
  • support getting available versions from the scope server
• split the env bundle into 2 bundles:
  • bundle which contains the link files / module map (run any time)
  • bundle which contains the env code itself + harmony (run only when env was changed) - a task registered in the aspect env
• optimize shared dependencies in MF config
• add an API to mutate both component and env level webpack config
• optmize/cache the bundling process
  • do not re-bundle preview root if not needed
  • do not re-bundle components if not needed

[drkstr101]

/subscribe

[KutnerUri]

please make sure hot reloading is working, as it got broken by #4468

scenario 1 - editing component

1. create new project (bit init --harmony), create component (bit create react-component react01
2. bit start
3. go to the component composition
4. edit the component itself, the composition, or the docs.mdx file
   --> browser should update smoothly without refreshing or losing state

scenario 2 - renaming files

1. create new project (bit init --harmony), create component (bit create react-component react01
2. bit start
3. go to the component composition
4. rename or delete the composition / docs file.
   --> browser may flicker but should not show an error message

scenario 3 - editing core bit code (lower priority)

1. create new project (bit init --harmony), create component (bit create react-component react01
2. bd start --dev
3. go to the component composition
4. edit something in the core bit project, like text at compositions-app.tsx, workspace.tsx, etc
   --> browser should update smoothly without refreshing or losing state

could also try hot reloading for an extension outside of bit core files.

[itaymendel]

irrelevant item.
issue is resolved when using "bit apps". please see docs if you are looking to get mod-fed running with bit.