update props of existing dynamic component

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`

test/runtime/samples/dynamic-component-update-existing-instance/Bar.html

@@ -0,0 +1 @@
+<p>Bar {{x}}</p>

test/runtime/samples/dynamic-component-update-existing-instance/Foo.html

@@ -0,0 +1 @@
+<p>Foo {{x}}</p>

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>
+		`);
+	}
+};

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>