Svelte clock

clock.js

/* App.html generated by Svelte v2.7.0 */

function hours({ time }) {
	return time.getHours();
}

function minutes({ time }) {
	return time.getMinutes();
}

function seconds({ time }) {
	return time.getSeconds();
}

function data() {
	return {
		time: new Date()
	};
};

function oncreate() {
	this.interval = setInterval(() => {
		this.set({ time: new Date() });
	}, 1000);
};

function ondestroy() {
	clearInterval(this.interval);
};

const file = "App.html";

function add_css() {
	var style = createElement("style");
	style.id = 'svelte-tbg81i-style';
	style.textContent = "svg.svelte-tbg81i{width:100%;height:100%}.clock-face.svelte-tbg81i{stroke:#333;fill:white}.minor.svelte-tbg81i{stroke:#999;stroke-width:0.5}.major.svelte-tbg81i{stroke:#333;stroke-width:1}.hour.svelte-tbg81i{stroke:#333}.minute.svelte-tbg81i{stroke:#666}.second.svelte-tbg81i,.second-counterweight.svelte-tbg81i{stroke:rgb(180,0,0)}.second-counterweight.svelte-tbg81i{stroke-width:3}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwLmh0bWwiLCJzb3VyY2VzIjpbIkFwcC5odG1sIl0sInNvdXJjZXNDb250ZW50IjpbIjxzdmcgdmlld0JveD0nLTUwIC01MCAxMDAgMTAwJz5cblx0PGNpcmNsZSBjbGFzcz0nY2xvY2stZmFjZScgcj0nNDgnLz5cblxuXHQ8IS0tIG1hcmtlcnMgLS0+XG5cdHsjZWFjaCBbIDAsIDUsIDEwLCAxNSwgMjAsIDI1LCAzMCwgMzUsIDQwLCA0NSwgNTAsIDU1IF0gYXMgbWludXRlfVxuXHRcdDxsaW5lIGNsYXNzPSdtYWpvcicgeTE9JzM1JyB5Mj0nNDUnIHRyYW5zZm9ybT0ncm90YXRlKCB7IDMwICogbWludXRlIH0gKScvPlxuXG5cdFx0eyNlYWNoIFsgMSwgMiwgMywgNCBdIGFzIG9mZnNldH1cblx0XHRcdDxsaW5lIGNsYXNzPSdtaW5vcicgeTE9JzQyJyB5Mj0nNDUnIHRyYW5zZm9ybT0ncm90YXRlKCB7IDYgKiAoIG1pbnV0ZSArIG9mZnNldCApIH0gKScvPlxuXHRcdHsvZWFjaH1cblx0ey9lYWNofVxuXG5cdDwhLS0gaG91ciBoYW5kIC0tPlxuXHQ8bGluZSBjbGFzcz0naG91cicgeTE9JzInIHkyPSctMjAnIHRyYW5zZm9ybT0ncm90YXRlKCB7IDMwICogaG91cnMgKyBtaW51dGVzIC8gMiB9ICknLz5cblxuXHQ8IS0tIG1pbnV0ZSBoYW5kIC0tPlxuXHQ8bGluZSBjbGFzcz0nbWludXRlJyB5MT0nNCcgeTI9Jy0zMCcgdHJhbnNmb3JtPSdyb3RhdGUoIHsgNiAqIG1pbnV0ZXMgKyBzZWNvbmRzIC8gMTAgfSApJy8+XG5cblx0PCEtLSBzZWNvbmQgaGFuZCAtLT5cblx0PGcgdHJhbnNmb3JtPSdyb3RhdGUoIHsgNiAqIHNlY29uZHMgfSApJz5cblx0XHQ8bGluZSBjbGFzcz0nc2Vjb25kJyB5MT0nMTAnIHkyPSctMzgnLz5cblx0XHQ8bGluZSBjbGFzcz0nc2Vjb25kLWNvdW50ZXJ3ZWlnaHQnIHkxPScxMCcgeTI9JzInLz5cblx0PC9nPlxuPC9zdmc+XG5cbjxzdHlsZT5cblx0c3ZnIHtcblx0XHR3aWR0aDogMTAwJTtcblx0XHRoZWlnaHQ6IDEwMCU7XG5cdH1cblx0LmNsb2NrLWZhY2Uge1xuXHRcdHN0cm9rZTogIzMzMztcblx0XHRmaWxsOiB3aGl0ZTtcblx0fVxuXHQubWlub3Ige1xuXHRcdHN0cm9rZTogIzk5OTtcblx0XHRzdHJva2Utd2lkdGg6IDAuNTtcblx0fVxuXHQubWFqb3Ige1xuXHRcdHN0cm9rZTogIzMzMztcblx0XHRzdHJva2Utd2lkdGg6IDE7XG5cdH1cblx0LmhvdXIge1xuXHRcdHN0cm9rZTogIzMzMztcblx0fVxuXHQubWludXRlIHtcblx0XHRzdHJva2U6ICM2NjY7XG5cdH1cblx0LnNlY29uZCwgLnNlY29uZC1jb3VudGVyd2VpZ2h0IHtcblx0XHRzdHJva2U6IHJnYigxODAsMCwwKTtcblx0fVxuXHQuc2Vjb25kLWNvdW50ZXJ3ZWlnaHQge1xuXHRcdHN0cm9rZS13aWR0aDogMztcblx0fVxuPC9zdHlsZT5cblxuPHNjcmlwdD5cblx0ZXhwb3J0IGRlZmF1bHQge1xuXHRcdGRhdGEoKSB7XG5cdFx0XHRyZXR1cm4ge1xuXHRcdFx0XHR0aW1lOiBuZXcgRGF0ZSgpXG5cdFx0XHR9O1xuXHRcdH0sXG5cblx0XHRjb21wdXRlZDoge1xuXHRcdFx0aG91cnM6ICh7IHRpbWUgfSkgPT4gdGltZS5nZXRIb3VycygpLFxuXHRcdFx0bWludXRlczogKHsgdGltZSB9KSA9PiB0aW1lLmdldE1pbnV0ZXMoKSxcblx0XHRcdHNlY29uZHM6ICh7IHRpbWUgfSkgPT4gdGltZS5nZXRTZWNvbmRzKClcblx0XHR9LFxuXG5cdFx0b25jcmVhdGUoKSB7XG5cdFx0XHR0aGlzLmludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuXHRcdFx0XHR0aGlzLnNldCh7IHRpbWU6IG5ldyBEYXRlKCkgfSk7XG5cdFx0XHR9LCAxMDAwKTtcblx0XHR9LFxuXG5cdFx0b25kZXN0cm95KCkge1xuXHRcdFx0Y2xlYXJJbnRlcnZhbCh0aGlzLmludGVydmFsKTtcblx0XHR9XG5cdH07XG48L3NjcmlwdD4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJDLEdBQUcsY0FBQyxDQUFDLEFBQ0osS0FBSyxDQUFFLElBQUksQ0FDWCxNQUFNLENBQUUsSUFBSSxBQUNiLENBQUMsQUFDRCxXQUFXLGNBQUMsQ0FBQyxBQUNaLE1BQU0sQ0FBRSxJQUFJLENBQ1osSUFBSSxDQUFFLEtBQUssQUFDWixDQUFDLEFBQ0QsTUFBTSxjQUFDLENBQUMsQUFDUCxNQUFNLENBQUUsSUFBSSxDQUNaLFlBQVksQ0FBRSxHQUFHLEFBQ2xCLENBQUMsQUFDRCxNQUFNLGNBQUMsQ0FBQyxBQUNQLE1BQU0sQ0FBRSxJQUFJLENBQ1osWUFBWSxDQUFFLENBQUMsQUFDaEIsQ0FBQyxBQUNELEtBQUssY0FBQyxDQUFDLEFBQ04sTUFBTSxDQUFFLElBQUksQUFDYixDQUFDLEFBQ0QsT0FBTyxjQUFDLENBQUMsQUFDUixNQUFNLENBQUUsSUFBSSxBQUNiLENBQUMsQUFDRCxxQkFBTyxDQUFFLHFCQUFxQixjQUFDLENBQUMsQUFDL0IsTUFBTSxDQUFFLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQUFDckIsQ0FBQyxBQUNELHFCQUFxQixjQUFDLENBQUMsQUFDdEIsWUFBWSxDQUFFLENBQUMsQUFDaEIsQ0FBQyJ9 */";
	appendNode(style, document.head);
}

function create_main_fragment(component, ctx) {
	var svg, circle, line, line_transform_value, line_1, line_1_transform_value, g, line_2, line_3, g_transform_value;

	var each_value = [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55 ];

	var each_blocks = [];

	for (var i = 0; i < each_value.length; i += 1) {
		each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
	}

	return {
		c: function create() {
			svg = createSvgElement("svg");
			circle = createSvgElement("circle");

			for (var i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].c();
			}

			line = createSvgElement("line");
			line_1 = createSvgElement("line");
			g = createSvgElement("g");
			line_2 = createSvgElement("line");
			line_3 = createSvgElement("line");
			setAttribute(circle, "class", "clock-face svelte-tbg81i");
			setAttribute(circle, "r", "48");
			addLoc(circle, file, 1, 1, 33);
			setAttribute(line, "class", "hour svelte-tbg81i");
			setAttribute(line, "y1", "2");
			setAttribute(line, "y2", "-20");
			setAttribute(line, "transform", line_transform_value = "rotate( " + (30 * ctx.hours + ctx.minutes / 2) + " )");
			addLoc(line, file, 13, 1, 402);
			setAttribute(line_1, "class", "minute svelte-tbg81i");
			setAttribute(line_1, "y1", "4");
			setAttribute(line_1, "y2", "-30");
			setAttribute(line_1, "transform", line_1_transform_value = "rotate( " + (6 * ctx.minutes + ctx.seconds / 10) + " )");
			addLoc(line_1, file, 16, 1, 514);
			setAttribute(line_2, "class", "second svelte-tbg81i");
			setAttribute(line_2, "y1", "10");
			setAttribute(line_2, "y2", "-38");
			addLoc(line_2, file, 20, 2, 674);
			setAttribute(line_3, "class", "second-counterweight svelte-tbg81i");
			setAttribute(line_3, "y1", "10");
			setAttribute(line_3, "y2", "2");
			addLoc(line_3, file, 21, 2, 716);
			setAttribute(g, "transform", g_transform_value = "rotate( " + 6 * ctx.seconds + " )");
			addLoc(g, file, 19, 1, 630);
			setAttribute(svg, "viewBox", "-50 -50 100 100");
			setAttribute(svg, "class", "svelte-tbg81i");
			addLoc(svg, file, 0, 0, 0);
		},

		m: function mount(target, anchor) {
			insertNode(svg, target, anchor);
			appendNode(circle, svg);

			for (var i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].m(svg, null);
			}

			appendNode(line, svg);
			appendNode(line_1, svg);
			appendNode(g, svg);
			appendNode(line_2, g);
			appendNode(line_3, g);
		},

		p: function update(changed, ctx) {
			if ((changed.hours || changed.minutes) && line_transform_value !== (line_transform_value = "rotate( " + (30 * ctx.hours + ctx.minutes / 2) + " )")) {
				setAttribute(line, "transform", line_transform_value);
			}

			if ((changed.minutes || changed.seconds) && line_1_transform_value !== (line_1_transform_value = "rotate( " + (6 * ctx.minutes + ctx.seconds / 10) + " )")) {
				setAttribute(line_1, "transform", line_1_transform_value);
			}

			if ((changed.seconds) && g_transform_value !== (g_transform_value = "rotate( " + 6 * ctx.seconds + " )")) {
				setAttribute(g, "transform", g_transform_value);
			}
		},

		d: function destroy(detach) {
			if (detach) {
				detachNode(svg);
			}

			destroyEach(each_blocks, detach);
		}
	};
}

// (5:1) {#each [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55 ] as minute}
function create_each_block(component, ctx) {
	var line, each_anchor;

	var each_value_1 = [ 1, 2, 3, 4 ];

	var each_blocks = [];

	for (var i = 0; i < each_value_1.length; i += 1) {
		each_blocks[i] = create_each_block_1(component, get_each_context_1(ctx, each_value_1, i));
	}

	return {
		c: function create() {
			line = createSvgElement("line");

			for (var i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].c();
			}

			each_anchor = createComment();
			setAttribute(line, "class", "major svelte-tbg81i");
			setAttribute(line, "y1", "35");
			setAttribute(line, "y2", "45");
			setAttribute(line, "transform", "rotate( " + 30 * ctx.minute + " )");
			addLoc(line, file, 5, 2, 158);
		},

		m: function mount(target, anchor) {
			insertNode(line, target, anchor);

			for (var i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].m(target, anchor);
			}

			insertNode(each_anchor, target, anchor);
		},

		d: function destroy(detach) {
			if (detach) {
				detachNode(line);
			}

			destroyEach(each_blocks, detach);

			if (detach) {
				detachNode(each_anchor);
			}
		}
	};
}

// (8:2) {#each [ 1, 2, 3, 4 ] as offset}
function create_each_block_1(component, ctx) {
	var line;

	return {
		c: function create() {
			line = createSvgElement("line");
			setAttribute(line, "class", "minor svelte-tbg81i");
			setAttribute(line, "y1", "42");
			setAttribute(line, "y2", "45");
			setAttribute(line, "transform", "rotate( " + 6 * ( ctx.minute + ctx.offset ) + " )");
			addLoc(line, file, 8, 3, 273);
		},

		m: function mount(target, anchor) {
			insertNode(line, target, anchor);
		},

		d: function destroy(detach) {
			if (detach) {
				detachNode(line);
			}
		}
	};
}

function get_each_context(ctx, list, i) {
	const child_ctx = Object.create(ctx);
	child_ctx.minute = list[i];
	child_ctx.each_value = list;
	child_ctx.minute_index = i;
	return child_ctx;
}

function get_each_context_1(ctx, list, i) {
	const child_ctx = Object.create(ctx);
	child_ctx.offset = list[i];
	child_ctx.each_value_1 = list;
	child_ctx.offset_index = i;
	return child_ctx;
}

function App(options) {
	this._debugName = '<App>';
	if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");
	init(this, options);
	this._state = assign(data(), options.data);
	this._recompute({ time: 1 }, this._state);
	if (!('time' in this._state)) console.warn("<App> was created without expected data property 'time'");
	this._intro = true;

	this._handlers.destroy = [ondestroy];

	if (!document.getElementById("svelte-tbg81i-style")) add_css();

	if (!options.root) {
		this._oncreate = [];
	}

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

	this.root._oncreate.push(() => {
		oncreate.call(this);
		this.fire("update", { changed: assignTrue({}, this._state), current: this._state });
	});

	if (options.target) {
		if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
		this._fragment.c();
		this._mount(options.target, options.anchor);

		callAll(this._oncreate);
	}
}

assign(App.prototype, {
 	destroy: destroyDev,
 	get: get,
 	fire: fire,
 	on: on,
 	set: setDev,
 	_set: _set,
 	_mount: _mount,
 	_differs: _differs
 });

App.prototype._checkReadOnly = function _checkReadOnly(newState) {
	if ('hours' in newState && !this._updatingReadonlyProperty) throw new Error("<App>: Cannot set read-only property 'hours'");
	if ('minutes' in newState && !this._updatingReadonlyProperty) throw new Error("<App>: Cannot set read-only property 'minutes'");
	if ('seconds' in newState && !this._updatingReadonlyProperty) throw new Error("<App>: Cannot set read-only property 'seconds'");
};

App.prototype._recompute = function _recompute(changed, state) {
	if (changed.time) {
		if (this._differs(state.hours, (state.hours = hours(state)))) changed.hours = true;
		if (this._differs(state.minutes, (state.minutes = minutes(state)))) changed.minutes = true;
		if (this._differs(state.seconds, (state.seconds = seconds(state)))) changed.seconds = true;
	}
}

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

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

function createSvgElement(name) {
	return document.createElementNS('http://www.w3.org/2000/svg', name);
}

function setAttribute(node, attribute, value) {
	node.setAttribute(attribute, value);
}

function addLoc(element, file, line, column, char) {
	element.__svelte_meta = {
		loc: { file, line, column, char }
	};
}

function insertNode(node, target, anchor) {
	target.insertBefore(node, anchor);
}

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

function destroyEach(iterations, detach) {
	for (var i = 0; i < iterations.length; i += 1) {
		if (iterations[i]) iterations[i].d(detach);
	}
}

function createComment() {
	return document.createComment('');
}

function init(component, options) {
	component._handlers = blankObject();
	component._bind = options._bind;

	component.options = options;
	component.root = options.root || component;
	component.store = component.root.store || options.store;
}

function assign(tar, src) {
	for (var k in src) tar[k] = src[k];
	return tar;
}

function assignTrue(tar, src) {
	for (var k in src) tar[k] = 1;
	return tar;
}

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

function destroyDev(detach) {
	destroy.call(this, detach);
	this.destroy = function() {
		console.warn('Component was already destroyed');
	};
}

function get() {
	return 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) {
		var handler = handlers[i];

		if (!handler.__calling) {
			handler.__calling = true;
			handler.call(this, data);
			handler.__calling = false;
		}
	}
}

function on(eventName, 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 setDev(newState) {
	if (typeof newState !== 'object') {
		throw new Error(
			this._debugName + '.set was called without an object of data key-values to update.'
		);
	}

	this._checkReadOnly(newState);
	set.call(this, newState);
}

function _set(newState) {
	var oldState = this._state,
		changed = {},
		dirty = false;

	for (var key in newState) {
		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
	}
	if (!dirty) return;

	this._state = assign(assign({}, oldState), newState);
	this._recompute(changed, this._state);
	if (this._bind) this._bind(changed, this._state);

	if (this._fragment) {
		this.fire("state", { changed: changed, current: this._state, previous: oldState });
		this._fragment.p(changed, this._state);
		this.fire("update", { changed: changed, current: this._state, previous: oldState });
	}
}

function _mount(target, anchor) {
	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}

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

function destroy(detach) {
	this.destroy = noop;
	this.fire('destroy');
	this.set = noop;

	this._fragment.d(detach !== false);
	this._fragment = null;
	this._state = {};
}

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 noop() {}
console.log("Fetched js")
window.onload = function () {
	console.log("Creating app")
	const app = new App({
		target: document.querySelector('main')
	});
	console.log("Created app:", app)
}