Merge pull request #40 from ethul/topic/react-0.13-update

Updates for React 0.13

Author: paf31

README.md

@@ -1,7 +1,7 @@
 purescript-react
 ================
 
-[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.12.2](https://img.shields.io/badge/react-0.12.2-lightgrey.svg)
+[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.13.3](https://img.shields.io/badge/react-0.13.3-lightgrey.svg)
 
 Low-level React Bindings for PureScript.
 
@@ -28,6 +28,17 @@ import Prelude
 
 import Control.Monad.Eff
 
+import Data.Maybe.Unsafe (fromJust)
+import Data.Nullable (toMaybe)
+
+import DOM (DOM())
+import DOM.HTML (window)
+import DOM.HTML.Document (body)
+import DOM.HTML.Types (htmlElementToElement)
+import DOM.HTML.Window (document)
+
+import DOM.Node.Types (Element())
+
 import React
 
 import qualified React.DOM as D
@@ -37,16 +48,24 @@ incrementCounter ctx e = do
   val <- readState ctx
   writeState ctx (val + 1)
 
-counter = mkUI $ spec 0 \ctx -> do
+counter = createClass $ spec 0 \ctx -> do
   val <- readState ctx
   return $ D.p [ P.className "Counter"
                , P.onClick (incrementCounter ctx)
-               ] 
+               ]
                [ D.text (show val)
                , D.text " Click me to increment!"
                ]
 
-main = do
-  let component = D.div [] [ counter {} ]
-  renderToBody component
+main = container >>= render ui
+  where
+  ui :: ReactElement
+  ui = D.div [] [ createFactory counter {} ]
+
+  container :: forall eff. Eff (dom :: DOM | eff) Element
+  container = do
+    win <- window
+    doc <- document win
+    elm <- fromJust <$> toMaybe <$> body doc
+    return $ htmlElementToElement elm
 ```

bower.json

@@ -16,8 +16,10 @@
     "tests"
   ],
   "dependencies": {
-    "purescript-console": "^0.1.0",
-    "purescript-dom": "^0.1.1",
-    "react": "~0.12.2"
+    "purescript-dom": "~0.2.6"
+  },
+  "devDependencies": {
+    "purescript-console": "~0.1.1",
+    "react": "~0.13.3"
   }
 }

docs/React.md

@@ -2,18 +2,18 @@
 
 This module defines foreign types and functions which wrap React's functionality.
 
-#### `UI`
+#### `ReactElement`
 
 ``` purescript
-data UI :: *
+data ReactElement :: *
 ```
 
 A virtual DOM node, or component.
 
-#### `UIRef`
+#### `ReactThis`
 
 ``` purescript
-data UIRef :: *
+data ReactThis :: *
 ```
 
 A reference to a component, essentially React's `this`.
@@ -147,90 +147,90 @@ A function which handles events.
 #### `Render`
 
 ``` purescript
-type Render props state eff = UIRef -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) UI
+type Render props state eff = ReactThis -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) ReactElement
 ```
 
 A rendering function.
 
-#### `UISpec`
+#### `ReactSpec`
 
 ``` purescript
-type UISpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: UIRef -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: UIRef -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit }
+type ReactSpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: ReactThis -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit }
 ```
 
 A specification of a component.
 
-#### `UIFactory`
+#### `spec`
 
 ``` purescript
-type UIFactory props = props -> UI
+spec :: forall props state eff. state -> Render props state eff -> ReactSpec props state eff
 ```
 
-Factory function for components.
+Create a component specification.
 
-#### `spec`
+#### `ReactClass`
 
 ``` purescript
-spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff
+data ReactClass :: * -> *
 ```
 
-Create a component specification.
+React class for components.
 
 #### `getProps`
 
 ``` purescript
-getProps :: forall props eff. UIRef -> Eff (props :: ReactProps props | eff) props
+getProps :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) props
 ```
 
 Read the component props.
 
 #### `getRefs`
 
 ``` purescript
-getRefs :: forall write eff. UIRef -> Eff (refs :: ReactRefs (Read write) | eff) Refs
+getRefs :: forall write eff. ReactThis -> Eff (refs :: ReactRefs (Read write) | eff) Refs
 ```
 
 Read the component refs.
 
 #### `getChildren`
 
 ``` purescript
-getChildren :: forall props eff. UIRef -> Eff (props :: ReactProps props | eff) (Array UI)
+getChildren :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) (Array ReactElement)
 ```
 
 Read the component children property.
 
 #### `writeState`
 
 ``` purescript
-writeState :: forall state eff. UIRef -> state -> Eff (state :: ReactState ReadWrite state | eff) state
+writeState :: forall state eff. ReactThis -> state -> Eff (state :: ReactState ReadWrite state | eff) state
 ```
 
 Write the component state.
 
 #### `readState`
 
 ``` purescript
-readState :: forall state write eff. UIRef -> Eff (state :: ReactState (Read write) state | eff) state
+readState :: forall state write eff. ReactThis -> Eff (state :: ReactState (Read write) state | eff) state
 ```
 
 Read the component state.
 
 #### `transformState`
 
 ``` purescript
-transformState :: forall state statePerms eff. UIRef -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
+transformState :: forall state eff. ReactThis -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
 ```
 
 Transform the component state by applying a function.
 
-#### `mkUI`
+#### `createClass`
 
 ``` purescript
-mkUI :: forall props state eff. UISpec props state eff -> UIFactory props
+createClass :: forall props state eff. ReactSpec props state eff -> ReactClass props
 ```
 
-Create a component from a component spec.
+Create a React class from a specification.
 
 #### `handle`
 
@@ -240,36 +240,36 @@ handle :: forall eff ev props state result. (ev -> EventHandlerContext eff props
 
 Create an event handler.
 
-#### `renderToString`
+#### `createElement`
 
 ``` purescript
-renderToString :: UI -> String
+createElement :: forall props. ReactClass props -> props -> Array ReactElement -> ReactElement
 ```
 
-Render a component as a string.
+Create an element from a React class.
 
-#### `renderToBody`
+#### `createFactory`
 
 ``` purescript
-renderToBody :: forall eff. UI -> Eff (dom :: DOM | eff) UI
+createFactory :: forall props. ReactClass props -> props -> ReactElement
 ```
 
-Render a component to the document body.
+Create a factory from a React class.
 
-#### `renderToElementById`
+#### `render`
 
 ``` purescript
-renderToElementById :: forall eff. String -> UI -> Eff (dom :: DOM | eff) UI
+render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) ReactElement
 ```
 
-Render a component to the element with the specified ID.
+Render a React element in a document element.
 
-#### `createElement`
+#### `renderToString`
 
 ``` purescript
-createElement :: forall props. UIFactory props -> props -> Array UI -> UI
+renderToString :: ReactElement -> String
 ```
 
-Create an element from a component factory.
+Render a React element as a string.