0.5.0

Author: flexsurfer

README.md

@@ -2,121 +2,134 @@
 
 Visualize [re-frame](https://github.com/Day8/re-frame) pattern data or [reagent](https://reagent-project.github.io) ratom data as a tree structure, watch re-frame events and export state.
 
-<img src="img/re-frisk-debugger.gif">
+<img src="img/re-frisk.png">
 
-## Changes
+## Support re-frisk
 
-### 0.4.5
-- Implemented app-db-sorted
+If re-frisk makes your work with re-frame applications easier and you like it please take a moment and support it:
 
-### 0.4.4
-
-- Remote debugger for react native and electron
-- app-db cljs live filter
-- сompatibility with previous versions of re-frame
+💎BTC: 3K37vEEyBsKSat2rS74CXUA3LnVR9QPztD
 
+💎ETH: 0x612E124d922a6DE46953226965C8e773166891E9
 
 ## Usage
 
-### Web applications with re-frame
+### Web application
 
 In-app re-frisk debugger. The debugger will be embedded into the interface of your application.
 
 [![Clojars](https://img.shields.io/clojars/v/re-frisk.svg)](https://clojars.org/re-frisk)
 
-1. Add `[re-frisk "0.4.5"]` to the dev `:dependencies` in your project.clj
-
-2. Run re-frisk using `enable-re-frisk!` function
-
-```clojure
-(:require [re-frisk.core :refer [enable-re-frisk!]])
-
-(defn ^:export run
- []
- (dispatch-sync [:initialize])
- (enable-re-frisk!)
- (reagent/render [simple-example]
-                 (js/document.getElementById "app")))
-```
-
-This is just an example, it's better to enable re-frisk in the dev environment
-
+1. Add re-frisk as a dev dependency by placing `[re-frisk "0.5.0"]` within `:profiles :dev :dependencies`. For example:
+   
+     ```cljs
+     :profiles
+        {:dev
+           {:dependencies [[some-other-package  "0.0.0"]
+                           [re-frisk "0.5.0"]] }}
+     ```
+
+2. Locate the `:compiler` map under `:dev` and add:
+   
+     `:preloads             [re-frisk.preload]`
+
+    For example:
+    
+      ```cljs
+      {:builds
+         [{:id           "dev"
+           :source-paths ["src" "dev"]
+           :compiler     {...
+                          :preloads [re-frisk.preload]}}]}
+      ```
+      
 ENJOY!
 
-### React native, Electron and Web applications with re-frame using remote server 
+### React native, Electron and Web applications using re-frisk remote server 
 
-Run remote re-frisk debugger server using leiningen re-frisk [plugin](https://github.com/flexsurfer/lein-re-frisk) by following next steps:
+Run remote re-frisk debugger server using leiningen re-frisk [plugin](https://github.com/flexsurfer/lein-re-frisk) following next steps:
 
-1. Add `[lein-re-frisk "0.4.8"]` into your global Leiningen config (`~/.lein/profiles.clj`) like so:
+1. Add `[lein-re-frisk "0.5.0"]` into your global Leiningen config (`~/.lein/profiles.clj`) like so:
 
-```clojure
-{:user {:plugins [[lein-re-frisk "0.4.8"]]}}
-```
-
-or into the `:plugins` vector of your project.clj
-
-```clojure
-(defproject your-project "0.1.1"
-  {:plugins [[lein-re-frisk "0.4.8"]]})
-```
+    ```cljs
+    {:user {:plugins [[lein-re-frisk "0.5.0"]]}}
+    ```
+    
+    or into the `:plugins` vector of your project.clj
+    
+    ```cljs
+    (defproject your-project "0.1.1"
+      {:plugins [[lein-re-frisk "0.5.0"]]})
+    ```
 
 2. Start a web server in the current directory on the default port (4567):
 
-    $ lein re-frisk
+    `$ lein re-frisk`
 
-Or select a different port by supplying the port number on the command line:
+    Or select a different port by supplying the port number on the command line:
 
-    $ lein re-frisk 8095
+    `$ lein re-frisk 8095`
 
 
-3. Add `[re-frisk-remote "0.4.2"]` to the dev `:dependencies` in your project.clj
+3. Add `[re-frisk-remote "0.5.0"]` to the dev `:dependencies` in your project.clj
 
-run re-frisk using `enable-re-frisk-remote!` function on the localhost and default port (4567)
+    run re-frisk using `enable-re-frisk-remote!` function on the localhost and default port (4567)
+    
+    ```cljs
+    (:require [re-frisk-remote.core :refer [enable-re-frisk-remote!]])
+    
+    (enable-re-frisk-remote!)
+    ```
+    
+    Or select a different host and port by supplying the host and port number:
+    
+    ```cljs
+    (enable-re-frisk-remote! {:host "192.168.1.1:8095"})
+    ```
+    
+    This is just an example, it's better to enable re-frisk in the dev environment
 
-```clojure
-(:require [re-frisk-remote.core :refer [enable-re-frisk-remote!]])
+Run an application
 
-(defn ^:export run
- []
- (dispatch-sync [:initialize])
- (enable-re-frisk-remote!)
- (reagent/render [simple-example]
-                 (js/document.getElementById "app")))
-```
+ENJOY!
 
-Or select a different host and port by supplying the host and port number:
+See also [Using re-frisk with re-natal](https://github.com/flexsurfer/re-frisk/wiki/Using-re-frisk-with-re-natal)
 
-```clojure
-(enable-re-frisk-remote! {:host "192.168.1.1:8095"})
-```
+### Settings
 
-This is just an example, it's better to enable re-frisk in the dev environment
+You can provide starting position for the re-frisk panel
 
-Run an application
+```cljs
+(enable-re-frisk! {:x 100 :y 500})
 
-ENJOY!
+(enable-frisk! {:x 100 :y 500})
+```
 
-See also [Using re-frisk with re-natal](https://github.com/flexsurfer/re-frisk/wiki/Using-re-frisk-with-re-natal)
+also, it will be helpful for the IE, because it doesn't support resize property, you can provide width and height
 
-### re-frame handlers
+```cljs
+(enable-re-frisk! {:width "400px" :height "400px"})
+
+(enable-frisk! {:width "400px" :height "400px"})
+```
 
-You can also watch all re-frame subscriptions and events
+You can provide external window dimensions
 
-```clojure
-(enable-re-frisk! {:kind->id->handler? true})
+```cljs
+(enable-re-frisk! {:ext_height 1000 :ext_width 1200})
 ```
 
 ### Events
 
 If you don't want to watch events you can turn it off providing settings `{:events? false}`
 
-```clojure
+```cljs
 (enable-re-frisk! {:events? false})
 ```
 
 Also you can watch interceptor's context providing `re-frisk.core/watch-context` in the reg-event interceptors list
 
-```clojure
+```cljs
 (reg-event-db
  :timer-db
  [re-frisk.core/watch-context]
@@ -136,65 +149,22 @@ Export works only for the cljs [data structures](https://github.com/cognitect/tr
 [<img src="https://docs.google.com/drawings/d/1ptKAIPfb_gtwwSqYmt-JGTkwPVm_6LeWjjm-FcWznBs/pub?w=1786&amp;h=916">](
 https://docs.google.com/drawings/d/1ptKAIPfb_gtwwSqYmt-JGTkwPVm_6LeWjjm-FcWznBs/edit?usp=sharing)
 
-### Settings
-
-You can provide starting position for the re-frisk panel
-
-```clojure
-(enable-re-frisk! {:x 100 :y 500})
-
-(enable-frisk! {:x 100 :y 500})
-```
-
-also, it will be helpful for the IE, because it doesn't support resize property, you can provide width and height
-
-```clojure
-(enable-re-frisk! {:width "400px" :height "400px"})
-
-(enable-frisk! {:width "400px" :height "400px"})
-```
 
 ### reagent
 If you are not using re-frame in your app, you can run re-frisk without re-frame by `enable-frisk!` function
 
-```clojure
+```cljs
 (enable-frisk!)
 ```
 
 If you want to watch ratom or log any data, you can add it using `add-data` or `add-in-data` functions
 
-```clojure
+```cljs
 (add-data :data-key your-data)
 
 (add-in-data [:data-key1  :data-key2] your-data)
 ```
 
-## Advanced thing
-
-For me, it's very handy to name events with the appropriate suffix, for example for reg-event-db :event-key-db, and for reg-event-fx :event-key-fx, in that case re-frisk automatically highlight these events
-
-Also you can watch all re-frame views which are rendering now
-
-Add `:external-config {:re-frisk {:enabled true}}}}` to the dev `:compiler` in your project.clj if you are working with the re-frame app
-
-<img src="img/re-frisk-project.png">
-
-this config needed to do not generate any code in production.
-
-
-Require macro
-```clojure
-(:require [re-frisk.core :refer-macros [def-view]])
-```
-
-Define your views (components) with the `def-view` macro
-
-```clojure
-(def-view greeting
- [message]
- [:h1 message])
-```
-
 
 ### For more
 
@@ -206,10 +176,9 @@ reagent [dev/re_frisk/reagent_demo.cljs](https://github.com/flexsurfer/re-frisk/
 Works weird in the Internet Explorer which doesn't support css resize property.
 Debugger doesn't work in IE.
 
-If you are using `reagent.core/create-class` function for creating views, data for these views will be still showing in the re-frisk after this components will be unmounted.
 
 ## License
 
-Copyright © 2016-2017 Shovkoplyas Andrey [motor4ik]
+Copyright © 2016-2017 Andrey Shovkoplyas [andre]
 
 Distributed under the MIT License (MIT)

dev/re_frisk/demo.cljs

@@ -20,6 +20,7 @@
 
 (def initial-state
  {:timer (js/Date.)
+  :form1 true
   :jsobj js/setInterval
   :time-color "#f88"
   :clock? true})
@@ -59,6 +60,12 @@
     ;; new value
     [{db :db} [_ value]]
     {:db (assoc db :clock? value)}))
+
+(reg-event-db
+  ::change-form
+  (fn [db _]
+    (update db :form1 not)))
+
 ;; -- Subscription Handlers ---------------------------------------------------
 
 
@@ -68,6 +75,12 @@
   [db _]             ;; db is the value currently in the app-db atom
   (:timer db)))
 
+(reg-sub
+  :form1?
+  (fn
+    [db _]             ;; db is the value currently in the app-db atom
+    (:form1 db)))
+
 
 (reg-sub
  :time-color
@@ -115,17 +128,30 @@
              :value @time-color
              :on-change #(dispatch [:time-color (-> % .-target .-value)])}]])))
 
+(defn form1 []
+  (fn []
+    (let [clock? (rf/subscribe [:clock?])]
+      [:div
+       [greeting "Hello world, it is now"]
+       (when @clock? [clock])
+       [color-input]])))
+
+(defn form2 []
+  (fn []
+    [:div "form2"]))
+
 (def-view simple-example
  []
  (reagent/create-class
    {
     :reagent-render (fn []
-                      (let [clock? (rf/subscribe [:clock?])]
+                      (let [form1? (subscribe [:form1?])]
                         [:div
-                         [greeting "Hello world, it is now"]
-                         (when @clock? [clock])
-                         [color-input]]))}))
-
+                         (if @form1?
+                           [form1]
+                           [form2])
+                         [:div]
+                         [:div {:on-click #(dispatch [::change-form])} "change form"]]))}))
 (defn mount []
   (reagent/render [simple-example]
                   (js/document.getElementById "app")))
@@ -138,6 +164,5 @@
 (defn ^:export run
  []
  (dispatch-sync [:initialize-db])
- (enable-re-frisk! {:kind->id->handler? true})
  (mount))
 

img/re-frisk-debugger.gif

@@ -1,20 +1,20 @@
-(defproject re-frisk "0.4.5"
+(defproject re-frisk "0.5.0"
   :description "Visualize re-frame pattern data in your re-frame apps as a tree structure."
   :url "https://github.com/flexsurfer/re-frisk"
   :license {:name "MIT"
             :url "https://opensource.org/licenses/MIT"}
 
   :min-lein-version "2.6.1"
 
-  :dependencies [[org.clojure/clojure "1.8.0"]
-                 [org.clojure/clojurescript "1.9.89"]
-                 [reagent "0.6.0"]
-                 [re-frame "0.8.0"]
-                 [re-frisk-shell "0.4.5"]
+  :dependencies [[org.clojure/clojure "1.9.0-alpha17"]
+                 [org.clojure/clojurescript "1.9.671"]
+                 [reagent "0.7.0"]
+                 [re-frame "0.10.1"]
+                 [re-frisk-shell "0.5.0"]
                  [com.cognitect/transit-cljs "0.8.239"]]
 
-  :plugins [[lein-cljsbuild "1.1.5" :exclusions [[org.clojure/clojure]]]
-            [lein-figwheel "0.5.9"]]
+  :plugins [[lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]
+            [lein-figwheel "0.5.13"]]
 
   :source-paths ["src"]
 
@@ -30,7 +30,8 @@
                            :output-to "resources/re-frisk/js/compiled/re_frisk.js"
                            :output-dir "resources/re-frisk/js/compiled/out/re-frisk"
                            :source-map-timestamp true
-                           :preloads [devtools.preload]
+                           :preloads [devtools.preload
+                                      re-frisk.preload]
                            :external-config {:re-frisk {:enabled true}}}}
                {:id "reagent"
                 :source-paths ["src" "dev"]