Module

Thermite

Package
purescript-thermite
Repository
paf31/purescript-thermite

Thermite provides a simple model-view-action abstraction on top of purescript-react:

  • A Spec defines a state type which acts as the model.
  • The Spec also defines an action type which acts as the set of actions.
  • The view is a Render function which produces a React element for the current state.
  • The PerformAction function can be used to update the state based on an action.

A Spec can be created using simpleSpec, and turned into a React component class using createClass.

Thermite also provides type class instances and lens combinators for composing Specs.

#PerformAction Source

type PerformAction eff state props action = action -> props -> state -> CoTransformer (Maybe state) (state -> state) (Aff eff) Unit

A type synonym for an action handler, which takes an action, the current props and state for the component, and return a CoTransformer which will emit state updates asynchronously.

Control.Coroutine.cotransform can be used to emit state update functions and wait for the new state value. If cotransform returns Nothing, then the state could not be updated. Usually, this will not happen, but it is possible in certain use cases involving split and foreach.

#defaultPerformAction Source

defaultPerformAction :: forall action props state eff. PerformAction eff state props action

A default PerformAction action implementation which ignores all actions.

#writeState Source

writeState :: forall eff state. state -> CoTransformer (Maybe state) (state -> state) (Aff eff) (Maybe state)

Replace the current component state.

#modifyState Source

modifyState :: forall eff state. (state -> state) -> CoTransformer (Maybe state) (state -> state) (Aff eff) (Maybe state)

An alias for cotransform - apply a function to the current component state.

#EventHandler Source

type EventHandler = forall refs eff. Eff (props :: ReactProps, refs :: ReactRefs refs, state :: ReactState ReadWrite | eff) Unit

A type synonym for an event handler which can be used to construct purescript-react's event attributes.

#Render Source

type Render state props action = (action -> EventHandler) -> props -> state -> Array ReactElement -> Array ReactElement

A rendering function, which takes an action handler function, the current state and props, an array of child nodes and returns a HTML document.

#defaultRender Source

defaultRender :: forall action props state. Render state props action

A default Render implementation which renders nothing.

This is useful when just appending action handlers.

#Spec Source

newtype Spec eff state props action

A component specification, which can be passed to createClass.

A minimal Spec can be built using simpleSpec.

The Monoid instance for Spec will compose Specs by placing rendered HTML elements next to one another, and performing actions in sequence.

Instances

#_performAction Source

_performAction :: forall action props state eff. Lens' (Spec eff state props action) (PerformAction eff state props action)

A Lens for accessing the PerformAction portion of a Spec.

#_render Source

_render :: forall action props state eff. Lens' (Spec eff state props action) (Render state props action)

A Lens for accessing the Render portion of a Spec.

This can be useful when wrapping a Render function in order to frame a set of controls with some containing element. For example:

wrap :: Spec _ State _ Action -> Spec _ State _ Action
wrap = over _render \child dispatch props state childre  ->
  [ R.div [ RP.className "wrapper" ] [ child dispatch props state children ] ]

#simpleSpec Source

simpleSpec :: forall action props state eff. PerformAction eff state props action -> Render state props action -> Spec eff state props action

Create a minimal Spec. The arguments are, in order:

  • The PerformAction function for performing actions
  • The Render function for rendering the current state as a HTML document

For example:

import qualified React.DOM as R

data Action = Increment

spec :: Spec _ Int _ Action
spec = simpleSpec performAction render
  where
  render :: Render _ Int _
  render _ _ n _ = [ R.text (show n) ]

  performAction :: PerformAction _ Int _ Action
  performAction Increment _ n k = k (n + 1)

#createClass Source

createClass :: forall action props state eff. Spec eff state props action -> state -> ReactClass props

Create a React component class from a Thermite component Spec.

#createReactSpec Source

createReactSpec :: forall action props state eff. Spec eff state props action -> state -> { dispatcher :: ReactThis props state -> action -> EventHandler, spec :: ReactSpec props state eff }

Create a React component spec from a Thermite component Spec.

This function is a low-level alternative to createClass, used when the React component spec needs to be modified before being turned into a component class, e.g. by adding additional lifecycle methods.

#createReactSpec' Source

createReactSpec' :: forall action props state eff. (Array ReactElement -> ReactElement) -> Spec eff state props action -> state -> { dispatcher :: ReactThis props state -> action -> EventHandler, spec :: ReactSpec props state eff }

Create a React component spec from a Thermite component Spec with an additional function for converting the rendered Array of ReactElement's into a single ReactElement as is required by React.

This function is a low-level alternative to createClass, used when the React component spec needs to be modified before being turned into a component class, e.g. by adding additional lifecycle methods.

#defaultMain Source

defaultMain :: forall eff action props state. Spec eff state props action -> state -> props -> Eff (dom :: DOM | eff) Unit

A default implementation of main which renders a component to the document body.

#withState Source

withState :: forall action props state eff. (state -> Spec eff state props action) -> Spec eff state props action

This function captures the state of the Spec as a function argument.

This can sometimes be useful in complex scenarios involving the focus and foreach combinators.

#focus Source

focus :: forall action2 action1 state1 state2 props eff. Lens' state2 state1 -> Prism' action2 action1 -> Spec eff state1 props action1 -> Spec eff state2 props action2

Change the state type, using a lens to focus on a part of the state.

For example, to combine two Specs, combining state types using Tuple and action types using Either:

spec1 :: Spec _ S1 _ A1
spec2 :: Spec _ S2 _ A2

spec :: Spec _ (Tuple S1 S2) _ (Either A1 A2)
spec = focus _1 _Left spec1 <> focus _2 _Right spec2

Actions will only be handled when the prism matches its input, otherwise the action will be ignored, and should be handled by some other component.

#focusState Source

focusState :: forall action state1 state2 props eff. Lens' state2 state1 -> Spec eff state1 props action -> Spec eff state2 props action

A variant of focus which only changes the state type, by applying a Lens.

#match Source

match :: forall action2 action1 state props eff. Prism' action2 action1 -> Spec eff state props action1 -> Spec eff state props action2

A variant of focus which only changes the action type, by applying a Prism, effectively matching some subset of a larger action type.

#split Source

split :: forall action state2 state1 props eff. Prism' state1 state2 -> Spec eff state2 props action -> Spec eff state1 props action

Create a component which renders an optional subcomponent.

#foreach Source

foreach :: forall action state props eff. (Int -> Spec eff state props action) -> Spec eff (List state) props (Tuple Int action)

Create a component whose state is described by a list, displaying one subcomponent for each entry in the list.

The action type is modified to take the index of the originating subcomponent as an additional argument.

Re-exports from Control.Coroutine

#CoTransformer Source

type CoTransformer i o = Co (CoTransform i o)

A type synonym for a Coroutine which "cotransforms" values, emitting an output before waiting for its input.

#cotransform Source

cotransform :: forall o i m. Monad m => o -> CoTransformer i o m i

Cotransform input values.

Modules
Thermite