fix(core): actual sane casing in events

Author: wmertens

.changeset/shaky-pianos-wait.md

@@ -2,4 +2,5 @@
 '@qwik.dev/core': major
 ---
 
-BREAKING: (slightly) custom event handlers no longer use a `-` prefix to denote case sensitive events. Instead, write the event name in kebab-case directly. For example, the custom event `CustomEvent` should now be written as `on-Custom-Event$` instead of `on-CustomEvent$`. The handler will be called for events named `CustomEvent` but also for `-custom-event`, which should not be a problem in practice.
+BREAKING: (slightly) `-` handling in JSX event handlers has slightly changed. Now, if an event name starts with `-`, the rest of the name will be kept as-is, preserving casing. Otherwise, the event name is made lowercase. Any `-` characters in the middle of the name are preserved as-is. Previously, `-` were considered to mark the next letter as uppercase.
+   For example, `onCustomEvent$` will match `customevent`, `on-CustomEvent$` will match `CustomEvent`, and `onCustom-Event$` will match `custom-event`. Before, that last one would match `customEvent` instead.

packages/docs/src/routes/docs/(qwik)/core/events/index.mdx

@@ -302,7 +302,7 @@ export const Button = component$<ButtonProps>(({ onTripleClick$ }) => {
 
 Event names are case sensitive, but all DOM events except for `DOMContentLoaded` are lowercase. For a better DX, event names are always lowercased, so `onTripleClick$` becomes `tripleclick` under the hood.
 
-To listen for a custom event with uppercase letters, you must use kebab-case. For example, to listen for a custom event named `CustomEvent`, you would use `on-Custom-Event$` or `on-custom-event$`. The handler would then be called for events named: `CustomEvent`, `-custom-event`, `Custom-event` and `-customEvent`. In practice, this combining of events should not be a problem, but you can check the exact event name in the handler if needed.
+To listen for a custom event with uppercase letters, you add a `-` after `on`. For example, to listen for a custom event named `CustomEvent`, you would use `on-CustomEvent$`. For a window event named `Hi-There`, you would use `window:on-Hi-There$`.
 
 ## Window and Document Events
 

packages/qwik/src/core/client/vnode-diff.ts

@@ -29,7 +29,6 @@ import {
   fromCamelToKebabCase,
   getEventDataFromHtmlAttribute,
   isHtmlAttributeAnEventName,
-  isJsxPropertyAnEventName,
 } from '../shared/utils/event-names';
 import { getFileLocationFromJsx } from '../shared/utils/jsx-filename';
 import {
@@ -623,11 +622,6 @@ export const vnode_diff = (
           continue;
         }
 
-        if (isJsxPropertyAnEventName(key)) {
-          // ignore jsx properties
-          continue;
-        }
-
         if (key === 'ref') {
           if (isSignal(value)) {
             value.value = element;

packages/qwik/src/core/readme.md

@@ -160,7 +160,7 @@ Register a listener on the current component's host element.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. Otherwise, it's adding a JSX listener in the `<div>` is a better idea.
 
-Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem. You can always check the exact event name in the handler if needed.
+Events are case sensitive.
 
 @see `useOn`, `useOnWindow`, `useOnDocument`.
 
@@ -172,7 +172,7 @@ Register a listener on `window`.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.
 
-Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem. You can always check the exact event name in the handler if needed.
+Events are case sensitive.
 
 @see `useOn`, `useOnWindow`, `useOnDocument`.
 
@@ -186,7 +186,7 @@ Register a listener on `document`.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.
 
-Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem. You can always check the exact event name in the handler if needed.
+Events are case sensitive.
 
 @see `useOn`, `useOnWindow`, `useOnDocument`.
 

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

@@ -47,14 +47,23 @@ export function jsxEventToHtmlAttribute(jsxEvent: string): string | null {
 
     if (idx !== -1) {
       const name = jsxEvent.slice(idx, -1);
-      return createEventName(name, prefix);
+      return name === 'DOMContentLoaded'
+        ? // The only DOM event that is not all lowercase
+          prefix + '-d-o-m-content-loaded'
+        : createEventName(
+            name.charAt(0) === '-'
+              ? // marker for case sensitive event name
+                name.slice(1)
+              : name.toLowerCase(),
+            prefix
+          );
     }
   }
   return null; // Return null if not matching expected format
 }
 
 export function createEventName(event: string, prefix: EventNameHtmlScope): string {
-  const eventName = event === 'DOMContentLoaded' ? '-d-o-m-content-loaded' : event.toLowerCase();
+  const eventName = fromCamelToKebabCase(event);
   return prefix + eventName;
 }
 
@@ -86,15 +95,9 @@ export function isPreventDefault(key: string): boolean {
   return key.startsWith('preventdefault:');
 }
 
-/**
- * Converts a camelCase string to kebab-case. This is used for event names.
- *
- * However, we do not escape `-` characters that are already present in the string. This means that
- * both `dbl-click` and `dblClick` will convert to `dbl-click`. This is intentional, it means that
- * `onCustom-Event$` works for both `custom-event` and `customEvent`.
- */
+/** Converts a camelCase string to kebab-case. This is used for event names. */
 export const fromCamelToKebabCase = (text: string): string => {
-  return text.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return text.replace(/([A-Z-])/g, (a) => '-' + a.toLowerCase());
 };
 
 export const getEventDataFromHtmlAttribute = (htmlKey: string): [string, string] | null => {

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

@@ -10,16 +10,15 @@ import { jsxEventToHtmlAttribute } from './event-names';
  */
 const testCases = [
   // default scope
-  { jsx: 'onClick$', html: 'on:click' },
+  { jsx: 'onClick$', html: 'on:click', eventName: 'click' },
   { jsx: 'onDblClick$', html: 'on:dblclick' },
-  { jsx: 'on-customEvent$', html: 'on:-customevent' },
-  { jsx: 'on-CustomEvent$', html: 'on:-customevent' },
-  { jsx: 'onCustom-Event$', html: 'on:custom-event' },
-  { jsx: 'on-Custom-Event$', html: 'on:-custom-event' },
-  { jsx: 'on-Custom-event$', html: 'on:-custom-event' },
-  { jsx: 'onCustom-event$', html: 'on:custom-event' },
-  { jsx: 'on-custom-event$', html: 'on:-custom-event' },
-  { jsx: 'on--CustomEvent$', html: 'on:--customevent' },
+  { jsx: 'on--CustomEvent$', html: 'on:---custom-event' },
+  { jsx: 'on-Custom-Event$', html: 'on:-custom---event' },
+  { jsx: 'on-custom-event$', html: 'on:custom--event' },
+  { jsx: 'on-CustomEvent$', html: 'on:-custom-event' },
+  { jsx: 'on-customEvent$', html: 'on:custom-event' },
+  { jsx: 'onCustom-event$', html: 'on:custom--event' },
+  { jsx: 'onCustom-Event$', html: 'on:custom--event' },
   // exception for DOMContentLoaded
   { jsx: 'onDOMContentLoaded$', html: 'on:-d-o-m-content-loaded' },
   // window scope

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

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

packages/qwik/src/core/tests/use-on.spec.tsx

@@ -624,7 +624,7 @@ describe.each([
       const Counter = component$((props: { initial: number }) => {
         const count = useSignal(props.initial);
         useOn(
-          '-Some-Custom-Event',
+          'SomeCustomEvent',
           $(() => count.value++)
         );
         return <button>Count: {count.value}!</button>;
@@ -652,7 +652,7 @@ describe.each([
     it('should update counter for jsx event', async () => {
       const Counter = component$((props: { initial: number }) => {
         const count = useSignal(props.initial);
-        return <button on-Some-Custom-Event$={() => count.value++}>Count: {count.value}!</button>;
+        return <button on-SomeCustomEvent$={() => count.value++}>Count: {count.value}!</button>;
       });
 
       const { vNode, container } = await render(<Counter initial={123} />, { debug });

packages/qwik/src/core/use/use-context.ts

@@ -122,7 +122,7 @@ export interface ContextId<STATE> {
  */
 // </docs>
 export const createContextId = <STATE = unknown>(name: string): ContextId<STATE> => {
-  assertTrue(/^[\w/.-]+$/.test(name), 'Context name must only contain A-Z,a-z,0-9, _', name);
+  assertTrue(/^[\w/.-]+$/.test(name), 'Context name must only contain A-Z,a-z,0-9,_,.,-', name);
   return /*#__PURE__*/ Object.freeze({
     id: fromCamelToKebabCase(name),
   } as any);

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

@@ -8,7 +8,7 @@ import type {
 } from '../shared/jsx/types/jsx-qwik-attributes';
 import type { HostElement } from '../shared/types';
 import { USE_ON_LOCAL, USE_ON_LOCAL_FLAGS, USE_ON_LOCAL_SEQ_IDX } from '../shared/utils/markers';
-import { EventNameHtmlScope, createEventName } from '../shared/utils/event-names';
+import { EventNameHtmlScope, fromCamelToKebabCase } from '../shared/utils/event-names';
 
 export type EventQRL<T extends string = AllEventKeys> =
   | QRL<EventHandler<EventFromName<T>, Element>>
@@ -23,11 +23,7 @@ export type EventQRL<T extends string = AllEventKeys> =
  * Used to programmatically add event listeners. Useful from custom `use*` methods, which do not
  * have access to the JSX. Otherwise, it's adding a JSX listener in the `<div>` is a better idea.
  *
- * Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to
- * a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use
- * `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for
- * `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem.
- * You can always check the exact event name in the handler if needed.
+ * Events are case sensitive.
  *
  * @public
  * @see `useOn`, `useOnWindow`, `useOnDocument`.
@@ -46,11 +42,7 @@ export const useOn = <T extends KnownEventNames>(event: T | T[], eventQrl: Event
  * Used to programmatically add event listeners. Useful from custom `use*` methods, which do not
  * have access to the JSX.
  *
- * Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to
- * a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use
- * `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for
- * `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem.
- * You can always check the exact event name in the handler if needed.
+ * Events are case sensitive.
  *
  * @public
  * @see `useOn`, `useOnWindow`, `useOnDocument`.
@@ -85,11 +77,7 @@ export const useOnDocument = <T extends KnownEventNames>(event: T | T[], eventQr
  * Used to programmatically add event listeners. Useful from custom `use*` methods, which do not
  * have access to the JSX.
  *
- * Event names are converted to lowercase (except for `DOMContentLoaded`). If you need to listen to
- * a case-sensitive custom event, use kebab-case. For example, to listen to `CustomEvent`, use
- * `-Custom-Event` or `-custom-event`. This will listen for `CustomEvent`, but also for
- * `-custom-event`, `Custom-event` and `-customEvent`. In practice, this should not be a problem.
- * You can always check the exact event name in the handler if needed.
+ * Events are case sensitive.
  *
  * @public
  * @see `useOn`, `useOnWindow`, `useOnDocument`.
@@ -124,10 +112,10 @@ const _useOn = (prefix: EventNameHtmlScope, eventName: string | string[], eventQ
   if (eventQrl) {
     if (Array.isArray(eventName)) {
       for (const event of eventName) {
-        addEvent(createEventName(event, prefix), eventQrl);
+        addEvent(prefix + fromCamelToKebabCase(event), eventQrl);
       }
     } else {
-      addEvent(createEventName(eventName, prefix), eventQrl);
+      addEvent(prefix + fromCamelToKebabCase(eventName), eventQrl);
     }
   }
 };