refactor: Change component name from ReactP5Wrapper to P5Canvas

[yevdyko]

@jamesrweb As we discussed, here is a proposal for renaming the component. What do you think?

PR Type

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

Description

This PR refactors the ReactP5Wrapper component by renaming it to P5Canvas and updating all corresponding references throughout the codebase.

The new name clearly communicates that the component renders a p5.js canvas, rather than serving as a generic wrapper. It also aligns with common React naming conventions for components that directly represent rendered elements.

The original name ReactP5Wrapper was somewhat ambiguous, implying a higher-order component or general wrapper rather than a canvas-rendering component.

By renaming it to P5Canvas:

• Developers can immediately understand that the component is responsible for rendering a p5.js canvas.
• Code readability and maintainability are improved.

Overall, this refactor helps future contributors quickly grasp the component’s purpose and reduces potential confusion.

Proposed Changes

• Change component name from ReactP5Wrapper to P5Canvas
• Rename ReactP5WrapperGuard to P5CanvasGuard
• Rename ReactP5WrapperWithSketch to P5CanvasWithSketch
• Rename P5WrapperProps to P5CanvasProps
• Rename P5WrapperPropsWithSketch to P5CanvasPropsWithSketch
• Rename P5WrapperClassName to CanvasContainerClassName
• Update data-testid wrapper to canvas-container
• Rename WrapperRef to CanvasContainerRef
• Rename CanvasInstanceRef to P5CanvasInstanceRef
• Rename userProvidedProps to sketchProps
• Rename removeCanvasInstance to removeP5CanvasInstance
• Rename updateCanvasInstance to updateP5CanvasInstance
• Rename createCanvasInstance to createP5CanvasInstance
• Rename Wrapper to CanvasContainer
• Actualize test descriptions

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

Breaking Changes

• Yes (please describe)
• No

Migration Notes

This PR introduces a component and type rename, which is a breaking change.

1. JSX usage ReactP5Wrapper -> P5Canvas

Before:

import { ReactP5Wrapper } from "@p5-wrapper/react";

<ReactP5Wrapper sketch={mySketch} />

After:

import { P5Canvas } from "@p5-wrapper/react";

<P5Canvas sketch={mySketch} />

2. TypeScript types

2.1. P5WrapperProps -> P5CanvasProps

Before:

import * as React from "react";
import { P5CanvasInstance, P5WrapperProps, ReactP5Wrapper } from "@p5-wrapper/react";

function sketch(p5: P5CanvasInstance) {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.updateWithProps = (props: P5WrapperProps) => {
    if (props.rotation) {
      rotation = (props.rotation * Math.PI) / 180;
    }
  };

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
}

export function App() {
  return <ReactP5Wrapper sketch={sketch} />;
}

After:

import * as React from "react";
import { P5CanvasInstance, P5CanvasProps, P5Canvas } from "@p5-wrapper/react";

function sketch(p5: P5CanvasInstance) {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.updateWithProps = (props: P5CanvasProps) => {
    if (props.rotation) {
      rotation = (props.rotation * Math.PI) / 180;
    }
  };

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
}

export function App() {
  return <P5Canvas sketch={sketch} />;
}

2.2. P5WrapperClassName -> CanvasContainerClassName

Before:

import { P5WrapperClassName, ReactP5Wrapper } from "@p5-wrapper/react";
import styled, { createGlobalStyle } from "styled-components";

const GlobalWrapperStyles = createGlobalStyle`
  .${P5WrapperClassName} {
    position: relative;
  }
`;

const StyledCentredText = styled.span`
  .${P5WrapperClassName} & {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }
`;

export function App() {
  const [rotation, setRotation] = useState(0);

  useEffect(() => {
    const interval = setInterval(
      () => setRotation(rotation => rotation + 100),
      100
    );

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <Fragment>
      <GlobalWrapperStyles />
      <ReactP5Wrapper sketch={sketch} rotation={rotation}>
        <StyledCentredText>Hello world!</StyledCentredText>
      </ReactP5Wrapper>
    </Fragment>
  );
}

After:

import { CanvasContainerClassName, P5Canvas } from "@p5-wrapper/react";
import styled, { createGlobalStyle } from "styled-components";

const GlobalWrapperStyles = createGlobalStyle`
  .${CanvasContainerClassName} {
    position: relative;
  }
`;

const StyledCentredText = styled.span`
  .${CanvasContainerClassName} & {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }
`;

export function App() {
  const [rotation, setRotation] = useState(0);

  useEffect(() => {
    const interval = setInterval(
      () => setRotation(rotation => rotation + 100),
      100
    );

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <Fragment>
      <GlobalWrapperStyles />
      <P5Canvas sketch={sketch} rotation={rotation}>
        <StyledCentredText>Hello world!</StyledCentredText>
      </ReactP5Wrapper>
    </Fragment>
  );
}

No additional changes were made — only the component and type names have been updated.

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

[github-actions]

Coverage report for commit: c34bc64
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
P5Canvas.tsx	100.00%	100.00%	100.00%
P5CanvasGuard.tsx	100.00%	100.00%	72.73%
P5CanvasWithSketch.tsx	100.00%	100.00%	88.89%
src/constants
CanvasContainerClassName.ts	100.00%	100.00%	100.00%
src/contracts
CanvasContainer.ts	100.00%	100.00%	100.00%
CanvasContainerRef.ts	100.00%	100.00%	100.00%
InputProps.ts	100.00%	100.00%	100.00%
P5CanvasInstance.ts	100.00%	100.00%	100.00%
P5CanvasInstanceRef.ts	100.00%	100.00%	100.00%
P5CanvasProps.ts	100.00%	100.00%	100.00%
P5CanvasPropsWithSketch.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%
p5.ts	100.00%	100.00%	100.00%
src
main.tsx	100.00%	100.00%	100.00%
src/utils
createP5CanvasInstance.ts	100.00%	100.00%	100.00%
logErrorBoundaryError.ts	100.00%	100.00%	100.00%
propsAreEqual.ts	100.00%	100.00%	100.00%
removeP5CanvasInstance.ts	100.00%	100.00%	100.00%
updateP5CanvasInstance.ts	100.00%	100.00%	100.00%
withoutKeys.ts	100.00%	100.00%	100.00%

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

[jamesrweb]

You will also need to update all of the examples in the .github/README.md and also check the CI and CD workflows, just in case.

Otherwise looks good to me 🚀

[yevdyko]

@jamesrweb Thanks for the quick review! I’ll update the README examples in a separate PR since we need to keep the old version for now, otherwise it could be confusing. I also checked the workflows and no changes needed.

BTW, do we want to move the tsconfig file from the root to the config directory? If so, I can create a PR for that.

[jamesrweb]

@jamesrweb Thanks for the quick review! I’ll update the README examples in a separate PR since we need to keep the old version for now, otherwise it could be confusing. I also checked the workflows and no changes needed.

BTW, do we want to move the tsconfig file from the root to the config directory? If so, I can create a PR for that.

I don't mind but I'd make the change in this PR and then I'll just deploy the new version, easy, so just update the README in this PR and then I can just deploy it after we merge this one.

[yevdyko]

@jamesrweb Just updated the README. I’ll move the tsconfig in a separate PR.

[jamesrweb]

What do you want to do with the tsconfig?

[yevdyko]

@jamesrweb Move it to the config directory, right?

[jamesrweb]

You don't have to but if you want to, feel free to make a PR for it, yeah.

[yevdyko]

Would you prefer to keep it in the root directory? I believe it was in the config directory before the refactoring some time ago.

[jamesrweb]

Yeah because there were two configs in the config directory that the one in the root linked to but I rewrote them into one and refactored the other two out. I'm open to both options.

[yevdyko]

Yeah, let’s keep it as it is. I’ll go ahead and finally extract the common workflows into the newly created repository, as we discussed.

[yevdyko]

What are we still missing to make a final release of version 5?

[jamesrweb]

Workflow migrations (the ones you'll do).

AND

End to end tests to cover p5@2.x.x changes (I'll do those).

[yevdyko]

Sounds good! Let's focus on that 🤖