[Complex expressions] cannot call method named `delete`
<button onclick={() => delete("foo")}></button>
export default class extends LightningElement {
delete(str) {}
}
The error is:
[!] (plugin rollup-plugin-lwc-compiler) Error: Invalid expression {() => delete("foo")} - LWC1192:
Use of the delete operator is prohibited within template expressions.
In this case, delete should be treated as a method on the component, but it's instead treated as a keyword. There is a similar error if no arguments are passed in (i.e. delete()).
@nolanlawson I'm not sure how we'd go about fixing this. Calling instance.delete() is entirely valid, so I don't discount the use case here. However, the expression () => delete("foo") is parsed as an arrow expression with a delete operator as its body. It is parsed this way in both acorn and babel, and in looking at the ECMAScript spec, it is the correct behavior.
In the template delete('foo') is implicitly $cmp.delete('foo'). However, we won't know that until after we've parsed a valid JavaScript expression first.
We might be able to look for arrow functions with bodies that are a unary delete operator. But that'd be a strange special case, and possibly an extra AST traversal just to handle this edge case.
For now, I'm going to leave this issue unresolved, and we'll revisit if/when the impact of the bug is better understood.