gistfile1.clj

(ns om-tutorial.core
  (:require [goog.dom :as gdom]
            [om.next :as om :refer-macros [defui]]
            [om.dom :as dom]))

(enable-console-print!)

;;;; Initial (denormalized) data

(def initial-state
  {:nodes [{:name "r/ui"
            :title "UI Requirements"
            :children [{:name "r/ui/red-button"}
                       {:name "r/ui/green-button"}]
            :parent nil}
           {:name "r/ui/red-button"
            :title "There is a red button"
            :children [{:name "r/ui/red-button/big"}
                       {:name "r/ui/red-button/pressable"}]
            :parent {:name "r/ui"}}
           {:name "r/ui/red-button/big"
            :title "The red button is big"
            :children []
            :parent {:name "r/ui/red-button"}}
           {:name "r/ui/red-button/pressable"
            :title "The red button can be pressed"
            :children []
            :parent {:name "r/ui/red-button"}}
           {:name "r/ui/green-button"
            :title "There is a green button"
            :children []
            :parent {:name "r/ui"}}]})

;;;; Reconciler and parser

(defmulti read om/dispatch)

(defmulti mutate om/dispatch)

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

(def reconciler
  (om/reconciler {:state initial-state
                  :parser parser}))

;;;; UI

(defui Parent
  static om/Ident
  (ident [this props]
    [:node (:name props)])
  static om/IQuery
  (query [this]
    [:name :title]))

(defui Node
  static om/Ident
  (ident [this props]
    [:node (:name props)])
  static om/IQuery
  (query [this]
    [:name :title {:children '...} {:parent (om/get-query Parent)}]))

(defui Root
  static om/IQuery
  (query [this]
    [{:nodes (om/get-query Node)}])
  Object)

(om/add-root! reconciler
              Root
              (gdom/getElement "app"))


;;;; Normalized data - all good!

om-tutorial.core=> (cljs.pprint/pprint @reconciler)
{:nodes
 [[:node "r/ui"]
  [:node "r/ui/red-button"]
  [:node "r/ui/red-button/big"]
  [:node "r/ui/red-button/pressable"]
  [:node "r/ui/green-button"]],
 :node
 {"r/ui/red-button"
  {:name "r/ui/red-button",
   :title "There is a red button",
   :children
   [[:node "r/ui/red-button/big"] [:node "r/ui/red-button/pressable"]],
   :parent [:node "r/ui"]},
  "r/ui/green-button"
  {:name "r/ui/green-button",
   :title "There is a green button",
   :children [],
   :parent [:node "r/ui"]},
  "r/ui/red-button/big"
  {:name "r/ui/red-button/big",
   :title "The red button is big",
   :children [],
   :parent [:node "r/ui/red-button"]},
  "r/ui/red-button/pressable"
  {:name "r/ui/red-button/pressable",
   :title "The red button can be pressed",
   :children [],
   :parent [:node "r/ui/red-button"]},
  "r/ui"
  {:name "r/ui",
   :title "UI Requirements",
   :children [[:node "r/ui/red-button"] [:node "r/ui/green-button"]],
   :parent nil}}}