Refactor Self, plus more FFI perf improvements

Author: Michael Trotter

examples/component/src/Container.purs

@@ -4,14 +4,14 @@ import Prelude
 
 import React.Basic (Component, JSX, createComponent, makeStateless)
 import React.Basic.DOM as R
-import ToggleButton as ToggleButton
+import ToggleButton (toggleButton)
 
-render :: JSX
-render = unit # makeStateless component \_ ->
+toggleButtonContainer :: JSX
+toggleButtonContainer = unit # makeStateless component \_ ->
   R.div
     { children:
-        [ ToggleButton.render { label: "A" }
-        , ToggleButton.render { label: "B" }
+        [ toggleButton { label: "A" }
+        , toggleButton { label: "B" }
         ]
     }
 

examples/component/src/Main.purs

@@ -2,7 +2,7 @@ module Main where
 
 import Prelude
 
-import Container as Container
+import Container (toggleButtonContainer)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
@@ -18,5 +18,5 @@ main = do
   case container of
     Nothing -> throw "Container element not found."
     Just c  ->
-      let app = Container.render
+      let app = toggleButtonContainer
        in render app c

examples/component/src/ToggleButton.purs

@@ -3,7 +3,7 @@ module ToggleButton where
 import Prelude
 
 import Effect.Console (log)
-import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
+import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
 import React.Basic.DOM as R
 
 type Props =
@@ -13,8 +13,8 @@ type Props =
 data Action
   = Toggle
 
-render :: Props -> JSX
-render = make component
+toggleButton :: Props -> JSX
+toggleButton = make component
   { initialState =
       { on: false
       }
@@ -28,7 +28,7 @@ render = make component
 
   , render = \self ->
       R.button
-        { onClick: self.capture_ Toggle
+        { onClick: capture_ self Toggle
         , children:
             [ R.text self.props.label
             , R.text if self.state.on

examples/controlled-input/src/ControlledInput.purs

@@ -3,8 +3,7 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import Effect.Console (logShow)
-import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
+import React.Basic (Component, JSX, StateUpdate(..), capture, createComponent, make)
 import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetValue, timeStamp)
@@ -15,8 +14,8 @@ type Props = {}
 data Action
   = ValueChanged String Number
 
-render :: Props -> JSX
-render = make component
+controlledInput :: Props -> JSX
+controlledInput = make component
   { initialState =
       { value: "hello world"
       , timestamp: Nothing
@@ -29,22 +28,18 @@ render = make component
           , timestamp = Just timestamp
           }
 
-  , render = render
-  }
-  where
-    render self =
+  , render = \self ->
       React.fragment
         [ R.input
             { onChange:
-                self.capture
-                  (merge { targetValue, timeStamp })
+                capture self (merge { targetValue, timeStamp })
                   \{ timeStamp, targetValue } -> ValueChanged (fromMaybe "" targetValue) timeStamp
             , value: self.state.value
             }
         , R.p_ [ R.text ("Current value = " <> show self.state.value) ]
         , R.p_ [ R.text ("Changed at = " <> maybe "never" show self.state.timestamp) ]
         ]
-
+  }
 
 component :: Component
 component = createComponent "ControlledInput"

examples/controlled-input/src/Main.purs

@@ -2,7 +2,7 @@ module Main where
 
 import Prelude
 
-import ControlledInput as ControlledInput
+import ControlledInput (controlledInput)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
@@ -18,5 +18,5 @@ main = do
   case container of
     Nothing -> throw "Container element not found."
     Just c  ->
-      let app = ControlledInput.render {}
+      let app = controlledInput {}
        in render app c

examples/counter/src/Counter.purs

@@ -2,7 +2,7 @@ module Counter where
 
 import Prelude
 
-import React.Basic (Component, JSX, StateUpdate(..), createComponent, make)
+import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
 import React.Basic.DOM as R
 
 type Props =
@@ -12,8 +12,8 @@ type Props =
 data Action
   = Increment
 
-render :: Props -> JSX
-render = make component
+counter :: Props -> JSX
+counter = make component
   { initialState = { counter: 0 }
 
   , update = \self -> case _ of
@@ -22,7 +22,7 @@ render = make component
 
   , render = \self ->
       R.button
-        { onClick: self.capture_ Increment
+        { onClick: capture_ self Increment
         , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
         }
   }

examples/counter/src/Main.purs

@@ -2,7 +2,7 @@ module Main where
 
 import Prelude
 
-import Counter as Counter
+import Counter (counter)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
@@ -18,5 +18,5 @@ main = do
   case container of
     Nothing -> throw "Container element not found."
     Just c  ->
-      let app = Counter.render { label: "Increment" }
+      let app = counter { label: "Increment" }
        in render app c

examples/legacy-v2/src/Compat.purs

@@ -8,7 +8,7 @@ module React.Basic.Compat
 import Prelude
 
 import Effect (Effect)
-import React.Basic (JSX, ReactComponent, Self, StateUpdate(..), ComponentSpec, createComponent, element, elementKeyed, empty, fragment, fragmentKeyed, make, makeStateless, toReactComponent)
+import React.Basic (ComponentSpec, JSX, ReactComponent, Self, StateUpdate(..), createComponent, element, elementKeyed, empty, fragment, fragmentKeyed, make, makeStateless, send, toReactComponent)
 
 type Component = ReactComponent
 
@@ -22,18 +22,18 @@ component
      }
   -> ReactComponent { | props }
 component { displayName, initialState, receiveProps, render } =
-  toReactComponent (createComponent displayName)
+  toReactComponent identity (createComponent displayName)
     { initialState = initialState
     , didMount = receiveProps <<< selfToLegacySelf
     , didUpdate = receiveProps <<< selfToLegacySelf
     , update = \self stateUpdate -> Update (stateUpdate self.state)
     , render = render <<< selfToLegacySelf
     }
   where
-    selfToLegacySelf { props, state, send } =
+    selfToLegacySelf self@{ props, state } =
       { props
       , state
-      , setState: send
+      , setState: send self
       }
 
 -- | Supports a common subset of the v2 API to ease the upgrade process
@@ -44,6 +44,6 @@ stateless
      }
   -> ReactComponent { | props }
 stateless { displayName, render } =
-  toReactComponent (createComponent displayName)
+  toReactComponent identity (createComponent displayName)
     { render = \self -> render self.props
     }

examples/legacy-v2/src/LegacyCounter.purs

@@ -11,8 +11,8 @@ type Props =
   }
 
 -- | checks `component`
-counter :: Component Props
-counter = component { displayName: "LegacyCounter", initialState, receiveProps, render }
+legacyCounter :: Component Props
+legacyCounter = component { displayName: "LegacyCounter", initialState, receiveProps, render }
   where
     initialState =
       { counter: 0

examples/legacy-v2/src/Main.purs

@@ -5,7 +5,7 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import LegacyCounter as LegacyCounter
+import LegacyCounter (legacyCounter)
 import React.Basic (element)
 import React.Basic.DOM (render)
 import Web.DOM.NonElementParentNode (getElementById)
@@ -19,5 +19,5 @@ main = do
   case container of
     Nothing -> throw "Container element not found."
     Just c  ->
-      let app = element LegacyCounter.counter { label: "Increment" }
+      let app = element legacyCounter { label: "Increment" }
        in render app c