Svelte.js & Google Closure Compiler

README.md

Exploring making the generated code from Svelte.js more compatible with Google Closure Compiler for even smaller bundle sizes.

Results:

ls -lh dist/

1.9K  svelte-annotated-closure.js
4.4K  svelte-annotated-uglify.js
2.4K  svelte-orginal-closure.js
4.4K  svelte-original-uglify.js

(sizes after removing Uglify's --beautify and Closure's --formatting=PRETTY_PRINT options)

counter.html

<p>Count: {{count}}</p>
<button on:click='set({ count: count + 1 })'>+1</button>

<script>
  export default {
    data () {
      return {
        count: 0
      };
    }
  };
</script>

dist-svelte-annotated-closure.js

'use strict';
function h(b, c) {
  this.c = b;
  this.l = c;
  this.b = this.b.bind(this);
}
h.prototype.b = function() {
  this.c = this.l.get();
  this.l.set({count:this.c.count + 1});
};
h.prototype.p = function(b, c) {
  b.count && (this.j.data = c.count);
};
h.prototype.d = function() {
  this.a.removeEventListener("click", this.b, !1);
};
function l(b) {
  this.c = {u:Object.create(null), s:Object.create(null)};
  Object.create(null);
  this.g = b.g;
  this.options = b;
  this.root = b.root || this;
  this.store = this.root.store || b.store;
  this.a = m({count:0}, b.data);
  this.b = new h(this.a, this);
  if (b.target) {
    var c = this.b;
    c.f = document.createElement("p");
    c.m = document.createTextNode("Count: ");
    c.j = document.createTextNode(c.c.count);
    c.o = document.createTextNode("\n");
    c.a = document.createElement("button");
    c.a.textContent = "+1";
    c.a.addEventListener("click", c.b, !1);
    c = this.b;
    var d = b.target;
    b = b.anchor || null;
    d.insertBefore(c.f, b);
    c.f.appendChild(c.m);
    c.f.appendChild(c.j);
    d.insertBefore(c.o, b);
    d.insertBefore(c.a, b);
  }
}
n(l, p);
l.prototype.f = t;
function n(b, c) {
  function d() {
  }
  d.prototype = c.prototype;
  b.B = c.prototype;
  b.prototype = new d;
  b.prototype.constructor = b;
}
function m(b, c) {
  for (var d, g, f = 1, e = arguments.length; f < e; f++) {
    for (d in g = arguments[f], g) {
      b[d] = g[d];
    }
  }
  return b;
}
function p() {
}
p.prototype.get = function(b) {
  return b ? this.a[b] : this.a;
};
p.prototype.set = function(b) {
  b = m({}, b);
  var c = this.a, d = {}, g = !1, f;
  for (f in b) {
    var e = b[f];
    (e !== c[f] || e && "object" === typeof e || "function" === typeof e) && (d[f] = g = !0);
  }
  g && (this.a = m({}, c, b), this.f(d, this.a), this.g && this.g(d, this.a), this.b && (u(this, this.c.u, d, this.a, c), this.b.p(d, this.a), u(this, this.c.s, d, this.a, c)));
  this.root.i || (this.root.i = !0, v(this.root.w), v(this.root.A), v(this.root.v), this.root.i = !1);
};
function t() {
}
function v(b) {
  for (; b && b.length;) {
    b.pop()();
  }
}
function u(b, c, d, g, f) {
  for (var e in c) {
    if (d[e]) {
      var w = g[e], x = f[e], q = c[e];
      if (q) {
        for (var r = 0; r < q.length; r += 1) {
          var k = q[r];
          k.h || (k.h = !0, k.call(b, w, x), k.h = !1);
        }
      }
    }
  }
}
var y = new l({target:document.querySelector("main")});
window.a = y;

dist-svelte-annotated-uglify.js

var svelte = {};

svelte.State;

var Fragment = function() {};

function data() {
    return {
        count: 0
    };
}

function MainFragment(t, e) {
    this.state = t, this.component = e, this.click_handler = this.click_handler.bind(this), 
    this._p, this._text, this._text_1, this._text_2, this._button;
}

function App(t) {
    init(this, t), this._state = assign(data(), t.data), this._fragment = new MainFragment(this._state, this), 
    t.target && (this._fragment.c(), this._fragment.m(t.target, t.anchor || null));
}

function inherits(t, e) {
    function n() {}
    n.prototype = e.prototype, t.superClass_ = e.prototype, t.prototype = new n(), t.prototype.constructor = t;
}

function createElement(t) {
    return document.createElement(t);
}

function createText(t) {
    return document.createTextNode(t);
}

function addListener(t, e, n) {
    t.addEventListener(e, n, !1);
}

function insertNode(t, e, n) {
    e.insertBefore(t, n);
}

function appendNode(t, e) {
    e.appendChild(t);
}

function detachNode(t) {
    t.parentNode.removeChild(t);
}

function removeListener(t, e, n) {
    t.removeEventListener(e, n, !1);
}

function init(t, e) {
    t._observers = {
        pre: blankObject(),
        post: blankObject()
    }, t._handlers = blankObject(), t._bind = e._bind, t.options = e, t.root = e.root || t, 
    t.store = t.root.store || e.store;
}

function assign(t, e) {
    for (var n, o, i = 1, r = arguments.length; i < r; i++) {
        o = arguments[i];
        for (n in o) t[n] = o[n];
    }
    return t;
}

function Component() {}

function noop() {}

function blankObject() {
    return Object.create(null);
}

function callAll(t) {
    for (;t && t.length; ) t.pop()();
}

function differs(t, e) {
    return t !== e || t && "object" == typeof t || "function" == typeof t;
}

function dispatchObservers(t, e, n, o, i) {
    for (var r in e) if (n[r]) {
        var s = o[r], a = i[r], c = e[r];
        if (c) for (var p = 0; p < c.length; p += 1) {
            var h = c[p];
            h.__calling || (h.__calling = !0, h.call(t, s, a), h.__calling = !1);
        }
    }
}

Fragment.prototype.c = function() {}, Fragment.prototype.h = function() {}, Fragment.prototype.m = function() {}, 
Fragment.prototype.p = function() {}, Fragment.prototype.u = function() {}, Fragment.prototype.d = function() {}, 
MainFragment.prototype.click_handler = function(t) {
    this.state = this.component.get(), this.component.set({
        count: this.state.count + 1
    });
}, MainFragment.prototype.c = function() {
    this._p = createElement("p"), this._text = createText("Count: "), this._text_1 = createText(this.state.count), 
    this._text_2 = createText("\n"), this._button = createElement("button"), this._button.textContent = "+1", 
    this.h();
}, MainFragment.prototype.h = function() {
    addListener(this._button, "click", this.click_handler);
}, MainFragment.prototype.m = function(t, e) {
    insertNode(this._p, t, e), appendNode(this._text, this._p), appendNode(this._text_1, this._p), 
    insertNode(this._text_2, t, e), insertNode(this._button, t, e);
}, MainFragment.prototype.p = function(t, e) {
    t.count && (this._text_1.data = e.count);
}, MainFragment.prototype.u = function() {
    detachNode(this._p), detachNode(this._text_2), detachNode(this._button);
}, MainFragment.prototype.d = function() {
    removeListener(this._button, "click", this.click_handler);
}, inherits(App, Component), App.prototype._recompute = noop, Component.prototype.destroy = function(t) {
    this.destroy = noop, this.fire("destroy"), this.set = this.get = noop, !1 !== t && this._fragment.u(), 
    this._fragment.d(), this._fragment = this._state = null;
}, Component.prototype.get = function(t) {
    return t ? this._state[t] : this._state;
}, Component.prototype.fire = function(t, e) {
    var n = t in this._handlers && this._handlers[t].slice();
    if (n) for (var o = 0; o < n.length; o += 1) n[o].call(this, e);
}, Component.prototype.observe = function(t, e, n) {
    var o = n && n.defer ? this._observers.post : this._observers.pre;
    return (o[t] || (o[t] = [])).push(e), n && !1 === n.init || (e.__calling = !0, e.call(this, this._state[t]), 
    e.__calling = !1), {
        cancel: function() {
            var n = o[t].indexOf(e);
            ~n && o[t].splice(n, 1);
        }
    };
}, Component.prototype.on = function(t, e) {
    if ("teardown" === t) return this.on("destroy", e);
    var n = this._handlers[t] || (this._handlers[t] = []);
    return n.push(e), {
        cancel: function() {
            var t = n.indexOf(e);
            ~t && n.splice(t, 1);
        }
    };
}, Component.prototype.set = function(t) {
    this._set(assign({}, t)), this.root._lock || (this.root._lock = !0, callAll(this.root._beforecreate), 
    callAll(this.root._oncreate), callAll(this.root._aftercreate), this.root._lock = !1);
}, Component.prototype._set = function(t) {
    var e = this._state, n = {}, o = !1;
    for (var i in t) differs(t[i], e[i]) && (n[i] = o = !0);
    o && (this._state = assign({}, e, t), this._recompute(n, this._state), this._bind && this._bind(n, this._state), 
    this._fragment && (dispatchObservers(this, this._observers.pre, n, this._state, e), 
    this._fragment.p(n, this._state), dispatchObservers(this, this._observers.post, n, this._state, e)));
}, Component.prototype._mount = function(t, e) {
    this._fragment.m(t, e);
}, Component.prototype._unmount = function() {
    this._fragment && this._fragment.u();
};

var app = new App({
    target: document.querySelector("main")
});

window.app = app;

dist-svelte-original-closure.js

'use strict';
function k(a, b) {
  function c() {
    var a = b.get();
    b.set({count:a.count + 1});
  }
  var d, f, e, h, g;
  return {v:function() {
    d = document.createElement("p");
    f = document.createTextNode("Count: ");
    e = document.createTextNode(a.count);
    h = document.createTextNode("\n");
    g = document.createElement("button");
    g.textContent = "+1";
    this.B();
  }, B:function() {
    g.addEventListener("click", c, !1);
  }, j:function(a, b) {
    a.insertBefore(d, b);
    d.appendChild(f);
    d.appendChild(e);
    a.insertBefore(h, b);
    a.insertBefore(g, b);
  }, p:function(a, b) {
    a.count && (e.data = b.count);
  }, o:function() {
    d.parentNode.removeChild(d);
    h.parentNode.removeChild(h);
    g.parentNode.removeChild(g);
  }, d:function() {
    g.removeEventListener("click", c, !1);
  }};
}
function p(a) {
  this.g = {m:Object.create(null), l:Object.create(null)};
  this.f = Object.create(null);
  this.h = a.h;
  this.options = a;
  this.root = a.root || this;
  this.store = this.root.store || a.store;
  this.a = q({count:0}, a.data);
  this.b = k(this.a, this);
  a.target && (this.b.v(), this.b.j(a.target, a.anchor || null));
}
q(p.prototype, {w:r, get:t, A:u, observe:v, C:w, set:x, L:r, u:y, G:z, I:A});
p.prototype.s = B;
function q(a) {
  for (var b, c, d = 1, f = arguments.length; d < f; d++) {
    for (b in c = arguments[d], c) {
      a[b] = c[b];
    }
  }
  return a;
}
function r(a) {
  this.w = B;
  this.A("destroy");
  this.set = this.get = B;
  !1 !== a && this.b.o();
  this.b.d();
  this.b = this.a = null;
}
function t(a) {
  return a ? this.a[a] : this.a;
}
function u(a, b) {
  if (a = a in this.f && this.f[a].slice()) {
    for (var c = 0; c < a.length; c += 1) {
      a[c].call(this, b);
    }
  }
}
function v(a, b, c) {
  var d = c && c.defer ? this.g.l : this.g.m;
  (d[a] || (d[a] = [])).push(b);
  c && !1 === c.K || (b.c = !0, b.call(this, this.a[a]), b.c = !1);
  return {cancel:function() {
    var c = d[a].indexOf(b);
    ~c && d[a].splice(c, 1);
  }};
}
function w(a, b) {
  if ("teardown" === a) {
    return this.C("destroy", b);
  }
  var c = this.f[a] || (this.f[a] = []);
  c.push(b);
  return {cancel:function() {
    var a = c.indexOf(b);
    ~a && c.splice(a, 1);
  }};
}
function x(a) {
  this.u(q({}, a));
  this.root.i || (this.root.i = !0, C(this.root.F), C(this.root.H), C(this.root.D), this.root.i = !1);
}
function y(a) {
  var b = this.a, c = {}, d = !1, f;
  for (f in a) {
    var e = a[f];
    (e !== b[f] || e && "object" === typeof e || "function" === typeof e) && (c[f] = d = !0);
  }
  d && (this.a = q({}, b, a), this.s(c, this.a), this.h && this.h(c, this.a), this.b && (D(this, this.g.m, c, this.a, b), this.b.p(c, this.a), D(this, this.g.l, c, this.a, b)));
}
function z(a, b) {
  this.b.j(a, b);
}
function A() {
  this.b && this.b.o();
}
function B() {
}
function C(a) {
  for (; a && a.length;) {
    a.pop()();
  }
}
function D(a, b, c, d, f) {
  for (var e in b) {
    if (c[e]) {
      var h = d[e], g = f[e], m = b[e];
      if (m) {
        for (var n = 0; n < m.length; n += 1) {
          var l = m[n];
          l.c || (l.c = !0, l.call(a, h, g), l.c = !1);
        }
      }
    }
  }
}
var E = new p({target:document.querySelector("main")});
window.J = E;

dist-svelte-original-uglify.js

function data() {
    return {
        count: 0
    };
}

function create_main_fragment(t, e) {
    var n, r, i, o, s;
    function a(t) {
        var n = e.get();
        e.set({
            count: n.count + 1
        });
    }
    return {
        c: function() {
            n = createElement("p"), r = createText("Count: "), i = createText(t.count), o = createText("\n"), 
            (s = createElement("button")).textContent = "+1", this.h();
        },
        h: function() {
            addListener(s, "click", a);
        },
        m: function(t, e) {
            insertNode(n, t, e), appendNode(r, n), appendNode(i, n), insertNode(o, t, e), insertNode(s, t, e);
        },
        p: function(t, e) {
            t.count && (i.data = e.count);
        },
        u: function() {
            detachNode(n), detachNode(o), detachNode(s);
        },
        d: function() {
            removeListener(s, "click", a);
        }
    };
}

function App(t) {
    init(this, t), this._state = assign(data(), t.data), this._fragment = create_main_fragment(this._state, this), 
    t.target && (this._fragment.c(), this._fragment.m(t.target, t.anchor || null));
}

function createElement(t) {
    return document.createElement(t);
}

function createText(t) {
    return document.createTextNode(t);
}

function addListener(t, e, n) {
    t.addEventListener(e, n, !1);
}

function insertNode(t, e, n) {
    e.insertBefore(t, n);
}

function appendNode(t, e) {
    e.appendChild(t);
}

function detachNode(t) {
    t.parentNode.removeChild(t);
}

function removeListener(t, e, n) {
    t.removeEventListener(e, n, !1);
}

function init(t, e) {
    t._observers = {
        pre: blankObject(),
        post: blankObject()
    }, t._handlers = blankObject(), t._bind = e._bind, t.options = e, t.root = e.root || t, 
    t.store = t.root.store || e.store;
}

function assign(t) {
    for (var e, n, r = 1, i = arguments.length; r < i; r++) {
        n = arguments[r];
        for (e in n) t[e] = n[e];
    }
    return t;
}

function destroy(t) {
    this.destroy = noop, this.fire("destroy"), this.set = this.get = noop, !1 !== t && this._fragment.u(), 
    this._fragment.d(), this._fragment = this._state = null;
}

function get(t) {
    return t ? this._state[t] : this._state;
}

function fire(t, e) {
    var n = t in this._handlers && this._handlers[t].slice();
    if (n) for (var r = 0; r < n.length; r += 1) n[r].call(this, e);
}

function observe(t, e, n) {
    var r = n && n.defer ? this._observers.post : this._observers.pre;
    return (r[t] || (r[t] = [])).push(e), n && !1 === n.init || (e.__calling = !0, e.call(this, this._state[t]), 
    e.__calling = !1), {
        cancel: function() {
            var n = r[t].indexOf(e);
            ~n && r[t].splice(n, 1);
        }
    };
}

function on(t, e) {
    if ("teardown" === t) return this.on("destroy", e);
    var n = this._handlers[t] || (this._handlers[t] = []);
    return n.push(e), {
        cancel: function() {
            var t = n.indexOf(e);
            ~t && n.splice(t, 1);
        }
    };
}

function set(t) {
    this._set(assign({}, t)), this.root._lock || (this.root._lock = !0, callAll(this.root._beforecreate), 
    callAll(this.root._oncreate), callAll(this.root._aftercreate), this.root._lock = !1);
}

function _set(t) {
    var e = this._state, n = {}, r = !1;
    for (var i in t) differs(t[i], e[i]) && (n[i] = r = !0);
    r && (this._state = assign({}, e, t), this._recompute(n, this._state), this._bind && this._bind(n, this._state), 
    this._fragment && (dispatchObservers(this, this._observers.pre, n, this._state, e), 
    this._fragment.p(n, this._state), dispatchObservers(this, this._observers.post, n, this._state, e)));
}

function _mount(t, e) {
    this._fragment.m(t, e);
}

function _unmount() {
    this._fragment && this._fragment.u();
}

function noop() {}

function blankObject() {
    return Object.create(null);
}

function callAll(t) {
    for (;t && t.length; ) t.pop()();
}

function differs(t, e) {
    return t !== e || t && "object" == typeof t || "function" == typeof t;
}

function dispatchObservers(t, e, n, r, i) {
    for (var o in e) if (n[o]) {
        var s = r[o], a = i[o], c = e[o];
        if (c) for (var u = 0; u < c.length; u += 1) {
            var h = c[u];
            h.__calling || (h.__calling = !0, h.call(t, s, a), h.__calling = !1);
        }
    }
}

assign(App.prototype, {
    destroy: destroy,
    get: get,
    fire: fire,
    observe: observe,
    on: on,
    set: set,
    teardown: destroy,
    _set: _set,
    _mount: _mount,
    _unmount: _unmount
}), App.prototype._recompute = noop;

var app = new App({
    target: document.querySelector("main")
});

window.app = app;

Makefile

CLOSURE_COMPILER_VERSION := 20180101
CLOSURE_COMPILER_URL := http://dl.google.com/closure-compiler/compiler-$(CLOSURE_COMPILER_VERSION).tar.gz

closure-compiler:
  mkdir -p vendor
	curl -o vendor/closure-compiler.tar.gz $(CLOSURE_COMPILER_URL)
	tar -C vendor/ -zxf vendor/closure-compiler.tar.gz
	mv vendor/closure-compiler-v$(CLOSURE_COMPILER_VERSION).jar vendor/closure-compiler.jar
	rm vendor/COPYING vendor/README.md vendor/closure-compiler.tar.gz
  
svelte-annotated-uglify:
  mkdir -p dist
	node_modules/.bin/uglifyjs --compress --mangle --beautify --output dist/svelte-annotated-uglify.js -- svelte.js

svelte-original-uglify:
  mkdir -p dist
	node_modules/.bin/uglifyjs --compress --mangle --beautify --output dist/svelte-original-uglify.js -- svelte.js

svelte-annotated-closure:
  mkdir -p dist
	java -jar vendor/closure-compiler.jar \
		--compilation_level=ADVANCED \
    --formatting=PRETTY_PRINT \
		--language_out=ECMASCRIPT5_STRICT \
		--js=svelte.js \
		--js_output_file=dist/svelte-annotated-closure.js

svelte-closure-original:
  mkdir -p dist
	java -jar vendor/closure-compiler.jar \
		--compilation_level=ADVANCED \
    --formatting=PRETTY_PRINT \
		--language_out=ECMASCRIPT5_STRICT \
		--js=svelte-original.js \
		--js_output_file=dist/svelte-orginal-closure.js
    

svelte-annotated.js

/** @namespace */
var svelte = {};

/**
 * @typedef {Object<string, *>}
 */
svelte.State;

/** @abstract @constructor */
var Fragment = function() {};
/** @abstract */
Fragment.prototype.c = function() {};
/** @abstract */
Fragment.prototype.h = function() {};
/** @abstract */
Fragment.prototype.m = function() {};
/** @abstract */
Fragment.prototype.p = function() {};
/** @abstract */
Fragment.prototype.u = function() {};
/** @abstract */
Fragment.prototype.d = function() {};

/**
 * @returns {!svelte.State}
 */
function data() {
  return {
    count: 0
  };
};

/**
 * @param {!svelte.State} state
 * @param {Component} component
 * @constructor
 * @extends {Fragment}
 */
function MainFragment(state, component) {
	this.state = state;
	this.component = component;
	this.click_handler = this.click_handler.bind(this);

	/** @type {*} */
	this._p;
	/** @type {*} */
	this._text;
	/** @type {*} */
	this._text_1;
	/** @type {*} */
	this._text_2;
	/** @type {*} */
	this._button;
}

/**
 * @param {*} event
 */
MainFragment.prototype.click_handler = function click_handler(event) {
	this.state = this.component.get();
	this.component.set({ count: this.state.count + 1 });
};

MainFragment.prototype.c = function create() {
	this._p = createElement("p");
	this._text = createText("Count: ");
	this._text_1 = createText(this.state.count);
	this._text_2 = createText("\n");
	this._button = createElement("button");
	this._button.textContent = "+1";
	this.h();
};

MainFragment.prototype.h = function hydrate() {
	addListener(this._button, "click", this.click_handler);
};

MainFragment.prototype.m = function mount(target, anchor) {
	insertNode(this._p, target, anchor);
	appendNode(this._text, this._p);
	appendNode(this._text_1, this._p);
	insertNode(this._text_2, target, anchor);
	insertNode(this._button, target, anchor);
};

MainFragment.prototype.p = function update(changed, state) {
	if (changed.count) {
		this._text_1.data = state.count;
	}
};

MainFragment.prototype.u = function unmount() {
	detachNode(this._p);
	detachNode(this._text_2);
	detachNode(this._button);
};

// TODO: unused but closure doesn't get rid of it?
MainFragment.prototype.d = function destroy() {
	removeListener(this._button, "click", this.click_handler);
};

/**
 * @param {*} options
 * @constructor
 * @extends {Component}
 */
function App(options) {
	init(this, options);

	/** @type {!svelte.State} */
	this._state = assign(data(), options.data);

	/** @type {Fragment} */
	this._fragment = new MainFragment(this._state, this);

	if (options.target) {
		this._fragment.c();
		this._fragment.m(options.target, options.anchor || null);
	}
}

inherits(App, Component);
App.prototype._recompute = noop;

/**
 * @param {!Function} childCtor
 * @param {!Function} parentCtor
 */
function inherits(childCtor, parentCtor) {
 /** @constructor */
 function tempCtor() {}
 tempCtor.prototype = parentCtor.prototype;
 childCtor.superClass_ = parentCtor.prototype;
 childCtor.prototype = new tempCtor();
 /** @override */
 childCtor.prototype.constructor = childCtor;
}

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 insertNode(node, target, anchor) {
	target.insertBefore(node, anchor);
}

function appendNode(node, target) {
	target.appendChild(node);
}

function detachNode(node) {
	node.parentNode.removeChild(node);
}

function removeListener(node, event, handler) {
	node.removeEventListener(event, handler, false);
}

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

/**
 * @param {!svelte.State} target
 * @param {...!svelte.State} var_args
 * @returns {!svelte.State}
 */
function assign(target, var_args) {
	var k,
		source,
		i = 1,
		len = arguments.length;
	for (; i < len; i++) {
		source = arguments[i];
		for (k in source) target[k] = source[k];
	}

	return target;
}

/** @abstract @constructor */
function Component() {};

/**
 * @param {!boolean=} detach
 */
Component.prototype.destroy = 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;
}

/**
 * @param {!string=} key
 */
Component.prototype.get = function get(key) {
	return key ? this._state[key] : this._state;
}

/**
 * @param {!string} eventName
 * @param {!Object<string, *>=} data
 */
Component.prototype.fire = function fire(eventName, data) {
	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, data);
	}
}

/**
 * @param {!string} key
 * @param {*} callback
 * @param {!Object<string, *>=} options
 * @returns {*}
 */
Component.prototype.observe = 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);
		}
	};
}

/**
 * @param {!string} eventName
 * @param {*} handler
 * @returns {*}
 */
Component.prototype.on = 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);
		}
	};
}

/**
 * @param {!svelte.State} newState
 */
Component.prototype.set = 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;
}

/**
 * @param {!svelte.State} newState
 */
Component.prototype._set = function _set(newState) {
	var oldState = this._state,
		changed = {},
		dirty = false;

	for (var key in newState) {
		if (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);
	}
}

/**
 * @param {*} target
 * @param {*} anchor
 */
Component.prototype._mount = function _mount(target, anchor) {
	this._fragment.m(target, anchor);
}

Component.prototype._unmount = function _unmount() {
	if (this._fragment) this._fragment.u();
}

function noop() {}

function blankObject() {
	return Object.create(null);
}

function callAll(fns) {
	while (fns && fns.length) fns.pop()();
}

function differs(a, b) {
	return 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;
		}
	}
}

var app = new App({
  target: document.querySelector( 'main' )
});

window.app = app;

svelte-original.js

/* App.html generated by Svelte v1.51.0 */

function data() {
  return {
    count: 0
  };
};

function create_main_fragment(state, component) {
	var p, text, text_1, text_2, button;

	function click_handler(event) {
		var state = component.get();
		component.set({ count: state.count + 1 });
	}

	return {
		c: function create() {
			p = createElement("p");
			text = createText("Count: ");
			text_1 = createText(state.count);
			text_2 = createText("\n");
			button = createElement("button");
			button.textContent = "+1";
			this.h();
		},

		h: function hydrate() {
			addListener(button, "click", click_handler);
		},

		m: function mount(target, anchor) {
			insertNode(p, target, anchor);
			appendNode(text, p);
			appendNode(text_1, p);
			insertNode(text_2, target, anchor);
			insertNode(button, target, anchor);
		},

		p: function update(changed, state) {
			if (changed.count) {
				text_1.data = state.count;
			}
		},

		u: function unmount() {
			detachNode(p);
			detachNode(text_2);
			detachNode(button);
		},

		d: function destroy() {
			removeListener(button, "click", click_handler);
		}
	};
}

function App(options) {
	init(this, options);
	this._state = assign(data(), options.data);

	this._fragment = create_main_fragment(this._state, this);

	if (options.target) {
		this._fragment.c();
		this._fragment.m(options.target, options.anchor || null);
	}
}

assign(App.prototype, {
 	destroy: destroy,
 	get: get,
 	fire: fire,
 	observe: observe,
 	on: on,
 	set: set,
 	teardown: destroy,
 	_set: _set,
 	_mount: _mount,
 	_unmount: _unmount
 });

App.prototype._recompute = noop;

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 insertNode(node, target, anchor) {
	target.insertBefore(node, anchor);
}

function appendNode(node, target) {
	target.appendChild(node);
}

function detachNode(node) {
	node.parentNode.removeChild(node);
}

function removeListener(node, event, handler) {
	node.removeEventListener(event, handler, false);
}

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 assign(target) {
	var k,
		source,
		i = 1,
		len = arguments.length;
	for (; i < len; i++) {
		source = arguments[i];
		for (k in source) target[k] = source[k];
	}

	return target;
}

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 get(key) {
	return key ? this._state[key] : this._state;
}

function fire(eventName, data) {
	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, data);
	}
}

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 oldState = this._state,
		changed = {},
		dirty = false;

	for (var key in newState) {
		if (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 _mount(target, anchor) {
	this._fragment.m(target, anchor);
}

function _unmount() {
	if (this._fragment) this._fragment.u();
}

function noop() {}

function blankObject() {
	return Object.create(null);
}

function callAll(fns) {
	while (fns && fns.length) fns.pop()();
}

function differs(a, b) {
	return 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;
		}
	}
}

var app = new App({
  target: document.querySelector( 'main' )
});

window.app = app;