Skip to content

Instantly share code, notes, and snippets.

@btakita btakita/Main.html
Last active Mar 13, 2018

Embed
What would you like to do?
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<h1>Svelte (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" on: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" on: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" on: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" on:click="partialUpdate()">Update every 10th row</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="clear" on:click="clear()">Clear</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="swaprows" on:click="swapRows()">Swap Rows</button>
</div>
</div>
</div>
</div>
</div>
<table class="table table-hover table-striped test-data">
<tbody>
{{#each store.data as row, num @id}}
<tr class="{{selected === row.id ? 'danger' : ''}}">
<td class="col-md-1">{{row.id}}</td>
<td class="col-md-4">
<a on:click="select(row.id)">{{row.label}}</a>
</td>
<td class="col-md-1"><a on:click="remove(num)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
<td class="col-md-6"></td>
</tr>
{{/each}}
</tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
<script>
import DataStore from './DataStore.js';
const store = new DataStore();
var startTime;
var lastMeasure;
var startMeasure = function(name) {
startTime = performance.now();
lastMeasure = name;
}
var stopMeasure = function() {
var last = lastMeasure;
if (lastMeasure) {
window.setTimeout(function () {
lastMeasure = null;
var stop = performance.now();
console.log(last+" took "+(stop-startTime));
}, 0);
}
}
export default {
data () {
return {
store: store,
selected: undefined
};
},
methods: {
add () {
startMeasure("add");
store.add();
this.set({ store });
stopMeasure();
},
clear () {
startMeasure("clear");
store.clear();
this.set({ store });
stopMeasure();
},
partialUpdate () {
startMeasure("update");
store.update();
this.set({ store });
stopMeasure();
},
remove( num ) {
startMeasure("delete");
store.data.splice( num, 1 );
this.set({ store });
stopMeasure();
},
run () {
startMeasure("run");
store.run();
this.set({ store });
stopMeasure();
},
runLots () {
startMeasure("runLots");
store.runLots();
this.set({ store });
stopMeasure();
},
select ( id ) {
startMeasure("select");
store.select(id);
this.set({ selected: store.selected });
stopMeasure();
},
swapRows () {
startMeasure("swapRows");
store.swapRows();
this.set({ store });
stopMeasure();
}
}
};
</script>
(function () {
'use strict';
function noop() {}
function assign(target) {
var arguments$1 = arguments;
var k,
source,
i = 1,
len = arguments.length;
for (; i < len; i++) {
source = arguments$1[i];
for (k in source) { target[k] = source[k]; }
}
return target;
}
function appendNode(node, target) {
target.appendChild(node);
}
function insertNode(node, target, anchor) {
target.insertBefore(node, anchor);
}
function detachNode(node) {
node.parentNode.removeChild(node);
}
function createElement(name) {
return document.createElement(name);
}
function createText(data) {
return document.createTextNode(data);
}
function addListener(node, event, handler) {
node.addEventListener(event, handler, false);
}
function removeListener(node, event, handler) {
node.removeEventListener(event, handler, false);
}
function setAttribute(node, attribute, value) {
node.setAttribute(attribute, value);
}
function blankObject() {
return Object.create(null);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
this.set = this.get = noop;
if (detach !== false) { this._fragment.u(); }
this._fragment.d();
this._fragment = this._state = null;
}
function _differs(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
function dispatchObservers(component, group, changed, newState, oldState) {
for (var key in group) {
if (!changed[key]) { continue; }
var newValue = newState[key];
var oldValue = oldState[key];
var callbacks = group[key];
if (!callbacks) { continue; }
for (var i = 0; i < callbacks.length; i += 1) {
var callback = callbacks[i];
if (callback.__calling) { continue; }
callback.__calling = true;
callback.call(component, newValue, oldValue);
callback.__calling = false;
}
}
}
function fire(eventName, data) {
var this$1 = this;
var handlers =
eventName in this._handlers && this._handlers[eventName].slice();
if (!handlers) { return; }
for (var i = 0; i < handlers.length; i += 1) {
handlers[i].call(this$1, data);
}
}
function get(key) {
return key ? this._state[key] : this._state;
}
function init(component, options) {
component._observers = { pre: blankObject(), post: blankObject() };
component._handlers = blankObject();
component._bind = options._bind;
component.options = options;
component.root = options.root || component;
component.store = component.root.store || options.store;
}
function observe(key, callback, options) {
var group = options && options.defer
? this._observers.post
: this._observers.pre;
(group[key] || (group[key] = [])).push(callback);
if (!options || options.init !== false) {
callback.__calling = true;
callback.call(this, this._state[key]);
callback.__calling = false;
}
return {
cancel: function() {
var index = group[key].indexOf(callback);
if (~index) { group[key].splice(index, 1); }
}
};
}
function on(eventName, handler) {
if (eventName === 'teardown') { return this.on('destroy', handler); }
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
handlers.push(handler);
return {
cancel: function() {
var index = handlers.indexOf(handler);
if (~index) { handlers.splice(index, 1); }
}
};
}
function set(newState) {
this._set(assign({}, newState));
if (this.root._lock) { return; }
this.root._lock = true;
callAll(this.root._beforecreate);
callAll(this.root._oncreate);
callAll(this.root._aftercreate);
this.root._lock = false;
}
function _set(newState) {
var this$1 = this;
var oldState = this._state,
changed = {},
dirty = false;
for (var key in newState) {
if (this$1._differs(newState[key], oldState[key])) { changed[key] = dirty = true; }
}
if (!dirty) { return; }
this._state = assign({}, oldState, newState);
this._recompute(changed, this._state);
if (this._bind) { this._bind(changed, this._state); }
if (this._fragment) {
dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
this._fragment.p(changed, this._state);
dispatchObservers(this, this._observers.post, changed, this._state, oldState);
}
}
function callAll(fns) {
while (fns && fns.length) { fns.shift()(); }
}
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}
function _unmount() {
if (this._fragment) { this._fragment.u(); }
}
var proto = {
destroy: destroy,
get: get,
fire: fire,
observe: observe,
on: on,
set: set,
teardown: destroy,
_recompute: noop,
_set: _set,
_mount: _mount,
_unmount: _unmount,
_differs: _differs
};
var DataStore = function DataStore() {
this.data = [];
this.selected = undefined;
this.id = 1;
};
DataStore.prototype.buildData = function buildData (count) {
var this$1 = this;
if ( count === void 0 ) count = 1000;
var 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"];
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
var data = [];
for (var i = 0; i < count; i++)
{ data.push({ id: this$1.id++, label: adjectives[this$1._random(adjectives.length)] + " " + colours[this$1._random(colours.length)] + " " + nouns[this$1._random(nouns.length)] }); }
return data;
};
DataStore.prototype._random = function _random (max) {
return Math.round(Math.random() * 1000) % max;
};
DataStore.prototype.select = function select (id) {
this.selected = id;
};
DataStore.prototype.update = function update () {
var this$1 = this;
for (var i=0;i<this.data.length;i+=10) {
this$1.data[i].label += ' !!!';
}
};
DataStore.prototype.delete = function delete$1 (id) {
var idx = this.data.findIndex(function (d) { return d.id==id; });
this.data.splice(idx, 1);
};
DataStore.prototype.run = function run () {
this.data = this.buildData();
};
DataStore.prototype.add = function add () {
this.data.push.apply(this.data, this.buildData(1000));
};
DataStore.prototype.runLots = function runLots () {
this.data = this.buildData(10000);
this.selected = undefined;
};
DataStore.prototype.clear = function clear () {
this.data = [];
this.selected = undefined;
};
DataStore.prototype.swapRows = function swapRows () {
if(this.data.length > 998) {
var a = this.data[1];
this.data[1] = this.data[998];
this.data[998] = a;
}
};
/* src/Main.html generated by Svelte v1.57.2 */
var store = new DataStore();
var startTime;
var lastMeasure;
var startMeasure = function(name) {
startTime = performance.now();
lastMeasure = name;
};
var stopMeasure = function() {
var last = lastMeasure;
if (lastMeasure) {
window.setTimeout(function () {
lastMeasure = null;
var stop = performance.now();
console.log(last+" took "+(stop-startTime));
}, 0);
}
};
function data() {
return {
store: store,
selected: undefined
};
}
var methods = {
add: function add () {
startMeasure("add");
store.add();
this.set({ store: store });
stopMeasure();
},
clear: function clear () {
startMeasure("clear");
store.clear();
this.set({ store: store });
stopMeasure();
},
partialUpdate: function partialUpdate () {
startMeasure("update");
store.update();
this.set({ store: store });
stopMeasure();
},
remove: function remove( num ) {
startMeasure("delete");
store.data.splice( num, 1 );
this.set({ store: store });
stopMeasure();
},
run: function run$$1 () {
startMeasure("run");
store.run();
this.set({ store: store });
stopMeasure();
},
runLots: function runLots () {
startMeasure("runLots");
store.runLots();
this.set({ store: store });
stopMeasure();
},
select: function select ( id ) {
startMeasure("select");
store.select(id);
this.set({ selected: store.selected });
stopMeasure();
},
swapRows: function swapRows () {
startMeasure("swapRows");
store.swapRows();
this.set({ store: store });
stopMeasure();
}
};
function create_main_fragment(component, state) {
var div, div_1, div_2, text_2, div_3, div_4, div_5, button, text_5, div_6, button_1, text_8, div_7, button_2, text_11, div_8, button_3, text_14, div_9, button_4, text_17, div_10, button_5, text_24, table, tbody, each_lookup = blankObject(), each_head, each_last, text_27, span;
function click_handler(event) {
component.run();
}
function click_handler_1(event) {
component.runLots();
}
function click_handler_2(event) {
component.add();
}
function click_handler_3(event) {
component.partialUpdate();
}
function click_handler_4(event) {
component.clear();
}
function click_handler_5(event) {
component.swapRows();
}
var data = state.store.data;
for (var i = 0; i < data.length; i += 1) {
var key = data[i].id;
var each_iteration = each_lookup[key] = create_each_block(component, key, assign({}, state, {
data: data,
row: data[i],
num: i
}));
if (each_last) { each_last.next = each_iteration; }
each_iteration.last = each_last;
each_last = each_iteration;
if (i === 0) { each_head = each_iteration; }
}
function each_destroy(iteration) {
console.debug('each_destroy|debug|1', {iteration, 'iteration.u': iteration.u})
iteration.u();
iteration.d();
each_lookup[iteration.key] = null;
}
return {
c: function create() {
div = createElement("div");
div_1 = createElement("div");
div_2 = createElement("div");
div_2.innerHTML = "<h1>Svelte (keyed)</h1>";
text_2 = createText("\n ");
div_3 = createElement("div");
div_4 = createElement("div");
div_5 = createElement("div");
button = createElement("button");
button.textContent = "Create 1,000 rows";
text_5 = createText("\n ");
div_6 = createElement("div");
button_1 = createElement("button");
button_1.textContent = "Create 10,000 rows";
text_8 = createText("\n ");
div_7 = createElement("div");
button_2 = createElement("button");
button_2.textContent = "Append 1,000 rows";
text_11 = createText("\n ");
div_8 = createElement("div");
button_3 = createElement("button");
button_3.textContent = "Update every 10th row";
text_14 = createText("\n ");
div_9 = createElement("div");
button_4 = createElement("button");
button_4.textContent = "Clear";
text_17 = createText("\n ");
div_10 = createElement("div");
button_5 = createElement("button");
button_5.textContent = "Swap Rows";
text_24 = createText("\n");
table = createElement("table");
tbody = createElement("tbody");
var each_iteration = each_head;
while (each_iteration) {
each_iteration.c();
each_iteration = each_iteration.next;
}
text_27 = createText("\n");
span = createElement("span");
this.h();
},
h: function hydrate() {
div_2.className = "col-md-6";
button.type = "button";
button.className = "btn btn-primary btn-block";
button.id = "run";
addListener(button, "click", click_handler);
div_5.className = "col-sm-6 smallpad";
button_1.type = "button";
button_1.className = "btn btn-primary btn-block";
button_1.id = "runlots";
addListener(button_1, "click", click_handler_1);
div_6.className = "col-sm-6 smallpad";
button_2.type = "button";
button_2.className = "btn btn-primary btn-block";
button_2.id = "add";
addListener(button_2, "click", click_handler_2);
div_7.className = "col-sm-6 smallpad";
button_3.type = "button";
button_3.className = "btn btn-primary btn-block";
button_3.id = "update";
addListener(button_3, "click", click_handler_3);
div_8.className = "col-sm-6 smallpad";
button_4.type = "button";
button_4.className = "btn btn-primary btn-block";
button_4.id = "clear";
addListener(button_4, "click", click_handler_4);
div_9.className = "col-sm-6 smallpad";
button_5.type = "button";
button_5.className = "btn btn-primary btn-block";
button_5.id = "swaprows";
addListener(button_5, "click", click_handler_5);
div_10.className = "col-sm-6 smallpad";
div_4.className = "row";
div_3.className = "col-md-6";
div_1.className = "row";
div.className = "jumbotron";
table.className = "table table-hover table-striped test-data";
span.className = "preloadicon glyphicon glyphicon-remove";
setAttribute(span, "aria-hidden", "true");
},
m: function mount(target, anchor) {
insertNode(div, target, anchor);
appendNode(div_1, div);
appendNode(div_2, div_1);
appendNode(text_2, div_1);
appendNode(div_3, div_1);
appendNode(div_4, div_3);
appendNode(div_5, div_4);
appendNode(button, div_5);
appendNode(text_5, div_4);
appendNode(div_6, div_4);
appendNode(button_1, div_6);
appendNode(text_8, div_4);
appendNode(div_7, div_4);
appendNode(button_2, div_7);
appendNode(text_11, div_4);
appendNode(div_8, div_4);
appendNode(button_3, div_8);
appendNode(text_14, div_4);
appendNode(div_9, div_4);
appendNode(button_4, div_9);
appendNode(text_17, div_4);
appendNode(div_10, div_4);
appendNode(button_5, div_10);
insertNode(text_24, target, anchor);
insertNode(table, target, anchor);
appendNode(tbody, table);
var each_iteration = each_head;
while (each_iteration) {
each_iteration.m(tbody, null);
each_iteration = each_iteration.next;
}
insertNode(text_27, target, anchor);
insertNode(span, target, anchor);
},
p: function update(changed, state) {
var data = state.store.data;
var each_expected = each_head;
var each_last = null;
// <<new
var rendered = {};
var all = {}
// new>>
// var discard_pile = [];
// <<new
var each_all = each_head
while(each_all) {
all[each_all.key] = each_all
each_all = each_all.next
}
// new>>
for (i = 0; i < data.length; i += 1) {
var key = data[i].id;
var each_iteration = each_lookup[key];
var each_context = assign({}, state, {
data: data,
row: data[i],
num: i
});
if (each_iteration) { each_iteration.p(changed, each_context); }
if (each_expected) {
if (key === each_expected.key) {
each_expected = each_expected.next;
} else {
if (each_iteration) {
// // probably a deletion
// while (each_expected && each_expected.key !== key) {
// each_expected.discard = true;
// discard_pile.push(each_expected);
// each_expected = each_expected.next;
// }
// <<new
var next_data = data[i+1];
var next = next_data && each_lookup[next_data.id];
var first = each_iteration.first;
var first_next = next && next.first;
insertNode(first, tbody, first_next);
each_expected = next;
each_iteration.next = each_expected;
var prev_data = data[i-1]
var prev = prev_data && each_lookup[prev_data.id];
prev.next = each_iteration;
// new>>
// each_expected = each_expected && each_expected.next;
// each_iteration.discard = false;
// each_iteration.last = each_last;
// if (!each_expected) { each_iteration.m(tbody, null); }
} else {
// key is being inserted
each_iteration = each_lookup[key] = create_each_block(component, key, each_context);
each_iteration.c();
each_iteration.m(tbody, each_expected.first);
each_expected.last = each_iteration;
each_iteration.next = each_expected;
}
}
} else {
// we're appending from this point forward
if (each_iteration) {
// each_iteration.discard = false;
each_iteration.next = null;
each_iteration.m(tbody, null);
} else {
each_iteration = each_lookup[key] = create_each_block(component, key, each_context);
each_iteration.c();
each_iteration.m(tbody, null);
}
}
// <<new
if (each_iteration) {
rendered[each_iteration.key] = each_iteration
}
// new>>
if (each_last) { each_last.next = each_iteration; }
each_iteration.last = each_last;
each_last = each_iteration;
}
if (each_last) { each_last.next = null; }
// <<new
for (var key_all in all) {
if (!rendered[key_all]) each_destroy(all[key_all]);
}
// new>>
// while (each_expected) {
// each_destroy(each_expected);
// each_expected = each_expected.next;
// }
//
// for (i = 0; i < discard_pile.length; i += 1) {
// var each_iteration = discard_pile[i];
// if (each_iteration.discard) {
// each_destroy(each_iteration);
// }
// }
each_head = each_lookup[data[0] && data[0].id];
},
u: function unmount() {
detachNode(div);
detachNode(text_24);
detachNode(table);
detachNode(text_27);
detachNode(span);
},
d: function destroy$$1() {
removeListener(button, "click", click_handler);
removeListener(button_1, "click", click_handler_1);
removeListener(button_2, "click", click_handler_2);
removeListener(button_3, "click", click_handler_3);
removeListener(button_4, "click", click_handler_4);
removeListener(button_5, "click", click_handler_5);
var each_iteration = each_head;
while (each_iteration) {
each_iteration.d();
each_iteration = each_iteration.next;
}
}
};
}
// (32:8) {{#each store.data as row, num @id}}
function create_each_block(component, key_1, state) {
var row = state.row, num = state.num;
var tr, td, text_value = row.id, text, text_1, td_1, a, text_2_value = row.label, text_2, text_4, td_2, a_1, text_5, td_3, tr_class_value;
return {
key: key_1,
first: null,
c: function create() {
tr = createElement("tr");
td = createElement("td");
text = createText(text_value);
text_1 = createText("\n ");
td_1 = createElement("td");
a = createElement("a");
text_2 = createText(text_2_value);
text_4 = createText("\n ");
td_2 = createElement("td");
a_1 = createElement("a");
a_1.innerHTML = "<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>";
text_5 = createText("\n ");
td_3 = createElement("td");
this.h();
},
h: function hydrate() {
td.className = "col-md-1";
addListener(a, "click", click_handler);
a._svelte = {
component: component,
data: state.data,
num: state.num
};
td_1.className = "col-md-4";
addListener(a_1, "click", click_handler_1);
a_1._svelte = {
component: component,
data: state.data,
num: state.num
};
td_2.className = "col-md-1";
td_3.className = "col-md-6";
tr.className = tr_class_value = state.selected === row.id ? 'danger' : '';
this.first = tr;
},
m: function mount(target, anchor) {
insertNode(tr, target, anchor);
appendNode(td, tr);
appendNode(text, td);
appendNode(text_1, tr);
appendNode(td_1, tr);
appendNode(a, td_1);
appendNode(text_2, a);
appendNode(text_4, tr);
appendNode(td_2, tr);
appendNode(a_1, td_2);
appendNode(text_5, tr);
appendNode(td_3, tr);
},
p: function update(changed, state) {
row = state.row;
num = state.num;
if ((changed.store) && text_value !== (text_value = row.id)) {
text.data = text_value;
}
if ((changed.store) && text_2_value !== (text_2_value = row.label)) {
text_2.data = text_2_value;
}
a._svelte.data = state.data;
a._svelte.num = state.num;
a_1._svelte.data = state.data;
a_1._svelte.num = state.num;
if ((changed.selected || changed.store) && tr_class_value !== (tr_class_value = state.selected === row.id ? 'danger' : '')) {
tr.className = tr_class_value;
}
},
u: function unmount() {
detachNode(tr);
},
d: function destroy$$1() {
removeListener(a, "click", click_handler);
removeListener(a_1, "click", click_handler_1);
}
};
}
function click_handler(event) {
var component = this._svelte.component;
var data = this._svelte.data, num = this._svelte.num, row = data[num];
component.select(row.id);
}
function click_handler_1(event) {
var component = this._svelte.component;
var data = this._svelte.data, num = this._svelte.num, row = data[num];
component.remove(num);
}
function Main(options) {
init(this, options);
this._state = assign(data(), options.data);
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(Main.prototype, methods, proto);
window.s = new Main({
target: document.querySelector( '#main' )
});
}());
(function () {
'use strict';
function noop() {}
function assign(target) {
var arguments$1 = arguments;
var k,
source,
i = 1,
len = arguments.length;
for (; i < len; i++) {
source = arguments$1[i];
for (k in source) { target[k] = source[k]; }
}
return target;
}
function appendNode(node, target) {
target.appendChild(node);
}
function insertNode(node, target, anchor) {
target.insertBefore(node, anchor);
}
function detachNode(node) {
node.parentNode.removeChild(node);
}
function createElement(name) {
return document.createElement(name);
}
function createText(data) {
return document.createTextNode(data);
}
function addListener(node, event, handler) {
node.addEventListener(event, handler, false);
}
function removeListener(node, event, handler) {
node.removeEventListener(event, handler, false);
}
function setAttribute(node, attribute, value) {
node.setAttribute(attribute, value);
}
function blankObject() {
return Object.create(null);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
this.set = this.get = noop;
if (detach !== false) { this._fragment.u(); }
this._fragment.d();
this._fragment = this._state = null;
}
function _differs(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
function dispatchObservers(component, group, changed, newState, oldState) {
for (var key in group) {
if (!changed[key]) { continue; }
var newValue = newState[key];
var oldValue = oldState[key];
var callbacks = group[key];
if (!callbacks) { continue; }
for (var i = 0; i < callbacks.length; i += 1) {
var callback = callbacks[i];
if (callback.__calling) { continue; }
callback.__calling = true;
callback.call(component, newValue, oldValue);
callback.__calling = false;
}
}
}
function fire(eventName, data) {
var this$1 = this;
var handlers =
eventName in this._handlers && this._handlers[eventName].slice();
if (!handlers) { return; }
for (var i = 0; i < handlers.length; i += 1) {
handlers[i].call(this$1, data);
}
}
function get(key) {
return key ? this._state[key] : this._state;
}
function init(component, options) {
component._observers = { pre: blankObject(), post: blankObject() };
component._handlers = blankObject();
component._bind = options._bind;
component.options = options;
component.root = options.root || component;
component.store = component.root.store || options.store;
}
function observe(key, callback, options) {
var group = options && options.defer
? this._observers.post
: this._observers.pre;
(group[key] || (group[key] = [])).push(callback);
if (!options || options.init !== false) {
callback.__calling = true;
callback.call(this, this._state[key]);
callback.__calling = false;
}
return {
cancel: function() {
var index = group[key].indexOf(callback);
if (~index) { group[key].splice(index, 1); }
}
};
}
function on(eventName, handler) {
if (eventName === 'teardown') { return this.on('destroy', handler); }
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
handlers.push(handler);
return {
cancel: function() {
var index = handlers.indexOf(handler);
if (~index) { handlers.splice(index, 1); }
}
};
}
function set(newState) {
this._set(assign({}, newState));
if (this.root._lock) { return; }
this.root._lock = true;
callAll(this.root._beforecreate);
callAll(this.root._oncreate);
callAll(this.root._aftercreate);
this.root._lock = false;
}
function _set(newState) {
var this$1 = this;
var oldState = this._state,
changed = {},
dirty = false;
for (var key in newState) {
if (this$1._differs(newState[key], oldState[key])) { changed[key] = dirty = true; }
}
if (!dirty) { return; }
this._state = assign({}, oldState, newState);
this._recompute(changed, this._state);
if (this._bind) { this._bind(changed, this._state); }
if (this._fragment) {
dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
this._fragment.p(changed, this._state);
dispatchObservers(this, this._observers.post, changed, this._state, oldState);
}
}
function callAll(fns) {
while (fns && fns.length) { fns.shift()(); }
}
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}
function _unmount() {
if (this._fragment) { this._fragment.u(); }
}
var proto = {
destroy: destroy,
get: get,
fire: fire,
observe: observe,
on: on,
set: set,
teardown: destroy,
_recompute: noop,
_set: _set,
_mount: _mount,
_unmount: _unmount,
_differs: _differs
};
var DataStore = function DataStore() {
this.data = [];
this.selected = undefined;
this.id = 1;
};
DataStore.prototype.buildData = function buildData (count) {
var this$1 = this;
if ( count === void 0 ) count = 1000;
var 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"];
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
var data = [];
for (var i = 0; i < count; i++)
{ data.push({ id: this$1.id++, label: adjectives[this$1._random(adjectives.length)] + " " + colours[this$1._random(colours.length)] + " " + nouns[this$1._random(nouns.length)] }); }
return data;
};
DataStore.prototype._random = function _random (max) {
return Math.round(Math.random() * 1000) % max;
};
DataStore.prototype.select = function select (id) {
this.selected = id;
};
DataStore.prototype.update = function update () {
var this$1 = this;
for (var i=0;i<this.data.length;i+=10) {
this$1.data[i].label += ' !!!';
}
};
DataStore.prototype.delete = function delete$1 (id) {
var idx = this.data.findIndex(function (d) { return d.id==id; });
this.data.splice(idx, 1);
};
DataStore.prototype.run = function run () {
this.data = this.buildData();
};
DataStore.prototype.add = function add () {
this.data.push.apply(this.data, this.buildData(1000));
};
DataStore.prototype.runLots = function runLots () {
this.data = this.buildData(10000);
this.selected = undefined;
};
DataStore.prototype.clear = function clear () {
this.data = [];
this.selected = undefined;
};
DataStore.prototype.swapRows = function swapRows () {
if(this.data.length > 998) {
var a = this.data[1];
this.data[1] = this.data[998];
this.data[998] = a;
}
};
/* src/Main.html generated by Svelte v1.57.2 */
var store = new DataStore();
var startTime;
var lastMeasure;
var startMeasure = function(name) {
startTime = performance.now();
lastMeasure = name;
};
var stopMeasure = function() {
var last = lastMeasure;
if (lastMeasure) {
window.setTimeout(function () {
lastMeasure = null;
var stop = performance.now();
console.log(last+" took "+(stop-startTime));
}, 0);
}
};
function data() {
return {
store: store,
selected: undefined
};
}
var methods = {
add: function add () {
startMeasure("add");
store.add();
this.set({ store: store });
stopMeasure();
},
clear: function clear () {
startMeasure("clear");
store.clear();
this.set({ store: store });
stopMeasure();
},
partialUpdate: function partialUpdate () {
startMeasure("update");
store.update();
this.set({ store: store });
stopMeasure();
},
remove: function remove( num ) {
startMeasure("delete");
store.data.splice( num, 1 );
this.set({ store: store });
stopMeasure();
},
run: function run$$1 () {
startMeasure("run");
store.run();
this.set({ store: store });
stopMeasure();
},
runLots: function runLots () {
startMeasure("runLots");
store.runLots();
this.set({ store: store });
stopMeasure();
},
select: function select ( id ) {
startMeasure("select");
store.select(id);
this.set({ selected: store.selected });
stopMeasure();
},
swapRows: function swapRows () {
startMeasure("swapRows");
store.swapRows();
this.set({ store: store });
stopMeasure();
}
};
function create_main_fragment(component, state) {
var div, div_1, div_2, text_2, div_3, div_4, div_5, button, text_5, div_6, button_1, text_8, div_7, button_2, text_11, div_8, button_3, text_14, div_9, button_4, text_17, div_10, button_5, text_24, table, tbody, each_lookup = blankObject(), each_head, each_last, text_27, span;
function click_handler(event) {
component.run();
}
function click_handler_1(event) {
component.runLots();
}
function click_handler_2(event) {
component.add();
}
function click_handler_3(event) {
component.partialUpdate();
}
function click_handler_4(event) {
component.clear();
}
function click_handler_5(event) {
component.swapRows();
}
var data = state.store.data;
for (var i = 0; i < data.length; i += 1) {
var key = data[i].id;
var each_iteration = each_lookup[key] = create_each_block(component, key, assign({}, state, {
data: data,
row: data[i],
num: i
}));
if (each_last) { each_last.next = each_iteration; }
each_iteration.last = each_last;
each_last = each_iteration;
if (i === 0) { each_head = each_iteration; }
}
function each_destroy(iteration) {
iteration.u();
iteration.d();
each_lookup[iteration.key] = null;
}
return {
c: function create() {
div = createElement("div");
div_1 = createElement("div");
div_2 = createElement("div");
div_2.innerHTML = "<h1>Svelte (keyed)</h1>";
text_2 = createText("\n ");
div_3 = createElement("div");
div_4 = createElement("div");
div_5 = createElement("div");
button = createElement("button");
button.textContent = "Create 1,000 rows";
text_5 = createText("\n ");
div_6 = createElement("div");
button_1 = createElement("button");
button_1.textContent = "Create 10,000 rows";
text_8 = createText("\n ");
div_7 = createElement("div");
button_2 = createElement("button");
button_2.textContent = "Append 1,000 rows";
text_11 = createText("\n ");
div_8 = createElement("div");
button_3 = createElement("button");
button_3.textContent = "Update every 10th row";
text_14 = createText("\n ");
div_9 = createElement("div");
button_4 = createElement("button");
button_4.textContent = "Clear";
text_17 = createText("\n ");
div_10 = createElement("div");
button_5 = createElement("button");
button_5.textContent = "Swap Rows";
text_24 = createText("\n");
table = createElement("table");
tbody = createElement("tbody");
var each_iteration = each_head;
while (each_iteration) {
each_iteration.c();
each_iteration = each_iteration.next;
}
text_27 = createText("\n");
span = createElement("span");
this.h();
},
h: function hydrate() {
div_2.className = "col-md-6";
button.type = "button";
button.className = "btn btn-primary btn-block";
button.id = "run";
addListener(button, "click", click_handler);
div_5.className = "col-sm-6 smallpad";
button_1.type = "button";
button_1.className = "btn btn-primary btn-block";
button_1.id = "runlots";
addListener(button_1, "click", click_handler_1);
div_6.className = "col-sm-6 smallpad";
button_2.type = "button";
button_2.className = "btn btn-primary btn-block";
button_2.id = "add";
addListener(button_2, "click", click_handler_2);
div_7.className = "col-sm-6 smallpad";
button_3.type = "button";
button_3.className = "btn btn-primary btn-block";
button_3.id = "update";
addListener(button_3, "click", click_handler_3);
div_8.className = "col-sm-6 smallpad";
button_4.type = "button";
button_4.className = "btn btn-primary btn-block";
button_4.id = "clear";
addListener(button_4, "click", click_handler_4);
div_9.className = "col-sm-6 smallpad";
button_5.type = "button";
button_5.className = "btn btn-primary btn-block";
button_5.id = "swaprows";
addListener(button_5, "click", click_handler_5);
div_10.className = "col-sm-6 smallpad";
div_4.className = "row";
div_3.className = "col-md-6";
div_1.className = "row";
div.className = "jumbotron";
table.className = "table table-hover table-striped test-data";
span.className = "preloadicon glyphicon glyphicon-remove";
setAttribute(span, "aria-hidden", "true");
},
m: function mount(target, anchor) {
insertNode(div, target, anchor);
appendNode(div_1, div);
appendNode(div_2, div_1);
appendNode(text_2, div_1);
appendNode(div_3, div_1);
appendNode(div_4, div_3);
appendNode(div_5, div_4);
appendNode(button, div_5);
appendNode(text_5, div_4);
appendNode(div_6, div_4);
appendNode(button_1, div_6);
appendNode(text_8, div_4);
appendNode(div_7, div_4);
appendNode(button_2, div_7);
appendNode(text_11, div_4);
appendNode(div_8, div_4);
appendNode(button_3, div_8);
appendNode(text_14, div_4);
appendNode(div_9, div_4);
appendNode(button_4, div_9);
appendNode(text_17, div_4);
appendNode(div_10, div_4);
appendNode(button_5, div_10);
insertNode(text_24, target, anchor);
insertNode(table, target, anchor);
appendNode(tbody, table);
var each_iteration = each_head;
while (each_iteration) {
each_iteration.m(tbody, null);
each_iteration = each_iteration.next;
}
insertNode(text_27, target, anchor);
insertNode(span, target, anchor);
},
p: function update(changed, state) {
var data = state.store.data;
var each_expected = each_head;
var each_last = null;
var discard_pile = [];
for (i = 0; i < data.length; i += 1) {
var key = data[i].id;
var each_iteration = each_lookup[key];
var each_context = assign({}, state, {
data: data,
row: data[i],
num: i
});
if (each_iteration) { each_iteration.p(changed, each_context); }
if (each_expected) {
if (key === each_expected.key) {
each_expected = each_expected.next;
} else {
if (each_iteration) {
// probably a deletion
while (each_expected && each_expected.key !== key) {
each_expected.discard = true;
discard_pile.push(each_expected);
each_expected = each_expected.next;
}
each_expected = each_expected && each_expected.next;
each_iteration.discard = false;
each_iteration.last = each_last;
if (!each_expected) { each_iteration.m(tbody, null); }
} else {
// key is being inserted
each_iteration = each_lookup[key] = create_each_block(component, key, each_context);
each_iteration.c();
each_iteration.m(tbody, each_expected.first);
each_expected.last = each_iteration;
each_iteration.next = each_expected;
}
}
} else {
// we're appending from this point forward
if (each_iteration) {
each_iteration.discard = false;
each_iteration.next = null;
each_iteration.m(tbody, null);
} else {
each_iteration = each_lookup[key] = create_each_block(component, key, each_context);
each_iteration.c();
each_iteration.m(tbody, null);
}
}
if (each_last) { each_last.next = each_iteration; }
each_iteration.last = each_last;
each_last = each_iteration;
}
if (each_last) { each_last.next = null; }
while (each_expected) {
each_destroy(each_expected);
each_expected = each_expected.next;
}
for (i = 0; i < discard_pile.length; i += 1) {
var each_iteration = discard_pile[i];
if (each_iteration.discard) {
each_destroy(each_iteration);
}
}
each_head = each_lookup[data[0] && data[0].id];
},
u: function unmount() {
detachNode(div);
detachNode(text_24);
detachNode(table);
detachNode(text_27);
detachNode(span);
},
d: function destroy$$1() {
removeListener(button, "click", click_handler);
removeListener(button_1, "click", click_handler_1);
removeListener(button_2, "click", click_handler_2);
removeListener(button_3, "click", click_handler_3);
removeListener(button_4, "click", click_handler_4);
removeListener(button_5, "click", click_handler_5);
var each_iteration = each_head;
while (each_iteration) {
each_iteration.d();
each_iteration = each_iteration.next;
}
}
};
}
// (32:8) {{#each store.data as row, num @id}}
function create_each_block(component, key_1, state) {
var row = state.row, num = state.num;
var tr, td, text_value = row.id, text, text_1, td_1, a, text_2_value = row.label, text_2, text_4, td_2, a_1, text_5, td_3, tr_class_value;
return {
key: key_1,
first: null,
c: function create() {
tr = createElement("tr");
td = createElement("td");
text = createText(text_value);
text_1 = createText("\n ");
td_1 = createElement("td");
a = createElement("a");
text_2 = createText(text_2_value);
text_4 = createText("\n ");
td_2 = createElement("td");
a_1 = createElement("a");
a_1.innerHTML = "<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>";
text_5 = createText("\n ");
td_3 = createElement("td");
this.h();
},
h: function hydrate() {
td.className = "col-md-1";
addListener(a, "click", click_handler);
a._svelte = {
component: component,
data: state.data,
num: state.num
};
td_1.className = "col-md-4";
addListener(a_1, "click", click_handler_1);
a_1._svelte = {
component: component,
data: state.data,
num: state.num
};
td_2.className = "col-md-1";
td_3.className = "col-md-6";
tr.className = tr_class_value = state.selected === row.id ? 'danger' : '';
this.first = tr;
},
m: function mount(target, anchor) {
insertNode(tr, target, anchor);
appendNode(td, tr);
appendNode(text, td);
appendNode(text_1, tr);
appendNode(td_1, tr);
appendNode(a, td_1);
appendNode(text_2, a);
appendNode(text_4, tr);
appendNode(td_2, tr);
appendNode(a_1, td_2);
appendNode(text_5, tr);
appendNode(td_3, tr);
},
p: function update(changed, state) {
row = state.row;
num = state.num;
if ((changed.store) && text_value !== (text_value = row.id)) {
text.data = text_value;
}
if ((changed.store) && text_2_value !== (text_2_value = row.label)) {
text_2.data = text_2_value;
}
a._svelte.data = state.data;
a._svelte.num = state.num;
a_1._svelte.data = state.data;
a_1._svelte.num = state.num;
if ((changed.selected || changed.store) && tr_class_value !== (tr_class_value = state.selected === row.id ? 'danger' : '')) {
tr.className = tr_class_value;
}
},
u: function unmount() {
detachNode(tr);
},
d: function destroy$$1() {
removeListener(a, "click", click_handler);
removeListener(a_1, "click", click_handler_1);
}
};
}
function click_handler(event) {
var component = this._svelte.component;
var data = this._svelte.data, num = this._svelte.num, row = data[num];
component.select(row.id);
}
function click_handler_1(event) {
var component = this._svelte.component;
var data = this._svelte.data, num = this._svelte.num, row = data[num];
component.remove(num);
}
function Main(options) {
init(this, options);
this._state = assign(data(), options.data);
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(Main.prototype, methods, proto);
window.s = new Main({
target: document.querySelector( '#main' )
});
}());
run took 96.9999999506399
main.js:285 swapRows took 75.40000008884817
run took 93.40000001247972
main.js:285 swapRows took 7.1000000461936
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.