Merge pull request #1630 from sveltejs/gh-1621

register dependencies of dynamic component expressions

Author: Rich-Harris

src/compile/nodes/Component.ts

@@ -78,6 +78,10 @@ export default class Component extends Node {
 	) {
 		this.cannotUseInnerHTML();
 
+		if (this.expression) {
+			block.addDependencies(this.expression.dependencies);
+		}
+
 		this.attributes.forEach(attr => {
 			block.addDependencies(attr.dependencies);
 		});

test/runtime/samples/dynamic-component-in-if/Bar.html

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

test/runtime/samples/dynamic-component-in-if/Foo.html

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

test/runtime/samples/dynamic-component-in-if/_config.js

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

test/runtime/samples/dynamic-component-in-if/main.html

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