Async handlers don't work if they begin with let/const or an if statement

[willcosgrove]

It looks like the issue is caused by wrapping the expression for safe right hand side evaluation:

alpine/packages/alpinejs/src/evaluator.js

Lines 68 to 77 in 4df4e4f

	// Some expressions that are useful in Alpine are not valid as the right side of an expression.
	// Here we'll detect if the expression isn't valid for an assignement and wrap it in a self-
	// calling function so that we don't throw an error AND a "return" statement can b e used.
	let rightSideSafeExpression = 0
	// Support expressions starting with "if" statements like: "if (...) doSomething()"
	|| /^[\n\s]*if.*\(.*\)/.test(expression)
	// Support expressions starting with "let/const" like: "let foo = 'bar'"
	|| /^(let|const)\s/.test(expression)
	? `(() => { ${expression} })()`
	: expression

On line 76, if the above conditions return true, the expression gets wrapped in (() => ...)() but that wrapping function is not async, and so any await calls will cause a syntax error.

[willcosgrove]

I was able to side step the bug by wrapping my own expression in an async function and calling it immediately.

<button @click="(async () => { ... })()"></button>

[fweth]

Maybe related, I sometimes insert a newline for longer code blocks, if the let or const appears after some space or newline, it also seems to cause problems. So

<button @click="
  const foo = 3;
  console.log(foo);
">Click</button>

causes an error, but

<button @click="const foo = 3;
  console.log(foo);
">Click</button>

will not.

[ekwoka]

what's the error caused?

[fweth]

https://jsfiddle.net/p7Lr860a/6/ it's a long one, but it seems to be related to the missing \s* in the let expression.

[ekwoka]

This seems like it should be a simple PR to do, assuming there isn't any threads that pull off.

[SimoTod]

I think it's a safe change. The evaluator already resolves to an async function at the top level so making the intermediate function async shouldn't change anything. I don't think the OP is going to send a PR so feel free to submit one.

[fweth]

I don't understand the async problem well enough to do a pull request but I'd replace the expressions /^[\n\s]*if.*\(.*\)/ resp. /^(let|const)\s/ with /^\s*if\s/ resp. /^\s*(let|const)\s/ (I think \s also matches also \n and if there are no parantheses after the if, it will cause an JS error anyway and it's not up to Alpine.js to detect all JS syntax errors).

[SimoTod]

true, but your regexp assumes that there is a space after the if whilst some people just write if(. The parenthesis is not to detect a syntax error but to avoid false positives where it's just a variable starting with the letters if.
Peraphs /^\s*if\s*(/ would do

[fweth]

Ah true! So /^\s*if\s*(/ or /^\s*if[(,\s]/ then!

[ekwoka]

It's actually even easier then that: just add async to the IIFE 🤣

[fweth]

Wait, but aren't those two different problems? I was just commenting on how to allow also let/const after a newline or similar constructs...

[ekwoka]

#3146

PR'd