Skip to content

Instantly share code, notes, and snippets.

@dafrancis
Last active December 11, 2015 12:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dafrancis/4598986 to your computer and use it in GitHub Desktop.
Save dafrancis/4598986 to your computer and use it in GitHub Desktop.
Why would anyone want to use templating languages when you can use SPEEDY document.createElement()? #WOW #COOL #YOLO

DONUT (DO Not Use This)

Tired of those horribly slow templating languages?

Want a super fast templating language that doesn't involve strings?

Do you like your libraries small and simple?

Then DO Not Use This

Why?

Why? I'm creating global variables to stop everything from failing (granted I'm unsetting the global variables after doing that but that's still really not clever). Take this for example:

var blinkTag = DONUT(function () {
    return blink("Why would you do this?");
});

document.getElementById("mainArea").appendChild(blinkTag);

There's no such thing as a "blink" function. DONUT just catches the exception and creates a temporary one for you.

Tags can have tags and you can also set attributes and inline css:

var list = DONUT(function () {
    return ul(
        li("Oh the horror!"),
        li("Why would one even.."),
        li("Hey is that something for inline css").css("color", "red").attr("title", "Oh my god it is"),
        li(
            "You are the worst ever",
            a("No you're making it worse").attr("href", "stop_it_for_the_love_of.html")
        )
    );
});

No I meant why use this?

Oh right well...:

  • It's fast (somewhat)
  • It's teeny tiny
  • No more messy HTML
  • You shouldn't actually use this
  • No really, you shouldn't use this

Hey you can't tell me what to do!

Whatever. Do what you like. Just don't blame me when your new ultra super rockstar startup is on fire because you decided to use this for your javascript templating instead of mustache or plates or something sensible.

This library is insane!

I KNOW!!!

This library doesn't work in IE[0-9]+/[Cool new browser I'm using]/Lynx

Javascript templating is HTML5 maaan (Web 2.0 was so last decade) that means you should have been using FireChrome's Nightcanrary browser.

License

WHY

var DONUT = function (callback) {
var donut = function (callback, globals) {
var i, node, out, func, regex = / is not defined$/;
node = function (ele) {
return function () {
var i, child, elem = document.createElement(ele);
for (i = 0; i < arguments.length; i++) {
child = arguments[i];
if (typeof child !== "object") {
child = document.createTextNode(child || "");
}
elem.appendChild(child);
}
elem.attr = function (key, value) {
elem[key] = value || "";
return elem;
};
elem.css = function (key, value) {
elem.style[key] = value;
return elem;
};
return elem;
};
};
try {
out = callback();
for (i = 0; i < globals.length; i++) {
delete window[globals[i]];
}
} catch (e) {
if (regex.test(e.message)) {
func = e.message.replace(regex, "");
window[func] = node(func);
out = donut(callback, globals.concat([func]));
} else {
throw e;
}
}
return out;
};
return donut(callback, []);
};
var DONUT=function(callback){var donut=function(callback,globals){var node,out,func,regex=/ is not defined$/;node=function(ele){return function(){var i,child,elem=document.createElement(ele);for(i=0;i<arguments.length;i++){child=arguments[i];if(typeof child!=="object"){child=document.createTextNode(child||"")}elem.appendChild(child)}elem.attr=function(key,value){elem[key]=value||"";return elem};elem.css=function(key,value){elem.style[key]=value;return elem};return elem}};try{out=callback();for(var i=0;i<globals.length;i++){delete window[globals[i]]}}catch(e){if(regex.test(e.message)){func=e.message.replace(regex,"");window[func]=node(func);out=donut(callback,globals.concat([func]))}else{throw e}}return out};return donut(callback,[])};
var tableRow = DONUT(function () {
return tr(
td("Oh"),
td("My"),
td("Gosh"),
td(
"Holy Cow! ",
a("I can do this now!").attr("href", "whoa.html")
)
);
});
console.log(tableRow);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment