shoelace-style/react-wrapper

A lightweight utility that wraps custom elements ("web components") so they can be used like native React components.

react-wrapper's Issues

Several bugs and some remarks

Some issues:

• The first argument of method componentDidUpdate is prevProps => we should pass this.props to syncProps instead:
  

  react-wrapper/src/react-wrapper.jsx

  Lines 16 to 18 in 2178d81

  	componentDidUpdate(props) {
  	this.syncProps(props);
  	}

• The second part of this condition should be removed
  

  react-wrapper/src/react-wrapper.jsx

  Line 27 in 2178d81

  if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {

  
  otherwise something like <SlSelect onsl-change={...}/> will not work.

• I do not understand why this.element has to be of type RefObject<HTMLElement> ...
  it could easily be of type HTMLElement | null, couldn't it?

  Just a remark:
  Frankly, I personally do not really like this it.element.current.someMethod() thingy (it does not feel very reactish). Wouldn't somethig like it.someMethod() be much nicer? Would mean that the wrappers of all Shoelace component should be generated by a script (which they should be anyway, I guess) or the meta information about the method names should be available at runtime (static class field or @method decorator or whatever). Using React.forwardRef could also be an alternative, I guess. [Edit] I think React.forwardRef is the way to go.

• (no bug) Wrapper component should have a useful displayName for debugging purposes.

No Typescript/tsx support

When I import the react wrapper in a .tsx file, it throws the error 'Could not find a declaration file for module '@shoelace-style/react-wrapper'.' is there something I'm doing wrong or is there just no typescript support for this. I only ask because there are types for the individual components.