XT.js - DOM construction / templating library in 18 lines of JS, 323 bytes minified

README.md

XT.js

Let's close the ultra-small library cycle with some awesome array-based templating. 323 bytes minified.

How to obtain

Just download the minified version here or include it into your code:

<script src="//cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/896334671e40c42296b10949383b92db8bdb8fdf/xt.min.js"></script>

Usage

XT.js consists of just one function: XT(domStructure). The main feature of this function is that it returns a ready DocumentFragment instance ready to be inserted anywhere. The domStructure toplevel array must contain arrays only, and any internal array syntax is pretty straightforward:

• the first array element is the tag name;
• any scalar value (string or number) denotes element text content;
• any object denotes element attributes in name-value form;
• any array denotes the nested element of the same structure.

That's it.

Example

The following code:

XT([
	['div', {'data-attr1': 23},
		['a', {href: 'http://example.com'}, 'Example text',
			['span', ' (additional span)']
		]
	]
])

will produce a DocumentFragment with the following HTML representation:

<div data-attr1="23">
	<a href="http://example.com">Example text<span> (additional span)</span></a>
</div>

Update: for dynamic CSS rules construction, see XS.js.

xt.js

!function(d) {
	function nodeRender(tplArr, parent, k, o) {
		for(;(o=tplArr.shift())!=null;) {
			if(''+o === o || +o === o) //scalar
				parent.appendChild(d.createTextNode(o))
			else if(''+o === '[object Object]') //object
				for(k in o) parent.setAttribute(k, o[k])
			else { //array
				nodeRender(o, k = d.createElement(o.shift()))
				parent.appendChild(k)
			}
		}
	}
	window.XT = function(tplArr, docFrag) {
		nodeRender(tplArr.slice(), docFrag = d.createDocumentFragment())
		return docFrag
	}
}(document)

xt.min.js

!function(d){function f(e,b,c,a){for(;null!=(a=e.shift());)if(""+a===a||+a===a)b.appendChild(d.createTextNode(a));else if("[object Object]"===""+a)for(c in a)b.setAttribute(c,a[c]);else f(a,c=d.createElement(a.shift())),b.appendChild(c)}window.XT=function(e,b){f(e.slice(),b=d.createDocumentFragment());return b}}(document)