status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'poernahi-extends-component'

This commit is contained in:
Juho Teperi 2018-12-31 10:42:58 +02:00
parent d28b16e11d 0bad02c17e
commit 3a69df6f2c
7 changed files with 638 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

1
examples/material-ui/project.clj
View File

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

1247
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -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"

7
project.clj
View File

@ -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"]

56
src/reagent/impl/component.cljs
View File

@ -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 []
(this-as c (reset! (state-atom c) (.call f c c))))
(fn getInitialState [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
map-to-js))
wrap-funs))
(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
cljsify
create-react-class))
(let [body (cljsify body)
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

30
test/reagenttest/testreagent.cljs
View File

@ -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")