Version 5 re-preparation #491
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -31,4 +31,5 @@ jobs: | |
| - uses: JS-DevTools/npm-publish@v3 | ||
| with: | ||
| access: "public" | ||
| tag: "next" | ||
| token: ${{ secrets.NPM_TOKEN }} | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // @ts-expect-error The react team don't expose types for the eslint plugin currently | ||
| import * as reactCompiler from "eslint-plugin-react-compiler"; | ||
| import * as tseslint from "typescript-eslint"; | ||
| import { includeIgnoreFile } from "@eslint/compat"; | ||
| import eslint from "@eslint/js"; | ||
| import { resolve } from "node:path"; | ||
| import { dirname } from "path"; | ||
| import { type ConfigArray } from "typescript-eslint"; | ||
|
|
||
| const configDirectory: string = dirname(import.meta.dirname); | ||
| const rootDirectory: string = dirname(configDirectory); | ||
| const gitignore: string = resolve(rootDirectory, ".gitignore"); | ||
|
|
||
| const config: ConfigArray = tseslint.config( | ||
| eslint.configs.recommended, | ||
| tseslint.configs.strict, | ||
| tseslint.configs.stylistic, | ||
| includeIgnoreFile(gitignore), | ||
| { | ||
| ...reactCompiler.configs.recommended, | ||
| languageOptions: { | ||
| parserOptions: { | ||
| project: true, | ||
| tsconfigRootDir: rootDirectory | ||
| } | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| export default config; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,23 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ESNext", | ||
| "useDefineForClassFields": true, | ||
| "types": ["vite/client"], | ||
| "lib": ["DOM", "DOM.Iterable", "ESNext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "esModuleInterop": false, | ||
| "allowSyntheticDefaultImports": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "module": "ESNext", | ||
| "moduleResolution": "node", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "noEmit": false, | ||
| "jsx": "react-jsx", | ||
| "noImplicitAny": true | ||
| }, | ||
| "include": ["../../config", "../../src", "../../tests", "../../demo"], | ||
| "references": [{ "path": "./tsconfig.node.json" }] | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,12 +3,14 @@ import { resolve } from "node:path"; | |
| import dts from "vite-plugin-dts"; | ||
| import { defineConfig } from "vitest/config"; | ||
|
|
||
| const rootDir = resolve(__dirname, "..", ".."); | ||
| const outputDirectory = resolve(rootDir, "dist", "component"); | ||
| const tsConfigPath = resolve(rootDir, "tsconfig.json"); | ||
| const config = defineConfig({ | ||
| plugins: [ | ||
| dts({ | ||
| rollupTypes: true, | ||
| tsconfigPath: tsConfigPath, | ||
| outDir: outputDirectory | ||
| }), | ||
| react({ | ||
|
|
@@ -23,7 +25,7 @@ export default defineConfig({ | |
| build: { | ||
| emptyOutDir: true, | ||
| lib: { | ||
| entry: resolve(rootDir, "src", "main.tsx"), | ||
| name: "ReactP5Wrapper", | ||
| fileName: "ReactP5Wrapper", | ||
| formats: ["es", "cjs"] | ||
|
|
@@ -49,16 +51,15 @@ export default defineConfig({ | |
| coverage: { | ||
| include: ["src"] | ||
| }, | ||
| setupFiles: resolve(rootDir, "tests", "setup.ts"), | ||
| deps: { | ||
| optimizer: { | ||
| web: { | ||
| include: ["vitest-canvas-mock"] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| export default config; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "name": "@p5-wrapper/react", | ||
| "description": "A wrapper component that allows you to utilise P5 sketches within React apps.", | ||
| "version": "5.0.0-rc.2", | ||
| "type": "module", | ||
| "homepage": "https://github.com/P5-wrapper/react", | ||
| "license": "MIT", | ||
|
|
@@ -20,17 +20,17 @@ | |
| }, | ||
| "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", | ||
| "format": "pnpm prettier --write .", | ||
| "format:check": "pnpm prettier --check .", | ||
| "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" | ||
| }, | ||
| "keywords": [ | ||
|
|
@@ -77,43 +77,48 @@ | |
| "bugs": { | ||
| "url": "https://github.com/P5-wrapper/react/issues" | ||
| }, | ||
| "dependencies": { | ||
| "microdiff": "^1.5.0", | ||
| "react-error-boundary": "^5.0.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "p5": ">= 1.11.3", | ||
| "react": ">= 19.0.0", | ||
|
There was a problem hiding this comment. This will complain (albeit not critically) if the consumer doesn't have Is that intended? Ideally, the library should probably support the earliest possible version of React.
Member
Author
Contributor
There was a problem hiding this comment. I believe the 5th version should be available for users on both React 18 and 19 to provide a lighter wrapper. This is the primary difference from version 4. Otherwise, it won't be accessible until the app is updated to React 19, which could be a blocker due to breaking changes.
Member
Author
There was a problem hiding this comment. Maybe but if we use 18 and 19 we could cause issues for the people on 19 since theres some deprecations in that version and also we use the react compiler in the vite setup now also. I don't know if we can reasonably guarantee full support for users of both 18 and 19, at least not 100% compatability can be guaranteed, thin or not. Does that make sense what I am trying to say?
Contributor
There was a problem hiding this comment. That makes sense, but maybe we can add improvements that reduce package size to version 4 as well. WDYT?
Contributor
There was a problem hiding this comment. @jamesrweb Taking into account that these changes work in both version 18 and 19 of React, maybe we can leave the requirements for React peer dependencies as |
||
| "react-dom": ">= 19.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/eslint-plugin": "^7.25.9", | ||
| "@eslint/compat": "^1.2.6", | ||
| "@eslint/js": "^9.20.0", | ||
| "@testing-library/jest-dom": "6.6.3", | ||
| "@testing-library/react": "^16.2.0", | ||
| "@trivago/prettier-plugin-sort-imports": "^5.2.2", | ||
| "@types/jest": "^29.5.14", | ||
| "@types/node": "^22.13.4", | ||
| "@types/p5": "^1.7.6", | ||
| "@types/react": "^19.0.8", | ||
| "@types/react-dom": "^19.0.3", | ||
| "@typescript-eslint/eslint-plugin": "^8.24.0", | ||
| "@vitejs/plugin-react": "^4.3.4", | ||
| "@vitest/coverage-v8": "^3.0.5", | ||
| "babel-plugin-react-compiler": "19.0.0-beta-30d8a17-20250209", | ||
| "eslint": "^9.20.1", | ||
| "eslint-plugin-react": "^7.37.4", | ||
| "eslint-plugin-react-compiler": "19.0.0-beta-30d8a17-20250209", | ||
| "eslint-plugin-react-hooks": "^5.1.0", | ||
| "gh-pages": "^6.3.0", | ||
| "jiti": "^2.4.2", | ||
| "js": "^0.1.0", | ||
| "jsdom": "^26.0.0", | ||
| "prettier": "^3.5.1", | ||
| "react": "19.0.0", | ||
| "react-dom": "19.0.0", | ||
| "rimraf": "^6.0.1", | ||
| "typescript": "^5.7.3", | ||
| "typescript-eslint": "^8.24.0", | ||
| "vite": "^6.1.0", | ||
| "vite-plugin-dts": "^4.5.0", | ||
| "vitest": "^3.0.5", | ||
| "vitest-canvas-mock": "^0.3.3" | ||
| } | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be as is, since it has no effect on compilation errors