fix: exclude readonly bindings from reactive state validation

`bind:this` etc only go upwards, and depending on the use case it's fine to connect it to a non-reactive variable

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

@@ -2826,9 +2826,11 @@ 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' &&
+			(!property || property.bidirectional) &&
 			context.state.options.dev &&
 			context.state.analysis.runes
 		) {
@@ -2859,8 +2861,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/main.svelte

@@ -52,10 +52,38 @@
 <Child bind:value={pojo.value} />
 <Child bind:value={frozen.value} />
 
-<!-- should not warn -->
+<!-- should not warn (because reactive value) -->
 <input bind:value={reactive.value} />
 <input bind:value={accessors.value} />
 <input bind:value={proxy.value} />
 <Child bind:value={reactive.value} />
 <Child bind:value={accessors.value} />
 <Child bind:value={proxy.value} />
+
+<!-- should not warn (because one-way binding) -->
+<svelte:window
+	bind:innerHeight={pojo.value}
+	bind:innerWidth={pojo.value}
+	bind:outerHeight={pojo.value}
+	bind:outerWidth={pojo.value}
+	bind:online={pojo.value}
+	bind:devicePixelRatio={pojo.value}
+/>
+<svelte:document
+	bind:activeElement={pojo.value}
+	bind:fullscreenElement={pojo.value}
+	bind:pointerLockElement={pojo.value}
+	bind:visibilityState={pojo.value}
+/>
+<!-- can't test size bindings because it's not available in JSDom https://github.com/jsdom/jsdom/issues/3368 -->
+<div bind:this={pojo.value}></div>
+<video
+	bind:duration={pojo.value}
+	bind:buffered={pojo.value}
+	bind:played={pojo.value}
+	bind:seeking={pojo.value}
+	bind:readyState={pojo.value}
+	bind:videoHeight={pojo.value}
+	bind:videoWidth={pojo.value}
+></video>
+<img bind:naturalHeight={pojo.value} bind:naturalWidth={pojo.value} />