fix(lint): support framework event bindings

Signed-off-by: John Yanarella <jyanarella@nvidia.com>

Author: johnyanarella

projects/lint/src/eslint/rules/no-invalid-event-listeners.test.ts

@@ -57,12 +57,52 @@ describe('noInvalidEventListeners', () => {
 valid: [
 '<button @click="handleClick">Click</button>',
 '<button (click)="handleClick()">Click</button>',
-'<button v-on:click="handleClick">Click</button>'
+'<button v-on:click="handleClick">Click</button>',
+'<button onclick="${handleClick}">Click</button>',
+'<button onclick="{{handleClick}}">Click</button>',
+'<button onclick="{handleClick}">Click</button>',
+// React synthetic event binding
+'<button onClick={handleClick}>Click</button>',
+// React custom element native event binding
+`function SharedDropdown() {
+ return (
+ <nve-dropdown id="row-actions-dropdown" alignment="end" ontoggle={() => undefined}>
+ <nve-menu>
+ <nve-menu-item>action 1</nve-menu-item>
+ <nve-menu-item>action 2</nve-menu-item>
+ <nve-menu-item>action 3</nve-menu-item>
+ </nve-menu>
+ </nve-dropdown>
+ );
+ }`
 ],
 invalid: []
 });
 });
 
+it('should defer errors for incomplete event handler bindings',()=>{
+tester.run('incomplete event handler bindings',rule,{
+valid: [
+'<button onClick=',
+'<button onClick={',
+'<button onClick={()',
+'<button onClick="',
+'<button onClick="${',
+'<button onClick="{{'
+],
+invalid: [
+{
+code: '<button onClick=handleClick',
+errors: [{messageId: 'no-inline-event-handler',data: {attribute: 'onClick'}}]
+},
+{
+code: '<button onClick="handleClick',
+errors: [{messageId: 'no-inline-event-handler',data: {attribute: 'onClick'}}]
+}
+]
+});
+});
+
 it('should report inline onclick handler',()=>{
 tester.run('should report inline onclick handler',rule,{
 valid: [],

projects/lint/src/eslint/rules/no-invalid-event-listeners.ts

@@ -3,10 +3,50 @@
 
 importtype{Rule}from'eslint';
 import{createVisitors}from'@html-eslint/eslint-plugin/lib/rules/utils/visitors.js';
-importtype{HtmlTagNode}from'../rule-types.js';
+importtype{HtmlAttribute,HtmlTagNode}from'../rule-types.js';
 
 declareconst__ELEMENTS_PAGES_BASE_URL__: string;
 constINLINE_EVENT_HANDLER=/^on[a-z]+$/i;
+constDATA_BINDING_PATTERNS=[
+/\$\{[^}]*\}/,// ${...} - JavaScript template literals
+/\{\{[^}]*\}\}/,// {{...}} - Vue, Angular, Handlebars
+/^\{[^}]+\}$/// {...} - JSX/React expressions (entire value is an expression)
+];
+
+functionhasDataBinding(attribute: HtmlAttribute): boolean{
+constvalue=attribute.value?.value;
+if(!value)returnfalse;
+
+if(DATA_BINDING_PATTERNS.some(pattern=>pattern.test(value))){
+returntrue;
+}
+
+// NOTE: The HTML parser truncates unquoted JSX callbacks to a value beginning with "{".
+return!attribute.startWrapper&&value.startsWith('{');
+}
+
+// Defer lint errors while developers are typing an event binding in the editor.
+functionisIncompleteEventHandler(attribute: HtmlAttribute,sourceText: string): boolean{
+if(attribute.value||!attribute.range||sourceText[attribute.range[1]]!=='='){
+returnfalse;
+}
+
+constvalue=sourceText.slice(attribute.range[1]+1);
+if(!value){
+returntrue;
+}
+
+if(value.startsWith('{')||value.startsWith('$')){
+returntrue;
+}
+
+if(!value.startsWith('"')){
+returnfalse;
+}
+
+constquotedValue=value.slice(1);
+return!quotedValue||quotedValue.startsWith('{')||quotedValue.startsWith('$');
+}
 
 construle={
 meta: {
@@ -24,13 +64,15 @@ const rule = {
 }
 },
 create(context: Rule.RuleContext){
+constsourceText=context.sourceCode.getText();
+
 returncreateVisitors(context,{
 Tag(node: HtmlTagNode){
 (node.attributes??[]).forEach(attr=>{
 if(attr.type!=='Attribute'||!attr.key?.value)return;
 
 constname=attr.key.value;
-if(INLINE_EVENT_HANDLER.test(name)){
+if(INLINE_EVENT_HANDLER.test(name)&&!hasDataBinding(attr)&&!isIncompleteEventHandler(attr,sourceText)){
 context.report({
 node: attr,
 messageId: 'no-inline-event-handler',