Merge pull request #12 from cho45/compile

returns compiled function with keys of stash

Author: cho45

README.md

@@ -83,12 +83,16 @@ SYNTAX
 DESCRIPTION
 -----------
 
-### template(id or source , data)
+### template(id or source , data | array )
 
 If the first argument of template matches `/^[\w\-]+$/`, it is treated as `id` of template. In this case, use `document.getElementById(id).innerHTML` to get source.
 
 Otherwise, the first argument is treated as source directly.
 
+If the second argument is an **Array**, it is treated as a list of property names for the data object. In this case, the template function will be compiled with these property names as its local variables, and the compiled function itself will be returned (not executed). This allows you to precompile a template for repeated use with the same set of variable names.
+
+If the second argument is an **Object**, the template will be rendered immediately using the object's properties as local variables.
+
 
 CUSTOM `get` FUNCTION
 ---------------------
@@ -107,16 +111,19 @@ DEFINE DATA VARIABLE SCOPE
 
 micro-template now always expands data variables as local variables in the template function. The template API only supports two arguments: the template source/id and the data object. All keys of the data object are available as local variables in the template code.
 
+If the second argument is an **Array**, it is treated as a list of property names for the data object. In this case, the template function will be compiled with these property names as its local variables, and the function itself will be returned (not executed). This allows you to precompile a template for repeated use with the same set of variable names.
+
 For example:
 
 ```js
-const result = template('aaa <% foo %> bbb', { foo: 'bar' });
+const render = template('aaa <% foo %> bbb', ['foo']);
+const result = render({ foo: 'bar' });
 // result: 'aaa bar bbb'
 ```
 
 You can access all properties of the data object directly as variables inside the template.
 
-**Note:** The previous API that allowed calling `template(tmpl)` to return a function is removed. Always use the two-argument form: `template(tmpl, data)`.
+**Note:** The previous API that allowed calling `template(tmpl)` to return a function is removed. Always use the two-argument form: `template(tmpl, data)` or `template(tmpl, [prop1, prop2, ...])`.
 
 EXTENDED FEATURES
 -----------------
@@ -169,7 +176,7 @@ BENCHMARK
 ---------
 
 online:
-[benchmark on perf.link](https://perf.link/#eyJpZCI6IjdyMGN5dHJzazdvIiwidGl0bGUiOiJtaWNyby10ZW1wbGF0ZS5qcyB2cyBlanMiLCJiZWZvcmUiOiJpbXBvcnQgeyBleHRlbmRlZCBhcyB0ZW1wbGF0ZSB9IGZyb20gXCJodHRwczovL2NobzQ1LmdpdGh1Yi5pby9taWNyby10ZW1wbGF0ZS5qcy9saWIvbWljcm8tdGVtcGxhdGUuanNcIjtcbmltcG9ydCBlanMgZnJvbSAnaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9lanMvZWpzLmpzLytlc20nO1xuXG5jb25zdCBURU1QTEFURSA9IGBcbjwlIGZvciAodmFyIGkgPSAxOyBpIDw9IG47IGkrKykgeyAlPlxuXHQ8JT0gIGkgKyAnID0nICU%2BXG5cdDwlIGlmIChpICUgMTUgPT0gMCkgeyAlPlxuXHRGaXp6QnV6elxuXHQ8JSB9IGVsc2UgeyAlPlxuXHRcdDwlIGlmIChpICUgMyA9PSAwKSB7ICU%2BXG5cdFx0Rml6elxuXHRcdDwlIH0gZWxzZSB7ICU%2BXG5cdFx0XHQ8JSBpZiAoaSAlIDUgPT0gMCkgeyAlPlxuXHRcdFx0QnV6elxuXHRcdFx0PCUgfSBlbHNlIHsgJT5cblx0XHRcdDwlPSBpICU%2BXG5cdFx0XHQ8JSB9ICU%2BXG5cdFx0PCUgfSAlPlxuXHQ8JSB9ICU%2BXG5cdC9cbjwlIH0gJT5cbmAudHJpbSgpO1xuXG5jb25zdCBjb21waWxlZEVqcyA9IGVqcy5jb21waWxlKFRFTVBMQVRFKTsiLCJ0ZXN0cyI6W3sibmFtZSI6Im1pY3JvLXRlbXBsYXRlLmpzIiwiY29kZSI6InRlbXBsYXRlKFRFTVBMQVRFLCB7IG4gOiAxMDAwIH0pOyIsInJ1bnMiOlsxMjQ1NCwxMTYzNiwxNDAwMCwxMzM2MywxMzQ1NCwxMjgxOCwxMjgxOCwxMjU0NSwxMjcyNywxMzE4MSwxMzAwMCwxMjE4MSwxMjM2MywxMjU0NSwxMjAwMCwxMTM2MywxMzI3MiwxMzQ1NCwxMjgxOCwxMjE4MSwxMjM2MywxMzgxOCwxMjcyNywxMjQ1NCwxMzAwMCwxMzgxOCwxNDM2MywxMzAwMCwxMjYzNiwxMDkwOSwxMzQ1NCwxMTU0NSwxMzA5MCwxMjgxOCwxMTcyNywxMTgxOCwxMjkwOSwxMTE4MSwxMjcyNywxMzI3MiwxMjM2MywxMTU0NSwxMzU0NSwxMzI3MiwxNDA5MCwxMzYzNiwxMjQ1NCwxMzU0NSwxMjkwOSwxMjU0NSwxMzAwMCwxMjAwMCwxMjQ1NCwxMjgxOCwxMzM2MywxMjM2MywxMjI3MiwxMjkwOSwxMjgxOCwxMzkwOSwxMzA5MCwxMjI3MiwxMzQ1NCwxMzQ1NCwxMjI3MiwxMzE4MSwxMzYzNiwxMjQ1NCwxMjU0NSwxMjA5MCwxMzA5MCwxMTgxOCwxMzM2MywxMjA5MCwxMjYzNiwxMjQ1NCwxMzYzNiwxMDQ1NCwxMTM2MywxMTYzNiwxMDgxOCwxMjAwMCwxMzkwOSwxMjcyNywxMjQ1NCwxMTgxOCwxMzI3MiwxMjU0NSwxMjcyNywxMzQ1NCwxMjI3MiwxMTAwMCwxMjcyNywxMjQ1NCwxMjgxOCwxMjYzNiwxMzYzNiwxMjM2MywxMjgxOCwxNDE4MV0sIm9wcyI6MTI2OTJ9LHsibmFtZSI6ImVqcyIsImNvZGUiOiJjb21waWxlZEVqcyh7IG4gOiAxMDAwIH0pOyIsInJ1bnMiOls5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDgxOCw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsODE4LDgxOCw3MjcsNzI3LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDgxOCw4MTgsOTA5LDgxOCw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDgxOCw5MDldLCJvcHMiOjg4N31dLCJ1cGRhdGVkIjoiMjAyNS0wNi0xMFQxMToyMzoyMS43MTlaIn0%3D )
+[benchmark on perf.link](https://perf.link/#eyJpZCI6IjdyMGN5dHJzazdvIiwidGl0bGUiOiJtaWNyby10ZW1wbGF0ZS5qcyB2cyBlanMiLCJiZWZvcmUiOiJpbXBvcnQgeyBleHRlbmRlZCBhcyB0ZW1wbGF0ZSB9IGZyb20gXCJodHRwczovL2NobzQ1LmdpdGh1Yi5pby9taWNyby10ZW1wbGF0ZS5qcy9saWIvbWljcm8tdGVtcGxhdGUuanNcIjtcbmltcG9ydCBlanMgZnJvbSAnaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9lanMvZWpzLmpzLytlc20nO1xuXG5jb25zdCBURU1QTEFURSA9IGBcbjwlIGZvciAodmFyIGkgPSAxOyBpIDw9IG47IGkrKykgeyAlPlxuXHQ8JT0gIGkgKyAnID0nICU%2BXG5cdDwlIGlmIChpICUgMTUgPT0gMCkgeyAlPlxuXHRGaXp6QnV6elxuXHQ8JSB9IGVsc2UgeyAlPlxuXHRcdDwlIGlmIChpICUgMyA9PSAwKSB7ICU%2BXG5cdFx0Rml6elxuXHRcdDwlIH0gZWxzZSB7ICU%2BXG5cdFx0XHQ8JSBpZiAoaSAlIDUgPT0gMCkgeyAlPlxuXHRcdFx0QnV6elxuXHRcdFx0PCUgfSBlbHNlIHsgJT5cblx0XHRcdDwlPSBpICU%2BXG5cdFx0XHQ8JSB9ICU%2BXG5cdFx0PCUgfSAlPlxuXHQ8JSB9ICU%2BXG5cdC9cbjwlIH0gJT5cbmAudHJpbSgpO1xuXG5jb25zdCBjb21waWxlZEVqcyA9IGVqcy5jb21waWxlKFRFTVBMQVRFKTsiLCJ0ZXN0cyI6W3sibmFtZSI6Im1pY3JvLXRlbXBsYXRlLmpzIiwiY29kZSI6InRlbXBsYXRlKFRFTVBMQVRFLCB7IG4gOiAxMDAwIH0pOyIsInJ1bnMiOlsxMjQ1NCwxMTYzNiwxNDAwMCwxMzM2MywxMzQ1NCwxMjgxOCwxMjgxOCwxMjU0NSwxMjcyNywxMzE4MSwxMzAwMCwxMjE4MSwxMjM2MywxMjU0NSwxMjAwMCwxMTM2MywxMzI3MiwxMzQ1NCwxMjgxOCwxMjE4MSwxMjM2MywxMzgxOCwxMjcyNywxMjQ1NCwxMzAwMCwxMzgxOCwxNDM2MywxMzAwMCwxMjYzNiwxMDkwOSwxMzQ1NCwxMTU0NSwxMzA5MCwxMjgxOCwxMTcyNywxMTgxOCwxMjkwOSwxMTE4MSwxMjcyNywxMzI3MiwxMjM2MywxMTU0NSwxMzU0NSwxMzI3MiwxNDA5MCwxMzYzNiwxMjQ1NCwxMzU0NSwxMjkwOSwxMjU0NSwxMzAwMCwxMjAwMCwxMjQ1NCwxMjgxOCwxMzM2MywxMjM2MywxMjI3MiwxMjkwOSwxMjgxOCwxMzkwOSwxMzA5MCwxMjI3MiwxMzQ1NCwxMzQ1NCwxMjI3MiwxMzE4MSwxMzYzNiwxMjQ1NCwxMjU0NSwxMjA5MCwxMzA5MCwxMTgxOCwxMzM2MywxMjA5MCwxMjYzNiwxMjQ1NCwxMzYzNiwxMDQ1NCwxMTM2MywxMTYzNiwxMDgxOCwxMjAwMCwxMzkwOSwxMjcyNywxMjQ1NCwxMTgxOCwxMzI3MiwxMjU0NSwxMjcyNywxMzQ1NCwxMjI3MiwxMTAwMCwxMjcyNywxMjQ1NCwxMjgxOCwxMjYzNiwxMzYzNiwxMjM2MywxMjgxOCwxNDE4MV0sIm9wcyI6MTI2OTJ9LHsibmFtZSI6ImVqcyIsImNvZGUiOiJjb21waWxlZEVqcyh7IG4gOiAxMDAwIH0pOyIsInJ1bnMiOls5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDgxOCw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsODE4LDgxOCw3MjcsNzI3LDkwOSw5MDksOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDgxOCw4MTgsOTA5LDgxOCw4MTgsOTA5LDkwOSw5MDksOTA5LDkwOSw4MTgsOTA5LDkwOSw4MTgsOTA5LDkwOSw5MDksODE4LDkwOSw5MDksOTA5LDgxOCw5MDldLCJvcHMiOjg4N31dLCJ1cGRhdGVkIjoiMjAyNS0wNi0xMFQxMToyMzoyMS43MTlaIn0%3D )
 
 node:
 
@@ -178,46 +185,53 @@ node:
 ```
 > node --expose-gc ./misc/benchmark.js
 
-clk: ~3.04 GHz
+ 1 = 1 / 2 = 2 / 3 = Fizz / 4 = 4 / 5 = Buzz / 6 = Fizz / 7 = 7 / 8 = 8 / 9 = Fizz / 10 = Buzz / 11 = 11 / 12 = Fizz / 13 = 13 / 14 = 14 / 15 = FizzBuzz / 16 = 16 / 17 = 17 / 18 = Fizz / 19 = 19 / 20 = Buzz / 21 = Fizz / 22 = 22 / 23 = 23 / 24 = Fizz / 25 = Buzz / 26 = 26 / 27 = Fizz / 28 = 28 / 29 = 29 / 30 = FizzBuzz / 
+clk: ~3.01 GHz
 cpu: Apple M1
 runtime: node 20.10.0 (arm64-darwin)
 
 benchmark                         avg (min … max) p75 / p99    (min  top 1%)
 ------------------------------------------------- -------------------------------
-micro-template                      24.53 µs/iter  23.04 µs                      
-                           (21.83 µs … 243.04 µs)  65.54 µs                     
-                          ( 80.00  b … 341.16 kb) 146.07 kb ██▂▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+micro-template                      21.13 µs/iter  19.88 µs ▇                   
+                           (18.79 µs … 343.21 µs)  49.29 µs                     
+                          ( 12.35 kb … 365.21 kb) 108.72 kb ██▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+
+micro-template pre compiled         20.22 µs/iter  19.98 µs                      
+                            (19.76 µs … 22.35 µs)  21.46 µs                     
+                          (  1.92 kb …   1.94 kb)   1.92 kb ▅█▅█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▅
 
-micro-template (not cached)         32.47 µs/iter  30.17 µs                      
-                           (28.75 µs … 333.62 µs)  93.33 µs                     
-                          (  3.81 kb … 606.79 kb) 159.79 kb █▅▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+micro-template (not cached)         29.17 µs/iter  27.50 µs ▄                   
+                           (26.21 µs … 311.92 µs)  58.13 µs                     
+                          (  2.14 kb … 378.82 kb) 123.25 kb ██▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
 
-micro-template (template.variable)  24.58 µs/iter  23.13 µs                      
-                           (21.92 µs … 216.00 µs)  65.12 µs                     
-                          ( 22.73 kb … 497.89 kb) 146.28 kb ██▂▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+micro-template (template.variable)  20.91 µs/iter  20.00 µs                      
+                           (19.12 µs … 219.87 µs)  30.67 µs                     
+                          (  2.98 kb … 492.50 kb) 108.87 kb ▁█▇▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
 
-ejs.render pre compiled            348.73 µs/iter 352.79 µs   ▃                 
-                          (332.54 µs … 574.04 µs) 393.13 µs                     
-                          (  5.10 kb … 613.10 kb)  72.51 kb ▂▂███▆▅▄▄▄▃▄▃▂▂▂▂▂▁▁▁
+ejs.render pre compiled            430.88 µs/iter 432.54 µs                      
+                          (421.38 µs … 642.92 µs) 477.00 µs ▂                  
+                          ( 18.84 kb … 830.84 kb)  99.63 kb ███▇▆▄▃▃▂▂▂▂▂▁▂▁▁▁▁▁▁
 
-John Resig's tmpl                  226.28 µs/iter 231.58 µs  █                  
-                          (214.42 µs … 436.08 µs) 268.42 µs  █                 
-                          ( 18.88 kb … 442.88 kb) 101.19 kb ████▆▄▄▅▆▅▄▄▃▂▂▂▁▁▁▁▁
+John Resig's tmpl                  239.00 µs/iter 238.17 µs                      
+                          (232.62 µs … 424.21 µs) 274.75 µs                     
+                          ( 33.55 kb … 470.89 kb) 126.63 kb ███▄▂▃▂▂▂▁▁▁▁▁▁▁▁▁▁
 
                                    ┌                                            ┐
-                    micro-template ┤ 24.53 s
-       micro-template (not cached) ┤■ 32.47sµ
-micro-template (template.variable) ┤ 24.58 s
-           ejs.render pre compiled ┤■■■■■■■■■■■■■■■■■■■■■s ■■■■■■■■■■■■ 348.73 µ
-                 John Resig's tmpl ┤■■■■■■■■■■■■■■ s■■■■■■ 226.28 µ
+                    micro-template ┤ 21.13 s
+       micro-template pre compiled ┤ 20.22 s
+       micro-template (not cached) ┤■ 29.17sµ
+micro-template (template.variable) ┤ 20.91 s
+           ejs.render pre compiled ┤■■■■■■■■■■■■■■■■■■■■■s ■■■■■■■■■■■■ 430.88 µ
+                 John Resig's tmpl ┤■■■■■■■■■■■■■s ■■■■ 239.00 µ
                                    └                                            ┘
 
 summary
-  micro-template
-   1x faster than micro-template (template.variable)
-   1.32x faster than micro-template (not cached)
-   9.22x faster than John Resig's tmpl
-   14.22x faster than ejs.render pre compiled
+  micro-template pre compiled
+   1.03x faster than micro-template (template.variable)
+   1.05x faster than micro-template
+   1.44x faster than micro-template (not cached)
+   11.82x faster than John Resig's tmpl
+   21.31x faster than ejs.render pre compiled
 ```
 
 LICENSE

lib/micro-template.js

@@ -4,7 +4,7 @@
  */
 const template = function (id, data) {
 	if (arguments.length < 2) throw new Error('template() must be called with (template, data)');
-	const me = template, keys = Object.keys(data || {}), key = `data:${id}:${keys.join(':')}`;
+	const me = template, isArray = Array.isArray(data), keys = isArray ? data : Object.keys(data || {}), key = `data:${id}:${keys.sort().join(':')}`;
 	if (!me.cache.has(key)) me.cache.set(key, (function () {
 		let name = id, string = /^[\w\-]+$/.test(id) ? me.get(id): (name = 'template(string)', id); // no warnings
 		let line = 1;
@@ -27,9 +27,9 @@ const template = function (id, data) {
 			`//@ sourceURL=template.js\n`
 		);
 		const func = new Function("__this", ...keys, body);
-		return function (stash, ...args) { return func.call(null, me.context = { escapeHTML: me.escapeHTML, line: 1, ret : '', stash: stash }, ...args) };
+		return function (stash) { return func.call(null, me.context = { escapeHTML: me.escapeHTML, line: 1, ret : '', stash: stash }, ...keys.map(key => stash[key])) };
 	})());
-	return me.cache.get(key)(data, ...keys.map(key => data[key]));
+	return isArray ? me.cache.get(key) : me.cache.get(key)(data);
 }
 template.cache = new Map();
 template.get = function (id) { return document.getElementById(id).innerHTML };

misc/benchmark.js

@@ -65,21 +65,27 @@ const fizzbuzz = `
 `.trim();
 const fizzbuzzVar  = fizzbuzz.replace(/^/, '<% var n = stash.n; %>');
 const ejsFunc = ejs.compile(fizzbuzz);
+const compiled = template(fizzbuzz, ['n']);
 
 const output1 = template(fizzbuzz, {n: 30}).replace(/\s+/g, ' ');
 const output2 = ejsFunc({n: 30 }).replace(/\s+/g, ' ');
 template.variable = 'stash';
 const output3 = template(fizzbuzzVar, {n: 30}).replace(/\s+/g, ' ');
+const output4 = compiled({ n: 30 }).replace(/\s+/g, ' ');
 console.log(output1);
 assert.equal(output1, output2, 'output should be same');
 assert.equal(output1, output3, 'output should be same');
+assert.equal(output1, output4, 'output should be same');
 
 barplot(() => {
 	summary(() => {
 		bench('micro-template', () => {
 			template.variable = null;
 			template(fizzbuzz, { n: 300 });
 		});
+		bench('micro-template pre compiled', () => {
+			compiled({ n: 300 });
+		});
 		bench('micro-template (not cached)', () => {
 			template.variable = null;
 			template.cache.clear();

test/test.js

@@ -15,6 +15,12 @@ test('template renders with data', (t) => {
 	assert.strictEqual(result, '<b>foo</b><i>bar</i>');
 });
 
+test('template pre-compiled func', (t) => {
+	const stash = { foo: 'foo', bar: 'bar' };
+	const result = template('<b><%= foo %></b><i><%= bar %></i>', Object.keys(stash))( stash );
+	assert.strictEqual(result, '<b>foo</b><i>bar</i>');
+});
+
 test('template renders static html (single/double quote)', (t) => {
 	assert.strictEqual(template("<a href='foo'>foo</a>", {}), "<a href='foo'>foo</a>");
 	assert.strictEqual(template('<a href="foo">foo</a>', {}), '<a href="foo">foo</a>');
@@ -245,12 +251,10 @@ test('template with ES6 syntax', (t) => {
 	assert.strictEqual(template('<% let x = 1; const y = 2; %><%= x + y %>', {}), '3');
 });
 
-test('template with consecutive script tags', (t) => {
-	let called = [];
-	template('<% foo %><% bar %>', {
-		get foo() { called.push('foo'); },
-		get bar() { called.push('bar'); }
+test('template with properties script tags', (t) => {
+	const result = template('<%= foo %><%= bar %>', {
+		get foo() { return 'foo' },
+		get bar() { return 'bar' }
 	});
-	assert.deepStrictEqual(called, ['foo', 'bar']);
-	assert.strictEqual(template('<%= foo %><%= bar %>', { foo: 'foo', bar: 'bar' }), 'foobar');
+	assert.strictEqual(result, 'foobar');
 });