From 2f5f153f68e157f8144433d7210529fabdb542be 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 | 93 ++++++++++++++++++------------------ 4 files changed, 63 insertions(+), 51 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..6238367 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,49 +22,50 @@ #?(: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 - (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 - (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 - ;; an element have changed. We detect this and render - ;; element as-is, hoping that next onChange will - ;; eventually come and bring our modifications anyways. - ;; Ignoring this causes skipped letters in controlled - ;; components - ;; https://github.com/facebook/react/issues/7027 - ;; https://github.com/reagent-project/reagent/issues/253 - ;; https://github.com/tonsky/rum/issues/86 - ;; TODO: Find a better solution, since this conflicts - ;; with controlled/uncontrolled inputs. - ;; 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))))}))) + (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] + (this-as this + (when-let [handler (.-onChange (.-props this))] + (handler event) + (update-state + this (.-props this) property + (object/getValueByKeys event "target" property))))) + + (componentWillReceiveProps [this new-props] + (this-as this + (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 + ;; an element have changed. We detect this and render + ;; element as-is, hoping that next onChange will + ;; eventually come and bring our modifications anyways. + ;; Ignoring this causes skipped letters in controlled + ;; components + ;; https://github.com/facebook/react/issues/7027 + ;; https://github.com/reagent-project/reagent/issues/253 + ;; https://github.com/tonsky/rum/issues/86 + ;; TODO: Find a better solution, since this conflicts + ;; with controlled/uncontrolled inputs. + ;; 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 [this] + (this-as 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")))