re-frisk

Visualize re-frame pattern data or reagent ratom data as a tree structure, watch re-frame events and export state.

Usage

Web application

In-app re-frisk debugger. The debugger will be embedded into the interface of your application.

1. Add re-frisk as a dev dependency by placing [re-frisk "0.5.3"] within :profiles :dev :dependencies. For example:

   :profiles
      {:dev
         {:dependencies [[some-other-package  "0.0.0"]
                         [re-frisk "0.5.3"]] }}
   

2. Locate the :compiler map under :dev and add:

   :preloads [re-frisk.preload]

   For example:

   {:builds
      [{:id           "dev"
        :source-paths ["src" "dev"]
        :compiler     {...
                       :preloads [re-frisk.preload]}}]}
   

ENJOY!

React Native, Electron or Web using re-frisk remote server with the re-frame-10x support

Run remote re-frisk debugger server using leiningen re-frisk plugin following next steps:

1. Add [lein-re-frisk "0.5.8"] into your global Leiningen config (~/.lein/profiles.clj) like so:

   {:user {:plugins [[lein-re-frisk "0.5.8"]]}}
   

   or into the :plugins vector of your project.clj

   (defproject your-project "0.1.1"
     {:plugins [[lein-re-frisk "0.5.8"]]})
   

2. Start a web server in the current directory on the default port (4567):

   $ lein re-frisk

   Or select a different port by supplying the port number on the command line:

   $ lein re-frisk 8095

3. Add [re-frisk-remote "0.5.5"] to the dev :dependencies in your project.clj

   run re-frisk using enable-re-frisk-remote! function on the localhost and default port (4567)

   (: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:

   (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

   If you want to use re-frame-10x, localhost:4567/10x will be available

   (enable-re-frisk-remote! {:enable-re-frame-10x? true})
   

Run an application

ENJOY!

See also Using re-frisk with re-natal

Settings

You can provide starting position for the re-frisk panel

(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

(enable-re-frisk! {:width "400px" :height "400px"})

(enable-frisk! {:width "400px" :height "400px"})

You can provide external window dimensions

(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}

(enable-re-frisk! {:events? false})

Also you can watch interceptor's context providing re-frisk.core/watch-context in the reg-event interceptors list

(reg-event-db
 :timer-db
 [re-frisk.core/watch-context]
 (fn
  [db [_ value]]
  (assoc db :timer value)))

Export and Import state of your re-frame application

Export works only for the cljs data structures.

re-frame 6-domino cascade and re-frisk

reagent

If you are not using re-frame in your app, you can run re-frisk without re-frame by enable-frisk! function

(enable-frisk!)

If you want to watch ratom or log any data, you can add it using add-data or add-in-data functions

(add-data :data-key your-data)

(add-in-data [:data-key1  :data-key2] your-data)

For more

re-frame dev/re_frisk/demo.cljs. reagent dev/re_frisk/reagent_demo.cljs.

Known issues

Works weird in the Internet Explorer which doesn't support css resize property. Debugger doesn't work in IE.

License

Copyright © 2016-2017 Andrey Shovkoplyas [andre]

Distributed under the MIT License (MIT)