fix: exclude bind:this from reactive state validation (#12566)

Author: dummdidumm

.changeset/silent-rocks-yell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: exclude `bind:this` from reactive state validation

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2867,9 +2867,18 @@ export const template_visitors = {
 	BindDirective(node, context) {
 		const { state, path, visit } = context;
 		const expression = node.expression;
+		const property = binding_properties[node.name];
 
 		if (
 			expression.type === 'MemberExpression' &&
+			(node.name !== 'this' ||
+				path.some(
+					({ type }) =>
+						type === 'IfBlock' ||
+						type === 'EachBlock' ||
+						type === 'AwaitBlock' ||
+						type === 'KeyBlock'
+				)) &&
 			context.state.options.dev &&
 			context.state.analysis.runes
 		) {
@@ -2900,8 +2909,7 @@ export const template_visitors = {
 		/** @type {CallExpression} */
 		let call_expr;
 
-		const property = binding_properties[node.name];
-		if (property && property.event) {
+		if (property?.event) {
 			call_expr = b.call(
 				'$.bind_property',
 				b.literal(node.name),

packages/svelte/src/compiler/phases/bindings.js

@@ -15,7 +15,8 @@ export const binding_properties = {
 	// media
 	currentTime: {
 		valid_elements: ['audio', 'video'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	duration: {
 		valid_elements: ['audio', 'video'],
@@ -25,7 +26,8 @@ export const binding_properties = {
 	focused: {},
 	paused: {
 		valid_elements: ['audio', 'video'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	buffered: {
 		valid_elements: ['audio', 'video'],
@@ -41,15 +43,18 @@ export const binding_properties = {
 	},
 	volume: {
 		valid_elements: ['audio', 'video'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	muted: {
 		valid_elements: ['audio', 'video'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	playbackRate: {
 		valid_elements: ['audio', 'video'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	seeking: {
 		valid_elements: ['audio', 'video'],
@@ -124,11 +129,13 @@ export const binding_properties = {
 	},
 	scrollX: {
 		valid_elements: ['svelte:window'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	scrollY: {
 		valid_elements: ['svelte:window'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	},
 	online: {
 		valid_elements: ['svelte:window'],
@@ -180,34 +187,41 @@ export const binding_properties = {
 		omit_in_ssr: true // no corresponding attribute
 	},
 	checked: {
-		valid_elements: ['input']
+		valid_elements: ['input'],
+		bidirectional: true
 	},
 	group: {
-		valid_elements: ['input']
+		valid_elements: ['input'],
+		bidirectional: true
 	},
 	// various
 	this: {
 		omit_in_ssr: true
 	},
 	innerText: {
-		invalid_elements: ['svelte:window', 'svelte:document']
+		invalid_elements: ['svelte:window', 'svelte:document'],
+		bidirectional: true
 	},
 	innerHTML: {
-		invalid_elements: ['svelte:window', 'svelte:document']
+		invalid_elements: ['svelte:window', 'svelte:document'],
+		bidirectional: true
 	},
 	textContent: {
-		invalid_elements: ['svelte:window', 'svelte:document']
+		invalid_elements: ['svelte:window', 'svelte:document'],
+		bidirectional: true
 	},
 	open: {
 		event: 'toggle',
 		bidirectional: true,
 		valid_elements: ['details']
 	},
 	value: {
-		valid_elements: ['input', 'textarea', 'select']
+		valid_elements: ['input', 'textarea', 'select'],
+		bidirectional: true
 	},
 	files: {
 		valid_elements: ['input'],
-		omit_in_ssr: true
+		omit_in_ssr: true,
+		bidirectional: true
 	}
 };

packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js

@@ -7,10 +7,11 @@ export default test({
 
 	async test({ assert, warnings }) {
 		assert.deepEqual(warnings, [
-			`\`bind:value={pojo.value}\` (main.svelte:50:7) is binding to a non-reactive property`,
-			`\`bind:value={frozen.value}\` (main.svelte:51:7) is binding to a non-reactive property`,
-			`\`bind:value={pojo.value}\` (main.svelte:52:7) is binding to a non-reactive property`,
-			`\`bind:value={frozen.value}\` (main.svelte:53:7) is binding to a non-reactive property`
+			'`bind:value={pojo.value}` (main.svelte:50:7) is binding to a non-reactive property',
+			'`bind:value={frozen.value}` (main.svelte:51:7) is binding to a non-reactive property',
+			'`bind:value={pojo.value}` (main.svelte:52:7) is binding to a non-reactive property',
+			'`bind:value={frozen.value}` (main.svelte:53:7) is binding to a non-reactive property',
+			'`bind:this={pojo.value}` (main.svelte:55:6) is binding to a non-reactive property'
 		]);
 	}
 });

packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte

@@ -51,6 +51,9 @@
 <input bind:value={frozen.value} />
 <Child bind:value={pojo.value} />
 <Child bind:value={frozen.value} />
+{#if value}
+	<div bind:this={pojo.value}></div>
+{/if}
 
 <!-- should not warn -->
 <input bind:value={reactive.value} />
@@ -59,3 +62,4 @@
 <Child bind:value={reactive.value} />
 <Child bind:value={accessors.value} />
 <Child bind:value={proxy.value} />
+<div bind:this={pojo.value}></div>