missionary.cljs

(require '[missionary.core :as mi])
(require '[goog.dom :as gdom])

(defn Text
  [{:keys [text] :as props}]
  (let [text-node (gdom/createTextNode)
        parent-div (gdom/createDom "span" nil text-node)]
    (mi/stream! (mi/ap (gdom/setTextContent text-node (clj->js (mi/?< text)))))
    (doseq [entry (dissoc props :text)]
      (mi/stream! (mi/ap (gdom/setProperties parent-div
                                             (clj->js {(key entry) (mi/?< (val entry))})))))
    parent-div))


(let [text (atom "")
      root-node (gdom/getElement "app-container")
      app (mi/reactor
           (gdom/replaceNode
            (gdom/createDom "div" (clj->js {:id "app-container"})
                            (Text {:text (mi/watch text)
                                   :style (mi/ap (if (even? (count (mi/?< (mi/watch text))))
                                                   "color:blue"
                                                   "color:red"))})
                            (gdom/createDom "input"
                                            (clj->js
                                             {:type "text"
                                              :oninput #(reset! text (.. % -target -value))})))
            root-node))]
  (app #(prn :success %)
       #(prn :crash %)))