var statement no longer works at start of event string expression

[mpetty]

This may be intentional, but I couldn't find it mentioned anywhere and there is a clear difference between alpine 2 and 3.

Starting a string expression with 'var' now throws an error while if, let, and const do not. This previously worked in version 2.

Does not work:

<div x-data>
  <button @click.prevent="var test = true">Button</button>
</div>

Uncaught SyntaxError: Unexpected token 'var'
    at new AsyncFunction (<anonymous>)

Works:

<div x-data>
  <button @click.prevent="if(true)var test = true">Button</button>
</div>
<div x-data>
  <button @click.prevent="let test = true">Button</button>
</div>
<div x-data>
  <button @click.prevent="const test = true">Button</button>
</div>

Example with error using 3.5.0
https://codepen.io/mpetty23/pen/zYdaWvR

Example working with 2.8.2
https://codepen.io/mpetty23/pen/rNzKdxY

[danddanddand]

You could wrap it in function handler or use window.test to explicitly hoist variable... I think it would be trivial to change regex in evaluator to let it through if you want to do PR and see what Caleb thinks. Is there reason you want this?

[mpetty]

No particular reason that I need it since there are work arounds. Just had code using it and noticed the upgrade to v3 broke that code. Since there was nothing in the upgrade guide about it I wasn't sure if this was intended or just missed since let and const were specifically allowed through.

It might just be helpful to mention it in the documentation somewhere. Its not possible to predict what every function will start with. There may be other expressions that dont work. For example, starting with a for loop also throws an error.