Add generic prop type support

[jamesrweb]

Fixes issue #151

Proposed Changes

• Added support for generic prop types

Additional notes

Please test this thoroughly with and without generics as this is a potentially breaking change and we want to be sure it is not!

Please also wait for review from @junwen-k so that he can verify the topic is resolved or needs further work / coverage.

[junwen-k]

@jamesrweb Great job and thanks for the quick responses!

I've tested locally with the new changes and it seems to be working as intended. You might want to consider updating README.md under the typescript usage section in order to improve the documentation. I can also submit a pull request if you don't mind :)

Here's an example that I used for my Next.js typescript project.

import dynamic from 'next/dynamic';

import type { P5WrapperProps } from 'react-p5-wrapper';

interface YourSketchProps {
  backgroundColor: string;
}

const ReactP5Wrapper = dynamic<P5WrapperProps<YourSketchProps>>(
  () => import('react-p5-wrapper').then((mod) => mod.ReactP5Wrapper),
  {
    ssr: false,
  }
);

const sketch: Sketch<YourSketchProps> = (p5) => {
  // ...

  p5.updateWithProps = (props) => {
    backgroundColor = props.backgroundColor; // typed
    // ...
  };
}

// ...

<ReactP5Wrapper
  sketch={sketch}
  backgroundColor="rgb(255, 255, 255)" // typed
/>

[jamesrweb]

@junwen-k @yevdyko I implemented some changes due to one missing implementation of the generic I noticed, this caused an issue which is a known problem with TypeScript itself and commented the workaround, etc. Please retest and provide feedback as necessary. Thanks for the feedback so far 🚀!

[jamesrweb]

@jamesrweb Great job and thanks for the quick responses!

I've tested locally with the new changes and it seems to be working as intended. You might want to consider updating README.md under the typescript usage section in order to improve the documentation. I can also submit a pull request if you don't mind :)

Here's an example that I used for my Next.js typescript project.

import dynamic from 'next/dynamic';

import type { P5WrapperProps } from 'react-p5-wrapper';

interface YourSketchProps {
  backgroundColor: string;
}

const ReactP5Wrapper = dynamic<P5WrapperProps<YourSketchProps>>(
  () => import('react-p5-wrapper').then((mod) => mod.ReactP5Wrapper),
  {
    ssr: false,
  }
);

const sketch: Sketch<YourSketchProps> = (p5) => {
  // ...

  p5.updateWithProps = (props) => {
    backgroundColor = props.backgroundColor; // typed
    // ...
  };
}

// ...

<ReactP5Wrapper
  sketch={sketch}
  backgroundColor="rgb(255, 255, 255)" // typed
/>

Good point about the documentation, I will update this tomorrow also, thanks for that one, good catch!

[yevdyko]

@jamesrweb are you going to add the documentation in the current PR? there are also conflicts, could you resolve them?

[junwen-k]

@junwen-k @yevdyko I implemented some changes due to one missing implementation of the generic I noticed, this caused an issue which is a known problem with TypeScript itself and commented the workaround, etc. Please retest and provide feedback as necessary. Thanks for the feedback so far rocket!

I've re-tested, it seems like the only changes that needed to be made to my previous code was

import type { P5WrapperProps, SketchProps } from 'react-p5-wrapper';

interface YourSketchProps extends SketchProps {
  backgroundColor: string;
}

And everything worked the same as before.

[jamesrweb]

@jamesrweb are you going to add the documentation in the current PR? there are also conflicts, could you resolve them?

I will add them to this PR as soon as I can. 👏🏻

[jamesrweb]

@junwen-k @yevdyko I implemented some changes due to one missing implementation of the generic I noticed, this caused an issue which is a known problem with TypeScript itself and commented the workaround, etc. Please retest and provide feedback as necessary. Thanks for the feedback so far rocket!

I've re-tested, it seems like the only changes that needed to be made to my previous code was

import type { P5WrapperProps, SketchProps } from 'react-p5-wrapper';



interface YourSketchProps extends SketchProps {

  backgroundColor: string;

}

And everything worked the same as before.

@junwen-k Excellent! once the documentation is updated then we can get this merged then. 🚀

If there's any issues otherwise just let me know. I'll update the documentation ASAP otherwise 😇.

[jamesrweb]

@junwen-k @yevdyko I updated the documentation and resolved the conflicts, please take another look and approve if you are confident that:

a) There isn't a breaking change being introduced
b) The current changes resolve issue #151
c) The documentation is thorough and correct enough for release

Thanks in advance and fingers crossed we are almost there now with this feature 🎉!

[jamesrweb]

@yevdyko @junwen-k any idea when you'll have chance to review this again? ☺️

[junwen-k]

PR LGTM :)

[yevdyko]

@jamesrweb The documentation looks great, the changes are also good. I tried your examples in the typescript demo app and everything works as expected. I would say that it's ready to be released!

Thanks for this significant improvement 💪

🚢 🚢 🚢