Remove update/action code and re-expose React's setState functions

examples/async/src/AsyncCounter.purs

@@ -5,9 +5,10 @@ import Prelude
 import Effect.Aff (Milliseconds(..), delay)
 import Effect.Class (liftEffect)
 import Effect.Console (log)
-import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, fragment, keyed, make)
+import React.Basic (Component, JSX, createComponent, fragment, keyed, make)
 import React.Basic.Components.Async (asyncWithLoader)
 import React.Basic.DOM as R
+import React.Basic.DOM.Events (capture_)
 
 component :: Component Props
 component = createComponent "AsyncCounter"
@@ -16,17 +17,10 @@ type Props =
   { label :: String
   }
 
-data Action
-  = Increment
-
 asyncCounter :: Props -> JSX
-asyncCounter = make component { initialState, update, render }
+asyncCounter = make component { initialState, render }
   where
-    initialState = { counter: 0 }
-
-    update self = case _ of
-      Increment ->
-        Update self.state { counter = self.state.counter + 1 }
+    initialState = 0
 
     render self =
       fragment
@@ -36,16 +30,16 @@ asyncCounter = make component { initialState, update, render }
             , R.li_ [ R.text "\"done\" should only be logged to the console once for any loading period (in-flight requests get cancelled as the next request starts)" ]
             ]
         , R.button
-            { onClick: capture_ self Increment
-            , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
+            { onClick: capture_ $ self.setState (_ + 1)
+            , children: [ R.text (self.props.label <> ": " <> show self.state) ]
             }
         , R.text " "
-        , keyed (show self.state.counter) $
+        , keyed (show self.state) $
             asyncWithLoader (R.text "Loading...") do
               liftEffect $ log "start"
               delay $ Milliseconds 2000.0
               liftEffect $ log "done"
-              pure $ R.text $ "Done: " <> show self.state.counter
+              pure $ R.text $ "Done: " <> show self.state
         ]
 
 

examples/component/package.json

@@ -4,6 +4,6 @@
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
-    "browserify": "^16.2.2"
+    "browserify": "16.2.3"
   }
 }

examples/component/src/ToggleButton.purs

@@ -3,8 +3,9 @@ module ToggleButton where
 import Prelude
 
 import Effect.Console (log)
-import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
+import React.Basic (Component, JSX, createComponent, make, readState)
 import React.Basic.DOM as R
+import React.Basic.DOM.Events (capture_)
 
 component :: Component Props
 component = createComponent "ToggleButton"
@@ -13,25 +14,18 @@ type Props =
   { label :: String
   }
 
-data Action
-  = Toggle
-
 toggleButton :: Props -> JSX
 toggleButton = make component
   { initialState:
       { on: false
       }
 
-  , update: \self -> case _ of
-      Toggle ->
-        UpdateAndSideEffects
-          self.state { on = not self.state.on }
-          \nextSelf -> do
-            log $ "next state: " <> show nextSelf.state
-
   , render: \self ->
       R.button
-        { onClick: capture_ self Toggle
+        { onClick: capture_ $
+            self.setStateThen _ { on = not self.state.on } do
+              nextState <- readState self
+              log $ "next state: " <> show nextState
         , children:
             [ R.text self.props.label
             , R.text if self.state.on

examples/controlled-input/src/ControlledInput.purs

@@ -3,40 +3,34 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import React.Basic (Component, JSX, StateUpdate(..), capture, createComponent, make)
+import React.Basic (Component, JSX, createComponent, make)
 import React.Basic as React
 import React.Basic.DOM as R
-import React.Basic.DOM.Events (targetValue, timeStamp)
+import React.Basic.DOM.Events (capture, targetValue, timeStamp)
 import React.Basic.Events (merge)
 
 component :: Component Props
 component = createComponent "ControlledInput"
 
 type Props = Unit
 
-data Action
-  = ValueChanged String Number
-
 controlledInput :: Props -> JSX
 controlledInput = 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:
-                capture self (merge { targetValue, timeStamp })
-                  \{ timeStamp, targetValue } -> ValueChanged (fromMaybe "" targetValue) timeStamp
+                capture (merge { targetValue, timeStamp })
+                  \{ timeStamp, targetValue } ->
+                    self.setState _
+                      { value = fromMaybe "" targetValue
+                      , timestamp = Just timeStamp
+                      }
             , value: self.state.value
             }
         , R.p_ [ R.text ("Current value = " <> show self.state.value) ]

examples/counter/src/Counter.purs

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