fix(events): map onFocusIn/Out to correct events

[claviska]

Fixes #2628.

Support for onFocusIn and onFocusOut were added in #2437. These events are supported by all browsers and are widely used, but they're not defined as properties in the spec yet. As such, they don't exist as properties on the window object.

The end result is the attached listeners being focusIn and focusOut instead of focusin and focusout. This PR adds an array of event transformations to fall back on for edge case events such as these.

Update: we've decided to change the types to onFocusin and onFocusout so we don't modify the runtime. Implemented in 513c571.

[claviska]

I took a look at what Preact does and it turns out they don't support either event and neither does React. Notably, the reasoning is:

The supported part is actually driven by the fact that the event exists on the Global Event Interface and they do not. Just try it in your console 'onfocusin' in window.

However, in both Preact and React the onFocus and onBlur methods bubble up, whereas natively (and in Stencil) they do not. It's worth mentioning that, currently, you can make this work with @ts-ignore and lowercasing:

render() {
  return (
    // @ts-ignore
    <div onFocusin={() => console.log('focus')} onFocusout={() => console.log('blur')}>
      <div contenteditable>Edit me</div>
    </div>
  );
}

But this doesn't seem like a good solution. 😕

[adamdbradley]

I think the best solution would be to change the JSX types from onFocusIn to onFocusin. It'd force the correct case, and we wouldn't have to add to the runtime for these special cases.

[WickyNilliams]

I'd be happy with the onFocusin/onFocusout approach