Move render function into spec

Author: paf31

Diff for: README.md

@@ -37,7 +37,7 @@ incrementCounter ctx e = do
   val <- readState ctx
   writeState ctx (val + 1)
 
-counter = mkUI (spec 0) \ctx -> do
+counter = mkUI $ spec 0 \ctx -> do
   val <- readState ctx
   return $ D.p [ P.className "Counter"
                , P.onClick (incrementCounter ctx)

Diff for: docs/React.md

@@ -155,15 +155,15 @@ A rendering function.
 #### `UISpec`
 
 ``` purescript
-type UISpec props state eff = { 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 -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> 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 UISpec props state eff = { render :: Render props state eff, 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 -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> 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 }
 ```
 
 A specification of a component.
 
 #### `spec`
 
 ``` purescript
-spec :: forall props state eff. state -> UISpec props state eff
+spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff
 ```
 
 Create a component specification.
@@ -211,7 +211,7 @@ Transform the component state by applying a function.
 #### `mkUI`
 
 ``` purescript
-mkUI :: forall props state eff. UISpec props state eff -> Render props state eff -> props -> UI
+mkUI :: forall props state eff. UISpec props state eff -> props -> UI
 ```
 
 Create a component from a component spec.

Diff for: src/React.js

@@ -35,27 +35,22 @@ exports.readState = function(ctx) {
 };
 
 exports.mkUI = function(ss) {
-    return function(render) {
-        var specs = {};
-        for (var s in ss) {
-            if (ss.hasOwnProperty(s)) {
-                specs[s] = (function(impl) {
-                    return function() {
-                        return impl(this)();
-                    }
-                })(ss[s]);
-            }
+    var result = {};
+    for (var s in ss) {
+        if (ss.hasOwnProperty(s)) {
+            result[s] = (function(impl) {
+                return function() {
+                    return impl(this)();
+                }
+            })(ss[s]);
         }
-        specs.getInitialState = function() {
-            return {
-                state: ss.getInitialState(this)()
-            };
-        };
-        specs.render = function() {
-            return render(this)();
-        };
-        return React.createClass(specs);
     }
+    result.getInitialState = function() {
+        return {
+            state: ss.getInitialState(this)()
+        };
+    };
+    return React.createClass(result);
 };
 
 exports.handle = function(f) {

Diff for: src/React.purs

@@ -142,7 +142,8 @@ type Render props state eff =
 
 -- | A specification of a component.
 type UISpec props state eff =
-  { getInitialState
+  { render :: Render props state eff
+  , getInitialState
       :: UIRef ->
          Eff ( props :: ReactProps props
              , state :: ReactState Disallowed state
@@ -201,9 +202,10 @@ type UISpec props state eff =
   }
 
 -- | Create a component specification.
-spec :: forall props state eff. state -> UISpec props state eff
-spec st =
-  { getInitialState:           \_ -> pure st
+spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff
+spec st render =
+  { render:                    render
+  , getInitialState:           \_ -> pure st
   , componentWillMount:        \_ -> return unit
   , componentDidMount:         \_ -> return unit
   , componentWillReceiveProps: \_ -> return unit
@@ -246,7 +248,6 @@ transformState ctx f = do
 -- | Create a component from a component spec.
 foreign import mkUI :: forall props state eff.
                          UISpec props state eff ->
-                         Render props state eff ->
                          props -> 
                          UI
 

Diff for: test/Main.purs

@@ -15,7 +15,7 @@ foreign import interval :: forall eff a.
                              Eff eff a ->
                              Eff eff Unit
 
-hello = mkUI (spec unit) \ctx -> do
+hello = mkUI $ spec unit \ctx -> do
   props <- getProps ctx
   return $ D.h1 [ P.className "Hello"
                 , P.style { background: "lightgray" }
@@ -24,23 +24,24 @@ hello = mkUI (spec unit) \ctx -> do
                 , D.text props.name
                 ]
 
-counter = mkUI counterSpec \ctx -> do
-  val <- readState ctx
-  return $ D.button [ P.className "Counter"
-                    , P.onClick \_ -> do
-                        val <- readState ctx
-                        writeState ctx (val + 1)
-                    ]
-                    [ D.text (show val)
-                    , D.text " Click me to increment!"
-                    ]
+counter = mkUI counterSpec
   where
-  counterSpec = (spec 0)
+  counterSpec = (spec 0 render)
     { componentDidMount = \ctx ->
         interval 1000 $ do
           val <- readState ctx
           print val
     }
+  render ctx = do
+    val <- readState ctx
+    return $ D.button [ P.className "Counter"
+                      , P.onClick \_ -> do
+                          val <- readState ctx
+                          writeState ctx (val + 1)
+                      ]
+                      [ D.text (show val)
+                      , D.text " Click me to increment!"
+                      ]
 
 main = do
   let component = D.div' [ hello { name: "World" }, counter unit ]