Update dependency @testing-library/react to v14 (P5-wrapper#228)

add deepCompare boolean prop

address comments

add deepCompare prop

Author: renovate[bot]

example/app.jsx

@@ -1,16 +1,17 @@
 import React, { Fragment, useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
-
+import * as Tone from "tone";
 import * as box from "./sketches/box";
 import * as plane from "./sketches/plane";
 import * as torus from "./sketches/torus";
+import * as synth from "./sketches/synth";
 import { ReactP5Wrapper } from "../src/index.tsx";
 import "./example.css";
 
 function App() {
   const sketches = useMemo(
-    () => [box.sketch, torus.sketch, plane.sketch],
-    [box, torus, plane]
+    () => [box.sketch, torus.sketch, plane.sketch, synth.sketch],
+    [box, torus, plane, synth]
   );
   const [state, setState] = useState({
     rotation: 160,
@@ -42,7 +43,7 @@ function App() {
         rotation: parseInt(event.target.value, 10)
       }));
     },
-    [box, plane, torus]
+    [box, plane, torus, synth]
   );
 
   if (state.unmount) {
@@ -53,10 +54,17 @@ function App() {
       </Fragment>
     );
   }
+  const synth1 = useMemo(()=>new Tone.Synth({oscillator:{
+    type: "sine"}})
+  .toDestination(),[]);
+  const gain = useMemo(()=>new Tone.Gain(0.5).toDestination(),[]);
+  const synth2 = useMemo(()=>new Tone.Synth().connect(gain),[]);
+  const [currentSynth, setCurrentSynth] = useState(synth1);
+
 
   return (
     <Fragment>
-      <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} deepCompare={false} synth={currentSynth} />
       <input
         type="range"
         defaultValue={state.rotation}
@@ -65,8 +73,13 @@ function App() {
         step="1"
         onChange={onRotationChange}
       />
+      
       <button onClick={onChangeSketch}>Change Sketch</button>
       <button onClick={onMountStateChange}>Unmount</button>
+      {state.sketch=== synth.sketch?<>
+      <button onClick={()=>setCurrentSynth(synth1)}>Synth 1</button>
+      <button onClick={()=>setCurrentSynth(synth2)}>Synth 2</button>
+      </>:null}
     </Fragment>
   );
 }

example/sketches/box.js

@@ -3,7 +3,7 @@ export function sketch(p5) {
 
   p5.setup = () => p5.createCanvas(300, 300, p5.WEBGL);
 
-  p5.updateWithProps = props => {
+  p5.updateWithProps = (props) => {
     if (props.rotation) {
       rotation = (props.rotation * Math.PI) / 180;
     }

example/sketches/synth.js

@@ -0,0 +1,50 @@
+import * as Tone from "tone";
+
+export function sketch(p5) {
+  let rotation = 0;
+  let currentSynth;
+
+  const loop = new Tone.Loop((time) => {
+    if (currentSynth) {
+      currentSynth.triggerAttackRelease("C4", "8n", time);
+    }
+  }, "4n");
+
+  p5.setup = () => {
+    p5.createCanvas(300, 300, p5.WEBGL);
+    p5.createButton("start").mousePressed(() => {
+      Tone.start();
+      Tone.Transport.start();
+      loop.start();
+    });
+  };
+
+  p5.updateWithProps = (props) => {
+    if (props.rotation) {
+      rotation = (props.rotation * Math.PI) / 180;
+    }
+    if (props.synth) {
+      currentSynth = props.synth;
+    }
+  };
+
+  p5.draw = () => {
+    p5.background(100);
+    p5.normalMaterial();
+    p5.noStroke();
+
+    p5.push();
+    p5.translate(-35, 0);
+    p5.rotateY(rotation);
+    p5.rotateX(-0.9);
+    p5.box(100);
+    p5.pop();
+
+    p5.noFill();
+    p5.stroke(255);
+    p5.push();
+    p5.translate(400, p5.height * 0.35, -200);
+    p5.sphere(300);
+    p5.pop();
+  };
+}

package.json

@@ -88,7 +88,7 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/jest": "^29.2.3",
     "@types/p5": "^1.4.3",
@@ -114,6 +114,7 @@
     "rimraf": "^4.0.0",
     "rollup": "^3.4.0",
     "style-loader": "^3.3.1",
+    "tone": "^14.7.77",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.1",
     "tslib": "^2.4.1",