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 @@
 
 import type { Rule } from 'eslint';
 import { createVisitors } from '@html-eslint/eslint-plugin/lib/rules/utils/visitors.js';
-import type { HtmlTagNode } from '../rule-types.js';
+import type { HtmlAttribute, HtmlTagNode } from '../rule-types.js';
 
 declare const __ELEMENTS_PAGES_BASE_URL__: string;
 const INLINE_EVENT_HANDLER = /^on[a-z]+$/i;
+const DATA_BINDING_PATTERNS = [
+  /\$\{[^}]*\}/, // ${...} - JavaScript template literals
+  /\{\{[^}]*\}\}/, // {{...}} - Vue, Angular, Handlebars
+  /^\{[^}]+\}$/ // {...} - JSX/React expressions (entire value is an expression)
+];
+
+function hasDataBinding(attribute: HtmlAttribute): boolean {
+  const value = attribute.value?.value;
+  if (!value) return false;
+
+  if (DATA_BINDING_PATTERNS.some(pattern => pattern.test(value))) {
+    return true;
+  }
+
+  // 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.
+function isIncompleteEventHandler(attribute: HtmlAttribute, sourceText: string): boolean {
+  if (attribute.value || !attribute.range || sourceText[attribute.range[1]] !== '=') {
+    return false;
+  }
+
+  const value = sourceText.slice(attribute.range[1] + 1);
+  if (!value) {
+    return true;
+  }
+
+  if (value.startsWith('{') || value.startsWith('$')) {
+    return true;
+  }
+
+  if (!value.startsWith('"')) {
+    return false;
+  }
+
+  const quotedValue = value.slice(1);
+  return !quotedValue || quotedValue.startsWith('{') || quotedValue.startsWith('$');
+}
 
 const rule = {
   meta: {
@@ -24,13 +64,15 @@ const rule = {
     }
   },
   create(context: Rule.RuleContext) {
+    const sourceText = context.sourceCode.getText();
+
     return createVisitors(context, {
       Tag(node: HtmlTagNode) {
         (node.attributes ?? []).forEach(attr => {
           if (attr.type !== 'Attribute' || !attr.key?.value) return;
 
           const name = 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',