Cleaned up benchmark

.gitignore

@@ -1,4 +1,5 @@
 *.marko.js
 /node_modules
-/static
-/.cache
+/build
+/.cache
+.*

.jshintrc

@@ -3,7 +3,7 @@
         "Promise"
     ],
     "node" : true,
-    "es5" : false,
+    "esnext" : true,
     "browser" : true,
     "boss" : false,
     "curly": false,

benchmark-client/browser.json

@@ -0,0 +1,9 @@
+{
+    "dependencies": [
+        "lodash/lodash.js",
+        "benchmark/benchmark.js",
+        "require: ./components/app",
+        "require-run: ./client",
+        "require-run: ../benchmarks/*/client.js"
+    ]
+}

benchmark-client/client.js

@@ -0,0 +1,19 @@
+var helpers = require('./helpers');
+
+function addBench(libName, factoryFunc) {
+    var benchmark = exports.benchmark;
+    var bench = benchmark.createBench(libName, factoryFunc);
+    benchmark.benches[libName] = bench;
+}
+
+function registerBenchmark(factoryFunc) {
+    var benchmark = factoryFunc(helpers);
+    benchmark.benches = {};
+    exports.benchmark = benchmark;
+}
+
+if (typeof window !== 'undefined') {
+    window.addBench = addBench;
+    window.registerBenchmark = registerBenchmark;
+    window.onMount = function() {};
+}

src/shared/pages/benchmark/components/app/component.js → benchmark-client/components/app/component.js

@@ -1,20 +1,21 @@
-require('./style.css');
-var benchmark = require('~/src/shared/util/benchmark');
-
-var benchmarks = {
-    'search-results': require('./benchmark-search-results')
-};
+var runBenchmark = require('../../runBenchmark');
+var client = require('../../client');
 
 module.exports = {
-    init: function() {
-        this.running = false;
+    onInput: function(input) {
+        this.state = {
+            running: false,
+            benchmarkName: input.benchmark.name
+        };
     },
 
-    handleBenchmarkButtonClick: function(benchmarkName, event, el) {
-        if (this.running) {
+    handleBenchmarkButtonClick: function(event, el) {
+        if (this.state.running) {
             return;
         }
 
+        var benchmarkName = this.state.benchmarkName;
+
         var oldButtonLabel = el.innerHTML;
         el.innerHTML = oldButtonLabel + ' - running...';
 
@@ -23,7 +24,7 @@ module.exports = {
 
         var self = this;
 
-        benchmark(benchmarkName, benchmarks[benchmarkName])
+        runBenchmark(benchmarkName, client.benchmark)
             .on('start', function(event) {
                 resultsEl.innerHTML += 'Running "' + benchmarkName + '"...\n';
             })

benchmark-client/components/app/index.marko

@@ -0,0 +1,11 @@
+<div>
+    <button type="button" onClick("handleBenchmarkButtonClick")>
+        Run benchmark: ${state.benchmarkName}
+    </button>
+
+    <pre ref="results" style="width: 100%; border: 1px solid black;" no-update/>
+
+    <div#mount>
+
+    </div>
+</div>

benchmark-client/components/mount-container/index.marko

@@ -0,0 +1,13 @@
+<script>
+    module.exports = {
+
+    };
+</script>
+
+<div.mount-container ref="foo">
+    <h1>${data.libName}</h1>
+    <div>
+        <div ref="output">
+        </div>
+    </div>
+</div>

src/shared/pages/benchmark/components/app/style.css → benchmark-client/components/mount-container/style.css

@@ -1,5 +1,6 @@
-.benchmark-container {
+.mount-container {
     height: 600px;
     width: 300px;
     overflow: scroll;
+    display: inline-block;
 }

benchmark-client/createRoute.js

@@ -0,0 +1,24 @@
+var template = require('./page.marko');
+
+var isProduction = process.env.NODE_ENV === 'production';
+
+function createRoute(benchmark, routeOptions) {
+    var bundles = [];
+    benchmark.benches.forEach((bench) => {
+        // if (bench.name !== 'marko') {
+        //     return;
+        // }
+        bundles.push(`/build/${benchmark.name}/bundles${isProduction ? '.min' : ''}/${bench.name}.js`);
+    });
+
+    return function(req, res) {
+        res.marko(template, {
+            $global: {
+                benchmark
+            },
+            bundles
+        });
+    };
+}
+
+module.exports = createRoute;

benchmark-client/helpers.js

@@ -0,0 +1,40 @@
+var mountContainer = require('./components/mount-container');
+
+var mountEls = {};
+
+function createMountEl(libName) {
+    var key = libName;
+    var mountWidget = mountContainer.renderSync({
+            libName: libName
+        })
+        .appendTo(document.getElementById('mount'))
+        .getWidget();
+
+    mountEls[key] =  mountWidget.el;
+
+    return mountWidget.getEl('output');
+}
+
+function showSingleMountEl(libName) {
+    var key = libName;
+
+    for (var curKey in mountEls) {
+        var mountEl = mountEls[curKey];
+        if (curKey === key) {
+            mountEl.style.display = 'inline-block';
+        } else {
+            mountEl.style.display = 'none';
+        }
+    }
+}
+
+function showMountEl(libName) {
+    var key = libName;
+
+    var mountEl = mountEls[key];
+    mountEl.style.display = 'inline-block';
+}
+
+exports.createMountEl = createMountEl;
+exports.showSingleMountEl = showSingleMountEl;
+exports.showMountEl = showMountEl;

src/shared/pages/benchmark/template.marko → benchmark-client/page.marko

@@ -1,20 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+
 <lasso-page package-path="./browser.json"/>
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8"/>
-        <title>Benchmarks</title>
+        <title>${out.global.benchmark.name} | Marko Benchmark</title>
         <lasso-head/>
     </head>
     <body>
-        <h1>Benchmarks</h1>
+        <h1>${out.global.benchmark.name} | Marko Benchmark</h1>
 
-        <app/>
+        <app benchmark=out.global.benchmark/>
 
         <!--
         Inject the body <script> tags to include the required client-side code:
         -->
         <lasso-body/>
+        <init-widgets/>
+
+        <for(bundle in data.bundles)>
+            <script src=bundle></script>
+        </for>
 
         <!--
         If launched using the browser-refresh app launcher then a <script>

src/shared/util/benchmark.js → benchmark-client/runBenchmark.js

@@ -16,7 +16,7 @@ function delay(durationMillis) {
     });
 }
 
-module.exports = function(name, options) {
+module.exports = function runBenchmark(name, options) {
 
     var Suite = window.Benchmark.Suite;
     var suite = new Suite(name);
@@ -77,6 +77,7 @@ module.exports = function(name, options) {
                             }
 
                             bench = Object.assign({name: name}, bench);
+                            bench.events = benchEvents;
 
                             suite.add(name, {
                                 // a flag to indicate the benchmark is deferred
@@ -137,6 +138,10 @@ module.exports = function(name, options) {
     function warmup() {
         suiteEvents.emit('warmup');
 
+        benches.forEach(function(bench) {
+            bench.events.emit('warmup');
+        });
+
         var index = 0;
         var totalCount = 100;