opentok / opentok-react

React components for OpenTok.js
https://www.npmjs.com/package/opentok-react
MIT License
107 stars 105 forks source link

Update `preloadScript` types with generics #170

Open DogPawHat opened 3 years ago

DogPawHat commented 3 years ago

Behavior of preloadScript.js

// at line 47
render() {
// destructure out the props used by the HOC
const { opentokClientUrl, loadingDelegate, ...restProps } = this.props;
  if (this.state.scriptLoaded) {
    return <InnerComponent {...restProps} />;
  }

  return loadingDelegate;
}

// at Line 59
PreloadScript.propTypes = {
  opentokClientUrl: PropTypes.string,
  loadingDelegate: PropTypes.node,
};

Expected Typescript Behavior

The HOC take in a InnerComponent and outputs a new Components with it's own propTypes but also passes on any props not used by itself to the InnerComponent. Props outside of PreloadScriptProps / PreloadScript.propTypes should therefore comply with the InnerCompoents prop type validation as well as preloadScripts Prop types.

Actual Typescript Behavior

Passing in props besides PreloadScriptProps will trigger a type checking error, contrary to the behavior allowed in vanilla JS. You therefore can't pass down props to InnerComponent in TS despite the JS code doing that

Remedy

Update the typing declarations for preloadScript to use generics to allow props to be passed down to InnerComponent

nspilman commented 3 years ago

Hi OpenTok team - I'm working on a TypeScript migration on a react codebase and am running into this very issue. Thank you for considering this fix!