Optional Instrumentation for Om components

no-instrument.clj

(ns no-instrument.core
  (:require[om.core :as om :include-macros true]
           [om.dom :as dom :include-macros true]))

(enable-console-print!)

;; Instrumentation
;; ===============

(defn paint-component
  "Paints a component red"
  [c]
  (set! (-> c .getDOMNode .-style .-color)
        "rgba(255,0,0,1)"))

(defn wrap-did-update
  "Modifies the style of those components who were updated."
  [f]
  (fn [prev-props prev-state]
    (this-as this
             (paint-component this)
             (.call f this prev-props prev-state))))

(defn instrumentation
  "A function that changes the font to red to updated components"
  [f cursor m]
  (if (false? (get-in m [:opts :instrument?]))
    (om/build* f cursor m) ;; or :om/pass
    (om/build* f
               cursor
               (assoc m
                 :descriptor
                 (om/specify-state-methods!
                  (-> om/pure-methods
                      (update-in [:componentDidUpdate] wrap-did-update)
                      clj->js))))))

;; Application
;; ===========

(defonce app-state (atom {:count 0}))

(defn display-counter [data owner]
  (om/component
   (dom/h3 nil (:count data))))

(om/root
  (fn [data owner]
    (reify om/IRender
      (render [_]
        (dom/div nil
                 (om/build display-counter data )
                 (om/build display-counter data {:opts {:instrument? false}})
                 (dom/button #js {:onClick #(om/transact! data :count inc)}
                             "+1")))))
  app-state
  {:target (. js/document (getElementById "app"))
   :instrument instrumentation
   :opts {:instrument? false}})