Viewing an Om/Next app state atom

[pfernandez]

Is there a best way to view a non-devcards app-state atom? Watching your video, it looks like there was once a utility function called edn->html, but after an (admittedly brief) click through the source, I don't see it.

[bhauman]

(defonce my-atom (atom {}))

;; this watches and renders changes
(defcard my-atom-card my-atom)

There is also:

https://github.com/bhauman/devcards/blob/master/src/devcards/util/edn_renderer.cljs#L83

[pfernandez]

Thanks for the response; it looks like the html-edn function is what I'm after.

(def properties {:message "Hello world!"})

(defui MyComponent
       Object
       (render [this]
               (html-edn (om/props this))))

(def my-component (om/factory MyComponent))

(defcard my-component-view
         (my-component properties)
         properties
         {:inspect-data true})

In the above example, {:message "Hello world! } is displayed twice in the browser; once in my Om component and once because :inspect-data is set to true. If I change Hello world to Hello there, only the data rendered in html-edn is re-rendered to reflect the change.

I don't believe there's a way to defonce an atom to be used by om.next, because the app-state atom is abstracted away.

Anyway, thanks for devcards! Brillant idea.