add updating guard to binding callback (sveltejs#5126)

Author: tanhauhau

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Prevent duplicate invalidation with certain two-way component bindings ([#3180](https://github.com/sveltejs/svelte/issues/3180), [#5117](https://github.com/sveltejs/svelte/issues/5117), [#5144](https://github.com/sveltejs/svelte/issues/5144))
 * 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))
 

src/compiler/compile/render_dom/index.ts

@@ -86,7 +86,6 @@ 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}`)}
@@ -421,7 +420,7 @@ export default function dom(
 
 				${component.partly_hoisted}
 
-				${set && b`$$self.$set = ${set};`}
+				${set && b`$$self.$$set = ${set};`}
 
 				${capture_state && b`$$self.$capture_state = ${capture_state};`}
 

src/runtime/internal/Component.ts

@@ -1,6 +1,6 @@
 import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
-import { blank_object, is_function, run, run_all, noop } from './utils';
+import { blank_object, is_empty, is_function, run, run_all, noop } from './utils';
 import { children, detach } from './dom';
 import { transition_in } from './transitions';
 
@@ -33,6 +33,7 @@ interface T$$ {
 	context: Map<any, any>;
 	on_mount: any[];
 	on_destroy: any[];
+	skip_bound: boolean;
 }
 
 export function bind(component, name, callback) {
@@ -120,7 +121,8 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 		// everything else
 		callbacks: blank_object(),
-		dirty
+		dirty,
+		skip_bound: false
 	};
 
 	let ready = false;
@@ -129,7 +131,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
 		? instance(component, prop_values, (i, ret, ...rest) => {
 			const value = rest.length ? rest[0] : ret;
 			if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
-				if ($$.bound[i]) $$.bound[i](value);
+				if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
 				if (ready) make_dirty(component, i);
 			}
 			return ret;
@@ -166,6 +168,7 @@ export let SvelteElement;
 if (typeof HTMLElement === 'function') {
 	SvelteElement = class extends HTMLElement {
 		$$: T$$;
+		$$set?: ($$props: any) => void;
 		constructor() {
 			super();
 			this.attachShadow({ mode: 'open' });
@@ -199,14 +202,19 @@ if (typeof HTMLElement === 'function') {
 			};
 		}
 
-		$set() {
-			// overridden by instance, if it has props
+		$set($$props) {
+			if (this.$$set && !is_empty($$props)) {
+				this.$$.skip_bound = true;
+				this.$$set($$props);
+				this.$$.skip_bound = false;
+			}
 		}
 	};
 }
 
 export class SvelteComponent {
 	$$: T$$;
+	$$set?: ($$props: any) => void;
 
 	$destroy() {
 		destroy_component(this, 1);
@@ -223,7 +231,11 @@ export class SvelteComponent {
 		};
 	}
 
-	$set() {
-		// overridden by instance, if it has props
+	$set($$props) {
+		if (this.$$set && !is_empty($$props)) {
+			this.$$.skip_bound = true;
+			this.$$set($$props);
+			this.$$.skip_bound = false;
+		}
 	}
 }

test/js/samples/action-custom-event-handler/expected.js

@@ -55,7 +55,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { bar } = $$props;
 	const foo_function = () => handleFoo(bar);
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("bar" in $$props) $$invalidate(0, bar = $$props.bar);
 	};
 

test/js/samples/bind-open/expected.js

@@ -52,7 +52,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(0, open);
 	}
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("open" in $$props) $$invalidate(0, open = $$props.open);
 	};
 

test/js/samples/bind-width-height/expected.js

@@ -46,7 +46,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, h);
 	}
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("w" in $$props) $$invalidate(0, w = $$props.w);
 		if ("h" in $$props) $$invalidate(1, h = $$props.h);
 	};

test/js/samples/bindings-readonly-order/expected.js

@@ -68,7 +68,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(0, files);
 	}
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("files" in $$props) $$invalidate(0, files = $$props.files);
 	};
 

test/js/samples/capture-inject-state/expected.js

@@ -118,7 +118,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { $$slots = {}, $$scope } = $$props;
 	validate_slots("Component", $$slots, []);
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("prop" in $$props) $$subscribe_prop($$invalidate(0, prop = $$props.prop));
 		if ("alias" in $$props) $$invalidate(1, realName = $$props.alias);
 	};

test/js/samples/collapses-text-around-comments/expected.js

@@ -48,7 +48,7 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { foo = 42 } = $$props;
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("foo" in $$props) $$invalidate(0, foo = $$props.foo);
 	};
 

test/js/samples/computed-collapsed-if/expected.js

@@ -12,7 +12,7 @@ function instance($$self, $$props, $$invalidate) {
 		return x * 3;
 	}
 
-	$$self.$set = $$props => {
+	$$self.$$set = $$props => {
 		if ("x" in $$props) $$invalidate(0, x = $$props.x);
 	};