Add support for P5 v2.x.x for the upcoming wrapper 5.x.x release

[jamesrweb]

Related Issue

N / A

PR Type

• 🐛 Bug Fix
• ✨ New Feature
• 🔨 Code Refactor
• 📝 Documentation Update
• 🧪 Test Update
• 🔧 Build/CI Update
• 🧹 Chore
• ⏪ Revert

Description

This PR allows the usage of p5 v2.x.x within the wrapper and is being done as part of the preparations for the upcoming v5.x.x release.

Proposed Changes

• Update the p5 peer dependency to the v2.x.x range
• Update the source code and tests to support the new p5 version
• Update the project documentation to inform people of the upcoming p5 version 2.x.x changes
• Add an example to the demo application of using async / await in the setup method

How Has This Been Tested?

• Unit Tests
• Integration Tests
• Manual Testing (please describe)

Tested the demo application locally and checked all sketches still run as expected. Also ran the test suite and all existing tests pass without changes.

Screenshots/Recordings

I can recommend checking out the live stream from Dan and Kit. It is not required to review this but might be of interest for you to see some of the p5 v2.x.x changes. In saying that most of the topics covered are surface level BUT for a deeper dive they have some beta docs you can check if interested also.

Breaking Changes

• Yes (please describe)
• No

Since p5 v2.x.x now have some methods converted for use with async / await such as loadFont, etc, this will inherintly be a breaking change for consumers of the wrapper but it is from the side of p5 itself and makes sense since this is a major change on their side.

Checklist

• My code follows the code style of this project
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed
• My changes generate no new warnings

Additional Notes

Please test thoroughly @yevdyko, perhaps in one of your personal projects like you usually do and maybe we can use your experience in the 5.x.x release notes to help people navigate some of the changes to the p5 methods, etc, WDYT?

[github-actions]

Coverage report for commit: 2078d84
File: ./coverage/clover.xml

Cover ┌─────────────────────────┐ Freq.
   0% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  10% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  20% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  30% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  40% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  50% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  60% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  70% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  80% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  90% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
 100% │ ███████████████████████ │ 100.0%
      └─────────────────────────┘
 *Legend:* █ = Current Distribution 

Summary - Lines: 100.00% | Methods: 100.00% | Branches: 91.30%

Files	Lines	Methods	Branches
src/components
ReactP5Wrapper.tsx	100.00%	100.00%	100.00%
ReactP5WrapperGuard.tsx	100.00%	100.00%	72.73%
ReactP5WrapperWithSketch.tsx	100.00%	100.00%	88.89%
src/constants
P5WrapperClassName.ts	100.00%	100.00%	100.00%
src/contracts
CanvasInstanceRef.ts	100.00%	100.00%	100.00%
InputProps.ts	100.00%	100.00%	100.00%
P5CanvasInstance.ts	100.00%	100.00%	100.00%
P5WrapperProps.ts	100.00%	100.00%	100.00%
P5WrapperPropsWithSketch.ts	100.00%	100.00%	100.00%
Sketch.ts	100.00%	100.00%	100.00%
SketchProps.ts	100.00%	100.00%	100.00%
WithChildren.ts	100.00%	100.00%	100.00%
Wrapper.ts	100.00%	100.00%	100.00%
WrapperRef.ts	100.00%	100.00%	100.00%
p5.ts	100.00%	100.00%	100.00%
src
main.tsx	100.00%	100.00%	100.00%
src/utils
createCanvasInstance.ts	100.00%	100.00%	100.00%
logErrorBoundaryError.ts	100.00%	100.00%	100.00%
propsAreEqual.ts	100.00%	100.00%	100.00%
removeCanvasInstance.ts	100.00%	100.00%	100.00%
updateCanvasInstance.ts	100.00%	100.00%	100.00%
withoutKeys.ts	100.00%	100.00%	100.00%

_{🤖 comment via lucassabreu/comment-coverage-clover}

[yevdyko]

@jamesrweb I tested the changes locally, and everything works as expected 🚀

Regarding adding extra notes to the README, I don’t think it’s necessary since the component name and interface remain the same except that React needs to be updated to version 19 and all breaking changes in p5 version 2 must be addressed before using this version 5 component.

I was wondering about the P5 2.0 support changes, as I only noticed updates in the import and configuration files. Am I missing anything?

P.S. Are you considering renaming the component in version 6 from ReactP5Wrapper to P5Canvas? This would make its purpose immediately clear, improve readability, and align with common naming conventions by emphasizing what it actually renders. WDYT?

[yevdyko]

Btw @jamesrweb should we add a new version such as 5.0.0-rc.4?

[jamesrweb]

@jamesrweb I tested the changes locally, and everything works as expected 🚀

Nice 🚀

Regarding adding extra notes to the README, I don’t think it’s necessary since the component name and interface remain the same except that React needs to be updated to version 19 and all breaking changes in p5 version 2 must be addressed before using this version 5 component.

Makes sense 👍🏻

I was wondering about the P5 2.0 support changes, as I only noticed updates in the import and configuration files. Am I missing anything?

They did a whole load of changes to how plugins work, async / await support, new methods for shaders, changes to methods like vertex and a whole load of other things. The types are sadly not so good FYI so typescript users will maybe hit some issues but they will work on this in coming releases they said.

P.S. Are you considering renaming the component in version 6 from ReactP5Wrapper to P5Canvas? This would make its purpose immediately clear, improve readability, and align with common naming conventions by emphasizing what it actually renders. WDYT?

Could do but I would make a separate PR for this, can you do that?

[jamesrweb]

Btw @jamesrweb should we add a new version such as 5.0.0-rc.4?

I will do later tonight as a separate commit.

Done. 🚢

[yevdyko]

@jamesrweb Yeah, I saw the list of changes. As I understand it, types are a weak point of the package for those who use it with TypeScript, as you mentioned in your comment on the code

[yevdyko]

@jamesrweb Tested 5.0.0-rc.4 and it looks good 💪