Updates for React 0.13

Refactored the API to match React 0.13.

Resolves #34

Author: ethul

bower.json

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

src/React.js

@@ -98,26 +98,24 @@ exports.handle = function(f) {
     };
 };
 
-exports.renderToString = React.renderComponentToString;
-
-exports.renderToBody = function(component) {
-    return function() {
-        return React.renderComponent(component, document.body);
-    }
+exports.createElement = function(clazz) {
+  return function(props) {
+    return function(children){
+      return React.createElement.apply(React, [clazz, props].concat(children));
+    };
+  };
 };
 
-exports.renderToElementById = function(id) {
-    return function(component) {
-        return function() {
-            return React.renderComponent(component, document.getElementById(id));
-        }
-    }
+exports.createFactory = function(clazz) {
+  return React.createFactory(clazz);
 };
 
-exports.createElement = function(factory) {
-  return function(props) {
-    return function(children){
-      return React.createElement.apply(React, [factory, props].concat(children));
-    };
+exports.render = function(element) {
+  return function(container) {
+    return function() {
+      return React.render(element, container);
+    }
   };
 };
+
+exports.renderToString = React.renderToString;

src/React.purs

@@ -22,7 +22,7 @@ module React
   , Render()
 
   , UISpec()
-  , UIFactory()
+  , UIClass()
 
   , Event()
   , MouseEvent()
@@ -44,18 +44,19 @@ module React
 
   , handle
 
-  , renderToString
-  , renderToBody
-  , renderToElementById
   , createElement
+  , createFactory
+
+  , render
+  , renderToString
   ) where
 
-import Prelude
+import Prelude (Unit(), ($), bind, pure, return, unit)
 
-import DOM
+import DOM (DOM())
+import DOM.Node.Types (Element())
 
-import Control.Monad.Eff
-import Control.Monad.Eff.Console
+import Control.Monad.Eff (Eff())
 
 -- | A virtual DOM node, or component.
 foreign import data UI :: *
@@ -212,13 +213,10 @@ type UISpec props state eff =
              ) Unit
   }
 
--- | Factory function for components.
-type UIFactory props = props -> UI
-
 -- | Create a component specification.
 spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff
-spec st render =
-  { render:                    render
+spec st renderFn =
+  { render:                    renderFn
   , displayName:               ""
   , getInitialState:           \_ -> pure st
   , componentWillMount:        \_ -> return unit
@@ -230,6 +228,9 @@ spec st render =
   , componentWillUnmount:      \_ -> return unit
   }
 
+-- | Factory function for components.
+foreign import data UIClass :: * -> *
+
 -- | Read the component props.
 foreign import getProps :: forall props eff.
                              UIRef ->
@@ -265,24 +266,24 @@ transformState ctx f = do
   state <- readState ctx
   writeState ctx $ f state
 
--- | Create a component from a component spec.
+-- | Create a React class from a specification.
 foreign import mkUI :: forall props state eff.
                          UISpec props state eff ->
-                         UIFactory props
+                         UIClass props
 
 -- | Create an event handler.
 foreign import handle :: forall eff ev props state result.
                            (ev -> EventHandlerContext eff props state result) ->
                            EventHandler ev
 
--- | Render a component as a string.
-foreign import renderToString :: UI -> String
+-- | Render a React element in a document element.
+foreign import render :: forall eff. UI -> Element -> Eff (dom :: DOM | eff) UI
 
--- | Render a component to the document body.
-foreign import renderToBody :: forall eff. UI -> Eff (dom :: DOM | eff) UI
+-- | Render a React element as a string.
+foreign import renderToString :: UI -> String
 
--- | Render a component to the element with the specified ID.
-foreign import renderToElementById :: forall eff. String -> UI -> Eff (dom :: DOM | eff) UI
+-- | Create an element from a React class.
+foreign import createElement :: forall props. UIClass props -> props -> Array UI -> UI
 
--- | Create an element from a component factory.
-foreign import createElement :: forall props. UIFactory props -> props -> Array UI -> UI
+-- | Create a factory from a React class.
+foreign import createFactory :: forall props. UIClass props -> props -> UI

test/Main.purs

@@ -5,6 +5,18 @@ import Prelude
 import Control.Monad.Eff
 import Control.Monad.Eff.Console
 
+import Data.Maybe (Maybe(..))
+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
@@ -34,6 +46,7 @@ counter = mkUI counterSpec
           val <- readState ctx
           print val
     }
+
   render ctx = do
     val <- readState ctx
     return $ D.button [ P.className "Counter"
@@ -45,14 +58,21 @@ counter = mkUI counterSpec
                       , D.text " Click me to increment!"
                       ]
 
-main = do
-  let component = D.div' [
-                    hello { name: "World" },
-                    counter unit,
-                    createElement container unit [
-                      D.p [] [ D.text  "This is line one" ],
-                      D.p [] [ D.text "This is line two" ]
-                    ]
-                  ]
-
-  renderToBody component
+main = body' >>= render ui
+  where
+  ui :: UI
+  ui = D.div' [ createFactory hello { name: "World" }
+              , createFactory counter unit
+              , createElement container unit
+                              [ D.p [] [ D.text  "This is line one" ]
+                              , D.p [] [ D.text "This is line two" ]
+                              ]
+              ]
+
+  body' :: forall eff. Eff (dom :: DOM | eff) Element
+  body' = do
+    win <- window
+    doc <- document win
+    elm <- fromJust <$> toMaybe <$> body doc
+    return $ htmlElementToElement elm
+