https://github.com/ertugrulcetin/re-frame-flow

Graph based visualization tool for re-frame event chains
https://github.com/ertugrulcetin/re-frame-flow

clojure clojurescript debugging event-flow re-frame reagent tracing

Last synced: 4 days ago
JSON representation

Graph based visualization tool for re-frame event chains

• Host: GitHub
• URL: https://github.com/ertugrulcetin/re-frame-flow
• Owner: ertugrulcetin
• License: mit
• Created: 2021-05-08T16:46:11.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-05-18T09:05:19.000Z (over 3 years ago)
• Last Synced: 2025-01-03T06:54:38.549Z (7 days ago)
• Topics: clojure, clojurescript, debugging, event-flow, re-frame, reagent, tracing
• Language: Clojure
• Homepage:
• Size: 1.03 MB
• Stars: 150
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](imgs/re-frame-flow-example.png)

## Installation

[![Clojars Project](https://clojars.org/org.clojars.ertucetin/re-frame-flow/latest-version.svg)](https://clojars.org/org.clojars.ertucetin/re-frame-flow)

- Add re-frame-flow to **dev** dependencies:

```clojure

:profiles

   {:dev

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

```

- Add `re-frame-flow.preload` to **preloads**:

```clojure

{...

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

    - ```clojure

        :dev

         {:compiler-options

          {:closure-defines

           {re-frame-flow.trace.dispatch-enabled? true}}}

      ```

- Update your views (or any namespace that uses `dispatch`)

    - ```clojure

      (ns app.views

       (:require [re-frame-flow.macros :refer-macros [dispatch dispatch-sync]]

        ...))

      ```

## Live Demo

- [Re-frame Flow Demo](https://ertugrulcetin.github.io/re-frame-flow-demo/index.html)

## Running the example

- `git clone [email protected]:ertugrulcetin/re-frame-flow.git`

- `npm install`

- `lein watch`

- Open http://localhost:8280