Skip to content

Instantly share code, notes, and snippets.

@marc3lsk

marc3lsk/index.html

Last active February 12, 2018 15:15
Show Gist options
  • Save marc3lsk/8d0c4a336671372a2630443b20227fcd to your computer and use it in GitHub Desktop.
Save marc3lsk/8d0c4a336671372a2630443b20227fcd to your computer and use it in GitHub Desktop.
Download ZIP
celljs benchmark
Raw
index.html
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.celljs.org/cell.js"></script>
<script>
//https://github.com/StephanHoyer/smoke-signal
function signal (options) {
var listeners = []
var api = {
push: function (listener) {
if (listeners.indexOf(listener) < 0) {
listeners.push(listener)
}
return {
pause: function () {
api.pull(listener)
},
resume: function () {
api.push(listener)
}
}
},
pull: function (listener) {
var index = listeners.indexOf(listener)
if (index > -1) {
listeners.splice(index, 1)
}
return api
},
once: function (listener) {
var handler = api.push(function() {
listener.apply(null, arguments)
handler.pause()
});
return handler
},
trigger: function () {
var args = arguments;
[].concat(listeners).map(function (listener) {
try {
listener.apply(null, args)
} catch (e) {
if (options && options.logExceptions) {
console.error(e)
}
}
})
return api
},
clear: function () {
listeners = []
}
}
return api
}
var redraw = signal();
function tr(state) {
return function(item) {
return {
$type: "tr"
, $components: [{
$type: "td"
, class: "col-md-1"
, $text: item.id
}
, {
$type: "td"
, class: "col-md-4"
, $text: item.label
}
, {
$type: "td"
, class: "col-md-1"
, $components: [{
$type: "button"
, type: "button"
, $text: "X"
, onclick: function() {
state.items = state.items.filter(x => x.id != item.id);
redraw.trigger();
}
}]
}
, {
$type: "td"
, class: "col-md-6"
}
]
}
}
};
function table(state) {
function renderBody(state) {
this.$components = [{
$type: "tbody"
, $components: state.items.map(tr(state))
}];
}
return {
$type: "table"
, class: "table table-hover table-striped test-data"
, $init: function() {
var that = this;
renderBody.call(that, state);
redraw.push(function() {
renderBody.call(that, state);
});
}
}
};
function init(state) {
return {
$cell: true
, id: "main"
, $components: [{
class: "container"
, $components: [{
class: "jumbotron"
, $components: [{
class: "row"
, $components: [{
class: "col-md-6"
, $components: [{
$type: "h1"
, $text: "cell"
}]
}
, {
class: "col-md-6"
, $components: [{
class: "row"
, $components: [{
class: "col-sm-6 smallpad"
, $components: [{
$type: "button"
, type: "button"
, $text: "Create 1,000 rows"
, onclick: function() {
state.items = [];
for (var i = 0; i < 1000; i++) {
state.items.push({
id: state.items.length
, label: Math.random()
});
}
redraw.trigger();
}
}
, {
$type: "button"
, type: "button"
, $text: "Create 10,000 rows"
, onclick: function() {
state.items = [];
for (var i = 0; i < 10000; i++) {
state.items.push({
id: state.items.length
, label: Math.random()
});
}
redraw.trigger();
}
}
, {
$type: "button"
, type: "button"
, $text: "Append 1,000 rows"
, onclick: function() {
for (var i = 0; i < 1000; i++) {
state.items.push({
id: state.items.length
, label: Math.random()
});
}
redraw.trigger();
}
}
, {
$type: "button"
, type: "button"
, $text: "Update every 10th row"
, disabled: true
}
, {
$type: "button"
, type: "button"
, $text: "Clear"
, onclick: function() {
state.items = [];
redraw.trigger();
}
}
, {
$type: "button"
, type: "button"
, $text: "Swap Rows"
, disabled: true
}
]
}]
}]
}
]
}]
}
, table(state)
]
}]
}
};
var app = init({
items: []
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment