Fix p5 sketch

app/(branches)/blog/2016/drawing-with-numbers/DrawingWithNumbersSketch.tsx

@@ -1,8 +1,7 @@
 "use client"
 
-import dynamic from "next/dynamic"
-import p5Types from "p5"
-import { ReactNode, useEffect, useState } from "react"
+import { NextReactP5Wrapper } from "@p5-wrapper/next"
+import { type Sketch } from "@p5-wrapper/react"
 
 const canvasWidth = 300,
   canvasHeight = canvasWidth,
@@ -31,16 +30,12 @@ function getNoOfCols(w: number, length: number, m: number) {
 }
 
 export default function P5Sketch() {
-  const [childComponent, setChildComponent] = useState<ReactNode>(<div />)
-
-  useEffect(() => {
-    const Sketch = dynamic(() => import("react-p5"))
-
-    const setup = (p5: p5Types) => {
+  const sketch: Sketch = (p5) => {
+    p5.setup = () => {
       p5.createCanvas(canvasWidth, canvasHeight)
     }
 
-    const draw = (p5: p5Types) => {
+    p5.draw = () => {
       p5.background(255)
       for (let i = 0; i < rows - 1; i++) {
         for (let j = 0; j < columns - 1; j++) {
@@ -82,9 +77,7 @@ export default function P5Sketch() {
         }
       }
     }
+  }
 
-    setChildComponent(<Sketch setup={setup} draw={draw} />)
-  }, [setChildComponent])
-
-  return <>{childComponent}</>
+  return <NextReactP5Wrapper sketch={sketch} />
 }

package.json

@@ -13,6 +13,8 @@
     "@mdx-js/loader": "^2.3.0",
     "@next/mdx": "^13.3.4",
     "@ngsctt/remark-smartypants": "^0.2.0",
+    "@p5-wrapper/next": "^0.1.2",
+    "@p5-wrapper/react": "^4.2.0",
     "@types/react-dom": "^18.2.1",
     "@vercel/analytics": "^1.0.0",
     "graphql": "^16.6.0",
@@ -24,7 +26,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-p5": "^1.3.35",
+    "react-p5-wrapper": "npm:@p5-wrapper/react",
     "rehype": "^12.0.1",
     "rehype-katex": "^5.0.0",
     "remark-directive": "^2.0.1",

yarn.lock

@@ -198,6 +198,19 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@p5-wrapper/next@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@p5-wrapper/next/-/next-0.1.2.tgz#e359f1c4e4c8564959a7611b0ed07fe49d3d71a3"
+  integrity sha512-tAbfCPBNbsV7uaGvvsr2ox40vx2HKkF8C0tq6qcxL52/JE+WGu7UzRkwlhb9IEZfCiGEgWfuF7KP26UsDnQKZA==
+
+"@p5-wrapper/react@^4.2.0", "react-p5-wrapper@npm:@p5-wrapper/react":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@p5-wrapper/react/-/react-4.2.0.tgz#1db0a7063971a3e6a039a0b6628feb65eb62e308"
+  integrity sha512-LOTd/1W8sPiXo7/U0PwapsoOf74DQAFMibovvhrB+aImYNXbg+5xoAadnmgC28OBySeBNKXwchWhF1ctf6Pnpw==
+  dependencies:
+    microdiff "^1.3.2"
+    p5 "^1.6.0"
+
 "@pkgr/utils@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.1.tgz#0a9b06ffddee364d6642b3cd562ca76f55b34a03"
@@ -302,11 +315,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.3.tgz#6bda7819aae6ea0b386ebc5b24bdf602f1b42b01"
   integrity sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==
 
-"@types/p5@1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@types/p5/-/p5-1.3.3.tgz#a6994de51b93bd28f2e2ec3e0f159c209a7278eb"
-  integrity sha512-PBSFnX6IgV6Pqlx9wocUjSkGlm1I1ymz9tEiTbdNCqig6FOGiWcVUHx13TXRTBfRIhZC9+MqqgztMsgzpueaUg==
-
 "@types/parse5@^5.0.0":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
@@ -2412,6 +2420,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+microdiff@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/microdiff/-/microdiff-1.3.2.tgz#b4fec53aca97371d5409a354913a65be2daec11d"
+  integrity sha512-pKy60S2febliZIbwdfEQKTtL5bLNxOyiRRmD400gueYl9XcHyNGxzHSlJWn9IMHwYXT0yohPYL08+bGozVk8cQ==
+
 micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
@@ -3015,11 +3028,6 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-opencollective-postinstall@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
-  integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
-
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@@ -3046,10 +3054,10 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p5@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/p5/-/p5-1.3.1.tgz#7a6021bf2a42974cef71501c56e5b2120f5a2de1"
-  integrity sha512-g7W2htgEwiAEGcl0WHccAJKbunUJwrUojUSR9+KihphJ33p5VpDdh1K8pDx4ppYjOr/lVEXaZ1XXDj27nwlNOg==
+p5@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/p5/-/p5-1.6.0.tgz#eaf4e69e377d6a5e91041ca485743b0fc53d9dfb"
+  integrity sha512-RowF+RxfVUhJm/YKXL5TCFzTqnwAIwK6W1VGs9LAqSf3PCmLz9Igbxzlf0Ry5IMV71L42wipCdH/bDiNsqAstA==
 
 parent-module@^1.0.0:
   version "1.0.1"
@@ -3258,15 +3266,6 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-p5@^1.3.35:
-  version "1.3.35"
-  resolved "https://registry.yarnpkg.com/react-p5/-/react-p5-1.3.35.tgz#6b230e88099a492a9850fdf1a5eb063e90b1f897"
-  integrity sha512-76Fu2tLiomVOFGV/TElmAqkem+pWsSRIVE1OO0H3vG2mz41o81oFHb/1kSfZ2Y5TvMft8ancRwN7XwPEs50Hag==
-  dependencies:
-    "@types/p5" "1.3.3"
-    opencollective-postinstall "2.0.2"
-    p5 "1.3.1"
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"