fix: don't throw bind_invalid_export if there's also a bindable prop with the same name (#14813)

Author: paoloricciuti

.changeset/tidy-dragons-thank.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't throw `bind_invalid_export` if there's also a bindable prop with the same name

packages/svelte/src/internal/client/validate.js

@@ -50,7 +50,7 @@ export function validate_prop_bindings($$props, bindable, exports, component) {
 		var name = component.name;
 
 		if (setter) {
-			if (exports.includes(key)) {
+			if (exports.includes(key) && !bindable.includes(key)) {
 				e.bind_invalid_export(component[FILENAME], key, name);
 			}
 

packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte

@@ -0,0 +1,9 @@
+<script>
+	let { open: is_open = $bindable() } = $props();
+
+	export function open(){
+		is_open = !is_open;
+	}
+</script>
+
+<button onclick={open}>{is_open}</button>

packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js

@@ -0,0 +1,35 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: `<button>true</button><button>true</button><input type="checkbox" />`,
+	ssrHtml: `<button>true</button><button>true</button><input type="checkbox" checked=""/>`,
+
+	async test({ assert, target, instance }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const input = target.querySelector('input');
+		flushSync(() => {
+			btn1.click();
+		});
+		assert.equal(btn1.innerHTML, 'false');
+		assert.equal(btn2.innerHTML, 'false');
+		assert.equal(input?.checked, false);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.equal(btn1.innerHTML, 'true');
+		assert.equal(btn2.innerHTML, 'true');
+		assert.equal(input?.checked, true);
+
+		flushSync(() => {
+			input?.click();
+		});
+		assert.equal(btn1.innerHTML, 'false');
+		assert.equal(btn2.innerHTML, 'false');
+		assert.equal(input?.checked, false);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let open = $state(true);
+	let comp;
+</script>
+
+<Component bind:this={comp} bind:open />
+
+<button onclick={()=>{
+	comp.open();
+}}>{open}</button>
+
+<input type="checkbox" bind:checked={open} />