First pass at rendering jsonML to dom

project.clj

@@ -6,7 +6,8 @@
                  [org.clojure/clojurescript  "1.9.227"]
                  [reagent                    "0.6.0"]
                  [re-frame                   "0.9.0"]
-                 [cljsjs/d3 "4.2.2-0"]]
+                 [cljsjs/d3                  "4.2.2-0"]
+                 [binaryage/devtools         "0.9.4"]]
   :plugins [[lein-less "1.7.5"]]
   :deploy-repositories {"releases" :clojars
                         "snapshots" :clojars}

src/day8/re_frame/trace/app_state.cljs

@@ -1,10 +1,10 @@
 (ns day8.re-frame.trace.app-state
   (:require [reagent.core :as r]
             [clojure.string :as str]
+            [devtools.formatters.core :as cljs-devtools]
 
             [cljs.pprint :refer [pprint]]))
 
-
 (defn css-munge
   [string]
   (str/replace string #"\.|/" "-"))
@@ -30,13 +30,38 @@
     [:div  {:class (str (namespace-css "collection") " " (namespace-css (css-munge (type-string data))))}]
     [:span {:class (str (namespace-css "primative") " " (namespace-css (css-munge (type-string data))))} (str data)]))
 
+(defn jsonml-style
+  [style-map]
+  ; {:style (get style-map "style")}
+  {:style {:background "rgba(0,0,0,0.1)"}})
+
+(defn str->hiccup
+  [string]
+  ; (println string)
+  (cond (= string "span")  :span
+        (= string "style") :style
+        ; (= string "}")     nil
+        ; (= string "{")     nil
+        ; (= string " ")     nil
+        ; (= string ", ")    nil
+        :else              string))
+
+
 (defn crawl
   [data]
   (if (coll? data)
     (into (view data) (mapv crawl data))
     (view data)))
 
+(defn jsonml->hiccup
+  [data]
+  (cond
+    (vector? data) (mapv jsonml->hiccup data)
+    (map? data)    (jsonml-style data)
+    :else          (str->hiccup data)))
+
 (defn tab [data]
   [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
     [:div.panel-content-scrollable
-     (crawl data)]])
+      (jsonml->hiccup (js->clj (cljs-devtools/header-api-call data)))]])
+      ; (crawl data)]])