feat call component update only when snippet is dirty

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -371,6 +371,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			const switch_props = block.get_unique_name('switch_props');
 
 			const snippet = this.node.expression.manipulate(block);
+			const dependencies = this.node.expression.dynamic_dependencies();
 
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
@@ -415,8 +416,13 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
+			let update_condition = x`${switch_value} !== (${switch_value} = ${snippet})`;
+			if (dependencies.length > 0) {
+				update_condition = x`${block.renderer.dirty(dependencies)} && ${update_condition}`;
+			}
+
 			block.chunks.update.push(b`
-				if (${switch_value} !== (${switch_value} = ${snippet})) {
+				if (${update_condition}) {
 					if (${name}) {
 						@group_outros();
 						const old_component = ${name};

test/runtime/samples/dynamic-component-dirty/_config.js

@@ -0,0 +1,20 @@
+const calls = [];
+export default {
+	props: {
+		calls,
+	},
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelector('button');
+
+		assert.deepEqual(calls.length, 1);
+
+		const event = new window.MouseEvent('click');
+		await buttons.dispatchEvent(event);
+
+		assert.deepEqual(calls.length, 1);
+
+		component.current_path = 'bar';
+		assert.deepEqual(calls.length, 2);
+	},
+};

test/runtime/samples/dynamic-component-dirty/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { writable } from 'svelte/store';
+	export let current_path = 'foo';
+	export let calls;
+	let i = 0;
+	function getComponent(path) {
+		calls.push(path);
+		return null;
+	}
+	function onClick() {
+		i = i + 1;
+	}
+</script>
+
+<svelte:component this={getComponent(current_path)} />
+<button on:click={onClick}>click me</button>
+{ i }