Add integration tests for ESM build (typescript/react/vuejs)

.gitignore

@@ -3,6 +3,10 @@
 .nyc_output/*
 # .vscode/settings.json
 node_modules/*
+test/integrations/typescript/node_modules/
+test/integrations/react/node_modules/
+test/integrations/vuejs/node_modules/
+
 
 analyzer/
 bower-repo/

package.json

@@ -9,6 +9,7 @@
     "bench": "vitest bench",
     "bench:report": "vitest bench --reporter=verbose",
     "test": "vitest",
+    "test:integration": "npm run build && node ./test/integrationRunner.js",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "generate-types": "npm run docs && node utils/generate-types.mjs && node utils/patch.mjs"
@@ -41,12 +42,13 @@
     "@eslint/js": "^9.28.0",
     "@eslint/markdown": "^6.5.0",
     "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
     "@stylistic/eslint-plugin": "^4.4.1",
+    "@types/p5": "^1.7.6",
     "@vitest/browser": "^2.1.5",
     "all-contributors-cli": "^6.19.0",
     "concurrently": "^8.2.2",
@@ -58,7 +60,7 @@
     "husky": "^4.2.3",
     "lint-staged": "^15.1.0",
     "msw": "^2.6.3",
-    "rollup": "^4.9.6",
+    "rollup": "^4.45.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "vite": "^5.0.2",

test/integrationRunner.js

@@ -0,0 +1,23 @@
+const { execSync } = require('node:child_process');
+const { join } = require('node:path');
+const { existsSync } = require('node:fs');
+
+const testDirs = ['typescript', 'react', 'vuejs'];
+const rootDir = process.cwd(); 
+
+for (const dir of testDirs) {
+  const testPath = join(rootDir, 'test', 'integrations', dir);
+  if (!existsSync(testPath)) {
+    console.warn(`⚠️ Skipping missing directory: ${dir}`);
+    continue;
+  }
+
+  console.log(`\n🧪 Running integration test in: ${dir}`);
+  process.chdir(testPath);
+  console.log('📦 Installing dependencies...');
+  execSync('npm install', { stdio: 'inherit' });
+  console.log('🚀 Running type check...');
+  execSync('npm run test', { stdio: 'inherit' });
+
+  process.chdir(rootDir); 
+}

test/integrations/react/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import p5 from 'p5';
+
+const App = () => {
+  React.useEffect(() => {
+    new p5(p => {
+      p.setup = () => {
+        p.createCanvas(100, 100);
+      };
+    });
+  }, []);
+
+  return <div id="sketch" />;
+};
+
+createRoot(document.getElementById('sketch')!).render(<App />);

test/integrations/react/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "react-test",
+  "scripts": {
+    "test": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "p5": "file:../../../",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6"
+  }
+}

test/integrations/react/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["index.tsx"]
+}

test/integrations/typescript/index.ts

@@ -0,0 +1,8 @@
+import p5 from 'p5';
+
+new p5((p) => {
+  p.setup = () => {
+    p.createCanvas(400, 400);
+    p.background(200);
+  };
+});

test/integrations/typescript/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "p5-integration-ts",
+  "private": true,
+  "scripts": {
+    "test": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "p5": "file:../../../dist/app.js",
+    "typescript": "^5.4.0"
+  }
+}

test/integrations/typescript/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "baseUrl": "."
+  },
+  "include": ["index.ts"]
+}

test/integrations/vuejs/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="sketch"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import p5 from 'p5';
+
+onMounted(() => {
+  new p5(p => {
+    p.setup = () => {
+      p.createCanvas(100, 100);
+    };
+  }, document.getElementById('sketch')!);
+});
+</script>

test/integrations/vuejs/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#sketch');