Elmish.React.Import
- Package
- purescript-elmish
- Repository
- collegevine/purescript-elmish
This module provides types to support FFI-importing React components into Elmish parlance. A typical import of a React component consists of four parts:
- A partial row of required props.
- A partial row of optional props.
- Actual FFI-import of the component constructor. This import is weakly typed and shouldn't be exported from the module. Consider it internal implementation detail.
- Strongly-typed, PureScript-friendly function that constructs the
component. The body of such function usually consists of just a call
to
createElement(orcreateElement'for childless components), its only purpose being the type signature. This function is what should be exported for use by consumers.
Classes and type aliases provided in this module, when applied to the constructor function, make it possible to pass only partial props to it, while still ensuring their correct types and presence of non-optional ones.
Example:
// JSX
// `world` prop is required, `hello` and `highlight` are optional
export const MyComponent = ({ hello, world, highlight }) =>
<div>
<span>{hello || "Hello"}, </span>
<span style={{ color: highlight ? "red" : "" }}>{world}</span>
</div>
-- PureScript
module MyComponent(Props, OptProps, myComponent) where
import Elmish.React (createElement)
import Elmish.React.Import (ImportedReactComponentConstructor, ImportedReactComponent)
type Props r = ( world :: String | r )
type OptProps r = ( hello :: String, highlight :: Boolean | r )
myComponent :: ImportedReactComponentConstructor Props OptProps
myComponent = createElement myComponent_
foreign import myComponent_ :: ImportedReactComponent
-- PureScript use site
import MyComponent (myComponent)
import Elmish.React.DOM (fragment)
view :: ...
view = H.fragment
[ myComponent { world: "world" }
, myComponent { hello: "Goodbye", world: "cruel world!", highlight: true }
]
#CommonProps Source
type CommonProps = (key :: String)Row of props that are common to all React components, without having to declare them.
#EmptyProps Source
type EmptyProps (r :: Row Type) = rAnd empty open row. To be used for components that don't have any optional or any required props.
#ImportedReactComponentConstructor' Source
type ImportedReactComponentConstructor' reqProps optProps result = forall props. IsSubsetOf props (reqProps + optProps + CommonProps) => IsSubsetOf (reqProps ()) props => ValidReactProps (Record props) => Record props -> resultType of a function used to create a React JSX-imported component that is generic in such a way as to allow any subset of optional properties (including an empty subset) to be passed in.
#ImportedReactComponentConstructor Source
type ImportedReactComponentConstructor reqProps optProps = ImportedReactComponentConstructor' reqProps optProps ReactElementType of a function used to create a React JSX-imported component that doesn't admit children. The function is generic in such a way as to allow any subset of optional properties (including an empty subset) to be passed in.
#ImportedReactComponentConstructorWithContent Source
type ImportedReactComponentConstructorWithContent reqProps optProps = forall content. ReactChildren content => ImportedReactComponentConstructor' reqProps optProps (content -> ReactElement)Type of a function used to create a React JSX-imported component that can
include children. The function is generic in such a way as to allow any
subset of optional properties (including an empty subset) to be passed in.
The children are polymorphic, expressed via the ReactChildren type class.
#ImportedReactComponent Source
type ImportedReactComponent = forall r. ReactComponent rA React component directly imported from JavaScript.
#IsSubsetOf Source
class IsSubsetOf (subset :: Row Type) (superset :: Row Type) Instances
(Union subset r superset) => IsSubsetOf subset superset