Remove update/action code and re-expose React's setState functions (#73)

We've been finding the update/action pattern to be too verbose for basic use cases. ~There was also a bug with type checking actions correctly (#71).~ This update keeps the current types and lifecycle code while returning state updates to the more traditional `setState` and `setStateThen`.
purescript-react · Jan 24, 2019 · 542decc · 542decc
1 parent e567488
commit 542decc
Show file tree

Hide file tree

Showing 23 changed files with 389 additions and 438 deletions.
diff --git a/examples/actions/.gitignore b/examples/actions/.gitignore
@@ -0,0 +1,4 @@
+output
+html/index.js
+package-lock.json
+node_modules
diff --git a/examples/actions/Makefile b/examples/actions/Makefile
@@ -0,0 +1,8 @@
+all: node_modules
+	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
+	node_modules/.bin/browserify output/bundle.js -o html/index.js
+
+node_modules:
+	npm install
+
diff --git a/examples/actions/README.md b/examples/actions/README.md
@@ -0,0 +1,12 @@
+# Counter Example
+
+## Building
+
+```
+npm install
+make all
+```
+
+This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
+
+Then open `html/index.html` in your browser.
diff --git a/examples/actions/html/index.html b/examples/actions/html/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-basic example</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/actions/package.json b/examples/actions/package.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "react": "16.6.0",
+    "react-dom": "16.6.0"
+  },
+  "devDependencies": {
+    "browserify": "16.2.3"
+  }
+}
diff --git a/examples/actions/src/Actions.purs b/examples/actions/src/Actions.purs
@@ -0,0 +1,37 @@
+module Actions where
+
+import Prelude
+
+import Effect.Console (log)
+import React.Basic (Component, JSX, StateUpdate(..), createComponent, make, runUpdate)
+import React.Basic.DOM as R
+import React.Basic.DOM.Events (capture_)
+
+component :: Component Props
+component = createComponent "Counter"
+
+type Props =
+  { label :: String
+  }
+
+data Action
+  = Increment
+
+actions :: Props -> JSX
+actions = make component { initialState, render }
+  where
+    initialState = { counter: 0 }
+
+    update self = case _ of
+      Increment ->
+        UpdateAndSideEffects
+          (self.state { counter = self.state.counter + 1 })
+          \{ state } -> log $ "Count: " <> show state.counter
+
+    send = runUpdate update
+
+    render self =
+      R.button
+        { onClick: capture_ $ send self Increment
+        , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
+        }
diff --git a/examples/actions/src/Main.purs b/examples/actions/src/Main.purs
@@ -0,0 +1,22 @@
+module Main where
+
+import Prelude
+
+import Actions (actions)
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic.DOM (render)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
+  case container of
+    Nothing -> throw "Container element not found."
+    Just c  ->
+      let app = actions { label: "Increment" }
+       in render app c
diff --git a/examples/async/src/AsyncCounter.purs b/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
         ]
 
 
diff --git a/examples/component/package.json b/examples/component/package.json
@@ -4,6 +4,6 @@
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
-    "browserify": "^16.2.2"
+    "browserify": "16.2.3"
   }
 }
diff --git a/examples/component/src/ToggleButton.purs b/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

diff --git a/examples/controlled-input/src/ControlledInput.purs b/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) ]

diff --git a/examples/counter/src/Counter.purs b/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) ]
         }