jst now using NodeJS module format. Created very basic test script.

jst/jst.js

@@ -1,35 +1,80 @@
 
 
-function isElement(obj) {
-  try {
-    // Using W3 DOM2 (works for FF, Opera and Chrome)
-    return obj instanceof HTMLElement;
-  } catch(e) {
-    //Browsers not supporting W3 DOM2 don't have HTMLElement and
-    //an exception is thrown and we end up here. Testing some
-    //properties that all elements have (works on IE7)
-    return (typeof obj==="object") &&
-      (obj.nodeType===1) && (typeof obj.style === "object") &&
-      (typeof obj.ownerDocument ==="object");
+
+class ENode{
+  constructor(tag){
+    this.__tag = tag;
+    this.__classes = [];
+    this.__attribs = [];
+    this.__children = [];
+  }
+
+  appendChild(c){
+    var val = (c instanceof ENode) ? c : c.toString();
+    this.__children.push(c);
+    return this;
+  }
+
+  addClass(cname){
+    this.__classes.push(cname);
+  }
+
+  addAttribute(aname, aval){
+    this.__attribs.push([aname, aval]);
+  }
+
+  toString(){
+    var r = "<" + this.__tag.toUpperCase();
+    if (this.__classes.length > 0){
+      var cls = this.__classes.reduce(function(a, c){
+        c = c.split(" ");
+        for (var i=0; i < c.length; i++){
+          c[i] = c[i].trim();
+          a += ((a !== "" && c[i].length > 0) ? " " : "") + c[i];
+        }
+        return a;
+      }, "");
+      r += " class=\"" + cls + "\"";
+    }
+
+    if (this.__attribs.length > 0){
+      var attr = this.__attribs.reduce(function(a, at){
+        a += ((a !== "") ? " " : "") + at[0].trim() + "=\"" + at[1] + "\"";
+        return a;
+      }, "");
+      r += " " + attr;
+    }
+
+    if (this.__children.length > 0){
+      r += ">";
+      r += this.__children.reduce(function(a, c){
+        if (c instanceof ENode){
+          a += c.toString() + "\n";
+        } else {
+          a += c;
+        }
+        return a;
+      }, "");
+      r += "</" + this.__tag.toUpperCase() + ">";
+    } else {
+      r += " />";
+    }
+    return r;
   }
 }
 
+
 function appendCTX(el, ctx){
-  if (isElement(ctx)){
-    el.appendChild(ctx);
-  } else {
-    var t = document.createTextNode(ctx.toString());
-    el.appendChild(t);
-  }
+  el.appendChild((ctx instanceof ENode) ? ctx : ctx.toString());
 }
 
-export function el(ename, ctx, cls, attr){
-  var e = document.createElement(ename);
+function el(ename, ctx, cls, attr){
+  var e = new ENode(ename);
   if (ctx){
     if (ctx instanceof Array){
-      ctx.forEach(item => appendCTX(el, item));
+      ctx.forEach(item => appendCTX(e, item));
     } else {
-      appendCTX(el, ctx);
+      appendCTX(e, ctx);
     }
   }
 
@@ -38,52 +83,61 @@ export function el(ename, ctx, cls, attr){
     if (typeof(cl) === "String")
       cl = cl.split(" ");
     if (cl instanceof Array){
-      cl.forEach(c => el.classList.add(c.trim()));
+      cl.forEach(c => e.addClass(c.trim()));
     }
   }
   if (attr){
     var keys = Object.keys(attr);
     keys.forEach(function(key){
       if (attr.hasOwnProperty(key)){
-        var att = document.createAttribute(key.toString());
-        if (typeof(attr[key]) === "String"){
-          att.value = attr[key];
-          el.setAttributeNode(att);
+        if (typeof(attr[key]) === "string"){
+          e.addAttribute(key.toString(), attr[key]);
         }
       }
     });
   }
+
+  return e;
 }
 
-export const header = el.bind(null, "header");
-export const title = el.bind(null, "title");
-export const script = el.bind(null, "script");
-export const link = el.bind(null, "link");
-export const meta = el.bind(null, "meta");
-export const div = el.bind(null, "div");
-export const span = el.bind(null, "span");
-export const a = el.bind(null, "a");
-export const p = el.bind(null, "p");
-export const b = el.bind(null, "b");
-export const i = el.bind(null, "i");
-export const br = el.bind(null, "br");
-export const ol = el.bind(null, "ol");
-export const ul = el.bind(null, "ul");
-export const li = el.bind(null, "li");
-export const em = el.bind(null, "em");
-export const font = el.bind(null, "font");
-export const h1 = el.bind(null, "h1");
-export const h2 = el.bind(null, "h2");
-export const h3 = el.bind(null, "h3");
-export const h4 = el.bind(null, "h4");
-export const h5 = el.bind(null, "h5");
-export const h6 = el.bind(null, "h6");
-export const hr = el.bind(null, "hr");
-export const blockquote = el.bind(null, "blockquote");
-export const button = el.bind(null, "button");
-export const nav = el.bind(null, "nav");
-export const canvas = el.bind(null, "canvas");
-export const caption = el.bind(null, "caption");
+
+
+module.exports = {
+  ENode: ENode,
+  el: el,
+  html: el.bind(null, "html"),
+  head: el.bind(null, "head"),
+  title: el.bind(null, "title"),
+  script: el.bind(null, "script"),
+  link: el.bind(null, "link"),
+  meta: el.bind(null, "meta"),
+  body: el.bind(null, "body"),
+  div: el.bind(null, "div"),
+  span: el.bind(null, "span"),
+  a: el.bind(null, "a"),
+  p: el.bind(null, "p"),
+  b: el.bind(null, "b"),
+  i: el.bind(null, "i"),
+  br: el.bind(null, "br"),
+  ol: el.bind(null, "ol"),
+  ul: el.bind(null, "ul"),
+  li: el.bind(null, "li"),
+  em: el.bind(null, "em"),
+  img: el.bind(null, "img"),
+  font: el.bind(null, "font"),
+  h1: el.bind(null, "h1"),
+  h2: el.bind(null, "h2"),
+  h3: el.bind(null, "h3"),
+  h4: el.bind(null, "h4"),
+  h5: el.bind(null, "h5"),
+  h6: el.bind(null, "h6"),
+  hr: el.bind(null, "hr"),
+  blockquote: el.bind(null, "blockquote"),
+  button: el.bind(null, "button"),
+  nav: el.bind(null, "nav"),
+  canvas: el.bind(null, "canvas"),
+  caption: el.bind(null, "caption")
+};
 
 
 

jst/test.js

@@ -0,0 +1,17 @@
+
+var T = require("./jst.js");
+
+console.log(T.html([
+  T.head([
+    T.title("This is a Test")
+  ]),
+  T.body([
+    T.h1("Hello World!"),
+    T.p([
+      "This is a bit of text ",
+      T.i("with italics!"),
+      " so go figure!"
+    ], "red green blue"),
+    T.a("LINK", null, {href:"www.google.com"})
+  ])
+]).toString());