StringML
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
HTML Tag Functions
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
; const pageHeader = ;
You can easily add HTML attributes to this, and change the whitespace to your liking.
const pageHeader = ;
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 = ;
Collections
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;const orderedItemList = ;
The ES5 variation is less clean in terms of emulating HTML, but works just fine
var orderedItemList = ol;
Comments
There is a dedicated comment function, called comment
.
const pageContent = ;
Converter Function
The stringML
function converts the output of the HTML tag functions into an HTML string:
// assuming all the imports and declarations from above; const pageHTML = pageHeader pageContent orderedItemList; const rendered = pageHTML;
becomes
Page Header TextLorem ipsum dolor sit amet, consectetur adipiscing elit.Nullam hendrerit sapien non placerat eleifend.Nulla ullamcorper viverra eros, sit amet pharetra libero commodo vitae.<!-- Weird that I'd need a comment in my HTML output, but, hey, here we are. -->item 1item 2item 3