From f4e66c0e726022bb646c13b71c38cef25ced361f Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 3 Dec 2017 19:00:19 -0500
Subject: [PATCH] update props of existing dynamic component

---
 src/generators/dom/visitors/Component.ts      | 35 ++++++++++++-------
 .../Bar.html                                  |  1 +
 .../Foo.html                                  |  1 +
 .../_config.js                                | 19 ++++++++++
 .../main.html                                 | 12 +++++++
 5 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/Bar.html
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/Foo.html
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/main.html

diff --git a/src/generators/dom/visitors/Component.ts b/src/generators/dom/visitors/Component.ts
index a725953ffa..eac4fa30aa 100644
--- a/src/generators/dom/visitors/Component.ts
+++ b/src/generators/dom/visitors/Component.ts
@@ -75,14 +75,14 @@ export default function visitComponent(
 	const ref = node.attributes.find((a: Node) => a.type === 'Ref');
 	if (ref) generator.usesRefs = true;
 
+	const updates: string[] = [];
+
 	if (attributes.length || bindings.length) {
 		const initialProps = attributes
 			.map((attribute: Attribute) => `${attribute.name}: ${attribute.value}`);
 
 		const initialPropString = stringifyProps(initialProps);
 
-		const updates: string[] = [];
-
 		attributes
 			.filter((attribute: Attribute) => attribute.dynamic)
 			.forEach((attribute: Attribute) => {
@@ -202,15 +202,6 @@ export default function visitComponent(
 		} else if (initialProps.length) {
 			componentInitProperties.push(`data: ${initialPropString}`);
 		}
-
-		if (updates.length) {
-			block.builders.update.addBlock(deindent`
-				var ${name}_changes = {};
-				${updates.join('\n')}
-				${name}._set(${name}_changes);
-				${bindings.length && `${name_updating} = {};`}
-			`);
-		}
 	}
 
 	const isSwitch = node.name === ':Switch';
@@ -303,11 +294,20 @@ export default function visitComponent(
 					else if (#component.refs.${ref.name} === ${name}) {
 						#component.refs.${ref.name} = null;
 					}`}
-			} else {
-				// normal update
 			}
 		`);
 
+		if (updates.length) {
+			block.builders.update.addBlock(deindent`
+				else {
+					var ${name}_changes = {};
+					${updates.join('\n')}
+					${name}._set(${name}_changes);
+					${bindings.length && `${name_updating} = {};`}
+				}
+			`);
+		}
+
 		if (!state.parentNode) block.builders.unmount.addLine(`if (${name}) ${name}._unmount();`);
 
 		block.builders.destroy.addLine(`if (${name}) ${name}.destroy(false);`);
@@ -339,6 +339,15 @@ export default function visitComponent(
 			`${name}._mount(${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'});`
 		);
 
+		if (updates.length) {
+			block.builders.update.addBlock(deindent`
+				var ${name}_changes = {};
+				${updates.join('\n')}
+				${name}._set(${name}_changes);
+				${bindings.length && `${name_updating} = {};`}
+			`);
+		}
+
 		if (!state.parentNode) block.builders.unmount.addLine(`${name}._unmount();`);
 
 		block.builders.destroy.addLine(deindent`
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/Bar.html b/test/runtime/samples/dynamic-component-update-existing-instance/Bar.html
new file mode 100644
index 0000000000..80328a2e8a
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/Bar.html
@@ -0,0 +1 @@
+<p>Bar {{x}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/Foo.html b/test/runtime/samples/dynamic-component-update-existing-instance/Foo.html
new file mode 100644
index 0000000000..fcb10c0f99
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/Foo.html
@@ -0,0 +1 @@
+<p>Foo {{x}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/_config.js b/test/runtime/samples/dynamic-component-update-existing-instance/_config.js
new file mode 100644
index 0000000000..d614cf82c5
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/_config.js
@@ -0,0 +1,19 @@
+export default {
+	data: {
+		x: 1
+	},
+
+	html: `
+		<p>Foo 1</p>
+	`,
+
+	test(assert, component, target) {
+		component.set({
+			x: 2
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo 2</p>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/main.html b/test/runtime/samples/dynamic-component-update-existing-instance/main.html
new file mode 100644
index 0000000000..eb39498a5c
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/main.html
@@ -0,0 +1,12 @@
+<:Switch { x ? Foo : Bar } x='{{x}}'/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export default {
+		data() {
+			return { Foo, Bar };
+		}
+	};
+</script>
\ No newline at end of file