Playground templates

Testing templating engines. So far tried: Handlebars, EJS, Lodash and
ES6 function strings, ES6 strings.

I`npm install && npm run build:all` will show you filesizes of the
bundles for each corresponding templating engine. `index.html` outputs
them all to console to make sure they work.

playground/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

playground/templates/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

playground/templates/build/bundle-ejs.js

@@ -0,0 +1,30 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var _index = require('../templates/index.ejs');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+console.log('ejs template:');
+console.log((0, _index2.default)({ users: ['John', 'Ira', 'Karl'] }));
+
+},{"../templates/index.ejs":2}],2:[function(require,module,exports){
+module.exports = (function anonymous(locals, filters, escape, rethrow
+/**/) {
+escape = escape || function (html){
+  return String(html)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/'/g, '&#39;')
+    .replace(/"/g, '&quot;');
+};
+var buf = [];
+with (locals || {}) { (function(){ 
+ buf.push('<ul>\n  ');2; users.forEach(function(user) { ; buf.push('\n    <li>', escape((3,  user )), '</li>\n  ');4; }); ; buf.push('\n</ul>\n'); })();
+} 
+return buf.join('');
+})
+},{}]},{},[1]);

playground/templates/build/bundle-es6-string.js

@@ -0,0 +1,12 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+
+var indexTemplate = "`\n<ul>\n  ${users.map(user => `<li>${user}</li>`).join('\\n')}\n</ul>\n`\n";
+
+var users = ['John', 'Ira', 'Karl'];
+
+console.log('es6 string template:');
+console.log(eval(indexTemplate));
+
+},{}]},{},[1]);

playground/templates/build/bundle-es6.js

@@ -0,0 +1,30 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var _index = require('../templates/index.js');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+console.log('es6 function template:');
+console.log((0, _index2.default)({ users: ['John', 'Ira', 'Karl'] }));
+
+},{"../templates/index.js":2}],2:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = function (opts) {
+  var users = opts.users;
+
+  return '\n    <ul>\n      ' + users.map(function (user) {
+    return '<li>' + user + '</li>';
+  }).join('\n') + '\n    </ul>\n  ';
+};
+
+;
+
+},{}]},{},[1]);

playground/templates/index.html

@@ -0,0 +1,9 @@
+<script src="build/bundle-ejs.js"></script>
+
+<script src="build/bundle-hbs.js"></script>
+
+<script src="build/bundle-es6.js"></script>
+
+<script src="build/bundle-es6-string.js"></script>
+
+<script src="build/bundle-lodash.js"></script>

playground/templates/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "templates",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.3.13",
+    "babelify": "^7.2.0",
+    "brfs": "^1.4.3",
+    "browserify": "^13.0.0",
+    "ejsify": "^1.0.0",
+    "hbsfy": "^2.4.1",
+    "lodash.template": "^4.0.0"
+  },
+  "scripts": {
+    "build:all": "npm run build:es6 && npm run build:es6:string && npm run build:ejs && npm run build:handlebars && npm run build:lodash",
+    "build:lodash": "browserify -t [ babelify --presets [ es2015 ] ] -t brfs src/lodash.js -o build/bundle-lodash.js && stat -f%z build/bundle-lodash.js",
+    "build:es6": "browserify -t [ babelify --presets [ es2015 ] ] src/es6.js -o build/bundle-es6.js && stat -f%z build/bundle-es6.js",
+    "build:es6:string": "browserify -t [ babelify --presets [ es2015 ] ] -t brfs src/es6-string.js -o build/bundle-es6-string.js && stat -f%z build/bundle-es6-string.js",
+    "build:ejs": "browserify -t ejsify -t [ babelify --presets [ es2015 ] ] src/ejs.js -o build/bundle-ejs.js && stat -f%z build/bundle-ejs.js",
+    "build:handlebars": "browserify -t hbsfy -t [ babelify --presets [ es2015 ] ] src/hbs.js -o build/bundle-hbs.js && stat -f%z build/bundle-hbs.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

playground/templates/src/ejs.js

@@ -0,0 +1,6 @@
+import indexTemplate from '../templates/index.ejs';
+
+console.log('ejs template:')
+console.log(
+  indexTemplate({ users: ['John', 'Ira', 'Karl'] })
+);

playground/templates/src/es6-string.js

@@ -0,0 +1,9 @@
+var fs = require('fs');
+const indexTemplate = fs.readFileSync('./templates/index-string.js', 'utf-8');
+
+const users = ['John', 'Ira', 'Karl'];
+
+console.log('es6 string template:')
+console.log(
+  eval(indexTemplate)
+);

playground/templates/src/es6.js

@@ -0,0 +1,6 @@
+import indexTemplate from '../templates/index.js';
+
+console.log('es6 function template:')
+console.log(
+  indexTemplate({ users: ['John', 'Ira', 'Karl'] })
+);

playground/templates/src/hbs.js

@@ -0,0 +1,6 @@
+import indexTemplate from '../templates/index.hbs';
+
+console.log('handlebars template:')
+console.log(
+  indexTemplate({ users: ['John', 'Ira', 'Karl'] })
+);

playground/templates/src/lodash.js

@@ -0,0 +1,8 @@
+var fs = require('fs');
+import compileTemplate from 'lodash.template';
+const indexTemplate = compileTemplate(fs.readFileSync('./templates/index-lodash.html', 'utf-8'));
+
+console.log('lodash template:')
+console.log(
+  indexTemplate({ users: ['John', 'Ira', 'Karl'] })
+);

playground/templates/templates/index-lodash.html

@@ -0,0 +1,5 @@
+<ul>
+  <% users.forEach(function(user) { %>
+    <li><%= user %></li>
+  <% }); %>
+</ul>

playground/templates/templates/index-string.js

@@ -0,0 +1,5 @@
+`
+<ul>
+  ${users.map(user => `<li>${user}</li>`).join('\n')}
+</ul>
+`

playground/templates/templates/index.ejs

@@ -0,0 +1,5 @@
+<ul>
+  <% users.forEach(function(user) { %>
+    <li><%= user %></li>
+  <% }); %>
+</ul>

playground/templates/templates/index.hbs

@@ -0,0 +1,5 @@
+<ul>
+  {{#each users}}
+    <li>{{this}}</li>
+  {{/each}}
+</ul>

playground/templates/templates/index.js

@@ -0,0 +1,8 @@
+export default function (opts) {
+  const { users } = opts;
+  return `
+    <ul>
+      ${users.map(user => `<li>${user}</li>`).join('\n')}
+    </ul>
+  `;
+};