Coach is an orchestration MFE to be used with legacy apps or those not directly implementing Webpack Module Federation. Coach handles pulling in the federated MFEs you are wanting to work with by wrapping them as common web components. No need to change or update your own implementation to directly handle federation.
Coach is active right now, as shown by the little coach icon barely visible in the top left of your screen. This demo is actually pulling in Nav as well as Notifications MFEs as you can see.
You can inspect the page and see usages of Coach's custom web component called "pme-federated" that is being used to pull in both Nav and Notifications.
You can still interact with these MFEs as well. For example, while Notifications is not directly visible, its still actually loaded. You can send a notification to the web component for display by dispatching a custom event in the console like below:
document.dispatchEvent(new CustomEvent('pme_sendNotification', {
detail: {
name: 'noteTest',
type: 'SUCCESS',
header: 'Hello From the Console!',
body: 'I just fired a notification using a generic custom event!',
displayType: 'SNACK',
delay: 3000
}
}))
The only thing each federated MFE needs to do in order to be utilized by Coach is create and expose a WebComponent wrapping component in their webpack federation configuration.
This component should provide event listeners for any actions it needs to listen to and also PropTypes for any exposed attributes it wants consumers to be able to set.
Then Coach can call up that exposed wrapper and further wrap it in its own web component shim to then be available to any framework. Just plug in Coach's web component and tell it what you want to load and also provide the props you want to set on that component.
This section is actually being wrapped by an Authorized MFE component pulled in via Coach. If you change the role requirement though, it will react and show an access restriction message.