Visualize re-frame pattern data or reagent ratom data as a tree structure, watch re-frame events and export state in the debugger.
Clojure HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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.

Clojars

  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)