@danielkalen/simplybind
Version:
Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.
396 lines (384 loc) • 9.68 kB
JavaScript
Vue.config.async = false;
new TestSuite({
'title': 'Input Update',
'subtitle': 'Update the value of an input field 10,000 times',
'measureMethod': 'sync',
'warmUps': 100,
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<input type='text' v-model='prop' />");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Input x100 Update',
'subtitle': 'Update the value of 100 input fields 1,000 times',
'measureMethod': 'sync',
'timesToRun': 1000,
'setupFn': function(container$) {
var _, currentValue, i, inputs;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
inputs = (function() {
var j, results;
results = [];
for (i = j = 1; j <= 100; i = ++j) {
results.push("<input type='text' v-model='prop' />");
}
return results;
})();
container$.html("<div>" + (inputs.join('')) + "</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Input Transform',
'subtitle': 'Update the value of an input field 10,000 times and apply a transform function',
'measureMethod': 'sync',
'warmUps': 100,
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<input type='text' v-model='prop | customupper' />");
Vue.filter('customupper', function(value) {
return value.toUpperCase();
});
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Div HTML Update',
'subtitle': 'Update the content of a div 10,000 times',
'measureMethod': 'sync',
'warmUps': 10000,
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<div>{{{prop}}}</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Div HTML Same Update',
'subtitle': 'Update the content of a div with the same value 10,000 times',
'measureMethod': 'sync',
'warmUps': 10000,
'timesToRun': 10000,
'setupFn': function(container$) {
var _;
_ = this;
this.obj = {
'prop': 'value'
};
container$.html("<div>{{{prop}}}</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
return delete this.app;
},
'testFn': function() {
return this.obj.prop = 'value';
}
});
new TestSuite({
'title': 'Div HTML Placeholder',
'subtitle': 'Update a placeholder in the content of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<div>Current {{{prop}}} Works.</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Div HTML 250 Placeholders',
'subtitle': 'Update 250 placeholders in the content of a div 1,000 times',
'measureMethod': 'sync',
'warmUps': 100,
'timesToRun': 1000,
'setupFn': function(container$) {
var _, currentValue, value;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
value = '{{{prop}}}+\" \"+'.repeat(250);
container$.html("<div>" + value + "\"\"</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Div Text Update',
'subtitle': 'Update the textContent of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<div>{{prop}}</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
return delete this.app;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Div Text Placeholder',
'subtitle': 'Update a placeholder in the textContent of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
container$.html("<div>Current {{prop}} Works.</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});
new TestSuite({
'title': 'Create 1k DOM Els',
'subtitle': 'Create 1000 elements from array & insert into a div',
'measureMethod': 'sync',
'warmUps': 10,
'timesToRun': 10,
'setupFn': function(container$) {
var _;
this.obj = {
'divs': []
};
this.offset = 0;
_ = this;
container$.html("<div v-for='value in divs'>{{value}}</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
var i;
this.obj.divs = (function() {
var j, results;
results = [];
for (i = j = 1; j <= 1000; i = ++j) {
results.push(i + this.offset);
}
return results;
}).call(this);
this.offset += 1000;
}
});
new TestSuite({
'title': 'Update 1k DOM Els',
'subtitle': 'Update 1000 existing elements 100 times',
'measureMethod': 'sync',
'timesToRun': 100,
'setupFn': function(container$) {
var _, currentValue, i;
this.obj = {
'prop': 'value',
'divs': (function() {
var j, results;
results = [];
for (i = j = 1; j <= 1000; i = ++j) {
results.push(i);
}
return results;
})()
};
currentValue = 0;
_ = this;
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
container$.html("<div v-for='value in divs'>{{prop}}</div>");
return this.app = new Vue({
'el': container$.children()[0],
'data': this.obj
});
},
'teardownFn': function(container$) {
this.app.$destroy();
container$.empty();
delete this.obj;
delete this.app;
return delete this.getNewValue;
},
'testFn': function() {
return this.obj.prop = this.getNewValue();
}
});