Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(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}}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment