RFC: Breaking change to internal event attributes (v2)

[wmertens]

TL;DR: onCustom-Event$ in v1 encodes for the events customEvent and custom-event and with this RFC it would only encode for custom-event. Instead, you would need to write on_customEvent_$.

Plus bugfixes and performance improvements.

Champion

@wmertens

What's the motivation for this proposal?

Problems you are trying to solve:

• HTML attributes are case-insensitive and cannot have duplicates
• HTML event types are case sensitive
• all DOM events except DOMContentLoaded are lowercase
• onQInit$ and onQinit$ are therefore the same thing, on:qinit
• useVisisibleTask$ also adds a handler
• this requires merging handlers. Right now this happens when creating VNodes
• custom events have can have any case (and many letters that are not allowed in attributes)
• We have - encoding for event names: a - will capitalize the next letter. on-custom-event$ is the same as on-Custom-Event$ and creates the HTML attribute on:-custom-event which is called when dispatching "CustomEvent".
  • this is not documented as far as I can find
  • also, onCustom-Event will fire for both customEvent and custom-event
• This means that if the custom event is custom-event and the dev writes onCustom-Event$, it will not work, they have to write onCustom--Event$
• This is error-prone and the handler merging is buggy

---

Proposed Solution / Feature

What do you propose?

(JSX-handler: onSomeEvent$; HTML-handler: on:someevent (no $))

• Do the conversion in JSXNode or _jsxSplit so that the JSXNode props never contain onFoo$ but instead immediately on:foo
• Make the optimizer do this for string tags
  • <div onClick$={...}/> => _jsxSorted('div', null, {"on:click": qrl(...)})
• Encode - from JSX handlers
  • <div onClick-Me$={...}/> => _jsxSorted('div', null, {"on:click--me": qrl(...)})
• Add encoding for custom events: on_CustomEvent_$. Starts with _ and must end with _ (or error), and anything inside is the event name
  • <div on_clICk-Me_Now_$={...}/> => _jsxSorted('div', null, {"on:cl-i-c-k---me_-Now": qrl(...)})

PRs/ Links / References

QwikDev/qwik#8060

[wmertens]

On further reflection, having onCustom-Event work for both custom-event and customEvent isn't really a problem, especially since there's no real runtime cost. So that behavior can stay as-is.

But doing the conversion from JSX to HTML handler names as soon as possible is still very much worth it.

So the todo list becomes:

• Do the conversion in JSXNode or _jsxSplit so that the JSXNode props never contain onFoo$ but instead immediately on:foo
• Make the optimizer do this for string tags
  • <div onClick$={...}/> => _jsxSorted('div', null, {"on:click": qrl(...)})