diff --git a/README.md b/README.md index 633907f..c851168 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ A trace panel for re-frame. +[![Clojars Project](https://img.shields.io/clojars/v/day8.re-frame/trace.svg)](https://clojars.org/day8.re-frame/trace) + +**Status:** Alpha. + ## Motivation re-frame provides a data driven architecture, but we need to be able to inspect it. re-frame-trace takes inspiration from [redux-devtools](https://github.com/gaearon/redux-devtools), and provides several ways to visualise the structure and state of your re-frame application. @@ -12,7 +16,9 @@ re-frame provides a data driven architecture, but we need to be able to inspect If you are using leiningen, modify `project.clj` in the following ways. When puzzling over the various possible leiningen configurations, it's often helpful to look at a sample [project.clj](https://github.com/technomancy/leiningen/blob/stable/sample.project.clj). -- Add re-frame-trace as a dev dependency by placing `[day8.re-frame/trace "0.1.0"]` within `:profiles :dev :dependencies`. For example: +[![Clojars Project](https://img.shields.io/clojars/v/day8.re-frame/trace.svg)](https://clojars.org/day8.re-frame/trace) + +- Add re-frame-trace as a dev dependency by placing `[day8.re-frame/trace "VERSION"]` within `:profiles :dev :dependencies`. For example: ```cljs :profiles diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index f437544..906e733 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -2,6 +2,7 @@ (:require [day8.re-frame.trace.subvis :as subvis] [day8.re-frame.trace.styles :as styles] [day8.re-frame.trace.components :as components] + [day8.re-frame.trace.localstorage :as localstorage] [re-frame.trace :as trace :include-macros true] [cljs.pprint :as pprint] [clojure.string :as str] @@ -179,14 +180,22 @@ (.toFixed duration 1) " ms"]] (when show-row? [:tr {:key (str id "-details")} - [:td {:col-span 3} (with-out-str (pprint/pprint (dissoc tags :query-v :event :duration)))]])))))) + [:td {:col-span 3} (let [tag-str (with-out-str (pprint/pprint tags)) + string-size-limit 400] + (if (< string-size-limit (count tag-str)) + (str (subs tag-str 0 string-size-limit) " ...") + tag-str))]])))))) (defn render-trace-panel [] (let [filter-input (r/atom "") - filter-items (r/atom []) + filter-items (r/atom (localstorage/get "filter-items" [])) filter-type (r/atom :contains) input-error (r/atom false) trace-detail-expansions (r/atom {:show-all? false :overrides {}})] + (add-watch filter-items + :update-localstorage + (fn [_ _ _ new-state] + (localstorage/save! "filter-items" new-state))) (fn [] (let [showing-traces (if (= @filter-items []) @traces @@ -262,7 +271,7 @@ ;; Add clear button ;; Filter out different trace types (let [position (r/atom :right) - panel-width-ratio (r/atom 0.35) + panel-width-ratio (r/atom (localstorage/get "panel-width-ratio" 0.35)) showing? (r/atom false) dragging? (r/atom false) pin-to-bottom? (r/atom true) @@ -287,6 +296,11 @@ y (.-clientY e)] (.preventDefault e) (reset! panel-width-ratio (/ (- window-width x) window-width)))))] + + (add-watch panel-width-ratio + :update-panel-width-ratio + (fn [_ _ _ new-state] + (localstorage/save! "panel-width-ratio" new-state))) (r/create-class {:component-will-mount (fn [] (js/window.addEventListener "keydown" handle-keys) diff --git a/src/day8/re_frame/trace/localstorage.cljs b/src/day8/re_frame/trace/localstorage.cljs new file mode 100644 index 0000000..c1ff29c --- /dev/null +++ b/src/day8/re_frame/trace/localstorage.cljs @@ -0,0 +1,26 @@ +(ns day8.re-frame.trace.localstorage + (:require [goog.storage.Storage :as Storage] + [goog.storage.mechanism.HTML5LocalStorage :as html5localstore] + [cljs.reader :as reader]) + (:refer-clojure :exclude [get])) + +(def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.))) + +(defn- safe-key [key] + "Adds a unique prefix to keys to ensure they don't collide with the host application" + (str "day8.re-frame.trace." key)) + +(defn get + "Gets a re-frame-trace value from local storage." + ([key] + (get key nil)) + ([key not-found] + (let [value (.get storage (safe-key key))] + (if (undefined? value) + not-found + (reader/read-string value))))) + +(defn save! + "Saves a re-frame-trace value to local storage." + [key value] + (.set storage (safe-key key) (pr-str value)))