purescript-react · maddie927 · Mar 27, 2018 · Mar 26, 2018 · Mar 26, 2018 · Mar 26, 2018
diff --git a/bower.json b/bower.json
@@ -9,6 +9,9 @@
   "dependencies": {
     "purescript-functions": "^3.0.0",
     "purescript-eff": "^3.1.0",
-    "purescript-unsafe-coerce": "^3.0.0"
+    "purescript-unsafe-coerce": "^3.0.0",
+    "purescript-nullable": "^3.0.0",
+    "purescript-typelevel-prelude": "^2.6.0",
+    "purescript-record": "^0.2.6"
   }
 }
diff --git a/examples/controlled-input/.gitignore b/examples/controlled-input/.gitignore
@@ -0,0 +1,4 @@
+output
+html/index.js
+package-lock.json
+node_modules
diff --git a/examples/controlled-input/Makefile b/examples/controlled-input/Makefile
@@ -0,0 +1,5 @@
+all:
+	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
+	purs bundle --module ControlledInput output/*/*.js > output/bundle.js
+	echo 'module.exports = PS.ControlledInput;' >> output/bundle.js
+	node_modules/browserify/bin/cmd.js output/bundle.js index.js -o html/index.js
diff --git a/examples/controlled-input/README.md b/examples/controlled-input/README.md
@@ -0,0 +1,12 @@
+# Controlled Input 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/controlled-input/html/index.html b/examples/controlled-input/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/controlled-input/index.js b/examples/controlled-input/index.js
@@ -0,0 +1,10 @@
+"use strict";
+
+var React = require("react");
+var ReactDOM = require("react-dom");
+var ControlledInput = require("./output/bundle.js");
+
+ReactDOM.render(
+  React.createElement(ControlledInput.component),
+  document.getElementById("container")
+);
diff --git a/examples/controlled-input/package.json b/examples/controlled-input/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "counter",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "dependencies": {
+    "create-react-class": "^15.6.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "browserify": "^16.1.0"
+  }
+}
diff --git a/examples/controlled-input/src/ControlledInput.purs b/examples/controlled-input/src/ControlledInput.purs
@@ -0,0 +1,29 @@
+module ControlledInput where
+
+import Prelude
+
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
+import Data.Nullable (toMaybe)
+import React.Basic (ReactComponent, react)
+import React.Basic.DOM as R
+import React.Basic.DOM.Events (targetValue, timeStamp)
+import React.Basic.DOM.Events as Events
+
+component :: ReactComponent {}
+component = react
+  { displayName: "Counter"
+  , initialState: { value: "hello world", timeStamp: Nothing }
+  , receiveProps: \_ _ _ -> pure unit
+  , render: \_ state setState ->
+      R.div_
+        [ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp }) \{ timeStamp, targetValue } ->
+                             setState \_ -> { value: fromMaybe "" (toMaybe targetValue)
+                                            , timeStamp: Just timeStamp
+                                            }
+                         , value: state.value
+                         }
+               ]
+        , R.p_ [ R.text ("Current value = " <> show state.value) ]
+        , R.p_ (maybe [] (\ts -> [R.text ("Changed at: " <> show ts)]) state.timeStamp)
+        ]
+  }
diff --git a/generated-docs/React/Basic.md b/generated-docs/React/Basic.md
@@ -3,7 +3,7 @@
 #### `react`
 
 ``` purescript
-react :: forall props state fx. { displayName :: String, initialState :: {  | state }, receiveProps :: props -> {  | state } -> (SetState state fx) -> Eff (react :: ReactFX | fx) Unit, render :: props -> {  | state } -> (SetState state fx) -> JSX } -> ReactComponent props
+react :: forall props state fx. { displayName :: String, initialState :: {  | state }, receiveProps :: {  | props } -> {  | state } -> (SetState state fx) -> Eff (react :: ReactFX | fx) Unit, render :: {  | props } -> {  | state } -> (SetState state fx) -> JSX } -> ReactComponent {  | props }
 ```
 
 Create a React component from a _specification_ of that component.
@@ -19,7 +19,7 @@ module (and re-exported here).
 #### `stateless`
 
 ``` purescript
-stateless :: forall props. { displayName :: String, render :: props -> JSX } -> ReactComponent props
+stateless :: forall props. { displayName :: String, render :: {  | props } -> JSX } -> ReactComponent {  | props }
 ```
 
 Create a stateless React component.
@@ -30,7 +30,7 @@ components which don't use state.
 #### `createElement`
 
 ``` purescript
-createElement :: forall props. ReactComponent props -> props -> JSX
+createElement :: forall props. ReactComponent {  | props } -> {  | props } -> JSX
 ```
 
 Create a `JSX` node from a React component, by providing the props.
@@ -63,33 +63,6 @@ Render an Array of children without a wrapping component.
 Provide a key when dynamically rendering multiple fragments along side
 each other.
 
-
-### Re-exported from React.Basic.Types:
-
-#### `SyntheticEvent`
-
-``` purescript
-type SyntheticEvent = { bubbles :: Boolean, cancelable :: Boolean, currentTarget :: DOMNode, defaultPrevented :: Boolean, eventPhase :: Number, isTrusted :: Boolean, target :: DOMNode, timeStamp :: Number, "type" :: String }
-```
-
-Event data that we receive from React.
-
-#### `ReactFX`
-
-``` purescript
-data ReactFX :: Effect
-```
-
-A placeholder effect for all React FFI.
-
-#### `ReactComponent`
-
-``` purescript
-data ReactComponent :: Type -> Type
-```
-
-A React component which can be used from JavaScript.
-
 #### `JSX`
 
 ``` purescript
@@ -98,28 +71,20 @@ data JSX :: Type
 
 A virtual DOM element.
 
-#### `EventHandler`
+#### `ReactComponent`
 
 ``` purescript
-type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
+data ReactComponent :: Type -> Type
 ```
 
-An event handler, which receives a `SyntheticEvent` and performs some
-effects in return.
+A React component which can be used from JavaScript.
 
-#### `DOMNode`
+#### `ReactFX`
 
 ``` purescript
-data DOMNode :: Type
+data ReactFX :: Effect
 ```
 
-An _actual_ DOM node (not a virtual DOM element!)
-
-#### `CSS`
-
-``` purescript
-data CSS :: Type
-```
+A placeholder effect for all React FFI.
 
-An abstract type representing records of CSS attributes.
 
diff --git a/generated-docs/React/Basic/DOM.md b/generated-docs/React/Basic/DOM.md
@@ -15,6 +15,14 @@ text :: String -> JSX
 
 Create a text node.
 
+#### `CSS`
+
+``` purescript
+data CSS :: Type
+```
+
+An abstract type representing records of CSS attributes.
+
 #### `css`
 
 ``` purescript