Skip to content

Commit 2133f7c

Browse files
andreypoppandreypopp
committed
Remove separation between stateful and stateless components
We probably will take this back when we are going to be ready with components handles API.
1 parent 06de068 commit 2133f7c

File tree

3 files changed

+57
-160
lines changed

3 files changed

+57
-160
lines changed

‎example/app/app.purs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ helloInConsole = do
88
props <- getProps
99
trace ("Hello, " ++ props.name ++ "!")
1010

11-
hello = mkUI do
11+
hello = mkUI spec do
1212
props <- getProps
1313
return $ DOM.h1 {
1414
className: "Hello",
@@ -22,7 +22,7 @@ incrementCounter = do
2222
val <- readState
2323
writeState (val + 1)
2424

25-
counter = mkStatefulUI 0 do
25+
counter = mkUI spec { getInitialState = return 0 } do
2626
val <- readState
2727
return $ DOM.p {
2828
className: "Counter",

‎example/tutorial/tutorial.purs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ module Tutorial where
1919
, commentForm { onCommentSubmit: handle commentSubmit }
2020
]
2121

22-
commentBox = mkStatefulUIFromSpec [] cBoxRender $
23-
defaultStatefulSpec {
22+
commentBox = mkUI spec {
23+
getInitialState = return [],
2424
componentWillMount = componentWillMount
25-
}
25+
} cBoxRender
2626

2727
foreign import componentWillMount
2828
"function componentWillMount() {\
@@ -32,12 +32,12 @@ module Tutorial where
3232
\}" :: forall eff props state. ReadState eff props state {}
3333

3434

35-
commentList = mkUI do
35+
commentList = mkUI spec do
3636
props <- getProps
3737
pure $ DOM.div { className: "commentList" }
3838
(commentNodes <$> props.data')
3939

40-
commentForm = mkUI do
40+
commentForm = mkUI spec do
4141
props <- getProps
4242
pure $ DOM.form { className: "commentForm"
4343
, onSubmit: handle submit
@@ -58,7 +58,7 @@ module Tutorial where
5858
[]
5959
]
6060

61-
comment = mkUI do
61+
comment = mkUI spec do
6262
props <- getProps
6363
pure $ DOM.div { className: "comment" }
6464
[ DOM.h2 { className: "commentAuthor" }

‎src/React.purs

Lines changed: 49 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module React where
1010
foreign import data EventHandler :: * -> *
1111

1212
foreign import noop0
13-
"function noop0() {}"
13+
"function noop0() { return null; }"
1414
:: forall eff result. Eff ( eff ) result
1515

1616
foreign import noop1
@@ -21,26 +21,11 @@ module React where
2121
"var noop2 = noop0"
2222
:: forall a b eff result. a -> b -> Eff ( eff ) result
2323

24-
type Render props = Eff (p :: ReadPropsEff props) UI
25-
2624
type ReadProps eff props result = Eff (
2725
p :: ReadPropsEff props
2826
| eff
2927
) result
3028

31-
type ShouldComponentUpdate props =
32-
props -> Eff ( p :: ReadPropsEff props ) Boolean
33-
34-
type UISpec eff props =
35-
{ componentWillMount :: ReadProps eff props {}
36-
, componentDidMount :: ReadProps eff props {}
37-
, componentWillReceiveProps :: props -> ReadProps eff props {}
38-
, shouldComponentUpdate :: ShouldComponentUpdate props
39-
, componentWillUpdate :: props -> ReadProps eff props {}
40-
, componentDidUpdate :: props -> ReadProps eff props {}
41-
, componentWillUnmount :: ReadProps eff props {}
42-
}
43-
4429
type ReadState eff props state result = Eff (
4530
p :: ReadPropsEff props,
4631
r :: ReadStateEff state
@@ -54,43 +39,33 @@ module React where
5439
| eff
5540
) result
5641

57-
type StatefulRender props state = Eff (
42+
type Render props state = Eff (
5843
p :: ReadPropsEff props,
5944
r :: ReadStateEff state
6045
) UI
6146

62-
type StatefulShouldComponentUpdate props state =
47+
type ShouldComponentUpdate props state =
6348
props -> state -> Eff (
6449
p :: ReadPropsEff props,
6550
r :: ReadStateEff state,
6651
w :: WriteStateEff state
6752
) Boolean
6853

69-
type StatefulUISpec eff props state =
70-
{ componentWillMount :: ReadState eff props state {}
54+
type UISpec eff props state =
55+
{ getInitialState :: ReadProps eff props state
56+
, componentWillMount :: ReadState eff props state {}
7157
, componentDidMount :: ReadWriteState eff props state {}
7258
, componentWillReceiveProps :: props -> ReadWriteState eff props state {}
73-
, shouldComponentUpdate :: StatefulShouldComponentUpdate props state
59+
, shouldComponentUpdate :: ShouldComponentUpdate props state
7460
, componentWillUpdate :: props -> state -> ReadWriteState eff props state {}
7561
, componentDidUpdate :: props -> state -> ReadState eff props state {}
7662
, componentWillUnmount :: ReadState eff props state {}
7763
}
7864

79-
defaultSpec =
80-
{ componentWillMount: noop0
81-
, componentDidMount: noop0
82-
, componentWillReceiveProps: noop1
83-
, shouldComponentUpdate: updateAlways
84-
, componentWillUpdate: noop2
85-
, componentDidUpdate: noop2
86-
, componentWillUnmount: noop0
87-
}
88-
where
89-
updateAlways :: forall props. ShouldComponentUpdate props
90-
updateAlways props = return true
91-
92-
defaultStatefulSpec =
93-
{ componentWillMount: noop0
65+
spec :: forall eff props state. UISpec eff props state
66+
spec =
67+
{ getInitialState: noop0
68+
, componentWillMount: noop0
9469
, componentDidMount: noop0
9570
, componentWillReceiveProps: noop1
9671
, shouldComponentUpdate: updateAlways
@@ -99,33 +74,38 @@ module React where
9974
, componentWillUnmount: noop0
10075
}
10176
where
102-
updateAlways :: forall props state. StatefulShouldComponentUpdate props state
77+
updateAlways :: forall props state. ShouldComponentUpdate props state
10378
updateAlways props state = return true
10479

105-
foreign import mkUI
106-
" function mkUI(render) { \
107-
\ return React.createClass({ \
108-
\ render: function() { \
109-
\ __current = this; \
110-
\ try { \
111-
\ var ui = render.call(this); \
112-
\ } finally { \
113-
\ __current = null; \
114-
\ } \
115-
\ return ui; \
116-
\ } \
117-
\ }); \
80+
foreign import getProps
81+
" function getProps() { \
82+
\ return __current.props; \
11883
\ }"
119-
:: forall props.
120-
Render props
121-
-> (props -> UI)
84+
:: forall props eff.
85+
Eff (p :: ReadPropsEff props | eff) props
12286

123-
foreign import mkUIFromSpec
124-
" function mkUIFromSpec(render) { \
125-
\ return function(ss) { \
87+
foreign import writeState
88+
" function writeState(state) { \
89+
\ __current.replaceState({state: state}); \
90+
\ return function() { return state; } \
91+
\ }"
92+
:: forall state eff.
93+
state
94+
-> Eff (r :: ReadStateEff state, w :: WriteStateEff state | eff) state
95+
96+
foreign import readState
97+
" function readState() { \
98+
\ return __current.state.state; \
99+
\ }"
100+
:: forall state eff. Eff (r :: ReadStateEff state | eff) state
101+
102+
foreign import mkUI
103+
" var __current; \
104+
\ function mkUI(ss) { \
105+
\ return function(render) { \
126106
\ var specs = {}; \
127107
\ for (var s in ss) { \
128-
\ if (ps.hasOwnProperty(s)) { \
108+
\ if (ss.hasOwnProperty(s)) { \
129109
\ specs[s] = (function(impl) { \
130110
\ return function() { \
131111
\ __current = this; \
@@ -138,114 +118,31 @@ module React where
138118
\ })(ss[s]); \
139119
\ } \
140120
\ } \
121+
\ specs.getInitialState= function() { \
122+
\ __current = this; \
123+
\ try { \
124+
\ return {state: ss.getInitialState()}; \
125+
\ } finally { \
126+
\ __current = null; \
127+
\ } \
128+
\ }; \
141129
\ specs.render = function() { \
142130
\ __current = this; \
143131
\ try { \
144-
\ var ui = render(); \
132+
\ var ui = render.call(this); \
145133
\ } finally { \
146134
\ __current = null; \
147135
\ } \
148136
\ return ui; \
149137
\ }; \
150138
\ return React.createClass(specs); \
151-
\ }; \
152-
\ }"
153-
:: forall eff props.
154-
Render props
155-
-> UISpec eff props
156-
-> (props -> UI)
157-
158-
foreign import getProps
159-
" function getProps() { \
160-
\ return __current.props; \
161-
\ }"
162-
:: forall props eff.
163-
Eff (p :: ReadPropsEff props | eff) props
164-
165-
foreign import mkStatefulUI
166-
" var __current; \
167-
\ function mkStatefulUI(state) { \
168-
\ return function(render) { \
169-
\ return React.createClass({ \
170-
\ \
171-
\ getInitialState: function() { \
172-
\ return {state: state}; \
173-
\ }, \
174-
\ \
175-
\ render: function() { \
176-
\ __current = this; \
177-
\ try { \
178-
\ var ui = render.call(this); \
179-
\ } finally { \
180-
\ __current = null; \
181-
\ } \
182-
\ return ui; \
183-
\ } \
184-
\ }); \
185-
\ }; \
186-
\ }"
187-
:: forall props state.
188-
state
189-
-> StatefulRender props state
190-
-> (props -> UI)
191-
192-
foreign import mkStatefulUIFromSpec
193-
" var __current; \
194-
\ function mkStatefulUIFromSpec(state) { \
195-
\ return function(render) { \
196-
\ return function (ss) { \
197-
\ var specs = {}; \
198-
\ for (var s in ss) { \
199-
\ if (ss.hasOwnProperty(s)) { \
200-
\ specs[s] = (function(impl) { \
201-
\ return function() { \
202-
\ __current = this; \
203-
\ try { \
204-
\ return impl.apply(this, arguments); \
205-
\ } finally { \
206-
\ __current = null; \
207-
\ } \
208-
\ } \
209-
\ })(ss[s]); \
210-
\ } \
211-
\ } \
212-
\ specs.getInitialState = function() { \
213-
\ return {state: state}; \
214-
\ }; \
215-
\ specs.render = function() { \
216-
\ __current = this; \
217-
\ try { \
218-
\ var ui = render.call(this); \
219-
\ } finally { \
220-
\ __current = null; \
221-
\ } \
222-
\ return ui; \
223-
\ }; \
224-
\ return React.createClass(specs); \
225-
\ } \
226-
\ } \
139+
\ } \
227140
\ }"
228141
:: forall eff props state.
229-
state
230-
-> StatefulRender props state
231-
-> StatefulUISpec eff props state
142+
UISpec eff props state
143+
-> Render props state
232144
-> (props -> UI)
233145

234-
foreign import writeState
235-
" function writeState(state) { \
236-
\ __current.replaceState({state: state}); \
237-
\ return function() { return state; } \
238-
\ }"
239-
:: forall state eff.
240-
state
241-
-> Eff (r :: ReadStateEff state, w :: WriteStateEff state | eff) state
242-
243-
foreign import readState
244-
" function readState() { \
245-
\ return __current.state.state; \
246-
\ }"
247-
:: forall state eff. Eff (r :: ReadStateEff state | eff) state
248-
249146
type Event = { }
250147
type MouseEvent = { pageX :: Number, pageY :: Number }
251148

0 commit comments

Comments
 (0)