status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Inspect paths into app-db and enable before/after app-db

This commit is contained in:
Daniel Compton 2018-01-15 15:24:28 +13:00
parent a51a9037f5
commit 6894e291a5
4 changed files with 73 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -83,6 +83,19 @@ If you are using leiningen, modify `project.clj` in the following ways. When puz
- When the panel is closed, tracing is disabled.
## Use Cases
### app-db
* Inspect a portion of app-db's state with the path inspector, allowing you to focus on just the parts you care about.
* Reset app-db to before an event was run to run it again, instead of resetting the whole application
* Toggle app-db before and after states for running an event, to inspect UI changes.
### Timing
* Answer the question "Why is my app slow when it runs this event?"
* See whether time is spent in processing an event, or rendering the changes
## Troubleshooting
* Try a `lein clean`

2
src/day8/re_frame/trace.cljs
View File

@ -93,8 +93,6 @@
:operation (last (str/split name #" > "))}
(real-renderer c)))))
(set! reagent.impl.component/static-fns static-fns)
(set! reagent.impl.component/custom-wrapper

13
src/day8/re_frame/trace/events.cljs
View File

@ -328,18 +328,11 @@
(localstorage/save! "app-db-json-ml-expansions" new-paths)
new-paths)))
(rf/reg-event-db
:snapshot/save-snapshot
[(rf/path [:snapshot])]
(fn [snapshot _]
(assoc snapshot :current-snapshot @re-frame.db/app-db)))
(rf/reg-event-db
:snapshot/load-snapshot
[(rf/path [:snapshot])]
(fn [snapshot _]
(reset! re-frame.db/app-db (:current-snapshot snapshot))
snapshot))
(fn [db [_ new-db]]
(reset! re-frame.db/app-db new-db)
db))
;;;

110
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -28,7 +28,8 @@
(def *pods (r/atom [{:id (gensym) :path "[\"x\" \"y\"]" :open? true :diff? true}
{:id (gensym) :path "[:abc 123]" :open? true :diff? false}
{:id (gensym) :path "[:a :b :c]" :open? false :diff? true}
{:id (gensym) :path "[\"hello\"]" :open? false :diff? false}]))
{:id (gensym) :path "[\"hello\"]" :open? false :diff? false}
{:id (gensym) :path [:boot-state] :open? true :diff? true}]))
(defn add-pod []
(let [id (gensym)]
@ -52,54 +53,56 @@
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(defn panel-header []
[rc/h-box
:justify :between
:align :center
:margin (css-join common/gs-19s "0px")
:children [[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["+ path inspector"]]
:on-click #(add-pod)]
[rc/h-box
:align :center
:gap common/gs-7s
:height "48px"
:padding (css-join "0px" common/gs-12s)
:style {:background-color "#fafbfc"
:border "1px solid #e3e9ed"
:border-radius "3px"}
:children [[rc/label :label "reset app-db to:"]
[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["initial epoch state"]]
:on-click #(println "Clicked [initial state]")]
[rc/v-box
:width common/gs-81s
:align :center
:children [[rc/label
:style {:font-size "9px"}
:label "EVENT"]
[:img {:src (str "data:image/svg+xml;utf8," arrow-right)}]
[rc/label
:style {:font-size "9px"
:margin-top "-1px"}
:label "PROCESSING"]]]
[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["end epoch state"]]
:on-click #(println "Clicked [end state]")]]]]])
(let [app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before]) ]
[rc/h-box
:justify :between
:align :center
:margin (css-join common/gs-19s "0px")
:children [[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["+ path inspector"]]
:on-click #(add-pod)]
[rc/h-box
:align :center
:gap common/gs-7s
:height "48px"
:padding (css-join "0px" common/gs-12s)
:style {:background-color "#fafbfc"
:border "1px solid #e3e9ed"
:border-radius "3px"}
:children [[rc/label :label "reset app-db to:"]
[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["initial epoch state"]]
:on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-before])]
[rc/v-box
:width common/gs-81s
:align :center
:children [[rc/label
:style {:font-size "9px"}
:label "EVENT"]
[:img {:src (str "data:image/svg+xml;utf8," arrow-right)}]
[rc/label
:style {:font-size "9px"
:margin-top "-1px"}
:label "PROCESSING"]]]
[rc/button
:class "bm-muted-button"
:style {:width "129px"
:padding "0px"}
:label [rc/v-box
:align :center
:children ["end epoch state"]]
:on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-after])]]]]]))
(defn pod-header [{:keys [id path open? diff?]}]
[rc/h-box
@ -129,7 +132,7 @@
:padding (css-join "0px" common/gs-7s)
:width "-webkit-fill-available"} ;; This took a bit of finding!
:width "100%"
:model path
:model (pr-str path)
:on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
:on-submit #() ;; #(rf/dispatch [:app-db/add-path %])
:change-on-blur? false
@ -169,7 +172,8 @@
app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before])
[diff-before diff-after _] (when render-diff?
(clojure.data/diff @app-db-before @app-db-after))]
(clojure.data/diff (get-in @app-db-before path)
(get-in @app-db-after path)))]
[rc/v-box
:class "app-db-path"
:style {:border-bottom-left-radius "3px"
@ -183,7 +187,7 @@
:padding common/gs-7s
:margin (css-join pad-padding pad-padding "0px" pad-padding)}
:children [[components/simple-render
@app-db-after
(get-in @app-db-after path)
#_{:todos [1 2 3]}
#_(get-in @app-db path)
@ -240,7 +244,7 @@
:padding common/gs-7s
:margin (css-join "0px" pad-padding)}
:children [[components/simple-render
diff-before]]]))
diff-after]]]))
(when open?
[rc/gap-f :size pad-padding])]]))