This is the pure handler, for when you don't need access to IO. Events are still handled within a green thread so it's possible to overwrite state, just something to be aware of.

Example:

Let's say you want to make a button that switches between saying "up" or "down":

view direction = onClick "toggle" $ button [ text direction ]

toggleHandler = handler [] "up" reducer
  where reducer "toggle" state =
          let newState = if state == "up" then "down" else "up"
          in (const newState, [])

component = toggleHandler view

Or typed out in longer form:

type State = String
type Event = String

reducer :: Event -> State -> (State -> State, [DirectedEvent parentEvent Event])
reducer event state = case event of
  "up"   -> (const "down", [])
  "down" -> (const "up", [])

toggleHandler :: (State -> Purview Event m) -> Purview parentEvent m
toggleHandler = handler [] "up" reducer

component :: Purview parentEvent m
component = toggleHandler view

Note that parentEvent is left unspecified as this handler doesn't send any events to a parent, so it can be plugged in anywhere. If you did want to send events, the reducer looks like this:

reducer :: String -> String -> (String -> String, [DirectedEvent String String])
reducer event state = case event of
  "up"   -> (const "down", [Self "down"])
  "down" -> (const "up", [Parent "clickedDown"])

Which is about all there is to sending more events.

This handler gives you access to whichever monad you're running Purview with.

Example:

If you wanted to print something on the server every time someone clicked a button:

view _ = onClick "sayHello" $ button [ text "Say hello on the server" ]

handler = effectHandler [] () reduce
  where reduce "sayHello" state = do
          print "Someone on the browser says hello!"
          pure (const (), [])

component = handler view

This provides a shorthand for when you know you want to overwrite the state on each event.

Example:

@ view direction = onClick "toggle" $ button [ text direction ]

toggleHandler = handler' [] "up" reducer where reducer "toggle" state = let newState = if state == "up" then "down" else "up" -- note it's just newState, not const newState in (newState, [])

component = toggleHandler view

To mirror handler', a shorthand for when you know you want to overwrite state.

Components styled with this QuasiQuoter will have a class added to them and the CSS added to the stylesheet. Basic support is provided for easily styling nested components and for pseudo selectors.

Examples:

Styling a button:

blue = [style|
  background-color: blue;
|]

blueButton = blue $ button []

Styling a list with a pseudo selector to get the right cursor on hover:

listStyle = [style|
  width: 250px;
  li {
    padding: 25px;
    &:hover {
      cursor: pointer;
    }
  }
|]

list = listStyle $ ul [ li [ text "an item" ] ]

For adding inline styles. Good for dynamic parts of styling, as the style QuasiQuoter does not support variables.

Example:

Varying a color based on input:

submitButton valid =
  let
    borderColor = if valid then "green" else "red"
    borderStyle = "border-color: " <> borderColor <> ";"
  in
    istyle borderStyle $ button [ text Submit ]

For adding an "id" to HTML

For adding a "class" to HTML

This will send the event to the handler above it whenever "click" is triggered on the frontend. It will be bound to whichever concrete HTML is beneath it.

Example:

To send a string based event:

toggleButton :: Purview String m
toggleButton = onClick "toggle" $ button []

To send a better typed event:

data Toggle = Toggle
  deriving (Show, Eq)

toggleButton :: Purview Toggle m
toggleButton = onClick Toggle $ button []

Note how the type changed to show which kind of event is produced.

This will send the event to the handler above it whenever "submit" is triggered on the frontend. It takes a function to transform the value received into an event for handlers, this can be a good spot to debug trace and see what is being received from the browser.

The form produces JSON so the handling function can also be used to parse the form, or you can throw it up as a string for the handler to parse.

Example:

nameAttr = Attribute . Generic "name"

data FormEvent = Submitted String
  deriving (Show, Eq)

handleSubmit (Just val) = Submitted val
handleSubmit Nothing    = Submitted ""

component :: Purview FormEvent m
component = onSubmit handleSubmit $
  form
    [ nameAttr "text" $ input []
    ]

This is triggered on focusout instead of blur to work with mobile sites as well. Like onSubmit it takes a value.

Example:

data AddressEvent = LineOneUpdated String
  deriving (Show, Eq)

handleBlur (Just val) = LineOneUpdated val
handleBlur Nothing    = LineOneUpdated ""

addressLineOne = onBlur handleBlur $ input []

Triggered on change

Example:

data AddressEvent = LineOneUpdated String
  deriving (Show, Eq)

handleChange (Just val) = LineOneUpdated val
handleChange Nothing    = LineOneUpdated ""

addressLineOne = onChange handleChange $ input []

For receiving events from Javascript. In addition to the name and an event producer, the receiver takes in a state and child and passes it through for (hopefully) more natural composition with handlers.

Example:

This receives an event from javascript every 1 second and increments the count.

component count = div [ text (show count) ]

countHandler = handler' [] (0 :: Int) reducer
  where
    reducer "increment" state = (state + 1, [])
    reducer "decrement" state = (state - 1, [])

countReceiver = receiver "incrementReceiver" (const "increment")

render = countHandler . countReceiver $ component

jsCounter = [r|
  const startCount = () => {
    window.setInterval(() => {
      -- sendEvent is added to the window by Purview and all that's
      -- needed.  Purview finds the receiver by name.
      sendEvent("incrementReceiver", "increment")
    }, 1000)
  }
  startCount()
|]

main = serve defaultConfiguration { javascript=jsCounter } render

Takes the tree and turns it into HTML. Attributes are passed down to children until they reach a real HTML tag.

Attributes are collected until an HTML constructor is hit, where they are applied during rendering.

This is for creating events that should go to a parent handler, or sent back in to the same handler.

This is what you end up building using the various helpers. It's hopefully rare that you have to use these directly, but it may be useful to better understand what's happening behind the scenes.