Optimize component for less boilerplate

The existing functions have been renamed to `reactComponent`, etc

examples/aff/src/Example.purs

@@ -4,17 +4,16 @@ import Prelude
 import Data.Foldable (find)
 import Data.Maybe (Maybe(..))
 import Data.Newtype (class Newtype, un)
-import Effect (Effect)
 import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (capture_)
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment, useState, (/\))
+import React.Basic.Hooks (Component, component, fragment, useState, (/\))
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
 import React.Basic.Hooks.ErrorBoundary (mkErrorBoundary)
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
   errorBoundary <- mkErrorBoundary "AffExErrorBoundary"
   catDetails <- mkCatDetails
@@ -32,24 +31,23 @@ mkExample = do
                   [ catKeyList catKey setCatKey
                   , case catKey of
                       Nothing -> mempty
-                      Just k -> catDetails { catKey: k }
+                      Just k -> catDetails k
                   ]
           ]
   where
   -- This component is the main `useAff` demo. It receives a key
   -- as a prop and renders both the loading state and the final
   -- result.
-  mkCatDetails :: Effect ({ catKey :: Key Cat } -> JSX)
-  mkCatDetails =
-    map element do
-      component "CatDetails" \{ catKey } -> React.do
-        catState <- useAff catKey $ fetch catKey
-        pure
-          $ R.p_
-              [ case map entity catState of
-                  Nothing -> R.text "Loading..."
-                  Just (Cat { name }) -> R.text $ "A cat named " <> name
-              ]
+  mkCatDetails :: Component (Key Cat)
+  mkCatDetails = do
+    component "CatDetails" \catKey -> React.do
+      catState <- useAff catKey $ fetch catKey
+      pure
+        $ R.p_
+            [ case map entity catState of
+                Nothing -> R.text "Loading..."
+                Just (Cat { name }) -> R.text $ "A cat named " <> name
+            ]
 
   renderAppError error resetApp =
     fragment

examples/aff/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/component/src/Example.purs

@@ -1,12 +1,11 @@
 module Example where
 
 import Prelude
-import Effect (Effect)
 import React.Basic.DOM as R
-import React.Basic.Hooks (ReactComponent, component, element)
+import React.Basic.Hooks (Component, component)
 import ToggleButton (mkToggleButton)
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
   -- create the child components this parent will use
   toggleButton <- mkToggleButton
@@ -15,7 +14,7 @@ mkExample = do
     pure
       $ R.div
           { children:
-              [ element toggleButton { label: "A" }
-              , element toggleButton { label: "B" }
+              [ toggleButton { label: "A" }
+              , toggleButton { label: "B" }
               ]
           }

examples/component/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/component/src/ToggleButton.purs

@@ -1,14 +1,13 @@
 module ToggleButton where
 
 import Prelude
-import Effect (Effect)
 import Effect.Console (log)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (ReactComponent, component, useEffect, useState, (/\))
+import React.Basic.Hooks (Component, component, useEffect, useState, (/\))
 import React.Basic.Hooks as React
 
-mkToggleButton :: Effect (ReactComponent { label :: String })
+mkToggleButton :: Component { label :: String }
 mkToggleButton = do
   component "ToggleButton" \{ label } -> React.do
     on /\ setOn <- useState false
@@ -19,7 +18,7 @@ mkToggleButton = do
       $ R.button
           { onClick: handler_ $ setOn not
           , children:
-            [ R.text label
-            , R.text if on then " On" else " Off"
-            ]
+              [ R.text label
+              , R.text if on then " On" else " Off"
+              ]
           }

examples/context/src/Example.purs

@@ -4,29 +4,27 @@ import Prelude
 import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (type (/\), ReactComponent, JSX, ReactContext, component, createContext, element, provider, useContext, useState, (/\))
+import React.Basic.Hooks (type (/\), JSX, ReactContext, Component, component, createContext, provider, useContext, useState, (/\))
 import React.Basic.Hooks as React
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
   counterContext <- createContext (0 /\ pure unit)
   store <- mkStore counterContext
   counter <- mkCounter counterContext
-  component "Context" \props -> React.do
+  component "Context" \_ -> React.do
     pure
-      $ element store
-          { content:
-              [ element counter {}
-              , element counter {}
-              , element counter {}
-              ]
-          }
+      $ store
+          [ counter unit
+          , counter unit
+          , counter unit
+          ]
 
 mkStore ::
   ReactContext (Int /\ (Effect Unit)) ->
-  Effect (ReactComponent { content :: Array JSX })
+  Component (Array JSX)
 mkStore context = do
-  component "Store" \{ content } -> React.do
+  component "Store" \content -> React.do
     counter /\ setCounter <- useState 0
     let
       increment = setCounter (_ + 1)
@@ -37,9 +35,9 @@ mkStore context = do
 
 mkCounter ::
   ReactContext (Int /\ (Effect Unit)) ->
-  Effect (ReactComponent {})
+  Component Unit
 mkCounter counterContext = do
-  component "Counter" \props -> React.do
+  component "Counter" \_ -> React.do
     counter /\ increment <- useContext counterContext
     pure
       $ R.button

examples/context/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/controlled-input/src/Example.purs

@@ -2,16 +2,15 @@ module Example where
 
 import Prelude
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue, timeStamp)
 import React.Basic.Events (EventHandler, handler, merge)
-import React.Basic.Hooks (ReactComponent, UseState, Hook, component, fragment, useState, (/\))
+import React.Basic.Hooks (Component, Hook, UseState, component, fragment, useState, (/\))
 import React.Basic.Hooks as React
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
-  component "ControlledInput" \props -> React.do
+  component "ControlledInput" \_ -> React.do
     firstName <- useInput "hello"
     lastName <- useInput "world"
     pure

examples/controlled-input/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/counter/src/Example.purs

@@ -1,18 +1,18 @@
 module Example where
 
 import Prelude
-import Effect (Effect)
+import Effect.Class.Console (log)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (ReactComponent, component, fragment, useEffect, useState, (/\))
+import React.Basic.Hooks (Component, component, fragment, useEffect, useState, (/\))
 import React.Basic.Hooks as React
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
-  component "Counter" \props -> React.do
+  component "Counter" \_ -> React.do
     counter /\ setCounter <- useState 0
     useEffect counter do
-      setDocumentTitle $ "Count: " <> show counter
+      log $ "Count: " <> show counter
       pure mempty
     pure
       $ fragment
@@ -21,5 +21,3 @@ mkExample = do
               , children: [ R.text $ "Increment: " <> show counter ]
               }
           ]
-
-foreign import setDocumentTitle :: String -> Effect Unit

examples/counter/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/memo-callback/src/Example.purs

@@ -4,17 +4,16 @@ import Prelude
 import Data.Foldable (traverse_)
 import Data.Int as Int
 import Data.Maybe (Maybe(..))
-import Effect (Effect)
 import Effect.Console (log)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetValue)
 import React.Basic.Events (handler, handler_)
-import React.Basic.Hooks (ReactComponent, UnsafeReference(..), component, fragment, useEffect, useLazy, useMemo, useState, (/\))
+import React.Basic.Hooks (Component, UnsafeReference(..), component, fragment, useEffect, useLazy, useMemo, useState, (/\))
 import React.Basic.Hooks as React
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
-  component "MemoCallback" \props -> React.do
+  component "MemoCallback" \_ -> React.do
     initialValue /\ setInitialValue <- useState 0
     counter /\ setCounter <- useState initialValue
     increment <-

examples/memo-callback/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/reducer/src/Reducer.purs → examples/reducer/src/Example.purs

@@ -1,19 +1,18 @@
 module Example where
 
 import Prelude
-import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (ReactComponent, component, fragment, useReducer, (/\))
+import React.Basic.Hooks (Component, component, fragment, useReducer, (/\))
 import React.Basic.Hooks as React
 
 data Action
   = Increment
   | Decrement
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
-  component "Reducer" \props -> React.do
+  component "Reducer" \_ -> React.do
     state /\ dispatch <-
       useReducer { counter: 0 } \state -> case _ of
         Increment -> state { counter = state.counter + 1 }

examples/reducer/src/Main.purs

@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Example (mkExample)
-import React.Basic.Hooks (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
     Nothing -> throw "Container element not found."
     Just c -> do
       ex <- mkExample
-      let
-        app = element ex {}
-      render app c
+      render (ex unit) c

examples/refs/src/Example.purs

@@ -5,10 +5,9 @@ import Data.Int (round)
 import Data.Maybe (Maybe(..))
 import Data.Newtype (class Newtype)
 import Data.Nullable (Nullable, null)
-import Effect (Effect)
 import Math (pow, sqrt)
 import React.Basic.DOM as R
-import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseEffect, UseRef, UseState, component, fragment, coerceHook, readRefMaybe, useEffect, useRef, useState, (/\))
+import React.Basic.Hooks (type (/\), Component, Hook, Ref, UseEffect, UseRef, UseState, coerceHook, component, fragment, readRefMaybe, useEffect, useRef, useState, (/\))
 import React.Basic.Hooks as React
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Node)
@@ -19,9 +18,9 @@ import Web.HTML.HTMLElement (getBoundingClientRect)
 import Web.HTML.HTMLElement as HTMLElement
 import Web.HTML.Window as Window
 
-mkExample :: Effect (ReactComponent {})
+mkExample :: Component Unit
 mkExample = do
-  component "Refs" \props -> React.do
+  component "Refs" \_ -> React.do
     mouseDistance1 /\ buttonRef1 <- useNodeDistanceFromMouse
     mouseDistance2 /\ buttonRef2 <- useNodeDistanceFromMouse
     mouseDistance3 /\ buttonRef3 <- useNodeDistanceFromMouse