Skip to content

Commit 61ce4a4

Browse files
maddie927maddie927
committed
Optimize component for less boilerplate
The existing functions have been renamed to `reactComponent`, etc
1 parent 17f9251 commit 61ce4a4

File tree

23 files changed

+118
-148
lines changed

23 files changed

+118
-148
lines changed

Diff for: ‎examples/aff/src/Example.purs

+13-15
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import Prelude
44
import Data.Foldable (find)
55
import Data.Maybe (Maybe(..))
66
import Data.Newtype (class Newtype, un)
7-
import Effect (Effect)
87
import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
98
import React.Basic.DOM as R
109
import React.Basic.DOM.Events (capture_)
1110
import React.Basic.Events (handler_)
12-
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment, useState, (/\))
11+
import React.Basic.Hooks (Component, component, fragment, useState, (/\))
1312
import React.Basic.Hooks as React
1413
import React.Basic.Hooks.Aff (useAff)
1514
import React.Basic.Hooks.ErrorBoundary (mkErrorBoundary)
1615

17-
mkExample :: Effect (ReactComponent {})
16+
mkExample :: Component Unit
1817
mkExample = do
1918
errorBoundary <- mkErrorBoundary "AffExErrorBoundary"
2019
catDetails <- mkCatDetails
@@ -32,24 +31,23 @@ mkExample = do
3231
[ catKeyList catKey setCatKey
3332
, case catKey of
3433
Nothing -> mempty
35-
Just k -> catDetails { catKey: k }
34+
Just k -> catDetails k
3635
]
3736
]
3837
where
3938
-- This component is the main `useAff` demo. It receives a key
4039
-- as a prop and renders both the loading state and the final
4140
-- result.
42-
mkCatDetails :: Effect ({ catKey :: Key Cat } -> JSX)
43-
mkCatDetails =
44-
map element do
45-
component "CatDetails" \{ catKey } -> React.do
46-
catState <- useAff catKey $ fetch catKey
47-
pure
48-
$ R.p_
49-
[ case map entity catState of
50-
Nothing -> R.text "Loading..."
51-
Just (Cat { name }) -> R.text $ "A cat named " <> name
52-
]
41+
mkCatDetails :: Component (Key Cat)
42+
mkCatDetails = do
43+
component "CatDetails" \catKey -> React.do
44+
catState <- useAff catKey $ fetch catKey
45+
pure
46+
$ R.p_
47+
[ case map entity catState of
48+
Nothing -> R.text "Loading..."
49+
Just (Cat { name }) -> R.text $ "A cat named " <> name
50+
]
5351

5452
renderAppError error resetApp =
5553
fragment

Diff for: ‎examples/aff/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/component/src/Example.purs

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
module Example where
22

33
import Prelude
4-
import Effect (Effect)
54
import React.Basic.DOM as R
6-
import React.Basic.Hooks (ReactComponent, component, element)
5+
import React.Basic.Hooks (Component, component)
76
import ToggleButton (mkToggleButton)
87

9-
mkExample :: Effect (ReactComponent {})
8+
mkExample :: Component Unit
109
mkExample = do
1110
-- create the child components this parent will use
1211
toggleButton <- mkToggleButton
@@ -15,7 +14,7 @@ mkExample = do
1514
pure
1615
$ R.div
1716
{ children:
18-
[ element toggleButton { label: "A" }
19-
, element toggleButton { label: "B" }
17+
[ toggleButton { label: "A" }
18+
, toggleButton { label: "B" }
2019
]
2120
}

Diff for: ‎examples/component/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/component/src/ToggleButton.purs

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
module ToggleButton where
22

33
import Prelude
4-
import Effect (Effect)
54
import Effect.Console (log)
65
import React.Basic.DOM as R
76
import React.Basic.Events (handler_)
8-
import React.Basic.Hooks (ReactComponent, component, useEffect, useState, (/\))
7+
import React.Basic.Hooks (Component, component, useEffect, useState, (/\))
98
import React.Basic.Hooks as React
109

11-
mkToggleButton :: Effect (ReactComponent { label :: String })
10+
mkToggleButton :: Component { label :: String }
1211
mkToggleButton = do
1312
component "ToggleButton" \{ label } -> React.do
1413
on /\ setOn <- useState false
@@ -19,7 +18,7 @@ mkToggleButton = do
1918
$ R.button
2019
{ onClick: handler_ $ setOn not
2120
, children:
22-
[ R.text label
23-
, R.text if on then " On" else " Off"
24-
]
21+
[ R.text label
22+
, R.text if on then " On" else " Off"
23+
]
2524
}

Diff for: ‎examples/context/src/Example.purs

+12-14
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,27 @@ import Prelude
44
import Effect (Effect)
55
import React.Basic.DOM as R
66
import React.Basic.Events (handler_)
7-
import React.Basic.Hooks (type (/\), ReactComponent, JSX, ReactContext, component, createContext, element, provider, useContext, useState, (/\))
7+
import React.Basic.Hooks (type (/\), JSX, ReactContext, Component, component, createContext, provider, useContext, useState, (/\))
88
import React.Basic.Hooks as React
99

10-
mkExample :: Effect (ReactComponent {})
10+
mkExample :: Component Unit
1111
mkExample = do
1212
counterContext <- createContext (0 /\ pure unit)
1313
store <- mkStore counterContext
1414
counter <- mkCounter counterContext
15-
component "Context" \props -> React.do
15+
component "Context" \_ -> React.do
1616
pure
17-
$ element store
18-
{ content:
19-
[ element counter {}
20-
, element counter {}
21-
, element counter {}
22-
]
23-
}
17+
$ store
18+
[ counter unit
19+
, counter unit
20+
, counter unit
21+
]
2422

2523
mkStore ::
2624
ReactContext (Int /\ (Effect Unit)) ->
27-
Effect (ReactComponent { content :: Array JSX })
25+
Component (Array JSX)
2826
mkStore context = do
29-
component "Store" \{ content } -> React.do
27+
component "Store" \content -> React.do
3028
counter /\ setCounter <- useState 0
3129
let
3230
increment = setCounter (_ + 1)
@@ -37,9 +35,9 @@ mkStore context = do
3735

3836
mkCounter ::
3937
ReactContext (Int /\ (Effect Unit)) ->
40-
Effect (ReactComponent {})
38+
Component Unit
4139
mkCounter counterContext = do
42-
component "Counter" \props -> React.do
40+
component "Counter" \_ -> React.do
4341
counter /\ increment <- useContext counterContext
4442
pure
4543
$ R.button

Diff for: ‎examples/context/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/controlled-input/src/Example.purs

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ module Example where
22

33
import Prelude
44
import Data.Maybe (Maybe(..), fromMaybe, maybe)
5-
import Effect (Effect)
65
import React.Basic.DOM as R
76
import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue, timeStamp)
87
import React.Basic.Events (EventHandler, handler, merge)
9-
import React.Basic.Hooks (ReactComponent, UseState, Hook, component, fragment, useState, (/\))
8+
import React.Basic.Hooks (Component, Hook, UseState, component, fragment, useState, (/\))
109
import React.Basic.Hooks as React
1110

12-
mkExample :: Effect (ReactComponent {})
11+
mkExample :: Component Unit
1312
mkExample = do
14-
component "ControlledInput" \props -> React.do
13+
component "ControlledInput" \_ -> React.do
1514
firstName <- useInput "hello"
1615
lastName <- useInput "world"
1716
pure

Diff for: ‎examples/controlled-input/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/counter/src/Example.js

-7
This file was deleted.

Diff for: ‎examples/counter/src/Example.purs

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
module Example where
22

33
import Prelude
4-
import Effect (Effect)
4+
import Effect.Class.Console (log)
55
import React.Basic.DOM as R
66
import React.Basic.Events (handler_)
7-
import React.Basic.Hooks (ReactComponent, component, fragment, useEffect, useState, (/\))
7+
import React.Basic.Hooks (Component, component, fragment, useEffect, useState, (/\))
88
import React.Basic.Hooks as React
99

10-
mkExample :: Effect (ReactComponent {})
10+
mkExample :: Component Unit
1111
mkExample = do
12-
component "Counter" \props -> React.do
12+
component "Counter" \_ -> React.do
1313
counter /\ setCounter <- useState 0
1414
useEffect counter do
15-
setDocumentTitle $ "Count: " <> show counter
15+
log $ "Count: " <> show counter
1616
pure mempty
1717
pure
1818
$ fragment
@@ -21,5 +21,3 @@ mkExample = do
2121
, children: [ R.text $ "Increment: " <> show counter ]
2222
}
2323
]
24-
25-
foreign import setDocumentTitle :: String -> Effect Unit

Diff for: ‎examples/counter/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/memo-callback/src/Example.purs

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import Prelude
44
import Data.Foldable (traverse_)
55
import Data.Int as Int
66
import Data.Maybe (Maybe(..))
7-
import Effect (Effect)
87
import Effect.Console (log)
98
import React.Basic.DOM as R
109
import React.Basic.DOM.Events (targetValue)
1110
import React.Basic.Events (handler, handler_)
12-
import React.Basic.Hooks (ReactComponent, UnsafeReference(..), component, fragment, useEffect, useLazy, useMemo, useState, (/\))
11+
import React.Basic.Hooks (Component, UnsafeReference(..), component, fragment, useEffect, useLazy, useMemo, useState, (/\))
1312
import React.Basic.Hooks as React
1413

15-
mkExample :: Effect (ReactComponent {})
14+
mkExample :: Component Unit
1615
mkExample = do
17-
component "MemoCallback" \props -> React.do
16+
component "MemoCallback" \_ -> React.do
1817
initialValue /\ setInitialValue <- useState 0
1918
counter /\ setCounter <- useState initialValue
2019
increment <-

Diff for: ‎examples/memo-callback/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/reducer/src/Reducer.purs renamed to ‎examples/reducer/src/Example.purs

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
module Example where
22

33
import Prelude
4-
import Effect (Effect)
54
import React.Basic.DOM as R
65
import React.Basic.Events (handler_)
7-
import React.Basic.Hooks (ReactComponent, component, fragment, useReducer, (/\))
6+
import React.Basic.Hooks (Component, component, fragment, useReducer, (/\))
87
import React.Basic.Hooks as React
98

109
data Action
1110
= Increment
1211
| Decrement
1312

14-
mkExample :: Effect (ReactComponent {})
13+
mkExample :: Component Unit
1514
mkExample = do
16-
component "Reducer" \props -> React.do
15+
component "Reducer" \_ -> React.do
1716
state /\ dispatch <-
1817
useReducer { counter: 0 } \state -> case _ of
1918
Increment -> state { counter = state.counter + 1 }

Diff for: ‎examples/reducer/src/Main.purs

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

Diff for: ‎examples/refs/src/Example.purs

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@ import Data.Int (round)
55
import Data.Maybe (Maybe(..))
66
import Data.Newtype (class Newtype)
77
import Data.Nullable (Nullable, null)
8-
import Effect (Effect)
98
import Math (pow, sqrt)
109
import React.Basic.DOM as R
11-
import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseEffect, UseRef, UseState, component, fragment, coerceHook, readRefMaybe, useEffect, useRef, useState, (/\))
10+
import React.Basic.Hooks (type (/\), Component, Hook, Ref, UseEffect, UseRef, UseState, coerceHook, component, fragment, readRefMaybe, useEffect, useRef, useState, (/\))
1211
import React.Basic.Hooks as React
1312
import Unsafe.Coerce (unsafeCoerce)
1413
import Web.DOM (Node)
@@ -19,9 +18,9 @@ import Web.HTML.HTMLElement (getBoundingClientRect)
1918
import Web.HTML.HTMLElement as HTMLElement
2019
import Web.HTML.Window as Window
2120

22-
mkExample :: Effect (ReactComponent {})
21+
mkExample :: Component Unit
2322
mkExample = do
24-
component "Refs" \props -> React.do
23+
component "Refs" \_ -> React.do
2524
mouseDistance1 /\ buttonRef1 <- useNodeDistanceFromMouse
2625
mouseDistance2 /\ buttonRef2 <- useNodeDistanceFromMouse
2726
mouseDistance3 /\ buttonRef3 <- useNodeDistanceFromMouse

0 commit comments

Comments
 (0)