xsalt - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

bower.json

 {
   "name": "xsalt",
   "main": "xsalt.js",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "homepage": "https://github.com/chocolatetoothpaste/xsalt",
@@ -6,0 +6,0 @@ "authors": [

package.json

 {
   "name": "xsalt",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A different kind of template engine",
@@ -5,0 +5,0 @@ "main": "xsalt.js",

README.md

@@ -6,3 +6,3 @@ # xsalt
 
-* I hate `{{value}}` style templating engines
+* I don't like `{{value}}` style templating
 * I hate the phrases "syntactic sugar" and "sugaring", so salt...
@@ -12,3 +12,3 @@ * xsalt is a play on "XSLT", old school xml templating
 
-xsalt uses native document node manipulation to work with templates.  There is one regex in the entire codebase.  The syntax is meant to blend in with regular HTML, and the API is meant to feel like you are working with the native DOM.  Because of that, nodes can be wrapped in jQuery (or other) and manipulated in a very natural way that blends with your code.  See the examples for more.
+xsalt uses native document node manipulation to work with templates.  There are three (very simple) regular expressions in the entire codebase.  The syntax is meant to blend in with regular HTML, and the API is meant to feel like you are working with the native DOM.  Because of that, nodes can be wrapped in jQuery (or other) and manipulated in a very natural way that blends with your code.  See the examples for more.
 
@@ -22,2 +22,4 @@ ### Unstable
 
+One quick disclaimer: tags with restrictions on their child elements (select, table, etc...) are not handling xs:* prefixed children, they are stripping them out.  Experiment a bit to make your template work (start with xs:option and append it to a select, rather than include the select in your template, for example)
+
     // Basic usage: prefix elements to process with "xs:"
@@ -55,4 +57,3 @@ // Supported attributes are val, html, and each
 
-    var list = xsalt('<ul class="items users">'
-    + '<xs:li each="users" html="username" data-action="some action">');
+    var list = xsalt('<ul class="items users"><xs:li each="users" html="username" data-action="some action">');
 
@@ -66,2 +67,3 @@ // passing in a callback, you can work with the DOM node. Wrap $(node) and
             node.className += "edit";
+            // jQuery version: $(node).addClass("edit");
         }
@@ -98,2 +100,3 @@ }));
         node.setAttribute("id", "user_" + data.id);
+        // jQuery version: $(node).attr("id", "user_" + data.id);
     });
@@ -100,0 +103,0 @@

scratch.js

@@ -5,2 +5,3 @@ if( typeof module !== 'undefined' && module.exports ) {
 
+
     var data = {
@@ -15,6 +16,12 @@ users: [
 
-var test = xsalt('<xs:input type="text" val="username" each="users">').compile(data, function( node, data ) {
-	node.setAttribute("id", "user_" + data.id);
-});
+    var test = xsalt('<select><xs:option each="." val="value" html="text">')
+    	.compile([
+    		{text: "item1", value: "1"},
+    		{text:"item2", value: '2'}
+    	]);
 
-console.log(test);
+// var test = xsalt('<xs:input type="text" val="username" each="users">').compile(data, function( node, data ) {
+// 	node.setAttribute("id", "user_" + data.id);
+// });
+
+console.log("Result: ", test);

xsalt.js

@@ -1,16 +0,12 @@
-(function() {
+(function(document) {
 
 function xsalt(tmpl) {
-	if( typeof module !== 'undefined' && module.exports ) {
-		var jsdom = require('jsdom').jsdom;
-		var document = jsdom(tmpl);
-		this.doc = document;
-	}
+	// unfortunately HTML strips out certain tags if the parent tags has
+	// restrictions on child elements (like select boxes). This will prefeix ALL
+	// tags with "xs!:" that are not already prefixed with "xs:"
+	// totally sucks, but must be done until a better solution arises
+	tmpl = tmpl.replace(/<(?!\/?xs:)/g, '<xs!:');
 
-	else {
-		this.doc = window.document;
-	}
-
 	// creating a sandbox for moving elements around
-	var temp = this.doc.createElement('div');
+	var temp = document.createElement('div');
 	temp.innerHTML = tmpl;
@@ -47,4 +43,3 @@ this.template = temp;
 	'each': function( node, data, callback ) {
-		var that = this,
-			html = this.doc.createElement('div');
+		var that = this;
 
@@ -91,4 +86,6 @@ node.removeAttribute('each');
 xsalt.prototype.clone = function(node) {
-	var tag = node.tagName.toLowerCase().replace('xs:', '');
-	var n = this.doc.createElement(tag);
+	// don't replace tag name for now, all "xs:" prefixes get scrubbed after
+	// compile is done, before returning result
+	var tag = node.tagName.toLowerCase();//.replace('xs:', '');
+	var n = document.createElement(tag);
 
@@ -135,2 +132,3 @@ n.innerHTML = node.innerHTML;
 		if( /^xs:/g.test( tag ) ) {
+		// if( node[ii].hasAttribute('xs') ) {
 			// collections have to be handled a little differently
@@ -187,3 +185,11 @@ // the template node does not get replaced here since it has to be
 
-	return this.template.innerHTML;
+	// these two lines make me sad. shouldn't have to do this but since "xs!:"
+	// prefixes have to be used temporarily self-closing tags end up with
+	// closing tags and the unit tests fail... can't wait to delete this lines
+	var out = document.createElement('div');
+
+	// clean up all remaing "xs:" and variant prefixes
+	out.innerHTML = this.template.innerHTML.replace(/<(\/?)xs!?:/g, '<$1');
+
+	return out.innerHTML;
 };
@@ -199,2 +205,5 @@
 
-})();
+// hopefully xsalt can switch to xmldom and DOMParser in the future
+// jsdom is a lot chunkier and more complicated than is needed
+// it would clean up this execution line too
+})( typeof window === "undefined" ? require('jsdom').jsdom().parentWindow.document : document );

No alert changes

Improved metrics

Total package byte prevSize

11331

increased by16.04%

Lines of code

193

increased by7.22%

Number of lines in readme file

100

increased by3.09%

No dependency changes