diff --git a/.changeset/tidy-dragons-thank.md b/.changeset/tidy-dragons-thank.md new file mode 100644 index 000000000000..1257ec02101e --- /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 951feee33bdf..417c145eb2ec 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 000000000000..17e895fd8cba --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte @@ -0,0 +1,9 @@ + + + \ 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 000000000000..45cd58f55c53 --- /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: ``, + ssrHtml: ``, + + 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 000000000000..3b47eef156ad --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file