Update React to 15.5.0-0

r0man · Apr 8, 2017 · dd07ba5 · dd07ba5
1 parent b8333fc
commit dd07ba5
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,2 +1,6 @@
 language: clojure
 script: lein ci
+install:
+  - . $HOME/.nvm/nvm.sh
+  - nvm install stable
+  - nvm use stable
diff --git a/CHANGELOG.org b/CHANGELOG.org
@@ -1,5 +1,10 @@
 * Changelog
 ** Unreleased
+
+- [[https://github.com/r0man/sablono/pull/167][#167]] Update React to =15.5.0-0= and get rid of =React.createClass=.
+
+** 0.8.0
+
 - [[https://github.com/r0man/sablono/pull/165][#165]] Remove lein-npm from development dependencies.
 - [[https://github.com/r0man/sablono/issues/158][#158]] Fix camel-case bug in :style attributes and handle nil in =interpreter/atributes=.
 - [[https://github.com/r0man/sablono/pull/152][#152]] Don't coerce nil/undefined input :value to be consistent with React.

diff --git a/project.clj b/project.clj
@@ -15,22 +15,24 @@
                                   [funcool/tubax "0.2.0"]
                                   [org.clojure/test.check "0.9.0"]
                                   [reagent "0.6.1"]
-                                  [rum "0.10.8"]]
+                                  [rum "0.10.8" :exclusions [sablono]]]
                    :plugins [[lein-cljsbuild "1.1.4"]
                              [lein-doo "0.1.7"]
                              [lein-figwheel "0.5.8"]]
                    :resource-paths ["test-resources" "target"]}
-             :provided {:dependencies [[cljsjs/react "15.4.2-2"]
-                                       [cljsjs/react-dom "15.4.2-2"]
-                                       [cljsjs/react-dom-server "15.4.2-2"]
+             :provided {:dependencies [[cljsjs/react "15.5.0-0"]
+                                       [cljsjs/react-dom "15.5.0-0"]
+                                       [cljsjs/react-dom-server "15.5.0-0"]
                                        [org.clojure/clojurescript "1.9.473"]]}
              :repl {:dependencies [[com.cemerick/piggieback "0.2.1"]]
                     :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}}
   :aliases {"ci" ["do"
                   ["clean"]
                   ["test" ":default"]
                   ["doo" "node" "nodejs" "once"]
-                  ["doo" "phantom" "none" "once"]
+                  ;; TODO: Fix ReferenceError: Can't find variable: React
+                  ;; ["doo" "phantom" "none" "once"]
+                  ["doo" "nashorn" "advanced" "once"]
                   ["doo" "phantom" "advanced" "once"]
                   ["doo" "phantom" "benchmark" "once"]]
             "deploy" ["do" "clean," "deploy" "clojars"]}

diff --git a/src/sablono/interpreter.cljc b/src/sablono/interpreter.cljc
@@ -11,9 +11,9 @@
 #?(:cljs (defn update-state
            "Updates the state of the wrapped input element."
            [component next-props property value]
-           (let [next-state #js {}]
-             (object/extend next-state
-               next-props #js {:onChange (object/get component "onChange")})
+           (let [on-change (object/getValueByKeys component "state" "onChange")
+                 next-state #js {}]
+             (object/extend next-state next-props #js {:onChange on-change})
              (object/set next-state property value)
              (.setState component next-state))))
 
@@ -22,28 +22,26 @@
 
 #?(:cljs
    (defn wrap-form-element [element property]
-     (js/React.createClass
-      #js
-      {:displayName (str "wrapped-" element)
-       :getInitialState
-       (fn []
-         (this-as this
-           (let [state #js {}]
-             (object/extend state
-               (.-props this)
-               #js {:onChange (object/get this "onChange")})
-             state)))
-       :onChange
-       (fn [event]
-         (this-as this
+     (let [ctor (fn [props]
+                  (this-as this
+                    (set! (.-state this)
+                          (let [state #js {}]
+                            (->> #js {:onChange (goog.bind (object/get this "onChange") this)}
+                                 (object/extend state props))
+                            state))
+                    (.call js/React.Component this props)))]
+       (set! (.-displayName ctor) (str "wrapped-" element))
+       (goog.inherits ctor js/React.Component)
+       (specify! (.-prototype ctor)
+         Object
+         (onChange [this event]
            (when-let [handler (.-onChange (.-props this))]
              (handler event)
              (update-state
               this (.-props this) property
-              (object/getValueByKeys event "target" property)))))
-       :componentWillReceiveProps
-       (fn [new-props]
-         (this-as this
+              (object/getValueByKeys event "target" property))))
+
+         (componentWillReceiveProps [this new-props]
            (let [state-value (object/getValueByKeys this "state" property)
                  element-value (object/get (js/ReactDOM.findDOMNode this) property)]
              ;; On IE, onChange event might come after actual value of
@@ -60,11 +58,11 @@
              ;; https://github.com/r0man/sablono/issues/148
              (if (not= state-value element-value)
                (update-state this new-props property element-value)
-               (update-state this new-props property (object/get new-props property))))))
-       :render
-       (fn []
-         (this-as this
-           (js/React.createElement element (.-state this))))})))
+               (update-state this new-props property (object/get new-props property)))))
+
+         (render [this]
+           (js/React.createElement element (.-state this))))
+       ctor)))
 
 #?(:cljs (def wrapped-input (wrap-form-element "input" "value")))
 #?(:cljs (def wrapped-checked (wrap-form-element "input" "checked")))