Managed
This interface should be implemented by all components, that should appear at a specific, centralized node within the DOM tree. Think of modals or toasts for example: They appear as overlays above all other screen elements, which is realized by a central parent node in the DOM.
The render method has to be implemented in order to do the actual rendering of one component. This reduces the boilerplate code within the corresponding factory function(s):
open class MyManagedComponent: ManagedComponent {
override fun render(...) {
// some content rendering
}
}
// factory don't need to be an extension of `RenderContext`!
myComponent(
// most params omitted
build: MyManagedComponent.() -> Unit = {}
) {
MyComponent().apply(build).render(/* params */)
// ^^^^^^ ^^^^^^^^^^^^
// | no reference to parent's `RenderContext` is needed!
// | (in contrast to `Component<T>` interface!)
// |
// just start the rendering by one additional call!
}Content copied to clipboard
To start the centralized rendering process, consider using the init block of a companion object:
open class MyManagedComponent: ManagedComponent {
companion object {
init {
ManagedComponent.managedRenderContext("someId", Job()).apply {
// do the central rendering (often surrounded by some central store, that manages the child
// components added by the factory functions)
}
}
}
override fun render(...) {
// some content rendering
}
}Content copied to clipboard