more reason-react-like api experiment

Author: Michael Trotter

examples/component/src/Container.purs

@@ -2,18 +2,18 @@ module Container where
 
 import Prelude
 
-import React.Basic (JSX, StatelessComponent, createComponent, makeStateless)
+import React.Basic (JSX, StatelessComponent, createStatelessComponent, makeStateless)
 import React.Basic.DOM as R
 import ToggleButton as ToggleButton
 
 render :: JSX
-render = {} # makeStateless component \_ ->
+render = unit # makeStateless component \_ ->
   R.div
     { children:
         [ ToggleButton.render { label: "A" }
         , ToggleButton.render { label: "B" }
         ]
     }
 
-component :: StatelessComponent {}
-component = createComponent "Container"
+component :: StatelessComponent
+component = createStatelessComponent "Container"

examples/component/src/ToggleButton.purs

@@ -2,7 +2,7 @@ module ToggleButton where
 
 import Prelude
 
-import React.Basic (JSX, Update, Component, StateUpdate(..), make, createComponent)
+import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
@@ -13,30 +13,26 @@ type Props =
 data Action
   = Toggle
 
-type State =
-  { on :: Boolean
-  }
-
-initialState :: State
-initialState =
-  { on: false
+render :: Props -> JSX
+render = make component
+  { initialState =
+      { on: false
+      }
+
+  , update = \self -> case _ of
+      Toggle -> Update self.state { on = not self.state.on }
+
+  , render = \self ->
+      R.button
+        { onClick: Events.handler_ do self.send Toggle
+        , children:
+            [ R.text self.props.label
+            , R.text if self.state.on
+                        then " On"
+                        else " Off"
+            ]
+        }
   }
 
-update :: Update Props State Action
-update self = case _ of
-  Toggle -> Update self.state { on = not self.state.on }
-
-render :: Props -> JSX
-render = make component initialState update \self ->
-  R.button
-    { onClick: Events.handler_ do self.send Toggle
-    , children:
-        [ R.text self.props.label
-        , R.text if self.state.on
-                    then " On"
-                    else " Off"
-        ]
-    }
-
-component :: Component Props State Action
+component :: Component
 component = createComponent "ToggleButton"

examples/controlled-input/src/ControlledInput.purs

@@ -3,47 +3,46 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import React.Basic (JSX, Update, Component, StateUpdate(..), make, createComponent)
+import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
 import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp)
 import React.Basic.Events as Events
 
 type Props = {}
 
-type State =
-  { value :: String
-  , timestamp :: Maybe Number
-  }
-
-initialState :: State
-initialState =
-  { value: "hello world"
-  , timestamp: Nothing
-  }
-
 data Action
   = ValueChanged String Number
 
-update :: Update Props State Action
-update self = case _ of
-  ValueChanged value timestamp ->
-    Update self.state { value = value, timestamp = Just timestamp }
-
 render :: Props -> JSX
-render = make component initialState update \{ props, state, send } ->
-  React.fragment
-    [ R.input
-        { onChange:
-            Events.handler
-              (preventDefault >>> Events.merge { targetValue, timeStamp })
-              \{ timeStamp, targetValue } ->
-                send $ ValueChanged (fromMaybe "" targetValue) timeStamp
-        , value: state.value
-        }
-    , R.p_ [ R.text ("Current value = " <> show state.value) ]
-    , R.p_ [ R.text ("Changed at = " <> maybe "never" show state.timestamp) ]
-    ]
-
-component :: Component Props State Action
+render = make component
+  { initialState =
+      { value: "hello world"
+      , timestamp: Nothing
+      }
+
+  , update = \self -> case _ of
+      ValueChanged value timestamp ->
+        Update self.state
+          { value = value
+          , timestamp = Just timestamp
+          }
+
+  , render = \self ->
+      React.fragment
+        [ R.input
+            { onChange:
+                Events.handler
+                  (preventDefault >>> Events.merge { targetValue, timeStamp })
+                  \{ timeStamp, targetValue } ->
+                    self.send $
+                      ValueChanged (fromMaybe "" targetValue) timeStamp
+            , value: self.state.value
+            }
+        , R.p_ [ R.text ("Current value = " <> show self.state.value) ]
+        , R.p_ [ R.text ("Changed at = " <> maybe "never" show self.state.timestamp) ]
+        ]
+  }
+
+component :: Component
 component = createComponent "ControlledInput"

examples/counter/src/Counter.purs

@@ -2,7 +2,7 @@ module Counter where
 
 import Prelude
 
-import React.Basic (JSX, Update, Component, StateUpdate(..), make, createComponent)
+import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
@@ -13,25 +13,20 @@ type Props =
 data Action
   = Increment
 
-type State =
-  { counter :: Int
-  }
-
-initialState :: State
-initialState =
-  { counter: 0
-  }
-
-update :: Update Props State Action
-update self = case _ of
-  Increment -> Update self.state { counter = self.state.counter + 1 }
-
 render :: Props -> JSX
-render = make component initialState update \self ->
-  R.button
-    { onClick: Events.handler_ do self.send Increment
-    , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
-    }
+render = make component
+  { initialState = { counter: 0 }
+
+  , update = \self -> case _ of
+      Increment ->
+        Update self.state { counter = self.state.counter + 1 }
+
+  , render = \self ->
+      R.button
+        { onClick: Events.handler_ do self.send Increment
+        , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
+        }
+  }
 
-component :: Component Props State Action
+component :: Component
 component = createComponent "Counter"