rum

Dallas Surewood 2022-10-27T17:54:22.309749Z

The examples for hydration with rum involve just rendering an entire react component to document.body. But I'm having trouble hydrating in just a part of an html page. Say I want to render a component to a home.html page and then hydrate.

(render-file
 "home.html"
 {:component-to-render (rum/render-html header)})
Then I include it on the page.
<div id="component-root">
    a {{ component-to-render }}
</div>
Unfortunately that will just render a literal string, so I cant hydrate it from there. I would expect to be able to do this in the clojurescript
(rum/hydrate header (.getElementById js/document "component-root"))
Is there no way to do this kind of partial hydration on a plain html page?

Dallas Surewood 2022-10-27T18:01:23.256139Z

I was able to solve this with the safe filter in selmer.

<div id="component-root">
    a {{ component-to-render|safe }}
</div>

Niki 2022-10-27T20:36:36.395979Z

render-html will give you a string that you can hydrate