perf: add cross-engines benchmark

Author: harttle

.mocharc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  require: "ts-node/register/transpile-only",
+  reporter: "spec"
+}

benchmark/cross-engines.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const Benchmark = require('benchmark')
+const data = require('./data/todolist.json')
+const path = require('path')
+
+const engines = {
+  liquid: require('./engines/liquid'),
+  handlebars: require('./engines/handlebars'),
+  react: require('./engines/react'),
+  swig: require('./engines/swig')
+}
+
+function crossEngines () {
+  console.log('     cross engines')
+  console.log('------------------------')
+  return new Promise(resolve => {
+    const suit = new Benchmark.Suite('cross engines')
+
+    for (const [name, { load, render }] of Object.entries(engines)) {
+      const tpl = load(path.resolve(__dirname, `templates/todolist`))
+      suit.add(name, () => render(tpl, data))
+    }
+
+    suit.on('cycle', event => console.log(String(event.target)))
+    suit.on('complete', resolve)
+    suit.run({ async: true })
+  })
+}
+
+module.exports = { crossEngines }

benchmark/data/todolist.json

@@ -0,0 +1,29 @@
+
+{
+  "categories": [{
+    "color": "red",
+    "id": "CAT1",
+    "title": "work"
+  }, {
+    "color": "red",
+    "id": "CAT2",
+    "title": "emergency"
+  }, {
+    "color": "green",
+    "id": "CAT3",
+    "title": "sport"
+  }],
+  "todos": [{
+    "title": "fork and clone",
+    "id": "TODO1",
+    "category": "work"
+  }, {
+    "title": "make it better",
+    "id": "TODO2",
+    "category": "sport"
+  }, {
+    "title": "make a pull request",
+    "id": "TODO3",
+    "category": "work"
+  }]
+}

benchmark/demo.js

@@ -1,8 +1,10 @@
 const Benchmark = require('benchmark')
 const { Liquid } = require('..')
+const ctx = require('./data/todolist.json')
+const { resolve } = require('path')
 
 const engine = new Liquid({
-  root: __dirname,
+  root: resolve(__dirname, 'templates'),
   extname: '.liquid'
 })
 
@@ -17,28 +19,14 @@ engine.registerTag('header', {
   }
 })
 
-const ctx = {
-  todos: ['fork and clone', 'make it better', 'make a pull request'],
-  title: 'Welcome to liquidjs!'
-}
-
-const template = `
-{%header content: "welcome to liquid" | capitalize%}
-
-<ul>
-  {% for todo in todos %}
-  <li>{{forloop.index}} - {{todo}}</li>
-  {% endfor %}
-</ul>
-`
-
 function demo () {
-  console.log('--- demo ---')
+  console.log('         demo')
+  console.log('------------------------')
   return new Promise(resolve => {
     new Benchmark.Suite('demo')
       .add('demo', {
         defer: true,
-        fn: d => engine.parseAndRender(template, ctx).then(x => d.resolve(x))
+        fn: d => engine.renderFile('todolist', ctx).then(x => d.resolve(x))
       })
       .on('cycle', event => console.log(String(event.target)))
       .on('complete', resolve)

benchmark/engines/handlebars.js

@@ -0,0 +1,33 @@
+const handlebars = require('handlebars')
+const { readFileSync } = require('fs')
+const { join } = require('path')
+
+handlebars.registerPartial(
+  'todo-icon',
+  readFileSync(join(__dirname, '../templates/todo-icon.hbs'), 'utf8')
+)
+
+handlebars.registerHelper('concat', function (...args) {
+  return args.filter(x => typeof x === 'string').join('')
+})
+
+handlebars.registerHelper('url', function (path) {
+  return `http://example.com${path}`
+})
+
+handlebars.registerHelper('inc', function (num) {
+  return Number(num) + 1
+})
+
+handlebars.registerHelper('capitalize', function (str) {
+  return str[0].toUpperCase() + str.slice(1).toLowerCase()
+})
+
+handlebars.registerHelper('upcase', function (str) {
+  return str.toUpperCase()
+})
+
+module.exports = {
+  load: path => handlebars.compile(readFileSync(path + '.hbs', 'utf8')),
+  render: (tpl, data) => tpl(data)
+}

benchmark/engines/liquid.js

@@ -0,0 +1,15 @@
+const { Liquid } = require('../..')
+const { readFileSync } = require('fs')
+const { join } = require('path')
+
+const liquid = new Liquid({
+  root: join(__dirname, '../templates'),
+  extname: '.liquid'
+})
+
+liquid.registerFilter('url', path => `http://example.com${path}`)
+
+module.exports = {
+  load: path => liquid.parse(readFileSync(path + '.liquid', 'utf8')),
+  render: (tpl, data) => liquid.renderSync(tpl, data)
+}

benchmark/engines/react.js

@@ -0,0 +1,20 @@
+const { readFileSync } = require('fs')
+const React = require('react')
+const ReactDOMServer = require('react-dom/server')
+const babel = require('@babel/core')
+const requireFromString = require('require-from-string')
+
+const babelConfig = {
+  presets: ['@babel/preset-react', '@babel/preset-env']
+}
+
+module.exports = {
+  load: path => {
+    const src = readFileSync(path + '.jsx', 'utf8')
+    const transformed = babel.transform(src, babelConfig)
+    return requireFromString(transformed.code)
+  },
+  render: (Component, data) => {
+    return ReactDOMServer.renderToString(React.createElement(Component, data))
+  }
+}

benchmark/engines/swig.js

@@ -0,0 +1,30 @@
+const swig = require('swig')
+
+swig.setFilter('url', function (path) {
+  return `http://example.com${path}`
+})
+
+swig.setFilter('prepend', function (input, arg) {
+  return arg + input
+})
+
+swig.setFilter('append', function (input, arg) {
+  return input + arg
+})
+
+swig.setFilter('inc', function (num) {
+  return Number(num) + 1
+})
+
+swig.setFilter('capitalize', function (str) {
+  return str[0].toUpperCase() + str.slice(1).toLowerCase()
+})
+
+swig.setFilter('upcase', function (str) {
+  return str.toUpperCase()
+})
+
+module.exports = {
+  load: path => swig.compileFile(path + '.swig'),
+  render: (tpl, data) => tpl(data)
+}

benchmark/index.js

@@ -3,13 +3,15 @@ const { tag } = require('./tag')
 const { demo } = require('./demo')
 const { layout } = require('./layout')
 const { memory } = require('./memory')
+const { crossEngines } = require('./cross-engines')
 
 async function main () {
   await output()
   await tag()
   await demo()
   await layout()
   await memory()
+  await crossEngines()
 }
 
 main()

benchmark/layout.js

@@ -18,7 +18,8 @@ const template = `
 `
 
 function layout () {
-  console.log('--- layout ---')
+  console.log('         layout')
+  console.log('------------------------')
   return new Promise(resolve => {
     new Benchmark.Suite('layout')
       .add('cache=false', {

benchmark/memory.js

@@ -13,7 +13,8 @@ const engine = new Liquid(engineOptions)
 const SAMPLE_COUNT = 1024
 
 function memory () {
-  console.log('--- memory ---')
+  console.log('         memory')
+  console.log('------------------------')
   html()
   todolist()
 }
@@ -29,11 +30,11 @@ function html () {
     templates.push(engine.parse(str))
   }
   const diff1 = (getHeapStatistics().used_heap_size - base) / SAMPLE_COUNT
-  console.log(`${h(str.length)} lorem-html before GC x ${h(diff1)}/tpl (${SAMPLE_COUNT} instances sampled)`)
+  console.log(`[lorem-html ${h(str.length)}][before GC] ${h(diff1)}/tpl (${SAMPLE_COUNT} runs sampled)`)
 
   global.gc()
   const diff2 = (getHeapStatistics().used_heap_size - base) / SAMPLE_COUNT
-  console.log(`${h(str.length)} lorem-html after GC x ${h(diff2)}/tpl (${SAMPLE_COUNT} instances sampled)`)
+  console.log(`[lorem-html ${h(str.length)}][after GC] ${h(diff2)}/tpl (${SAMPLE_COUNT} runs sampled)`)
 }
 
 function todolist () {
@@ -47,15 +48,15 @@ function todolist () {
     templates.push(engine.parse(str))
   }
   const diff1 = (getHeapStatistics().used_heap_size - base) / SAMPLE_COUNT
-  console.log(`${h(str.length)} todolist before GC x ${h(diff1)}/tpl (${SAMPLE_COUNT} instances sampled)`)
+  console.log(`[todolist ${h(str.length)}][before GC] ${h(diff1)}/tpl (${SAMPLE_COUNT} runs sampled)`)
 
   global.gc()
   const diff2 = (getHeapStatistics().used_heap_size - base) / SAMPLE_COUNT
-  console.log(`${h(str.length)} todolist after GC x ${h(diff2)}/tpl (${SAMPLE_COUNT} instances sampled)`)
+  console.log(`[todolist ${h(str.length)}][after GC] ${h(diff2)}/tpl (${SAMPLE_COUNT} runs sampled)`)
 }
 
 function h (size) {
-  return (size / 1024).toFixed(3) + ' kB'
+  return (size / 1024).toFixed(3) + ' KB'
 }
 
 module.exports = { memory }

benchmark/output.js

@@ -4,7 +4,8 @@ const { Liquid } = require('..')
 const liquid = new Liquid()
 
 function output () {
-  console.log('--- output ---')
+  console.log('         output')
+  console.log('------------------------')
   return new Promise(resolve => {
     new Benchmark.Suite('output')
       .add('literal', test('{{false}}{{"foo"}}{{32.322}}'))