Fork me on GitHub
#react
<
2023-10-03
Aron Gabor08:10:35

what is a clojurescript react wrapper that can work well with react 18 including https://react.dev/reference/react-dom/server/renderToPipeableStream

Roman Liutikov08:10:25

UIx and Helix are the most popular ones

Aron Gabor08:10:22

I know, but sadly it's been a long time when I could find any correlation between popularity and corner cases being supported 🙂 I was hoping maybe someone can speak from experience. I managed to set up reagent but these inconsistencies make all the work dubious now.

Roman Liutikov08:10:25

both are thin wrappers around React, including support for v18, that's the only requirement needed to be able to use renderToPipeableStream

Roman Liutikov08:10:10

even if none of them wrap and expose renderToPipeableStream, it's still possible to use the function by requiring React directly and calling react/renderToPipeableStream

Aron Gabor08:10:59

of course, but then I am creating code I need to maintain myself, and it will be between two external dependencies so that's a bit too much risk for some applications that I just want to write and forget

Roman Liutikov09:10:20

well, it's literally a single function call that doesn't require any gluing code, I don't see how it can be risky

Roman Liutikov09:10:00

if renderToPipeableStream gets a breaking change in the future in React, the same will happen in the wrapping libraries

lilactown15:10:10

helix doesn't have any code that wraps react-dom/client or react-dom/server, and may not ever. it's expected that helix helps creating components and elements, and how you render them (dom server, dom client, react native, etc.) is your code

lilactown15:10:31

Roman's totally right that calling renderToPipeableStream is as low amount of coupling as you can get.

Aron15:01:36

I think we were talking at cross purposes, it's totally on me, not making myself clear. The idea would be so that I don't have to manually work out all the kinks related to renderToPipeableStream myself. for example, after 3 months now, I returned to this, and while the initial page load works just fine, I can hydrate, etc. Hot reload (with shadow-cljs) doesn't. I don't yet know what the problem is, but probably 3 more months until I have time again...

Aron17:01:11

like, i have this after page load

(when nil? @container (reset! root (createRoot @container)))
and still I get errors from react > Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

Aron17:01:24

at page load, so no hot-reload yet

Aron17:01:41

it just makes no sense why this is happening

Roman Liutikov17:01:57

Well, the code is wrong. Also the container should be defonce

Roman Liutikov17:01:43

I still don’t see how this could help with your issues.

Roman Liutikov17:01:36

Sorry, root creation should be defonced

Aron17:01:14

what do you mean how this could help 🙂

Aron17:01:31

and i realized that i need defonce, but that alone is not fixing this error

Aron17:01:42

thanks either way. I appreciate it