Search code examples
javascriptreactjsfrp

How to make a HTML UI with a FRP rendering process extensible?

I'm building an app with a web UI based on HTML using a React-like library (specifically virtual-dom).

Now, I'd like this app to be extensible with plugins and naturally this includes the UI, but I'm wondering, what's the best way to allow such templates to be extended?

If it were just the DOM, it wouldn't matter as the DOM can be altered, so plugins could add their elements easily. But in this case there's a rendering process involved, which turns the updated data into a new dom tree and which would inadvertently revert any changes to the DOM. So, I think I need a way to modify the virtual dom, which it's conceived to be immutable. So, that's where I'm stuck.

Solution

  • The easiest way, as it transpired, was to use hooks that take element properties and children, so plugins can add their own rendered virtual trees and manipulate the properties.