Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

flexsurfer/re-frisk

Open more actions menu

Repository files navigation

After 9 years of leading development on a ClojureScript + React Native Web3 application — I'm now open to new opportunities.

Feel free to reach out: [flexsurfer@pm.me]

re-frisk

Take full control of re-frame application.

Latest stable version: Clojars Clojars Clojars Clojars

DEMO

https://flexsurfer.github.io/conduit-re-frisk-demo/

Features

Current state for app-db and subscriptions sorted by keys
Watching keys from app-db
History for key in app-db
Events with app-db difference for each event

re-frame tracing (Important: trace should be enabled)

(Note: With lots of events and high zoom might be slow, pause or clear events when working with timeline)

Events and timeline
Subscriptions
Views sorted by mount order with subscripions
re-frame handlres statistics
Graph for an epoch

(Note: with lots of subscriptions rendering might be slow!)

Graph accumulated for an app life with weights

Usage

[re-frisk "1.7.1"] [re-frisk-remote "1.6.0"]

Important: Please note the following compatibility table:

re-frisk Version React Version Reagent Versions
^1.7.1 ^React 18 ^1.2.x
1.3.4-1.6.1 React 16.13.0 1.x.x
1.1.0-1.3.3 React 16.13.0 0.10.x
1.0.0 React 16.9.0 0.9.x
0.5.3 React 16 - 16.8.6 0.8.x

Web application

Clojars

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.7.1"]

  2. Enable re-frisk

    :preloads [re-frisk.preload]

    OR if you want a hidden UI and open tool with Ctrl+H

    :preloads [re-frisk.preload-hidden]

    OR

    (:require [re-frisk.core :as re-frisk])

    (re-frisk/enable)

React Native, Electron or Web applications

Clojars

  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)

  3. Start re-frisk on default port (4567):

    shadow-cljs run re-frisk-remote.core/start

    OR

    add in deps.edn

    :aliases {:dev {:extra-deps {re-frisk-remote {:mvn/version "1.6.0"}}}}}

    create re_frisk.clj

    (ns re-frisk
     (:require [re-frisk-remote.core :as re-frisk-remote]))
    
    (re-frisk-remote/start)

    clj -R:dev re_frisk.clj

Open re-frisk in a browser at http://localhost:4567

When remote debugging on an Android device you might need to enable reverse socket connections on port 4567:

adb reverse tcp:4567 tcp:4567

Enable traces

shadow-cljs

:compiler-options {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}

OR

:compiler         {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}

Settings

External window dimensions

(re-frisk/enable {:ext_height 1000 :ext_width 1200})

Hidden UI, you can open and close tool by Ctrl+H

(re-frisk/enable {:hidden true})

If you don't need to watch events you can disable them

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

or exclude specific events

(re-frisk/enable {:ignore-events #{::timer-db}})

Using custom IP or port

(re-frisk-remote/enable {:host "192.168.0.2:7890"})

(re-frisk-remote/start {"7890"})

Normalize app-db before send to re-frisk

(re-frisk-remote/enable {:normalize-db-fn (fn [app-db] (reduce ...))})

bonus re-frame 6-domino cascade

Morty Proxy This is a proxified and sanitized view of the page, visit original site.