Documentation

HyperViews are interactive subsections of a Page

Create an instance with a unique view id type and a sum type describing the actions the HyperView supports. The View Id can contain context (a database id, for example)

data Message = Message Int
  deriving (Generic, Param)

data MessageAction
  = Louder Text
  | ClearMessage
  deriving (Generic, Param)

instance HyperView Message where
  type Action Message = MessageAction

Embed HyperViews into the page, or nest them into other views

myPage :: (Hyperbole :> es) => Page es Response
myPage = do
  handle messages
  load $ do
    pure $ do
      el_ "My Page"
      hyper (Message 1) $ messageView "Hello World"
      hyper (Message 2) $ do
        messageView "Another Message"
        hyper OtherView otherView

Views can only trigger actions that match their HyperView

messageView :: Text -> View Message ()
messageView m = do
  el_ (text m)
  button (Louder m) Louder

otherView :: View OtherView ()
otherView = do
  -- Type Error!
  button (Louder "Hi") id Louder

<button> HTML tag which sends the action when pressed

button SomeAction (border 1) "Click Me"

Send the action after N milliseconds. Can be used to implement lazy loading or polling

pollMessageView :: Text -> View Message ()
pollMessageView m = do
  onLoad LoadMessage 1000 $ do
    el bold "Current Message. Reloading in 1s"
    el_ (text m)

Give visual feedback when an action is in-flight.

myView = do
  onRequest loadingIndicator $ do
    el_ "Loaded"
  where
    loadingIndicator = el_ "Loading..."

Internal

Trigger actions for another view. They will update the view specified

otherView :: View OtherView ()
otherView = do
  el_ "This is not a message view"
  button OtherAction id "Do Something"

  target (Message 2) $ do
    el_ "Now we can trigger a MessageAction which will update our Message HyperView, not this one"
    button ClearMessage id "Clear Message #2"

Type-safe dropdown. Sends (opt -> Action id) when selected. The selection predicate (opt -> Bool) controls which option is selected. See Example.Contacts

data ContactsAction
  = Reload (Maybe Filter)
  | Delete Int
  deriving (Generic, Param)

allContactsView :: Maybe Filter -> View Contacts ()
allContactsView fil = do
  row (gap 10) $ do
    el (pad 10) "Filter: "
    dropdown Reload (== fil) id $ do
      option Nothing ""
      option (Just Active) "Active!"
      option (Just Inactive) Inactive
  ...

An option for a dropdown. First argument is passed to (opt -> Action id) in the dropdown, and to the selected predicate

sets selected = true if the dropdown predicate returns True

The view context for an option

Types that can be serialized. HyperView requires this for both its view id and action

data Message = Message Int
  deriving (Generic, Param)

A hyperlink to another route

>>> route (User 100) id "View User"
<a href="/user/100">View User</a>