Migrate dependabot reviewers to CODEOWNERS and update dependencies (#516)

* Migrate dependabot reviewers to CODEOWNERS and update dependencies

* Formatting fixes

* Tidy the demo examples (#515)

* Tidy the demo examples

* Formatting fixes

Author: jamesrweb

.github/CODEOWNERS

@@ -0,0 +1 @@
+@jamesrweb @yevdyko

.github/dependabot.yml

@@ -4,17 +4,11 @@ updates:
     directory: "/"
     schedule:
       interval: "monthly"
-    reviewers:
-      - "jamesrweb"
     labels:
       - "npm"
       - "dependencies"
     groups:
+      production-dependencies:
+        dependency-type: "production"
       development-dependencies:
         dependency-type: "development"
-      react:
-        patterns:
-          - "react*"
-    ignore:
-      - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]

.npmrc

@@ -5,9 +5,10 @@
 A component to integrate [P5.js](https://p5js.org/) sketches into
 [React](https://reactjs.org/) apps.
 
-> Note: Version 5 is still in development, currently the `5.0.0-rc.x` range has been
-> released for internal development or experimental testing ONLY. It is recommended to continue
-> utilising version `4.4.1` until version `5.0.0` is out of the `rc` versioning scheme.
+> Note: Version 5 is still in development, currently the `5.0.0-rc.x` range has
+> been released for internal development or experimental testing ONLY. It is
+> recommended to continue utilising version `4.4.1` until version `5.0.0` is out
+> of the `rc` versioning scheme.
 
 ## Installation
 

README.md

@@ -1,22 +1,21 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
-import * as box from "./sketches/box";
-import * as plane from "./sketches/plane";
-import * as torus from "./sketches/torus";
 import { ReactP5Wrapper } from "../src/main.tsx";
 import "./demo.css";
+import { sketch as box } from "./sketches/box";
+import { sketch as plane } from "./sketches/plane";
+import { sketch as torus } from "./sketches/torus";
 
 function App() {
-  const sketches = useMemo(
-    () => [box.sketch, torus.sketch, plane.sketch],
-    [box, torus, plane]
-  );
+  const sketches = useMemo(() => [box, torus, plane], [box, torus, plane]);
+
   const [state, setState] = useState({
     rotation: 160,
-    sketch: box.sketch,
+    sketch: box,
     unmount: false
   });
+
   const onChangeSketch = useCallback(() => {
     setState(state => {
       const currentSketchIndex = sketches.findIndex(sketch => {
@@ -32,9 +31,11 @@ function App() {
       return { ...state, sketch };
     });
   }, [sketches]);
+
   const onMountStateChange = useCallback(() => {
     setState(state => ({ ...state, unmount: !state.unmount }));
   }, []);
+
   const onRotationChange = useCallback(
     event => {
       setState(state => ({

demo/app.jsx

@@ -0,0 +1,30 @@
+import "p5.capture";
+
+export function sketch(p5) {
+  p5.setup = () => {
+    p5.createCanvas(300, 300);
+    p5.capture.initialize(p5);
+  };
+
+  p5.draw = () => {
+    if (p5.frameCount === 1) {
+      const capture = p5.capture.getInstance();
+      capture.start({
+        format: "gif",
+        duration: 100
+      });
+    }
+  };
+
+  p5.keyPressed = () => {
+    if (key === "c") {
+      const capture = p5.capture.getInstance();
+
+      if (capture.state === "idle") {
+        capture.start();
+      } else {
+        capture.stop();
+      }
+    }
+  };
+}

demo/sketches/capture.jsx

@@ -88,37 +88,38 @@
   },
   "devDependencies": {
     "@babel/eslint-plugin": "^7.27.1",
-    "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.28.0",
+    "@eslint/compat": "^1.3.1",
+    "@eslint/js": "^9.30.1",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "^16.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.29",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.10",
     "@types/p5": "^1.7.6",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@vitejs/plugin-react": "^4.5.0",
-    "@vitest/coverage-v8": "^3.1.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint": "^9.28.0",
+    "eslint": "^9.30.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "gh-pages": "^6.3.0",
     "jiti": "^2.4.2",
     "js": "^0.1.0",
     "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
+    "p5.capture": "^1.6.0",
+    "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.0",
-    "vite": "^6.3.5",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.2",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.4",
     "vitest-canvas-mock": "^0.3.3"
   }
 }