merge master -> gh-1118

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Svelte changelog
 
+## 1.56.4
+
+* Allow `component` and `state` to be context names ([#1213](https://github.com/sveltejs/svelte/issues/1213))
+* Don't remove `@supports` rules when `cascade: false` ([#1215](https://github.com/sveltejs/svelte/issues/1215))
+
+## 1.56.3
+
+* Top-level transitions work inside nested components ([#1188](https://github.com/sveltejs/svelte/issues/1188))
+* Always use internal `_mount` method ([#1201](https://github.com/sveltejs/svelte/issues/1201))
+
+## 1.56.2
+
+* Null out `key` for children of keyed each blocks ([#1202](https://github.com/sveltejs/svelte/issues/1202))
+
+## 1.56.1
+
+* Fix if-in-each bug ([#1195](https://github.com/sveltejs/svelte/issues/1195))
+* Cross-browser `scrollX`/`scrollY` support ([#1175](https://github.com/sveltejs/svelte/issues/1175))
+
 ## 1.56.0
 
 * Internal refactor ([#1122](https://github.com/sveltejs/svelte/issues/1122))

README.md

@@ -21,6 +21,7 @@ This is the Svelte compiler, which is primarily intended for authors of tooling
 * [svelte-hot-loader](https://github.com/ekhaled/svelte-hot-loader) – Webpack loader addon to support HMR
 * [meteor-svelte](https://github.com/klaussner/meteor-svelte) – Meteor build plugin
 * [sveltejs-brunch](https://github.com/StarpTech/sveltejs-brunch) – Brunch build plugin
+* [svelte-dev-store](https://github.com/GarethOates/svelte-dev-store) - Use Redux tools to visualise Svelte store
 * More to come!
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.56.0",
+  "version": "1.56.4",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [
@@ -66,7 +66,7 @@
     "nyc": "^11.1.0",
     "prettier": "^1.7.0",
     "reify": "^0.12.3",
-    "rollup": "^0.48.2",
+    "rollup": "^0.56.4",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-json": "^2.1.0",

src/css/Stylesheet.ts

@@ -163,7 +163,7 @@ class Atrule {
 	}
 
 	apply(node: Element, stack: Element[]) {
-		if (this.node.name === 'media') {
+		if (this.node.name === 'media' || this.node.name === 'supports') {
 			this.children.forEach(child => {
 				child.apply(node, stack);
 			});
@@ -199,6 +199,14 @@ class Atrule {
 			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
 			c = this.node.expression.end;
 			if (this.node.block.start - c > 0) code.remove(c, this.node.block.start);
+		} else if (this.node.name === 'supports') {
+			let c = this.node.start + 9;
+			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
+			this.node.expression.children.forEach((query: Node) => {
+				// TODO minify queries
+				c = query.end;
+			});
+			code.remove(c, this.node.block.start);
 		}
 
 		// TODO other atrules

src/generators/Generator.ts

@@ -1,10 +1,10 @@
 import MagicString, { Bundle } from 'magic-string';
+import isReference from 'is-reference';
 import { walk, childKeys } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import deindent from '../utils/deindent';
 import CodeBuilder from '../utils/CodeBuilder';
 import getCodeFrame from '../utils/getCodeFrame';
-import isReference from '../utils/isReference';
 import flattenReference from '../utils/flattenReference';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
@@ -168,7 +168,7 @@ export default class Generator {
 		if (options.customElement === true) {
 			this.customElement = {
 				tag: this.tag,
-				props: this.props // TODO autofill this in
+				props: this.props
 			}
 		} else {
 			this.customElement = options.customElement;
@@ -752,12 +752,6 @@ export default class Generator {
 				if (node.type === 'Element' && (node.name === ':Component' || node.name === ':Self' || generator.components.has(node.name))) {
 					node.type = 'Component';
 					Object.setPrototypeOf(node, nodes.Component.prototype);
-				} else if (node.name === ':Window') { // TODO do this in parse?
-					node.type = 'Window';
-					Object.setPrototypeOf(node, nodes.Window.prototype);
-				} else if (node.name === ':Head') { // TODO do this in parse?
-					node.type = 'Head';
-					Object.setPrototypeOf(node, nodes.Head.prototype);
 				} else if (node.type === 'Element' && node.name === 'title' && parentIsHead(parent)) { // TODO do this in parse?
 					node.type = 'Title';
 					Object.setPrototypeOf(node, nodes.Title.prototype);

src/generators/dom/Block.ts

@@ -112,9 +112,13 @@ export default class Block {
 		this.hasOutroMethod = false;
 		this.outros = 0;
 
-		this.aliases = new Map();
-		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker();
+		this.variables = new Map();
+
+		this.aliases = new Map()
+			.set('component', this.getUniqueName('component'))
+			.set('state', this.getUniqueName('state'));
+		if (this.key) this.aliases.set('key', this.getUniqueName('key'));
 
 		this.hasUpdateMethod = false; // determined later
 	}
@@ -163,7 +167,7 @@ export default class Block {
 	}
 
 	child(options: BlockOptions) {
-		return new Block(Object.assign({}, this, options, { parent: this }));
+		return new Block(Object.assign({}, this, { key: null }, options, { parent: this }));
 	}
 
 	contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
@@ -308,22 +312,19 @@ export default class Block {
 		if (this.hasOutroMethod) {
 			if (hasOutros) {
 				properties.addBlock(deindent`
-					o: function outro(${this.alias('outrocallback')}) {
+					o: function outro(#outrocallback) {
 						if (${outroing}) return;
 						${outroing} = true;
 						${hasIntros && `${introing} = false;`}
 
-						var ${this.alias('outros')} = ${this.outros};
+						var #outros = ${this.outros};
 
 						${this.builders.outro}
 					},
 				`);
 			} else {
-				// TODO should this be a helper?
 				properties.addBlock(deindent`
-					o: function outro(outrocallback) {
+					o: @run,
-						outrocallback();
-					},
 				`);
 			}
 		}

src/generators/dom/index.ts

@@ -1,7 +1,7 @@
 import MagicString from 'magic-string';
+import isReference from 'is-reference';
 import { parseExpressionAt } from 'acorn';
 import annotateWithScopes from '../../utils/annotateWithScopes';
-import isReference from '../../utils/isReference';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent';
 import { stringify, escape } from '../../utils/stringify';
@@ -259,7 +259,7 @@ export default function dom(
 			this._fragment.c();
 			this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
 
-			if (options.target) this._mount(options.target, options.anchor || null);
+			if (options.target) this._mount(options.target, options.anchor);
 		` : deindent`
 			if (options.target) {
 				${generator.hydratable
@@ -272,7 +272,7 @@ export default function dom(
 						${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
 						this._fragment.c();
 					`}
-				this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(options.target, options.anchor || null);
+				this._mount(options.target, options.anchor);
 
 				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
 					${generator.hasComponents && `this._lock = true;`}

src/generators/nodes/Component.ts

@@ -320,7 +320,7 @@ export default class Component extends Node {
 						${name} = new ${switch_vars.value}(${switch_vars.props}(state));
 						${name}._fragment.c();
 
-						${this.children.map(child => remount(generator, child, name))}
+						${this.children.map(child => child.remount(name))}
 						${name}._mount(${updateMountNode}, ${anchor});
 
 						${eventHandlers.map(handler => deindent`
@@ -398,6 +398,10 @@ export default class Component extends Node {
 			`);
 		}
 	}
+
+	remount(name: string) {
+		return `${this.var}._mount(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`;
+	}
 }
 
 function mungeAttribute(attribute: Node, block: Block): Attribute {
@@ -548,31 +552,3 @@ function isComputed(node: Node) {
 
 	return false;
 }
-
-function remount(generator: DomGenerator, node: Node, name: string) {
-	// TODO make this a method of the nodes
-
-	if (node.type === 'Component') {
-		return `${node.var}._mount(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
-	}
-
-	if (node.type === 'Element') {
-		const slot = node.attributes.find(attribute => attribute.name === 'slot');
-		if (slot) {
-			return `@appendNode(${node.var}, ${name}._slotted.${node.getStaticAttributeValue('slot')});`;
-		}
-
-		return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`;
-	}
-
-	if (node.type === 'Text' || node.type === 'MustacheTag' || node.type === 'RawMustacheTag') {
-		return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`;
-	}
-
-	if (node.type === 'EachBlock') {
-		// TODO consider keyed blocks
-		return `for (var #i = 0; #i < ${node.iterations}.length; #i += 1) ${node.iterations}[#i].m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
-	}
-
-	return `${node.var}.m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
-}

src/generators/nodes/EachBlock.ts

@@ -594,4 +594,9 @@ export default class EachBlock extends Node {
 
 		block.builders.destroy.addBlock(`@destroyEach(${iterations});`);
 	}
+
+	remount(name: string) {
+		// TODO consider keyed blocks
+		return `for (var #i = 0; #i < ${this.iterations}.length; #i += 1) ${this.iterations}[#i].m(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`;
+	}
 }

src/generators/nodes/Element.ts

@@ -677,6 +677,15 @@ export default class Element extends Node {
 	isMediaNode() {
 		return this.name === 'audio' || this.name === 'video';
 	}
+
+	remount(name: string) {
+		const slot = this.attributes.find(attribute => attribute.name === 'slot');
+		if (slot) {
+			return `@appendNode(${this.var}, ${name}._slotted.${this.getStaticAttributeValue('slot')});`;
+		}
+
+		return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`;
+	}
 }
 
 function getRenderStatement(

src/generators/nodes/IfBlock.ts

@@ -101,7 +101,7 @@ export default class IfBlock extends Node {
 			? block.getUniqueName(`${name}_anchor`)
 			: (this.next && this.next.var) || 'null';
 
-		const branches = getBranches(this.generator, block, parentNode, parentNodes, this);
+		const branches = this.getBranches(block, parentNode, parentNodes, this);
 
 		const hasElse = isElseBranch(branches[branches.length - 1]);
 		const if_name = hasElse ? '' : `if (${name}) `;
@@ -113,21 +113,12 @@ export default class IfBlock extends Node {
 
 		if (this.else) {
 			if (hasOutros) {
-				compoundWithOutros(
+				this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
-					this.generator,
-					block,
-					parentNode,
-					parentNodes,
-					this,
-					branches,
-					dynamic,
-					vars
-				);
 			} else {
-				compound(this.generator, block, parentNode, parentNodes, this, branches, dynamic, vars);
+				this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
 			}
 		} else {
-			simple(this.generator, block, parentNode, parentNodes, this, branches[0], dynamic, vars);
+			this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
 		}
 
 		block.builders.create.addLine(`${if_name}${name}.c();`);
@@ -147,173 +138,20 @@ export default class IfBlock extends Node {
 			);
 		}
 	}
-}
-
-
-
-
-
-// TODO move all this into the class
 
-function getBranches(
+	buildCompound(
-	generator: DomGenerator,
 		block: Block,
 		parentNode: string,
 		parentNodes: string,
-	node: Node
-) {
-	block.contextualise(node.expression); // TODO remove
-
-	const branches = [
-		{
-			condition: node.metadata.snippet,
-			block: node.block.name,
-			hasUpdateMethod: node.block.hasUpdateMethod,
-			hasIntroMethod: node.block.hasIntroMethod,
-			hasOutroMethod: node.block.hasOutroMethod,
-		},
-	];
-
-	visitChildren(generator, block, node);
-
-	if (isElseIf(node.else)) {
-		branches.push(
-			...getBranches(generator, block, parentNode, parentNodes, node.else.children[0])
-		);
-	} else {
-		branches.push({
-			condition: null,
-			block: node.else ? node.else.block.name : null,
-			hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
-			hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
-			hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
-		});
-
-		if (node.else) {
-			visitChildren(generator, block, node.else);
-		}
-	}
-
-	return branches;
-}
-
-function visitChildren(
-	generator: DomGenerator,
-	block: Block,
-	node: Node
-) {
-	node.children.forEach((child: Node) => {
-		child.build(node.block, null, 'nodes');
-	});
-}
-
-
-
-function simple(
-	generator: DomGenerator,
-	block: Block,
-	parentNode: string,
-	parentNodes: string,
-	node: Node,
-	branch,
-	dynamic,
-	{ name, anchor, if_name }
-) {
-	block.builders.init.addBlock(deindent`
-		var ${name} = (${branch.condition}) && ${branch.block}(#component, state);
-	`);
-
-	const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
-	const initialMountNode = parentNode || '#target';
-	const anchorNode = parentNode ? 'null' : 'anchor';
-
-	block.builders.mount.addLine(
-		`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
-	);
-
-	const updateMountNode = node.getUpdateMountNode(anchor);
-
-	const enter = dynamic
-		? branch.hasIntroMethod
-			? deindent`
-				if (${name}) {
-					${name}.p(changed, state);
-				} else {
-					${name} = ${branch.block}(#component, state);
-					if (${name}) ${name}.c();
-				}
-
-				${name}.i(${updateMountNode}, ${anchor});
-			`
-			: deindent`
-				if (${name}) {
-					${name}.p(changed, state);
-				} else {
-					${name} = ${branch.block}(#component, state);
-					${name}.c();
-					${name}.m(${updateMountNode}, ${anchor});
-				}
-			`
-		: branch.hasIntroMethod
-			? deindent`
-				if (!${name}) {
-					${name} = ${branch.block}(#component, state);
-					${name}.c();
-				}
-				${name}.i(${updateMountNode}, ${anchor});
-			`
-			: deindent`
-				if (!${name}) {
-					${name} = ${branch.block}(#component, state);
-					${name}.c();
-					${name}.m(${updateMountNode}, ${anchor});
-				}
-			`;
-
-	// no `p()` here — we don't want to update outroing nodes,
-	// as that will typically result in glitching
-	const exit = branch.hasOutroMethod
-		? deindent`
-			${name}.o(function() {
-				${name}.u();
-				${name}.d();
-				${name} = null;
-			});
-		`
-		: deindent`
-			${name}.u();
-			${name}.d();
-			${name} = null;
-		`;
-
-	block.builders.update.addBlock(deindent`
-		if (${branch.condition}) {
-			${enter}
-		} else if (${name}) {
-			${exit}
-		}
-	`);
-
-	block.builders.unmount.addLine(`${if_name}${name}.u();`);
-
-	block.builders.destroy.addLine(`${if_name}${name}.d();`);
-}
-
-function compound(
-	generator: DomGenerator,
-	block: Block,
-	parentNode: string,
-		parentNodes: string,
-	node: Node,
 		branches,
 		dynamic,
 		{ name, anchor, hasElse, if_name }
-) {
+	) {
-	const select_block_type = generator.getUniqueName(`select_block_type`);
+		const select_block_type = this.generator.getUniqueName(`select_block_type`);
 		const current_block_type = block.getUniqueName(`current_block_type`);
 		const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
 
-	generator.blocks.push(deindent`
+		block.builders.init.addBlock(deindent`
 			function ${select_block_type}(state) {
 				${branches
 					.map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`)
@@ -334,7 +172,7 @@ function compound(
 			`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
 		);
 
-	const updateMountNode = node.getUpdateMountNode(anchor);
+		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const changeBlock = deindent`
 			${hasElse
@@ -371,20 +209,18 @@ function compound(
 		block.builders.unmount.addLine(`${if_name}${name}.u();`);
 
 		block.builders.destroy.addLine(`${if_name}${name}.d();`);
-}
+	}
 
-// if any of the siblings have outros, we need to keep references to the blocks
+	// if any of the siblings have outros, we need to keep references to the blocks
-// (TODO does this only apply to bidi transitions?)
+	// (TODO does this only apply to bidi transitions?)
-function compoundWithOutros(
+	buildCompoundWithOutros(
-	generator: DomGenerator,
 		block: Block,
 		parentNode: string,
 		parentNodes: string,
-	node: Node,
 		branches,
 		dynamic,
 		{ name, anchor, hasElse }
-) {
+	) {
 		const select_block_type = block.getUniqueName(`select_block_type`);
 		const current_block_type_index = block.getUniqueName(`current_block_type_index`);
 		const previous_block_index = block.getUniqueName(`previous_block_index`);
@@ -433,7 +269,7 @@ function compoundWithOutros(
 			`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
 		);
 
-	const updateMountNode = node.getUpdateMountNode(anchor);
+		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const destroyOldBlock = deindent`
 			${name}.o(function() {
@@ -496,4 +332,140 @@ function compoundWithOutros(
 				${if_blocks}[${current_block_type_index}].d();
 			}
 		`);
+	}
+
+	buildSimple(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		branch,
+		dynamic,
+		{ name, anchor, if_name }
+	) {
+		block.builders.init.addBlock(deindent`
+			var ${name} = (${branch.condition}) && ${branch.block}(#component, state);
+		`);
+
+		const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
+		const initialMountNode = parentNode || '#target';
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.mount.addLine(
+			`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
+		);
+
+		const updateMountNode = this.getUpdateMountNode(anchor);
+
+		const enter = dynamic
+			? branch.hasIntroMethod
+				? deindent`
+					if (${name}) {
+						${name}.p(changed, state);
+					} else {
+						${name} = ${branch.block}(#component, state);
+						if (${name}) ${name}.c();
+					}
+
+					${name}.i(${updateMountNode}, ${anchor});
+				`
+				: deindent`
+					if (${name}) {
+						${name}.p(changed, state);
+					} else {
+						${name} = ${branch.block}(#component, state);
+						${name}.c();
+						${name}.m(${updateMountNode}, ${anchor});
+					}
+				`
+			: branch.hasIntroMethod
+				? deindent`
+					if (!${name}) {
+						${name} = ${branch.block}(#component, state);
+						${name}.c();
+					}
+					${name}.i(${updateMountNode}, ${anchor});
+				`
+				: deindent`
+					if (!${name}) {
+						${name} = ${branch.block}(#component, state);
+						${name}.c();
+						${name}.m(${updateMountNode}, ${anchor});
+					}
+				`;
+
+		// no `p()` here — we don't want to update outroing nodes,
+		// as that will typically result in glitching
+		const exit = branch.hasOutroMethod
+			? deindent`
+				${name}.o(function() {
+					${name}.u();
+					${name}.d();
+					${name} = null;
+				});
+			`
+			: deindent`
+				${name}.u();
+				${name}.d();
+				${name} = null;
+			`;
+
+		block.builders.update.addBlock(deindent`
+			if (${branch.condition}) {
+				${enter}
+			} else if (${name}) {
+				${exit}
+			}
+		`);
+
+		block.builders.unmount.addLine(`${if_name}${name}.u();`);
+
+		block.builders.destroy.addLine(`${if_name}${name}.d();`);
+	}
+
+	getBranches(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		node: Node
+	) {
+		block.contextualise(node.expression); // TODO remove
+
+		const branches = [
+			{
+				condition: node.metadata.snippet,
+				block: node.block.name,
+				hasUpdateMethod: node.block.hasUpdateMethod,
+				hasIntroMethod: node.block.hasIntroMethod,
+				hasOutroMethod: node.block.hasOutroMethod,
+			},
+		];
+
+		this.visitChildren(block, node);
+
+		if (isElseIf(node.else)) {
+			branches.push(
+				...this.getBranches(block, parentNode, parentNodes, node.else.children[0])
+			);
+		} else {
+			branches.push({
+				condition: null,
+				block: node.else ? node.else.block.name : null,
+				hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
+				hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
+				hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
+			});
+
+			if (node.else) {
+				this.visitChildren(block, node.else);
+			}
+		}
+
+		return branches;
+	}
+
+	visitChildren(block: Block, node: Node) {
+		node.children.forEach((child: Node) => {
+			child.build(node.block, null, 'nodes');
+		});
+	}
 }

src/generators/nodes/MustacheTag.ts

@@ -26,4 +26,8 @@ export default class MustacheTag extends Tag {
 			parentNode
 		);
 	}
+
+	remount(name: string) {
+		return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`;
+	}
 }

src/generators/nodes/RawMustacheTag.ts

@@ -89,4 +89,8 @@ export default class RawMustacheTag extends Tag {
 			addAnchorAfter();
 		}
 	}
+
+	remount(name: string) {
+		return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`;
+	}
 }

src/generators/nodes/Slot.ts

@@ -9,7 +9,7 @@ import Block from '../dom/Block';
 export default class Slot extends Element {
 	type: 'Element';
 	name: string;
-	attributes: Attribute[]; // TODO have more specific Attribute type
+	attributes: Attribute[];
 	children: Node[];
 
 	init(
@@ -54,6 +54,9 @@ export default class Slot extends Element {
 		if (needsAnchorBefore) block.addVariable(anchorBefore);
 		if (needsAnchorAfter) block.addVariable(anchorAfter);
 
+		let mountBefore = block.builders.mount.toString();
+		let unmountBefore = block.builders.unmount.toString();
+
 		block.builders.create.pushCondition(`!${content_name}`);
 		block.builders.hydrate.pushCondition(`!${content_name}`);
 		block.builders.mount.pushCondition(`!${content_name}`);
@@ -72,10 +75,13 @@ export default class Slot extends Element {
 		block.builders.unmount.popCondition();
 		block.builders.destroy.popCondition();
 
-		// TODO can we use an else here?
+		const mountLeadin = block.builders.mount.toString() !== mountBefore
+			? `else`
+			: `if (${content_name})`;
+
 		if (parentNode) {
 			block.builders.mount.addBlock(deindent`
-				if (${content_name}) {
+				${mountLeadin} {
 					${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${parentNode});`}
 					@appendNode(${content_name}, ${parentNode});
 					${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${parentNode});`}
@@ -83,7 +89,7 @@ export default class Slot extends Element {
 			`);
 		} else {
 			block.builders.mount.addBlock(deindent`
-				if (${content_name}) {
+				${mountLeadin} {
 					${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`}
 					@insertNode(${content_name}, #target, anchor);
 					${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`}
@@ -95,28 +101,31 @@ export default class Slot extends Element {
 		// so that it can be reinserted later
 		// TODO so that this can work with public API, component._slotted should
 		// be all fragments, derived from options.slots. Not === options.slots
-		// TODO can we use an else here?
+		const unmountLeadin = block.builders.unmount.toString() !== unmountBefore
+			? `else`
+			: `if (${content_name})`;
+
 		if (anchorBefore === 'null' && anchorAfter === 'null') {
 			block.builders.unmount.addBlock(deindent`
-				if (${content_name}) {
+				${unmountLeadin} {
 					@reinsertChildren(${parentNode}, ${content_name});
 				}
 			`);
 		} else if (anchorBefore === 'null') {
 			block.builders.unmount.addBlock(deindent`
-				if (${content_name}) {
+				${unmountLeadin} {
 					@reinsertBefore(${anchorAfter}, ${content_name});
 				}
 			`);
 		} else if (anchorAfter === 'null') {
 			block.builders.unmount.addBlock(deindent`
-				if (${content_name}) {
+				${unmountLeadin} {
 					@reinsertAfter(${anchorBefore}, ${content_name});
 				}
 			`);
 		} else {
 			block.builders.unmount.addBlock(deindent`
-				if (${content_name}) {
+				${unmountLeadin} {
 					@reinsertBetween(${anchorBefore}, ${anchorAfter}, ${content_name});
 					@detachNode(${anchorBefore});
 					@detachNode(${anchorAfter});

src/generators/nodes/Text.ts

@@ -58,4 +58,8 @@ export default class Text extends Node {
 			parentNode
 		);
 	}
+
+	remount(name: string) {
+		return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`;
+	}
 }

src/generators/nodes/Window.ts

@@ -19,6 +19,11 @@ const associatedEvents = {
 	scrollY: 'scroll',
 };
 
+const properties = {
+	scrollX: 'pageXOffset',
+	scrollY: 'pageYOffset'
+};
+
 const readonly = new Set([
 	'innerWidth',
 	'innerHeight',
@@ -93,15 +98,16 @@ export default class Window extends Node {
 				if (attribute.name === 'online') return;
 
 				const associatedEvent = associatedEvents[attribute.name];
+				const property = properties[attribute.name] || attribute.name;
 
 				if (!events[associatedEvent]) events[associatedEvent] = [];
 				events[associatedEvent].push(
-					`${attribute.value.name}: this.${attribute.name}`
+					`${attribute.value.name}: this.${property}`
 				);
 
 				// add initial value
 				generator.metaBindings.push(
-					`this._state.${attribute.value.name} = window.${attribute.name};`
+					`this._state.${attribute.value.name} = window.${property};`
 				);
 			}
 		});
@@ -158,10 +164,10 @@ export default class Window extends Node {
 					clearTimeout(${timeout});
 					var x = ${bindings.scrollX
 						? `#component.get("${bindings.scrollX}")`
-						: `window.scrollX`};
+						: `window.pageXOffset`};
 					var y = ${bindings.scrollY
 						? `#component.get("${bindings.scrollY}")`
-						: `window.scrollY`};
+						: `window.pageYOffset`};
 					window.scrollTo(x, y);
 					${timeout} = setTimeout(${clear}, 100);
 				}
@@ -182,7 +188,7 @@ export default class Window extends Node {
 				#component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) {
 					${lock} = true;
 					clearTimeout(${timeout});
-					window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'});
+					window.scrollTo(${isX ? 'x, window.pageYOffset' : 'window.pageXOffset, y'});
 					${timeout} = setTimeout(${clear}, 100);
 				});
 			`);

src/generators/nodes/shared/Node.ts

@@ -161,4 +161,8 @@ export default class Node {
 	getUpdateMountNode(anchor: string) {
 		return this.parent.isDomNode() ? this.parent.var : `${anchor}.parentNode`;
 	}
+
+	remount(name: string) {
+		return `${this.var}.m(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`;
+	}
 }

src/parse/state/tag.ts

@@ -109,10 +109,14 @@ export default function tag(parser: Parser) {
 		}
 	}
 
+	const type = metaTags.has(name)
+		? name.slice(1)
+		: 'Element'; // TODO in v2, capitalised name means 'Component'
+
 	const element: Node = {
 		start,
 		end: null, // filled in later
-		type: 'Element',
+		type,
 		name,
 		attributes: [],
 		children: [],

src/shared/index.js

@@ -138,6 +138,10 @@ export function onDev(eventName, handler) {
 	return on.call(this, eventName, handler);
 }
 
+export function run(fn) {
+	fn();
+}
+
 export function set(newState) {
 	this._set(assign({}, newState));
 	if (this.root._lock) return;
@@ -185,7 +189,7 @@ export function callAll(fns) {
 }
 
 export function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 export function _unmount() {

src/utils/isReference.ts

@@ -1,34 +0,0 @@
-import { Node } from '../interfaces';
-
-export default function isReference(node: Node, parent: Node): boolean {
-	if (node.type === 'MemberExpression') {
-		return !node.computed && isReference(node.object, node);
-	}
-
-	if (node.type === 'Identifier') {
-		// the only time we could have an identifier node without a parent is
-		// if it's the entire body of a function without a block statement –
-		// i.e. an arrow function expression like `a => a`
-		if (!parent) return true;
-
-		// TODO is this right?
-		if (
-			parent.type === 'MemberExpression' ||
-			parent.type === 'MethodDefinition'
-		) {
-			return parent.computed || node === parent.object;
-		}
-
-		// disregard the `bar` in `{ bar: foo }`, but keep it in `{ [bar]: foo }`
-		if (parent.type === 'Property')
-			return parent.computed || node === parent.value;
-
-		// disregard the `bar` in `class Foo { bar () {...} }`
-		if (parent.type === 'MethodDefinition') return false;
-
-		// disregard the `bar` in `export { foo as bar }`
-		if (parent.type === 'ExportSpecifier' && node !== parent.local) return;
-
-		return true;
-	}
-}

src/validate/html/index.ts

@@ -7,11 +7,6 @@ import flattenReference from '../../utils/flattenReference';
 import { Validator } from '../index';
 import { Node } from '../../interfaces';
 
-const meta = new Map([
-	[':Window', validateWindow],
-	[':Head', validateHead]
-]);
-
 function isEmptyBlock(node: Node) {
 	if (!/Block$/.test(node.type) || !node.children) return false;
 	if (node.children.length > 1) return false;
@@ -26,11 +21,15 @@ export default function validateHtml(validator: Validator, html: Node) {
 	const elementStack: Node[] = [];
 
 	function visit(node: Node) {
-		if (node.type === 'Element') {
+		if (node.type === 'Window') {
-			if (meta.has(node.name)) {
+			validateWindow(validator, node, refs, refCallees);
-				return meta.get(node.name)(validator, node, refs, refCallees);
+		}
+
+		else if (node.type === 'Head') {
+			validateHead(validator, node, refs, refCallees);
 		}
 
+		else if (node.type === 'Element') {
 			const isComponent =
 				node.name === ':Self' ||
 				node.name === ':Component' ||
@@ -49,7 +48,9 @@ export default function validateHtml(validator: Validator, html: Node) {
 			if (!isComponent) {
 				a11y(validator, node, elementStack);
 			}
-		} else if (node.type === 'EachBlock') {
+		}
+
+		else if (node.type === 'EachBlock') {
 			if (validator.helpers.has(node.context)) {
 				let c = node.expression.end;
 

src/validate/js/utils/usesThisOrArguments.ts

@@ -1,5 +1,5 @@
 import { walk } from 'estree-walker';
-import isReference from '../../../utils/isReference';
+import isReference from 'is-reference';
 import { Node } from '../../../interfaces';
 
 export default function usesThisOrArguments(node: Node) {

test/css/samples/supports-query/_config.js

@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};

test/css/samples/supports-query/expected.css

@@ -0,0 +1 @@
+@supports (display: grid){.maybe-grid.svelte-xyz{display:grid}}

test/css/samples/supports-query/input.html

@@ -0,0 +1,9 @@
+<div class='maybe-grid'>something with a nice layout</div>
+
+<style>
+	@supports (display: grid) {
+		.maybe-grid {
+			display: grid;
+		}
+	}
+</style>

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,10 +190,10 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function data() {
 	return { foo: 42 }
 }
-
 function add_css() {
 	var style = createElement("style");
 	style.id = 'svelte-2794052100-style';
@@ -244,7 +244,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/collapses-text-around-comments/expected.js

@@ -55,7 +55,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/component-static-immutable/expected-bundle.js

@@ -151,7 +151,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -174,6 +174,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 var Nested = window.Nested;
 
 function create_main_fragment(component, state) {
@@ -218,7 +219,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/component-static-immutable/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/component-static-immutable2/expected-bundle.js

@@ -151,7 +151,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -174,6 +174,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 var Nested = window.Nested;
 
 function create_main_fragment(component, state) {
@@ -218,7 +219,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/component-static-immutable2/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/component-static/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,6 +170,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 var Nested = window.Nested;
 
 function create_main_fragment(component, state) {
@@ -214,7 +215,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/component-static/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/computed-collapsed-if/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,6 +170,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function a(x) {
 	return x * 2;
 }
@@ -202,7 +203,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/computed-collapsed-if/expected.js

@@ -33,7 +33,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/css-media-query/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function add_css() {
 	var style = createElement("style");
 	style.id = 'svelte-3905933315-style';
@@ -230,7 +231,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/css-media-query/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/css-shadow-dom-keyframes/expected-bundle.js

@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -182,6 +182,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div;
 
@@ -220,7 +221,7 @@ class SvelteComponent extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor || null);
+		if (options.target) this._mount(options.target, options.anchor);
 	}
 
 	static get observedAttributes() {

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -39,7 +39,7 @@ class SvelteComponent extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor || null);
+		if (options.target) this._mount(options.target, options.anchor);
 	}
 
 	static get observedAttributes() {

test/js/samples/deconflict-globals/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,6 +170,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function data_1() {
 	return {
 	foo: 'bar'
@@ -179,7 +180,6 @@ function data_1() {
 function oncreate() {
 	alert(JSON.stringify(data()));
 }
-
 function create_main_fragment(component, state) {
 
 	return {
@@ -211,7 +211,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}

test/js/samples/deconflict-globals/expected.js

@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}

test/js/samples/do-use-dataset/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div, text, div_1;
 
@@ -232,7 +233,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/do-use-dataset/expected.js

@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,6 +190,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div, text, div_1;
 
@@ -236,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/dont-use-dataset-in-legacy/expected.js

@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/dont-use-dataset-in-svg/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,6 +190,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var svg, g, g_1;
 
@@ -234,7 +235,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/dont-use-dataset-in-svg/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -179,7 +179,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -202,6 +202,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var text, p, text_1;
 
@@ -359,7 +360,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/each-block-changed-check/expected.js

@@ -158,7 +158,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -182,10 +182,10 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function foo( node, callback ) {
 	// code goes here
 }
-
 var methods = {
 	foo ( bar ) {
 		console.log( bar );
@@ -233,7 +233,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/event-handlers-custom/expected.js

@@ -52,7 +52,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/head-no-whitespace/expected-bundle.js

@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -182,6 +182,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var meta, meta_1;
 
@@ -223,7 +224,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/head-no-whitespace/expected.js

@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/if-block-no-update/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,9 +186,15 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var if_block_anchor;
 
+	function select_block_type(state) {
+		if (state.foo) return create_if_block;
+		return create_if_block_1;
+	}
+
 	var current_block_type = select_block_type(state);
 	var if_block = current_block_type(component, state);
 
@@ -268,11 +274,6 @@ function create_if_block_1(component, state) {
 	};
 }
 
-function select_block_type(state) {
-	if (state.foo) return create_if_block;
-	return create_if_block_1;
-}
-
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
@@ -281,7 +282,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/if-block-no-update/expected.js

@@ -4,6 +4,11 @@ import { assign, createComment, createElement, detachNode, init, insertNode, noo
 function create_main_fragment(component, state) {
 	var if_block_anchor;
 
+	function select_block_type(state) {
+		if (state.foo) return create_if_block;
+		return create_if_block_1;
+	}
+
 	var current_block_type = select_block_type(state);
 	var if_block = current_block_type(component, state);
 
@@ -83,11 +88,6 @@ function create_if_block_1(component, state) {
 	};
 }
 
-function select_block_type(state) {
-	if (state.foo) return create_if_block;
-	return create_if_block_1;
-}
-
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
@@ -96,7 +96,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/if-block-simple/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var if_block_anchor;
 
@@ -257,7 +258,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/if-block-simple/expected.js

@@ -72,7 +72,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized-multiple/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div;
 
@@ -230,7 +231,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized-multiple/expected.js

@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized-url/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div;
 
@@ -225,7 +226,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized-url/expected.js

@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div;
 
@@ -225,7 +226,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-optimized/expected.js

@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-unoptimized/expected-bundle.js

@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -186,6 +186,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div, text, div_1, div_1_style_value;
 
@@ -236,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/inline-style-unoptimized/expected.js

@@ -51,7 +51,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/input-without-blowback-guard/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,6 +190,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var input;
 
@@ -236,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/input-without-blowback-guard/expected.js

@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/legacy-default/expected-bundle.js

@@ -181,7 +181,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -204,6 +204,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var text, p, text_1, text_2, text_3, slot_content_default = component._slotted["default"], slot_content_default_before, slot_content_default_after;
 
@@ -274,7 +275,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/legacy-default/expected.js

@@ -71,7 +71,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/legacy-input-type/expected-bundle.js

@@ -165,7 +165,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -188,6 +188,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var input;
 
@@ -223,7 +224,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/legacy-input-type/expected.js

@@ -36,7 +36,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/legacy-quote-class/expected-bundle.js

@@ -182,7 +182,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -205,6 +205,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div;
 
@@ -250,7 +251,7 @@ function SvelteComponent(options) {
 		var nodes = children(options.target);
 		options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
 		nodes.forEach(detachNode);
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/legacy-quote-class/expected.js

@@ -46,7 +46,7 @@ function SvelteComponent(options) {
 		var nodes = children(options.target);
 		options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
 		nodes.forEach(detachNode);
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/media-bindings/expected-bundle.js

@@ -175,7 +175,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -198,6 +198,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var audio, audio_is_paused = true, audio_updating = false, audio_animationframe;
 
@@ -294,7 +295,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._beforecreate);
 	}

test/js/samples/media-bindings/expected.js

@@ -97,7 +97,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._beforecreate);
 	}

test/js/samples/non-imported-component/expected-bundle.js

@@ -161,7 +161,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -184,6 +184,9 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
+
+
 function create_main_fragment(component, state) {
 	var text;
 
@@ -237,7 +240,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/non-imported-component/expected.js

@@ -57,7 +57,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);

test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,10 +170,9 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
-function oncreate() {}
 
+function oncreate() {}
 function ondestroy() {}
-
 function create_main_fragment(component, state) {
 
 	return {
@@ -207,7 +206,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}

test/js/samples/onrender-onteardown-rewritten/expected.js

@@ -38,7 +38,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}

test/js/samples/setup-method/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,6 +170,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 var methods = {
 	foo ( bar ) {
 		console.log( bar );
@@ -209,7 +210,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/setup-method/expected.js

@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/ssr-no-oncreate-etc/expected-bundle.js

@@ -1,9 +1,7 @@
 function preload(input) {
 	return output;
 }
-
 var SvelteComponent = {};
-
 SvelteComponent.data = function() {
 	return {};
 };

test/js/samples/svg-title/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,6 +190,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var svg, title, text;
 
@@ -224,7 +225,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/svg-title/expected.js

@@ -35,7 +35,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/title/expected-bundle.js

@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -170,6 +170,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var title_value;
 
@@ -200,7 +201,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/title/expected.js

@@ -31,7 +31,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -171,7 +171,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -194,6 +194,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var div, text, p, text_2, text_3, text_4, p_1, text_6, text_8, if_block_4_anchor;
 
@@ -447,7 +448,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/use-elements-as-anchors/expected.js

@@ -254,7 +254,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/window-binding-scroll/expected-bundle.js

@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -190,6 +190,7 @@ var proto = {
 };
 
 /* generated by Svelte vX.Y.Z */
+
 function create_main_fragment(component, state) {
 	var window_updating = false, clear_window_updating = function() { window_updating = false; }, window_updating_timeout, p, text, text_1;
 
@@ -198,7 +199,7 @@ function create_main_fragment(component, state) {
 		window_updating = true;
 
 		component.set({
-			y: this.scrollY
+			y: this.pageYOffset
 		});
 		window_updating = false;
 	}
@@ -207,7 +208,7 @@ function create_main_fragment(component, state) {
 	component.observe("y", function(y) {
 		window_updating = true;
 		clearTimeout(window_updating_timeout);
-		window.scrollTo(window.scrollX, y);
+		window.scrollTo(window.pageXOffset, y);
 		window_updating_timeout = setTimeout(clear_window_updating, 100);
 	});
 
@@ -243,13 +244,13 @@ function create_main_fragment(component, state) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
-	this._state.y = window.scrollY;
+	this._state.y = window.pageYOffset;
 
 	this._fragment = create_main_fragment(this, this._state);
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/js/samples/window-binding-scroll/expected.js

@@ -9,7 +9,7 @@ function create_main_fragment(component, state) {
 		window_updating = true;
 
 		component.set({
-			y: this.scrollY
+			y: this.pageYOffset
 		});
 		window_updating = false;
 	}
@@ -18,7 +18,7 @@ function create_main_fragment(component, state) {
 	component.observe("y", function(y) {
 		window_updating = true;
 		clearTimeout(window_updating_timeout);
-		window.scrollTo(window.scrollX, y);
+		window.scrollTo(window.pageXOffset, y);
 		window_updating_timeout = setTimeout(clear_window_updating, 100);
 	});
 
@@ -54,13 +54,13 @@ function create_main_fragment(component, state) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
-	this._state.y = window.scrollY;
+	this._state.y = window.pageYOffset;
 
 	this._fragment = create_main_fragment(this, this._state);
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 

test/runtime/samples/deconflict-component-refs/_config.js

@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<ul>
+			<li><input></li>
+			<li>bar</li>
+			<li>baz</li>
+		</ul>
+	`,
+
+	data: {
+		components: [
+			{ name: 'foo', edit: true },
+			{ name: 'bar', edit: false },
+			{ name: 'baz', edit: false }
+		]
+	}
+};

test/runtime/samples/deconflict-component-refs/main.html

@@ -0,0 +1,11 @@
+<ul>
+	{{#each components as component}}
+		<li>
+			{{#if component.edit}}
+				<input ref:name bind:value=component.name />
+			{{else}}
+				{{component.name}}
+			{{/if}}
+		</li>
+	{{/each}}
+</ul>

test/runtime/samples/if-block-else-in-each/_config.js

@@ -0,0 +1,9 @@
+export default {
+	data: {
+		array: [true, false],
+	},
+	html: `
+		<div>foo</div>
+		<div>bar</div>
+	`,
+};

test/runtime/samples/if-block-else-in-each/main.html

@@ -0,0 +1,7 @@
+{{#each array as item}}
+	{{#if item}}
+		<div>foo</div>
+	{{else}}
+		<div>bar</div>
+	{{/if}}
+{{/each}}

test/runtime/samples/if-in-keyed-each/_config.js

@@ -0,0 +1,15 @@
+export default {
+	data: {
+		items: [
+			{ id: 1, name: 'one' },
+			{ id: 2, name: 'two' }
+		]
+	},
+
+	html: `
+		<ul>
+			<li>one</li>
+			<li>two</li>
+		</ul>
+	`
+};

test/runtime/samples/if-in-keyed-each/main.html

@@ -0,0 +1,7 @@
+<ul>
+	{{#each items as item @id}}
+		{{#if item.id}}
+			<li>{{item.name}}</li>
+		{{/if}}
+	{{/each}}
+</ul>

test/runtime/samples/transition-js-nested-intro/Child.html

@@ -0,0 +1,17 @@
+<div transition:foo><slot></slot></div>
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					delay: 50,
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-nested-intro/_config.js

@@ -0,0 +1,21 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		component.set({ visible: true });
+		const div = target.querySelector( 'div' );
+		assert.equal( div.foo, 0 );
+
+		raf.tick( 50 );
+		assert.equal( div.foo, 0 );
+
+		raf.tick( 100 );
+		assert.equal( div.foo, 0.5 );
+
+		raf.tick( 125 );
+		assert.equal( div.foo, 0.75 );
+
+		raf.tick( 150 );
+		assert.equal( div.foo, 1 );
+
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-nested-intro/main.html

@@ -0,0 +1,10 @@
+{{#if visible}}
+	<Child>delayed</Child>
+{{/if}}
+
+<script>
+	import Child from './Child.html';
+	export default {
+		components:{ Child }
+	};
+</script>

test/runtime/samples/window-bind-scroll-update/_config.js

@@ -2,10 +2,10 @@ export default {
 	skip: true, // JSDOM
 
 	test ( assert, component, target, window ) {
-		assert.equal( window.scrollY, 0 );
+		assert.equal( window.pageYOffset, 0 );
 
 		component.set({ scrollY: 100 });
-		assert.equal( window.scrollY, 100 );
+		assert.equal( window.pageYOffset, 100 );
 
 		component.destroy();
 	}