Resolve type errors when using the library in a typescript react application

[jstolwijk]

@lit-labs/react v1.0.0-rc.1generates invalid typescript type definitions, this issue seems to be resolved in rc.2

Example

<WiredButton elevation={1}>Submit</WiredButton>

Results in the following error:

'WiredButton' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is '(HTMLCollection & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | undefined'.

[msakrejda]

Thanks for this! I just tried using wired-elements-react and it's great, but the type definitions have some serious issues. I tried this PR and it solves the children problem, but there seem to still be some issues with event handlers: I haven't checked all of them, but WiredButton's onClick handler is not present in the types--instead it suggests onclick, but if I use that, the handler does not actually fire. If I do

const WB = WiredButton as any;

return <WB onClick={handleClick}>click me</WB>

this works correctly but is obviously not ideal. I know React pretty well but I am not at all familiar with @lit-labs/react or with wired-elements-react--do you know what the issue might be @jstolwijk ?

[msakrejda]

After playing around with this some more, I think this wrapper is really hard to work with. I'm dropping it from my prototype.The elements are inconsistent and don't conform to React conventions (e.g., the WiredComboBox has an onselected callback instead of onChange and the value in event.currentTarget.value is not the value in the value attribute of the selected item). The elements are gorgeous but they're really hard to work with, especially when trying to prototype something quickly. I've also found that the WiredTextarea elements don't work as controlled elements: if I update the value prop, the elements are not re-rendered (a sibling native textarea I added re-renders fine).