Add RotorJS (0.3.1) implementation

lib/vnode-immutable-thunk.js

@@ -0,0 +1,230 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vnodeImmutableThunk = f()}})(function(){var define,module,exports;return (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 xtendMutable = require('xtend/mutable');
+var deepEqual = require('deep-equal');
+
+function ImmutableThunk(renderFn, state, proto, equalStates, equalRenderers) {
+    if (!(this instanceof ImmutableThunk)) {
+        return new ImmutableThunk(renderFn, state, proto, equalStates, equalRenderers);
+    }
+
+    var _this = this;
+
+    var proto = proto !== undefined && proto !== null ? proto : {};
+    if (Object.prototype.toString.call(proto) !== '[object Object]') {
+        throw new TypeError('proto must be an object');
+    }
+    xtendMutable(this, proto);
+
+    this.renderFn = renderFn;
+
+    this.state = state;
+
+    if (equalStates === undefined || equalStates === null) {
+        this.equalStates = defaultEqualStates;
+    } else if (equalStates === true) {
+        this.equalStates = justTrue;
+    } else if (equalStates === false) {
+        this.equalStates = justFalse;
+    } else {
+        this.equalStates = equalStates;
+    }
+
+    if (equalRenderers === undefined || equalRenderers === null) {
+        this.equalRenderers = defaultEqualRenders;
+    } else if (equalRenderers === true) {
+        this.equalRenderers = justTrue;
+    } else if (equalRenderers === false) {
+        this.equalRenderers = justFalse;
+    } else {
+        this.equalRenderers = equalRenderers;
+    }
+}
+
+ImmutableThunk.prototype.type = 'Thunk';
+
+ImmutableThunk.prototype.render = function render(previous) {
+    if (shouldUpdate(this, previous)) {
+        return this.renderFn.call(null, this.state);
+    } else {
+        return previous.vnode;
+    }
+};
+
+function defaultEqualStates(first, second) {
+    return deepEqual(first, second, { strict: true });
+}
+
+function defaultEqualRenders(first, second) {
+    return first === second;
+}
+
+function justTrue() {
+    return true;
+}
+
+function justFalse() {
+    return false;
+}
+
+function shouldUpdate(current, previous) {
+   return current === undefined || current === null
+       || previous === undefined || previous === null
+       || previous.type !== 'Thunk'
+       || !current.equalStates(current.state, previous.state)
+       || !current.equalRenderers(current.renderFn, previous.renderFn);
+}
+
+module.exports = ImmutableThunk;
+
+},{"deep-equal":2,"xtend/mutable":5}],2:[function(require,module,exports){
+var pSlice = Array.prototype.slice;
+var objectKeys = require('./lib/keys.js');
+var isArguments = require('./lib/is_arguments.js');
+
+var deepEqual = module.exports = function (actual, expected, opts) {
+  if (!opts) opts = {};
+  // 7.1. All identical values are equivalent, as determined by ===.
+  if (actual === expected) {
+    return true;
+
+  } else if (actual instanceof Date && expected instanceof Date) {
+    return actual.getTime() === expected.getTime();
+
+  // 7.3. Other pairs that do not both pass typeof value == 'object',
+  // equivalence is determined by ==.
+  } else if (!actual || !expected || typeof actual != 'object' && typeof expected != 'object') {
+    return opts.strict ? actual === expected : actual == expected;
+
+  // 7.4. For all other Object pairs, including Array objects, equivalence is
+  // determined by having the same number of owned properties (as verified
+  // with Object.prototype.hasOwnProperty.call), the same set of keys
+  // (although not necessarily the same order), equivalent values for every
+  // corresponding key, and an identical 'prototype' property. Note: this
+  // accounts for both named and indexed properties on Arrays.
+  } else {
+    return objEquiv(actual, expected, opts);
+  }
+}
+
+function isUndefinedOrNull(value) {
+  return value === null || value === undefined;
+}
+
+function isBuffer (x) {
+  if (!x || typeof x !== 'object' || typeof x.length !== 'number') return false;
+  if (typeof x.copy !== 'function' || typeof x.slice !== 'function') {
+    return false;
+  }
+  if (x.length > 0 && typeof x[0] !== 'number') return false;
+  return true;
+}
+
+function objEquiv(a, b, opts) {
+  var i, key;
+  if (isUndefinedOrNull(a) || isUndefinedOrNull(b))
+    return false;
+  // an identical 'prototype' property.
+  if (a.prototype !== b.prototype) return false;
+  //~~~I've managed to break Object.keys through screwy arguments passing.
+  //   Converting to array solves the problem.
+  if (isArguments(a)) {
+    if (!isArguments(b)) {
+      return false;
+    }
+    a = pSlice.call(a);
+    b = pSlice.call(b);
+    return deepEqual(a, b, opts);
+  }
+  if (isBuffer(a)) {
+    if (!isBuffer(b)) {
+      return false;
+    }
+    if (a.length !== b.length) return false;
+    for (i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+  try {
+    var ka = objectKeys(a),
+        kb = objectKeys(b);
+  } catch (e) {//happens when one is a string literal and the other isn't
+    return false;
+  }
+  // having the same number of owned properties (keys incorporates
+  // hasOwnProperty)
+  if (ka.length != kb.length)
+    return false;
+  //the same set of keys (although not necessarily the same order),
+  ka.sort();
+  kb.sort();
+  //~~~cheap key test
+  for (i = ka.length - 1; i >= 0; i--) {
+    if (ka[i] != kb[i])
+      return false;
+  }
+  //equivalent values for every corresponding key, and
+  //~~~possibly expensive deep test
+  for (i = ka.length - 1; i >= 0; i--) {
+    key = ka[i];
+    if (!deepEqual(a[key], b[key], opts)) return false;
+  }
+  return typeof a === typeof b;
+}
+
+},{"./lib/is_arguments.js":3,"./lib/keys.js":4}],3:[function(require,module,exports){
+var supportsArgumentsClass = (function(){
+  return Object.prototype.toString.call(arguments)
+})() == '[object Arguments]';
+
+exports = module.exports = supportsArgumentsClass ? supported : unsupported;
+
+exports.supported = supported;
+function supported(object) {
+  return Object.prototype.toString.call(object) == '[object Arguments]';
+};
+
+exports.unsupported = unsupported;
+function unsupported(object){
+  return object &&
+    typeof object == 'object' &&
+    typeof object.length == 'number' &&
+    Object.prototype.hasOwnProperty.call(object, 'callee') &&
+    !Object.prototype.propertyIsEnumerable.call(object, 'callee') ||
+    false;
+};
+
+},{}],4:[function(require,module,exports){
+exports = module.exports = typeof Object.keys === 'function'
+  ? Object.keys : shim;
+
+exports.shim = shim;
+function shim (obj) {
+  var keys = [];
+  for (var key in obj) keys.push(key);
+  return keys;
+}
+
+},{}],5:[function(require,module,exports){
+module.exports = extend
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function extend(target) {
+    for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i]
+
+        for (var key in source) {
+            if (hasOwnProperty.call(source, key)) {
+                target[key] = source[key]
+            }
+        }
+    }
+
+    return target
+}
+
+},{}]},{},[1])(1)
+});

library-list.js

@@ -27,6 +27,7 @@
     { type: 'naive', id: 'regularjs', url: './regularjs', label: 'DBMON Regularjs' },
     { type: 'naive', id: 'maskjs', url: './mask/index.html', label: 'DBMON MaskJS' },
     { type: 'naive', id: 'matreshkajs', url: './matreshka/index.html', label: 'DBMON Matreshka.js' },
+    { type: 'naive', id: 'rotorjs', url: './rotorjs/index.html', label: 'DBMON RotorJS' },
     { type: 'optimized', id: 'react', url: './react/opt.html', label: 'DBMON React' },
     { type: 'optimized', id: 'angular', url: './angular/opt.html', label: 'DBMON Angular' },
     { type: 'optimized', id: 'angular-light', url: './angular-light/opt.html', label: 'DBMON Angular Light' },
@@ -35,6 +36,7 @@
     { type: 'optimized', id: 'vanilla', url: './vanilla-optimized', label: 'DBMON vanilla' },
     { type: 'optimized', id: 'maskjs', url: './mask/index_opt.html', label: 'DBMON MaskJS' },
     { type: 'optimized', id: 'vue', url: './vue/opt.html', label: 'DBMON Vue.js' },
+    { type: 'optimized', id: 'rotorjs', url: './rotorjs/with_thunks.html', label: 'DBMON RotorJS (with using VnodeImmutableThunk)' },
   ];
 
   function Library() {

readme.md

@@ -30,6 +30,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/
 * [Backbone.js](http://backbonejs.org/)
 * [Knockout.js](http://knockoutjs.com/)
 * [Matreshka.js](http://matreshka.io/)
+* [RotorJS](https://github.com/kuraga/rotorjs)
 
 ## Todo
 

rotorjs/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="description" content="DBMON ROTORJS">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DBMON (RotorJS)</title>
+
+  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css">
+  <link href="../styles.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <div id="dbmon"></div>
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="../lib/rotorjs.js"></script>
+  <script src="../lib/virtual-dom.js"></script>
+  <script src="main.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>

rotorjs/main.es6.jsx.js

@@ -0,0 +1,105 @@
+/** @jsx spreadH */
+'use strict';
+
+/* RotorJS Implementation
+   Written by Alexander Kurakin
+   For RotorJS, see https://github.com/kuraga/rotorjs
+*/
+
+class DbmonApplication extends rotorjs.Application {
+
+  constructor(rootElement) {
+    super(rootElement);
+  }
+
+  start() {
+    let dbmon = new DbmonComponent(this, null, 'dbmon');
+    super.start(dbmon, 'dbmon');
+  }
+
+  stop() {
+    super.stop();
+  }
+}
+
+class DbmonComponent extends rotorjs.Component {
+
+  constructor(application, parent, name) {
+    let initialState = {
+      databases: []
+    };
+    super(application, parent, name, initialState);
+  }
+
+  activate() {
+     super.activate();
+
+     this.loadSamples();
+  }
+
+  deactivate() {
+     super.deactivate();
+  }
+
+  loadSamples() {
+     this.state.set('databases', ENV.generateData().toArray());
+     Monitoring.renderRate.ping();
+     setTimeout(this.loadSamples.bind(this), ENV.timeout);
+  }
+
+  render() {
+    return (
+      <div>
+        <table className="table table-striped latest-data">
+          <tbody>
+            {
+              this.state.databases.map((database) => (
+                <tr key={database.dbname}>
+                  <td className="dbname">
+                    {database.dbname}
+                  </td>
+                  <td className="query-count">
+                    <span className={database.lastSample.countClassName}>
+                      {database.lastSample.nbQueries}
+                    </span>
+                  </td>
+                  {
+                    database.lastSample.topFiveQueries.map((query) => (
+                      <td className={"Query " + query.elapsedClassName}>
+                        {query.formatElapsed}
+                        <div className="popover left">
+                          <div className="popover-content">{query.query}</div>
+                          <div className="arrow"/>
+                        </div>
+                      </td>
+                    ))
+                  }
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+}
+
+let application, rootElement;
+
+window.onload = () => {
+  rootElement = document.getElementById('dbmon');
+  application = new DbmonApplication(rootElement);
+  application.start();
+};
+
+window.onunload = () => {
+  application.stop();
+};
+
+// Dirty fix, see https://github.com/Matt-Esch/virtual-dom/pull/297/files
+var spreadH = function spreadH(tagName, properties, ...children) {
+  return Object.prototype.toString.call(children[0]) === '[object Array]'
+    ? virtualDom.h(tagName, properties, children[0])
+    : virtualDom.h(tagName, properties, children);
+}