Sharing front-end components between plugins

Many times when working on plugins we create a custom component and wrappers for re-use,
but usually, we don’t have time to later to move it into Foreman core :upside_down_face:

One idea I had is to use our componentRegistry to re-use those components between plugins and core.
This way we can actually see if the component is needed in other places before we put a lot of work in making it generic and move it to Foreman core.

one example I thought about for a POC is to use the great Katello’s PF4 Table wrapper

with registering it from Katello, e.g:

import componentRegistry from 'foremanReact/components/componentRegistry';

componentRegistry.register({
  name: 'KatelloTableWrapper',
  type: TableWrapper,
});

and then in a plugin, we could use it:

import componentRegistry from 'foremanReact/components/componentRegistry';

const TableWrapper = componentRegistry.getComponent('KatelloTableWrapper')

This way we could speed up development time and collaborate better across plugins where there are many frontend developers.

Any thoughts about this approach?
I will soon share a POC link here.
Thanks!

2 Likes

Technically it’s a nice solution, but from a design concept it’s a bit messy.
Basically it means that the plugin that uses the component has now an implicit dependency on the other plugin.
IMHO such dependencies should remain explicit.

The best solution is to move things to core,
but with time limitations, it’s better to have something than nothing in case the component isn’t going to be pushed to core in the near future

Can we have this only as a dev dependency? So it will be copied/stored in the recipient plugin (yes it’s duplication). If the component gets into core, the refactoring would be small (and we can try and make it the smallest possible), but if it isn’t we won’t prevent the plugin to be installed without the donor plugin.

Let’s say for example I want to use the awesome TableWrapper from Katello in discovery plugin. If this proposal gets in, there won’t be an option to use discovery without Katello, which is a rather big limitation.

2 Likes

Good point @Shimon_Shtein !
copy pasting code to a plugin is the last option I guess,
but sometimes you will need to copy the whole tree of components and helpers, and you won’t get the updates :frowning:

Another idea is to publish the plugin’s webpack directory code to npm and get the component from there.

npm is better, but you will have to be either very strict on versioning (hence the updates are not frequent in this case too) or you will have to trust the donor plugin maintainers to keep in mind compatibility (which is also not ideal, since the component’s main purpose is to server the donor plugin.