purescript-react · maddie927 · Jan 24, 2019 · Jan 11, 2019 · Jan 14, 2019 · Jan 22, 2019
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) ]
        }