Rename export files and folders (#223)

* Rename export files and folders

To support all possible export bundle types we should export the main, module and browser fields from the package.json.

* 4.1.0

Author: jamesrweb

config/rollup/rollup.config.js

@@ -42,20 +42,29 @@ const plugins = [
 function createBundleConfiguration(filename, format) {
   const lowercaseFormat = format.toLowerCase();
 
-  if (![packageJSON.module, packageJSON.browser].includes(filename)) {
+  if (
+    ![packageJSON.module, packageJSON.main, packageJSON.browser].includes(
+      filename
+    )
+  ) {
     throw new Error(`Invalid filename provided. Received: ${filename}`);
   }
 
   if (!["esm", "cjs"].includes(lowercaseFormat)) {
     throw new Error(`Unrecognised output format provided. Received: ${format}`);
   }
 
-  if (lowercaseFormat === "cjs" && filename !== packageJSON.browser) {
+  if (lowercaseFormat === "cjs" && filename !== packageJSON.main) {
     throw new Error("A CJS bundle can only be created for the main bundle.");
   }
 
-  if (lowercaseFormat === "esm" && filename !== packageJSON.module) {
-    throw new Error("An ESM bundle can only be created for the module bundle.");
+  if (
+    lowercaseFormat === "esm" &&
+    ![packageJSON.module, packageJSON.browser].includes(filename)
+  ) {
+    throw new Error(
+      "An ES module bundle can only be created for the module or browser bundle."
+    );
   }
 
   return {
@@ -73,7 +82,8 @@ function createBundleConfiguration(filename, format) {
   };
 }
 
-const ESM = createBundleConfiguration(packageJSON.module, "esm");
-const CJS = createBundleConfiguration(packageJSON.browser, "cjs");
-
-export default [ESM, CJS];
+export default [
+  createBundleConfiguration(packageJSON.module, "esm"),
+  createBundleConfiguration(packageJSON.browser, "esm"),
+  createBundleConfiguration(packageJSON.main, "cjs")
+];

config/typescript/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "../../dist/components",
+    "outDir": "../../dist/react-p5-wrapper",
     "declaration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

package.json

@@ -1,15 +1,16 @@
 {
   "name": "react-p5-wrapper",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "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",
-  "browser": "dist/components/index.js",
-  "module": "dist/components/index.esm.js",
-  "types": "dist/components/index.d.ts",
+  "main": "dist/react-p5-wrapper/index.js",
+  "browser": "dist/react-p5-wrapper/index.browser.js",
+  "module": "dist/react-p5-wrapper/index.module.js",
+  "types": "dist/react-p5-wrapper/index.d.ts",
   "files": [
-    "dist/components/*"
+    "dist/react-p5-wrapper/*"
   ],
   "scripts": {
     "aui": "pnpm audit && pnpm update && pnpm install",