how can I send getter setter to bind from a variable?

[sukeshpabolu]

Describe the bug

This is allowed and good: https://svelte.dev/blog/advent-of-svelte#Day-8:-functional-bindings

need a way to use the similar thing to the following variable on bind:

const checked = {
		get: () => {
			return flag == 'YES';
		},
		  set: (isChecked) => {
			flag = isChecked ? 'YES' : 'NO'
		}
	};

Reproduction

svelte playground

Logs

No response

System Info

svelte dev tutorial

Severity

annoyance

[sukeshpabolu]

I think this works: maybe solution. is there a better way to do this

[paoloricciuti]

I don't understand the issue. You can either send the two functions separately:

<input type="checkbox" id="id" bind:checked{checked.get, checked.set} />

Or you can change the checked to have a getter and setter and bind to that property

let checked = {
    get value(){
        return flag == 'YES';
    },
    set value(isChecked){
         flag = isChecked ? 'YES' : 'NO'
    }
};

<input type="checkbox" id="id" bind:checked{checked.value} />

[sukeshpabolu]

I was already able to do as bollow in version before 5.9.0

let checked = {
    get value(){
        return flag == 'YES';
    },
    set value(isChecked){
         flag = isChecked ? 'YES' : 'NO'
    }
};

<input type="checkbox" id="id" bind:checked={checked.value} />

[sukeshpabolu]

this is also allowed in 5.9.0

let checked = {
    get: () => {
        return flag == 'YES';
    },
    set: (isChecked) => {
         flag = isChecked ? 'YES' : 'NO'
    }
};

<input type="checkbox" id="id" bind:checked={checked.get, checked.set} />

but not the below one

<input type="checkbox" id="id" bind:checked={checked} />

why ?

[MotionlessTrain]

That is indistinguishable for the compiler with just setting checked directly on change

I.e.

// would bind:checked={checked} compile to
onchange={({ currentTarget }) => checked = currentTarget.checked }
// which is valid, as checked is declared as let, and typescript cannot help during runtime things
// or is the following meant:
onchange={({ currentTarget }) => checked.set(currentTarget.checked)}
// which requires checking on runtime whether the set method exists, and may have unintended consequences when the former was intended

[sukeshpabolu]

Okay. Now I understood. But this has to be documented somewhere

[paoloricciuti]

this is also allowed in 5.9.0

let checked = {
    get: () => {
        return flag == 'YES';
    },
    set: (isChecked) => {
         flag = isChecked ? 'YES' : 'NO'
    }
};

<input type="checkbox" id="id" bind:checked={checked.get, checked.set} />

but not the below one

<input type="checkbox" id="id" bind:checked={checked} />

why ?

Because that's not the syntax for the new feature...is this a feature request?

[sukeshpabolu]

I misunderstood that it could work. Now I understood the syntax. But this feature can be further simplified maybe.

[paoloricciuti]

I misunderstood that it could work. Now I understood the syntax. But this feature can be further simplified maybe.

As @MotionlessTrain suggested this is indistinguishable from "I want to bind to the checked variable".

Closing this...thanks for reporting anyway 🧡