Updates for 0.12 (#149)

* Updates for 0.12

* Add Semigroup/Monoid instances for ReactElement

* Add Context API

* Add new lifecycle methods

* Add getState check for constructor

* Rename Ref to ReactRef

* Rename transformState to modifyState, add modifyStateWithCallback

* Formatting for type signatures

* Bump react dep

* Cleanup some FFI

* Fix bad vars

* Fix constraints for component/pureComponent

* Add unsafe variations of createElement

Resolves #64 
Resolves #116 
Resolves #148

Author: natefaubion

bower.json

@@ -17,16 +17,16 @@
     "url": "git://github.com/purescript-contrib/purescript-react.git"
   },
   "dependencies": {
-    "purescript-eff": "^3.0.0",
-    "purescript-prelude": "^3.0.0",
-    "purescript-unsafe-coerce": "^3.0.0",
-    "purescript-exceptions": "^3.1.0",
-    "purescript-maybe": "^3.0.0",
-    "purescript-nullable": "^3.0.0",
-    "purescript-typelevel-prelude": "^2.5.0"
+    "purescript-effect": "^2.0.0",
+    "purescript-prelude": "^4.0.0",
+    "purescript-unsafe-coerce": "^4.0.0",
+    "purescript-exceptions": "^4.0.0",
+    "purescript-maybe": "^4.0.0",
+    "purescript-nullable": "^4.0.0",
+    "purescript-typelevel-prelude": "^3.0.0"
   },
   "devDependencies": {
-    "purescript-console": "^3.0.0",
-    "purescript-psci-support": "^3.0.0"
+    "purescript-console": "^4.1.0",
+    "purescript-psci-support": "^4.0.0"
   }
 }

package.json

@@ -2,6 +2,6 @@
   "name": "purescript-react",
   "files": [],
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.3.0"
   }
 }

src/React.js

@@ -6,27 +6,38 @@ var React = require("react");
 function createClass(baseClass) {
   function bindProperty(instance, prop, value) {
     switch (prop) {
+      case 'state':
+      case 'render':
       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':
+      case 'getSnapshotBeforeUpdate':
         instance[prop] = function (a, b) { return value(a)(b)(); };
         break;
 
+      case 'componentDidUpdate':
+        instance[prop] = function (a, b, c) { return value(a)(b)(c)(); };
+        break;
+
+      case 'unsafeComponentWillMount':
+        instance['UNSAFE_componentWillMount'] = value;
+        break;
+
+      case 'unsafeComponentWillReceiveProps':
+        instance['UNSAFE_componentWillReceiveProps'] = function (a) { return value(a)(); };
+        break;
+
+      case 'unsafeComponentWillUpdate':
+        instance['UNSAFE_componentWillUpdate'] = function (a, b) { return value(a)(b)(); };
+        break;
+
       default:
-        throw new Error('Not a component property: ' + prop);
+        throw new Error('[purescript-react] Not a component property: ' + prop);
     }
   }
 
@@ -49,9 +60,25 @@ function createClass(baseClass) {
   };
 }
 
-exports.componentImpl = createClass(React.Component);
+function createClassWithDerivedState(classCtr) {
+  return function(displayName) {
+    return function(getDerivedStateFromProps) {
+      return function(ctrFn) {
+        var Constructor = componentImpl(displayName)(ctrFn);
+        Constructor.getDerivedStateFromProps = function(a, b) { return getDerivedStateFromProps(a)(b) };
+        return Constructor;
+      };
+    };
+  };
+}
 
-exports.pureComponentImpl = createClass(React.PureComponent);
+var componentImpl = createClass(React.Component);
+exports.componentImpl = componentImpl;
+exports.componentWithDerivedStateImpl = createClassWithDerivedState(componentImpl);
+
+var pureComponentImpl = createClass(React.PureComponent);
+exports.pureComponentImpl = pureComponentImpl
+exports.pureComponentWithDerivedStateImpl = createClassWithDerivedState(pureComponentImpl);
 
 exports.statelessComponent = function(x) { return x; };
 
@@ -68,60 +95,44 @@ exports.childrenToArray = React.Children.toArray
 
 exports.childrenCount = React.Children.count;
 
-function writeState(this_) {
+function setStateImpl(this_) {
   return function(state){
     return function(){
       this_.setState(state);
-      return state;
     };
   };
 }
-exports.writeState = writeState;
+exports.setStateImpl = setStateImpl;
 
-function writeStateWithCallback(this_, cb) {
+function setStateWithCallbackImpl(this_) {
   return function(state){
     return function(cb){
       return function() {
         this_.setState(state, cb);
-        return state;
       };
     };
   };
 }
-exports.writeStateWithCallback = writeStateWithCallback;
+exports.setStateWithCallbackImpl = setStateWithCallbackImpl;
 
-function readState(this_) {
+function getState(this_) {
   return function(){
+    if (!this_.state) {
+      throw new Error('[purescript-react] Cannot get state within constructor');
+    }
     return this_.state;
   };
 }
-exports.readState = readState;
+exports.getState = getState;
 
-function transformState(this_){
-  return function(update){
-    return function(){
-      this_.setState(function(old, props){
-        return update(old);
-      });
+function forceUpdateWithCallback(this_) {
+  return function(cb) {
+    return function() {
+      this_.forceUpdate(cb);
     };
   };
 }
-exports.transformState = transformState;
-
-function forceUpdateCbImpl(this_, cb) {
-  this_.forceUpdate(function() {
-    return cb();
-  });
-  return {};
-};
-exports.forceUpdateCbImpl = forceUpdateCbImpl;
-
-function handle(f) {
-  return function(e){
-    return f(e)();
-  };
-};
-exports.handle = handle;
+exports.forceUpdateWithCallback = forceUpdateWithCallback;
 
 function createElement(class_) {
   return function(props){
@@ -149,3 +160,12 @@ function createElementDynamic(class_) {
 };
 exports.createElementDynamicImpl = createElementDynamic;
 exports.createElementTagNameDynamic = createElementDynamic;
+
+function createContext(defaultValue) {
+  var context = React.createContext(defaultValue);
+  return {
+    consumer: context.Consumer,
+    provider: context.Provider
+  };
+}
+exports.createContext = createContext;