Some Hiccup syntax for Respo

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.)

Nice! Might be worth saying a few words about what Respo is. Not everyone will be familiar with it.

Added :smile:

For Respo, it’s a tiny virtual DOM library built with pure ClojureScript. Read more at http://respo.site/