Start move to React 0.14

project.clj

@@ -5,9 +5,9 @@
 
   :dependencies [[org.clojure/clojure "1.7.0"]
                  [org.clojure/clojurescript "1.7.48"]
-                 [cljsjs/react "0.13.3-1"]]
+                 [cljsjs/react-dom "0.14.0-rc1-0"]]
 
-  :plugins [[lein-cljsbuild "1.0.6"]
+  :plugins [[lein-cljsbuild "1.1.0"]
             [codox "0.8.12"]]
 
   :source-paths ["src"]
@@ -19,8 +19,8 @@
                     {:builds {:client {:source-paths ["test"]}}}}
 
              :dev [:test
-                   {:dependencies [[figwheel "0.3.7"]]
-                    :plugins [[lein-figwheel "0.3.7"]]
+                   {:dependencies [[figwheel "0.4.0"]]
+                    :plugins [[lein-figwheel "0.4.0"]]
                     :source-paths ["demo"] ;; for lighttable
                     :resource-paths ["site" "outsite"]
                     :figwheel {:css-dirs ["site/public/css"]}

src/reagent/core.cljs

@@ -8,7 +8,9 @@
             [reagent.impl.batching :as batch]
             [reagent.ratom :as ratom]
             [reagent.debug :as deb :refer-macros [dbg prn]]
-            [reagent.interop :refer-macros [.' .!]]))
+            [reagent.interop :refer-macros [.' .!]]
+            [reagent.dom :as dom]
+            [reagent.dom.server :as server]))
 
 (def is-client util/is-client)
 
@@ -70,18 +72,17 @@ Returns the mounted component instance."
   ([comp container callback]
    (let [f (fn []
              (as-element (if (fn? comp) (comp) comp)))]
-     (util/render-component f container callback))))
+     (dom/render-component f container callback))))
 
 (defn unmount-component-at-node
   "Remove a component from the given DOM node."
   [container]
-  (util/unmount-component-at-node container))
+  (dom/unmount-component-at-node container))
 
 (defn render-to-string
   "Turns a component into an HTML string."
   ([component]
-     (binding [comp/*non-reactive* true]
-       (.' js/React renderToString (as-element component)))))
+   (server/render-to-string component)))
 
 ;; For backward compatibility
 (def as-component as-element)
@@ -91,8 +92,7 @@ Returns the mounted component instance."
 (defn render-to-static-markup
   "Turns a component into an HTML string, without data-react-id attributes, etc."
   ([component]
-     (binding [comp/*non-reactive* true]
-       (.' js/React renderToStaticMarkup (as-element component)))))
+   (server/render-to-static-markup component)))
 
 (defn ^:export force-update-all
   "Force re-rendering of all mounted Reagent components. This is
@@ -105,7 +105,7 @@ Returns the mounted component instance."
   ClojureScript). To get around this you'll have to introduce a layer
   of indirection, for example by using `(render [#'foo])` instead."
   []
-  (util/force-update-all))
+  (dom/force-update-all))
 
 (defn create-class
   "Create a component, React style. Should be called with a map,
@@ -194,7 +194,7 @@ Equivalent to (swap! (state-atom this) merge new-state)"
 (defn dom-node
   "Returns the root DOM node of a mounted component."
   [this]
-  (.' this getDOMNode))
+  (dom/dom-node this))
 
 (defn merge-props
   "Utility function that merges two maps, handling :class and :style

src/reagent/dom.cljs

@@ -0,0 +1,48 @@
+(ns reagent.dom
+  (:require [cljsjs.react.dom]
+            [reagent.impl.util :as util]
+            [reagent.debug :refer-macros [dbg]]
+            [reagent.interop :refer-macros [.' .!]]))
+
+(def react-dom js/ReactDOM)
+(assert react-dom)
+
+(defonce roots (atom {}))
+
+(defn clear-container [node]
+  ;; If render throws, React may get confused, and throw on
+  ;; unmount as well, so try to force React to start over.
+  (some-> node
+          (.! :innerHTML "")))
+
+(defn render-component [comp container callback]
+  (let [rendered (volatile! nil)]
+    (try
+      (binding [util/*always-update* true]
+        (->> (.' react-dom render (comp) container
+                 (fn []
+                   (binding [util/*always-update* false]
+                     (swap! roots assoc container [comp container])
+                     (if (some? callback)
+                       (callback)))))
+             (vreset! rendered)))
+      (finally
+        (when-not @rendered
+          (clear-container container))))))
+
+(defn re-render-component [comp container]
+  (render-component comp container nil))
+
+(defn unmount-component-at-node [container]
+  (swap! roots dissoc container)
+  (.' react-dom unmountComponentAtNode container))
+
+(defn force-update-all []
+  (doseq [v (vals @roots)]
+    (apply re-render-component v))
+  "Updated")
+
+(defn dom-node
+  "Returns the root DOM node of a mounted component."
+  [this]
+  (.' react-dom findDOMNode this))

src/reagent/dom/server.cljs

@@ -0,0 +1,21 @@
+(ns reagent.dom.server
+  (:require [cljsjs.react.dom]
+            [reagent.impl.util :as util]
+            [reagent.impl.template :as tmpl]
+            [reagent.interop :refer-macros [.' .!]]))
+
+;; TODO: Where the hell is ReactDOMServer?
+(def react-dom-server js/React)
+(assert react-dom-server)
+
+(defn render-to-string
+  "Turns a component into an HTML string."
+  ([component]
+   (binding [util/*non-reactive* true]
+     (.' react-dom-server renderToString (tmpl/as-element component)))))
+
+(defn render-to-static-markup
+  "Turns a component into an HTML string, without data-react-id attributes, etc."
+  ([component]
+   (binding [util/*non-reactive* true]
+     (.' react-dom-server renderToStaticMarkup (tmpl/as-element component)))))

src/reagent/impl/component.cljs

@@ -7,8 +7,6 @@
 
 (declare ^:dynamic *current-component*)
 
-(declare ^:dynamic *non-reactive*)
-
 
 ;;; Argv access
 
@@ -124,7 +122,7 @@
 (def static-fns
   {:render
    (fn render []
-     (this-as c (if *non-reactive*
+     (this-as c (if util/*non-reactive*
                   (do-render c)
                   (let [rat (.' c :cljsRatom)]
                     (batch/mark-rendered c)

src/reagent/impl/util.cljs

@@ -6,6 +6,8 @@
 (def is-client (and (exists? js/window)
                     (-> js/window (.' :document) nil? not)))
 
+(def ^:dynamic ^boolean *non-reactive* false)
+
 ;;; Props accessors
 
 ;; Misc utilities
@@ -86,41 +88,6 @@
 
 (def ^:dynamic *always-update* false)
 
-(defonce roots (atom {}))
-
-(defn clear-container [node]
-  ;; If render throws, React may get confused, and throw on
-  ;; unmount as well, so try to force React to start over.
-  (some-> node
-          (.! :innerHTML "")))
-
-(defn render-component [comp container callback]
-  (let [rendered (volatile! nil)]
-    (try
-      (binding [*always-update* true]
-        (->> (.' js/React render (comp) container
-                 (fn []
-                   (binding [*always-update* false]
-                     (swap! roots assoc container [comp container])
-                     (if (some? callback)
-                       (callback)))))
-             (vreset! rendered)))
-      (finally
-        (when-not @rendered
-          (clear-container container))))))
-
-(defn re-render-component [comp container]
-  (render-component comp container nil))
-
-(defn unmount-component-at-node [container]
-  (swap! roots dissoc container)
-  (.' js/React unmountComponentAtNode container))
-
-(defn force-update-all []
-  (doseq [v (vals @roots)]
-    (apply re-render-component v))
-  "Updated")
-
 (defn force-update [comp deep]
   (if deep
     (binding [*always-update* true]

test/reagenttest/testreagent.cljs

@@ -515,7 +515,7 @@
   (let [ae r/as-element
         ce r/create-element
         a (atom nil)
-        c1r (fn [p & args]
+        c1r (fn reactize [p & args]
               (reset! a args)
               [:p "p:" (:a p) (:children p)])
         c1 (r/reactify-component c1r)]
@@ -571,7 +571,7 @@
              [:p (swap! v update-in [:v1] inc)])
         c2 (fn []
              (swap! comps assoc :c2 (r/current-component))
-             [:p (swap! v update-in [:v2] inc)
+             [:div (swap! v update-in [:v2] inc)
               [c1]])]
     (with-mounted-component [c2]
       (fn [c div]
@@ -770,7 +770,7 @@
                   [comp1 x])
           comp3 (fn comp3 []
                   (r/with-let [a (r/atom "foo")]
-                    [:p (for [i (range 0 1)]
+                    [:div (for [i (range 0 1)]
                           ^{:key i} [:p @a])]))
           comp4 (fn comp4 []
                   (for [i (range 0 1)]
@@ -811,3 +811,18 @@
                #(r/as-element (comp4)))]
         (is (re-find #"Every element in a seq should have a unique :key"
                      (-> e :warn first)))))))
+
+(deftest test-dom-node
+  (let [node (atom nil)
+        ref (atom nil)
+        comp (r/create-class
+              {:reagent-render (fn test-dom []
+                                 [:div {:ref #(reset! ref %)} "foobar"])
+               :component-did-mount
+               (fn [this]
+                 (reset! node (r/dom-node this)))})]
+    (with-mounted-component [comp]
+      (fn [c div]
+        (is (= (.-innerHTML @ref) "foobar"))
+        (is (= (.-innerHTML @node) "foobar"))
+        (is (identical? @ref @node))))))