From 7ca36c8766f25fc6c87ae28ef52115b8978c7a55 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 9 Dec 2017 20:52:17 -0500
Subject: [PATCH] fix dynamic components inside elements - fixes #993

---
 src/generators/nodes/Component.ts             |  4 +++-
 .../dynamic-component-inside-element/Bar.html |  1 +
 .../dynamic-component-inside-element/Foo.html |  1 +
 .../_config.js                                | 19 +++++++++++++++++++
 .../main.html                                 | 14 ++++++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/Bar.html
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/Foo.html
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/main.html

diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts
index 551f54b8ec3f..95b29fcbd36a 100644
--- a/src/generators/nodes/Component.ts
+++ b/src/generators/nodes/Component.ts
@@ -289,6 +289,8 @@ export default class Component extends Node {
 				`if (${name}) ${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
 			);
 
+			const updateMountNode = this.getUpdateMountNode(anchor);
+
 			block.builders.update.addBlock(deindent`
 				if (${switch_vars.value} !== (${switch_vars.value} = ${snippet})) {
 					if (${name}) ${name}.destroy();
@@ -298,7 +300,7 @@ export default class Component extends Node {
 						${name}._fragment.c();
 
 						${this.children.map(child => remount(generator, child, name))}
-						${name}._mount(${anchor}.parentNode, ${anchor});
+						${name}._mount(${updateMountNode}, ${anchor});
 
 						${eventHandlers.map(handler => deindent`
 							${name}.on("${handler.name}", ${handler.var});
diff --git a/test/runtime/samples/dynamic-component-inside-element/Bar.html b/test/runtime/samples/dynamic-component-inside-element/Bar.html
new file mode 100644
index 000000000000..7c21e68c89ff
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/Bar.html
@@ -0,0 +1 @@
+<p>{{x}}, therefore Bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/Foo.html b/test/runtime/samples/dynamic-component-inside-element/Foo.html
new file mode 100644
index 000000000000..2303a92c0a11
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/Foo.html
@@ -0,0 +1 @@
+<p>{{x}}, therefore Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/_config.js b/test/runtime/samples/dynamic-component-inside-element/_config.js
new file mode 100644
index 000000000000..de1dbfdac226
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/_config.js
@@ -0,0 +1,19 @@
+export default {
+	data: {
+		x: true
+	},
+
+	html: `
+		<div><p>true, therefore Foo</p></div>
+	`,
+
+	test(assert, component, target) {
+		component.set({
+			x: false
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>false, therefore Bar</p></div>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/main.html b/test/runtime/samples/dynamic-component-inside-element/main.html
new file mode 100644
index 000000000000..2f2eb2658735
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/main.html
@@ -0,0 +1,14 @@
+<div>
+	<:Component { x ? Foo : Bar } x='{{x}}'/>
+</div>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export default {
+		data() {
+			return { Foo, Bar };
+		}
+	};
+</script>
\ No newline at end of file