Skip to content

Instantly share code, notes, and snippets.

@Masquerade-Circus
Forked from 140bytes/LICENSE.txt
Last active April 22, 2019 19:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Masquerade-Circus/d441541cc604624552a9 to your computer and use it in GitHub Desktop.
Save Masquerade-Circus/d441541cc604624552a9 to your computer and use it in GitHub Desktop.

Small and super fast logic-less template engine in 132 bytes.

You can use it like so:

   var result = compile('Some {{string}}', {string: 'Awesome code'}); 

result will be 'Some Awesome code'; Or

   	var result = compile('Some {{string}}'); 

result will be the compiled template to be used later

	function anonymous(o) {
		return "Some " + (o["code"]||"") + "";
	};

So you could easily do this

	document.body.innerHTML = compile('<article><head>{{title}}</head><section>{{content}}</section></article>', {
		title: 'Super fast template engine', 
		content: compile('<div>{{description}}</div>', {
		  description: 'Small and super fast logic-less template engine in 132 bytes.'
		})
	})
function (
a, // String template to be compiled
b, // Optional object of values to replace
c // Placeholder for the returned interpolator function
) {
return c = Function(
"o",
"return " +
JSON.stringify(a) // Use JSON.stringify to escape special chars
.replace(/{{(.+?)}}/g, '" + (o["$1"]||"") + "') +
";"),
b != []._ ? // If passed an object
c(b) : // return the result of the interpolated template
c // else return the compiled template function to be used later
}
function(a,b,c){return c=Function("o","return "+JSON.stringify(a).replace(/{{(.+?)}}/g,'" + (o["$1"]||"") + "')+";"),b!=[]._?c(b):c}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "template",
"description": "Small and super fast logic-less template engine in 132 bytes",
"keywords": [
"template",
"interpolator",
"HTML",
"parser",
"render"
]
}
<!DOCTYPE html>
<title>Foo</title>
<script>
/**
* https://gist.github.com/Masquerade-Circus/d441541cc604624552a9
* Small and super fast logic-less template engine in 132 bytes.
* You can use it like so:
* var result = compile('Some {{string}}', {string: 'Awesome code'});
* result will be 'Some Awesome code';
* Or
* var result = compile('Some {{string}}');
* result will be the compiled template to be used later
* function anonymous(o) {
* return "Some " + (o["code"]||"") + "";
* };
* So you could easily do this
* document.body.innerHTML = compile('<article><head>{title}</head><section>{{content}}</section></article>', {
* title: 'Super fast template engine',
* content: compile('<div>{{description}}</div>', {description: 'Small and super fast logic-less template engine in 132 bytes.'})
* })
*/
var compile=function(a,b,c){return c=Function("o","return "+JSON.stringify(a).replace(/{{(.+?)}}/g,'" + (o["$1"]||"") + "')+";"),b!=[]._?c(b):c}
var test = 1; // Switch the test case
// Create a table with 100,000 movie titles in about 100 milliseconds.
if (test == 1){
var t1 = new Date();
console.log('Start time = 0');
html = compile('<h1>A repeated movie</h1><table><tr><td><b>Title</b></td><td><b>Description</b></td></tr>{{rows}}</table>', {
rows : (function(){
var row = compile('<tr><td>{{title}}</td><td>{{description}}</td></tr>'),
rows = '';
for (i = 0; i <= 100000; i++)
rows += row({
title: 'The explosive bomb',
description: 'A muntant ninja bomb from outer space that comes from the future and explodes and kill you again and again.'
});
return rows;
})()
});
var t2 = new Date();
console.log('End time = ' + (t2.getTime() - t1.getTime()));
document.body.innerHTML = html;
var t2 = new Date();
console.log('Append to body = ' + (t2.getTime() - t1.getTime()));
}
// Create a table with all the CJK unified ideographs
if (test == 2){
var t1 = new Date();
console.log('Start time = 0');
html = compile('<h1>CJK unified ideographs</h1><table><tr><td><b>Glyph</b></td><td><b>Codepoint</b></td></tr>{{rows}}</table>', {
rows : (function(){
var row = compile('<tr><td>{{char}}</td><td>\\u{{code}}</td></tr>'),
rows = '';
for (var i = 0x9faf; i >= 0x4e00; i--)
rows += row({
char : String.fromCharCode(i),
code : String.fromCharCode(i).charCodeAt(0).toString(16)
});
return rows;
})()
});
var t2 = new Date();
console.log('End time = ' + (t2.getTime() - t1.getTime()));
document.body.innerHTML = html;
var t2 = new Date();
console.log('Append to body = ' + (t2.getTime() - t1.getTime()));
}
</script>
@atk
Copy link

atk commented Apr 20, 2015

"{}" as placeholders is problematic for inline css. I would advise to use "{{}}" or "${}" instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment