1.6.0 , hotkeys, history

Author: flexsurfer

README.md

@@ -10,50 +10,66 @@ https://flexsurfer.github.io/conduit-re-frisk-demo/
 
 ## Features
 
-### Current state for app-db and subscriptions sorted by keys
+### - Current state for app-db and subscriptions sorted by keys
 
+<details><summary>screenshot</summary>
 <img src="./img/feature-app-db.png" height="300">
+</details>
 
-### Watching keys from app-db
 
+### - Watching keys from app-db
+<details><summary>screenshot</summary>
 <img src="./img/feature-watch.png" height="300">
+</details>
 
-### Events with app-db difference for each event
+### - History for key in app-db
+<details><summary>screenshot</summary>
+<img src="./img/feature-history.png" height="300">
+</details>
 
+### - Events with app-db difference for each event
+<details><summary>screenshot</summary>
 <img src="./img/feature-event.png" height="300">
+</details>
 
 ### re-frame tracing (**Important**: trace should be [enabled](https://github.com/flexsurfer/re-frisk#enable-traces))
 
-#### Events and timeline (**Important**: with lots of events and high zoom might be slow, pause or clear events when working with timeline)
-
+#### - Events and timeline (**Important**: with lots of events and high zoom might be slow, pause or clear events when working with timeline)
+<details><summary>screenshot</summary>
 <img src="./img/feature-timeline.png" height="300">
+</details>
 
-#### Subscriptions
+#### - Subscriptions
 
 Render trace is supported only in the re-frisk-remote
-
+<details><summary>screenshot</summary>
 <img src="/img/feature-subs.png" height="300">
+</details>
 
-#### Views sorted by mount order with subscripions 
-
+#### - Views sorted by mount order with subscripions 
+<details><summary>screenshot</summary>
 <img src="/img/feature-views.png" height="300">
+</details>
 
-#### re-frame handlres statistics
-
+#### - re-frame handlres statistics
+<details><summary>screenshot</summary>
 <img src="/img/feature-stat.png" height="300">
+</details>
 
-#### Graph for an epoch
-
+#### - Graph for an epoch
+<details><summary>screenshot</summary>
 <img src="/img/feature-event-subs-graph.png" height="300">
+</details>
 
-#### Graph accumulated for an app life with weights (**Important**: with lots of subscriptions rendering might be slow!)
-
+#### - Graph accumulated for an app life with weights (**Important**: with lots of subscriptions rendering might be slow!)
+<details><summary>screenshot</summary>
 <img src="/img/feature-subs-app-graph.png" height="300">
+</details>
 
 ## Usage
 
-`[re-frisk "1.5.2"]` 
-`[re-frisk-remote "1.5.2"]` 
+`[re-frisk "1.6.0"]` 
+`[re-frisk-remote "1.6.0"]` 
 
 **Important**: Please note the following compatibility table:
 
@@ -70,11 +86,15 @@ re-frisk Version     | React Version     | Reagent Versions
 
 re-frisk will be embedded in the DOM of your application. So my suggestion is to use re-frisk-remote, it doesn't affect your application and has more features
 
-1. Add re-frisk as a dev dependency  `[re-frisk "1.5.2"]` 
+1. Add re-frisk as a dev dependency  `[re-frisk "1.6.0"]` 
 
 2. Enable re-frisk
 
-    `:preloads  [re-frisk.preload]`
+    `:preloads [re-frisk.preload]`
+
+    OR if you want a hidden UI and open tool with Ctrl+H
+
+    `:preloads [re-frisk.preload-hidden]`
 
     OR
 
@@ -87,14 +107,14 @@ re-frisk will be embedded in the DOM of your application. So my suggestion is to
 
 [![Clojars](https://img.shields.io/clojars/v/re-frisk-remote.svg)](https://clojars.org/re-frisk-remote)
 
-1. Add re-frisk as a dev dependency `[re-frisk-remote "1.5.2"]` 
+1. Add re-frisk as a dev dependency `[re-frisk-remote "1.6.0"]` 
 
 2. Enable re-frisk on default port (4567):
 
     `:preloads [re-frisk-remote.preload]`
 
     OR
-    
+
     `(:require [re-frisk-remote.core :as re-frisk-remote])`
 
     `(re-frisk-remote/enable)`
@@ -107,7 +127,7 @@ re-frisk will be embedded in the DOM of your application. So my suggestion is to
 
     add in `deps.edn`
 
-    `:aliases {:dev {:extra-deps {re-frisk-remote {:mvn/version "1.5.1"}}}}}`
+    `:aliases {:dev {:extra-deps {re-frisk-remote {:mvn/version "1.6.0"}}}}}`
 
     create `re_frisk.clj`
 
@@ -148,6 +168,13 @@ External window dimensions
 (re-frisk/enable {:ext_height 1000 :ext_width 1200})
 ```
 
+Hidden UI, you can open and close tool by Ctrl+H
+
+```clojure
+(re-frisk/enable {:hidden true})
+```
+
+
 If you don't need to watch events you can disable them
 
 ```clojure

dev/re_frisk/demo.cljs

@@ -3,6 +3,7 @@
             [reagent.dom :as rdom]
             [re-frame.core :as re-frame]
             [re-frisk.core :as re-frisk]
+            re-frisk.db
             [re-frisk-remote.core :as re-frisk-remote])
   (:require-macros [reagent.ratom :refer [reaction]]))
 
@@ -28,6 +29,7 @@
    :time-color "#f88"
    :clock?     true
    :form2-text "FORM 2"
+   :namespaced/keyword "test"
    :test {:test1 {:test2 {:test3 {:test4 {:test5 "DEMO"}}}}}})
 
 ;; -- Event Handlers ----------------------------------------------------------
@@ -101,6 +103,11 @@
  (fn [{db :db} _]
    {:db (assoc db :change-db 3)}))
 
+(re-frame/reg-event-fx
+ ::change-ns-keyword
+ (fn [{db :db} _]
+     {:db (assoc db :namespaced/keyword "test2")}))
+
 (re-frame/reg-event-fx
  ::do-nothing1
  (fn [_ _]
@@ -219,6 +226,9 @@
                           [:div {:style    {:background-color "#CCCCCC" :width 150 :margin-top 10}
                                  :on-click #(re-frame/dispatch [::change-form])}
                            "change form"]
+                          [:div {:style    {:background-color "#CCCCCC" :width 150 :margin-top 10}
+                                 :on-click #(re-frame/dispatch [::change-ns-keyword])}
+                           "change ns keyword"]
                           [:div {:style    {:background-color "#CCCCCC" :width 150 :margin-top 10}
                                  :on-click #(do (re-frame/dispatch [::change-db1])
                                                 (re-frame/dispatch [::change-db2])
@@ -231,7 +241,9 @@
                            "dispatch 3 events doing nothing"]]))}))
 
 (defn mount []
-  (rdom/render [simple-example] (js/document.getElementById "app")))
+  (rdom/render [simple-example] (js/document.getElementById "app"))
+  (swap! re-frisk.db/tool-state update :ext-win-opened? not)
+  (swap! re-frisk.db/tool-state update :ext-win-opened? not))
 
 (defn on-js-reload []
   (mount))

img/feature-history.png

@@ -16,6 +16,6 @@
   "dependencies": {
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "shadow-cljs": "^2.11.5"
+    "shadow-cljs": "^2.18.0"
   }
 }

package.json

@@ -1,12 +1,12 @@
-(defproject re-frisk-remote "1.5.2"
+(defproject re-frisk-remote "1.6.0"
   :description "Take full control of re-frame app"
   :url "https://github.com/flexsurfer/re-frisk"
   :license {:name "MIT"
             :url  "https://opensource.org/licenses/MIT"}
   :source-paths ["src" "dev" "re-frisk/src"]
-  :dependencies [[org.clojure/clojure "1.10.1"]
-                 [org.clojure/clojurescript "1.10.597"]
-                 [reagent "1.0.0"]
+  :dependencies [[org.clojure/clojure "1.11.1"]
+                 [org.clojure/clojurescript "1.11.4"]
+                 [reagent "1.1.1"]
                  [re-frame "1.2.0"]
                  ;; handlerForForeign
                  [com.cognitect/transit-cljs "0.8.256"]

project.clj

@@ -1,4 +1,4 @@
-(defproject re-frisk "1.5.2"
+(defproject re-frisk "1.6.0"
   :description "Take full control of re-frame app"
   :url "https://github.com/flexsurfer/re-frisk"
   :license {:name "MIT"

re-frisk/project.clj

@@ -0,0 +1,4 @@
+(ns re-frisk.preload-hidden
+  (:require [re-frisk.core :as re-frisk]))
+
+(re-frisk/enable {:hidden true})

re-frisk/src/re_frisk/preload_hidden.cljs

@@ -50,39 +50,44 @@
         [ui.views/main-view re-frame-data db/tool-state doc]]
        (.getElementById doc "re-frisk-debugger-div")))))
 
+(defn handle-toggle []
+  (let [left (or (utils/normalize-draggable (:x @drag/draggable))
+                 (- js/window.innerWidth 30))]
+    (when-not (utils/closed? left)
+      (swap! db/tool-state assoc :latest-left (- js/window.innerWidth left)))
+    (swap! drag/draggable assoc :x (- js/window.innerWidth
+                                      (if (utils/closed? left) (:latest-left @db/tool-state) 30)))))
+
+(defn handle-keydown [e]
+  (let [input-elements #{"INPUT" "SELECT" "TEXTAREA"}
+        input-focused? (contains? input-elements  (.-tagName (.-target e)))]
+    (when (and (not input-focused?)
+               (= (.-key e) "h")
+               (.-ctrlKey e))
+      (.preventDefault e)
+      (handle-toggle))))
+
+(defonce listener (js/window.addEventListener "keydown" handle-keydown))
+
 (defn inner-view [re-frame-data]
   (let [ext-opened? (reaction (:ext-win-opened? @db/tool-state))
-        latest-left (reaction (:latest-left @db/tool-state))]
+        hidden (get-in  @db/tool-state [:opts :hidden])]
     (fn []
       (when-not @ext-opened?
         (let [left (or (utils/normalize-draggable (:x @drag/draggable))
-                       (- js/window.innerWidth 30))
-              handle-toggle (fn [] 
-                              (when-not (utils/closed? left)
-                                     (swap! db/tool-state assoc :latest-left (- js/window.innerWidth left)))
-                              (swap! drag/draggable assoc :x (- js/window.innerWidth
-                                                                (if (utils/closed? left) @latest-left 30))))
-
-              handle-keydown (fn [e]
-                               (let [input-elements #{"INPUT" "SELECT" "TEXTAREA"}
-                                     input-focused? (contains? input-elements  (.-tagName (.-target e)))]
-                                 (when (and (not input-focused?)
-                                            (= (.-key e) "h")
-                                            (.-ctrlKey e))
-                                   (.preventDefault e)
-                                   (handle-toggle))))
-              _ (js/window.addEventListener "keydown" handle-keydown)]
+                       (- js/window.innerWidth 30))]
           [:div {:style (style/inner-view-container left (:offset @drag/draggable))}
-           [:div {:style {:display :flex :flex-direction :column :opacity 0.3}}
-            [:div {:style    style/external-button
-                   :on-click (open-debugger-window re-frame-data)}
-             "\u2197"]
-            [:div {:style {:display :flex :flex 1 :justify-content :center :flex-direction :column}}
-             [:div {:style    style/external-button
-                    :on-click handle-toggle}
-              (if (utils/closed? left) "\u2b60" "\u2b62")]
-             [:div {:style         style/dragg-button
-                    :on-mouse-down drag/mouse-down-handler}]]]
+           (when-not (and hidden (utils/closed? left))
+             [:div {:style {:display :flex :flex-direction :column :opacity 0.3}}
+              [:div {:style    style/external-button
+                     :on-click (open-debugger-window re-frame-data)}
+               "\u2197"]
+              [:div {:style {:display :flex :flex 1 :justify-content :center :flex-direction :column}}
+               [:div {:style    style/external-button
+                      :on-click handle-toggle}
+                (if (utils/closed? left) "\u2b60" "\u2b62")]
+               [:div {:style         style/dragg-button
+                      :on-mouse-down drag/mouse-down-handler}]]])
            (when-not (utils/closed? left)
              [:div {:style {:display :flex :flex 1 :width "100%" :height "100%"}}
               [:iframe {:id      "re-frisk-iframe" :src-doc external-hml/html-doc :width "100%" :height "100%"

re-frisk/src/re_frisk/ui.cljs

@@ -5,18 +5,12 @@
             [re-frisk.ui.components.components :as components]
             [re-frisk.inlined-deps.reagent.v1v0v0.reagent.core :as reagent]
             [re-frisk.clipboard :as clipboard]
-            cljs.pprint))
+            cljs.pprint
+            [re-frisk.utils :as utils]))
 
 ;;original idea Odin Hole Standal https://github.com/Odinodin/data-frisk-reagent
 (declare DataFrisk)
 
-(def debounce-pending (atom {}))
-(defn debounce [key delay f]
-  (let [old-timeout (get @debounce-pending key)
-        new-timeout (js/setTimeout f delay)]
-    (swap! debounce-pending assoc key new-timeout)
-    (js/clearTimeout old-timeout)))
-
 (defn ExpandButton [{:keys [expanded? path emit-fn]}]
   [:button {:style    {:border          0
                        :backgroundColor "transparent" :width "20px" :height "20px"}
@@ -276,7 +270,9 @@
 
 (defn apply-filter [state id value]
   (let [filter (filter-parser/parse value)]
-    (assoc-in state [:data-frisk id :filter] filter)))
+    (-> state
+        (assoc-in [:data-frisk id :filter] filter)
+        (assoc-in [:data-frisk id :filter-string] value))))
 
 (defn emit-fn-factory [state-atom id swappable filter-refs inp-val]
   (fn [event & args]
@@ -295,7 +291,7 @@
       :filter-change
       (do
         (reset! inp-val (first args))
-        (debounce :filter-change 400 #(swap! state-atom apply-filter id (first args))))
+        (utils/debounce :filter-change 400 #(swap! state-atom apply-filter id (first args))))
       :changed (let [[path value] args]
                  (if (seq path)
                    (swap! swappable assoc-in path value)