Merge branch 'master' into gh-2917

src/compiler/compile/nodes/EventHandler.ts

@@ -3,6 +3,7 @@ import Expression from './shared/Expression';
 import Component from '../Component';
 import deindent from '../utils/deindent';
 import Block from '../render_dom/Block';
+import { sanitize } from '../../utils/names';
 
 export default class EventHandler extends Node {
 	type: 'EventHandler';
@@ -41,7 +42,7 @@ export default class EventHandler extends Node {
 				}
 			}
 		} else {
-			const name = component.get_unique_name(`${this.name}_handler`);
+			const name = component.get_unique_name(`${sanitize(this.name)}_handler`);
 
 			component.add_var({
 				name,

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -466,14 +466,26 @@ export default class EachBlockWrapper extends Wrapper {
 						${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
 					}
 				`
-				: deindent`
-					${iterations}[#i] = ${create_each_block}(child_ctx);
-					${iterations}[#i].c();
-					${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`}
-					${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
-				`;
+				: has_transitions
+					? deindent`
+						if (${iterations}[#i]) {
+							@transition_in(${this.vars.iterations}[#i], 1);
+						} else {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							@transition_in(${this.vars.iterations}[#i], 1);
+							${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
+						}
+					`
+					: deindent`
+						if (!${iterations}[#i]) {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
+						}
+					`;
 
-			const start = this.block.has_update_method ? '0' : `${view_length}`;
+			const start = this.block.has_update_method ? '0' : `#old_length`;
 
 			let remove_old_blocks;
 
@@ -487,19 +499,20 @@ export default class EachBlockWrapper extends Wrapper {
 				`);
 				remove_old_blocks = deindent`
 					@group_outros();
-					for (; #i < ${view_length}; #i += 1) ${out}(#i);
+					for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) ${out}(#i);
 					@check_outros();
 				`;
 			} else {
 				remove_old_blocks = deindent`
-					for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) {
+					for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) {
 						${iterations}[#i].d(1);
 					}
 					${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`}
 				`;
 			}
 
 			const update = deindent`
+				${!this.block.has_update_method && `const #old_length = ${this.vars.each_block_value}.length;`}
 				${this.vars.each_block_value} = ${snippet};
 
 				for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -447,7 +447,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			block.builders.intro.add_block(deindent`
-				@transition_in(${name}.$$.fragment, #local);
+				if (${name}) @transition_in(${name}.$$.fragment, #local);
 			`);
 
 			if (updates.length) {

src/compiler/utils/names.ts

@@ -14,7 +14,9 @@ export const globals = new Set([
 	'encodeURI',
 	'encodeURIComponent',
 	'Error',
+	'EvalError',
 	'Infinity',
+	'InternalError',
 	'Intl',
 	'isFinite',
 	'isNaN',
@@ -29,11 +31,16 @@ export const globals = new Set([
 	'process',
 	'Promise',
 	'prompt',
+	'RangeError',
+	'ReferenceError',
 	'RegExp',
 	'Set',
 	'String',
+	'SyntaxError',
+	'TypeError',
 	'undefined',
-	'window',
+	'URIError',
+	'window'
 ]);
 
 export const reserved = new Set([

test/runtime/samples/dynamic-component-nulled-out-intro/_config.js

@@ -0,0 +1,5 @@
+export default {
+	test({ component }) {
+		component.visible = true;
+	}
+};

test/runtime/samples/dynamic-component-nulled-out-intro/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let visible = false;
+</script>
+
+{#if visible}
+	<svelte:component this={null}/>
+{/if}

test/runtime/samples/each-block-component-no-props/Child.svelte

@@ -0,0 +1 @@
+<p>hello</p>

test/runtime/samples/each-block-component-no-props/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<p>hello</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, ``);
+
+		await component.add();
+		assert.htmlEqual(target.innerHTML, `<p>hello</p>`);
+
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, ``);
+	}
+};

test/runtime/samples/each-block-component-no-props/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let items = [1];
+
+	export function add() {
+		items = [1];
+	}
+
+	export function remove() {
+		items = [];
+	}
+</script>
+
+{#each items as item}
+	<Child/>
+{/each}

test/runtime/samples/event-handler-shorthand-sanitized/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me now</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.Event('click-now');
+
+		let clicked;
+		component.$on('click-now', () => {
+			clicked = true;
+		});
+
+		button.dispatchEvent(event);
+		assert.ok(clicked);
+	}
+};

test/runtime/samples/event-handler-shorthand-sanitized/main.svelte

@@ -0,0 +1 @@
+<button on:click-now>click me now</button>