svelte: Unable to use return in reactive expression

Something just occurred to me that maybe should be obvious.

Svelte is repurposing labeled blocks, by deleting the actual label and moving the block into a function. The only reason someone might expect return to work in this context is because they are looking at the compiled output, which is inside a function.

However, a real labeled block already has a way to exit early. In fact, it’s pretty much the only “feature” a real labeled block has:

$: {
	if (count > 10) {
		break $;
	}
	
	bar = 'bar' + foo
}

That’s valid JS, but if you put that into the Svelte compiler, it just looks at you funny. It happily accepts the following though:

X: {
	if (count > 10) {
		break X;
	}
	
	bar = 'bar' + foo
}

…but of course doesn’t make it reactive.

So, if early exits are even a concern, my suggestion would be to implement it by adding support for labeled breaks. That would bring Svelte semantically closer to “real” JS in its handling of labeled blocks, rather than continue to deviate. It also solves the issue with returns and multiple reactive statements.

I’d even imagine it would be quite straightforward to implement. The compiler would simply not delete the label when it moves the reactive declaration into the update function.

Example change:

	$$self.$$.update = ($$dirty = { count: 1, foo: 1 }) => {
-		if ($$dirty.count || $$dirty.foo) { {
+		if ($$dirty.count || $$dirty.foo) { $: {
				if (count > 10) {
					break $;
				}
				
				$$invalidate('bar', bar = 'bar' + foo)
			} }
	};

Labels not being treated as a function by the compiler comes back to bite me a lot since I prefer to use early-outs whenever possible.

$: {
    if(!case) {
        return;
    }

    doWork(case);
}

This case can obviously become a simple if/else, but they’re not always that simple. The inability to use return or continue or some other form of “stop executing this block” is a fairly frequent annoyance for me in v3.

This isn’t pretty, but a workaround that you can do at the moment is to put a label statement in the reactive statement. It’s less code than an iife anyway. The REPL will let you get away with the following:

$: X: if (count >= 10) { alert('count is dangerously high!'); break X; count = 9; }

This always bails out early. The count never gets set back to nine.

Yeah, I can see the appeal, but I would personally rather opt for using an IIFE than start treating blocks as functions.

$: (() => {
  if (count > 10) {
    return
  }

  bar = 'bar' + foo
})();

It’s not valid JavaScript so it would break prettier and other tools. 🤔

I think in my ideal world the svelte compiler would be able to see that pattern and remove it to keep the code streamlined, paying the cost for IIFE every time a reactive statement runs isn’t something I’m super comfortable with.