API Refactor

README.md

@@ -21,36 +21,36 @@ bower install git@github.com:lumihq/purescript-react-basic.git
 Here is an example component which renders a label read from props along with a counter:
 
 ```purescript
-module React.Basic.Example where
+module Counter where
 
 import Prelude
 
-import React.Basic (ReactComponent, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
 -- The props for the component
-type ExampleProps =
+type Props =
   { label :: String
   }
 
 -- Create a component by passing a record to the `react` function.
 -- The `render` function takes the props and current state, as well as a
 -- state update callback, and produces a document.
-component :: ReactComponent ExampleProps
-component = react { displayName: "Counter", initialState, receiveProps, render }
+component :: React.Component Props
+component = React.component { displayName: "Counter", initialState, receiveProps, render }
   where
     initialState =
       { counter: 0
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
 
-    render props state setState =
+    render { props, state, setState } =
       R.button
         { onClick: Events.handler_ do
-                     setState \s -> s { counter = s.counter + 1 }
+            setState \s -> s { counter = s.counter + 1 }
         , children: [ R.text (props.label <> ": " <> show state.counter) ]
         }
 ```

examples/component/src/Container.purs

@@ -1,16 +1,16 @@
 module Container where
 
-import React.Basic (ReactComponent, createElement, stateless)
+import React.Basic as React
 import React.Basic.DOM as R
 import ToggleButton as ToggleButton
 
-component :: ReactComponent {}
-component = stateless { displayName: "Container", render }
+component :: React.Component {}
+component = React.stateless { displayName: "Container", render }
   where
     render _ =
       R.div
         { children:
-            [ createElement ToggleButton.component { on: true }
-            , createElement ToggleButton.component { on: false }
+            [ React.element ToggleButton.component { on: true }
+            , React.element ToggleButton.component { on: false }
             ]
         }

examples/component/src/ToggleButton.purs

@@ -2,24 +2,24 @@ module ToggleButton where
 
 import Prelude
 
-import React.Basic (ReactComponent, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
-type ExampleProps =
+type Props =
   { on :: Boolean
   }
 
-component :: ReactComponent ExampleProps
-component = react { displayName: "ToggleButton", initialState, receiveProps, render }
+component :: React.Component Props
+component = React.component { displayName: "ToggleButton", initialState, receiveProps, render }
   where
     initialState =
       { on: false }
 
-    receiveProps props _ setState =
+    receiveProps { props, setState } =
       setState _ { on = props.on }
 
-    render _ state setState =
+    render { state, setState } =
       R.button
         { onClick: Events.handler_ (setState \s -> s { on = not s.on })
         , children: [ R.text if state.on then "On" else "Off" ]

examples/controlled-input/src/ControlledInput.purs

@@ -3,24 +3,24 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import React.Basic (ReactComponent, fragment, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp)
 import React.Basic.Events as Events
 
-component :: ReactComponent {}
-component = react { displayName: "ControlledInput", initialState, receiveProps, render }
+component :: React.Component {}
+component = React.component { displayName: "ControlledInput", initialState, receiveProps, render }
   where
     initialState =
       { value: "hello world"
       , timeStamp: Nothing
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
-      
-    render _ state setState =
-      fragment
+
+    render { state, setState } =
+      React.fragment
         [ R.input
             { onChange:
                 Events.handler

examples/counter/src/Counter.purs

@@ -2,31 +2,31 @@ module Counter where
 
 import Prelude
 
-import React.Basic (ReactComponent, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
 -- The props for the component
-type ExampleProps =
+type Props =
   { label :: String
   }
 
 -- Create a component by passing a record to the `react` function.
 -- The `render` function takes the props and current state, as well as a
 -- state update callback, and produces a document.
-component :: ReactComponent ExampleProps
-component = react { displayName: "Counter", initialState, receiveProps, render }
+component :: React.Component Props
+component = React.component { displayName: "Counter", initialState, receiveProps, render }
   where
     initialState =
       { counter: 0
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
 
-    render props state setState =
+    render { props, state, setState } =
       R.button
         { onClick: Events.handler_ do
-                     setState \s -> s { counter = s.counter + 1 }
+            setState \s -> s { counter = s.counter + 1 }
         , children: [ R.text (props.label <> ": " <> show state.counter) ]
         }

src/React/Basic.js

@@ -6,6 +6,7 @@ var Fragment = React.Fragment || "div";
 exports.component_ = function(spec) {
   var Component = function constructor(props) {
     this.state = spec.initialState;
+    this._setState = this.setState.bind(this);
     return this;
   };
 
@@ -14,45 +15,50 @@ exports.component_ = function(spec) {
   Component.displayName = spec.displayName;
 
   Component.prototype.componentDidMount = function componentDidMount() {
-    var this_ = this;
-    spec.receiveProps(this.props, this.state, function(newState) {
-      return function() {
-        this_.setState(newState);
-      };
+    spec.receiveProps({
+      isFirstMount: true,
+      props: this.props,
+      state: this.state,
+      setState: this._setState,
+      setStateThen: this._setState,
+      instance_: this,
     });
   };
 
   Component.prototype.componentWillReceiveProps = function componentWillReceiveProps(
     newProps
   ) {
-    var this_ = this;
-    spec.receiveProps(newProps, this.state, function(newState) {
-      return function() {
-        this_.setState(newState);
-      };
+    spec.receiveProps({
+      isFirstMount: false,
+      props: newProps,
+      state: this.state,
+      setState: this._setState,
+      setStateThen: this._setState,
+      instance_: this,
     });
   };
 
   Component.prototype.render = function render() {
-    var this_ = this;
-    return spec.render(this.props, this.state, function(newState) {
-      return function() {
-        this_.setState(newState);
-      };
+    return spec.render({
+      props: this.props,
+      state: this.state,
+      setState: this._setState,
+      setStateThen: this._setState,
+      instance_: this,
     });
   };
 
   return Component;
 };
 
-exports.createElement_ = function(el, attrs) {
+exports.element_ = function(el, attrs) {
   return React.createElement.apply(
     null,
     [el, attrs].concat((attrs && attrs.children) || [])
   );
 };
 
-exports.createElementKeyed_ = React.createElement;
+exports.elementKeyed_ = exports.element_;
 
 exports.fragment = function(children) {
   return React.createElement.apply(null, [Fragment, {}].concat(children));