Initial hooks implementation

Author: ethul

bower.json

@@ -23,7 +23,8 @@
     "purescript-exceptions": "^4.0.0",
     "purescript-maybe": "^4.0.0",
     "purescript-nullable": "^4.0.0",
-    "purescript-typelevel-prelude": "^3.0.0"
+    "purescript-typelevel-prelude": "^3.0.0",
+    "purescript-tuples": "^5.1.0"
   },
   "devDependencies": {
     "purescript-console": "^4.1.0",

src/React.js

@@ -169,3 +169,13 @@ function createContext(defaultValue) {
   };
 }
 exports.createContext = createContext;
+
+exports.createElementHooks = function createElementHooks(props) {
+  return function(fn) {
+    var fn_ = function(props) {
+      return fn(props)();
+    };
+
+    return React.createElement(fn_, props);
+  };
+};

src/React.purs

@@ -63,6 +63,7 @@ module React
   , ContextProvider
   , ContextConsumer
   , createContext
+  , module React
   ) where
 
 import Prelude
@@ -75,6 +76,53 @@ import Prim.Row as Row
 import Type.Row (type (+))
 import Unsafe.Coerce (unsafeCoerce)
 
+import React.Hooks
+  ( useState
+  , useStateLazy
+  , setState
+  , modifyState
+  , SetState
+
+  , useEffect
+  , effectInput
+  , EffectInput
+
+  , useContext
+  , Context
+
+  , useReducer
+  , useReducerLazy
+  , dispatch
+  , Dispatch
+  , Action_
+  , Action
+
+  , useCallback
+  , callbackInput
+  , CallbackInput
+
+  , useMemo
+  , memoInput
+  , MemoInput
+
+  , useRef
+  , getRef
+  , setRef
+  , Ref
+
+  , useImperativeMethods
+  , imperativeMethodsInput
+  , ImperativeMethodsInput
+
+  , useMutationEffect
+  , mutationEffectInput
+  , MutationEffectInput
+
+  , useLayoutEffect
+  , layoutEffectInput
+  , LayoutEffectInput
+  ) as React
+
 -- | Name of a tag.
 type TagName = String
 
@@ -463,3 +511,10 @@ type ContextConsumer a = ReactClass { children :: a -> ReactElement }
 
 -- | Create a new context provider/consumer pair given a default value.
 foreign import createContext :: forall a. a -> Context a
+
+-- | Create an element from a function using Hooks.
+foreign import createElementHooks
+  :: forall props
+   . { | props }
+  -> ({ | props } -> Effect ReactElement)
+  -> ReactElement

src/React/Hooks.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+
+exports.useState_ = function useState_(Tuple, initialState) {
+  var result = React.useState(initialState);
+
+  var state = result[0];
+
+  var setState = result[1];
+
+  var tuple = Tuple(state)(setState);
+
+  return tuple;
+};
+
+exports.useEffect_ = function useEffect_(effect, inputs) {
+  var result = inputs ? React.useEffect(effect, inputs) : React.useEffect(effect);
+
+  return result;
+};
+
+exports.useContext_ = function useContext_(context) {
+  var result = React.useContext(context);
+
+  return result;
+}
+
+exports.useReducer_ = function useReducer_(Tuple, reducer, initialState) {
+  var result = React.useReducer(reducer, initialState);
+
+  var state = result[0];
+
+  var dispatch = result[1];
+
+  var tuple = Tuple(state)(dispatch);
+
+  return tuple;
+};
+
+exports.useReducerLazy_ = function useReducerLazy_(Tuple, reducer, initialState, initialAction) {
+  var result = React.useReducer(reducer, initialState, initialAction);
+
+  var state = result[0];
+
+  var dispatch = result[1];
+
+  var tuple = Tuple(state)(dispatch);
+
+  return tuple;
+};
+
+exports.useCallback_ = function useCallback_(callback, inputs) {
+  var result = inputs ? React.useCallback(callback, inputs) : React.useCallback(callback);
+
+  return result;
+};
+
+exports.useMemo_ = function useMemo_(memo, inputs) {
+  var result = inputs ? React.useMemo(memo, inputs) : React.useMemo(memo);
+
+  return result;
+};
+
+exports.useRef_ = function useRef_(initialValue) {
+  var result = React.useRef(initialValue);
+
+  return result;
+}
+
+exports.setRef_ = function setRef_(ref, value) {
+  ref.current = value;
+}
+
+exports.useImperativeMethods_ = function useImperativeMethods_(ref, imperativeMethods, inputs) {
+  var result = inputs ? React.useImperativeMethods(ref, imperativeMethods, inputs) : React.useImperativeMethods(ref, imperativeMethods);
+
+  return result;
+};
+
+exports.useMutationEffect_ = function useMutationEffect_(mutationEffect, inputs) {
+  var result = inputs ? React.useMutationEffect(mutationEffect, inputs) : React.useMutationEffect(mutationEffect);
+
+  return result;
+};
+
+exports.useLayoutEffect_ = function useLayoutEffect_(layoutEffect, inputs) {
+  var result = inputs ? React.useLayoutEffect(layoutEffect, inputs) : React.useLayoutEffect(layoutEffect);
+
+  return result;
+};