feat: slot component for dynamic plugins

[johnvente]

Description

Following this POC pluggable approach to importing plugins, we've created a reusable component that will dynamically import a module wherever it is called. The main idea is to be able to change the plugins with this mechanism, which means that instead of modifying the micro-frontend beforehand, we could change the plugin in isolation.

---

Using pluggable component with BulkEmailForm component

---

The alert is a plugin as well

How does it work?

Any component can be wrapped with the pluggable component. For instance:

<PluggableComponent id="input-form" as="communications-app-card">
    <h1>Any component as default</h1>
</PluggableComponent>

The prop as indicates where is the plugin allocated. In this case, the component will be pointing to this route: node_modules/@openedx-plugins/communications-app-card.

If the plugin was installed as a dependency, it will render the component that you have pointing to that one.

If the plugin isn't installed, it will return its children. In this case, it's this:

<h1>Any component as default</h1>

Why are we doing this?

This means that the plugin doesn't have to be installed if I'm making a feature. It's something that we can improve in the future. That way, another developer can replace that component and make more changes. This approach allows us to wrap as many components as we can, making most of the features pluggable and adaptable to various use cases. The component can be rendered without children as well, which means it won't return anything if the plugin is not installed.

How to test it

Check it out this branch and follow these steps:

 cd plugins/communications-app/CheckBoxForm && npm link

 cd plugins/communications-app/InputForm && npm link

 nvm use && npm install

Then you can run the mfe with npm start

If you want to create another plugin you can do it in the folder plugins/communications-app/ with the structure of the other
plugins

[codecov-commenter]

Codecov Report

Attention: 13 lines in your changes are missing coverage. Please review.

Comparison is base (ff90033) 83.06% compared to head (ed8a010) 83.31%.
Report is 1 commits behind head on master.

Files	Patch %	Lines
...bulk-email-form/BuildEmailFormExtensible/index.jsx	57.89%	8 Missing ⚠️
src/components/PluggableComponent/index.jsx	90.32%	3 Missing ⚠️
...l-form/BuildEmailFormExtensible/context/reducer.js	85.71%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master       #5      +/-   ##
==========================================
+ Coverage   83.06%   83.31%   +0.24%     
==========================================
  Files          46       53       +7     
  Lines         685      773      +88     
  Branches      132      147      +15     
==========================================
+ Hits          569      644      +75     
- Misses        116      129      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[johnvente]

Thanks guys for the review @AuraAlba @01001110J @dcoa , now BulkEmailForm is full pluggable, I've changed it for BuildEmailFormExtensible

[01001110J]

Why not directly destructure here:

Suggested change

	const intl = useIntl();
	const { formatMessage } = useIntl();

Or is a standar for this kind of projects?

[dcoa]

It's not exactly a standard for all MFE (depending on the maintainer), but it's the common way to do it.

[johnvente]

Most of the MFE's use this structure principal because they use injectIntl to pass intl so I wanted to follow that way

[johnvente]

Hi there! thanks a lot for the help here. Those comments were really valuable I will continue with the PR that is pointing to the community which is this one

I will close this one, thank you again! @AuraAlba @dcoa @01001110J