Fork me on GitHub
#reagent
<
2021-09-28
>
ouvasam12:09:28

Hi, I wonder if someone has used stitches (https://stitches.dev/) with reagent ? and how to use it correctly ? Many thanks

johanatan18:09:32

can anyone point me to where reagent interprets and renders hiccup? I have a need for rendering into a string and cannot use the hiccup library directly since it is not available for cljs.

johanatan18:09:44

i.e., as-element won't work for me since that renders into a live dom element

p-himik18:09:45

How would Reagent code help you here, given that it specifically creates React class/function components and, consequently, elements?

p-himik18:09:17

Oh, didn't know about that.

johanatan20:09:45

because elements are created from html ? also in the worst case, you could create a hidden element and call .innerHTML on it to extract text representation

p-himik20:09:05

> because elements are created from html ? Elements are created with createElement. HTML does not participate anywhere in the process.

johanatan20:09:31

well it's obvious that some parsing must go on

johanatan20:09:39

how do you think hiccup gets turned into elements?

johanatan20:09:14

anyway, seems like attribute maps are not supported?

johanatan20:09:18

utils.formatting=> (rdom/render-to-string [:div #js {:data-attributex "asdfasasdf"} "blah"])
#object[Error Invariant Violation: Objects are not valid as a React child (found: object with keys {data-attributex}). If you meant to render a collection of children, use an array instead.
    in div]

p-himik20:09:23

No need to be passive-aggressive. Reagent has a specific implementation that deals with a lot of Reagent- and React-specific things - all in reagent.impl.template. It will be useless to you to create raw HTML from it.

johanatan20:09:47

and yet lilactown provided the answer

johanatan20:09:54

so i wouldn't call that "useless"

p-himik20:09:03

I think that error is due to Reagent expecting a CLJS map as properties and not a JS object.

johanatan20:09:33

also, not passive aggression. serious questions. i think it helps to take text at face value when communicating that way

johanatan20:09:41

nah, i tried cljs map too

p-himik20:09:48

I meant that knowledge of where Reagent turns Hiccup into React elements tree is useless for your use-case. lilactown gave the info on how to make React render that React elements tree into HTML - a completely different things.

johanatan20:09:57

oops, perhaps you're right

johanatan20:09:07

rapid7.tcell.utils.formatting=> (rdom/render-to-string [:div {:data-attributex "asdfasasdf"} "blah"])
"<div data-attributex=\"asdfasasdf\" data-reactroot=\"\">blah</div>"

johanatan20:09:37

ok fair enough but for curiosity and personal knowledge sake, it would still be interesting to see where reagent does it

p-himik20:09:39

Sure, as I mentioned - all in reagent.impl.template.

johanatan20:09:52

gotcha. thanks!

johanatan20:09:33

any idea what the problem is with this one?

johanatan20:09:18

utils.formatting=> (rdom/render-to-string [:html [:element {:tag :span, :children [[:html [:string ""]] [:html [:element {:tag :b, :children [[:html [:string "asdfasdfasdfasdf"]]]}]]]}]])
#object[Error Invariant Violation: Objects are not valid as a React child (found: object with keys {tag, children}). If you meant to render a collection of children, use an array instead.
    in element
    in html]

johanatan20:09:03

needed a blank string after the attr maps

johanatan20:09:21

apparently: [:element attributes] is invalid.

johanatan20:09:39

needs [:element attributes child]

johanatan20:09:57

hmm actually no

johanatan20:09:05

that bypassed the error but didn't produce the expected result

johanatan20:09:17

utils.formatting=> (rdom/render-to-string [:html [:element {:tag :span, :children [[:html [:string ""]] [:html [:element {:tag :b, :children [[:html [:string "asdfasdfasdfasdf"]]]} ""]]]} ""]])
"<html data-reactroot=\"\"><element tag=\"span\"></element></html>"

lilactown20:09:16

I don't understand what you're trying to do

johanatan20:09:30

trying to render that hiccup into html

lilactown20:09:55

doesn't look like your hiccup is valid

johanatan20:09:11

hmm, yea i'm increasingly coming to that conclusion lol

lilactown20:09:15

or you're not calling render-to-string right

johanatan20:09:18

but this is in our app and seemingly works

johanatan20:09:45

nah i gave an example of a render-to-string called the same way with a simpler form which works

lilactown20:09:08

there are differences between https://github.com/weavejester/hiccup and reagent converts the vectors to HTML

johanatan20:09:53

right but i'm using reagent for both "sides" of this; i.e., this manual call and the ultimate one in our app that seems to render fine

lilactown20:09:56

this

[:html [:element {:tag :span, :children [[:html [:string ""]]
to me looks invalid I would expect only one html tag to be on a page, and element doesn't look right. I think this could be rewritten to
[:html [:span ""]]
in reagent

johanatan20:09:25

hmm yea i wonder how this ever worked at all now

johanatan20:09:35

i guess i have some digging to do

lilactown20:09:04

and that would render to a string something like <html><span></span></html>

johanatan20:09:35

i know what's going on

johanatan20:09:42

i'm using a spec to validate this input

johanatan20:09:50

and spec is "marking it up" with its own semantic

johanatan20:09:07

i.e., this is all coming from the :ret of an fdef :fn validator

johanatan20:09:19

i wonder if there is a way to get the unconformed value ?

lilactown20:09:32

not sure, not a spec expert

johanatan20:09:42

cool thx ! i'll ask over there then