Simple step by step guide to try om.next with devcards.

This assumes you have leiningen installed if not, go to http://leiningen.org/ and follow the instructions there.

Let's start by creating the basic devcards environment using the devcards template:

lein new devcards omnom cd omnom lein figwheel

The output should look something like this:

Figwheel: Starting server at http://localhost:3449 Focusing on build ids: devcards Compiling "resources/public/js/compiled/omnom_devcards.js" from ["src"]... Successfully compiled "resources/public/js/compiled/omnom_devcards.js" in 15.476 seconds. Started Figwheel autobuilder Launching ClojureScript REPL for build: devcards Figwheel Controls: ... Switch REPL build focus: :cljs/quit ;; allows you to switch REPL to another build Docs: (doc function-name-here) Exit: Control+C or :cljs/quit Results: Stored in vars *1, *2, *3, *e holds last exception object Prompt will show when figwheel connects to your application To quit, type: :cljs/quit cljs.user=>

then after it does all it's thing open http://localhost:3449/cards.html

it should look something like this:

click the omnom.core link, you should see this:

now we have to install the latest development snapshot for om to try om.next, in some folder outside your project run:

git clone https://github.com/omcljs/om.git cd om lein install

Now let's add the dependencies to our project, open project.clj and make the :dependencies section look like this:

:dependencies [[ org.clojure/clojure "1.7.0" ] [ org.clojure/clojurescript "1.7.122" ] [ devcards "0.2.0-3" ] [ sablono "0.3.4" ] [ org.omcljs/om "0.9.0-SNAPSHOT" ] [ datascript "0.13.1" ]]

Now restart fighwheel (press Ctrl + d) and run it again:

lein figwheel

reload the page.

open the file src/omnom/core.cljs and replace its content with this:

( ns omnom.core ( :require [ cljs.test :refer-macros [ is async ]] [ goog.dom :as gdom ] [ om.next :as om :refer-macros [ defui ]] [ om.dom :as dom ] [ datascript.core :as d ] [ sablono.core :as sab :include-macros true ]) ( :require-macros [ devcards.core :as dc :refer [ defcard deftest ]])) ( enable-console-print! ) ( defcard first-card ( sab/html [ :div [ :h1 "This is your first devcard!" ]])) ( defui Hello Object ( render [ this ] ( dom/p nil ( -> this om/props :text )))) ( def hello ( om/factory Hello )) ( defcard simple-component "Test that Om Next component work as regular React components." ( hello { :text "Hello, world!" })) ( def p ( om/parser { :read ( fn [ _ _ _ ] { :quote true }) :mutate ( fn [ _ _ _ ] { :quote true })})) ( def r ( om/reconciler { :parser p :ui->ref ( fn [ c ] ( -> c om/props :id ))})) ( defui Binder Object ( componentDidMount [ this ] ( let [ indexes @ ( get-in ( -> this om/props :reconciler ) [ :config :indexer ])] ( om/update-state! this assoc :indexes indexes ))) ( render [ this ] ( binding [ om/*reconciler* ( -> this om/props :reconciler )] ( apply dom/div nil ( hello { :id 0 :text "Goodbye, world!" }) ( when-let [ indexes ( get-in ( om/get-state this ) [ :indexes :ref->components ])] [( dom/p nil ( pr-str indexes ))]))))) ( def binder ( om/factory Binder )) ( defcard basic-nested-component "Test that component nesting works" ( binder { :reconciler r })) ( deftest test-indexer "Test indexer" ( let [ idxr ( get-in r [ :config :indexer ])] ( is ( not ( nil? idxr )) "Indexer is not nil in the reconciler" ) ( is ( not ( nil? @ idxr )) "Indexer is IDeref" ))) ( defn main [] ;; conditionally start the app based on wether the #main-app-area ;; node is on the page ( if-let [ node ( .getElementById js/document "main-app-area" )] ( js/React.render ( sab/html [ :div "This is working" ]) node ))) ( main ) ;; remember to run lein figwheel and then browse to ;; http://localhost:3449/cards.html

it should display the om cards if not try reloading the page.

now just keep adding cards!