useOn: accept event names as-is

Author: wmertens

packages/qwik/src/core/shared/utils/event-names.ts

@@ -41,40 +41,21 @@ export const isHtmlAttributeAnEventName = (name: string): boolean => {
   );
 };
 
-/**
- * Converts a JSX event property to an HTML attribute. Examples:
- *
- * - OnClick$ -> on:click
- * - On-DOMContentLoaded$ -> on:-d-o-m-content-loaded
- * - On-CustomEvent$ -> on:-custom-event
- */
 export function jsxEventToHtmlAttribute(jsxEvent: string): string | null {
   if (jsxEvent.endsWith(EVENT_SUFFIX)) {
     const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
 
     if (idx !== -1) {
-      return createEventName(jsxEvent, prefix, idx, jsxEvent.length - 1 /* don't include `$` */);
+      const name = jsxEvent.slice(idx, -1);
+      return createEventName(name, prefix);
     }
   }
   return null; // Return null if not matching expected format
 }
 
-export function createEventName(
-  event: string,
-  prefix: EventNameHtmlScope,
-  startIdx = 0,
-  endIdx = event.length
-): string {
-  const eventName = jsxEventToEventName(event, startIdx, endIdx);
-  return prefix + fromCamelToKebabCase(eventName);
-}
-
-export function jsxEventToEventName(jsxEvent: string, startIdx: number, endIdx: number): string {
-  const chunk = jsxEvent.substring(startIdx, endIdx);
-  if (chunk === 'DOMContentLoaded') {
-    return '-d-o-m-content-loaded';
-  }
-  return chunk.toLowerCase();
+export function createEventName(event: string, prefix: EventNameHtmlScope): string {
+  const eventName = event === 'DOMContentLoaded' ? '-d-o-m-content-loaded' : event.toLowerCase();
+  return prefix + eventName;
 }
 
 export function getEventScopeDataFromJsxEvent(eventName: string): [EventNameHtmlScope, number] {

packages/qwik/src/core/tests/render-api.spec.tsx

@@ -83,6 +83,10 @@ const ManyEventsComponent = component$(() => {
     'focus',
     inlinedQrl(() => {}, 's_useOnFocus')
   );
+  useOn(
+    '-My-Custom',
+    inlinedQrl(() => {}, 's_useOnMyCustom')
+  );
   return (
     <div>
       <button
@@ -91,7 +95,11 @@ const ManyEventsComponent = component$(() => {
       >
         click
       </button>
-      <button onClick$={inlinedQrl(() => {}, 's_click2')} onBlur$={inlinedQrl(() => {}, 's_blur1')}>
+      <button
+        onClick$={inlinedQrl(() => {}, 's_click2')}
+        onBlur$={inlinedQrl(() => {}, 's_blur1')}
+        onAnother-custom$={inlinedQrl(() => {}, 's_anotherCustom1')}
+      >
         click
       </button>
     </div>
@@ -491,7 +499,7 @@ describe('render api', () => {
           qwikLoader: 'module',
         });
         expect(result.html).toContain(
-          '(window.qwikevents||(window.qwikevents=[])).push("focus", "click", "dblclick", "blur")'
+          '(window.qwikevents||(window.qwikevents=[])).push("focus", "-my-custom", "click", "dblclick", "another-custom", "blur")'
         );
       });
     });

packages/qwik/src/core/use/use-on.unit.ts

@@ -1,3 +1,4 @@
+// oxlint-disable no-unused-vars
 import { assertType, describe, expectTypeOf, test } from 'vitest';
 import { useOn, type EventQRL } from './use-on';
 import { $, type QRL, type QrlReturn } from '../shared/qrl/qrl.public';
@@ -13,15 +14,15 @@ describe('types', () => {
     const wrong1 = (ev: MouseEvent, elem: Element, extra: string) => 'hello';
     const wrong2 = (ev: boolean) => 'hello';
 
-    expectTypeOf<undefined>().toMatchTypeOf<EventQRL>();
-    expectTypeOf<QRL<typeof cb0>>().toMatchTypeOf<EventQRL>();
-    expectTypeOf<QRL<typeof cb1>>().toMatchTypeOf<EventQRL>();
-    expectTypeOf<QRL<typeof cb2>>().toMatchTypeOf<EventQRL>();
+    expectTypeOf<undefined>().toExtend<EventQRL>();
+    expectTypeOf<QRL<typeof cb0>>().toExtend<EventQRL>();
+    expectTypeOf<QRL<typeof cb1>>().toExtend<EventQRL>();
+    expectTypeOf<QRL<typeof cb2>>().toExtend<EventQRL>();
 
-    expectTypeOf<QRL<typeof cbAny>>().toMatchTypeOf<EventQRL>();
+    expectTypeOf<QRL<typeof cbAny>>().toExtend<EventQRL>();
 
-    expectTypeOf<QRL<typeof wrong1>>().not.toMatchTypeOf<EventQRL>();
-    expectTypeOf<QRL<typeof wrong2>>().not.toMatchTypeOf<EventQRL>();
+    expectTypeOf<QRL<typeof wrong1>>().not.toExtend<EventQRL>();
+    expectTypeOf<QRL<typeof wrong2>>().not.toExtend<EventQRL>();
   });
 
   test('inferring', () => () => {
@@ -35,7 +36,7 @@ describe('types', () => {
     expectTypeOf(called.ev).not.toBeAny();
     expectTypeOf(called.el).not.toBeAny();
     assertType<Element | undefined>(called.el);
-    expectTypeOf<Event>().toMatchTypeOf(called.ev);
+    expectTypeOf(called.ev).toExtend<Event>();
   });
 
   test('useOn', () => () => {