Skip to content

Latest commit

 

History

History
58 lines (45 loc) · 2.1 KB

README.md

File metadata and controls

58 lines (45 loc) · 2.1 KB
Raw

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.

Re-frame Flow

Installation

Clojars Project

  • 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

Running the example

  • git clone git@github.com:ertugrulcetin/re-frame-flow.git
  • npm install
  • lein watch
  • Open http://localhost:8280