From 52863a64c17f7ad3aa2bff26767384812268080a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Fri, 10 Jul 2020 17:21:49 +0800
Subject: [PATCH] invalidate $$props or $$restProps only when there's changes

---
 src/compiler/compile/render_dom/index.ts      |  1 +
 .../wrappers/InlineComponent/index.ts         |  2 +-
 src/runtime/internal/utils.ts                 |  4 +++
 .../Comp.svelte                               |  6 ++++
 .../_config.js                                | 30 +++++++++++++++++++
 .../main.svelte                               |  8 +++++
 6 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/Comp.svelte
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/_config.js
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/main.svelte

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 3b5001d483f1..f6ffd8f2a649 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -86,6 +86,7 @@ export default function dom(
 	const set = (uses_props || uses_rest || writable_props.length > 0 || component.slots.size > 0)
 		? x`
 			${$$props} => {
+				${(uses_props || uses_rest) && b`if (@is_empty(${$$props})) return;`}
 				${uses_props && renderer.invalidate('$$props', x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`)}
 				${uses_rest && !uses_props && x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`}
 				${uses_rest && renderer.invalidate('$$restProps', x`$$restProps = ${compute_rest}`)}
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 271b3de1e1c3..814f365a848e 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -468,7 +468,7 @@ export default class InlineComponentWrapper extends Wrapper {
 						${name} = null;
 					}
 				} else if (${switch_value}) {
-					${updates.length && b`${name}.$set(${name_changes});`}
+					${updates.length > 0 && b`${name}.$set(${name_changes});`}
 				}
 			`);
 
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index d752c9de9d83..3fd0a2b70166 100644
--- a/src/runtime/internal/utils.ts
+++ b/src/runtime/internal/utils.ts
@@ -42,6 +42,10 @@ export function not_equal(a, b) {
 	return a != a ? b == b : a !== b;
 }
 
+export function is_empty(obj) {
+	return Object.keys(obj).length === 0;
+}
+
 export function validate_store(store, name) {
 	if (store != null && typeof store.subscribe !== 'function') {
 		throw new Error(`'${name}' is not a store with a 'subscribe' method`);
diff --git a/test/runtime/samples/props-reactive-only-with-change/Comp.svelte b/test/runtime/samples/props-reactive-only-with-change/Comp.svelte
new file mode 100644
index 000000000000..0eaf8a40d48a
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/Comp.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let id;
+  export let callback;
+
+  $: $$props, callback(id);
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-only-with-change/_config.js b/test/runtime/samples/props-reactive-only-with-change/_config.js
new file mode 100644
index 000000000000..04170620c817
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/_config.js
@@ -0,0 +1,30 @@
+let callbacks = [];
+
+export default {
+	props: {
+		callback: (value) => callbacks.push(value),
+		val1: "1",
+		val2: "2",
+	},
+
+	before_test() {
+		callbacks = [];
+	},
+
+	async test({ assert, component, target }) {
+		assert.equal(callbacks.length, 2);
+		assert.equal(JSON.stringify(callbacks), '["1","2"]');
+
+		component.val1 = "3";
+		assert.equal(callbacks.length, 3);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1"]');
+
+		component.val1 = "4";
+		assert.equal(callbacks.length, 4);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1","1"]');
+
+		component.val2 = "5";
+		assert.equal(callbacks.length, 5);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1","1","2"]');
+	},
+};
diff --git a/test/runtime/samples/props-reactive-only-with-change/main.svelte b/test/runtime/samples/props-reactive-only-with-change/main.svelte
new file mode 100644
index 000000000000..73ddd137f5bc
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Comp from './Comp.svelte';
+	export let callback;
+	export let val1, val2;
+</script>
+
+<Comp id="1" {callback} value={val1} />
+<Comp id="2" {callback} value={val2} />
\ No newline at end of file