Inline variable assignment in mustache tags

In my experience I frecuently encounter the following code pattern:

<button on:click={() => menuOpen = !menuOpen}>Menu</button>

I propose the following code shorthand:

<button on:click={menuOpen = !menuOpen}>Menu</button>

The outputted compiled code should be the same in both cases. I think that the implementation could be if the parser sees an assignment inside moustache tags, it wraps it up in an anonymous function.

Not entirely sure if there are edge cases that I should consider. If it’s a reasonable enhancement I would like to give it a shot. Someone pointing me out where to start would be much appreciated 😃

On a personal note, I think this aligns nicely with existing code sugar/shorthands that svelte offers.

(I call the {} moustache tags because I’ve seen it the source code although I’m not really sure if that is the right technical name)

[antony]

My personal feeling is that this increases the surface API area with no discernible benefit. right now it’s very simple to say that a handler is a method, and that’s that.

This introduces a branch into the API which for one, doesn’t receive the event itself.

I also think there’ll be a case whereby it’s unclear whether the content of the expression is a method to be called, or returns a method to be called, or has a side-effect of calling a method, but I can’t bring one to mind right now.

So it’d be a a no from me. Leaving open for others to weigh in.

[dimfeld]

I don’t think the bind:value case is an analogous case, as it is simply syntactic sugar, while this does change the behavior of the expression.

The problem with a “does this expression have an assignment” heuristic is less a technical issue than a developer experience issue. Currently an expression in a handler is always evaluated at the time that the component/element is created. Changing it would mean that the expression is evaluated either at creation time or when the event occurs, depending on the contents of that expression.

Here’s an assortment of things you might want to do in a handler when the expression can be interpreted as a function contents.

on:click={x = 5} on:click={list.push(5)} on:click={doIt(5)} on:click={abc.def(5)} on:click={() => abc.def(5)} on:click={set(abc, 'def', 5)} on:click={save} on:click={save()} on:click={save(); x = 5;}

I don’t think the additional layer of complexity where sometimes you can just write the code and other times need to wrap it in a function is worth the convenience, and I guarantee it will confuse newcomers to Svelte, many of whom are also new to Javascript development completely.

Edit: All that said, I have at times wished I could do this too. I do sympathize with the desire to enable this sort of syntax. I just haven’t come up with an appropriate way to do it that wouldn’t increase the complexity unnecessarily. The best one I thought of is something like on:click|immediate={x = 5} but that isn’t really better than just on:click={() => x = 5}.