[Component]: adds event types to react

[benjaminknox]

Resolves #407

For react components, currently generic typing allows any event prop to be used (e.g. <LeoButton onClick={...}>), if an incorrect event name is used (e.g. <LeoButton onClicked={...}>) there is no type error. Ideally a type error for an incorrect prop name would show.

This solves this by generating an event type for the react components by parsing the corresponding svelte type file, it should contain event types resulting from the typed createEventDispatcher. When there are no events defined in the svelte file it doesn't include any event types.

For example, in input.svelte#L74-L84:

  type InputEventDetail = {
    innerEvent: Event & { target: HTMLInputElement }
    value: string
    valueAsNumber: number
    valueAsDate: number
  }

  const dispatch = createEventDispatcher<{
    change: InputEventDetail
    input: InputEventDetail
    focus: InputEventDetail
    blur: InputEventDetail
    keydown: InputEventDetail
    keyup: InputEventDetail
    keypress: InputEventDetail
    focusin: InputEventDetail
    focusout: InputEventDetail
  }>()

Results in a type definition that looks like this:

import type * as React from 'react'
import type { ReactProps } from '../src/components/svelte-react'
import type { InputEvents as SvelteEvents, InputProps as SvelteProps } from '../types/components/input/input.svelte';

export type InputEventProps = {
  onChange?: (event: CustomEvent<{
      innerEvent: Event & {
          target: HTMLInputElement;
      };
      value: string;
      valueAsNumber: number;
      valueAsDate: number;
  }) => void;
  onInput?: (event: CustomEvent<{...}>) => void;
  onFocus?: (event: CustomEvent<{...}>) => void;
  onBlur?: (event: CustomEvent<{...}>) => void;
  onKeydown?: (event: CustomEvent<{...}>) => void;
  onKeyup?: (event: CustomEvent<{...}>) => void;
  onKeypress?: (event: CustomEvent<{...}>) => void;
  onFocusin?: (event: CustomEvent<{...}>) => void;
  onFocusout?: (event: CustomEvent<{...}>) => void
}

export type InputProps = InputEventProps & ReactProps<SvelteProps, SvelteEvents>;
export default function InputReact(props: React.PropsWithChildren<InputProps>): JSX.Element

// As we don't currently have type definitions for the web components, export
// the Type Definitions from the Svelte component.
export * from '../types/components/input/input.svelte'

Screen.Recording.2023-10-17.at.1.17.50.PM.mov

[benjaminknox]

Creates a type that gets associated with the component type during the generation of the react components.

[fallaciousreasoning]

Wow thanks for this @benjaminknox - I'm going to take a couple of days to mull it over (and I'm away the rest of this week) but this seems like a sensible approach.

The main thing we might be missing is the ability to accept standard HTML events. When we wrap these in a WebComponent, it actually supports all the standard events (onClick, onMouseEnter, onMouseDown, onKeyDown ect), so we should make sure we are still able to accept those events too

[benjaminknox]

Note: The method below is not preferred and the PR it references is closed because the html events are not available yet, see this comment: benjaminknox#1 (comment)

The main thing we might be missing is the ability to accept standard HTML events. When we wrap these in a WebComponent, it actually supports all the standard events (onClick, onMouseEnter, onMouseDown, onKeyDown ect), so we should make sure we are still able to accept those events too

Thanks @fallaciousreasoning, I think I have a possible solution for this, the details are in a PR I created against this branch in my fork of leo: benjaminknox#1

Basically, the solutions works when a component imports and uses SvelteHTMLElements in the svelte file, for instance if I were to add a table component:

<script lang="ts">
  import type { SvelteHTMLElements } from 'svelte/elements'

  type TableProps = Partial<SvelteHTMLElements['table']>

  type $$Props = TableProps

  let newValue: string = ''

  let table: HTMLTableElement = undefined
</script>

<table bind:this={table} {...$$restProps}><slot /></table>

The resulting react type file would be:

import type * as React from 'react'
import type { ReactProps } from '../src/components/svelte-react'
import type { TableEvents as SvelteEvents, TableProps as SvelteProps } from '../types/components/table/table.svelte';


export type TableProps = TableEventProps & ReactProps<SvelteProps, SvelteEvents>;
export default function TableReact(props: React.PropsWithChildren<React.HTMLAttributes<HTMLElement | HTMLTableElement> | TableProps>): JSX.Element

// As we don't currently have type definitions for the web components, export
// the Type Definitions from the Svelte component.
export * from '../types/components/table/table.svelte'

[benjaminknox]

@fallaciousreasoning I think I've addressed all of your comments here.

Although there's one more thing bothering me, we end up with event names that are not quite camelcase, like in the Input component in the example above there is onKeypress instead of the react onKeyPress.

Is this ok to keep this way?

I have a few ideas on how to fix this:

1. We could implement something like this library to parse the words in the event name.
2. We could limit it to the events that are standard on react elements and match those event names case insensitively, e.g. onKeydown => onKeyDown, onMouseleave => onMouseLeave, or onFocusout => onFocusOut. (leaving any non-standard events)

Any thoughts?

[fallaciousreasoning]

Hmm, you're right, that's not ideal - shall we see if we can solve it? I think I'd be pretty happy with a solution which just handles the standard HTML events, which we can probably do as a Typescript-only fix:

(my super hacky PoC)

type EventNames = 'onMouseDown' | 'onMouseEnter' | 'onClick' | 'onKeyDown' | 'onKeyUp'
type EventNameMap = {
  [P in EventNames as Lowercase<P>]: P
}

type Events<T> = {
  [P in keyof T as (P extends Lowercase<EventNames> ? EventNameMap[P] : P)]: T[P]
} 

let f: Events<{ 'onclick': () => {}, 'ondidthething': () => {}, onmouseenter: () => {} }>
f.<CTRL+Space>

[fallaciousreasoning]

@benjaminknox I finally got around to testing this out in https://github.com/brave/brave-core, which is our main consumer of this repo. This is mostly working great but I did notice a couple of things:

1. On the LeoButton component, the event names which are forwarded to the internal button are named on:<eventname> instead of on<Eventname> I just noticed it was already acting like this 😆
2. We seem to have lost the uppercase letter at the start of the event name (i.e. onClose is now onclose)

I think if we fix these it should be good to land 😄

for capitalizing on in front of event names I think this should work:

type Events = ['onclick', 'onclose', 'onopen', 'onchange', 'oninput']

type CasedBetter<T> = T extends `on${infer K}` ? `on${Capitalize<K>}` : never

type CapitalOn = CasedBetter<Events[number]>
// type CapitalOn = "onClick" | "onClose" | "onOpen" | "onChange" | "onInput"

[fallaciousreasoning]

@benjaminknox I pushed a commit to fix the event names 😄

[fallaciousreasoning]

This LGTM - if you sign the commits I can land it 😄

[benjaminknox]

This LGTM - if you sign the commits I can land it 😄

Done!

We seem to have lost the uppercase letter at the start of the event name (i.e. onClose is now onclose)

Good catch thanks @fallaciousreasoning

[fallaciousreasoning]

Thanks heaps for this @benjaminknox!