HTML ev is an alias for
Markup (DOMEvent -> ev), which is used
do notation to describe a state's view:
view :: State -> HTML Event view count = div do button #! onClick (const Increment) $ text "Increment" span $ text (show count) button #! onClick (const Decrement) $ text "Decrement"
Learn more about do notation and monad basics in Functors, Applicatives, and Monads in Pictures.
Smolder provides constructors for each element or attribute, like
href. When applicable, constructors take an
argument for a child element or attribute value. Also provided are operators for
combining elements with attributes or event handlers.
Element constructors are provided by
with container elements taking an argument for children.
Children can be
h1 $ text "Hello, World"
Or another element:
div $ p (text "PureScript")
Or multiple elements using do notation:
div do h1 $ text "Hello, World" p $ text "I'm HTML."
Sometimes you want an empty container element. Because HTML is a monoid, you can
operator is used to add attributes to elements:
a ! href "purescript.org" ! className "yellow" $ text "purescript.org"
Optional attributes can be declared using the
operator in combination with a boolean:
button !? state.loading (className "loading") $ text "Save"
button #! onClick (const Increment) $ text "Increment"
Pux provides constructors for creating event handlers for all the DOM events via
These constructors take an argument of type
DOMEvent -> ev where
ev is the
type of your application events. This is so that data in the raw DOM event can
be used in the application events. If the DOM event is not needed by the
application event, it can be ignored using the
function as shown in the example above.
DOMEventis an alias for purescript-dom's
Event, so you can name your application event type the same without a name collision.
Pux elements and attributes
styleelement and attribute take
focusdeclaratively controls input focus.
keyis for rendering optimization (used by React and others).
data_constructs properties prefixed with "data-".
HTML from lists
colors :: Array String colors = ["purple","red","green"] color :: String -> HTML Event color s = li $ text s view :: HTML Event view = ul $ for_ colors color
where it's important to avoid unnecessary rendering:
view :: State -> HTML Event view = memoize \state -> div $ text state.message
It's important that
memoizeis used inside a view it will recreate the memoized function every time the view is called.