XTF.js - DOM construction / templating / manipulation library in 24 lines of JS, 478 bytes minified

README.md

XTF.js

This extends the ultra-small, array-based templating library XT.js with functional manipulation abilities. This extension adds to xtf.js 6 lines of code and to xtf.min.js 155 minified bytes.

How to obtain

Download the minified version here or include it into your code:

<script src="https://cdn.rawgit.com/METACEO/df988bf134e3fdb18e8cafe9f6e4b7de/raw/fc1a558989f3b7f142d02bf7b8b008054b82d5e5/xtf.min.js"></script>

Usage

Follow the XT.js syntax instructions with the following addition:

• any array, with the first element an object, denotes functions to apply upon the element.

Provided functions will be called with two arguments, the parent element and the parent object. The parent element can be manipulated before it's appended and the parent object can store data for the manipulations. The object of will call upon locally available functions, or - if provided a string - will lookup a client-provided function with the string as the key. Your server can provide array-based templates and your clients can locally process conditions and utilize dyanamic variables.

Example (remote)

The following code:

var funcs = {}
funcs.myFunction = function($a, data) {
	
	$a.appendChild(XTF([["i", data.thisWillBeItalicized]]))
	
}

XTF([
	['div', {'data-attr1': 23},
		['a', {href: 'http://example.com'}, 'Example text ',
			[{viaString: 'myFunction'},{thisWillBeItalicized: 123}],
			['span', ' (additional span)']
		]
	]
],funcs)

will produce a DocumentFragment with the following HTML representation:

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

Example (local)

The following code:

function myFunction($a, data) {
	
	$a.appendChild(XTF([["i", data.thisWill.be.italicized]]))
	
}

XTF([
	['div', {'data-attr1': 23},
		['a', {href: 'http://example.com'}, 'Example text ',
			[{viaLocal: myFunction},{thisWill: {be: {italicized: 123}}}],
			['span', ' (additional span)']
		]
	]
])

will produce a DocumentFragment with the following HTML representation:

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

xtf.js

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

xtf.min.js

!function(a,b,c,d){function e(f,g,h,i,j){for(;(j=f.shift())!=null;)if(''+j===j||+j===j)g[b](a.createTextNode(j));else if(''+j[0]===c){for(i in j[0])if(typeof j[0][i]===d)j[0][i](g,j[1]);else if(typeof h[j[0][i]]===d)h[j[0][i]](g,j[1])}else if(''+j===c)for(i in j)g.setAttribute(i,j[i]);else{e(j,i=a.createElement(j.shift()),h);g[b](i)}}window.XTF=function(f,g,h){h=g;e(f.slice(),g=a.createDocumentFragment(),h||{});return g}}(document,'appendChild','[object Object]','function')