Skip to content

Instantly share code, notes, and snippets.

@nicolashery
Last active January 7, 2018 21:50
Show Gist options
  • Save nicolashery/7ada3b57faf604df55ff6fcfe7c0c783 to your computer and use it in GitHub Desktop.
Save nicolashery/7ada3b57faf604df55ff6fcfe7c0c783 to your computer and use it in GitHub Desktop.
Svelte.js & Google Closure Compiler

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)

<p>Count: {{count}}</p>
<button on:click='set({ count: count + 1 })'>+1</button>
<script>
export default {
data () {
return {
count: 0
};
}
};
</script>
'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;
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;
'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;
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;
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
/** @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;
/* 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment