invalidate $$props and $$restProps only when there are changes (#5123)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Fix reactivity when passing `$$props` to a `<slot>` ([#3364](https://github.com/sveltejs/svelte/issues/3364))
+* Fix unneeded invalidation of `$$props` and `$$restProps` ([#4993](https://github.com/sveltejs/svelte/issues/4993), [#5118](https://github.com/sveltejs/svelte/issues/5118))
 
 ## 3.24.0
 

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

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

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

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>

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"]');
+	},
+};

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} />