From 2f9e91d6971616eba5bf719a7118034c82093916 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Tue, 13 Aug 2019 09:14:40 +0300 Subject: [PATCH] Add support for UNSAFE_ lifecycle methods & use for impl and tests --- package.json | 7 ++++-- project.clj | 6 ++--- src/deps.cljs | 4 ++-- src/reagent/impl/component.cljs | 37 +++++++++++++++++++++++++++---- src/reagent/impl/template.cljs | 4 ++-- src/reagent/impl/util.cljs | 10 ++++++++- test/reagent/impl/util_test.cljs | 14 ++++++++++++ test/reagenttest/testreagent.cljs | 12 +++++----- 8 files changed, 74 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 3451920..e252d8f 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,11 @@ "dependencies": { "@cljs-oss/module-deps": "1.1.1", "prop-types": "15.6.2", - "react": "16.8.6", - "react-dom": "16.8.6" + "react": "16.9.0", + "react-dom": "16.9.0" + }, + "scripts": { + "start": "lein figwheel client-npm" }, "devDependencies": { "gzip-size-cli": "3.0.0", diff --git a/project.clj b/project.clj index 2f69200..ba59ed8 100644 --- a/project.clj +++ b/project.clj @@ -7,9 +7,9 @@ ;; If :npm-deps enabled, these are used only for externs. ;; Without direct react dependency, other packages, ;; like react-leaflet might have closer dependency to a other version. - [cljsjs/react "16.8.6-0"] - [cljsjs/react-dom "16.8.6-0"] - [cljsjs/react-dom-server "16.8.6-0"]] + [cljsjs/react "16.9.0-0"] + [cljsjs/react-dom "16.9.0-0"] + [cljsjs/react-dom-server "16.9.0-0"]] :plugins [[lein-cljsbuild "1.1.7"] [lein-doo "0.1.11"] diff --git a/src/deps.cljs b/src/deps.cljs index 3c109f0..e949044 100644 --- a/src/deps.cljs +++ b/src/deps.cljs @@ -1,2 +1,2 @@ -{:npm-deps {"react" "16.8.6" - "react-dom" "16.8.6"}} +{:npm-deps {"react" "16.9.0" + "react-dom" "16.9.0"}} diff --git a/src/reagent/impl/component.cljs b/src/reagent/impl/component.cljs index 851ad05..916081e 100644 --- a/src/reagent/impl/component.cljs +++ b/src/reagent/impl/component.cljs @@ -167,10 +167,16 @@ (fn getInitialState [c] (reset! (state-atom c) (.call f c c))) + ;; Deprecated - warning in 16.9 will work through 17.x :componentWillReceiveProps (fn componentWillReceiveProps [nextprops] (this-as c (.call f c c (props-argv c nextprops)))) + ;; Deprecated - will work in 17.x + :UNSAFE_componentWillReceiveProps + (fn componentWillReceiveProps [nextprops] + (this-as c (.call f c c (props-argv c nextprops)))) + :shouldComponentUpdate (fn shouldComponentUpdate [nextprops nextstate] (or util/*always-update* @@ -188,14 +194,21 @@ noargv (.call f c c (get-argv c) (props-argv c nextprops)) :else (.call f c c old-argv new-argv)))))) + ;; Deprecated - warning in 16.9 will work through 17.x :componentWillUpdate (fn componentWillUpdate [nextprops] (this-as c (.call f c c (props-argv c nextprops)))) + ;; Deprecated - will work in 17.x + :UNSAFE_componentWillUpdate + (fn componentWillUpdate [nextprops] + (this-as c (.call f c c (props-argv c nextprops)))) + :componentDidUpdate (fn componentDidUpdate [oldprops] (this-as c (.call f c c (props-argv c oldprops)))) + ;; Deprecated - warning in 16.9 will work through 17.x :componentWillMount (fn componentWillMount [] (this-as c @@ -203,6 +216,14 @@ (when-not (nil? f) (.call f c c)))) + ;; Deprecated - will work in 17.x + :UNSAFE_componentWillMount + (fn componentWillMount [] + (this-as c + (set! (.-cljsMountOrder c) (batch/next-mount-count)) + (when-not (nil? f) + (.call f c c)))) + :componentDidMount (fn componentDidMount [] (this-as c (.call f c c))) @@ -230,18 +251,26 @@ ;; Though the value is nil here, the wrapper function will be ;; added to class to manage Reagent ratom lifecycle. (def obligatory {:shouldComponentUpdate nil - :componentWillMount nil + ;; Handled in add-oblifatory fn + ; :componentWillMount nil :componentWillUnmount nil}) -(def dash-to-camel (util/memoize-1 util/dash-to-camel)) +(def dash-to-method-name (util/memoize-1 util/dash-to-method-name)) (defn camelify-map-keys [fun-map] (reduce-kv (fn [m k v] - (assoc m (-> k dash-to-camel keyword) v)) + (assoc m (-> k dash-to-method-name keyword) v)) {} fun-map)) (defn add-obligatory [fun-map] - (merge obligatory fun-map)) + (merge obligatory + ;; If fun map contains the old name, without UNSAFE_ prefix, use that + ;; name, so user will get a warning. If no method use UNSAFE_ method + ;; for Reagent implementation. + (if (contains? fun-map :componentWillMount) + nil + {:UNSAFE_componentWillMount nil}) + fun-map)) (defn wrap-funs [fmap] (when (dev?) diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index 6fdf419..01b704a 100644 --- a/src/reagent/impl/template.cljs +++ b/src/reagent/impl/template.cljs @@ -46,7 +46,7 @@ (if (named? k) (if-some [k' (cache-get prop-name-cache (name k))] k' - (let [v (util/dash-to-camel k)] + (let [v (util/dash-to-prop-name k)] (gobj/set prop-name-cache (name k)) v)) k)) @@ -78,7 +78,7 @@ (if (named? k) (if-some [k' (cache-get custom-prop-name-cache (name k))] k' - (let [v (util/dash-to-camel k)] + (let [v (util/dash-to-prop-name k)] (gobj/set custom-prop-name-cache (name k) v) v)) k)) diff --git a/src/reagent/impl/util.cljs b/src/reagent/impl/util.cljs index a590c20..c055394 100644 --- a/src/reagent/impl/util.cljs +++ b/src/reagent/impl/util.cljs @@ -28,7 +28,7 @@ (string/upper-case s) (str (string/upper-case (subs s 0 1)) (subs s 1)))) -(defn dash-to-camel [dashed] +(defn dash-to-prop-name [dashed] (if (string? dashed) dashed (let [name-str (name dashed) @@ -37,6 +37,14 @@ name-str (apply str start (map capitalize parts)))))) +(defn dash-to-method-name [dashed] + (if (string? dashed) + dashed + (let [name-str (name dashed) + name-str (string/replace name-str #"(unsafe|UNSAFE)[-_]" "UNSAFE_") + [start & parts] (string/split name-str #"-")] + (apply str start (map capitalize parts))))) + (defn fun-name [f] (let [n (or (and (fn? f) (or (.-displayName f) diff --git a/test/reagent/impl/util_test.cljs b/test/reagent/impl/util_test.cljs index 311d4a3..3c312bf 100644 --- a/test/reagent/impl/util_test.cljs +++ b/test/reagent/impl/util_test.cljs @@ -19,6 +19,20 @@ (is (= "a b c d" (util/class-names "a" "b" nil ["c" "d"])))) +(deftest dash-to-prop-name-test + (is (= "tabIndex" (util/dash-to-prop-name :tab-index))) + (is (= "data-foo-bar" (util/dash-to-prop-name :data-foo-bar)))) + +(deftest dash-to-method-name-test + (is (= "componentDidMount" + (util/dash-to-method-name :component-did-mount))) + (is (= "componentDidMount" + (util/dash-to-method-name :componentDidMount))) + (is (= "UNSAFE_componentDidMount" + (util/dash-to-method-name :unsafe-component-did-mount))) + (is (= "UNSAFE_componentDidMount" + (util/dash-to-method-name :unsafe_componentDidMount)))) + ; (simple-benchmark [] ; (do (util/class-names "a" "b") ; (util/class-names nil "a") diff --git a/test/reagenttest/testreagent.cljs b/test/reagenttest/testreagent.cljs index 2209ff6..aaae185 100644 --- a/test/reagenttest/testreagent.cljs +++ b/test/reagenttest/testreagent.cljs @@ -740,7 +740,7 @@ (reset! t (first args)) (add-args :initial-state args) {:foo "bar"}) - :component-will-mount + :UNSAFE_component-will-mount (fn [& args] (this-as c (is (= c (first args)))) (add-args :will-mount args)) @@ -752,11 +752,11 @@ (fn [& args] (this-as c (is (= c (first args)))) (add-args :should-update args) true) - :component-will-receive-props + :UNSAFE_component-will-receive-props (fn [& args] (this-as c (is (= c (first args)))) (add-args :will-receive args)) - :component-will-update + :UNSAFE_component-will-update (fn [& args] (this-as c (is (= c (first args)))) (add-args :will-update args)) @@ -839,7 +839,7 @@ (reset! oldprops (-> args first r/props)) (add-args :initial-state args) {:foo "bar"}) - :component-will-mount + :UNSAFE_component-will-mount (fn [& args] (this-as c (is (= c (first args)))) (add-args :will-mount args)) @@ -851,14 +851,14 @@ (fn [& args] (this-as c (is (= c (first args)))) (add-args :should-update args) true) - :component-will-receive-props + :UNSAFE_component-will-receive-props (fn [& args] (reset! newprops (-> args second second)) (this-as c (is (= c (first args))) (add-args :will-receive (into [(dissoc (r/props c) :children)] (:children (r/props c)))))) - :component-will-update + :UNSAFE_component-will-update (fn [& args] (this-as c (is (= c (first args)))) (add-args :will-update args))