pithy
v0.0.4
Published
Internal DSL for generating HTML
Downloads
172
Readme
Pithy.js
An internal DSL for generating HTML in JavaScript.
Examples
Basic elements
html.div('#main', [
html.h1(null, 'Hello, world!'),
html.img({src: 'foo.jpg'})
]);
<div id="main">
<h1>Hello, world!</h1>
<img src="foo.jpg"/>
</div>
Loops etc.
Using Underscore.js or similar:
function todoItem(item) {
return html.li({rel: item.id}, [
html.div('.title', item.title),
html.button('.destroy', 'delete')
]);
}
function todoList(list) {
return html.ul('.todo-list', _.map(list, todoItem));
}
todoList([
{id: 1, title: 'item one'},
{id: 2, title: 'item two'},
{id: 3, title: 'item three'}
]);
<ul class="todo-list">
<li rel="1">
<div class="title">item one</div>
<button class="destroy">delete</button>
</li>
<li rel="2">
<div class="title">item two</div>
<button class="destroy">delete</button>
</li>
<li rel="3">
<div class="title">item three</div>
<button class="destroy">delete</button>
</li>
</div>
Why use an internal DSL?
- It's a more convenient and safer alternative to string contatenation
- Very flexible, you can use all the power of JavaScript functions and control structures
- For small bits of HTML you might not want to switch contexts form code to a template
- Easier to debug than a templating engine
- You get full tool-chain support:
- editor support: syntax highlighting, code tools etc etc
- code analyzers: jslint, jshint
- testing/coverage tools
When to use?
- Consider using where you might currently use string concatenation
- Avoid using for large HTML documents or in places where speed is critical
- Good for small snippets used for client-side page updates
- Bad for generating huge amounts of HTML on the server
Usage
I like to alias the 'pithy' library as 'html':
var html = require('pithy');
You can then just use pithy.tagname
as a function to create the
appropriate element. Please note, you actually get a pithy.SafeString
object back, not a native JavaScript String. This might mess up your
isString() tests. If you have a workaround please send a pull-request.
There is also a pithy.escape() function for escaping HTML (returns a pithy.SafeString). It will not escape a value that is already a pithy.SafeString object.