defuiとCrate(Hiccup)メモ

Light Tableのlt.macros/defuiの使い方メモ。
defuiマクロはHTMLのElementを生成する関数を定義するものです。

lt.macros.clj抜粋

(defmacro defui [sym params hiccup & events]
  `(defn ~sym ~params
     (let [e# (crate.core/html ~hiccup)]
       (doseq [[ev# func#] (partition 2 ~(vec events))]
         (lt.util.dom/on e# ev# func#))
       e#)))

eventsの部分を使わないサンプル

defuiのparamsの部分では関数の引数を好きに定義できます。
defuiのhiccupの部分ではHTMLの要素をHiccupの書式で定義します。
実際にはCrate(A ClojureScript implementation of Hiccup)が使われています。

sample.cljs

(ns sample.core
  (:require [lt.util.dom :as dom])
  (:require-macros [lt.macros :refer [behavior defui]]))

(defui create-div [text]
  [:div [:div text]])

(.-innerHTML (create-div :sample))

(defui create-div2 [& [value]]
  [:div [:div {:style "color:red; margin: 5px"} value]])

(.-innerHTML (create-div2))
(.-innerHTML (create-div2 123))

innerHTMLの結果

"<div>:sample</div>"
"<div style=\"color:red; margin: 5px\"></div>"
"<div style=\"color:red; margin: 5px\">123</div>"

Hiccupの書式は[tag & body]または[tag attributes & body]です。
tagの部分はCSSセレクタのような書式でも書けます。[:div#email.selected.starred "..."]

eventsの部分を使うサンプル

eventsのev#とfunc#はJavaScriptのaddEventListenerの引数となる「イベントの種類」と「EventListenerの関数」であればよいようです。

sample2.cljs

(defui create-div3 []
  [:button [:div#abc [:span.def 987]]]
  :click (fn [event] (println event)))

(.-outerHTML (create-div3))

outerHTMLの結果

"<button><div id=\"abc\"><span class=\"def\">987</span></div></button>"

defuiの中から呼ばれるlt.util.com/onは以下のとおり

lt.util.dom.cljs抜粋

(defn ->ev [ev]
  (str (name ev)))

(defn on [elem ev cb]
  (.addEventListener elem (->ev ev) cb))