metosin/reagent-dev-tools

Name: reagent-dev-tools

Owner: Metosin

Description: Development tool panel for Reagent

Created: 2015-10-18 18:56:13.0

Updated: 2016-11-20 12:04:13.0

Pushed: 2018-01-26 14:19:47.0

Homepage:

Size: 28

Language: Clojure

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Reagent-dev-tools

Features

• Display state tree from Reagent atoms
• Supports multiple atoms
• Styles embedded for easy use
• Simple toggleable development tool panel which can be extended with own tabs

Configuration

To enable, add reagent-dev-tools.preload to your :compiler-options :preloads. This will ensure that Dev tool is only included in the output JS for development builds.

To configure dev tool in this setup, one can use :external-config :reagent-dev-tools option:

ernal-config {:reagent-dev-tools {:state-atom example.main/state
                                  :panels-fn example.main/dev-panels}}}}

• :state-atom should refer to the var which is the Reagent state atom
• :panels-fn should refer to function which will return map of additional panels

To make your own application to make room for the dev-tool, you can for example add some padding to your app when the dev-tool is open:

n main-view []
div.main-view
if (:open? @dev-tools/dev-state)
 {:style {:padding-bottom (str (:height @dev-tools/dev-state) "px")}})
..])

Manual use

If one wants to include Dev tool in production builds, reagent-dev-tools.core/start! can be called with options map.

Reagent component reagent-dev-tools.core/dev-tool can also be used directly as part of Reagent applications.

License

Copyright © 2015-2018 Metosin Oy

Distributed under the Eclipse Public License, the same as Clojure.