From e75693e6e6f265d1b5613979b0d819f836994770 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 23 Dec 2024 21:26:49 +0100
Subject: [PATCH] fix: don't throw `bind_invalid_export` if there's also a
 bindable prop with the same name

---
 .changeset/tidy-dragons-thank.md              |  5 +++
 .../svelte/src/internal/client/validate.js    |  2 +-
 .../bindable-prop-and-export/Component.svelte |  9 +++++
 .../bindable-prop-and-export/_config.js       | 35 +++++++++++++++++++
 .../bindable-prop-and-export/main.svelte      | 14 ++++++++
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-dragons-thank.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte

diff --git a/.changeset/tidy-dragons-thank.md b/.changeset/tidy-dragons-thank.md
new file mode 100644
index 0000000000..1257ec0210
--- /dev/null
+++ b/.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
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 951feee33b..417c145eb2 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/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);
 			}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte
new file mode 100644
index 0000000000..17e895fd8c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js
new file mode 100644
index 0000000000..45cd58f55c
--- /dev/null
+++ b/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);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte
new file mode 100644
index 0000000000..3b47eef156
--- /dev/null
+++ b/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} />
\ No newline at end of file