Web.Framework.Plzwrk

This module contains the base functions for plzwrk, notably the family of plzwrk functions needed for plzwrk to work. It also exports most of the utility functions used for building web applications, like event handling and attribute wrangling.

Documentation

plzwrk

Arguments

:: (state -> Node state jsval)

A function that takes a state and produces a DOM

-> state

An initial state

-> Browserful jsval

A browser implementation, ie Asterius or the mock browser

-> String

The id of the element into which the DOM is inserted. Note that plzwrk manages all children under this element. Touching the managed elements can break plzwrk.

-> IO ()

Returns nothing

The main function that makes a web app.

plzwrk' :: (state -> Node state jsval) -> state -> Browserful jsval -> IO ()

A variation of plzwrk that inserts the node as a child of the document's body.

plzwrk'_ :: (() -> Node () jsval) -> Browserful jsval -> IO ()

A variation of plzwrk that takes no state.

plzwrkSSR

Arguments

:: (state -> Node state jsval)

A function that takes a state and produces a DOM

-> state

An initial state

-> Browserful jsval

A browser implementation, ie Asterius or the mock browser

-> String

The id of the element into which the DOM is inserted. Note that plzwrk manages all children under this element. Touching the managed elements can break plzwrk.

-> IO ()

Returns nothing

A variant of plzwrk that acts on a node already rendered to the DOM, ie by server-side rendering. It assumes the node has been rendered with the same state-to-node function as well as the same state.

toHTML

Arguments

:: (state -> Node state jsval)

A function that takes a state and produces a DOM

-> state

An initial state

-> String

The resulting HTML

Converts a Node to HTML.

data Node s opq

A DOM node. The easiest way to create nodes is using tags such as span or br. Nodes can be created for arbitrary tags using the Element constructor.

Node is parameterized by two types * s - the type of the state * opq - the type of an opaque object in JavaScript

Note that nodes, when passed as an arguemnt to plzwrk, need to be Applicative Functors in the form (s -> Node s opq).

Constructors

Element

Fields

• _elt_tag :: String
• _elt_attrs :: s -> Attributes s opq
• _elt_children :: [s -> Node s opq]

TextNode

Fields

• _tn_text :: String

Instances

Show (Node s opq)

Defined in Web.Framework.Plzwrk.Base

Methods

showsPrec :: Int -> Node s opq -> ShowS

show :: Node s opq -> String

showList :: [Node s opq] -> ShowS

data Attributes s opq

Attributes for a DOM Node. Attributes are parameterized by two types * s - the type of the state * opq - the type of an opaque object in JavaScript

You will rarely need to instantiate Attributes yourself, as it is easier to work with utility functions like wId, wStyle etc that produce Applicative Functors with signature (s -> Attributes s opq). These AFs are used in the Node data.

Constructors

MkAttributes

Fields

• _style :: HashMap String String
• _class :: Set String
• _simple :: HashMap String String
• _handlers :: HashMap String (opq -> s -> IO s)

Instances

Show (Attributes s opq)

Defined in Web.Framework.Plzwrk.Base

Methods

showsPrec :: Int -> Attributes s opq -> ShowS

show :: Attributes s opq -> String

showList :: [Attributes s opq] -> ShowS

data Browserful jsval

A data class holding functions that operate on opaque JavaScript types, parameterized by jsval. When possible, the real names of browser functions like addEventListener and appendChild are used.

Browserful is currently implemented as data instead of as a typeclass because it is unclear what type of additional monadic transformer around IO would be most appropriate to retain the state of jsval objects, whereas when part of a dataclass, the state retention is abstracted away.

Constructors

Browserful

Fields

• consoleLog :: String -> IO ()

  Logs a string. See Console.log

• consoleLog' :: jsval -> IO ()

  Logs an opaque JavaScript value. See Console.log

• documentBody :: IO jsval

  The body of the document. See Document.body

• documentCreateElement :: String -> IO jsval

  Creates an element with a given tag. See Document.createElement

• documentCreateTextNode :: String -> IO jsval

  Creates a text node with the given text. See Document.createTextNode

• documentGetElementById :: String -> IO (Maybe jsval)

  Gets an element by id from a document. See Document.getElementById

• documentHead :: IO jsval

  Gets the head of a document. See Document.head

• elementSetAttribute :: jsval -> String -> String -> IO ()

  Sets on an element an attribute. See Element.setAttribute

• elementTagName :: jsval -> IO String

  Gets the tag name of an element. See Element.tagName

• eventTargetAddEventListener :: jsval -> String -> jsval -> IO ()

  Takes a target and an event name and adds a listener. See EventTarget.addEventListener

• eventTargetRemoveEventListener :: jsval -> String -> jsval -> IO ()

  Takes a target and an event name and removes a listener. See EventTarget.removeEventListener

• getPropertyAsBool :: jsval -> String -> IO (Maybe Bool)

  Gets a JavaScript property as a bool, returning Nothing if the object being called is null or undefined or the property cannot be cast to a bool.

• getPropertyAsDouble :: jsval -> String -> IO (Maybe Double)

  Gets a JavaScript property as a double, returning Nothing if the object being called is null or undefined or the property cannot be cast to a double.

• getPropertyAsInt :: jsval -> String -> IO (Maybe Int)

  Gets a JavaScript property as an int, returning Nothing if the object being called is null or undefined or the property cannot be cast to an int.

• getPropertyAsOpaque :: jsval -> String -> IO (Maybe jsval)

  Gets a JavaScript property, returning Nothing if the object being called is null or undefined.

• getPropertyAsString :: jsval -> String -> IO (Maybe String)

  Gets a JavaScript property as a string, returning Nothing if the object being called is null or undefined or the property cannot be cast to a string.

• htmlElemenetClick :: jsval -> IO ()

  Takes an element and clicks it. Useful for testing. See HTMLElement.click

• invokeOn0 :: jsval -> String -> IO jsval

  Invokes on target a function with 0 arguments.

• mathRandom :: IO Double

  Generate a random double between 0 and 1. See Math.random

• nodeAppendChild :: jsval -> jsval -> IO ()

  Takes a node and appends a child. See Node.appendChild

• nodeChildNodes :: jsval -> IO [jsval]

  Get the children of a node. See Node.childNodes

• nodeInsertBefore :: jsval -> jsval -> jsval -> IO ()

  Insert into an element a new node before a reference node. See Node.insertBefore

• nodeRemoveChild :: jsval -> jsval -> IO ()

  From a node remove a child. See Node.removeChild

• nodeTextContent :: jsval -> IO String

  Gets the text content of a node. See Node.textContent

• _freeCallback :: jsval -> IO ()

  Frees a callback. Should only be called in advanced cases. In most usage, callbacks are freed automatically by plzwrk.

• _makeHaskellCallback :: (jsval -> IO ()) -> IO jsval

  Makes a haskell callback. Should only be called in advanced cases. In most usage, callbacks are created automatically by plzwrk.

(<.>) :: (s -> Attributes s opq) -> (s -> Attributes s opq) -> s -> Attributes s opq

Merges two Attributes

wStyle :: String -> String -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a single style.

wStyle' :: String -> String -> Attributes s opq

Constrcts an Attributes from a single style.

wStyles :: [(String, String)] -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a list of styles.

wStyles' :: [(String, String)] -> Attributes s opq

Constrcts an Attributes from a list of styles.

wClass :: String -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a single class.

wClass' :: String -> Attributes s opq

Constrcts an Attributes from a single class.

wClasses :: [String] -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a list of clases.

wClasses' :: [String] -> Attributes s opq

Constrcts an Attributes from a list of classes.

wOnClick :: (opq -> s -> IO s) -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from an onClick callback.

wOnClick' :: (opq -> s -> IO s) -> Attributes s opq

Constrcts an Attributes from an onClick callback.

wId :: String -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor with a given id.

wId' :: String -> Attributes s opq

Constrcts an Attributes with a given id.

wOnInput :: (opq -> s -> IO s) -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from an onInput callback.

wOnInput' :: (opq -> s -> IO s) -> Attributes s opq

Constrcts an Attributes from an onInput callback.

wAttr :: String -> String -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a single attribute.

wAttr' :: String -> String -> Attributes s opq

Constrcts an Attributes from a single attribute.

wAttrs :: [(String, String)] -> s -> Attributes s opq

Constrcts a stateful Attributes applicative functor from a list of attributes.

wAttrs' :: [(String, String)] -> Attributes s opq

Constrcts an Attributes from a list of attributes.

eventPreventDefault :: Browserful jsval -> jsval -> IO ()

Take an event and prevent the default.

eventTargetBlur :: Browserful jsval -> jsval -> IO ()

From an event, takes the target and blurs it.

eventTargetValue :: Browserful jsval -> jsval -> IO (Maybe String)

From an event, gets the target's value.