Clean up capture/monitor

Author: Michael Trotter

examples/component/src/ToggleButton.purs

@@ -28,7 +28,7 @@ render = make component
 
   , render = \self ->
       R.button
-        { onClick: self.capture identity $ const Toggle
+        { onClick: self.capture_ Toggle
         , children:
             [ R.text self.props.label
             , R.text if self.state.on

examples/counter/src/Counter.purs

@@ -22,7 +22,7 @@ render = make component
 
   , render = \self ->
       R.button
-        { onClick: self.capture identity $ const Increment
+        { onClick: self.capture_ Increment
         , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
         }
   }

src/React/Basic.js

@@ -7,7 +7,8 @@ exports.createComponent_ = function(
   noUpdate,
   buildStateUpdate,
   handler,
-  composeCancel,
+  composeCancelEventFn,
+  identityEventFn,
   displayName
 ) {
   function contextToSelf(instance) {
@@ -52,11 +53,12 @@ exports.createComponent_ = function(
         };
       },
       capture: function(eventFn) {
-        return function(makeAction) {
-          return handler(composeCancel(eventFn))(function(event) {
-            return self.send(makeAction(event));
-          });
-        };
+        return self.monitor(composeCancelEventFn(eventFn));
+      },
+      capture_: function(action) {
+        return self.capture(identityEventFn)(function() {
+          return action;
+        });
       },
       monitor: function(eventFn) {
         return function(makeAction) {
@@ -65,6 +67,11 @@ exports.createComponent_ = function(
           });
         };
       },
+      monitor_: function(action) {
+        return self.monitor(identityEventFn)(function() {
+          return action;
+        });
+      },
       instance_: instance
     };
     return self;
@@ -114,9 +121,10 @@ exports.createComponent_ = function(
   Component.displayName = displayName;
 
   Component.prototype.shouldComponentUpdate = function(nextProps, nextState) {
-    return this.$$spec.shouldUpdate(contextToSelf(this))(nextProps.$$props)(
-      nextState === null ? null : nextState.$$state
-    );
+    return this.$$spec.shouldUpdate({
+      props: this.props.$$props,
+      state: this.state === null ? null : this.state.$$state
+    })(nextProps.$$props)(nextState === null ? null : nextState.$$state);
   };
 
   Component.prototype.componentDidMount = function() {
@@ -129,7 +137,10 @@ exports.createComponent_ = function(
 
   Component.prototype.componentWillUnmount = function() {
     this.$$mounted = false;
-    return this.$$spec.willUnmount(contextToSelf(this))();
+    return this.$$spec.willUnmount({
+      props: this.props.$$props,
+      state: this.state === null ? null : this.state.$$state
+    })();
   };
 
   Component.prototype.render = function() {

src/React/Basic.purs

@@ -25,7 +25,7 @@ module React.Basic
 import Prelude
 
 import Data.Either (Either(..))
-import Data.Function.Uncurried (Fn2, Fn5, runFn2, runFn5)
+import Data.Function.Uncurried (Fn2, Fn6, runFn2, runFn6)
 import Data.Nullable (Nullable, notNull, null)
 import Effect (Effect)
 import Effect.Aff (Aff, runAff_)
@@ -79,8 +79,10 @@ type Self props state action =
   -- |
   -- | *capturing: prevent default and stop propagation
   , capture   :: forall a. EventFn SyntheticEvent a -> (a -> action) -> EventHandler
+  , capture_  ::           action -> EventHandler
   -- | Like `capture`, but does not cancel the event.
   , monitor   :: forall a. EventFn SyntheticEvent a -> (a -> action) -> EventHandler
+  , monitor_  ::           action -> EventHandler
 
   -- | Unsafe, but still frequently better than rewriting a
   -- | whold component in JS
@@ -196,18 +198,29 @@ createComponent
   :: forall props state action
    . String
   -> ComponentSpec props state Unit action
-createComponent = runFn5 createComponent_ NoUpdate buildStateUpdate handler ((preventDefault >>> stopPropagation) >>> _)
+createComponent =
+  runFn6
+    createComponent_
+    NoUpdate
+    buildStateUpdate
+    handler
+    ((preventDefault >>> stopPropagation) >>> _)
+    identity
 
 foreign import createComponent_
   :: forall props state action
-   . Fn5
+   . Fn6
       (StateUpdate props state action)
       (StateUpdate props state action
         -> { state   :: Nullable state
            , effects :: Nullable (Self props state action -> Effect Unit)
            })
+      -- handler
       (forall a. EventFn SyntheticEvent a -> (a -> Effect Unit) -> EventHandler)
+      -- composeCancelEventFn
       (forall a. EventFn SyntheticEvent a -> EventFn SyntheticEvent a)
+      -- identityEventFn
+      (EventFn SyntheticEvent SyntheticEvent)
       String
       (ComponentSpec props state Unit action)