Alternative class construction (#129)

* Alternative class construction

This removes `createClass` and `spec` as well as the dependency on
`create-react-class` in favor of `component` and `pureComponent` which
creates constructors that inherit from `React.Component` and
`React.PureComponent` in an idiomatic way for React. This also obviates
the need for some machinery like `ref` handling, which can be
implemented with `purescript-refs` instead.

* Revert Ref -> Foreign

* Move prop constraints to createElement

* Add ref as a reserved prop

* Add statelessComponent

Author: natefaubion

bower.json

@@ -22,7 +22,8 @@
     "purescript-unsafe-coerce": "^3.0.0",
     "purescript-exceptions": "^3.1.0",
     "purescript-maybe": "^3.0.0",
-    "purescript-nullable": "^3.0.0"
+    "purescript-nullable": "^3.0.0",
+    "purescript-typelevel-prelude": "^2.5.0"
   },
   "devDependencies": {
     "purescript-console": "^3.0.0",

package.json

@@ -2,7 +2,6 @@
   "name": "purescript-react",
   "files": [],
   "peerDependencies": {
-    "react": "^16.0.0",
-    "create-react-class": "^15.6.0"
+    "react": "^16.0.0"
   }
 }

src/React.js

@@ -2,71 +2,74 @@
 "use strict";
 
 var React = require("react");
-var createReactClass = require("create-react-class");
 
-function getProps(this_) {
-  return function(){
-    return this_.props;
-  };
-}
-exports.getProps = getProps;
+function createClass(baseClass) {
+  function bindProperty(instance, prop, value) {
+    switch (prop) {
+      case 'componentDidMount':
+      case 'componentDidUpdate':
+      case 'componentWillMount':
+      case 'componentWillUnmount':
+      case 'render':
+      case 'state':
+        instance[prop] = value;
+        break;
+
+      case 'componentWillReceiveProps':
+        instance[prop] = function (a) { return value(a)(); };
+        break;
+
+      case 'componentDidCatch':
+      case 'componentWillUpdate':
+      case 'shouldComponentUpdate':
+        instance[prop] = function (a, b) { return value(a)(b)(); };
+        break;
+
+      default:
+        throw new Error('Not a component property: ' + prop);
+    }
+  }
 
-function getRefs(this_) {
-  return function(){
-    return this_.refs;
+  return function (displayName) {
+    return function (ctrFn) {
+      var Constructor = function (props) {
+        baseClass.call(this, props);
+        var spec = ctrFn(this)();
+        for (var k in spec) {
+          bindProperty(this, k, spec[k]);
+        }
+      };
+
+      Constructor.displayName = displayName;
+      Constructor.prototype = Object.create(baseClass.prototype);
+      Constructor.prototype.constructor = Constructor;
+
+      return Constructor;
+    };
   };
 }
-exports.getRefs = getRefs;
 
-function childrenToArray(children) {
-  var result = [];
+exports.componentImpl = createClass(React.Component);
 
-  React.Children.forEach(children, function(child){
-    result.push(child);
-  });
+exports.pureComponentImpl = createClass(React.PureComponent);
 
-  return result;
-}
-exports.childrenToArray = childrenToArray;
+exports.statelessComponent = function(x) { return x; };
 
-function getChildren(this_) {
+function getProps(this_) {
   return function(){
-    var children = this_.props.children;
-
-    var result = childrenToArray(children);
-
-    return result;
+    return this_.props;
   };
 }
-exports.getChildren = getChildren;
+exports.getProps = getProps;
 
-function readRefImpl (this_) {
-  return function(name) {
-    return function() {
-      return this_[name];
-    }
-  }
-}
-exports.readRefImpl = readRefImpl;
+exports.childrenToArray = React.Children.toArray
 
-function writeRef(this_) {
-  return function(name) {
-    return function(node) {
-      return function() {
-        this_[name] = node;
-        return {};
-      }
-    }
-  }
-}
-exports.writeRef = writeRef;
+exports.childrenCount = React.Children.count;
 
 function writeState(this_) {
   return function(state){
     return function(){
-      this_.setState({
-        state: state
-      });
+      this_.setState(state);
       return state;
     };
   };
@@ -77,9 +80,7 @@ function writeStateWithCallback(this_, cb) {
   return function(state){
     return function(cb){
       return function() {
-        this_.setState({
-          state: state
-        }, cb);
+        this_.setState(state, cb);
         return state;
       };
     };
@@ -89,7 +90,7 @@ exports.writeStateWithCallback = writeStateWithCallback;
 
 function readState(this_) {
   return function(){
-    return this_.state.state;
+    return this_.state;
   };
 }
 exports.readState = readState;
@@ -98,71 +99,13 @@ function transformState(this_){
   return function(update){
     return function(){
       this_.setState(function(old, props){
-        return {state: update(old.state)};
+        return update(old);
       });
     };
   };
 }
 exports.transformState = transformState;
 
-function createClass(toNullable, spec) {
-  var didCatch = toNullable(spec.componentDidCatch)
-
-  var result = {
-    displayName: spec.displayName,
-    render: function(){
-      return spec.render(this)();
-    },
-    getInitialState: function(){
-      return {
-        state: spec.getInitialState(this)()
-      };
-    },
-    componentWillMount: function(){
-      return spec.componentWillMount(this)();
-    },
-    componentDidMount: function(){
-      return spec.componentDidMount(this)();
-    },
-    componentDidCatch: didCatch
-      ? function(error, info) {return didCatch(this)(error)(info)(); }
-      : undefined,
-    componentWillReceiveProps: function(nextProps){
-      return spec.componentWillReceiveProps(this)(nextProps)();
-    },
-    shouldComponentUpdate: function(nextProps, nextState){
-      return spec.shouldComponentUpdate(this)(nextProps)(nextState.state)();
-    },
-    componentWillUpdate: function(nextProps, nextState){
-      return spec.componentWillUpdate(this)(nextProps)(nextState.state)();
-    },
-    componentDidUpdate: function(prevProps, prevState){
-      return spec.componentDidUpdate(this)(prevProps)(prevState.state)();
-    },
-    componentWillUnmount: function(){
-      return spec.componentWillUnmount(this)();
-    }
-  };
-
-  return createReactClass(result);
-}
-exports["createClass'"] = createClass;
-
-function capitalize(s) {
-  if (!s)
-    return s;
-  return s.charAt(0).toUpperCase() + s.slice(1);
-};
-
-function createClassStateless(dict) {
-  return function (f) {
-    if (!f.displayName)
-      f.displayName = capitalize(f.name);
-    return f;
-  };
-};
-exports.createClassStateless = createClassStateless;
-
 function forceUpdateCbImpl(this_, cb) {
   this_.forceUpdate(function() {
     return cb();
@@ -185,24 +128,26 @@ function createElement(class_) {
     };
   };
 }
-exports.createElement = createElement;
+exports.createElementImpl = createElement;
 exports.createElementTagName = createElement;
 
+function createLeafElement(class_) {
+  return function(props) {
+    return React.createElement(class_, props);
+  };
+}
+exports.createLeafElementImpl = createLeafElement;
+
 function createElementDynamic(class_) {
   return function(props) {
     return function(children){
       return React.createElement(class_, props, children);
     };
   };
 };
-exports.createElementDynamic = createElementDynamic;
+exports.createElementDynamicImpl = createElementDynamic;
 exports.createElementTagNameDynamic = createElementDynamic;
 
-function createFactory(class_) {
-  return React.createFactory(class_);
-}
-exports.createFactory = createFactory;
-
 function preventDefault(event) {
   return function() {
     event.preventDefault();