如何让devCards与重新框架一起工作？

Question

Devcards旨在为ClojureScript提供可视化的REPL体验.他们为Reagent和OM提供支持.如何让devCards与重新框架一起工作？

Answer 1

这是 re-frame 和 devcards 经常出现的问题。主要问题是重新框架中的全局变量（主要问题是数据库，但处理程序和订阅也可能是一个问题），它们与在同一页面上呈现多个开发卡的想法不符。

一种可能的解决方案是在 iframe 内呈现每个开发卡。每个开发卡将彼此隔离，即使它们包含在单个页面中并在视觉上呈现。这可能不是最有效的解决方案，但它有效：我在我的 devcards fork 中的iframebranch下实现了它。它有几个使用重新框架的示例开发卡

尽管它在 clojars 中发布为[org.clojars.nberger/devcards "0.2.3-0-iframe"]，但它需要一些工作来提供一种更友好的方式来创建 iframe devcards，并且可能是一个专门用于重新框架的 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 main 做到的：

• 添加[devcards "0.2.6" ]到您的依赖项。
• 为您的卡片创建一个命名空间，例如src/cljs/cards/core.cljs.
• 添加新的 extra-main-files 部分并在中打开 devcardsdev.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
     }

• 使用 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!"})

• figwheel-main使用上述配置文件 (dev)运行。
• 前往开发卡

他们说你不能在第一页：

重新框架仍然是一项正在进行的工作，它在几个方面存在不足 - 例如它在 devcards 上的效果不如我们所希望的那样