add changeset and tests

Author: trueadm

.changeset/slimy-donkeys-hang.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add support for bind getters/setters

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

@@ -42,7 +42,7 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
-	/** @type {Identifier | MemberExpression | null} */
+	/** @type {Identifier | MemberExpression | [Expression, Expression] | null} */
 	let bind_this = null;
 
 	/** @type {ExpressionStatement[]} */
@@ -162,17 +162,21 @@ export function build_component(node, component_name, context, anchor = context.
 			}
 		} else if (attribute.type === 'BindDirective') {
 			if (Array.isArray(attribute.expression)) {
-				const [get_expression, set_expression] = attribute.expression;
-				const get = /** @type {Expression} */ (context.visit(get_expression));
-				const set = /** @type {Expression} */ (context.visit(set_expression));
-				const get_id = b.id(context.state.scope.generate('bind_get'));
-				const set_id = b.id(context.state.scope.generate('bind_set'));
+				if (attribute.name === 'this') {
+					bind_this = attribute.expression;
+				} else {
+					const [get_expression, set_expression] = attribute.expression;
+					const get = /** @type {Expression} */ (context.visit(get_expression));
+					const set = /** @type {Expression} */ (context.visit(set_expression));
+					const get_id = b.id(context.state.scope.generate('bind_get'));
+					const set_id = b.id(context.state.scope.generate('bind_set'));
 
-				context.state.init.push(b.var(get_id, get));
-				context.state.init.push(b.var(set_id, set));
+					context.state.init.push(b.var(get_id, get));
+					context.state.init.push(b.var(set_id, set));
 
-				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
-				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+					push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+					push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+				}
 			} else {
 				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 

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

@@ -171,7 +171,7 @@ export function build_bind_this(expression, value, { state, visit }) {
 		const get = /** @type {Expression} */ (visit(get_expression));
 		const set = /** @type {Expression} */ (visit(set_expression));
 
-		return b.call('$.bind_this', value, get, set);
+		return b.call('$.bind_this', value, set, get);
 	}
 
 	/** @type {Identifier[]} */

packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/Child.svelte

@@ -0,0 +1,11 @@
+<script>
+	let div = $state();
+
+	$effect(() => {
+		console.log(div?.textContent);
+	})
+
+	export const someData = '123';
+</script>
+
+<div bind:this={() => div, v => div = v}>123</div>

packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		assert.htmlEqual(target.innerHTML, `<div>123</div>`);
+
+		assert.deepEqual(logs, ['123', '123']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+
+	let child = $state();
+
+	$effect(() => {
+		console.log(child.someData);
+	});
+</script>
+
+<Child bind:this={() => child, v => child = v} />

packages/svelte/tests/runtime-runes/samples/bind-getter-setter/Child.svelte

@@ -0,0 +1,12 @@
+<script>
+	let { a = $bindable() } = $props();
+</script>
+
+<input
+	type="value"
+	bind:value={() => a,
+	(v) => {
+		console.log('b', v);
+		a = v;
+	}}
+/>

packages/svelte/tests/runtime-runes/samples/bind-getter-setter/_config.js

@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { assert_ok } from '../../../suite';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const input = target.querySelector('input');
+
+		assert_ok(input);
+
+		input.value = '2';
+		input.dispatchEvent(new window.Event('input'));
+
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>a: 2</button><input type="value">`);
+
+		assert.deepEqual(logs, ['b', '2', 'a', '2']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-getter-setter/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Child from './Child.svelte';
+
+	let a = $state(0);
+</script>
+
+<button onclick={() => a++}>a: {a}</button>
+
+<Child
+	bind:a={() => a,
+	(v) => {
+		console.log('a', v);
+		a = v;
+	}}
+/>
+