Main.html

<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>

main.js

(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' )
});

}());

main.orig.js

(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' )
});

}());

output.main.orig.txt

run took 96.9999999506399
main.js:285 swapRows took 75.40000008884817

output.main.txt

run took 93.40000001247972
main.js:285 swapRows took 7.1000000461936