From dd07ba55c0ad54e7c8dd92f21da06c7df69a5c57 Mon Sep 17 00:00:00 2001 From: r0man Date: Sat, 8 Apr 2017 13:53:25 +0200 Subject: [PATCH] Update React to 15.5.0-0 --- .travis.yml | 4 +++ CHANGELOG.org | 5 ++++ project.clj | 12 +++++---- src/sablono/interpreter.cljc | 50 +++++++++++++++++------------------- 4 files changed, 40 insertions(+), 31 deletions(-) diff --git a/.travis.yml b/.travis.yml index f5ce589..37362e8 100644 --- 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 index 3abc65e..9bdb782 100644 --- 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 index 549e654..39f9537 100644 --- a/project.clj +++ b/project.clj @@ -15,14 +15,14 @@ [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]}}} @@ -30,7 +30,9 @@ ["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 index 3ef84a9..af9d47b 100644 --- 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")))