Update dependencies

README.md

@@ -87,7 +87,7 @@ first and only argument.
 
 ```typescript
 import React from "react";
-import { ReactP5Wrapper, P5CanvasInstance } from "react-p5-wrapper";
+import { P5CanvasInstance, ReactP5Wrapper } from "react-p5-wrapper";
 
 function sketch(p5: P5CanvasInstance) {
   p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
@@ -174,10 +174,10 @@ correctly typed as a `number`.
 ##### Usage with the `P5CanvasInstance` type
 
 ```typescript
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
-  ReactP5Wrapper,
   P5CanvasInstance,
+  ReactP5Wrapper,
   SketchProps
 } from "react-p5-wrapper";
 
@@ -228,7 +228,7 @@ export function App() {
 ##### Usage with the `Sketch` type
 
 ```typescript
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { ReactP5Wrapper, Sketch, SketchProps } from "react-p5-wrapper";
 
 type MySketchProps = SketchProps & {
@@ -329,7 +329,7 @@ wrapper are changed, if it is set within your sketch. This way we can render our
 our sketches!
 
 ```javascript
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { ReactP5Wrapper } from "react-p5-wrapper";
 
 function sketch(p5) {
@@ -382,7 +382,7 @@ For instance, using [styled components](https://styled-components.com), we could
 center some text on top of our sketch like so:
 
 ```jsx
-import { ReactP5Wrapper, P5WrapperClassName } from "react-p5-wrapper";
+import { P5WrapperClassName, ReactP5Wrapper } from "react-p5-wrapper";
 import styled, { createGlobalStyle } from "styled-components";
 
 const GlobalWrapperStyles = createGlobalStyle`

config/eslint/eslint.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   env: {
-    browser: true,
-    es2021: true
+    browser: true
   },
   extends: [
     "eslint:recommended",
@@ -14,21 +13,10 @@ module.exports = {
     ecmaFeatures: {
       jsx: true
     },
-    ecmaVersion: 12,
+    ecmaVersion: "latest",
     sourceType: "module"
   },
-  plugins: ["@typescript-eslint", "react", "simple-import-sort"],
-  overrides: [
-    {
-      files: [".js", ".jsx", ".ts", ".tsx"]
-    }
-  ],
-  rules: {
-    "@typescript-eslint/no-explicit-any": "off",
-    "linebreak-style": ["error", "unix"],
-    "simple-import-sort/exports": "error",
-    "simple-import-sort/imports": "error"
-  },
+  plugins: ["@typescript-eslint", "react"],
   settings: {
     react: {
       version: "detect"

config/jest/jest.config.js

@@ -5,13 +5,13 @@ module.exports = {
   silent: true,
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
   transform: {
-    "^.+\\.tsx?$": "ts-jest"
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
+      }
+    ]
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
-  globals: {
-    "ts-jest": {
-      tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
-    }
-  },
   testEnvironment: join(__dirname, "jest.environment.js")
 };

config/jest/jest.environment.js

@@ -4,6 +4,7 @@ const { TextEncoder, TextDecoder } = require("util");
 class CustomTestEnvironment extends Environment {
   async setup() {
     await super.setup();
+
     this.polyfillTextEncoder();
     this.polyfillTextDecoder();
   }

config/prettier/prettier.config.js

@@ -1,11 +1,17 @@
 module.exports = {
   arrowParens: "avoid",
+  bracketSameLine: false,
   bracketSpacing: true,
   embeddedLanguageFormatting: "auto",
   htmlWhitespaceSensitivity: "css",
+  importOrder: ["<THIRD_PARTY_MODULES>", "^[./]"],
+  importOrderCaseInsensitive: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
   insertPragma: false,
-  bracketSameLine: false,
   jsxSingleQuote: false,
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
   printWidth: 80,
   proseWrap: "always",
   quoteProps: "as-needed",

config/rollup/rollup.config.js

@@ -1,12 +1,13 @@
-import typescript from "rollup-plugin-typescript2";
+import { join } from "path";
 import { terser } from "rollup-plugin-terser";
+import typescript from "rollup-plugin-typescript2";
+
 import {
+  main as cjs,
   dependencies,
-  peerDependencies,
-  module,
-  main
+  module as esm,
+  peerDependencies
 } from "../../package.json";
-import { join } from "path";
 
 const input = join(__dirname, "..", "..", "src", "index.tsx");
 const external = [
@@ -41,7 +42,7 @@ function createBundleConfiguration(filename, format) {
   };
 }
 
-const ESM = createBundleConfiguration(module, "esm");
-const CJS = createBundleConfiguration(main, "cjs");
+const ESM = createBundleConfiguration(esm, "esm");
+const CJS = createBundleConfiguration(cjs, "cjs");
 
 export default [ESM, CJS];

config/typescript/tsconfig.json

@@ -5,7 +5,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "module": "ES2015",
+    "module": "ESNext",
     "skipLibCheck": true,
     "strict": true,
     "target": "es5",

example/app.jsx

@@ -1,9 +1,10 @@
-import React, { Fragment, useState, useCallback, useMemo } from "react";
+import React, { Fragment, useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { ReactP5Wrapper } from "../src/index.tsx";
+
 import * as box from "./sketches/box";
-import * as torus from "./sketches/torus";
 import * as plane from "./sketches/plane";
+import * as torus from "./sketches/torus";
+import { ReactP5Wrapper } from "../src/index.tsx";
 import "./example.css";
 
 function App() {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-p5-wrapper",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "A wrapper component that allows you to utilise P5 sketches within React apps.",
-  "homepage": "https://github.com/jamesrweb/react-p5-wrapper",
+  "homepage": "https://github.com/P5-wrapper/react",
   "license": "MIT",
   "main": "dist/components/index.js",
   "module": "dist/components/index.esm.js",
@@ -56,57 +56,57 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/jamesrweb/react-p5-wrapper.git"
+    "url": "https://github.com/P5-wrapper/react.git"
   },
   "bugs": {
-    "url": "https://github.com/jamesrweb/react-p5-wrapper/issues"
+    "url": "https://github.com/P5-wrapper/react/issues"
   },
   "dependencies": {
     "microdiff": "^1.3.1",
-    "p5": "^1.4.2"
+    "p5": "^1.5.0"
   },
   "peerDependencies": {
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/preset-env": "^7.19.0",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^28.1.8",
-    "@types/p5": "^1.4.2",
-    "@types/react": "^18.0.19",
+    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@types/jest": "^29.2.0",
+    "@types/p5": "^1.4.3",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
     "babel-loader": "^8.2.5",
     "canvas": "^2.10.1",
     "css-loader": "^6.7.1",
-    "eslint": "^8.23.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint": "^8.26.0",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
     "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-environment-jsdom-global": "^3.1.2",
+    "jest": "^29.2.1",
+    "jest-environment-jsdom": "^29.2.1",
+    "jest-environment-jsdom-global": "^4.0.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.32.1",
+    "rollup-plugin-typescript2": "^0.34.1",
     "style-loader": "^3.3.1",
-    "ts-jest": "^28.0.8",
-    "ts-loader": "^9.3.1",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.0"
+    "webpack-dev-server": "^4.11.1"
   }
 }