Add non-indexed instances for Render

Author: Madeline Trotter

bower.json

@@ -16,7 +16,8 @@
     "purescript-console": "^4.2.0",
     "purescript-effect": "^2.0.0",
     "purescript-react-basic": "^7.0.0",
-    "purescript-indexed-monad": "^1.0.0"
+    "purescript-indexed-monad": "^1.0.0",
+    "purescript-unsafe-reference": "^3.0.1"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0"

examples/component/src/Container.purs

@@ -3,7 +3,6 @@ module Container where
 import Prelude
 
 import React.Basic.Hooks(CreateComponent, component, element)
-import React.Basic.Hooks as React
 import React.Basic.DOM as R
 import ToggleButton (mkToggleButton)
 
@@ -12,7 +11,7 @@ mkToggleButtonContainer = do
   toggleButton <- mkToggleButton
 
   component "Container" \_ ->
-    React.pure $ R.div
+    pure $ R.div
       { children:
           [ element toggleButton { label: "A" }
           , element toggleButton { label: "B" }

examples/component/src/ToggleButton.purs

@@ -17,7 +17,7 @@ mkToggleButton = do
       log $ "State: " <> if on then "On" else "Off"
       pure (pure unit)
 
-    React.pure $ R.button
+    pure $ R.button
       { onClick: handler_ $ setOn not
       , children:
           [ R.text label

examples/controlled-input/src/ControlledInput.purs

@@ -2,7 +2,6 @@ module ControlledInput where
 
 import Prelude
 
-import Control.Applicative.Indexed (ipure)
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue, timeStamp)
@@ -16,7 +15,7 @@ mkControlledInput = do
     firstName <- useInput "hello"
     lastName <- useInput "world"
 
-    React.pure $ R.form_
+    pure $ R.form_
       [ renderInput firstName
       , renderInput lastName
       ]
@@ -38,7 +37,7 @@ useInput
        }
 useInput initialValue = React.do
   { value, lastChanged } /\ replaceState <- useState { value: initialValue, lastChanged: Nothing }
-  ipure
+  pure
     { onChange: handler
         (preventDefault >>> stopPropagation >>> merge { targetValue, timeStamp })
         \{ timeStamp, targetValue } -> do

examples/counter/src/Counter.purs

@@ -5,7 +5,7 @@ import Prelude
 import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (CreateComponent, component, useEffect, useState, (/\))
+import React.Basic.Hooks (CreateComponent, component, fragment, useEffect, useState, (/\))
 import React.Basic.Hooks as React
 
 mkCounter :: CreateComponent {}
@@ -17,9 +17,11 @@ mkCounter = do
       setDocumentTitle $ "Count: " <> show counter
       pure mempty
 
-    React.pure $ R.button
-      { onClick: handler_ $ setCounter (_ + 1)
-      , children: [ R.text $ "Increment: " <> show counter ]
-      }
+    pure $ fragment
+      [ R.button
+          { onClick: handler_ $ setCounter (_ + 1)
+          , children: [ R.text $ "Increment: " <> show counter ]
+          }
+      ]
 
 foreign import setDocumentTitle :: String -> Effect Unit

examples/reducer/src/Reducer.purs

@@ -20,7 +20,7 @@ mkReducer = do
         Increment -> state { counter = state.counter + 1 }
         Decrement -> state { counter = state.counter - 1 }
 
-    React.pure $ fragment
+    pure $ fragment
       [ R.button
           { onClick: handler_ $ dispatch Decrement
           , children: [ R.text $ "Decrement" ]

examples/refs/src/Refs.purs

@@ -22,27 +22,27 @@ mkRefs :: CreateComponent {}
 mkRefs = do
   component "Refs" \props -> React.do
 
-      mouseDistance1 /\ buttonRef1 <- useNodeDistanceFromMouse
-      mouseDistance2 /\ buttonRef2 <- useNodeDistanceFromMouse
-      mouseDistance3 /\ buttonRef3 <- useNodeDistanceFromMouse
+    mouseDistance1 /\ buttonRef1 <- useNodeDistanceFromMouse
+    mouseDistance2 /\ buttonRef2 <- useNodeDistanceFromMouse
+    mouseDistance3 /\ buttonRef3 <- useNodeDistanceFromMouse
 
-      React.pure $ fragment
-        [ element (R.unsafeCreateDOMComponent "button")
-            { ref: buttonRef1
-            , children: [ R.text $ show mouseDistance1 <> "px" ]
-            , style: R.css { width: "100px", position: "absolute", top: "20px", left: "200px" }
-            }
-        , element (R.unsafeCreateDOMComponent "button")
-            { ref: buttonRef2
-            , children: [ R.text $ show mouseDistance2 <> "px" ]
-            , style: R.css { width: "100px", position: "absolute", top: "60px", left: "40px" }
-            }
-        , element (R.unsafeCreateDOMComponent "button")
-            { ref: buttonRef3
-            , children: [ R.text $ show mouseDistance3 <> "px" ]
-            , style: R.css { width: "100px", position: "absolute", top: "120px", left: "90px" }
-            }
-        ]
+    pure $ fragment
+      [ element (R.unsafeCreateDOMComponent "button")
+          { ref: buttonRef1
+          , children: [ R.text $ show mouseDistance1 <> "px" ]
+          , style: R.css { width: "100px", position: "absolute", top: "20px", left: "200px" }
+          }
+      , element (R.unsafeCreateDOMComponent "button")
+          { ref: buttonRef2
+          , children: [ R.text $ show mouseDistance2 <> "px" ]
+          , style: R.css { width: "100px", position: "absolute", top: "60px", left: "40px" }
+          }
+      , element (R.unsafeCreateDOMComponent "button")
+          { ref: buttonRef3
+          , children: [ R.text $ show mouseDistance3 <> "px" ]
+          , style: R.css { width: "100px", position: "absolute", top: "120px", left: "90px" }
+          }
+      ]
 
 type UseNodeDistance hooks = UseEffect Unit (UseState Int (UseRef (Nullable Node) hooks))
 
@@ -82,4 +82,4 @@ useNodeDistanceFromMouse = React.do
         pure do
           removeEventListener mouseMoveEventType mouseMoveListener false windowEventTarget
 
-  React.pure (mouseDistance /\ elementRef)
+  pure (mouseDistance /\ elementRef)

examples/todo-app/src/TodoApp.purs

@@ -67,7 +67,7 @@ mkTodoApp = do
 
   component "TodoApp" \props -> React.do
       state /\ dispatch <- useReducer initialState reducer
-      React.pure $ R.div
+      pure $ R.div
         { children:
             [ element todoInput { dispatch }
             , R.div_ $ flip Array.mapWithIndex state.todos \id todo ->
@@ -94,7 +94,7 @@ mkTodoInput :: CreateComponent { dispatch :: Action -> Effect Unit }
 mkTodoInput = do
   component "TodoInput" \props -> React.do
     value /\ setValue <- useState ""
-    React.pure $ R.form
+    pure $ R.form
       { onSubmit: handler (preventDefault >>> stopPropagation) \_ -> do
           props.dispatch $ CreateTodo value
           setValue $ const ""
@@ -113,7 +113,7 @@ mkTodoInput = do
 
 mkTodoRow :: CreateComponent { id :: Int, todo :: Todo, dispatch :: Action -> Effect Unit }
 mkTodoRow = component "Todo" \props -> React.do
-  React.pure $ R.div
+  pure $ R.div
     { children:
         [ R.label
             { children:
@@ -150,7 +150,7 @@ mkTodoFilters = component "TodoFilters" \props -> React.do
           then R.css { cursor: "pointer", fontWeight: "bold" }
           else R.css { cursor: "pointer" }
       }
-  React.pure $ R.div
+  pure $ R.div
     { children:
         [ R.hr { style: R.css { color: "lightgrey" } }
         , filterLink All "All"

src/React/Basic/Hooks.purs

@@ -40,41 +40,46 @@ module React.Basic.Hooks
   , useMemo
   , UseMemoLazy
   , useMemoLazy
+  , UnsafeReference(..)
   , Render
   , Pure
   , Hook
   , bind
   , discard
-  , pure
   , displayName
   , module React.Basic
   , module Data.Tuple
   , module Data.Tuple.Nested
   ) where
 
-import Prelude hiding (bind, discard, pure)
+import Prelude hiding (bind, discard)
 
-import Control.Applicative.Indexed (class IxApplicative, ipure)
+import Control.Applicative.Indexed (class IxApplicative)
 import Control.Apply.Indexed (class IxApply)
 import Control.Bind.Indexed (class IxBind, ibind)
 import Data.Function.Uncurried (Fn2, mkFn2)
 import Data.Functor.Indexed (class IxFunctor)
 import Data.Maybe (Maybe)
+import Data.Newtype (class Newtype)
 import Data.Nullable (Nullable, toMaybe)
 import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested (tuple2, (/\))
 import Effect (Effect)
 import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn3, mkEffectFn1, runEffectFn1, runEffectFn2, runEffectFn3)
-import Prelude (bind, pure) as Prelude
+import Prelude (bind) as Prelude
 import React.Basic (JSX, ReactComponent, empty, keyed, fragment, element, elementKeyed)
+import Type.Equality (class TypeEquals)
 import Unsafe.Coerce (unsafeCoerce)
+import Unsafe.Reference (unsafeRefEq)
 
--- | Alias for convenience. Creating components is effectful because
--- | React uses the function instance as the component's "identity"
--- | or "type".
+-- | Alias for convenience.
 type CreateComponent props = Effect (ReactComponent props)
 
 -- | Create a React component given a display name and render function.
+-- | Creating components is effectful because React uses the function
+-- | instance as the component's "identity" or "type". Components should
+-- | be created during a bootstrap phase and not within component
+-- | lifecycles or render functions.
 component
   :: forall hooks props
    . String
@@ -191,6 +196,11 @@ useMemoLazy
   -> Hook (UseMemoLazy a) a
 useMemoLazy key computeA = Render (runEffectFn3 useMemoLazy_ (mkFn2 eq) key computeA)
 
+newtype UnsafeReference a = UnsafeReference a
+derive instance newtypeUnsafeReference :: Newtype (UnsafeReference a) _
+instance eqUnsafeReference :: Eq (UnsafeReference a) where
+  eq = unsafeRefEq
+
 -- | Render represents the effects allowed within a React component's
 -- | body, i.e. during "render". This includes hooks and ends with
 -- | returning JSX (see `pure`), but does not allow arbitrary side
@@ -207,20 +217,32 @@ instance ixFunctorRender :: IxFunctor Render where
 instance ixApplyRender :: IxApply Render where
   iapply (Render f) (Render a) = Render (apply f a)
 
+instance ixApplicativeRender :: IxApplicative Render where
+  ipure a = Render (pure a)
+
 instance ixBindRender :: IxBind Render where
   ibind (Render m) f = Render (Prelude.bind m \a -> case f a of Render b -> b)
 
-instance ixApplicativeRender :: IxApplicative Render where
-  ipure a = Render (Prelude.pure a)
-
+-- | Exported for use with qualified-do syntax
 bind :: forall a b x y z m. IxBind m => m x y a -> (a -> m y z b) -> m x z b
 bind = ibind
 
+-- | Exported for use with qualified-do syntax
 discard :: forall a b x y z m. IxBind m => m x y a -> (a -> m y z b) -> m x z b
 discard = ibind
 
-pure :: forall a x m. IxApplicative m => a -> m x x a
-pure = ipure
+instance functorRender :: Functor (Render x y) where
+  map f (Render a) = Render (map f a)
+
+instance applyRender :: TypeEquals x y => Apply (Render x y) where
+  apply (Render f) (Render a) = Render (apply f a)
+
+instance applicativeRender :: TypeEquals x y => Applicative (Render x y) where
+  pure a = Render (pure a)
+
+instance bindRender :: TypeEquals x y => Bind (Render x y) where
+  bind (Render m) f = Render (Prelude.bind m \a -> case f a of Render b -> b)
+
 
 -- | Retrieve the Display Name from a `ReactComponent`. Useful for debugging and improving
 -- | error messages in logs.