Hello everyone,
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.
While deface works well with rails views, we should not use it on react components.
It changes the real DOM on server rendering, while a react component relay on the virtual DOM,
which means - changes in the real DOM won't affect the virtual DOM.
Recently, the UI team gather up with some ideas.
We took inspration from react-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.
For example, a plugin appends a button on the Notification Drawer's footer
<NotificationDrawer>
//content
<Slot id='notification-drawer-footer` appendable />
</NotificationDrawer>
Plugin:
<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,
so it would be a challenge.