This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-09-28
Channels
- # announcements (92)
- # aws (7)
- # babashka (13)
- # beginners (42)
- # clj-kondo (9)
- # cljdoc (25)
- # clojure (156)
- # clojure-europe (19)
- # clojure-italy (3)
- # clojure-nl (3)
- # clojure-sg (1)
- # clojure-spec (3)
- # clojure-uk (6)
- # clojurescript (21)
- # copenhagen-clojurians (1)
- # cryogen (3)
- # cursive (9)
- # datahike (3)
- # datomic (5)
- # emacs (8)
- # graphql (4)
- # introduce-yourself (3)
- # jobs (2)
- # malli (1)
- # meander (8)
- # nrepl (3)
- # off-topic (8)
- # om-next (2)
- # pathom (11)
- # rdf (5)
- # reagent (59)
- # remote-jobs (4)
- # shadow-cljs (8)
- # tools-build (23)
- # vim (16)
Hi, I wonder if someone has used stitches (https://stitches.dev/) with reagent ? and how to use it correctly ? Many thanks
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.
How would Reagent code help you here, given that it specifically creates React class/function components and, consequently, elements?
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
> because elements are created from html ?
Elements are created with createElement
. HTML does not participate anywhere in the process.
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]
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.
I think that error is due to Reagent expecting a CLJS map as properties and not a JS object.
also, not passive aggression. serious questions. i think it helps to take text at face value when communicating that way
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.
rapid7.tcell.utils.formatting=> (rdom/render-to-string [:div {:data-attributex "asdfasasdf"} "blah"])
"<div data-attributex=\"asdfasasdf\" data-reactroot=\"\">blah</div>"
ok fair enough but for curiosity and personal knowledge sake, it would still be interesting to see where reagent does it
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]
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>"
nah i gave an example of a render-to-string
called the same way with a simpler form which works
there are differences between https://github.com/weavejester/hiccup and reagent converts the vectors to HTML
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