Add support for P5 v2.x.x for the upcoming wrapper 5.x.x release

.github/README.md

@@ -9,6 +9,12 @@ A component to integrate [P5.js](https://p5js.org/) sketches into
 > 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.
+>
+> One other thing to note about the coming release of the version `5.x.x` range
+> is that it will support the `p5` version `2.x.x` range which means
+> [support for `async` and `await`](https://beta.p5js.org/reference/p5/async_await/)
+> in your sketches and much more besides, you can read more on the upcoming
+> version of the [P5 docs](https://beta.p5js.org/).
 
 ## Installation
 

config/vite/common.ts

@@ -0,0 +1,16 @@
+import { resolve } from "node:path";
+import { UserConfig } from "vite";
+
+export function common(root: string): UserConfig {
+  return {
+    resolve: {
+      alias: {
+        "@": resolve(root, "src"),
+        "@components": resolve(root, "src", "components"),
+        "@utils": resolve(root, "src", "utils"),
+        "@constants": resolve(root, "src", "constants"),
+        "@contracts": resolve(root, "src", "contracts")
+      }
+    }
+  };
+}

config/vite/demo.ts

@@ -0,0 +1,20 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+import { UserConfig } from "vite";
+
+export function demo(root: string): UserConfig {
+  return {
+    root: resolve(root, "demo"),
+    base: "./",
+    plugins: [react()],
+    preview: { open: true },
+    build: {
+      emptyOutDir: false,
+      rollupOptions: {
+        output: {
+          dir: resolve(root, "dist", "demo")
+        }
+      }
+    }
+  };
+}

config/vite/library.ts

@@ -0,0 +1,65 @@
+import react from "@vitejs/plugin-react";
+import { posix, resolve } from "node:path";
+import { UserConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export function library(root: string): UserConfig {
+  const dist = resolve(root, "dist", "component");
+
+  return {
+    plugins: [
+      dts({
+        rollupTypes: true,
+        tsconfigPath: resolve(root, "tsconfig.json"),
+        outDir: dist
+      }),
+      react({
+        babel: {
+          plugins: [["babel-plugin-react-compiler", {}]]
+        }
+      })
+    ],
+    esbuild: {
+      legalComments: "external"
+    },
+    build: {
+      emptyOutDir: true,
+      lib: {
+        entry: resolve(root, "src", "main.tsx"),
+        name: "ReactP5Wrapper",
+        fileName: "ReactP5Wrapper",
+        formats: ["es", "cjs"]
+      },
+      rollupOptions: {
+        external: ["react", "react/jsx-runtime", "react-dom", "p5"],
+        output: {
+          assetFileNames: "assets/[name][extname]",
+          entryFileNames: "[name].[format].js",
+          dir: dist,
+          globals: {
+            p5: "p5",
+            react: "React",
+            "react/jsx-runtime": "jsxRuntime",
+            "react-dom": "ReactDom"
+          }
+        }
+      }
+    },
+    test: {
+      globals: true,
+      environment: "happy-dom",
+      coverage: {
+        include: [posix.join("src", "**/*.{ts,tsx,js,jsx}")],
+        reporter: ["text-summary", "html", "clover"]
+      },
+      setupFiles: resolve(root, "tests", "setup.ts"),
+      deps: {
+        optimizer: {
+          web: {
+            include: ["vitest-canvas-mock"]
+          }
+        }
+      }
+    }
+  };
+}

config/vite/vite.config.ts

@@ -0,0 +1,19 @@
+import { resolve } from "node:path";
+import { UserConfig } from "vite";
+import { defineConfig } from "vitest/config";
+
+import { common } from "./common";
+import { demo } from "./demo";
+import { library } from "./library";
+
+const root = resolve(__dirname, "..", "..");
+
+export default defineConfig(({ mode }): UserConfig => {
+  const isVitest = process.env.VITEST === "true";
+  const config = isVitest || mode === "lib" ? library : demo;
+
+  return {
+    ...common(root),
+    ...config(root)
+  } satisfies UserConfig;
+});

demo/app.jsx

@@ -16,7 +16,7 @@ function App() {
 
   const [state, setState] = useState({
     rotation: 160,
-    sketch: record,
+    sketch: box,
     unmount: false
   });
 

demo/sketches/record.jsx

@@ -1,10 +1,10 @@
-import * as record from "p5.record.js";
-
 export function sketch(p5) {
   let recording;
 
-  p5.setup = () => {
+  p5.setup = async () => {
     const canvas = p5.createCanvas(400, 400);
+    const record = await import("p5.record.js");
+
     p5.background(200);
 
     recording = new record.Recorder({

package.json

@@ -20,18 +20,18 @@
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:component && pnpm build:demo",
-    "build:component": "tsc --noEmit && vite build --config config/vite/vite.component.config.ts",
-    "build:demo": "vite build --config config/vite/vite.demo.config.ts",
-    "ci": "pnpm format:check && pnpm lint && pnpm test && pnpm build",
-    "dev": "vite --config config/vite/vite.demo.config.ts --host",
+    "build:component": "tsc --noEmit && vite build --config config/vite/vite.config.ts --mode lib",
+    "build:demo": "vite build --config config/vite/vite.config.ts --mode demo",
+    "dev": "vite --config config/vite/vite.config.ts --host",
     "format": "pnpm prettier --write .",
     "format:check": "pnpm prettier --check .",
+    "integrate": "pnpm format:check && pnpm lint && pnpm test && pnpm build",
     "lint": "eslint --config config/eslint/eslint.config.ts",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier --config config/prettier/prettier.json --ignore-path .gitignore",
-    "test": "vitest run --silent --config config/vite/vite.component.config.ts",
-    "test:coverage": "vitest run --silent --coverage --config config/vite/vite.component.config.ts",
-    "test:watch": "vitest watch --config config/vite/vite.component.config.ts"
+    "test": "vitest run --silent --config config/vite/vite.config.ts",
+    "test:coverage": "vitest run --silent --coverage --config config/vite/vite.config.ts",
+    "test:watch": "vitest watch --config config/vite/vite.config.ts"
   },
   "keywords": [
     "react",
@@ -82,23 +82,22 @@
     "react-error-boundary": "^6.0.0"
   },
   "peerDependencies": {
-    "p5": ">= 1.11.3",
+    "p5": ">= 2.0.0",
     "react": ">= 19.0.0",
     "react-dom": ">= 19.0.0"
   },
   "devDependencies": {
     "@babel/eslint-plugin": "^7.27.1",
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.33.0",
-    "@testing-library/jest-dom": "6.6.4",
+    "@testing-library/jest-dom": "6.7.0",
     "@testing-library/react": "^16.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.2.1",
-    "@types/p5": "^1.7.6",
-    "@types/react": "^19.1.9",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
@@ -107,18 +106,16 @@
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "gh-pages": "^6.3.0",
-    "jiti": "^2.5.1",
-    "js": "^0.1.0",
-    "jsdom": "^26.1.0",
+    "happy-dom": "^18.0.1",
     "p5.capture": "^1.6.0",
     "p5.record.js": "^0.2.0",
     "prettier": "^3.6.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "rimraf": "^6.0.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.1",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
     "vitest-canvas-mock": "^0.3.3"