Add support for P5 v2.x.x for the upcoming wrapper 5.x.x release (#521)

* Support P5 v2.x.x for the coming v5.x.x release of the wrapper

* Add a note to the docs about `p5` version 2.x.x

* Add an example of using the `async` / `await` syntax in the demo

* Fix test coverage generation

* Use happy-dom over jsdom for more performant UI tests

Author: jamesrweb

.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/typescript/tsconfig.json

@@ -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/typescript/tsconfig.node.json

@@ -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/common.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/demo.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;
+});

config/vite/library.ts

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