Hiccup in pure Clojure
io.github.escherize/huff {:mvn/version "0.1.0"}
(require '[huff.core :as h])- Style maps
[:. {:style {:font-size 30}}]🎨 - Use functions like components 🪢
- HTML-encoded by default ⛓️
- Parse tags in any order 🔀
:div#id.cor:div.c#idboth work (not the case forhiccup/hiccup)
- Runs on babashka (unlike
lambdaisland/hiccup) 👵 - Performance: 22-48% faster than hiccup/hiccup for runtime-generated HTML without pre-compilation 🏎
- Reagent style fragments to return multiple forms
[:<> [:li.a] [:li.b]]🙂 - Hiccup style fragments to return multiple forms
(list [:li.a] [:li.b])🙃 - Opt-in
:hiccup/raw-htmltag to partially bypass compilation 📦 - Tested against slightly modified hiccup 2 tests 🩺
- Extreme shorthand syntax
[:. {:color :red}]💥
Parse tags for id and class (in any order).
(h/html [:div.hello#world "!"])
;; => <div class="hello" id="world">!</div>(println (h/html [:div.left-aligned>p#user-parent>span {:id "user-name"} "Jason"]))
;=> <div class="left-aligned"><p id="user-parent"><span id="user-name">Jason</span></p></div>reagent-like fragment tags
(h/html [:<> [:div "d"] [:<> [:<> [:span "s"]]]])
;; =>
<div>d</div><span>s</span>This is useful for returning multiple elements from a function:
(defn twins [x] [:<>
[:div.a x]
[:div.b x]])
(h/html [:span.parent [twins "elements"]])
;;=>
<span class="parent">
<div class="a">elements</div>
<div class="b">elements</div>
</span>
Nest and combine them with lists to better convey intent to expand:
(h/html
[:ol
[:<> (for [x [1 2]]
[:li>p.green {:id (str "id-" x)} x])]])
;;=>
<ol>
<li>
<p id=\"id-1\" class=\"green\">1</p>
</li>
<li>
<p id=\"id-2\" class=\"green\">2</p>
</li>
</ol>
(h/html [:div {:style {:border "1px red solid"
:background-color "#ff00ff"}}])
;; => <div style="background-color:#ff00ff;border:1px red solid;"></div>
(h/html [:. {:style {:width 3}}])
;;=> <div style=\"width:3px;\"></div>This is nice if you want to e.g. produce markdown in the middle of your hiccup. note: This is disabled by default and must be manually enabled in the call to html or page,
(h/html [:hiccup/raw-html "<div>raw</div>"])
;; =Throws=> ":hiccup/raw-html is not allowed. Maybe you meant to set allow-raw to true?""
(h/html {:allow-raw true} [:hiccup/raw-html "<div>raw</div>"])
;;=> "<div>raw</div>"Write a function that returns hiccup, and call it from the first position of a vector, like in reagent.
(defn str-info [s]
[:div.info
[:span (apply str (reverse s))]
[:pre.len "Length: " (count s)]])
(h/html [str-info "hello"])
;; =>
<div class="info">
<span>olleh</span>
<pre class="len">Length: 5</pre>
</div>(h/html [:div {:style {:width (* 5 2)}}])
;;=> <div style="width:10px;"></div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent