Change ReactContext to be foreign data type

Author: jvliwanag

src/React/Basic.js

@@ -220,9 +220,15 @@ exports.toReactComponent = function(_unionDict) {
 };
 
 exports.createContext = function(defaultValue) {
-  var context = React.createContext(defaultValue);
-  return {
-    consumer: context.Consumer,
-    provider: context.Provider
+  return function () {
+    return React.createContext(defaultValue);
   };
 };
+
+exports.contextProvider = function (context) {
+  return context.Provider;
+};
+
+exports.contextConsumer = function (context) {
+  return context.Consumer;
+};

src/React/Basic.purs

@@ -23,6 +23,8 @@ module React.Basic
   , Ref
   , ReactContext
   , createContext
+  , contextConsumer
+  , contextProvider
   , provider
   , consumer
   ) where
@@ -373,14 +375,11 @@ foreign import toReactComponent
   -> { render :: Self props state -> JSX | spec }
   -> ReactComponent { | jsProps }
 
-type ReactContext a =
-  { provider :: ReactComponent { value :: a, children :: Array JSX }
-  , consumer :: ReactComponent { children :: a -> Array JSX }
-  }
+foreign import data ReactContext :: Type -> Type
 
 -- | Create a `ReactContext` given a default value. Use `provider` and `consumer`
--- | to provide and consume context values. Alternatively, use the fields of
--- | `ReactContext` directly if a `ReactComponent` is required for interop.
+-- | to provide and consume context values. Alternatively, use `contextProvider`
+-- | and `contextConsumer` directly if a `ReactComponent` is required for interop.
 -- |
 -- | ```purs
 -- | render self =
@@ -398,21 +397,31 @@ type ReactContext a =
 -- | ```
 -- |
 -- | __*See also:* `provider`, `consumer`, React's documentation regarding Context__
-foreign import createContext :: forall a. a -> ReactContext a
+foreign import createContext :: forall a. a -> Effect (ReactContext a)
+
+foreign import contextProvider
+  :: forall a
+   . ReactContext a
+  -> ReactComponent { value :: a, children :: Array JSX }
+
+foreign import contextConsumer
+  :: forall a
+   . ReactContext a
+  -> ReactComponent { children :: a -> Array JSX }
 
 -- | Create a provider `JSX` given a context value and children.
 -- |
 -- | __*See also:* `createContext`, `consumer`__
 provider :: forall a. ReactContext a -> a -> Array JSX -> JSX
 provider context value children =
-  element context.provider { value, children }
+  element (contextProvider context) { value, children }
 
 -- | Create a consumer `JSX` from a context value to children.
 -- |
 -- | __*See also:* `createContext`, `producer`__
 consumer :: forall a. ReactContext a -> (a -> Array JSX) -> JSX
 consumer context children =
-  element context.consumer { children }
+  element (contextConsumer context) { children }
 
 -- |
 -- | Internal utility or FFI functions