Markup
Falco.Markup is broken down into three primary modules, Elem
, Attr
and Text
, which are used to generate elements, attributes and text nodes respectively. Each module contain a suite of functions mapping to the various element/attribute/node names. But can also be extended to create custom elements and attributes.
Primary elements are broken down into two types, ParentNode
or SelfClosingNode
.
ParentNode
elements are those that can contain other elements. Represented as functions that receive two inputs: attributes and optionally elements.
SelfClosingNode
elements are self-closing tags. Represented as functions that receive one input: attributes.
Text is represented using the TextNode
and created using one of the functions in the Text
module.
Attributes contain two subtypes as well, KeyValueAttr
which represent key/value attributes or NonValueAttr
which represent boolean attributes.
Most JavaScript Events have also been mapped in the Attr
module. All of these events are prefixed with the word "on" (i.e., Attr.onclick
, Attr.onfocus
etc.)
HTML
Though Falco.Markup can be used to produce any markup. It is first and foremost an HTML library.
Combining views to create complex output
Strongly-typed views
Merging Attributes
The markup module allows you to easily create components, an excellent way to reduce code repetition in your UI. To support runtime customization, it is advisable to ensure components (or reusable markup blocks) retain a similar function "shape" to standard elements. That being, XmlAttribute list -> XmlNode list -> XmlNode
.
This means that you will inevitably end up needing to combine your predefined XmlAttribute list
with a list provided at runtime. To facilitate this, the Attr.merge
function will group attributes by key, and concatenate the values in the case of KeyValueAttribute
.
Custom Elements & Attributes
Every effort has been taken to ensure the HTML and SVG specs are mapped to functions in the module. In the event an element or attribute you need is missing, you can either file an issue, or more simply extend the module in your project.
An example creating custom XML elements and using them to create a structured XML document:
SVG
Much of the SVG spec has been mapped to element and attributes functions. There is also an SVG template to help initialize a new drawing with a valid viewbox.