rum 2022-10-27 | Slack Archive

Dallas Surewood17:10:22

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 Surewood18:10:23

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

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

Niki20:10:36

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

2022-10-27

Channels