Re-frame Flow

re-frame-flow is a graph based visualization tool for re-frame event chains. Let's assume we clicked a login button and triggered a series of events. login-fx -> http-fx -> some-fx -> some-db-handler ... (event after event), so a path gets generated, re-frame-flow visualizes all paths in a graph.

Installation

Add re-frame-flow to dev dependencies:

:profiles
   {:dev
      {:dependencies [[org.clojars.ertucetin/re-frame-flow "X.Y.Z"]] }}

Add re-frame-flow.preload to preloads:

{...
 :preloads [re-frame-flow.preload]
 ...}

Usage

Make sure you have followed all of the installation instructions above.
Start up your application.
Once it is loaded, trigger some events (Flow panel gets updated when an event is triggered).
Focus the document window and press ctrl-g to open the flow panel.

Dispatch tracking (Optional)

If you want to track the flow of dispatch and dispatch-sync, you need to use re-frame-flow's custom dispatch and dispatch-sync. ClojureScript does not provide *ns* at runtime, so these functions implemented as custom macros. Which means you can't pass around like they are functions.

You need to move re-frame-flow dependency from dev to prod

Update your dev closure-defines inside shadow-cljs.edn

  :dev
   {:compiler-options
    {:closure-defines
     {re-frame-flow.trace.dispatch-enabled? true}}}

Update your views (or any namespace that uses dispatch)

(ns app.views
 (:require [re-frame-flow.macros :refer-macros [dispatch dispatch-sync]]
  ...))

Live Demo

Re-frame Flow Demo

Running the example