Reference attach element with 'this'

[mellunar]

Describe the problem

The documentation suggests that for Svelte versions >= 5.29 @attach should be used instead of use:.
When whe call a function using use: we can reference the own component with this.
<div use:directive={this, someValue}>content</div>

To have the same result with @attach, we need to call an anonymous arrow function.
<div {@attach directive((element) => element, someValue)}>content</div>

Describe the proposed solution

Allow to reference the own element by using this, removing the need to call an arrow function to accomplish that.
<div {@attach directive(this, someValue)}>content</div>

Importance

would make my life easier

[paoloricciuti]

I'm pretty sure I'm missing something but what do you need this for? Also with the syntax you described this is not even passed in, only someValue would be...can you provide an example of what you are doing?

[brunnerh]

I think what was intended is that you currently have:

{@attach element => directive(element, someValue)}

Instead of

{@attach directive(this, someValue)}

But the solution is probably to just use a higher order function¹:

{@attach directive(someValue)}

const directive = value => node => {
  // both value & node are in scope here.
};

Example

(Personally, I find this to be a massive anti-pattern, it is often unclear what it refers to and the name has about the same quality as a variable named a.)

Footnotes

1. You might want to avoid this pattern if you have a very high number of instances, since a new function is created every time. ↩