StringML is a Javascript templating library that is written in vanilla JS and outputs HTML strings. There's really nothing too special going on here: while similar to Mustache, Handlebars, and underscore templates where the output is a string of HTML, the StringML syntax just uses Javascript functions. The functions break down into
- HTML tag functions
- A converter function that takes the output of the HTML functions and creates an HTML string
The StringML HTML tag functions support
- Nesting
- Componentization
- Arbitrary argument order
- Full support of HTML5
- HTML attributes using native naming
- HTML-like appearance
- Comments
Here's a basic example
import {
header,
h1,
span
} from 'stringml';
const pageHeader =
header(
h1(
span('Page Header Text')
)
)
;
You can easily add HTML attributes to this, and change the whitespace to your liking.
const pageHeader =
header({id: 'pageHeader', class: 'hero xs-span12'},
h1(
span({class: 'special-font-adapter'}, 'Page Header Text')
)
)
;
Note that HTML attributes are simply key names in an object passed to the function, using the HTML attribute's name. In other words, simply supply {class: 'some-class}
in order to get class="some-class"
in the output. Further, arguments can be in any order, and there can be as many sibling elements as desired.
const pageContent =
article(
p('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
p('Nullam hendrerit sapien non placerat eleifend.'),
p('Nulla ullamcorper viverra eros, sit amet pharetra libero commodo vitae.', {class: 'last'})
)
;
Collections are simple to accomplish. Rather than using special syntax like Handlebars requires, StringML allows you to use any JS iterator, though a map
will likely be the most terse and legible. You'll also need to use the spread operator to turn the array into a list of arguments.
const listData = ['item 1', 'item 2', 'item 3'];
const listItems = listData.map( (item) => li(item) );
const orderedItemList = ol(
...listItems
);
The ES5 variation is less clean in terms of emulating HTML, but works just fine
var orderedItemList = ol.apply(null, listItems);
There is a dedicated comment function, called comment
.
const pageContent =
article(
p('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
p('Nullam hendrerit sapien non placerat eleifend.'),
p('Nulla ullamcorper viverra eros, sit amet pharetra libero commodo vitae.', {class: 'last'}),
comment('Weird that I\'d need a comment in my HTML output, but, hey, here we are.')
)
;
The stringML
function converts the output of the HTML tag functions into an HTML string:
// assuming all the imports and declarations from above
import {
...,
stringML
} from 'stringml';
const pageHTML = [
pageHeader,
pageContent,
orderedItemList
];
const rendered = pageHTML.map((node) => stringML(node)).join('\n');
becomes
<header id="pageHeader" class="hero xs-span12"><h1><span class="special-font-adapter">Page Header Text</span></h1></header>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Nullam hendrerit sapien non placerat eleifend.</p><p class="last">Nulla ullamcorper viverra eros, sit amet pharetra libero commodo vitae.</p><!-- Weird that I'd need a comment in my HTML output, but, hey, here we are. --></article>
<ol><li>item 1</li><li>item 2</li><li>item 3</li></ol>