README
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 tagattributes
: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 />