Merge branch 'master' into gh-890

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Svelte changelog
 
+## 2.12.1
+
+* Allow actions to take any expression ([#1676](https://github.com/sveltejs/svelte/issues/1676))
+* Run transitions in component context ([#1675](https://github.com/sveltejs/svelte/issues/1675))
+* Correctly set select value on mount ([#1666](https://github.com/sveltejs/svelte/issues/1666))
+* Support `{@debug}` in SSR ([#1659](https://github.com/sveltejs/svelte/issues/1659))
+* Don't treat ` ` as empty whitespace ([#1658](https://github.com/sveltejs/svelte/issues/1658))
+* Fix outros for if blocks with no else ([#1688](https://github.com/sveltejs/svelte/pull/1688))
+* Set `style.cssText` in spread attributes ([#1684](https://github.com/sveltejs/svelte/pull/1684))
+
+
 ## 2.12.0
 
 * Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "bin": {

src/compile/nodes/Attribute.ts

@@ -210,7 +210,7 @@ export default class Attribute extends Node {
 					}
 				`;
 
-				block.builders.hydrate.addBlock(deindent`
+				block.builders.mount.addBlock(deindent`
 					${last} = ${value};
 					${updater}
 				`);

src/compile/nodes/DebugTag.ts

@@ -4,6 +4,7 @@ import Block from '../dom/Block';
 import Expression from './shared/Expression';
 import deindent from '../../utils/deindent';
 import addToSet from '../../utils/addToSet';
+import { stringify } from '../../utils/stringify';
 
 export default class DebugTag extends Node {
 	expressions: Expression[];
@@ -25,8 +26,8 @@ export default class DebugTag extends Node {
 
 		const { code } = this.compiler;
 
-		// Debug all
 		if (this.expressions.length === 0) {
+			// Debug all
 			code.overwrite(this.start + 1, this.start + 7, 'debugger', {
 				storeName: true
 			});
@@ -67,4 +68,22 @@ export default class DebugTag extends Node {
 			`);
 		}
 	}
+
+	ssr() {
+		if (!this.compiler.options.dev) return;
+
+		const filename = this.compiler.file || null;
+		const { line, column } = this.compiler.locate(this.start + 1);
+
+		const obj = this.expressions.length === 0
+			? `ctx`
+			: `{ ${this.expressions
+				.map(e => e.node.name)
+				.map(name => `${name}: ctx.${name}`)
+				.join(', ')} }`;
+
+		const str = '${@debug(' + `${filename && stringify(filename)}, ${line}, ${column}, ${obj})}`;
+
+		this.compiler.target.append(str);
+	}
 }

src/compile/nodes/IfBlock.ts

@@ -139,9 +139,10 @@ export default class IfBlock extends Node {
 				this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
 
 				if (this.compiler.options.nestedTransitions) {
-					block.builders.outro.addLine(
+					block.builders.outro.addBlock(deindent`
-						`${name}.o(#outrocallback);`
+						if (${name}) ${name}.o(#outrocallback);
-					);
+						else #outrocallback();
+					`);
 				}
 			} else {
 				this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);

src/shared/dom.js

@@ -87,7 +87,9 @@ export function setAttribute(node, attribute, value) {
 
 export function setAttributes(node, attributes) {
 	for (var key in attributes) {
-		if (key in node) {
+		if (key === 'style') {
+			node.style.cssText = attributes[key];
+		} else if (key in node) {
 			node[key] = attributes[key];
 		} else {
 			if (attributes[key] === undefined) removeAttribute(node, key);

src/shared/ssr.js

@@ -54,4 +54,10 @@ export function validateSsrComponent(component, name) {
 	}
 
 	return component;
+}
+
+export function debug(file, line, column, values) {
+	console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`);
+	console.log(values);
+	return '';
 }

src/validate/html/index.ts

@@ -14,7 +14,7 @@ function isEmptyBlock(node: Node) {
 	if (!/Block$/.test(node.type) || !node.children) return false;
 	if (node.children.length > 1) return false;
 	const child = node.children[0];
-	return !child || (child.type === 'Text' && !/\S/.test(child.data));
+	return !child || (child.type === 'Text' && !/[^ \r\n\f\v\t]/.test(child.data));
 }
 
 export default function validateHtml(validator: Validator, html: Node) {

test/js/samples/debug-ssr-foo/_config.js

@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		dev: true
+	}
+};

test/js/samples/debug-ssr-foo/expected-bundle.js

@@ -0,0 +1,46 @@
+var { debug, each, escape } = require("svelte/shared.js");
+
+var SvelteComponent = {};
+SvelteComponent.data = function() {
+	return {};
+};
+
+SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { head: '', addComponent };
+	var html = SvelteComponent._render(result, state, options);
+
+	var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
+
+	return {
+		html,
+		head: result.head,
+		css: { code: cssCode, map: null },
+		toString() {
+			return html;
+		}
+	};
+};
+
+SvelteComponent._render = function(__result, ctx, options) {
+	__result.addComponent(SvelteComponent);
+
+	ctx = Object.assign({}, ctx);
+
+	return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
+	${debug(null, 2, 2, { foo: ctx.foo })}`)}
+
+<p>foo: ${escape(ctx.foo)}</p>`;
+};
+
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
+module.exports = SvelteComponent;

test/js/samples/debug-ssr-foo/expected.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var { debug, each, escape } = require("svelte/shared.js");
+
+var SvelteComponent = {};;
+
+SvelteComponent.data = function() {
+	return {};
+};
+
+SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { head: '', addComponent };
+	var html = SvelteComponent._render(result, state, options);
+
+	var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
+
+	return {
+		html,
+		head: result.head,
+		css: { code: cssCode, map: null },
+		toString() {
+			return html;
+		}
+	};
+}
+
+SvelteComponent._render = function(__result, ctx, options) {
+	__result.addComponent(SvelteComponent);
+
+	ctx = Object.assign({}, ctx);
+
+	return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
+	${debug(null, 2, 2, { foo: ctx.foo })}`)}
+
+<p>foo: ${escape(ctx.foo)}</p>`;
+};
+
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
+var warned = false;
+
+module.exports = SvelteComponent;

test/js/samples/debug-ssr-foo/input.html

@@ -0,0 +1,6 @@
+{#each things as thing}
+	<span>{thing.name}</span>
+	{@debug foo}
+{/each}
+
+<p>foo: {foo}</p>

test/js/samples/select-dynamic-value/expected-bundle.js

@@ -0,0 +1,224 @@
+function noop() {}
+
+function assign(tar, src) {
+	for (var k in src) tar[k] = src[k];
+	return tar;
+}
+
+function append(target, node) {
+	target.appendChild(node);
+}
+
+function insert(target, node, 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 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 _differs(a, b) {
+	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+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) {
+			try {
+				handler.__calling = true;
+				handler.call(this, data);
+			} finally {
+				handler.__calling = false;
+			}
+		}
+	}
+}
+
+function flush(component) {
+	component._lock = true;
+	callAll(component._beforecreate);
+	callAll(component._oncreate);
+	callAll(component._aftercreate);
+	component._lock = false;
+}
+
+function get() {
+	return this._state;
+}
+
+function init(component, options) {
+	component._handlers = blankObject();
+	component._slots = blankObject();
+	component._bind = options._bind;
+
+	component.options = options;
+	component.root = options.root || component;
+	component.store = options.store || component.root.store;
+
+	if (!options.root) {
+		component._beforecreate = [];
+		component._oncreate = [];
+		component._aftercreate = [];
+	}
+}
+
+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 set(newState) {
+	this._set(assign({}, newState));
+	if (this.root._lock) return;
+	flush(this.root);
+}
+
+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 callAll(fns) {
+	while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+var proto = {
+	destroy,
+	get,
+	fire,
+	on,
+	set,
+	_recompute: noop,
+	_set,
+	_mount,
+	_differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+	var select, option, text, option_1, text_1, select_value_value;
+
+	return {
+		c() {
+			select = createElement("select");
+			option = createElement("option");
+			text = createText("1");
+			option_1 = createElement("option");
+			text_1 = createText("2");
+			option.__value = "1";
+			option.value = option.__value;
+			option_1.__value = "2";
+			option_1.value = option_1.__value;
+		},
+
+		m(target, anchor) {
+			insert(target, select, anchor);
+			append(select, option);
+			append(option, text);
+			append(select, option_1);
+			append(option_1, text_1);
+
+			select_value_value = ctx.current;
+			for (var i = 0; i < select.options.length; i += 1) {
+				var option_2 = select.options[i];
+
+				if (option_2.__value === select_value_value) {
+					option_2.selected = true;
+					break;
+				}
+			}
+		},
+
+		p(changed, ctx) {
+			if ((changed.current) && select_value_value !== (select_value_value = ctx.current)) {
+				for (var i = 0; i < select.options.length; i += 1) {
+					var option_2 = select.options[i];
+
+					if (option_2.__value === select_value_value) {
+						option_2.selected = true;
+						break;
+					}
+				}
+			}
+		},
+
+		d(detach) {
+			if (detach) {
+				detachNode(select);
+			}
+		}
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+	this._intro = true;
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;

test/js/samples/select-dynamic-value/expected.js

@@ -0,0 +1,73 @@
+/* generated by Svelte vX.Y.Z */
+import { append, assign, createElement, createText, detachNode, init, insert, proto } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+	var select, option, text, option_1, text_1, select_value_value;
+
+	return {
+		c() {
+			select = createElement("select");
+			option = createElement("option");
+			text = createText("1");
+			option_1 = createElement("option");
+			text_1 = createText("2");
+			option.__value = "1";
+			option.value = option.__value;
+			option_1.__value = "2";
+			option_1.value = option_1.__value;
+		},
+
+		m(target, anchor) {
+			insert(target, select, anchor);
+			append(select, option);
+			append(option, text);
+			append(select, option_1);
+			append(option_1, text_1);
+
+			select_value_value = ctx.current;
+			for (var i = 0; i < select.options.length; i += 1) {
+				var option_2 = select.options[i];
+
+				if (option_2.__value === select_value_value) {
+					option_2.selected = true;
+					break;
+				}
+			}
+		},
+
+		p(changed, ctx) {
+			if ((changed.current) && select_value_value !== (select_value_value = ctx.current)) {
+				for (var i = 0; i < select.options.length; i += 1) {
+					var option_2 = select.options[i];
+
+					if (option_2.__value === select_value_value) {
+						option_2.selected = true;
+						break;
+					}
+				}
+			}
+		},
+
+		d(detach) {
+			if (detach) {
+				detachNode(select);
+			}
+		}
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+	this._intro = true;
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;

test/js/samples/select-dynamic-value/input.html

@@ -0,0 +1,4 @@
+<select value={current}>
+	<option value="1">1</option>
+	<option value="2">2</option>
+</select>

test/runtime/samples/if-block-outro-nested-else/Component.html

@@ -0,0 +1 @@
+<div></div>

test/runtime/samples/if-block-outro-nested-else/_config.js

@@ -0,0 +1,8 @@
+export default {
+	nestedTransitions: true,
+
+	test ( assert, component, target ) {
+		// Would cause "TypeError: Cannot read property 'o' of undefined"
+		component.set({ foo: false });
+	}
+};

test/runtime/samples/if-block-outro-nested-else/main.html

@@ -0,0 +1,16 @@
+{#if foo}
+	{#if false}
+		<Component/>
+	{:elseif false}
+		<Component/>
+	{/if}
+{/if}
+
+<script>
+	export default {
+		components: {
+			Component: './Component.html',
+		},
+		data: () => ({ foo: true }),
+	}
+</script>

test/validator/samples/non-empty-block-dev/_config.js

@@ -0,0 +1,3 @@
+export default {
+	dev: true
+};

test/validator/samples/non-empty-block-dev/input.html

@@ -0,0 +1,3 @@
+{#if x}
+	 
+{/if}

test/validator/samples/non-empty-block-dev/warnings.json

@@ -0,0 +1 @@
+[]