/
Hooks.purs
327 lines (277 loc) · 7.99 KB
/
Hooks.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
module React.Basic.Hooks
( component
, componentWithChildren
, ReactChildren
, memo
, UseState
, useState
, UseEffect
, useEffect
, UseLayoutEffect
, useLayoutEffect
, UseReducer
, useReducer
, UseRef
, readRef
, readRefMaybe
, writeRef
, renderRef
, renderRefMaybe
, useRef
, UseContext
, useContext
, UseMemo
, useMemo
, UseCallback
, useCallback
, UseEqCache
, useEqCache
, UnsafeReference(..)
, displayName
, module React.Basic.Hooks.Internal
, module React.Basic
, module Data.Tuple.Nested
) where
import Prelude hiding (bind, discard)
import Data.Function.Uncurried (Fn2, mkFn2)
import Data.Maybe (Maybe)
import Data.Newtype (class Newtype)
import Data.Nullable (Nullable, toMaybe)
import Data.Tuple (Tuple(..))
import Data.Tuple.Nested (type (/\), (/\))
import Effect (Effect)
import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn3, mkEffectFn1, runEffectFn1, runEffectFn2, runEffectFn3)
import Prelude (bind) as Prelude
import Prim.Row (class Lacks)
import React.Basic (JSX, ReactComponent, ReactContext, Ref, consumer, contextConsumer, contextProvider, createContext, element, elementKeyed, empty, keyed, fragment, provider)
import React.Basic.Hooks.Internal (Hook, Pure, Render, bind, discard, coerceHook, unsafeHook, unsafeRenderEffect)
import Unsafe.Coerce (unsafeCoerce)
import Unsafe.Reference (unsafeRefEq)
-- | Create a React component given a display name and render function.
-- | Creating components is effectful because React uses the function
-- | instance as the component's "identity" or "type". Components should
-- | be created during a bootstrap phase and not within component
-- | lifecycles or render functions. See `componentWithChildren` if
-- | you need to use the `children` prop.
component ::
forall hooks props.
Lacks "children" props =>
Lacks "key" props =>
Lacks "ref" props =>
String ->
({ | props } -> Render Unit hooks JSX) ->
Effect (ReactComponent { | props })
component = unsafeComponent
-- | Create a React component given a display name and render function.
-- | This is the same as `component` but allows the use of the `children`
-- | prop.
componentWithChildren ::
forall hooks props children.
Lacks "key" props =>
Lacks "ref" props =>
String ->
({ children :: ReactChildren children | props } -> Render Unit hooks JSX) ->
Effect (ReactComponent { children :: ReactChildren children | props })
componentWithChildren = unsafeComponent
unsafeComponent ::
forall hooks props.
Lacks "key" props =>
Lacks "ref" props =>
String ->
({ | props } -> Render Unit hooks JSX) ->
Effect (ReactComponent { | props })
unsafeComponent name renderFn =
let
c =
unsafeReactFunctionComponent
( mkEffectFn1
( \props ->
unsafeDiscardRenderEffects (renderFn props)
)
)
in
runEffectFn2 unsafeSetDisplayName name c
unsafeDiscardRenderEffects :: forall x y a. Render x y a -> Effect a
unsafeDiscardRenderEffects = unsafeCoerce
unsafeReactFunctionComponent :: forall props. EffectFn1 props JSX -> ReactComponent props
unsafeReactFunctionComponent = unsafeCoerce
data ReactChildren a
foreign import reactChildrenToArray :: forall a. ReactChildren a -> Array a
reactChildrenFromArray :: forall a. Array a -> ReactChildren a
reactChildrenFromArray = unsafeCoerce
memo ::
forall props.
Effect (ReactComponent props) ->
Effect (ReactComponent props)
memo = flip Prelude.bind (runEffectFn1 memo_)
foreign import data UseState :: Type -> Type -> Type
useState ::
forall state.
state ->
Hook (UseState state) (state /\ ((state -> state) -> Effect Unit))
useState initialState =
unsafeHook do
runEffectFn2 useState_ (mkFn2 Tuple) initialState
foreign import data UseEffect :: Type -> Type -> Type
-- | The effect will be run when the component is mounted, and the effect
-- | returned from the function will be run on cleanup
useEffect ::
forall key.
Eq key =>
key ->
Effect (Effect Unit) ->
Hook (UseEffect key) Unit
useEffect key effect = unsafeHook (runEffectFn3 useEffect_ (mkFn2 eq) key effect)
foreign import data UseLayoutEffect :: Type -> Type -> Type
useLayoutEffect ::
forall key.
Eq key =>
key ->
Effect (Effect Unit) ->
Hook (UseLayoutEffect key) Unit
useLayoutEffect keys effect = unsafeHook (runEffectFn3 useLayoutEffect_ (mkFn2 eq) keys effect)
foreign import data UseReducer :: Type -> Type -> Type -> Type
useReducer ::
forall state action.
state ->
(state -> action -> state) ->
Hook (UseReducer state action) (state /\ (action -> Effect Unit))
useReducer initialState reducer =
unsafeHook do
runEffectFn3 useReducer_
(mkFn2 Tuple)
(mkFn2 reducer)
initialState
foreign import data UseRef :: Type -> Type -> Type
useRef :: forall a. a -> Hook (UseRef a) (Ref a)
useRef initialValue =
unsafeHook do
runEffectFn1 useRef_ initialValue
readRef :: forall a. Ref a -> Effect a
readRef = runEffectFn1 readRef_
readRefMaybe :: forall a. Ref (Nullable a) -> Effect (Maybe a)
readRefMaybe a = map toMaybe (readRef a)
writeRef :: forall a. Ref a -> a -> Effect Unit
writeRef = runEffectFn2 writeRef_
renderRef :: forall a. Ref a -> Pure a
renderRef ref = unsafeRenderEffect (readRef ref)
renderRefMaybe :: forall a. Ref (Nullable a) -> Pure (Maybe a)
renderRefMaybe a = unsafeRenderEffect (readRefMaybe a)
foreign import data UseContext :: Type -> Type -> Type
useContext :: forall a. ReactContext a -> Hook (UseContext a) a
useContext context = unsafeHook (runEffectFn1 useContext_ context)
foreign import data UseMemo :: Type -> Type -> Type -> Type
useMemo ::
forall key a.
Eq key =>
key ->
(Unit -> a) ->
Hook (UseMemo key a) a
useMemo key computeA = unsafeHook (runEffectFn3 useMemo_ (mkFn2 eq) key computeA)
foreign import data UseCallback :: Type -> Type -> Type -> Type
useCallback ::
forall key a.
Eq key =>
key ->
a ->
Hook (UseCallback key a) a
useCallback key computeA = unsafeHook (runEffectFn3 useCallback_ (mkFn2 eq) key computeA)
foreign import data UseEqCache :: Type -> Type -> Type
useEqCache ::
forall a.
Eq a =>
a ->
Hook (UseCallback a a) a
useEqCache a = unsafeHook (runEffectFn2 useEqCache_ (mkFn2 eq) a)
newtype UnsafeReference a
= UnsafeReference a
derive instance newtypeUnsafeReference :: Newtype (UnsafeReference a) _
instance eqUnsafeReference :: Eq (UnsafeReference a) where
eq = unsafeRefEq
-- | Retrieve the Display Name from a `ReactComponent`. Useful for debugging and improving
-- | error messages in logs.
-- |
-- | __*See also:* `component`__
foreign import displayName ::
forall props.
ReactComponent props ->
String
-- |
-- | Internal utility or FFI functions
-- |
foreign import memo_ ::
forall props.
EffectFn1
(ReactComponent props)
(ReactComponent props)
foreign import unsafeSetDisplayName ::
forall props.
EffectFn2 String (ReactComponent props) (ReactComponent props)
foreign import useState_ ::
forall state.
EffectFn2
(forall a b. Fn2 a b (a /\ b))
state
(state /\ ((state -> state) -> Effect Unit))
foreign import useEffect_ ::
forall key.
EffectFn3
(Fn2 key key Boolean)
key
(Effect (Effect Unit))
Unit
foreign import useLayoutEffect_ ::
forall key.
EffectFn3
(Fn2 key key Boolean)
key
(Effect (Effect Unit))
Unit
foreign import useReducer_ ::
forall state action.
EffectFn3
(forall a b. Fn2 a b (a /\ b))
(Fn2 state action state)
state
(state /\ (action -> Effect Unit))
foreign import readRef_ ::
forall a.
EffectFn1
(Ref a)
a
foreign import writeRef_ ::
forall a.
EffectFn2
(Ref a)
a
Unit
foreign import useRef_ ::
forall a.
EffectFn1
a
(Ref a)
foreign import useContext_ ::
forall a.
EffectFn1
(ReactContext a)
a
foreign import useMemo_ ::
forall key a.
EffectFn3
(Fn2 key key Boolean)
key
(Unit -> a)
a
foreign import useCallback_ ::
forall key a.
EffectFn3
(Fn2 key key Boolean)
key
a
a
foreign import useEqCache_ ::
forall a.
EffectFn2
(Fn2 a a Boolean)
a
a