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
  deriving (Show, Read, ViewId)

instance HyperView Message es where
  data Action Message
    = SetMessage Text
    deriving (Show, Read, ViewAction)

  update (SetMessage msg) =
    pure $ messageView msg

The top-level view returned by a Page. It carries a type-level list of every HyperView used in our Page so the compiler can check our work and wire everything together.

Embed a HyperView into another View

page :: Eff es (Page '[Message])
page = do
  pure $ do
    col (pad 10 . gap 10) $ do
      el (bold . fontSize 24) "Unchanging Header"
      hyper Message $ messageView "Hello World"

Access the viewId in a View or update

data Contact = Contact UserId
  deriving (Show, Read, ViewId)

instance (Users :> es, Debug :> es) => HyperView Contact es where
  data Action Contact
    = Edit
    | Save
    | View
    deriving (Show, Read, ViewAction)

  update action = do
    -- No matter which action we are performing, let's look up the user to make sure it exists
    Contact uid <- viewId
    u <- Users.find uid
    case action of
      View -> do
        pure $ contactView u
      Edit -> do
        pure $ contactEditView u
      Save -> do
        delay 1000
        unew <- parseUser uid
        Users.save unew
        pure $ contactView unew