Fun HTML Core

The core function(s) used by fun-html. Comes with some currying, so read the description below. fun-html has convenient functions for all existing html tags, with the name attribute already set.

Motivation

• functional goodness (pure functions, currying, easy composition)
• tiny (no dependencies)
• fast (no template parsing)
• no dsl needed, just compose functions

Usage

var tag = require('fun-html-core').tag;
var tagSelfClosing = require('fun-html-core').tagSelfClosing;
var tagAny = require('fun-html-core').tagAny;

tag(name, attributes, content)

Renders a normal html tag. Same as tagAny(false, name, attributes, content).

tagSelfClosing(name, attributes)

Renders a self-closing html tag. Same as tagAny(true, name, attributes).

tagAny(selfClosing, name, attributes, content)

Renders an html tag. This function does some currying, be sure to read the whole description.

• selfClosing: boolean indicating whether the tag should be self-closing. Content is ignored for self-closing tags.
• name: String the name of the generated tag
• attributes: object: Which attributes the tag should have. Keys are the attribute names, values the content. Both should be strings.
• content: string: The text inside the tag.

When tag is called with only the name arguments (or tagAny with false and name), it returns a curried version, i.e. a new function which only takes an attributes and a content argument and always uses the original values for name.

When tag is called with only three arguments, it behaves different for different types of arguments:

• if the third argument is an object, it will be treated as the attributes, returning a curried version of the function, which only takes a content argument.
• if the third argument is a string, it will be treated as the content of a tag without attributes.

Anything unclear? Have some examples.

Examples

var tag = require('fun-html-core').tag;
var tagSelfClosing = require('fun-html-core').tagSelfClosing;
var tagAny = require('fun-html-core').tagAny;

tagAny(true, 'foo', {class: 'baz'});
tagSelfClosing('foo', {class: 'baz'});
// => <foo class="baz" />

tagAny(false, 'foo', 'text');
tag('foo', 'text');
tag('foo', undefined, 'text')
// => <foo>text</foo>

tag('foo', {class: 'baz'}, '');
tag('foo', {class: 'baz'})('');
// => <foo class="baz"></foo>

tag('foo', {class: 'baz'})('text');
tag('foo', {class: 'baz'}, 'text');
// => <foo class="baz">text</foo>

tagSelfClosing('foo');
// => <foo />