Version 5.0.0-rc.0

config/eslint/eslint.json

@@ -6,7 +6,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -16,7 +17,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "settings": {
     "react": {
       "version": "detect"

config/typescript/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "outDir": "../../dist/component",
     "target": "ESNext",
+    "composite": true,
     "useDefineForClassFields": true,
     "types": ["vite/client"],
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -18,6 +19,6 @@
     "noEmit": false,
     "jsx": "react-jsx"
   },
-  "include": ["../../src"],
+  "include": ["../../src", "../../tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

config/vite/vite.component.config.ts

@@ -13,20 +13,33 @@ export default defineConfig({
       name: "ReactP5Wrapper"
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: ["react", "react-dom", "p5"],
       output: {
         dir: resolve(__dirname, "..", "..", "dist", "component"),
         globals: {
           react: "React",
-          "react-dom": "ReactDom"
+          "react-dom": "ReactDom",
+          p5: "p5"
         }
       }
     }
   },
   test: {
     globals: true,
-    threads: false,
     environment: "jsdom",
-    setupFiles: resolve(__dirname, "..", "..", "tests", "setup.ts")
+    coverage: {
+      include: ["src"]
+    },
+    setupFiles: resolve(__dirname, "..", "..", "tests", "setup.ts"),
+    deps: {
+      optimizer: {
+        web: {
+          include: ["vitest-canvas-mock"]
+        }
+      }
+    },
+    onConsoleLog() {
+      return false;
+    }
   }
 });

demo/app.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
 import * as box from "./sketches/box";
@@ -47,15 +47,15 @@ function App() {
 
   if (state.unmount) {
     return (
-      <Fragment>
+      <>
         <p>Unmounted the sketch</p>
         <button onClick={onMountStateChange}>Remount</button>
-      </Fragment>
+      </>
     );
   }
 
   return (
-    <Fragment>
+    <>
       <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
       <input
         type="range"
@@ -67,7 +67,7 @@ function App() {
       />
       <button onClick={onChangeSketch}>Change Sketch</button>
       <button onClick={onMountStateChange}>Unmount</button>
-    </Fragment>
+    </>
   );
 }
 

package.json

@@ -28,13 +28,12 @@
     "build:component": "tsc --declaration --emitDeclarationOnly && 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",
+    "dev": "vite --config config/vite/vite.demo.config.ts --host",
     "format": "pnpm prettier --write .",
     "format:check": "pnpm prettier --check .",
     "lint": "eslint --config config/eslint/eslint.json . --ignore-path .gitignore",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier --config config/prettier/prettier.json --ignore-path .gitignore",
-    "preview": "vite preview --config config/vite/vite.demo.config.ts",
     "test": "vitest run --config config/vite/vite.component.config.ts",
     "test:coverage": "vitest run --coverage --config config/vite/vite.component.config.ts",
     "test:watch": "vitest watch --config config/vite/vite.component.config.ts"
@@ -84,34 +83,36 @@
     "url": "https://github.com/P5-wrapper/react/issues"
   },
   "peerDependencies": {
+    "p5": ">= 1.4.1",
     "react": ">= 18.2.0",
     "react-dom": ">= 18.2.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^20.10.3",
-    "@types/p5": "^1.7.4",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/p5": "^1.7.6",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.0.1",
-    "canvas": "^2.11.2",
-    "eslint": "^8.55.0",
+    "@vitest/coverage-v8": "^1.3.1",
+    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gh-pages": "^6.1.0",
+    "gh-pages": "^6.1.1",
     "jsdom": "^24.0.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.6",
-    "vitest": "^0.34.6"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "dependencies": {
     "microdiff": "^1.3.2",
-    "p5": ">=1.4.1 <2.0.0"
+    "react-error-boundary": "^4.0.13"
   }
 }