Pre-inflation
If you want to inflate JSX before it's going to be used anywhere, you can do simply this
const jsx = <div />
inflator.inflate(jsx)
Then if inflated JSX is reused anywhere else, the inflated JSX would be already associated with your inflator. Meaning, it will not repeat inflation process again, it will reuse the same output.
inflator.inflate(jsx) === inflator.inflate(jsx) // true
This way you also ensure your structures are always preserved through out attaching.
const heading = (
<hgroup>
<h2>Title</h2>
<p>Description</p>
</div>
)
function Component1() {
return heading
}
function Component2() {
return heading
}
const componentView1 = inflator.inflate(<Component1 />)
const componentView2 = inflator.inflate(<Component2 />)
document.body.append(componentView1) // inflates `heading` for the first time.
document.body.append(componentView2) // moves `heading` to a new place, no extra inflation.