Make it more difficult to run into the incompatible props bug

Author: Michael Trotter

examples/component/src/Container.purs

@@ -6,6 +6,9 @@ import React.Basic (Component, JSX, createComponent, makeStateless)
 import React.Basic.DOM as R
 import ToggleButton (toggleButton)
 
+component :: Component Unit
+component = createComponent "Container"
+
 toggleButtonContainer :: JSX
 toggleButtonContainer = unit # makeStateless component \_ ->
   R.div
@@ -14,6 +17,3 @@ toggleButtonContainer = unit # makeStateless component \_ ->
         , toggleButton { label: "B" }
         ]
     }
-
-component :: Component
-component = createComponent "Container"

examples/component/src/ToggleButton.purs

@@ -6,6 +6,9 @@ import Effect.Console (log)
 import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
 import React.Basic.DOM as R
 
+component :: Component Props
+component = createComponent "ToggleButton"
+
 type Props =
   { label :: String
   }
@@ -37,6 +40,3 @@ toggleButton = make component
             ]
         }
   }
-
-component :: Component
-component = createComponent "ToggleButton"

examples/controlled-input/src/ControlledInput.purs

@@ -9,7 +9,10 @@ import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetValue, timeStamp)
 import React.Basic.Events (merge)
 
-type Props = {}
+component :: Component Props
+component = createComponent "ControlledInput"
+
+type Props = Unit
 
 data Action
   = ValueChanged String Number
@@ -40,6 +43,3 @@ controlledInput = make component
         , R.p_ [ R.text ("Changed at = " <> maybe "never" show self.state.timestamp) ]
         ]
   }
-
-component :: Component
-component = createComponent "ControlledInput"

examples/controlled-input/src/Main.purs

@@ -18,5 +18,5 @@ main = do
   case container of
     Nothing -> throw "Container element not found."
     Just c  ->
-      let app = controlledInput {}
+      let app = controlledInput unit
        in render app c

examples/counter/src/Counter.purs

@@ -5,7 +5,7 @@ import Prelude
 import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
 import React.Basic.DOM as R
 
-component :: Component
+component :: Component Props
 component = createComponent "Counter"
 
 type Props =

examples/legacy-v2/src/Compat.purs

@@ -8,7 +8,7 @@ module React.Basic.Compat
 import Prelude
 
 import Effect (Effect)
-import React.Basic (ComponentSpec, JSX, ReactComponent, Self, StateUpdate(..), createComponent, element, elementKeyed, empty, fragment, fragmentKeyed, make, makeStateless, send, toReactComponent)
+import React.Basic (JSX, ReactComponent, Self, StateUpdate(..), createComponent, element, elementKeyed, empty, fragment, make, makeStateless, send, toReactComponent)
 
 type Component = ReactComponent
 

src/React/Basic.purs

@@ -73,7 +73,7 @@ import React.Basic.Events (EventFn, EventHandler, SyntheticEvent, handler)
 -- | For example:
 -- |
 -- | ```purs
--- | component :: Component
+-- | component :: Component Props
 -- | component = createComponent "Counter"
 -- |
 -- | type Props =
@@ -124,7 +124,7 @@ type ComponentSpec props state initialState action =
 -- | The resulting component spec is usually given the simplified `Component` type:
 -- |
 -- | ```purs
--- | component :: Component
+-- | component :: Component Props
 -- | component = createComponent "Counter"
 -- | ```
 -- |
@@ -133,6 +133,13 @@ type ComponentSpec props state initialState action =
 -- | `JSX` tree is a valid update, or if it needs to be replaced entirely
 -- | (expensive and clears component state lower in the tree).
 -- |
+-- | __*Note:* A specific type for the props in `Component props` should always be chosen at this point.
+-- | It's technically possible to declare the component with `forall props. Component props`
+-- | but doing so is unsafe. Leaving the prop type open allows the use of a single `Component`
+-- | definition in multiple React-Basic components that may have different prop types. Because
+-- | component lifecycles are managed by React, it's possible for incompatible prop values to
+-- | be passed into a lifecycle function.__
+-- |
 -- | __*Note:* A `Component` is *not* a valid React component by itself. If you would like to use
 -- |   a React-Basic component from JavaScript, use `toReactComponent`.__
 -- |
@@ -150,7 +157,7 @@ createComponent =
 
 -- | A simplified alias for `ComponentSpec`. This type is usually used to represent
 -- | the default component type returned from `createComponent`.
-type Component = forall props state action. ComponentSpec props state Unit action
+type Component props = forall state action. ComponentSpec props state Unit action
 
 -- | Opaque component information for internal use.
 -- |
@@ -258,7 +265,7 @@ foreign import readState :: forall props state action. Self props state action -
 -- | This is where you will want to provide customized implementations:
 -- |
 -- | ```purs
--- | component :: Component
+-- | component :: Component Props
 -- | component = createComponent "Counter"
 -- |
 -- | type Props =
@@ -294,7 +301,7 @@ foreign import make
 -- | Makes stateless component definition slightly less verbose:
 -- |
 -- | ```purs
--- | component :: Component
+-- | component :: Component Props
 -- | component = createComponent "Xyz"
 -- |
 -- | myComponent :: Props -> JSX