(#11) Automatically inject devtools into the DOM in the preload namespace.

CHANGELOG.md

@@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file. This change
 
 ## [Unreleased]
 
+### Changed
+
+* The preloads namespace now adds the tracing panel to the DOM automatically, so you don't need to change any of your app code to bring it in. [#14](https://github.com/Day8/re-frame-trace/pull/14) via [Dexter Gramfors](https://github.com/Dexterminator).
+  **Migration steps:** Remove any explicit rendering instructions for `day8.re-frame.trace/devtools` in your app, as this is automatically added now.
+
 ## [0.0.8] - 2017-04-13
 
 ### Added

README.md

@@ -14,9 +14,7 @@ re-frame has instrumentation to collect traces throughout various important poin
 
 ## Getting started
 
-There are two requirements to use re-frame-trace:
-
-1. Compile your app with `:closure-defines: "re_frame.trace.trace_enabled_QMARK_" true` and `:preloads [day8.re-frame.trace.preload]`, e.g.
+Compile your app with `:closure-defines: "re_frame.trace.trace_enabled_QMARK_" true` and `:preloads [day8.re-frame.trace.preload]`, e.g.
 
     ```cljs
     {:builds
@@ -29,30 +27,6 @@ There are two requirements to use re-frame-trace:
 
     By default, re-frame tracing is compiled out, so it won't impose a performance cost in production. The trade-off here is that you need to explicitly enable it in development.
 
-    The [preloads](https://github.com/clojure/clojurescript/wiki/Compiler-Options#preloads) option (`:preloads [day8.re-frame.trace.preload]`) has to be set in order to automatically monkeypatch Reagent to add appropriate lifecycle hooks. Yes this is gross, and yes we will try and make a PR to reagent to add proper hooks, once we know exactly what we need.
-2. In your app's view code, add in `day8.re-frame.trace/devtools` as a sibling to the root application view. For example, if your app looks like this:
-
-   ```cljs
-   (defn main []
-     [re-com/v-box
-       ;; your app here
-       ])
-
-   (defn ^:export start-app
-     []
-     (myapp.boot/init!)
-     (reagent/render (fn [] [main]) (.getElementById js/document "app")))
-   ```
-
-   then you need to modify `main` to look something like:
-
-   ```cljs
-   (defn main []
-     [:div
-       [re-com/v-box
-         ;; your app here
-         ]
-       [trace/devtools]) ;; day8.re-frame.trace is aliased is trace
-   ```
+The [preloads](https://github.com/clojure/clojurescript/wiki/Compiler-Options#preloads) option (`:preloads [day8.re-frame.trace.preload]`) has to be set in order to automatically monkeypatch Reagent to add appropriate lifecycle hooks. Yes this is gross, and yes we will try and make a PR to reagent to add proper hooks, once we know exactly what we need. The preload namespace also injects a div containing the devtools panel into the DOM.
 
 Now you can start up your application. Once it is loaded, press Ctrl+H to slide open the trace panel and enable tracing. When the panel is closed, tracing is disabled.

src/day8/re_frame/trace.cljs

@@ -251,3 +251,7 @@
                                         :subvis [subvis/render-subvis traces]
                                         [render-traces])]]]))})))
 
+(defn inject-devtools! []
+  (let [div (.createElement js/document "div")]
+    (.appendChild (.-body js/document) div)
+    (r/render [devtools] div)))

src/day8/re_frame/trace/preload.cljs

@@ -5,3 +5,4 @@
 ;; Use this namespace with the :preloads compiler option to perform the necessary setup for enabling tracing:
 ;; {:compiler {:preloads [day8.re-frame.trace.preload] ...}}
 (trace/init-tracing!)
+(trace/inject-devtools!)