Added some words on Wiki https://github.com/Respo/respo/wiki/hiccup-style
For Respo, it’s a tiny virtual DOM library built with pure ClojureScript. Read more at http://respo.site/
Here’s an example for the new Hiccup style syntax:
(defn on-click [e d! m!]
(js/alert "Clicked!"))
(defcomp comp-piece []
[:div {:on {:click on-click}}
[:span "Click to alert!"]])
(defcomp comp-container [store]
(let [states (:states store)
state (:data states)]
[:div.app-container
[:header.app-header "This is header"]
; need to use parantheses for components
(comp-piece)
"Hiccup DSL demo"]))
Since 0.6.x
, this syntax has been built into Respo. It runs alongside with Respo’s standard syntax (div {} (span {}))
.
Actually it has many limits:
-
props
is defined in Respo’s style, not the same with Reagent - for components, you have to use
(comp-x)
. In Respo these’s code for maintaining states, which requires components to be Maps. - Vectors are slower compared to Macros
Check out implementations at https://github.com/Respo/respo/blob/master/src/respo/render/expand.cljs#L20 I’m not intended to make it really complicated though. (The code is generated from coir.edn
with Cumulo Editor, check it out before you want to modify the code.)