search

lambdaisland / ornament

Clojure Styled Components
Mozilla Public License 2.0
121 stars 13 forks source link

How to use defstyled component in hiccup context? #10

Closed GetBitOutdoors closed 2 years ago

GetBitOutdoors commented 2 years ago

Trying to follow the first example: (o/defstyled freebies-link :a {:font-size "1rem" :color "#cff9cf" :text-decoration "underline"})

How do I invoke styled component to render html?

(hiccup.core/html [freebies-link {:href "/xx"} "Freebies"]) Returns error:

Execution error (IllegalArgumentException) at hiccup.compiler/normalize-element (compiler.clj:59). myns__freebies_link is not a valid element name.

If I use a keyword as the component name, like regular hiccup html, I don't get the component data: (hiccup.core/html [:freebies-link {:href "/xx"} "Freebies"]) => "<freebies-link href=\"/xx\">Freebies</freebies-link>"

I would like the option to define and use simple hiccup components, with style rules (declared with style tokens) rendered inline (to start , then later/maybe expand code to use more complex styling, rendering css rules separately). Is this possible?

It seems like I could approximate this by taking the tag and rules functions, and re-assembling the html tag as a function, instead of hiccup vector syntax. But that sounds like I am missing something?

Thanks

plexus commented 2 years ago

Use a hiccup implementation that understands components. Reagent and lambdaisland.hiccup are two that I know of. (we should really document this in the README)

plexus commented 2 years ago

I should also add that if you can always just call the component as a function, this will work in any hiccup implementation. Using the square brackets makes a difference in a react/reagent context, but on the backend it's just sugar.

GetBitOutdoors commented 2 years ago

Thanks! I didn't know that about using it as a function.

I started using lambdaisland.hiccup, which I also did not know about, for compatability with Ornament, but also to explore added features like fragments. In a previous project I had switched to Rum just to get style-maps. So it's nice to have have this option.