Split the spec component type from ReactComponent; fix toReactComponent

Author: Michael Trotter

src/React/Basic.js

@@ -7,39 +7,47 @@ exports.createComponent_ = function(noUpdate, buildStateUpdate, displayName) {
   function contextToSelf(instance) {
     var self = {
       props: instance.props.$$props,
-      state: instance.state === undefined ? undefined : instance.state.$$state,
+      state: instance.state === null ? null : instance.state.$$state,
       readProps: function() {
         return self.instance_.props.$$props;
       },
       readState: function() {
         var state = self.instance_.state;
-        return state === undefined ? undefined : state.$$state;
+        return state === null ? null : state.$$state;
       },
       send: function(action) {
         return function() {
-          var updates = buildStateUpdate(
-            self.instance_.$$spec.update(self)(action)
+          var sideEffects = null;
+          self.instance_.setState(
+            function(s) {
+              var setStateContext = contextToSelf(self.instance_);
+              setStateContext.state = s.$$state;
+              var updates = buildStateUpdate(
+                self.instance_.$$spec.update(setStateContext)(action)
+              );
+              if (updates.effects !== null) {
+                sideEffects = updates.effects;
+              }
+              if (updates.state !== null && updates.state !== s.$$state) {
+                return { $$state: updates.state };
+              } else {
+                return null;
+              }
+            },
+            function() {
+              if (sideEffects !== null) {
+                sideEffects(contextToSelf(this))();
+              }
+            }
           );
-          if (updates.state !== null) {
-            self.instance_.setState(
-              { $$state: updates.state },
-              updates.effects !== null
-                ? function() {
-                    updates.effects(contextToSelf(this))();
-                  }
-                : undefined
-            );
-          } else if (updates.effects !== null) {
-            updates.effects(self)();
-          }
         };
       },
       instance_: instance
     };
     return self;
   }
 
-  var defaultInitialState = {};
+  var defaultInitialState = null;
   var defaultShouldUpdate = function() {
     return function() {
       return function() {
@@ -69,10 +77,10 @@ exports.createComponent_ = function(noUpdate, buildStateUpdate, displayName) {
     this.$$spec = props.$$spec;
     this.state =
       // React may optimize components with no state,
-      // so we leave state undefined if it was left as
+      // so we leave state null if it was left as
       // the default value.
       this.$$spec.initialState === defaultInitialState
-        ? undefined
+        ? null
         : { $$state: this.$$spec.initialState };
     return this;
   };
@@ -117,12 +125,12 @@ exports.createStatelessComponent = function(displayName) {
   function contextToSelf(instance) {
     var self = {
       props: instance.props.$$props,
-      state: undefined,
+      state: null,
       readProps: function() {
         return self.instance_.props.$$props;
       },
       readState: function() {
-        return undefined;
+        return null;
       },
       send: function() {
         return function() {};
@@ -132,7 +140,7 @@ exports.createStatelessComponent = function(displayName) {
     return self;
   }
 
-  var defaultInitialState = {};
+  var defaultInitialState = null;
   var defaultShouldUpdate = function() {
     return function() {
       return function() {
@@ -183,16 +191,36 @@ exports.createStatelessComponent = function(displayName) {
   };
 };
 
-exports.make = function(component) {
+exports.make = function($$spec) {
   return function($$props) {
     var props = {
       $$props: $$props,
-      $$spec: component
+      $$spec: $$spec
     };
-    return React.createElement(component.$$type, props);
+    return React.createElement($$spec.$$type, props);
   };
 };
 
+exports.toReactComponent = function($$spec) {
+  var Component = function constructor() {
+    return this;
+  };
+
+  Component.prototype = Object.create(React.Component.prototype);
+
+  Component.displayName = $$spec.$$type.displayName + " (Wrapper)";
+
+  Component.prototype.render = function() {
+    var props = {
+      $$props: this.props,
+      $$spec: $$spec
+    };
+    return React.createElement($$spec.$$type, props);
+  };
+
+  return Component;
+};
+
 exports.keyed_ = function(key, child) {
   return React.createElement(Fragment, { key: key }, child);
 };
@@ -204,9 +232,7 @@ exports.element_ = function(component, props) {
   );
 };
 
-exports.elementKeyed_ = function(key, child) {
-  return React.createElement.call(null, Fragment, { key: key }, child);
-};
+exports.elementKeyed_ = exports.element_;
 
 exports.fragment = function(children) {
   return React.createElement.apply(null, [Fragment, {}].concat(children));

src/React/Basic.purs

@@ -2,6 +2,7 @@ module React.Basic
   ( Component
   , StatelessComponent
   , ComponentSpec
+  , ComponentType
   , JSX
   , Update
   , StateUpdate(..)
@@ -42,8 +43,10 @@ instance semigroupJSX :: Semigroup JSX where
 instance monoidJSX :: Monoid JSX where
   mempty = empty
 
+data ComponentType props state action
+
 type ComponentSpec props state action =
-  { "$$type" :: ReactComponent props
+  { "$$type" :: ComponentType props state action
   , initialState :: state
   , shouldUpdate :: LimitedSelf props state -> props -> state -> Boolean
   , didMount :: Self props state action -> Effect Unit
@@ -187,7 +190,7 @@ data ReactComponentInstance
 
 createComponent
   :: String
-  -> { "$$type" :: forall props. ReactComponent props
+  -> { "$$type" :: forall props state action. ComponentType props state action
      , initialState :: forall state. state
      , shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean
      , didMount :: forall props state action. Self props state action -> Effect Unit
@@ -206,7 +209,7 @@ foreign import createComponent_
            , effects :: Nullable (Self props state action -> Effect Unit)
            })
       String
-      ({ "$$type" :: forall props. ReactComponent props
+      ({ "$$type" :: forall props state action. ComponentType props state action
        , initialState :: forall state. state
        , shouldUpdate :: forall props state. LimitedSelf props state -> props -> state -> Boolean
        , didMount :: forall props state action. Self props state action -> Effect Unit
@@ -219,7 +222,7 @@ foreign import createComponent_
 -- | Creates a named, stateless component
 foreign import createStatelessComponent
   :: String
-  -> { "$$type" :: forall props. ReactComponent props
+  -> { "$$type" :: forall props state action. ComponentType props state action
      , initialState :: Void
      , shouldUpdate :: forall props. LimitedSelf props Void -> props -> Void -> Boolean
      , didMount :: forall props. Self props Void Void -> Effect Unit
@@ -270,5 +273,7 @@ foreign import element_ :: forall props. Fn2 (ReactComponent { | props }) { | pr
 
 foreign import elementKeyed_ :: forall props. Fn2 (ReactComponent { | props }) { key :: String | props } JSX
 
-toReactComponent :: forall props. ({ | props } -> JSX) -> ReactComponent { | props }
-toReactComponent = unsafeCoerce
+foreign import toReactComponent :: forall props state action. ComponentSpec { | props } state action -> ReactComponent { | props }
+
+displayName :: forall props state action. ComponentSpec props state action -> String
+displayName = _.displayName <<< unsafeCoerce <<< _."$$type"

src/React/Basic/Compat.purs

@@ -22,18 +22,18 @@ component
      }
   -> ReactComponent { | props }
 component { displayName, initialState, receiveProps, render } =
-  toReactComponent (make (createComponent displayName)
+  toReactComponent (createComponent displayName)
     { initialState = initialState
     , didMount = receiveProps <<< selfToLegacySelf
     , didUpdate = receiveProps <<< selfToLegacySelf
-    , update = \self newState -> Update newState
+    , update = \self stateUpdate -> Update (stateUpdate self.state)
     , render = render <<< selfToLegacySelf
-    })
+    }
   where
     selfToLegacySelf { props, state, send } =
       { props
       , state
-      , setState: \fn -> send (fn state)
+      , setState: send
       }
 
 -- | Supports a common subset of the v2 API to ease the upgrade process
@@ -44,6 +44,6 @@ stateless
      }
   -> ReactComponent { | props }
 stateless { displayName, render } =
-  toReactComponent (make (createStatelessComponent displayName)
+  toReactComponent (createStatelessComponent displayName)
     { render = \self -> render self.props
-    })
+    }