plugnburn · June 1, 2018 21:42 · Mar 11, 2016 · Mar 10, 2016 · Mar 6, 2016 · Mar 6, 2016
diff --git a/README.md b/README.md
@@ -42,4 +42,6 @@ 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](//gist.github.com/plugnburn/9229beaadbe23819f118).
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Just download the minified version [here](//cdn.rawgit.com/plugnburn/07c383da5f1
 Usage
 -----
 
-XT.js consists of just one function: `XT(domStructure)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance ready to be inserted anywhere. The `domStructure` array syntax is pretty straightforward:
+XT.js consists of just one function: `XT(domStructure)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/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;

diff --git a/README.md b/README.md
@@ -6,9 +6,9 @@ Let's close the ultra-small library cycle with some awesome array-based templati
 How to obtain
 -------------
 
-Just download the minified version [here]() or include it into your code:
+Just download the minified version [here](//cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/896334671e40c42296b10949383b92db8bdb8fdf/xt.min.js) or include it into your code:
 
-`<script src=""></script>`
+`<script src="//cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/896334671e40c42296b10949383b92db8bdb8fdf/xt.min.js"></script>`
 
 Usage
 -----

diff --git a/README.md b/README.md
@@ -1,23 +1,24 @@
 XT.js
 -----
 
-Let's close the ultra-small library cycle with some awesome pure-object templating. 260 bytes minified.
+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](https://cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/cf1dfa6ce90335d24f06aac4f2b9399e6a643bc8/xt.min.js) or include it into your code:
+Just download the minified version [here]() or include it into your code:
 
-`<script src="//cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/cf1dfa6ce90335d24f06aac4f2b9399e6a643bc8/xt.min.js"></script>`
+`<script src=""></script>`
 
 Usage
 -----
 
-XT.js consists of just one function: `XT(domStructureObject)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance ready to be inserted anywhere. The `domStructureObject` syntax is pretty straightforward:
+XT.js consists of just one function: `XT(domStructure)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance ready to be inserted anywhere. The `domStructure` array syntax is pretty straightforward:
 
-- `_sometext` (key starting with an underscore optionally following some literal) denotes element text content;
-- `$attr` (key starting with a dollar sign that **must** follow with some literal) denotes element attribute;
-- every other key denotes the tag name.
+- 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.
 
@@ -26,21 +27,19 @@ That's it.
 The following code:
 
 ```
-XT({
-	div: {
-		'$data-attr1': '23',
-		a: {
-			$href:"http://example.com",
-			_:"Example text"
-		}
-	}
-})
+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</a>
+	<a href="http://example.com">Example text<span> (additional span)</span></a>
 </div>
 ```
diff --git a/xt.js b/xt.js
@@ -1,17 +1,18 @@
 !function(d) {
-	function nodeRender(tplObj, parent, k, o) {
-		for(k in tplObj) {
-			o = tplObj[k]
-			if(k[0]==='_') parent.appendChild(d.createTextNode(o))
-			else if(k[0]==='$') parent.setAttribute(k.slice(1), o)
-			else {
-				nodeRender(o, k = d.createElement(k))
+	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(tplObj, docFrag) {
-		nodeRender(tplObj, docFrag = d.createDocumentFragment())
+	window.XT = function(tplArr, docFrag) {
+		nodeRender(tplArr.slice(), docFrag = d.createDocumentFragment())
 		return docFrag
 	}
 }(document)
diff --git a/xt.min.js b/xt.min.js
@@ -1 +1 @@
-!function(e){function f(c,b,a,d){for(a in c)d=c[a],"_"===a[0]?b.appendChild(e.createTextNode(d)):"$"===a[0]?b.setAttribute(a.slice(1),d):(f(d,a=e.createElement(a)),b.appendChild(a))}window.XT=function(c,b){f(c,b=e.createDocumentFragment());return b}}(document)
+!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)
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Usage
 XT.js consists of just one function: `XT(domStructureObject)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance ready to be inserted anywhere. The `domStructureObject` syntax is pretty straightforward:
 
 - `_sometext` (key starting with an underscore optionally following some literal) denotes element text content;
-- `$attr` (key starting with a dollar sign that must follow some literal) denotes element attribute;
+- `$attr` (key starting with a dollar sign that **must** follow with some literal) denotes element attribute;
 - every other key denotes the tag name.
 
 That's it.

diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@ Let's close the ultra-small library cycle with some awesome pure-object templati
 How to obtain
 -------------
 
+Just download the minified version [here](https://cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/cf1dfa6ce90335d24f06aac4f2b9399e6a643bc8/xt.min.js) or include it into your code:
+
+`<script src="//cdn.rawgit.com/plugnburn/07c383da5f151a54d0b2/raw/cf1dfa6ce90335d24f06aac4f2b9399e6a643bc8/xt.min.js"></script>`
+
 Usage
 -----
 

diff --git a/README.md b/README.md
@@ -0,0 +1,42 @@
+XT.js
+-----
+
+Let's close the ultra-small library cycle with some awesome pure-object templating. 260 bytes minified.
+
+How to obtain
+-------------
+
+Usage
+-----
+
+XT.js consists of just one function: `XT(domStructureObject)`. The main feature of this function is that it returns a ready [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance ready to be inserted anywhere. The `domStructureObject` syntax is pretty straightforward:
+
+- `_sometext` (key starting with an underscore optionally following some literal) denotes element text content;
+- `$attr` (key starting with a dollar sign that must follow some literal) denotes element attribute;
+- every other key denotes the tag name.
+
+That's it.
+
+### Example
+
+The following code:
+
+```
+XT({
+	div: {
+		'$data-attr1': '23',
+		a: {
+			$href:"http://example.com",
+			_:"Example text"
+		}
+	}
+})
+```
+
+will produce a DocumentFragment with the following HTML representation:
+
+```
+<div data-attr1="23">
+  <a href="http://example.com">Example text</a>
+</div>
+```
diff --git a/xt.js b/xt.js
@@ -0,0 +1,17 @@
+!function(d) {
+	function nodeRender(tplObj, parent, k, o) {
+		for(k in tplObj) {
+			o = tplObj[k]
+			if(k[0]==='_') parent.appendChild(d.createTextNode(o))
+			else if(k[0]==='$') parent.setAttribute(k.slice(1), o)
+			else {
+				nodeRender(o, k = d.createElement(k))
+				parent.appendChild(k)
+			}
+		}
+	}
+	window.XT = function(tplObj, docFrag) {
+		nodeRender(tplObj, docFrag = d.createDocumentFragment())
+		return docFrag
+	}
+}(document)
diff --git a/xt.min.js b/xt.min.js
@@ -0,0 +1 @@
+!function(e){function f(c,b,a,d){for(a in c)d=c[a],"_"===a[0]?b.appendChild(e.createTextNode(d)):"$"===a[0]?b.setAttribute(a.slice(1),d):(f(d,a=e.createElement(a)),b.appendChild(a))}window.XT=function(c,b){f(c,b=e.createDocumentFragment());return b}}(document)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		!function(e){function f(c,b,a,d){for(a in c)d=c[a],"_"===a[0]?b.appendChild(e.createTextNode(d)):"$"===a[0]?b.setAttribute(a.slice(1),d):(f(d,a=e.createElement(a)),b.appendChild(a))}window.XT=function(c,b){f(c,b=e.createDocumentFragment());return b}}(document)
		!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)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		!function(e){function f(c,b,a,d){for(a in c)d=c[a],"_"===a[0]?b.appendChild(e.createTextNode(d)):"$"===a[0]?b.setAttribute(a.slice(1),d):(f(d,a=e.createElement(a)),b.appendChild(a))}window.XT=function(c,b){f(c,b=e.createDocumentFragment());return b}}(document)