As we all know, plugins need the ability to alter pages on foreman core.
To achieve that, developers mostly use
deface, which allows you to change DOM dynamically.
deface works well with rails views, we should avoid using it on react components.
It changes the real DOM on server rendering, while a react component uses the virtual DOM,
and changes in the real DOM won’t affect the virtual DOM.
Recently, the UI team gather up with some ideas.
We took inspiration from react-slot-fill, which has some similarity to
Slot - Fill
<Slot> - Extenable point in a component - used by foreman core.
<Fill>- Fils a slot with a JSX content - used by plugins.
A slot will use an internal registry, that globally manages the extendable points.
A fill component will have two filling options:
- Replacing - replace the entire slot’s content.
- Appending - append content to a slot, therefore plugins can add content to the same slot.
A plugin appends a button in the
Notification Drawer's footer:
<NotificationDrawer> #content... <Slot id='notification-drawer-footer' appendable /> </NotificationDrawer>
<Fill target='notification-drawer-footer`> <Button> Appended button ! </Button> </Fill>
This architecture allows foreman core to be more opinionated with extending pages.
Which personally I guess it is a great advantage from core perspective.
However it does reduce plugins ability to do whatever they want on existing pages / components,
therefore it would be a challenge.