Merge branch 'poernahi-extends-component'

CHANGELOG.md

@@ -5,6 +5,7 @@
 **[compare](https://github.com/reagent-project/reagent/compare/v0.8.1...master)**
 
 - Fix using metadata to set React key with Fragment shortcut (`:<>`) ([#401](https://github.com/reagent-project/reagent/issues/401))
+- Create React Component without `create-react-class`
 
 ## 0.8.1 (2018-05-15)
 

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}}}})

package.json

@@ -2,7 +2,6 @@
   "private": true,
   "dependencies": {
     "@cljs-oss/module-deps": "1.1.1",
-    "create-react-class": "15.6.3",
     "prop-types": "15.6.2",
     "react": "16.6.0",
     "react-dom": "16.6.0"

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/react-dom-server "16.6.0-0"]]
-                 [cljsjs/create-react-class "15.6.3-1"]]
 
   :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

@@ -1,5 +1,5 @@
 (ns reagent.impl.component
-  (:require [create-react-class :as create-react-class]
+  (:require [goog.object :as gobj]
             [react :as react]
             [reagent.impl.util :as util]
             [reagent.impl.batching :as batch]
@@ -156,9 +156,10 @@
     :getDefaultProps
     (throw (js/Error. "getDefaultProps not supported"))
 
+    ;; In ES6 React, this is now part of the constructor
     :getInitialState
-    (fn getInitialState []
+    (fn getInitialState [c]
-      (this-as c (reset! (state-atom c) (.call f c c))))
+      (reset! (state-atom c) (.call f c c)))
 
     :componentWillReceiveProps
     (fn componentWillReceiveProps [nextprops]
@@ -257,7 +258,6 @@
                         {} fmap)]
     (assoc fmap
            :displayName name
-           :autobind false
            :cljsLegacyRender legacy-render
            :reagentRender render-fun
            :render (:render static-fns))))
@@ -272,14 +272,50 @@
   (-> body
       camelify-map-keys
       add-obligatory
-      wrap-funs
+      wrap-funs))
-      map-to-js))
 
-(defn create-class [body]
+;; Idea from:
+;; https://gist.github.com/pesterhazy/2a25c82db0519a28e415b40481f84554
+;; https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533#file-es6-class-cljs-L18
+
+(def built-in-static-method-names
+  [:childContextTypes :contextTypes
+   :getDerivedStateFromProps :getDerivedStateFromError])
+
+(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)]}
-  (->> body
+  (let [body (cljsify body)
-       cljsify
+        methods (map-to-js (apply dissoc body :displayName :getInitialState built-in-static-method-names))
-       create-react-class))
+        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
+(def ndiv (let [cmp (fn [])]
-            #js {:displayName "ndiv"
+            (gobj/extend
-                 :render
+              (.-prototype cmp)
-                 (fn []
+              (.-prototype react/Component)
-                   (this-as
+              #js {:render (fn []
-                     this
+                             (this-as
-                     (r/create-element
+                               this
-                       "div" #js{:className ($ this :props.className)}
+                               (r/create-element
-                       ($ this :props.children))))}))
+                                 "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")