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(
-						`${name}.o(#outrocallback);`
-					);
+					block.builders.outro.addBlock(deindent`
+						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>