foo.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)

(defmethod read :nodes
  [{:keys [query state]} key _]
  (let [st @state
        result (om/db->tree query (get st key) st)]
    {:value result}))

(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)}]))

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

Run this using figwheel, then enter the following in a browser REPL:

(om.next/db->tree [:name :title {:children '...} {:parent [:name]}] (get @reconciler :nodes) @reconciler)