Skip to content

Commit 3dfd110

Browse files
author
Michael Trotter
committed
Update types, distinguish initialState from state until make is called
1 parent a51415a commit 3dfd110

5 files changed

Lines changed: 75 additions & 103 deletions

File tree

‎examples/component/src/Container.purs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module Container where
22

33
import Prelude
44

5-
import React.Basic (JSX, StatelessComponent, createStatelessComponent, makeStateless)
5+
import React.Basic (Component, JSX, createComponent, makeStateless)
66
import React.Basic.DOM as R
77
import ToggleButton as ToggleButton
88

@@ -15,5 +15,5 @@ render = unit # makeStateless component \_ ->
1515
]
1616
}
1717

18-
component :: StatelessComponent
19-
component = createStatelessComponent "Container"
18+
component :: Component
19+
component = createComponent "Container"

‎generated-docs/React/Basic.md‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
#### `Component`
44

55
``` purescript
6-
type Component = forall props state action. ComponentSpec props state action
6+
type Component = forall props state action. ComponentSpec props state Void action
77
```
88

9-
#### `StatelessComponent`
9+
#### `ComponentSpec`
1010

1111
``` purescript
12-
type StatelessComponent = forall props. ComponentSpec props Void Void
12+
type ComponentSpec props state initialState action = { "$$type" :: ComponentType props state action, initialState :: initialState, shouldUpdate :: LimitedSelf props state -> props -> state -> Boolean, didMount :: Self props state action -> Effect Unit, didUpdate :: Self props state action -> Effect Unit, willUnmount :: LimitedSelf props state -> Effect Unit, update :: Update props state action, render :: Self props state action -> JSX }
1313
```
1414

15-
#### `ComponentSpec`
15+
#### `ComponentType`
1616

1717
``` purescript
18-
type ComponentSpec props state action = { "$$type" :: ReactComponent props, initialState :: state, shouldUpdate :: LimitedSelf props state -> props -> state -> Boolean, didMount :: Self props state action -> Effect Unit, didUpdate :: Self props state action -> Effect Unit, willUnmount :: LimitedSelf props state -> Effect Unit, update :: Update props state action, render :: Self props state action -> JSX }
18+
data ComponentType props state action
1919
```
2020

2121
#### `JSX`
@@ -75,7 +75,7 @@ data ReactComponentInstance
7575
#### `make`
7676

7777
``` purescript
78-
make :: forall props state action. ComponentSpec props state action -> props -> JSX
78+
make :: forall props state action. ComponentSpec props state state action -> props -> JSX
7979
```
8080

8181
Turn a `ComponentSpec` into a usable render function.
@@ -112,7 +112,7 @@ component = createComponent "Counter"
112112
#### `makeStateless`
113113

114114
``` purescript
115-
makeStateless :: forall props. ComponentSpec props Void Void -> (props -> JSX) -> props -> JSX
115+
makeStateless :: forall props. ComponentSpec props Void Void Void -> (props -> JSX) -> props -> JSX
116116
```
117117

118118
Helper to make stateless component definition slightly
@@ -139,17 +139,9 @@ Note: potential failure should be handled and converted to an
139139
#### `createComponent`
140140

141141
``` purescript
142-
createComponent :: String -> { "$$type" :: forall props. ReactComponent props, initialState :: forall state. state, shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean, didMount :: forall props state action. Self props state action -> Effect Unit, didUpdate :: forall props state action. Self props state action -> Effect Unit, willUnmount :: forall props state action. LimitedSelf props state -> Effect Unit, update :: forall props state action. Update props state action, render :: forall props state action. Self props state action -> JSX }
142+
createComponent :: forall props state action. String -> ComponentSpec props state Void action
143143
```
144144

145-
#### `createStatelessComponent`
146-
147-
``` purescript
148-
createStatelessComponent :: String -> { "$$type" :: forall props. ReactComponent props, initialState :: Void, shouldUpdate :: forall props. LimitedSelf props Void -> props -> Void -> Boolean, didMount :: forall props. Self props Void Void -> Effect Unit, didUpdate :: forall props. Self props Void Void -> Effect Unit, willUnmount :: forall props. LimitedSelf props Void -> Effect Unit, update :: forall props. Update props Void Void, render :: forall props. Self props Void Void -> JSX }
149-
```
150-
151-
Creates a named, stateless component
152-
153145
#### `empty`
154146

155147
``` purescript
@@ -207,7 +199,7 @@ For more information see: https://reactjs.org/docs/reconciliation.html#keys
207199
#### `toReactComponent`
208200

209201
``` purescript
210-
toReactComponent :: forall props. ({ | props } -> JSX) -> ReactComponent { | props }
202+
toReactComponent :: forall props state action. ComponentSpec { | props } state state action -> ReactComponent { | props }
211203
```
212204

213205

‎generated-docs/React/Basic/Compat.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,22 @@ Semigroup JSX
6161
Monoid JSX
6262
```
6363

64+
#### `ComponentSpec`
65+
66+
``` purescript
67+
type ComponentSpec props state initialState action = { "$$type" :: ComponentType props state action, initialState :: initialState, shouldUpdate :: LimitedSelf props state -> props -> state -> Boolean, didMount :: Self props state action -> Effect Unit, didUpdate :: Self props state action -> Effect Unit, willUnmount :: LimitedSelf props state -> Effect Unit, update :: Update props state action, render :: Self props state action -> JSX }
68+
```
69+
6470
#### `toReactComponent`
6571

6672
``` purescript
67-
toReactComponent :: forall props. ({ | props } -> JSX) -> ReactComponent { | props }
73+
toReactComponent :: forall props state action. ComponentSpec { | props } state state action -> ReactComponent { | props }
6874
```
6975

7076
#### `makeStateless`
7177

7278
``` purescript
73-
makeStateless :: forall props. ComponentSpec props Void Void -> (props -> JSX) -> props -> JSX
79+
makeStateless :: forall props. ComponentSpec props Void Void Void -> (props -> JSX) -> props -> JSX
7480
```
7581

7682
Helper to make stateless component definition slightly
@@ -85,7 +91,7 @@ component = createStatelessComponent "Xyz"
8591
#### `make`
8692

8793
``` purescript
88-
make :: forall props state action. ComponentSpec props state action -> props -> JSX
94+
make :: forall props state action. ComponentSpec props state state action -> props -> JSX
8995
```
9096

9197
Turn a `ComponentSpec` into a usable render function.
@@ -165,17 +171,9 @@ element :: forall props. ReactComponent { | props } -> { | props } -> JSX
165171

166172
Create a `JSX` node from a React component, by providing the props.
167173

168-
#### `createStatelessComponent`
169-
170-
``` purescript
171-
createStatelessComponent :: String -> { "$$type" :: forall props. ReactComponent props, initialState :: Void, shouldUpdate :: forall props. LimitedSelf props Void -> props -> Void -> Boolean, didMount :: forall props. Self props Void Void -> Effect Unit, didUpdate :: forall props. Self props Void Void -> Effect Unit, willUnmount :: forall props. LimitedSelf props Void -> Effect Unit, update :: forall props. Update props Void Void, render :: forall props. Self props Void Void -> JSX }
172-
```
173-
174-
Creates a named, stateless component
175-
176174
#### `createComponent`
177175

178176
``` purescript
179-
createComponent :: String -> { "$$type" :: forall props. ReactComponent props, initialState :: forall state. state, shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean, didMount :: forall props state action. Self props state action -> Effect Unit, didUpdate :: forall props state action. Self props state action -> Effect Unit, willUnmount :: forall props state action. LimitedSelf props state -> Effect Unit, update :: forall props state action. Update props state action, render :: forall props state action. Self props state action -> JSX }
177+
createComponent :: forall props state action. String -> ComponentSpec props state Void action
180178
```
181179

‎src/React/Basic.purs‎

Lines changed: 51 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module React.Basic
22
( Component
3-
, StatelessComponent
43
, ComponentSpec
54
, ComponentType
65
, JSX
@@ -14,7 +13,6 @@ module React.Basic
1413
, makeStateless
1514
, asyncEffects
1615
, createComponent
17-
, createStatelessComponent
1816
, empty
1917
, keyed
2018
, fragment
@@ -45,9 +43,9 @@ instance monoidJSX :: Monoid JSX where
4543

4644
data ComponentType props state action
4745

48-
type ComponentSpec props state action =
46+
type ComponentSpec props state initialState action =
4947
{ "$$type" :: ComponentType props state action
50-
, initialState :: state
48+
, initialState :: initialState
5149
, shouldUpdate :: LimitedSelf props state -> props -> state -> Boolean
5250
, didMount :: Self props state action -> Effect Unit
5351
, didUpdate :: Self props state action -> Effect Unit
@@ -56,9 +54,7 @@ type ComponentSpec props state action =
5654
, render :: Self props state action -> JSX
5755
}
5856

59-
type Component = forall props state action. ComponentSpec props state action
60-
61-
type StatelessComponent = forall props. ComponentSpec props Void Void
57+
type Component = forall props state action. ComponentSpec props state Void action
6258

6359
type Update props state action
6460
= Self props state action
@@ -71,6 +67,25 @@ data StateUpdate props state action
7167
| SideEffects (Self props state action -> Effect Unit)
7268
| UpdateAndSideEffects state (Self props state action -> Effect Unit)
7369

70+
type Self props state action =
71+
{ props :: props
72+
, state :: state
73+
, readProps :: Effect props
74+
, readState :: Effect state
75+
, send :: action -> Effect Unit
76+
77+
-- | Unsafe, but still frequently better than rewriting a
78+
-- | whold component in JS
79+
, instance_ :: ReactComponentInstance
80+
}
81+
82+
type LimitedSelf props state =
83+
{ props :: props
84+
, state :: state
85+
}
86+
87+
data ReactComponentInstance
88+
7489
-- | Convenience function for sending an action asynchronously.
7590
-- |
7691
-- | Note: potential failure should be handled and converted to an
@@ -146,7 +161,7 @@ buildStateUpdate = case _ of
146161
-- | ```
147162
foreign import make
148163
:: forall props state action
149-
. ComponentSpec props state action
164+
. ComponentSpec props state state action
150165
-> props
151166
-> JSX
152167

@@ -160,78 +175,31 @@ foreign import make
160175
-- | ```
161176
makeStateless
162177
:: forall props
163-
. ComponentSpec props Void Void
178+
. ComponentSpec props Void Void Void
164179
-> (props -> JSX)
165180
-> props
166181
-> JSX
167182
makeStateless component render =
168183
make component { render = \self -> render self.props }
169184

170-
type Self props state action =
171-
{ props :: props
172-
, state :: state
173-
, readProps :: Effect props
174-
, readState :: Effect state
175-
, send :: action -> Effect Unit
176-
177-
-- | Unsafe, but still frequently better than rewriting a
178-
-- | whold component in JS
179-
, instance_ :: ReactComponentInstance
180-
}
181-
182-
type LimitedSelf props state =
183-
{ props :: props
184-
, state :: state
185-
}
186-
187185
data ReactComponent props
188186

189-
data ReactComponentInstance
190-
191187
createComponent
192-
:: String
193-
-> { "$$type" :: forall props state action. ComponentType props state action
194-
, initialState :: forall state. state
195-
, shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean
196-
, didMount :: forall props state action. Self props state action -> Effect Unit
197-
, didUpdate :: forall props state action. Self props state action -> Effect Unit
198-
, willUnmount :: forall props state action. LimitedSelf props state -> Effect Unit
199-
, update :: forall props state action. Update props state action
200-
, render :: forall props state action. Self props state action -> JSX
201-
}
188+
:: forall props state action
189+
. String
190+
-> ComponentSpec props state Void action
202191
createComponent = runFn3 createComponent_ NoUpdate buildStateUpdate
203192

204193
foreign import createComponent_
205-
:: Fn3
206-
(forall props state action. StateUpdate props state action)
207-
(forall props state action. StateUpdate props state action
194+
:: forall props state action
195+
. Fn3
196+
(StateUpdate props state action)
197+
(StateUpdate props state action
208198
-> { state :: Nullable state
209199
, effects :: Nullable (Self props state action -> Effect Unit)
210200
})
211201
String
212-
({ "$$type" :: forall props state action. ComponentType props state action
213-
, initialState :: forall state. state
214-
, shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean
215-
, didMount :: forall props state action. Self props state action -> Effect Unit
216-
, didUpdate :: forall props state action. Self props state action -> Effect Unit
217-
, willUnmount :: forall props state action. LimitedSelf props state -> Effect Unit
218-
, update :: forall props state action. Update props state action
219-
, render :: forall props state action. Self props state action -> JSX
220-
})
221-
222-
-- | Creates a named, stateless component
223-
createStatelessComponent
224-
:: String
225-
-> { "$$type" :: forall props state action. ComponentType props Void Void
226-
, initialState :: Void
227-
, shouldUpdate :: forall props. LimitedSelf props Void -> props -> Void -> Boolean
228-
, didMount :: forall props. Self props Void Void -> Effect Unit
229-
, didUpdate :: forall props. Self props Void Void -> Effect Unit
230-
, willUnmount :: forall props. LimitedSelf props Void -> Effect Unit
231-
, update :: forall props. Update props Void Void
232-
, render :: forall props. Self props Void Void -> JSX
233-
}
234-
createStatelessComponent = createComponent
202+
(ComponentSpec props state Void action)
235203

236204
-- | An empty node. This is often useful when you would like to conditionally
237205
-- | show something, but you don't want to (or can't) modify the `children` prop
@@ -267,14 +235,28 @@ element = runFn2 element_
267235

268236
-- | Like `element`, plus a `key` for rendering components in a dynamic list.
269237
-- | For more information see: https://reactjs.org/docs/reconciliation.html#keys
270-
elementKeyed :: forall props. ReactComponent { | props } -> { key :: String | props } -> JSX
238+
elementKeyed
239+
:: forall props
240+
. ReactComponent { | props }
241+
-> { key :: String | props }
242+
-> JSX
271243
elementKeyed = runFn2 elementKeyed_
272244

273-
foreign import element_ :: forall props. Fn2 (ReactComponent { | props }) { | props } JSX
245+
foreign import element_
246+
:: forall props
247+
. Fn2 (ReactComponent { | props }) { | props } JSX
274248

275-
foreign import elementKeyed_ :: forall props. Fn2 (ReactComponent { | props }) { key :: String | props } JSX
249+
foreign import elementKeyed_
250+
:: forall props
251+
. Fn2 (ReactComponent { | props }) { key :: String | props } JSX
276252

277-
foreign import toReactComponent :: forall props state action. ComponentSpec { | props } state action -> ReactComponent { | props }
253+
foreign import toReactComponent
254+
:: forall props state action
255+
. ComponentSpec { | props } state state action
256+
-> ReactComponent { | props }
278257

279-
displayName :: forall props state action. ComponentSpec props state action -> String
258+
displayName
259+
:: forall props state initialState action
260+
. ComponentSpec props state initialState action
261+
-> String
280262
displayName = _.displayName <<< unsafeCoerce <<< _."$$type"

‎src/React/Basic/Compat.purs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module React.Basic.Compat
88
import Prelude
99

1010
import Effect (Effect)
11-
import React.Basic (JSX, ReactComponent, Self, StateUpdate(..), createComponent, createStatelessComponent, element, elementKeyed, empty, fragment, fragmentKeyed, make, makeStateless, toReactComponent)
11+
import React.Basic (JSX, ReactComponent, Self, StateUpdate(..), ComponentSpec, createComponent, element, elementKeyed, empty, fragment, fragmentKeyed, make, makeStateless, toReactComponent)
1212

1313
type Component = ReactComponent
1414

@@ -44,6 +44,6 @@ stateless
4444
}
4545
-> ReactComponent { | props }
4646
stateless { displayName, render } =
47-
toReactComponent (createStatelessComponent displayName)
47+
toReactComponent (createComponent displayName)
4848
{ render = \self -> render self.props
4949
}

0 commit comments

Comments
 (0)