How do I make devCards work with re-frame?

Question

Devcards aims to provide a visual REPL experience for ClojureScript. They offer support to Reagent and OM. How can I make devCards work with re-frame?

Answer 1

This is a recurrent issue with re-frame and devcards. The main problem is the globals in re-frame (the main issue is the db, but handlers and subscriptions can be an issue too) that don't play well with the idea of rendering multiple devcards on the same page.

One potential solution is to render each devcard inside of an iframe. Each devcard would be isolated from each other, even though they are contained and visually rendered in a single page. It's probably not the most efficient solution, but it works: I implemented it in my devcards fork, under the iframe branch. It has a couple example devcards using re-frame

Even though it's published in clojars as [org.clojars.nberger/devcards "0.2.3-0-iframe"], it needs some work to provide a more friendly way to create iframe devcards and maybe a devcard macro specific for re-frame. Also there might be some UI rough edges to polish. But feel free to use it. Of course contributions and feedback are welcome.

I'll put an example here to show how to use it:

(defcard-rg re-frame-component-initialize-db
  "This is the same re-frame component, but now using 
   data-atom to initialize the db, rendered in an iframe:"
  (fn [data-atom _]
    (setup-example-1)
    (re-frame/dispatch [:initialize-db @data-atom])
    [re-frame-component-example])
  {:guest-name "John"}
  {:iframe true})

(the example is based on re-frame 0.7.x but everything should work the same with newer versions because the iframe mechanism is indifferent to using re-frame or anything)

Answer 2

Update:

This how I did it with figwheel main:

• Add [devcards "0.2.6" ] to your dependencies.
• Create a namespace for your cards, say src/cljs/cards/core.cljs.
• Add new extra-main-files section and turn devcards on in dev.cljs.edn

    ^{:watch-dirs       ["src/cljs" "test"]
      :css-dirs         ["resources/public/css"]
      :auto-testing     true
      :extra-main-files {:testing  {:main menu-planner.test-runner}
                         :devcards {:main cards.core}} ;; <- this
      :open-url         false}
    {:main            menu-planner.core
     :infer-externs   true
     :devcards        true ;; <- and this
     }

• Add cards with defcard-rg to src/cljs/cards/core.cljs

(ns cards.core
        (:require
                [devcards.core]
                [re-frame.core :as re-frame])
        (:require-macros
                [devcards.core :refer [defcard-rg]]))

(devcards.core/start-devcard-ui!)

(defcard-rg no-state
        [:div {:style {:border "10px solid blue" :padding "20px"}}
         [:h1 "Composing Reagent Hiccup on the fly"]
         [:p "adding arbitrary hiccup"]])

(defcard-rg with-state
        (fn [data-atom _]
                [:div "test"])
        {:initial-data "Ta-ta!"})

• Run figwheel-main with the forementioned profile (dev).
• Go to devcards

---

They say you can't at the first page:

re-frame remains a work in progress and it falls short in a couple of ways - for example it doesn't work as well as we'd like with devcards