Clean new create-class and remove create-react-class from tests

examples/material-ui/project.clj

@@ -42,7 +42,6 @@
                 :install-deps true
                 :npm-deps {react "16.6.0"
                            react-dom "16.6.0"
-                           create-react-class "15.6.3"
                            "@material-ui/core" "3.1.1"
                            "@material-ui/icons" "3.0.1"}
                 :process-shim true}}}})

project.clj

@@ -9,13 +9,12 @@
                  ;; like react-leaflet might have closer dependency to a other version.
                  [cljsjs/react "16.6.0-0"]
                  [cljsjs/react-dom "16.6.0-0"]
-                 [cljsjs/react-dom-server "16.6.0-0"]
-                 [cljsjs/create-react-class "15.6.3-1"]]
+                 [cljsjs/react-dom-server "16.6.0-0"]]
 
   :plugins [[lein-cljsbuild "1.1.7"]
             [lein-doo "0.1.10"]
             [lein-codox "0.10.3"]
-            [lein-figwheel "0.5.17"]]
+            [lein-figwheel "0.5.18"]]
 
   :source-paths ["src"]
 
@@ -24,7 +23,7 @@
           :source-paths ["src"]}
 
   :profiles {:dev {:dependencies [[org.clojure/clojurescript "1.10.439"]
-                                  [figwheel "0.5.17"]
+                                  [figwheel "0.5.18"]
                                   [doo "0.1.10"]
                                   [cljsjs/prop-types "15.6.2-0"]]
                    :source-paths ["demo" "test" "examples/todomvc/src" "examples/simple/src" "examples/geometry/src"]

src/reagent/impl/component.cljs

@@ -274,42 +274,48 @@
       add-obligatory
       wrap-funs))
 
-;; Credits to Paulus Esterhazy, Thomas Heller
+;; Idea from:
 ;; https://gist.github.com/pesterhazy/2a25c82db0519a28e415b40481f84554
 ;; https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533#file-es6-class-cljs-L18
-(defn make-component
-  "Creates a React Component class
-  `m` is a js-obj of class methods
-  `s` is a js-obj of static methods"
-  ([display-name m s] (make-component display-name nil m s))
-  ([display-name construct m s]
-   (let [cmp (fn [props context updater]
-               (cljs.core/this-as this
-                 (.call react/Component this props context updater)
-                 (when construct
-                   (construct this))
-                 this))]
-     (gobj/extend (.-prototype cmp) (.-prototype react/Component) m)
-     (gobj/extend cmp react/Component s)
 
-     (when display-name
-       (set! (.-displayName cmp) display-name)
-       (set! (.-cljs$lang$ctorStr cmp) display-name)
-       (set! (.-cljs$lang$ctorPrWriter cmp)
-             (fn [this writer opt]
-               (cljs.core/-write writer display-name))))
-     (set! (.-cljs$lang$type cmp) true)
-     (set! (.. cmp -prototype -constructor) cmp))))
+(def built-in-static-method-names
+  [:childContextTypes :contextTypes
+   :getDerivedStateFromProps :getDerivedStateFromError])
 
-(defn create-class [body]
+(defn create-class
+  "Creates JS class based on provided Clojure map.
+
+  Map keys should use `React.Component` method names (https://reactjs.org/docs/react-component.html).
+  Constructor function is defined using key `:getInitialState`.
+
+  React built-in static methods or properties are automatically defined as statics."
+  [body]
   {:pre [(map? body)]}
   (let [body (cljsify body)
-        m (dissoc body :displayName :getInitialState :contextTypes :childContextTypes)
-        s (select-keys body [:childContextTypes :contextTypes])]
-    (make-component (:displayName body)
-                    (:getInitialState body)
-                    (map-to-js m)
-                    (map-to-js s))))
+        methods (map-to-js (apply dissoc body :displayName :getInitialState built-in-static-method-names))
+        static-methods (map-to-js (select-keys body built-in-static-method-names))
+        display-name (:displayName body)
+        construct (:getInitialState body)
+        cmp (fn [props context updater]
+              (this-as this
+                (.call react/Component this props context updater)
+                (when construct
+                  (construct this))
+                this))]
+    (gobj/extend (.-prototype cmp) (.-prototype react/Component) methods)
+    (gobj/extend cmp react/Component static-methods)
+
+    (when display-name
+      (set! (.-displayName cmp) display-name)
+      (set! (.-cljs$lang$ctorStr cmp) display-name)
+      (set! (.-cljs$lang$ctorPrWriter cmp)
+            (fn [this writer opt]
+              (cljs.core/-write writer display-name))))
+
+    (set! (.-cljs$lang$type cmp) true)
+    (set! (.. cmp -prototype -constructor) cmp)
+
+    cmp))
 
 (defn fiber-component-path [fiber]
   (let [name (some-> fiber

test/reagenttest/testreagent.cljs

@@ -1,7 +1,6 @@
 (ns reagenttest.testreagent
   (:require [cljs.test :as t :refer-macros [is deftest testing]]
             [react :as react]
-            [create-react-class :as create-react-class]
             [reagent.ratom :as rv :refer-macros [reaction]]
             [reagent.debug :as debug :refer-macros [dbg println log dev?]]
             [reagent.interop :refer-macros [$ $!]]
@@ -441,15 +440,18 @@
     (is (= (rstr (ae [:div [:div "foo"]]))
            (rstr (ae [:div (ce "div" nil "foo")]))))))
 
-(def ndiv (create-react-class
-            #js {:displayName "ndiv"
-                 :render
-                 (fn []
-                   (this-as
-                     this
-                     (r/create-element
-                       "div" #js{:className ($ this :props.className)}
-                       ($ this :props.children))))}))
+(def ndiv (let [cmp (fn [])]
+            (gobj/extend
+              (.-prototype cmp)
+              (.-prototype react/Component)
+              #js {:render (fn []
+                             (this-as
+                               this
+                               (r/create-element
+                                 "div" #js {:className ($ this :props.className)}
+                                 ($ this :props.children))))})
+            (gobj/extend cmp react/Component)
+            cmp))
 
 (deftest test-adapt-class
   (let [d1 (r/adapt-react-class ndiv)
@@ -990,7 +992,13 @@
             comp4 (fn comp4 []
                     (for [i (range 0 1)]
                       [:p "foo"]))
-            nat (create-react-class #js {:render (fn [])})
+            nat (let [cmp (fn [])]
+                  (gobj/extend
+                    (.-prototype cmp)
+                    (.-prototype react/Component)
+                    #js {:render (fn [])})
+                  (gobj/extend cmp react/Component)
+                  cmp)
             pkg "reagenttest.testreagent."
             stack1 (str "in " pkg "comp1")
             stack2 (str "in " pkg "comp2 > " pkg "comp1")