Update dependency rollup to v3

config/eslint/eslint.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

config/jest/jest.config.js

@@ -1,17 +1,21 @@
-const { join } = require("path");
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
 
-module.exports = {
-  rootDir: join(__dirname, "..", ".."),
+const filePath = fileURLToPath(import.meta.url);
+const fileDirectory = dirname(filePath);
+
+export default {
+  rootDir: join(fileDirectory, "..", ".."),
   silent: true,
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
   transform: {
     "^.+\\.tsx?$": [
       "ts-jest",
       {
-        tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
+        tsconfig: join(fileDirectory, "..", "typescript", "tsconfig.json")
       }
     ]
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
-  testEnvironment: join(__dirname, "jest.environment.js")
+  testEnvironment: join(fileDirectory, "jest.environment.js")
 };

config/jest/jest.environment.js

@@ -1,7 +1,7 @@
-const Environment = require("jest-environment-jsdom-global");
-const { TextEncoder, TextDecoder } = require("util");
+import Environment from "jest-environment-jsdom-global";
+import { TextDecoder, TextEncoder } from "util";
 
-class CustomTestEnvironment extends Environment {
+export default class CustomTestEnvironment extends Environment {
   async setup() {
     await super.setup();
 
@@ -25,5 +25,3 @@ class CustomTestEnvironment extends Environment {
     this.global.TextDecoder = TextDecoder;
   }
 }
-
-module.exports = CustomTestEnvironment;

config/prettier/prettier.json

@@ -0,0 +1,26 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrderCaseInsensitive": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrderParserPlugins": ["importAssertions", "jsx", "typescript"],
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

config/rollup/rollup.config.js

@@ -1,23 +1,23 @@
-import { join } from "path";
+import { dirname, join } from "path";
 import { terser } from "rollup-plugin-terser";
 import typescript from "rollup-plugin-typescript2";
+import typescriptEngine from "typescript";
+import { fileURLToPath } from "url";
 
-import {
-  main as cjs,
-  dependencies,
-  module as esm,
-  peerDependencies
-} from "../../package.json";
+import packageJSON from "../../package.json" assert { type: "json" };
 
-const input = join(__dirname, "..", "..", "src", "index.tsx");
+const filePath = fileURLToPath(import.meta.url);
+const fileDirectory = dirname(filePath);
+
+const input = join(fileDirectory, "..", "..", "src", "index.tsx");
 const external = [
-  ...Object.keys(dependencies ?? {}),
-  ...Object.keys(peerDependencies ?? {})
+  ...Object.keys(packageJSON.dependencies ?? {}),
+  ...Object.keys(packageJSON.peerDependencies ?? {})
 ];
 const plugins = [
   typescript({
-    typescript: require("typescript"),
-    tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
+    typescript: typescriptEngine,
+    tsconfig: join(fileDirectory, "..", "typescript", "tsconfig.json")
   }),
   terser({
     format: {
@@ -27,22 +27,24 @@ const plugins = [
 ];
 
 function createBundleConfiguration(filename, format) {
+  console.log(filename, format);
+  /** @type {import("rollup").RollupOptions} */
   return {
     input,
     plugins,
     external,
     output: {
       file: filename,
       format,
-      sourcemap: true
+      sourcemap: "inline"
     },
     onwarn: warning => {
       throw new Error(warning.message);
     }
   };
 }
 
-const ESM = createBundleConfiguration(esm, "esm");
-const CJS = createBundleConfiguration(cjs, "cjs");
+const ESM = createBundleConfiguration(packageJSON.module, "esm");
+const CJS = createBundleConfiguration(packageJSON.main, "cjs");
 
 export default [ESM, CJS];

config/webpack/webpack.config.js

@@ -1,11 +1,15 @@
-const { join } = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
 
-const BASE_DIR = join(__dirname, "..", "..");
+const filePath = fileURLToPath(import.meta.url);
+const fileDirectory = dirname(filePath);
+
+const BASE_DIR = join(fileDirectory, "..", "..");
 const DISTRIBUTION_DIRECTORY = join(BASE_DIR, "dist", "demo");
 const EXAMPLE_DIRECTORY = join(BASE_DIR, "example");
 
-module.exports = {
+export default {
   entry: join(EXAMPLE_DIRECTORY, "app.jsx"),
   output: {
     path: DISTRIBUTION_DIRECTORY,
@@ -21,7 +25,7 @@ module.exports = {
         test: /\.tsx?$/,
         loader: "ts-loader",
         options: {
-          configFile: join(__dirname, "..", "typescript", "tsconfig.json")
+          configFile: join(fileDirectory, "..", "typescript", "tsconfig.json")
         }
       },
       {

package.json

@@ -4,6 +4,7 @@
   "description": "A wrapper component that allows you to utilise P5 sketches within React apps.",
   "homepage": "https://github.com/P5-wrapper/react",
   "license": "MIT",
+  "type": "module",
   "main": "dist/components/index.js",
   "module": "dist/components/index.esm.js",
   "types": "dist/components/index.d.ts",
@@ -20,8 +21,8 @@
     "format:check": "pnpm prettier --check .",
     "format": "pnpm prettier --write .",
     "lint:fix": "pnpm lint --fix",
-    "lint": "eslint --config config/eslint/eslint.config.js src/ --ignore-path .gitignore",
-    "prettier": "prettier --config config/prettier/prettier.config.js --ignore-path .gitignore",
+    "lint": "eslint --config config/eslint/eslint.json src/ --ignore-path .gitignore",
+    "prettier": "prettier --config config/prettier/prettier.json --ignore-path .gitignore",
     "release": "pnpm build && gh-pages -d dist/demo && pnpm publish",
     "start": "webpack serve --config config/webpack/webpack.config.js --mode development",
     "test:watch": "pnpm test --watch",
@@ -97,7 +98,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
+    "rollup": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "style-loader": "^3.3.1",