Remapping FederatedEvent Names to camelCase

[lunarraid]

RFC: Should @pixi/react remap federated events to camelCase?

Right now, vanilla PixiJS has properties on FederatedEventTarget that can be used for assigning a single callback handler for the various FederatedEvents. These properties are all lowercase. @pixi/react utilizes these callbacks instead of attaching event handlers, but is currently remapping them to use camelCase (onpointerdown becomes onPointerDown).

The idea behind the remapping is that this is the same convention react-dom uses for its event handling. The original reasoning behind the case change, though, was that react used synthetic events, and thus was actually providing a completely different argument to the callback than the original, so a completely different property name for the event made sense. In the case of @pixi/react, these callbacks are being sent the original event that PixiJS is providing to its raw Containers, so doesn't need to do the same here. The camelCase remapping is also causing some confusion, because generally the extends API allows you to simply use the named params that are on the vanilla classes, but these particular event params are being treated as a special case hard-coded in the applyProps helper (and adding remapping overhead).

I propose that @pixi/react doesn't need the remapping to try to stick to a legacy react-dom pattern, and using pixi event handling callback names is perfectly valid, but am seeking community thoughts on this.

[thejustinwalsh]

I can understand the desire for both patterns, and I personally find it harder to read all lowercase event properties.

However, as the names are already defined in the constructor options by Pixi itself, I tend to agree that we should assign the properties by their names as they exist on the class the component represents. It would simplify typing as well.

I was quickly researching why react-three-fiber used camel-cased event names. It appears it is because react-three-fiber is building the interaction and event management themselves, as three.js does not come with event support in the same way out of the box.

The official react stance is, https://react.dev/learn/writing-markup-with-jsx#3-camelcase-salls-most-of-the-things as aria-* and data-* allready break the rules of camelCase all things, so I can build a mental framework to live with it in the end.