Setup cljs repl and try adding some performance benchmarks

project.clj

@@ -25,6 +25,7 @@
 
   :profiles {:dev {:dependencies [[org.clojure/clojurescript "1.10.597"]
                                   [figwheel "0.5.19"]
+                                  [figwheel-sidecar "0.5.19"]
                                   [doo "0.1.11"]
                                   [cljsjs/prop-types "15.7.2-0"]]
                    :source-paths ["demo" "test" "examples/todomvc/src" "examples/simple/src" "examples/geometry/src"]
@@ -32,6 +33,8 @@
 
   :clean-targets ^{:protect false} [:target-path :compile-path "out"]
 
+  :repl-options {:init (do (require '[figwheel-sidecar.repl-api :refer :all]))}
+
   :figwheel {:http-server-root "public" ;; assumes "resources"
              :css-dirs ["site/public/css"]
              :repl false}

test/reagenttest/performancetest.cljs

@@ -0,0 +1,26 @@
+(ns reagenttest.performancetest
+  (:require [reagent.core :as r]
+            [reagent.impl.template :as tmpl]))
+
+(defn hello-world-component []
+  [:h1 "Hello world"])
+
+(defn test-create-element []
+  ;; TODO: Why doesn't performance dev tool show call stack for vec-to-elem?
+  (js/performance.mark "functional-start")
+  ; (simple-benchmark [x [hello-world-component]] (tmpl/vec-to-elem x) 100000)
+  (dotimes [i 100000]
+    (tmpl/vec-to-elem [hello-world-component]))
+  (js/performance.mark "functional-end")
+  (js/performance.measure "functional" "functional-start" "functional-end")
+
+  (js/performance.mark "class-start")
+  ; (simple-benchmark [x [^:class-component hello-world-component]] (tmpl/vec-to-elem x) 100000)
+  (dotimes [i 100000]
+    (tmpl/vec-to-elem [^:class-component hello-world-component]))
+  (js/performance.mark "class-end")
+  (js/performance.measure "class" "class-start" "class-end")
+  )
+
+(comment
+  (test-create-element))

test/reagenttest/runtests.cljs

@@ -6,6 +6,7 @@
             [reagenttest.testtrack]
             [reagenttest.testwithlet]
             [reagenttest.testwrap]
+            [reagenttest.performancetest]
             [reagent.impl.template-test]
             [reagent.impl.util-test]
             [clojure.test :as test]
@@ -39,14 +40,19 @@
 
 (defn test-output-mini []
   (let [res @test-results]
-    [:div {:style test-box-style
-           :on-click run-tests}
-     (if res
-       (if (zero? (+ (:fail res) (:error res)))
-         "All tests ok"
-         [:span "Test failure: "
-          (:fail res) " failures, " (:error res) " errors."])
-       "testing")]))
+    [:div
+     {:style test-box-style}
+     [:div {:on-click run-tests}
+      (if res
+        (if (zero? (+ (:fail res) (:error res)))
+          "All tests ok"
+          [:span "Test failure: "
+           (:fail res) " failures, " (:error res) " errors."])
+        "testing")]
+     [:button
+      {:on-click (fn [_e]
+                   (reagenttest.performancetest/test-create-element))}
+      "Run performance test"]]))
 
 (defn init! []
   ;; This function is only used when running tests from the demo app.