Merge pull request #1597 from sveltejs/gh-1596

null out refs to dynamic components

src/compile/nodes/Component.ts

@@ -429,12 +429,13 @@ export default class Component extends Node {
 						`)}
 
 						${this.ref && `#component.refs.${this.ref} = ${name};`}
-					}
-
-					${this.ref && deindent`
-						else if (#component.refs.${this.ref} === ${name}) {
+					} else {
+						${name} = null;
+						${this.ref && deindent`
+						if (#component.refs.${this.ref} === ${name}) {
 							#component.refs.${this.ref} = null;
 						}`}
+					}
 				}
 			`);
 

test/runtime/samples/dynamic-component-nulled-out/Foo.html

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

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

@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<p>Foo</p>
+	`,
+
+	nestedTransitions: true,
+
+	test(assert, component, target) {
+		const state = component.get();
+
+		component.set({ Foo: null });
+
+		assert.htmlEqual(target.innerHTML, ``);
+
+		component.set({ Foo: state.Foo });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo</p>
+		`);
+	}
+};

test/runtime/samples/dynamic-component-nulled-out/main.html

@@ -0,0 +1,11 @@
+<svelte:component this={Foo}/>
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		data() {
+			return { Foo };
+		}
+	};
+</script>