如何让devCards与re-frame一起工作？

Question

Devcards旨在为ClojureScript提供可视化的REPL体验。它们提供对Reagent和OM的支持。如何让devCards与re-frame协同工作

Answer 1

这是re和devcard的一个反复出现的问题。主要问题是re中的全局变量(主要问题是数据库，但处理程序和订阅也可能是问题)，不能很好地处理在同一页面上呈现多个devcard的想法。

一种可能的解决方案是在iframe中呈现每个devcard。每个devcard将彼此隔离，即使它们包含在单个页面中并以可视方式呈现。这可能不是最有效的解决方案，但它是有效的:我用my devcards fork, under the iframe branch实现了它。它有a couple example devcards using re-frame

尽管它在clojars中以[org.clojars.nberger/devcards "0.2.3-0-iframe"]的形式发布，但它需要一些工作来提供一种更友好的方式来创建iframe devcard，也许还需要一个特定于devcard的devcard宏。此外，可能会有一些UI粗糙的边缘需要打磨。但是请随意使用它。当然，我们欢迎您的贡献和反馈。

我将在这里放一个例子来展示如何使用它：

(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})

(该示例基于re-frame 0.7.x，但对于较新的版本，一切都应该是相同的，因为iframe机制与使用re-frame或其他任何东西无关)

Answer 2

更新：

这就是我用figwheel做的事情：

在你的dependencies.

• Create中为你的卡添加一个新的名字空间，比如src/cljs/cards/core.cljs.

• Add dev.cljs.edn

中的-

• - [devcards "0.2.6" ]段，然后打开devcards

    ^{: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
     }

将带有defcard-rg的卡添加到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!"})

• 使用上述配置文件(Dev)运行figwheel-main。
• 转到devcards

他们说你不能在the first page

re-frame仍然是一项正在进行的工作，它在几个方面存在不足-例如，它不能像我们希望的那样使用devcards

工作