+
{props.children}
);
diff --git a/src/constants/CanvasContainerClassName.ts b/src/constants/CanvasContainerClassName.ts
new file mode 100644
index 0000000..ce9a05e
--- /dev/null
+++ b/src/constants/CanvasContainerClassName.ts
@@ -0,0 +1 @@
+export const CanvasContainerClassName = "canvas-container";
diff --git a/src/constants/P5WrapperClassName.ts b/src/constants/P5WrapperClassName.ts
deleted file mode 100644
index a00bbc4..0000000
--- a/src/constants/P5WrapperClassName.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const P5WrapperClassName = "p5-wrapper-react";
diff --git a/src/main.tsx b/src/main.tsx
index e2e8c9e..eb272f0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,5 @@
export { P5Canvas } from "@components/P5Canvas";
-export { P5WrapperClassName } from "@constants/P5WrapperClassName";
+export { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
export { type P5CanvasInstance } from "@contracts/P5CanvasInstance";
export { type P5CanvasProps } from "@contracts/P5CanvasProps";
export { type Sketch } from "@contracts/Sketch";
diff --git a/tests/components/P5Canvas.test.tsx b/tests/components/P5Canvas.test.tsx
index 770b06a..d679b7e 100644
--- a/tests/components/P5Canvas.test.tsx
+++ b/tests/components/P5Canvas.test.tsx
@@ -1,5 +1,5 @@
import { P5Canvas } from "@components/P5Canvas";
-import { P5WrapperClassName } from "@constants/P5WrapperClassName";
+import { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
import { type P5CanvasInstance } from "@contracts/P5CanvasInstance";
import { type Sketch } from "@contracts/Sketch";
import { render, RenderResult, waitFor } from "@testing-library/react";
@@ -64,7 +64,7 @@ describe("P5Canvas", () => {
const wrapper = await findByTestId("wrapper");
expect(wrapper).toBeInstanceOf(HTMLDivElement);
- expect(wrapper.className).toBe(P5WrapperClassName);
+ expect(wrapper.className).toBe(CanvasContainerClassName);
});
it("Unmounts the canvas when the element is removed from the DOM", async () => {
@@ -240,7 +240,7 @@ describe("P5Canvas", () => {
const StringComponent = renderToString(
);
expect(StringComponent).toBe(
- `
`
+ `
`
);
});
@@ -251,7 +251,7 @@ describe("P5Canvas", () => {
);
expect(StaticComponent).toBe(
- `
`
+ `
`
);
});
});
diff --git a/tests/constants/CanvasContainerClassName.test.ts b/tests/constants/CanvasContainerClassName.test.ts
new file mode 100644
index 0000000..bbe5c22
--- /dev/null
+++ b/tests/constants/CanvasContainerClassName.test.ts
@@ -0,0 +1,9 @@
+import { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
+import { describe, expect, it } from "vitest";
+
+describe("CanvasContainerClassName", () => {
+ it("Is exported as a non-empty string", () => {
+ expect(CanvasContainerClassName).toBeTypeOf("string");
+ expect(CanvasContainerClassName.length).toBeGreaterThan(0);
+ });
+});
diff --git a/tests/constants/P5WrapperClassName.test.ts b/tests/constants/P5WrapperClassName.test.ts
deleted file mode 100644
index a7eb280..0000000
--- a/tests/constants/P5WrapperClassName.test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { P5WrapperClassName } from "@constants/P5WrapperClassName";
-import { describe, expect, it } from "vitest";
-
-describe("P5WrapperClassName", () => {
- it("Is exported as a non-empty string", () => {
- expect(P5WrapperClassName).toBeTypeOf("string");
- expect(P5WrapperClassName.length).toBeGreaterThan(0);
- });
-});
diff --git a/tests/exports.test.tsx b/tests/exports.test.tsx
index ffff95f..2ee0260 100644
--- a/tests/exports.test.tsx
+++ b/tests/exports.test.tsx
@@ -1,17 +1,17 @@
-import { P5Canvas, P5WrapperClassName } from "@/main";
+import { CanvasContainerClassName, P5Canvas } from "@/main";
import { createElement, isValidElement } from "react";
import { assert, describe, expect, it, vi } from "vitest";
describe("Exports", () => {
- describe("P5WrapperClassName", () => {
+ describe("CanvasContainerClassName", () => {
it("Exports the css class name used on the wrapper", () => {
- expect(P5WrapperClassName).not.toBeUndefined();
- expect(P5WrapperClassName).toBe("p5-wrapper-react");
+ expect(CanvasContainerClassName).not.toBeUndefined();
+ expect(CanvasContainerClassName).toBe("canvas-container");
});
it("Exports the css class name used on the wrapper as a non-empty string", () => {
- expect(typeof P5WrapperClassName).toBe("string");
- expect(P5WrapperClassName.length).toBeGreaterThan(0);
+ expect(typeof CanvasContainerClassName).toBe("string");
+ expect(CanvasContainerClassName.length).toBeGreaterThan(0);
});
it("Exports the wrapper component", () => {
From 03ad9c1ebfd6ae6a6957db37f6d7360ee5133248 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Tue, 19 Aug 2025 14:48:58 +0100
Subject: [PATCH 07/17] Update data-testid
---
src/components/P5CanvasWithSketch.tsx | 2 +-
tests/components/P5Canvas.test.tsx | 14 +++++++-------
2 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 7d8780d..0708fae 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -46,7 +46,7 @@ const P5CanvasWithSketch =
(
{props.children}
diff --git a/tests/components/P5Canvas.test.tsx b/tests/components/P5Canvas.test.tsx
index d679b7e..ce63e4b 100644
--- a/tests/components/P5Canvas.test.tsx
+++ b/tests/components/P5Canvas.test.tsx
@@ -17,8 +17,8 @@ function createSketch(
async function waitForCanvas(findByTestId: RenderResult["findByTestId"]) {
return await waitFor(async () => {
- const wrapper = await findByTestId("wrapper");
- const canvas = wrapper.querySelector("canvas");
+ const canvasContainer = await findByTestId("canvas-container");
+ const canvas = canvasContainer.querySelector("canvas");
assert(canvas instanceof HTMLCanvasElement);
@@ -61,10 +61,10 @@ describe("P5Canvas", () => {
const sketch = createSketch();
const { findByTestId } = render(
`
+ `
`
);
});
@@ -251,7 +251,7 @@ describe("P5Canvas", () => {
);
expect(StaticComponent).toBe(
- `
`
+ `
`
);
});
});
From 93a24641937d580eafb57d680fba8e8461023830 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Tue, 19 Aug 2025 23:50:22 +0100
Subject: [PATCH 08/17] Rename WrapperRef to CanvasContainerRef
---
src/components/P5CanvasWithSketch.tsx | 10 +++++-----
.../{WrapperRef.ts => CanvasContainerRef.ts} | 2 +-
src/utils/updateCanvasInstance.ts | 8 ++++----
tests/utils/updateCanvasInstance.test.ts | 14 +++++++-------
4 files changed, 17 insertions(+), 17 deletions(-)
rename src/contracts/{WrapperRef.ts => CanvasContainerRef.ts} (60%)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 0708fae..8ba83c4 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -1,9 +1,9 @@
import * as React from "react";
import { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
+import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
import { type P5CanvasPropsWithSketch } from "@contracts/P5CanvasPropsWithSketch";
import { type SketchProps } from "@contracts/SketchProps";
-import { type WrapperRef } from "@contracts/WrapperRef";
import { removeCanvasInstance } from "@utils/removeCanvasInstance";
import { updateCanvasInstance } from "@utils/updateCanvasInstance";
import { withoutKeys } from "@utils/withoutKeys";
@@ -11,7 +11,7 @@ import { withoutKeys } from "@utils/withoutKeys";
const P5CanvasWithSketch = (
props: P5CanvasPropsWithSketch
) => {
- const wrapperRef: WrapperRef = React.useRef(null);
+ const canvasContainerRef: CanvasContainerRef = React.useRef(null);
const canvasInstanceRef: CanvasInstanceRef = React.useRef(null);
const userProvidedProps: SketchProps = React.useMemo(
() =>
@@ -28,7 +28,7 @@ const P5CanvasWithSketch = (
React.useEffect(() => {
canvasInstanceRef.current = updateCanvasInstance(
canvasInstanceRef,
- wrapperRef,
+ canvasContainerRef,
props.sketch
);
}, [props.sketch]);
@@ -38,13 +38,13 @@ const P5CanvasWithSketch = (
canvasInstanceRef.current?.updateWithProps?.(
userProvidedProps as unknown as Props
);
- }, [userProvidedProps, wrapperRef, canvasInstanceRef]);
+ }, [userProvidedProps, canvasContainerRef, canvasInstanceRef]);
React.useEffect(() => () => removeCanvasInstance(canvasInstanceRef), []);
return (
diff --git a/src/contracts/WrapperRef.ts b/src/contracts/CanvasContainerRef.ts
similarity index 60%
rename from src/contracts/WrapperRef.ts
rename to src/contracts/CanvasContainerRef.ts
index 6961c2a..212696d 100644
--- a/src/contracts/WrapperRef.ts
+++ b/src/contracts/CanvasContainerRef.ts
@@ -1,4 +1,4 @@
import { type Wrapper } from "@contracts/Wrapper";
import { type RefObject } from "react";
-export type WrapperRef = RefObject
;
+export type CanvasContainerRef = RefObject;
diff --git a/src/utils/updateCanvasInstance.ts b/src/utils/updateCanvasInstance.ts
index e8d9259..b3f7d9c 100644
--- a/src/utils/updateCanvasInstance.ts
+++ b/src/utils/updateCanvasInstance.ts
@@ -1,20 +1,20 @@
+import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
-import { type WrapperRef } from "@contracts/WrapperRef";
import { createCanvasInstance } from "@utils/createCanvasInstance";
import { removeCanvasInstance } from "@utils/removeCanvasInstance";
export function updateCanvasInstance(
canvasInstanceRef: CanvasInstanceRef,
- wrapperRef: WrapperRef,
+ canvasContainerRef: CanvasContainerRef,
sketch: Sketch
) {
- if (wrapperRef.current === null) {
+ if (canvasContainerRef.current === null) {
return null;
}
removeCanvasInstance(canvasInstanceRef);
- return createCanvasInstance(sketch, wrapperRef.current);
+ return createCanvasInstance(sketch, canvasContainerRef.current);
}
diff --git a/tests/utils/updateCanvasInstance.test.ts b/tests/utils/updateCanvasInstance.test.ts
index e9a5faf..7ccdb74 100644
--- a/tests/utils/updateCanvasInstance.test.ts
+++ b/tests/utils/updateCanvasInstance.test.ts
@@ -1,7 +1,7 @@
import { SketchProps } from "@/main";
+import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
import p5 from "@contracts/p5";
-import { type WrapperRef } from "@contracts/WrapperRef";
import { createCanvasInstance } from "@utils/createCanvasInstance";
import { updateCanvasInstance } from "@utils/updateCanvasInstance";
import { createRef } from "react";
@@ -11,16 +11,16 @@ describe("updateCanvasInstance", () => {
it("Should update a canvas instance to a new version", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
- const wrapperRef: WrapperRef = createRef();
+ const canvasContainerRef: CanvasContainerRef = createRef();
const canvasInstanceRef: CanvasInstanceRef = createRef();
const instance = createCanvasInstance(sketch, wrapper);
- wrapperRef.current = wrapper;
+ canvasContainerRef.current = wrapper;
canvasInstanceRef.current = instance;
const updatedCanvasInstanceRef = updateCanvasInstance(
canvasInstanceRef,
- wrapperRef,
+ canvasContainerRef,
sketch
);
@@ -29,10 +29,10 @@ describe("updateCanvasInstance", () => {
expect(instance).not.toEqual(updatedCanvasInstanceRef);
});
- it("Should return undefined if the wrapperRef value is null", () => {
+ it("Should return undefined if the canvasContainerRef value is null", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
- const wrapperRef: WrapperRef = createRef();
+ const canvasContainerRef: CanvasContainerRef = createRef();
const canvasInstanceRef: CanvasInstanceRef = createRef();
const instance = createCanvasInstance(sketch, wrapper);
@@ -40,7 +40,7 @@ describe("updateCanvasInstance", () => {
const updatedCanvasInstanceRef = updateCanvasInstance(
canvasInstanceRef,
- wrapperRef,
+ canvasContainerRef,
sketch
);
From 2a5a06cf09c325c358227f2fe36cbc0853a8167c Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Wed, 20 Aug 2025 00:36:35 +0100
Subject: [PATCH 09/17] Rename CanvasInstanceRef to P5CanvasInstanceRef
---
src/components/P5CanvasWithSketch.tsx | 14 +++++++-------
...asInstanceRef.ts => P5CanvasInstanceRef.ts} | 3 ++-
src/utils/removeCanvasInstance.ts | 8 ++++----
src/utils/updateCanvasInstance.ts | 6 +++---
tests/utils/removeCanvasInstance.test.ts | 18 +++++++++---------
tests/utils/updateCanvasInstance.test.ts | 14 +++++++-------
6 files changed, 32 insertions(+), 31 deletions(-)
rename src/contracts/{CanvasInstanceRef.ts => P5CanvasInstanceRef.ts} (62%)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 8ba83c4..1225740 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
-import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
+import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type P5CanvasPropsWithSketch } from "@contracts/P5CanvasPropsWithSketch";
import { type SketchProps } from "@contracts/SketchProps";
import { removeCanvasInstance } from "@utils/removeCanvasInstance";
@@ -12,7 +12,7 @@ const P5CanvasWithSketch = (
props: P5CanvasPropsWithSketch
) => {
const canvasContainerRef: CanvasContainerRef = React.useRef(null);
- const canvasInstanceRef: CanvasInstanceRef = React.useRef(null);
+ const p5CanvasInstanceRef: P5CanvasInstanceRef = React.useRef(null);
const userProvidedProps: SketchProps = React.useMemo(
() =>
withoutKeys(props, [
@@ -26,8 +26,8 @@ const P5CanvasWithSketch = (
);
React.useEffect(() => {
- canvasInstanceRef.current = updateCanvasInstance(
- canvasInstanceRef,
+ p5CanvasInstanceRef.current = updateCanvasInstance(
+ p5CanvasInstanceRef,
canvasContainerRef,
props.sketch
);
@@ -35,12 +35,12 @@ const P5CanvasWithSketch = (
React.useEffect(() => {
/** @see https://github.com/P5-wrapper/react/discussions/360 */
- canvasInstanceRef.current?.updateWithProps?.(
+ p5CanvasInstanceRef.current?.updateWithProps?.(
userProvidedProps as unknown as Props
);
- }, [userProvidedProps, canvasContainerRef, canvasInstanceRef]);
+ }, [userProvidedProps, canvasContainerRef, p5CanvasInstanceRef]);
- React.useEffect(() => () => removeCanvasInstance(canvasInstanceRef), []);
+ React.useEffect(() => () => removeCanvasInstance(p5CanvasInstanceRef), []);
return (
=
+/** Ref to the active p5.js sketch instance controlling the canvas */
+export type P5CanvasInstanceRef
=
RefObject | null>;
diff --git a/src/utils/removeCanvasInstance.ts b/src/utils/removeCanvasInstance.ts
index 2dba2b5..6359517 100644
--- a/src/utils/removeCanvasInstance.ts
+++ b/src/utils/removeCanvasInstance.ts
@@ -1,9 +1,9 @@
-import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
+import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type SketchProps } from "@contracts/SketchProps";
export function removeCanvasInstance(
- canvasInstanceRef: CanvasInstanceRef
+ p5CanvasInstanceRef: P5CanvasInstanceRef
) {
- canvasInstanceRef.current?.remove();
- canvasInstanceRef.current = null;
+ p5CanvasInstanceRef.current?.remove();
+ p5CanvasInstanceRef.current = null;
}
diff --git a/src/utils/updateCanvasInstance.ts b/src/utils/updateCanvasInstance.ts
index b3f7d9c..4f53ae8 100644
--- a/src/utils/updateCanvasInstance.ts
+++ b/src/utils/updateCanvasInstance.ts
@@ -1,12 +1,12 @@
import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
-import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
+import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
import { createCanvasInstance } from "@utils/createCanvasInstance";
import { removeCanvasInstance } from "@utils/removeCanvasInstance";
export function updateCanvasInstance(
- canvasInstanceRef: CanvasInstanceRef,
+ p5CanvasInstanceRef: P5CanvasInstanceRef,
canvasContainerRef: CanvasContainerRef,
sketch: Sketch
) {
@@ -14,7 +14,7 @@ export function updateCanvasInstance(
return null;
}
- removeCanvasInstance(canvasInstanceRef);
+ removeCanvasInstance(p5CanvasInstanceRef);
return createCanvasInstance(sketch, canvasContainerRef.current);
}
diff --git a/tests/utils/removeCanvasInstance.test.ts b/tests/utils/removeCanvasInstance.test.ts
index cc85836..502d141 100644
--- a/tests/utils/removeCanvasInstance.test.ts
+++ b/tests/utils/removeCanvasInstance.test.ts
@@ -1,6 +1,6 @@
import { SketchProps } from "@/main";
-import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
import p5 from "@contracts/p5";
+import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { removeCanvasInstance } from "@utils/removeCanvasInstance";
import { createRef } from "react";
import { describe, expect, it, vi } from "vitest";
@@ -11,10 +11,10 @@ describe("removeCanvasInstance", () => {
return;
});
const removeSpy = vi.spyOn(instance, "remove");
- const canvasInstanceRef: CanvasInstanceRef = createRef();
- canvasInstanceRef.current = instance;
+ const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
+ p5CanvasInstanceRef.current = instance;
- removeCanvasInstance(canvasInstanceRef);
+ removeCanvasInstance(p5CanvasInstanceRef);
expect(removeSpy).toHaveBeenCalledOnce();
});
@@ -23,13 +23,13 @@ describe("removeCanvasInstance", () => {
const instance = new p5(() => {
return;
});
- const canvasInstanceRef: CanvasInstanceRef = createRef();
- canvasInstanceRef.current = instance;
+ const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
+ p5CanvasInstanceRef.current = instance;
- expect(canvasInstanceRef.current).not.toBeNull();
+ expect(p5CanvasInstanceRef.current).not.toBeNull();
- removeCanvasInstance(canvasInstanceRef);
+ removeCanvasInstance(p5CanvasInstanceRef);
- expect(canvasInstanceRef.current).toBeNull();
+ expect(p5CanvasInstanceRef.current).toBeNull();
});
});
diff --git a/tests/utils/updateCanvasInstance.test.ts b/tests/utils/updateCanvasInstance.test.ts
index 7ccdb74..81ead9b 100644
--- a/tests/utils/updateCanvasInstance.test.ts
+++ b/tests/utils/updateCanvasInstance.test.ts
@@ -1,7 +1,7 @@
import { SketchProps } from "@/main";
import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
-import { type CanvasInstanceRef } from "@contracts/CanvasInstanceRef";
import p5 from "@contracts/p5";
+import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { createCanvasInstance } from "@utils/createCanvasInstance";
import { updateCanvasInstance } from "@utils/updateCanvasInstance";
import { createRef } from "react";
@@ -12,14 +12,14 @@ describe("updateCanvasInstance", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
- const canvasInstanceRef: CanvasInstanceRef = createRef();
+ const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
const instance = createCanvasInstance(sketch, wrapper);
canvasContainerRef.current = wrapper;
- canvasInstanceRef.current = instance;
+ p5CanvasInstanceRef.current = instance;
const updatedCanvasInstanceRef = updateCanvasInstance(
- canvasInstanceRef,
+ p5CanvasInstanceRef,
canvasContainerRef,
sketch
);
@@ -33,13 +33,13 @@ describe("updateCanvasInstance", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
- const canvasInstanceRef: CanvasInstanceRef = createRef();
+ const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
const instance = createCanvasInstance(sketch, wrapper);
- canvasInstanceRef.current = instance;
+ p5CanvasInstanceRef.current = instance;
const updatedCanvasInstanceRef = updateCanvasInstance(
- canvasInstanceRef,
+ p5CanvasInstanceRef,
canvasContainerRef,
sketch
);
From a4e3a2c2d9e182cf0796cb4e5476ba08820e5ff2 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 13:13:50 +0100
Subject: [PATCH 10/17] Rename userProvidedProps to sketchProps
---
src/components/P5CanvasWithSketch.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 1225740..0bd84aa 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -13,7 +13,7 @@ const P5CanvasWithSketch = (
) => {
const canvasContainerRef: CanvasContainerRef = React.useRef(null);
const p5CanvasInstanceRef: P5CanvasInstanceRef = React.useRef(null);
- const userProvidedProps: SketchProps = React.useMemo(
+ const sketchProps: SketchProps = React.useMemo(
() =>
withoutKeys(props, [
"sketch",
@@ -36,9 +36,9 @@ const P5CanvasWithSketch = (
React.useEffect(() => {
/** @see https://github.com/P5-wrapper/react/discussions/360 */
p5CanvasInstanceRef.current?.updateWithProps?.(
- userProvidedProps as unknown as Props
+ sketchProps as unknown as Props
);
- }, [userProvidedProps, canvasContainerRef, p5CanvasInstanceRef]);
+ }, [sketchProps, canvasContainerRef, p5CanvasInstanceRef]);
React.useEffect(() => () => removeCanvasInstance(p5CanvasInstanceRef), []);
From 973ffd85c6216bbe01399e773e984699dda9eac6 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 13:28:31 +0100
Subject: [PATCH 11/17] Rename removeCanvasInstance to removeP5CanvasInstance
---
src/components/P5CanvasWithSketch.tsx | 4 ++--
...{removeCanvasInstance.ts => removeP5CanvasInstance.ts} | 2 +-
src/utils/updateCanvasInstance.ts | 4 ++--
...vasInstance.test.ts => removeP5CanvasInstance.test.ts} | 8 ++++----
4 files changed, 9 insertions(+), 9 deletions(-)
rename src/utils/{removeCanvasInstance.ts => removeP5CanvasInstance.ts} (80%)
rename tests/utils/{removeCanvasInstance.test.ts => removeP5CanvasInstance.test.ts} (81%)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 0bd84aa..9ca66a3 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -4,7 +4,7 @@ import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type P5CanvasPropsWithSketch } from "@contracts/P5CanvasPropsWithSketch";
import { type SketchProps } from "@contracts/SketchProps";
-import { removeCanvasInstance } from "@utils/removeCanvasInstance";
+import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
import { updateCanvasInstance } from "@utils/updateCanvasInstance";
import { withoutKeys } from "@utils/withoutKeys";
@@ -40,7 +40,7 @@ const P5CanvasWithSketch = (
);
}, [sketchProps, canvasContainerRef, p5CanvasInstanceRef]);
- React.useEffect(() => () => removeCanvasInstance(p5CanvasInstanceRef), []);
+ React.useEffect(() => () => removeP5CanvasInstance(p5CanvasInstanceRef), []);
return (
(
+export function removeP5CanvasInstance
(
p5CanvasInstanceRef: P5CanvasInstanceRef
) {
p5CanvasInstanceRef.current?.remove();
diff --git a/src/utils/updateCanvasInstance.ts b/src/utils/updateCanvasInstance.ts
index 4f53ae8..011a26e 100644
--- a/src/utils/updateCanvasInstance.ts
+++ b/src/utils/updateCanvasInstance.ts
@@ -3,7 +3,7 @@ import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
import { createCanvasInstance } from "@utils/createCanvasInstance";
-import { removeCanvasInstance } from "@utils/removeCanvasInstance";
+import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
export function updateCanvasInstance(
p5CanvasInstanceRef: P5CanvasInstanceRef,
@@ -14,7 +14,7 @@ export function updateCanvasInstance(
return null;
}
- removeCanvasInstance(p5CanvasInstanceRef);
+ removeP5CanvasInstance(p5CanvasInstanceRef);
return createCanvasInstance(sketch, canvasContainerRef.current);
}
diff --git a/tests/utils/removeCanvasInstance.test.ts b/tests/utils/removeP5CanvasInstance.test.ts
similarity index 81%
rename from tests/utils/removeCanvasInstance.test.ts
rename to tests/utils/removeP5CanvasInstance.test.ts
index 502d141..7524533 100644
--- a/tests/utils/removeCanvasInstance.test.ts
+++ b/tests/utils/removeP5CanvasInstance.test.ts
@@ -1,11 +1,11 @@
import { SketchProps } from "@/main";
import p5 from "@contracts/p5";
import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
-import { removeCanvasInstance } from "@utils/removeCanvasInstance";
+import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
import { createRef } from "react";
import { describe, expect, it, vi } from "vitest";
-describe("removeCanvasInstance", () => {
+describe("removeP5CanvasInstance", () => {
it("Calls the remove method on the canvas if it exists", () => {
const instance = new p5(() => {
return;
@@ -14,7 +14,7 @@ describe("removeCanvasInstance", () => {
const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
p5CanvasInstanceRef.current = instance;
- removeCanvasInstance(p5CanvasInstanceRef);
+ removeP5CanvasInstance(p5CanvasInstanceRef);
expect(removeSpy).toHaveBeenCalledOnce();
});
@@ -28,7 +28,7 @@ describe("removeCanvasInstance", () => {
expect(p5CanvasInstanceRef.current).not.toBeNull();
- removeCanvasInstance(p5CanvasInstanceRef);
+ removeP5CanvasInstance(p5CanvasInstanceRef);
expect(p5CanvasInstanceRef.current).toBeNull();
});
From 5179713f34d0a69f20a9d29b3f10e3ad819d1733 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 13:37:17 +0100
Subject: [PATCH 12/17] Rename updateCanvasInstance to updateP5CanvasInstance
---
src/components/P5CanvasWithSketch.tsx | 4 ++--
...nvasInstance.ts => updateP5CanvasInstance.ts} | 2 +-
...ce.test.ts => updateP5CanvasInstance.test.ts} | 16 ++++++++--------
3 files changed, 11 insertions(+), 11 deletions(-)
rename src/utils/{updateCanvasInstance.ts => updateP5CanvasInstance.ts} (91%)
rename tests/utils/{updateCanvasInstance.test.ts => updateP5CanvasInstance.test.ts} (73%)
diff --git a/src/components/P5CanvasWithSketch.tsx b/src/components/P5CanvasWithSketch.tsx
index 9ca66a3..7916f19 100644
--- a/src/components/P5CanvasWithSketch.tsx
+++ b/src/components/P5CanvasWithSketch.tsx
@@ -5,7 +5,7 @@ import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type P5CanvasPropsWithSketch } from "@contracts/P5CanvasPropsWithSketch";
import { type SketchProps } from "@contracts/SketchProps";
import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
-import { updateCanvasInstance } from "@utils/updateCanvasInstance";
+import { updateP5CanvasInstance } from "@utils/updateP5CanvasInstance";
import { withoutKeys } from "@utils/withoutKeys";
const P5CanvasWithSketch = (
@@ -26,7 +26,7 @@ const P5CanvasWithSketch = (
);
React.useEffect(() => {
- p5CanvasInstanceRef.current = updateCanvasInstance(
+ p5CanvasInstanceRef.current = updateP5CanvasInstance(
p5CanvasInstanceRef,
canvasContainerRef,
props.sketch
diff --git a/src/utils/updateCanvasInstance.ts b/src/utils/updateP5CanvasInstance.ts
similarity index 91%
rename from src/utils/updateCanvasInstance.ts
rename to src/utils/updateP5CanvasInstance.ts
index 011a26e..4a9da16 100644
--- a/src/utils/updateCanvasInstance.ts
+++ b/src/utils/updateP5CanvasInstance.ts
@@ -5,7 +5,7 @@ import { type SketchProps } from "@contracts/SketchProps";
import { createCanvasInstance } from "@utils/createCanvasInstance";
import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
-export function updateCanvasInstance(
+export function updateP5CanvasInstance(
p5CanvasInstanceRef: P5CanvasInstanceRef,
canvasContainerRef: CanvasContainerRef,
sketch: Sketch
diff --git a/tests/utils/updateCanvasInstance.test.ts b/tests/utils/updateP5CanvasInstance.test.ts
similarity index 73%
rename from tests/utils/updateCanvasInstance.test.ts
rename to tests/utils/updateP5CanvasInstance.test.ts
index 81ead9b..b8d125d 100644
--- a/tests/utils/updateCanvasInstance.test.ts
+++ b/tests/utils/updateP5CanvasInstance.test.ts
@@ -3,12 +3,12 @@ import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import p5 from "@contracts/p5";
import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { createCanvasInstance } from "@utils/createCanvasInstance";
-import { updateCanvasInstance } from "@utils/updateCanvasInstance";
+import { updateP5CanvasInstance } from "@utils/updateP5CanvasInstance";
import { createRef } from "react";
import { describe, expect, it, vi } from "vitest";
-describe("updateCanvasInstance", () => {
- it("Should update a canvas instance to a new version", () => {
+describe("updateP5CanvasInstance", () => {
+ it("Should update a P5 canvas instance to a new version", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
@@ -18,15 +18,15 @@ describe("updateCanvasInstance", () => {
canvasContainerRef.current = wrapper;
p5CanvasInstanceRef.current = instance;
- const updatedCanvasInstanceRef = updateCanvasInstance(
+ const updatedP5CanvasInstanceRef = updateP5CanvasInstance(
p5CanvasInstanceRef,
canvasContainerRef,
sketch
);
expect(instance).toBeInstanceOf(p5);
- expect(updatedCanvasInstanceRef).toBeInstanceOf(p5);
- expect(instance).not.toEqual(updatedCanvasInstanceRef);
+ expect(updatedP5CanvasInstanceRef).toBeInstanceOf(p5);
+ expect(instance).not.toEqual(updatedP5CanvasInstanceRef);
});
it("Should return undefined if the canvasContainerRef value is null", () => {
@@ -38,12 +38,12 @@ describe("updateCanvasInstance", () => {
p5CanvasInstanceRef.current = instance;
- const updatedCanvasInstanceRef = updateCanvasInstance(
+ const updatedP5CanvasInstanceRef = updateP5CanvasInstance(
p5CanvasInstanceRef,
canvasContainerRef,
sketch
);
- expect(updatedCanvasInstanceRef).toBeNull();
+ expect(updatedP5CanvasInstanceRef).toBeNull();
});
});
From 828ea01990619e60c6f284ac824c2676a50b785b Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 13:43:57 +0100
Subject: [PATCH 13/17] Rename createCanvasInstance to createP5CanvasInstance
---
.../{createCanvasInstance.ts => createP5CanvasInstance.ts} | 2 +-
src/utils/updateP5CanvasInstance.ts | 4 ++--
...anvasInstance.test.ts => createP5CanvasInstance.test.ts} | 6 +++---
tests/utils/updateP5CanvasInstance.test.ts | 6 +++---
4 files changed, 9 insertions(+), 9 deletions(-)
rename src/utils/{createCanvasInstance.ts => createP5CanvasInstance.ts} (84%)
rename tests/utils/{createCanvasInstance.test.ts => createP5CanvasInstance.test.ts} (62%)
diff --git a/src/utils/createCanvasInstance.ts b/src/utils/createP5CanvasInstance.ts
similarity index 84%
rename from src/utils/createCanvasInstance.ts
rename to src/utils/createP5CanvasInstance.ts
index d764d7b..19aebbb 100644
--- a/src/utils/createCanvasInstance.ts
+++ b/src/utils/createP5CanvasInstance.ts
@@ -4,7 +4,7 @@ import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
import { type Wrapper } from "@contracts/Wrapper";
-export function createCanvasInstance(
+export function createP5CanvasInstance(
sketch: Sketch,
wrapper: Wrapper
): P5CanvasInstance {
diff --git a/src/utils/updateP5CanvasInstance.ts b/src/utils/updateP5CanvasInstance.ts
index 4a9da16..9a63a01 100644
--- a/src/utils/updateP5CanvasInstance.ts
+++ b/src/utils/updateP5CanvasInstance.ts
@@ -2,7 +2,7 @@ import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
-import { createCanvasInstance } from "@utils/createCanvasInstance";
+import { createP5CanvasInstance } from "@utils/createP5CanvasInstance";
import { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
export function updateP5CanvasInstance(
@@ -16,5 +16,5 @@ export function updateP5CanvasInstance(
removeP5CanvasInstance(p5CanvasInstanceRef);
- return createCanvasInstance(sketch, canvasContainerRef.current);
+ return createP5CanvasInstance(sketch, canvasContainerRef.current);
}
diff --git a/tests/utils/createCanvasInstance.test.ts b/tests/utils/createP5CanvasInstance.test.ts
similarity index 62%
rename from tests/utils/createCanvasInstance.test.ts
rename to tests/utils/createP5CanvasInstance.test.ts
index aacd2e6..2851e8c 100644
--- a/tests/utils/createCanvasInstance.test.ts
+++ b/tests/utils/createP5CanvasInstance.test.ts
@@ -1,12 +1,12 @@
import p5 from "@contracts/p5";
-import { createCanvasInstance } from "@utils/createCanvasInstance";
+import { createP5CanvasInstance } from "@utils/createP5CanvasInstance";
import { describe, expect, it, vi } from "vitest";
-describe("createCanvasInstance", () => {
+describe("createP5CanvasInstance", () => {
it("Should construct a valid implementation of p5 in instance mode", () => {
const sketch = vi.fn();
const wrapper = document.createElement("div");
- const instance = createCanvasInstance(sketch, wrapper);
+ const instance = createP5CanvasInstance(sketch, wrapper);
expect(instance).toBeInstanceOf(p5);
});
diff --git a/tests/utils/updateP5CanvasInstance.test.ts b/tests/utils/updateP5CanvasInstance.test.ts
index b8d125d..50ed5de 100644
--- a/tests/utils/updateP5CanvasInstance.test.ts
+++ b/tests/utils/updateP5CanvasInstance.test.ts
@@ -2,7 +2,7 @@ import { SketchProps } from "@/main";
import { type CanvasContainerRef } from "@contracts/CanvasContainerRef";
import p5 from "@contracts/p5";
import { type P5CanvasInstanceRef } from "@contracts/P5CanvasInstanceRef";
-import { createCanvasInstance } from "@utils/createCanvasInstance";
+import { createP5CanvasInstance } from "@utils/createP5CanvasInstance";
import { updateP5CanvasInstance } from "@utils/updateP5CanvasInstance";
import { createRef } from "react";
import { describe, expect, it, vi } from "vitest";
@@ -13,7 +13,7 @@ describe("updateP5CanvasInstance", () => {
const wrapper = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
- const instance = createCanvasInstance(sketch, wrapper);
+ const instance = createP5CanvasInstance(sketch, wrapper);
canvasContainerRef.current = wrapper;
p5CanvasInstanceRef.current = instance;
@@ -34,7 +34,7 @@ describe("updateP5CanvasInstance", () => {
const wrapper = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
- const instance = createCanvasInstance(sketch, wrapper);
+ const instance = createP5CanvasInstance(sketch, wrapper);
p5CanvasInstanceRef.current = instance;
From 627c0bfa9500b54f51b1b120d1cf05c194c16fd4 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 13:58:49 +0100
Subject: [PATCH 14/17] Rename Wrapper to CanvasContainer
---
src/contracts/CanvasContainer.ts | 1 +
src/contracts/CanvasContainerRef.ts | 4 ++--
src/contracts/Wrapper.ts | 1 -
src/utils/createP5CanvasInstance.ts | 6 +++---
tests/utils/createP5CanvasInstance.test.ts | 4 ++--
tests/utils/updateP5CanvasInstance.test.ts | 10 +++++-----
6 files changed, 13 insertions(+), 13 deletions(-)
create mode 100644 src/contracts/CanvasContainer.ts
delete mode 100644 src/contracts/Wrapper.ts
diff --git a/src/contracts/CanvasContainer.ts b/src/contracts/CanvasContainer.ts
new file mode 100644
index 0000000..6492afa
--- /dev/null
+++ b/src/contracts/CanvasContainer.ts
@@ -0,0 +1 @@
+export type CanvasContainer = HTMLDivElement;
diff --git a/src/contracts/CanvasContainerRef.ts b/src/contracts/CanvasContainerRef.ts
index 212696d..546b5fa 100644
--- a/src/contracts/CanvasContainerRef.ts
+++ b/src/contracts/CanvasContainerRef.ts
@@ -1,4 +1,4 @@
-import { type Wrapper } from "@contracts/Wrapper";
+import { type CanvasContainer } from "@contracts/CanvasContainer";
import { type RefObject } from "react";
-export type CanvasContainerRef = RefObject;
+export type CanvasContainerRef = RefObject;
diff --git a/src/contracts/Wrapper.ts b/src/contracts/Wrapper.ts
deleted file mode 100644
index 8fc34d1..0000000
--- a/src/contracts/Wrapper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Wrapper = HTMLDivElement;
diff --git a/src/utils/createP5CanvasInstance.ts b/src/utils/createP5CanvasInstance.ts
index 19aebbb..4f4337f 100644
--- a/src/utils/createP5CanvasInstance.ts
+++ b/src/utils/createP5CanvasInstance.ts
@@ -1,12 +1,12 @@
+import { type CanvasContainer } from "@contracts/CanvasContainer";
import p5 from "@contracts/p5";
import { type P5CanvasInstance } from "@contracts/P5CanvasInstance";
import { type Sketch } from "@contracts/Sketch";
import { type SketchProps } from "@contracts/SketchProps";
-import { type Wrapper } from "@contracts/Wrapper";
export function createP5CanvasInstance(
sketch: Sketch,
- wrapper: Wrapper
+ canvasContainer: CanvasContainer
): P5CanvasInstance {
- return new p5(sketch, wrapper);
+ return new p5(sketch, canvasContainer);
}
diff --git a/tests/utils/createP5CanvasInstance.test.ts b/tests/utils/createP5CanvasInstance.test.ts
index 2851e8c..c338ef2 100644
--- a/tests/utils/createP5CanvasInstance.test.ts
+++ b/tests/utils/createP5CanvasInstance.test.ts
@@ -5,8 +5,8 @@ import { describe, expect, it, vi } from "vitest";
describe("createP5CanvasInstance", () => {
it("Should construct a valid implementation of p5 in instance mode", () => {
const sketch = vi.fn();
- const wrapper = document.createElement("div");
- const instance = createP5CanvasInstance(sketch, wrapper);
+ const canvasContainer = document.createElement("div");
+ const instance = createP5CanvasInstance(sketch, canvasContainer);
expect(instance).toBeInstanceOf(p5);
});
diff --git a/tests/utils/updateP5CanvasInstance.test.ts b/tests/utils/updateP5CanvasInstance.test.ts
index 50ed5de..7fc3e2c 100644
--- a/tests/utils/updateP5CanvasInstance.test.ts
+++ b/tests/utils/updateP5CanvasInstance.test.ts
@@ -10,12 +10,12 @@ import { describe, expect, it, vi } from "vitest";
describe("updateP5CanvasInstance", () => {
it("Should update a P5 canvas instance to a new version", () => {
const sketch = vi.fn();
- const wrapper = document.createElement("div");
+ const canvasContainer = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
- const instance = createP5CanvasInstance(sketch, wrapper);
+ const instance = createP5CanvasInstance(sketch, canvasContainer);
- canvasContainerRef.current = wrapper;
+ canvasContainerRef.current = canvasContainer;
p5CanvasInstanceRef.current = instance;
const updatedP5CanvasInstanceRef = updateP5CanvasInstance(
@@ -31,10 +31,10 @@ describe("updateP5CanvasInstance", () => {
it("Should return undefined if the canvasContainerRef value is null", () => {
const sketch = vi.fn();
- const wrapper = document.createElement("div");
+ const canvasContainer = document.createElement("div");
const canvasContainerRef: CanvasContainerRef = createRef();
const p5CanvasInstanceRef: P5CanvasInstanceRef = createRef();
- const instance = createP5CanvasInstance(sketch, wrapper);
+ const instance = createP5CanvasInstance(sketch, canvasContainer);
p5CanvasInstanceRef.current = instance;
From 5fbcc509989c275079ff5fa8e7d741e954ac46ed Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Thu, 21 Aug 2025 14:06:38 +0100
Subject: [PATCH 15/17] Actualize test descriptions
---
tests/components/P5Canvas.test.tsx | 10 +++++-----
tests/exports.test.tsx | 8 ++++----
tests/utils/removeP5CanvasInstance.test.ts | 4 ++--
3 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/tests/components/P5Canvas.test.tsx b/tests/components/P5Canvas.test.tsx
index ce63e4b..7d6f70f 100644
--- a/tests/components/P5Canvas.test.tsx
+++ b/tests/components/P5Canvas.test.tsx
@@ -39,7 +39,7 @@ async function waitForLoading(findByTestId: RenderResult["findByTestId"]) {
describe("P5Canvas", () => {
describe("Rendering", () => {
describe("Client", () => {
- it("Renders the canvas into the wrapping element", async () => {
+ it("Renders the P5 canvas into the container element", async () => {
const sketch = createSketch();
const { findByTestId } = render(
);
const errorLogger = vi.fn();
diff --git a/tests/exports.test.tsx b/tests/exports.test.tsx
index 2ee0260..6e3f463 100644
--- a/tests/exports.test.tsx
+++ b/tests/exports.test.tsx
@@ -4,23 +4,23 @@ import { assert, describe, expect, it, vi } from "vitest";
describe("Exports", () => {
describe("CanvasContainerClassName", () => {
- it("Exports the css class name used on the wrapper", () => {
+ it("Exports the css class name used on the canvas container", () => {
expect(CanvasContainerClassName).not.toBeUndefined();
expect(CanvasContainerClassName).toBe("canvas-container");
});
- it("Exports the css class name used on the wrapper as a non-empty string", () => {
+ it("Exports the css class name used on the canvas container as a non-empty string", () => {
expect(typeof CanvasContainerClassName).toBe("string");
expect(CanvasContainerClassName.length).toBeGreaterThan(0);
});
- it("Exports the wrapper component", () => {
+ it("Exports the P5 canvas component", () => {
expect(P5Canvas).not.toBeUndefined();
});
});
describe("P5Canvas", () => {
- it("Exports the wrapper component as a react element", () => {
+ it("Exports the P5 canvas component as a React element", () => {
const component = createElement(P5Canvas, {
sketch: vi.fn()
});
diff --git a/tests/utils/removeP5CanvasInstance.test.ts b/tests/utils/removeP5CanvasInstance.test.ts
index 7524533..a49d6a3 100644
--- a/tests/utils/removeP5CanvasInstance.test.ts
+++ b/tests/utils/removeP5CanvasInstance.test.ts
@@ -6,7 +6,7 @@ import { createRef } from "react";
import { describe, expect, it, vi } from "vitest";
describe("removeP5CanvasInstance", () => {
- it("Calls the remove method on the canvas if it exists", () => {
+ it("Calls the remove method on the P5 canvas instance if it exists", () => {
const instance = new p5(() => {
return;
});
@@ -19,7 +19,7 @@ describe("removeP5CanvasInstance", () => {
expect(removeSpy).toHaveBeenCalledOnce();
});
- it("Sets the provided canvas instance ref to null", () => {
+ it("Sets the provided P5 canvas instance ref to null", () => {
const instance = new p5(() => {
return;
});
From 98cb261285090f42abe1b7d9777852f43b2ead43 Mon Sep 17 00:00:00 2001
From: Eugene Dyko <13007925+yevdyko@users.noreply.github.com>
Date: Fri, 22 Aug 2025 00:39:00 +0100
Subject: [PATCH 16/17] Add examples to README for version 5
---
.github/README.md | 606 ++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 590 insertions(+), 16 deletions(-)
diff --git a/.github/README.md b/.github/README.md
index 9912977..fcf3f84 100644
--- a/.github/README.md
+++ b/.github/README.md
@@ -27,8 +27,8 @@ package manager:
### Peer dependencies
-Please note that `p5`, `react` and `react-dom` are peer dependencies, meaning
-you should ensure they are installed before installing React P5 Wrapper.
+Please note that `p5`, `react` and `react-dom` are peer dependencies. Make sure
+they are installed in your project before installing this package.
```js
"peerDependencies": {
@@ -38,6 +38,20 @@ you should ensure they are installed before installing React P5 Wrapper.
},
```
+Version 5
+
+
+```js
+"peerDependencies": {
+ "p5": ">= 2.0.0",
+ "react": ">= 19.0.0",
+ "react-dom": ">= 19.0.0"
+},
+```
+
+
+Version 5
+
+
+```jsx
+import * as React from "react";
+import { P5Canvas } from "@p5-wrapper/react";
+
+function sketch(p5) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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
+Version 5
+
+
+```tsx
+import * as React from "react";
+import { P5Canvas, P5CanvasInstance } from "@p5-wrapper/react";
+
+function sketch(p5: P5CanvasInstance) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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
+Version 5
+
+
+```tsx
+import * as React from "react";
+import { P5Canvas, Sketch } from "@p5-wrapper/react";
+
+const sketch: Sketch = p5 => {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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
+Version 5
+
+
+```tsx
+import { P5Canvas, P5CanvasInstance, SketchProps } from "@p5-wrapper/react";
+import React, { useEffect, useState } from "react";
+
+type MySketchProps = SketchProps & {
+ rotation: number;
+};
+
+function sketch(p5: P5CanvasInstance) {
+ let rotation = 0;
+
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.updateWithProps = props => {
+ if (props.rotation) {
+ rotation = (props.rotation * Math.PI) / 180;
+ }
+ };
+
+ p5.draw = () => {
+ p5.background(100);
+ p5.normalMaterial();
+ p5.noStroke();
+ p5.push();
+ p5.rotateY(rotation);
+ p5.box(100);
+ p5.pop();
+ };
+}
+
+export function App() {
+ const [rotation, setRotation] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(
+ () => setRotation(rotation => rotation + 100),
+ 100
+ );
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ return
+Version 5
+
+
+```tsx
+import { P5Canvas, Sketch, SketchProps } from "@p5-wrapper/react";
+import React, { useEffect, useState } from "react";
+
+type MySketchProps = SketchProps & {
+ rotation: number;
+};
+
+const sketch: Sketch = p5 => {
+ let rotation = 0;
+
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.updateWithProps = props => {
+ if (props.rotation) {
+ rotation = (props.rotation * Math.PI) / 180;
+ }
+ };
+
+ p5.draw = () => {
+ p5.background(100);
+ p5.normalMaterial();
+ p5.noStroke();
+ p5.push();
+ p5.rotateY(rotation);
+ p5.box(100);
+ p5.pop();
+ };
+};
+
+export function App() {
+ const [rotation, setRotation] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(
+ () => setRotation(rotation => rotation + 100),
+ 100
+ );
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ return
+Version 5
+
+
+```jsx
+import * as React from "react";
+import { P5Canvas } from "@p5-wrapper/react";
+
+function setup(p5) {
+ return () => {
+ p5.createCanvas(600, 400, p5.WEBGL);
+ };
+}
+
+function draw(p5) {
+ return () => {
+ 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();
+ };
+}
+
+function sketch(p5) {
+ p5.setup = setup(p5);
+ p5.draw = draw(p5);
+}
+
+export function App() {
+ return
+Version 5
+
+
+```jsx
+import { P5Canvas } from "@p5-wrapper/react";
+import React, { useEffect, useState } from "react";
+
+function sketch(p5) {
+ let rotation = 0;
+
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.updateWithProps = props => {
+ if (props.rotation) {
+ rotation = (props.rotation * Math.PI) / 180;
+ }
+ };
+
+ p5.draw = () => {
+ p5.background(100);
+ p5.normalMaterial();
+ p5.noStroke();
+ p5.push();
+ p5.rotateY(rotation);
+ p5.box(100);
+ p5.pop();
+ };
+}
+
+export function App() {
+ const [rotation, setRotation] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(
+ () => setRotation(rotation => rotation + 100),
+ 100
+ );
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ return
+Version 5
+
+
+```jsx
+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 (
+
+
+ Hello world!
+
+
+ );
+}
+```
+
+
+Version 5
+
+
+```jsx
+import * as React from "react";
+import { P5Canvas } from "@p5-wrapper/react";
+
+function sketchOne(p5) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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();
+ };
+}
+
+function sketchTwo(p5) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.draw = () => {
+ p5.background(500);
+ 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() {
+ const [sketch, setSketch] = React.useState(undefined);
+ const chooseNothing = () => setSketch(undefined);
+ const chooseSketchOne = () => setSketch(sketchOne);
+ const chooseSketchTwo = () => setSketch(sketchTwo);
+
+ return (
+ <>
+
+
+ Choose nothing
+
+
+ Choose sketch 1
+
+
+ Choose sketch 2
+
+
+ No sketch selected yet.} sketch={sketch} />
+
+ );
+}
+```
+
+
+ No sketch selected yet. ` will be rendered, then if you select a
sketch, it will be rendered until you choose to once again "show nothing" which
@@ -608,6 +1030,55 @@ export function App() {
}
```
+Version 5
+
+
+```tsx
+import * as React from "react";
+import { P5Canvas, P5CanvasInstance } from "@p5-wrapper/react";
+
+// This child will throw an error, oh no!
+function ErrorChild() {
+ throw new Error("oops");
+}
+
+// This view will catch the thrown error and give you access to what exactly was thrown.
+function ErrorUI(error: any) {
+ if (error instanceof Error) {
+ return
An error occured: {error.message}
;
+ }
+
+ return An unknown error occured: {error.toString()}
;
+}
+
+function sketch(p5: P5CanvasInstance) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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 (
+
+
+ );
+}
+```
+
+An error occured: oops
`. Note
that in truth, the `ErrorView` will **always** receive `any` values since JS /
TS allow you to `throw` whatever values you want to, this is why we have to add
@@ -651,6 +1122,41 @@ export function App() {
}
```
+Version 5
+
+
+```tsx
+import * as React from "react";
+import { P5Canvas, P5CanvasInstance } from "@p5-wrapper/react";
+
+function LoadingUI() {
+ return
The sketch is being loaded.
;
+}
+
+function sketch(p5: P5CanvasInstance) {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ 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 Version 5
+
+
+```tsx
+import * as p5 from "p5";
+import { P5Canvas, Sketch } from "@p5-wrapper/react";
+import React, { useEffect, useState } from "react";
+
+(window as any).p5 = p5;
+
+await import("p5/lib/addons/p5.sound");
+
+const sketch: Sketch = p5 => {
+ let song: p5.SoundFile;
+ let button: p5.Element;
+
+ p5.setup = () => {
+ p5.createCanvas(600, 400, p5.WEBGL);
+ p5.background(255, 0, 0);
+ button = p5.createButton("Toggle audio");
+
+ button.mousePressed(() => {
+ if (!song) {
+ const songPath = "/piano.mp3";
+ song = p5.loadSound(
+ songPath,
+ () => {
+ song.play();
+ },
+ () => {
+ console.error(
+ `Could not load the requested sound file ${songPath}`
+ );
+ }
+ );
+ return;
+ }
+
+ if (!song.isPlaying()) {
+ song.play();
+ return;
+ }
+
+ song.pause();
+ });
+ };
+
+ 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 default function App() {
+ return
+