Merge pull request #13 from andreypopp/master

Type DOM props

Author: joneshf

example/app/app.purs

@@ -3,7 +3,7 @@ module Main where
 import Control.Monad.Eff
 import Debug.Trace
 import React
-import qualified React.DOM as DOM
+import React.DOM
 
 foreign import interval
   "function interval(ms) { \
@@ -13,21 +13,22 @@ foreign import interval
   \}"
   :: forall eff r. Number -> Eff (trace :: Trace) r -> Eff (eff) {}
 
-helloInConsole = do
+helloInConsole e = do
   props <- getProps
   trace ("Hello, " ++ props.name ++ "!")
 
 hello = mkUI spec do
   props <- getProps
-  return $ DOM.h1 {
-      className: "Hello",
-      onClick: handle helloInConsole
-    } [
-      DOM.text "Hello, ",
-      DOM.text props.name
+  return $ h1 [
+      className "Hello",
+      onClick helloInConsole,
+      style {background: "gray"}
+    ] [
+      text "Hello, ",
+      text props.name
     ]
 
-incrementCounter = do
+incrementCounter e = do
   val <- readState
   writeState (val + 1)
 
@@ -40,14 +41,11 @@ counter = mkUI spec {
         print val
   } do
   val <- readState
-  return $ DOM.p {
-      className: "Counter",
-      onClick: handle incrementCounter
-    } [
-      DOM.text (show val),
-      DOM.text " Click me to increment!"
+  return $ p [className "Counter", onClick incrementCounter] [
+      text (show val),
+      text " Click me to increment!"
     ]
 
 main = do
-  let component = DOM.div {} [hello {name: "World"}, counter {}]
+  let component = div' [hello {name: "World"}, counter {}]
   renderToBody component

example/tutorial/tutorial.purs

@@ -6,17 +6,16 @@ module Tutorial where
   import Control.Monad.Eff
   import Data.Array
   import React
+  import React.DOM
   import Showdown
   import Debug.Trace
 
-  import qualified React.DOM as DOM
-
   cBoxRender = do
     state <- readState
-    pure $ DOM.div { className: "commentBox" }
-                   [ DOM.h1 {} [ DOM.text "Comments" ]
+    pure $ div [ className "commentBox" ]
+                   [ h1' [ text "Comments" ]
                    , commentList { data': state }
-                   , commentForm { onCommentSubmit: handle commentSubmit }
+                   , commentForm { onCommentSubmit: commentSubmit }
                    ]
 
   commentBox = mkUI spec {
@@ -34,37 +33,33 @@ module Tutorial where
 
   commentList = mkUI spec do
     props <- getProps
-    pure $ DOM.div { className: "commentList" }
+    pure $ div [ className "commentList" ]
                    (commentNodes <$> props.data')
 
   commentForm = mkUI spec do
     props <- getProps
-    pure $ DOM.form { className: "commentForm"
-                    , onSubmit: handle submit
-                    }
-                    [ DOM.input { attrType: "text"
-                                , placeholder: "Your name"
-                                , ref: "author"
-                                }
-                                []
-                    , DOM.input { attrType: "text"
-                                , placeholder: "Say something..."
-                                , ref: "text"
-                                }
-                                []
-                    , DOM.input { attrType: "submit"
-                                , value: "Post"
-                                }
-                                []
+    pure $ form [ className "commentForm"
+                    , onSubmit submit
+                    ]
+                    [ input [ typeProp "text"
+                            , placeholder "Your name"
+                            , ref "author"
+                            ] []
+                    , input [ typeProp "text"
+                            , placeholder "Say something..."
+                            , ref "text"
+                            ] []
+                    , input [ typeProp "submit"
+                            , value "Post"
+                            ] []
                     ]
 
   comment = mkUI spec do
     props <- getProps
-    pure $ DOM.div { className: "comment" }
-                   [ DOM.h2 { className: "commentAuthor" }
-                            [ DOM.text props.author ]
-                   , DOM.span { dangerouslySetInnerHTML: { __html: makeHtml props.children } }
-                              []
+    pure $ div [ className "comment" ]
+                   [ h2 [ className "commentAuthor" ]
+                            [ text props.author ]
+                   , span [ dangerouslySetInnerHTML $ makeHtml props.children ] []
                    ]
 
   commentNodes c = comment { author: c.author, children: c.text }
@@ -86,14 +81,17 @@ module Tutorial where
     \}" :: forall eff. Eff eff {}
 
   foreign import submit
-    "function submit() {\
-    \  var author = this.refs.author.getDOMNode().value.trim();\
-    \  var text = this.refs.text.getDOMNode().value.trim();\
-    \  this.props.onCommentSubmit.call(this, {author: author, text: text});\
-    \  this.refs.author.getDOMNode().value = '';\
-    \  this.refs.text.getDOMNode().value = '';\
-    \  return false;\
-    \}" :: forall eff. Eff eff Boolean
+    "function submit(e) {\
+    \  e.preventDefault();\
+    \  return function() { \
+    \    var author = this.refs.author.getDOMNode().value.trim();\
+    \    var text = this.refs.text.getDOMNode().value.trim();\
+    \    this.props.onCommentSubmit.call(this, {author: author, text: text});\
+    \    this.refs.author.getDOMNode().value = '';\
+    \    this.refs.text.getDOMNode().value = '';\
+    \    return false;\
+    \  } \
+    \}" :: Event -> forall eff. Eff eff Boolean
 
   foreign import loadCommentsFromServer
     "function loadCommentsFromServer() {\

src/React.purs

@@ -178,6 +178,7 @@ module React where
 
   type Event = { }
   type MouseEvent = { pageX :: Number, pageY :: Number }
+  type KeyboardEvent = { key :: String }
 
   type EventHandlerContext eff props state result = Eff (
     p :: ReadPropsEff props,
@@ -187,32 +188,21 @@ module React where
     ) result
 
   foreign import handle
-    " function handle(f) {                  \
-    \   var component = __current;          \
-    \   return function(e) {                \
-    \     __current = component;            \
-    \     try {                             \
-    \       var res = f.call(__current, e); \
-    \     } finally {                       \
-    \       __current = null;               \
-    \     }                                 \
-    \     return res;                       \
-    \   }                                   \
+    " function handle(f) {                    \
+    \   var component = __current;            \
+    \   return function(e) {                  \
+    \     __current = component;              \
+    \     try {                               \
+    \       var res = f.call(__current, e)(); \
+    \     } finally {                         \
+    \       __current = null;                 \
+    \     }                                   \
+    \     return res;                         \
+    \   }                                     \
     \ }"
-    :: forall eff props state result event.
-    EventHandlerContext props state result eff -> EventHandler event
-
-  foreign import handleEvent
-    "var handleEvent = handle"
-    :: forall eff props state result.
-    (Event -> EventHandlerContext eff props state result)
-    -> EventHandler Event
-
-  foreign import handleMouseEvent
-    "var handleMouseEvent = handle"
-    :: forall eff props state result.
-    (MouseEvent -> EventHandlerContext eff props state result)
-    -> EventHandler MouseEvent
+    :: forall eff ev props state result.
+    (ev -> EventHandlerContext eff props state result)
+    -> EventHandler ev
 
   foreign import renderToString
     "var renderToString = React.renderComponentToString"