krausest · krausest · Sep 8, 2019 · Sep 6, 2019
diff --git a/frameworks/keyed/mikado/index.html b/frameworks/keyed/mikado/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Mikado-"keyed"</title>
+    <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body>
+<div id="main">
+    <div class="container">
+        <div class="jumbotron">
+            <div class="row">
+                <div class="col-md-6">
+                    <h1>Mikado-"keyed"</h1>
+                </div>
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="run" click="run">Create 1,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="runlots" click="runlots">Create 10,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="add" click="add">Append 1,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="update" click="update">Update every 10th row</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="clear" click="clear">Clear</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type="button" class="btn btn-primary btn-block" id="swaprows" click="swaprows">Swap Rows</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <table class="table table-hover table-striped test-data">
+            <tbody id="tbody"></tbody>
+        </table>
+        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+    </div>
+</div>
+<script src="dist/main.js"></script>
+<!--
+<script src="src/config.js"></script>
+<script type="module" src="src/main.js"></script>
+-->
+</body>
+</html>
diff --git a/frameworks/keyed/mikado/package.json b/frameworks/keyed/mikado/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "js-framework-benchmark-mikado",
+  "description": "Web's smartest virtual DOM templating engine.",
+  "homepage": "https://github.com/nextapps-de/mikado/",
+  "author": "Nextapps GmbH",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "src/mikado.js",
+  "js-framework-benchmark": {
+    "frameworkVersionFromPackage": "mikado"
+  },
+  "browser": "src/browser.js",
+  "preferGlobal": false,
+  "bin": {
+    "mikado": "./task/compile.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "scripts": {
+    "compile": "node task/compile && echo Compile Complete. && exit 0",
+    "build": "node task/compile src/template.html && node task/build DEBUG=false ENABLE_CACHE=false BUILD_LIGHT=false && exit 0",
+    "build-prod": "npm run build"
+  },
+  "dependencies": {
+    "mikado": "0.0.69"
+  },
+  "devDependencies": {
+    "google-closure-compiler": "^20190904.0.0-nightly",
+    "html2json": "^1.0.2"
+  }
+}
diff --git a/frameworks/keyed/mikado/src/bench.js b/frameworks/keyed/mikado/src/bench.js
@@ -0,0 +1,26 @@
+const { performance, setTimeout } = window;
+
+let startTime;
+let lastMeasure;
+
+export function startMeasure(name) {
+
+    startTime = performance.now();
+    lastMeasure = name;
+}
+
+export function stopMeasure() {
+
+    const last = lastMeasure;
+
+    if(lastMeasure){
+
+        setTimeout(function(){
+
+            lastMeasure = null;
+
+            console.log(last + " took " + (performance.now() - startTime));
+
+        }, 0);
+    }
+}
diff --git a/frameworks/keyed/mikado/src/config.js b/frameworks/keyed/mikado/src/config.js
@@ -0,0 +1,23 @@
+/**
+ * @define {boolean}
+ */
+
+const DEBUG = false;
+
+/**
+ * @define {boolean}
+ */
+
+const BUILD_LIGHT = false;
+
+/**
+ * @define {boolean}
+ */
+
+const ENABLE_CACHE = false;
+
+/**
+ * @define {string}
+ */
+
+const RELEASE = "browser";
diff --git a/frameworks/keyed/mikado/src/data.js b/frameworks/keyed/mikado/src/data.js
@@ -0,0 +1,39 @@
+const ADJECTIVES = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
+const COLOURS = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+const NOUNS = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+
+const len_ADJECTIVES = ADJECTIVES.length;
+const len_COLOURS = COLOURS.length;
+const len_NOUNS = NOUNS.length;
+
+let _nextId = 1;
+
+export function buildData(count){
+
+    if(count === 1){
+
+        return {
+
+            id: _nextId++,
+            label: ADJECTIVES[_random(len_ADJECTIVES)] + " " + COLOURS[_random(len_COLOURS)] + " " + NOUNS[_random(len_NOUNS)]
+        }
+    }
+
+    const data = new Array(count);
+
+    for(let i = 0; i < count; i++){
+
+        data[i] = {
+
+            id: _nextId++,
+            label: ADJECTIVES[_random(len_ADJECTIVES)] + " " + COLOURS[_random(len_COLOURS)] + " " + NOUNS[_random(len_NOUNS)]
+        };
+    }
+
+    return data;
+}
+
+function _random(max){
+
+    return (Math.random() * max) | 0;
+}
diff --git a/frameworks/keyed/mikado/src/main.js b/frameworks/keyed/mikado/src/main.js
@@ -0,0 +1,66 @@
+"use strict";
+
+import Mikado from "../node_modules/mikado/src/mikado.js";
+import template from "./template.es6.js";
+import { buildData } from "./data.js";
+import { startMeasure, stopMeasure } from "./bench.js";
+
+const root = document.getElementById("tbody");
+const mikado = new Mikado(root, /** @type {Template} */ (template), {
+
+    "store": true,
+    "loose": true,
+    "reuse": false
+
+}).route("run", function(){
+    if(DEBUG) startMeasure("run");
+    mikado.render(buildData(1000));
+    if(DEBUG) stopMeasure();
+})
+.route("runlots", function(){
+    if(DEBUG) startMeasure("runlots");
+    mikado.render(buildData(10000));
+    if(DEBUG) stopMeasure();
+})
+.route("add", function(){
+    if(DEBUG) startMeasure("add");
+    mikado.append(buildData(1000));
+    if(DEBUG) stopMeasure();
+})
+.route("update", function(){
+    if(DEBUG) startMeasure("update");
+    for(let i = 0, item, len = mikado.length; i < len; i += 10){
+        item = mikado.item(i);
+        item.label += " !!!";
+        mikado.update(i);
+    }
+    if(DEBUG) stopMeasure();
+})
+.route("clear", function(){
+    if(DEBUG) startMeasure("clear");
+    mikado.clear();
+    if(DEBUG) stopMeasure();
+})
+.route("swaprows", function(){
+    if(DEBUG) startMeasure("swaprows");
+    mikado.swap(1, 998);
+    if(DEBUG) stopMeasure();
+})
+.route("remove", function(node){
+    if(DEBUG) startMeasure("remove");
+    mikado.remove(node);
+    if(DEBUG) stopMeasure();
+})
+.route("select", function(node){
+    if(DEBUG) startMeasure("select");
+    let selected = mikado.state.selected;
+    if(selected >= 0){
+        selected = mikado.node(selected);
+        if(selected === node) return;
+        selected.className = "";
+    }
+    node.className = "danger";
+    mikado.state.selected = mikado.index(node);
+    if(DEBUG) stopMeasure();
+})
+.listen("click");
diff --git a/frameworks/keyed/mikado/src/template.html b/frameworks/keyed/mikado/src/template.html
@@ -0,0 +1,12 @@
+<tr class="{{this.state.selected === index ? 'danger' : ''}}" root>
+    <td class="col-md-1">{{item.id}}</td>
+    <td class="col-md-4">
+        <a class="lbl" click="select:root">{{item.label}}</a>
+    </td>
+    <td class="col-md-1">
+        <a class="remove" click="remove:root">
+            <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </a>
+    </td>
+    <td class="col-md-6"></td>
+</tr>
diff --git a/frameworks/keyed/mikado/src/type.js b/frameworks/keyed/mikado/src/type.js
@@ -0,0 +1,16 @@
+/** @record */
+function Template() {}
+/** @type {!Template|Array<Template>} */
+Template.prototype.i;
+/** @type {!string|Array<string>} */
+Template.prototype.h;
+/** @type {!string|Array<string>} */
+Template.prototype.x;
+/** @type {!string|Object<string, string>|Array<Object<string, string>>} */
+Template.prototype.s;
+/** @type {!string|Array<string>} */
+Template.prototype.p;
+/** @type {!Object<string, string>} */
+Template.prototype.a;
+/** @type {!string|Array<string>} */
+Template.prototype.c;
diff --git a/frameworks/keyed/mikado/task/build.js b/frameworks/keyed/mikado/task/build.js
@@ -0,0 +1,87 @@
+const child_process = require('child_process');
+const fs = require('fs');
+
+console.log("Start build .....");
+console.log();
+
+fs.existsSync("log") || fs.mkdirSync("log");
+
+const parameter = (function(opt){
+
+    let parameter = '';
+
+    for(let index in opt){
+
+        if(opt.hasOwnProperty(index)){
+
+            parameter += ' --' + index + '=' + opt[index];
+        }
+    }
+
+    return parameter;
+})({
+
+    compilation_level: "ADVANCED_OPTIMIZATIONS", //"WHITESPACE"
+    use_types_for_optimization: true,
+    //new_type_inf: true,
+    jscomp_warning: "newCheckTypes",
+    //jscomp_error: "strictCheckTypes",
+    jscomp_error: "newCheckTypesExtraChecks",
+    generate_exports: true,
+    export_local_property_definitions: true,
+    language_in: "ECMASCRIPT6_STRICT",
+    language_out: "ECMASCRIPT5_STRICT",
+    process_closure_primitives: true,
+    summary_detail_level: 3,
+    warning_level: "VERBOSE",
+    emit_use_strict: true,
+
+    output_manifest: "log/manifest.log",
+    output_module_dependencies: "log/module_dependencies.log",
+    property_renaming_report: "log/property_renaming.log",
+    create_source_map: "log/source_map.log",
+    variable_renaming_report: "log/variable_renaming.log",
+    strict_mode_input: true,
+    assume_function_wrapper: true,
+
+    transform_amd_modules: true,
+    process_common_js_modules: true,
+    module_resolution: "BROWSER",
+    //dependency_mode: "SORT_ONLY",
+    //js_module_root: "./",
+    entry_point: "./src/main.js",
+    //manage_closure_dependencies: true,
+    dependency_mode: "PRUNE_LEGACY",
+    rewrite_polyfills: false,
+
+    isolation_mode: "IIFE"
+    //output_wrapper: "(function(){%output%}());"
+
+    //formatting: "PRETTY_PRINT"
+});
+
+exec("java -jar node_modules/google-closure-compiler-java/compiler.jar" + parameter + " --js='src/**.js' --js='node_modules/mikado/src/mikado.js' --js_output_file='dist/main.js' && exit 0", function(){
+
+    console.log("Build Complete.");
+});
+
+function exec(prompt, callback){
+
+    const child = child_process.exec(prompt, function(err, stdout, stderr){
+
+        if(err){
+
+            console.error(err);
+        }
+        else{
+
+            if(callback){
+
+                callback();
+            }
+        }
+    });
+
+    child.stdout.pipe(process.stdout);
+    child.stderr.pipe(process.stderr);
+}