Reassigning variable used as action should be reactive and destroy old action

[lukaszpolowczyk]

Describe the bug

When I change a function in use:action to something else, destroy neither executes nor adds the other action.

Putting an item in #key helps.

Actually, I'd like to be able to replace a function in use:action without a #key, because #key is a more drastic solution than simply executing destroy and adding a new action.

Reproduction

Described example:
https://svelte.dev/repl/730c59ca84e8486aa67108a0d4544bbc?version=3.42.6

1. Click "remove action" in First case - does nothing and should execute destroy.

2. Click "remove action" in Second case - When you use #key, destroy is executed.

Logs

No response

System Info

System:
    OS: Linux 5.10 Arch Linux
    CPU: (4) x64 AMD Athlon(tm) X4 950 Quad Core Processor
    Memory: 2.60 GB / 15.07 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.3.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.17.0 - /usr/bin/npm
  Browsers:
    Firefox: 87.0

Severity

annoyance

[Conduitry]

There are several things going on here, but one of them is that you are setting the action to _>{}, not _=>{}. I'm not sure what else you are saying. That updating a value used as an action should call the destroy method on the old value?

[lukaszpolowczyk]

@Conduitry Ok, sorry, I corrected it.
But it does not change anything.

Changing action to _=>{} changes nothing in First case. When I click "remove action" in First case, "+1" in First case still works, but should stop working.
When I use {#key action} <button use:action>+1</button> {/key} in Second case, the action updates.

That updating a value used as an action should call the destroy method on the old value?

I would like destroy to execute when the previous action ceases to be used. The action should then "end life" and execute destroy.
Def is:
let action = fn;
and:
<button use:action>+1</button>
and click "remove action" do:
action = _=>{}

action in use:action change from fn to _=>{}. - Then destroy with fn should execute, then add _=>{}.

[bluwy]

I think what OP tries to explain is that the action should "remount" when it's invalidated, which I think is a fair assumption. Though I never really had the need for something like this, usually I'd have an enabled/disabled prop in the action's options to toggle it.

[Prinzhorn]

In other words: when using use:foo foo is not reactive. What OP wants is to swap out the entire implementation of an action with a NOOP to remove it. I don't think that's a use-case that has been considered and it is odd. But it solves a problem.

Though I never really had the need for something like this, usually I'd have an enabled/disabled prop in the action's options to toggle it.

Same, but it's a pain because actions already give you a lot of responsibility (e.g. manually unbinding events) and keeping things consistent when not only the options can change but you can also disable the entire thing is hard. I always wished there was a way to remove an action, but swapping out the entire thing is not what I had in mind.

[lukaszpolowczyk]

I always wished there was a way to remove an action, but swapping out the entire thing is not what I had in mind.

I was thinking about the possibility of setting null, which would act as a shutdown:
use:action
action = null.

This is how it works in Svelte, with the normal properties of HTML elements.

---

But I was also thinking about a general way to turn off atypical element properties in Svelte (for use:action bind:value, on:click etc.).

A loose idea, e.g. use:(condition?action:null).

That would be a new, unusual syntax, next to the proposition <Component bind:...={object} />:
"Implement spread binding" - sveltejs/rfcs#57

[dummdidumm]

Closing in favor of #6942