Skip to content

Commit 26cb2ce

Browse files
committed
Explicit render parameters when making components from spec
Render is require for all React components so we make it a parameter for mkUIFromSpec and mkStatefulUIFromSpec. Now their types correspond to mkUI and mkStatefulUI but with an additional spec parameter: mkUIFromSpec :: forall props. Render props -> UISpec props -> (props -> UI) mkStatefulUIFromSpec :: forall props state. state -> StatefulRender props state -> StatefulUISpec props state -> (props -> UI)
1 parent f67401c commit 26cb2ce

File tree

2 files changed

+65
-68
lines changed

2 files changed

+65
-68
lines changed

example/tutorial/tutorial.purs

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,9 @@ module Tutorial where
1717
, commentList { data': state }
1818
, commentForm { onCommentSubmit: handle commentSubmit }
1919
]
20-
foreign import initialState
21-
"function initialState() { return {state: []}; }" :: forall a b. a -> b
2220

23-
commentBox = mkStatefulUIFromSpec $
24-
defaultStatefulSpec { getInitialState = initialState
25-
, componentWillMount = componentWillMount
26-
, render = cBoxRender
27-
}
21+
commentBox = mkStatefulUIFromSpec [] cBoxRender $
22+
defaultStatefulSpec { componentWillMount = componentWillMount }
2823

2924
commentList = mkUI do
3025
props <- getProps

src/React.purs

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ type UISpec props = forall r.
1515

1616
type StatefulRender props state = Eff (p :: ReactProps props, r :: ReadReactState state) UI
1717
type StatefulUISpec props state = forall a r.
18-
{ render :: StatefulRender props state
19-
, getInitialState :: {} -> state
20-
, componentWillMount :: {} -> {}
18+
{ componentWillMount :: {} -> {}
2119
, componentDidMount :: {} -> {}
2220
, componentWillReceiveProps :: props -> {}
2321
, shouldComponentUpdate :: props -> state -> Boolean
@@ -27,9 +25,7 @@ type StatefulUISpec props state = forall a r.
2725
}
2826

2927
defaultStatefulSpec =
30-
{ render: defaultRender
31-
, getInitialState: \_ -> {}
32-
, componentWillMount: \_ -> {}
28+
{ componentWillMount: \_ -> {}
3329
, componentDidMount: \_ -> {}
3430
, componentWillReceiveProps: \_ -> {}
3531
, shouldComponentUpdate: \_ _ -> true
@@ -38,51 +34,48 @@ defaultStatefulSpec =
3834
, componentWillUnmount: \_ -> {}
3935
}
4036

41-
foreign import defaultRender
42-
" function defaultRender() { \
43-
\ return React.DOM.p({}); \
44-
\ }"
45-
:: forall props state. StatefulRender props state
46-
4737
foreign import mkUI
48-
" function mkUI(render) { \
49-
\ return React.createClass({ \
50-
\ render: function() { \
51-
\ __current = this; \
52-
\ try { \
53-
\ var ui = render(); \
54-
\ } finally { \
55-
\ __current = null; \
56-
\ } \
57-
\ return ui; \
58-
\ } \
59-
\ }); \
38+
" function mkUI(render) { \
39+
\ return React.createClass({ \
40+
\ render: function() { \
41+
\ __current = this; \
42+
\ try { \
43+
\ var ui = render(); \
44+
\ } finally { \
45+
\ __current = null; \
46+
\ } \
47+
\ return ui; \
48+
\ } \
49+
\ }); \
6050
\ }"
6151
:: forall props.
6252
Render props
6353
-> (props -> UI)
6454

6555
foreign import mkUIFromSpec
66-
" function mkUIFromSpec(ps) { \
67-
\ var props = {}; \
68-
\ for (var p in ps) { \
69-
\ if (ps.hasOwnProperty(p)) { \
70-
\ props[p] = ps[p]; \
71-
\ } \
72-
\ } \
73-
\ props.render = function() { \
74-
\ __current = this; \
75-
\ try { \
76-
\ var ui = ps.render(); \
77-
\ } finally { \
78-
\ __current = null; \
79-
\ } \
80-
\ return ui; \
81-
\ }; \
82-
\ return React.createClass(props); \
56+
" function mkUIFromSpec(render) { \
57+
\ return function(ss) { \
58+
\ var props = {}; \
59+
\ for (var p in ps) { \
60+
\ if (ps.hasOwnProperty(p)) { \
61+
\ props[p] = ps[p]; \
62+
\ } \
63+
\ } \
64+
\ props.render = function() { \
65+
\ __current = this; \
66+
\ try { \
67+
\ var ui = render(); \
68+
\ } finally { \
69+
\ __current = null; \
70+
\ } \
71+
\ return ui; \
72+
\ }; \
73+
\ return React.createClass(props); \
74+
\ }; \
8375
\ }"
8476
:: forall props.
85-
UISpec props
77+
Render props
78+
-> UISpec props
8679
-> (props -> UI)
8780

8881
foreign import getProps
@@ -120,27 +113,36 @@ foreign import mkStatefulUI
120113
-> (props -> UI)
121114

122115
foreign import mkStatefulUIFromSpec
123-
" var __current; \
124-
\ function mkStatefulUIFromSpec(ss) { \
125-
\ var specs = {}; \
126-
\ for (var s in ss) { \
127-
\ if (ss.hasOwnProperty(s)) { \
128-
\ specs[s] = ss[s]; \
129-
\ } \
130-
\ } \
131-
\ specs.render = function() { \
132-
\ __current = this; \
133-
\ try { \
134-
\ var ui = ss.render(); \
135-
\ } finally { \
136-
\ __current = null; \
137-
\ } \
138-
\ return ui; \
139-
\ }; \
140-
\ return React.createClass(specs); \
116+
" var __current; \
117+
\ function mkStatefulUIFromSpec(state) { \
118+
\ return function(render) { \
119+
\ return function (ss) { \
120+
\ var specs = {}; \
121+
\ for (var s in ss) { \
122+
\ if (ss.hasOwnProperty(s)) { \
123+
\ specs[s] = ss[s]; \
124+
\ } \
125+
\ } \
126+
\ specs.getInitialState = function() { \
127+
\ return state; \
128+
\ }; \
129+
\ specs.render = function() { \
130+
\ __current = this; \
131+
\ try { \
132+
\ var ui = render(); \
133+
\ } finally { \
134+
\ __current = null; \
135+
\ } \
136+
\ return ui; \
137+
\ }; \
138+
\ return React.createClass(specs); \
139+
\ } \
140+
\ } \
141141
\ }"
142142
:: forall props state.
143-
StatefulUISpec props state
143+
state
144+
-> StatefulRender props state
145+
-> StatefulUISpec props state
144146
-> (props -> UI)
145147

146148
foreign import writeState

0 commit comments

Comments
 (0)