refactor: Change component name from ReactP5Wrapper to P5Canvas (#525)

Author: yevdyko

.github/README.md

@@ -26,8 +26,8 @@ export function library(root: string): UserConfig {
       emptyOutDir: true,
       lib: {
         entry: resolve(root, "src", "main.tsx"),
-        name: "ReactP5Wrapper",
-        fileName: "ReactP5Wrapper",
+        name: "P5Canvas",
+        fileName: "P5Canvas",
         formats: ["es", "cjs"]
       },
       rollupOptions: {

config/vite/library.ts

@@ -1,4 +1,4 @@
-import { ReactP5Wrapper } from "@/main.tsx";
+import { P5Canvas } from "@/main.tsx";
 import React, { useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -61,7 +61,7 @@ function App() {
 
   return (
     <>
-      <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      <P5Canvas sketch={state.sketch} rotation={state.rotation} />
       {state.sketch === record && (
         <div style={{ marginTop: "1rem", marginBottom: "1rem" }}>
           <button id="start-recording">Start Recording</button>

demo/app.jsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { propsAreEqual } from "@utils/propsAreEqual";
+
+const P5CanvasGuard = React.lazy(() => import("@components/P5CanvasGuard"));
+
+export const P5Canvas = React.memo(P5CanvasGuard, propsAreEqual);

src/components/P5Canvas.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { type P5WrapperProps } from "@contracts/P5WrapperProps";
-import { type P5WrapperPropsWithSketch } from "@contracts/P5WrapperPropsWithSketch";
+import { type P5CanvasProps } from "@contracts/P5CanvasProps";
+import { type P5CanvasPropsWithSketch } from "@contracts/P5CanvasPropsWithSketch";
 import { type SketchProps } from "@contracts/SketchProps";
 import { logErrorBoundaryError } from "@utils/logErrorBoundaryError";
 import { ReactNode } from "react";
 import { FallbackProps } from "react-error-boundary";
 
-const ReactP5WrapperWithSketch = React.lazy(
-  () => import("@components/ReactP5WrapperWithSketch")
+const P5CanvasWithSketch = React.lazy(
+  () => import("@components/P5CanvasWithSketch")
 );
 
 const ErrorBoundary = React.lazy(() =>
@@ -16,11 +16,11 @@ const ErrorBoundary = React.lazy(() =>
   }))
 );
 
-const ReactP5WrapperGuard = <Props extends SketchProps>(
-  props: P5WrapperProps<Props>
+const P5CanvasGuard = <Props extends SketchProps>(
+  props: P5CanvasProps<Props>
 ) => {
   if (props.sketch === undefined) {
-    console.error("[ReactP5Wrapper] The `sketch` prop is required.");
+    console.error("[P5Canvas] The `sketch` prop is required.");
 
     return props.fallback?.() ?? null;
   }
@@ -43,13 +43,13 @@ const ReactP5WrapperGuard = <Props extends SketchProps>(
           props.loading?.() ?? <p data-testid="loading">🚀 Loading...</p>
         }
       >
-        <ReactP5WrapperWithSketch
+        <P5CanvasWithSketch
           /** @see https://github.com/P5-wrapper/react/discussions/360 */
-          {...(props as unknown as P5WrapperPropsWithSketch<Props>)}
+          {...(props as unknown as P5CanvasPropsWithSketch<Props>)}
         />
       </React.Suspense>
     </ErrorBoundary>
   );
 };
 
-export default ReactP5WrapperGuard;
+export default P5CanvasGuard;

src/components/ReactP5WrapperGuard.tsx renamed to src/components/P5CanvasGuard.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { CanvasContainerClassName } from "@constants/CanvasContainerClassName";
+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 { removeP5CanvasInstance } from "@utils/removeP5CanvasInstance";
+import { updateP5CanvasInstance } from "@utils/updateP5CanvasInstance";
+import { withoutKeys } from "@utils/withoutKeys";
+
+const P5CanvasWithSketch = <Props extends SketchProps>(
+  props: P5CanvasPropsWithSketch<Props>
+) => {
+  const canvasContainerRef: CanvasContainerRef = React.useRef(null);
+  const p5CanvasInstanceRef: P5CanvasInstanceRef<Props> = React.useRef(null);
+  const sketchProps: SketchProps = React.useMemo(
+    () =>
+      withoutKeys(props, [
+        "sketch",
+        "fallback",
+        "loading",
+        "error",
+        "children"
+      ]),
+    [props]
+  );
+
+  React.useEffect(() => {
+    p5CanvasInstanceRef.current = updateP5CanvasInstance(
+      p5CanvasInstanceRef,
+      canvasContainerRef,
+      props.sketch
+    );
+  }, [props.sketch]);
+
+  React.useEffect(() => {
+    /** @see https://github.com/P5-wrapper/react/discussions/360 */
+    p5CanvasInstanceRef.current?.updateWithProps?.(
+      sketchProps as unknown as Props
+    );
+  }, [sketchProps, canvasContainerRef, p5CanvasInstanceRef]);
+
+  React.useEffect(() => () => removeP5CanvasInstance(p5CanvasInstanceRef), []);
+
+  return (
+    <div
+      ref={canvasContainerRef}
+      className={CanvasContainerClassName}
+      data-testid="canvas-container"
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default P5CanvasWithSketch;

src/components/P5CanvasWithSketch.tsx

@@ -0,0 +1 @@
+export const CanvasContainerClassName = "canvas-container";