test_case.cljs

(ns franz.test-case
  (:require [devcards.core :as dc :refer-macros [defcard defcard-om-next]]
            [om.dom :as dom]
            [om.next :as om :refer-macros [defui]]))

(defui Comp1
  static om/IQuery
  (query [this]
         '[:key1])
  Object
  (render [this]
          (dom/div nil
           (dom/div nil
            (dom/button #js {:onClick (fn [e] (om/transact! this `[(test/weird) :test]))} "click me, this will display \"Reading test state 4 times in total!"))
           (dom/div nil
            (dom/button #js {:onClick (fn [e] (om/transact! this `[(test/weird)]))} "click me, this will display \"Reading test state 1 time in total!"))
           (:key1 (om/props this)))))

(def comp-1 (om/factory Comp1))

(defui Comp2
  static om/IQuery
  (query [this]
         '[:key2])
  Object
  (render [this]
          (dom/div nil (:key2 (om/props this)))))

(def comp-2 (om/factory Comp2))

(defui Test
  static om/IQuery
  (query [this]
         (let [query-1 (om/get-query Comp1)
               query-2 (om/get-query Comp2)]
           `[{:comp1 ~query-1}
             {:comp2 ~query-2}]))
  Object
  (render [this]
          (dom/div nil
           (comp-1 (:comp1 (om/props this)))
           (comp-2 (:comp2 (om/props this))))))

(def comp-test (om/factory Test))

(defui Root
  static om/IQuery
  (query [this]
         (let [query (om/get-query Test)]
           `[{:test ~query}]))
  Object
  (render [this]
          (comp-test (:test (om/props this)))))

(defmulti test-read om/dispatch)

(defmethod test-read :comp2 [{:keys [state parser query] :as env} key _]
  (let [st @state]
    {:value {:key2 (get-in st [:test :value])}}))

(defmethod test-read :comp1 [{:keys [state parser query] :as env} key _]
  (let [st @state]
    {:value {:key1 (get-in st [:test :value])}}))

(defmethod test-read :test [{:keys [state parser query target] :as env} key _]
  (println "Reading test state for target" target)
  {:value (parser env query)})

(defmulti test-mutate om/dispatch)

(defmethod test-mutate 'test/weird
  [{:keys [state]} _ {:keys [index]}]
  {:action (fn [] (swap! state assoc-in [:test :value] (rand-int 10)))})

(def test-parser (om/parser {:read test-read :mutate test-mutate}))

(def test-reconciler (om/reconciler {:state {:test {:value "value" :comp1 {:key1 "value1"} :comp2 {:key2 "value2"}}}
                                     :normalize false
                                     :parser test-parser}))


(defcard-om-next test
  Root
  test-reconciler)

To try out, install devcards and put this file in the cljs/franz/ folder.