feat: update rollup configuration for new esm and cjs formats

Author: rtivital

package.json

@@ -7,18 +7,14 @@
   "scripts": {
     "cz": "git-cz",
     "clean": "rimraf ./dist",
-    "build": "yarn clean && yarn build:umd && yarn build:es",
-    "build:umd": "cross-env NODE_ENV=es rollup -c",
-    "build:es": "cross-env BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore '**/*.spec.js'",
+    "build": "yarn clean && rollup -c rollup.config.mjs",
     "start": "styleguidist server",
     "styleguide": "styleguidist build",
     "test": "cross-env NODE_ENV=test yarn lint && jest --coverage && yarn typescript",
     "test:watch": "cross-env NODE_ENV=test jest --watch",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "commitmsg": "commitlint -e",
-    "prepublish": "yarn build && yarn size",
-    "postinstall": "husky install",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable",
     "logo": "cd logo && sketchtool export artboards logo.sketch",
@@ -29,11 +25,11 @@
   },
   "size-limit": [
     {
-      "path": "dist/index.js",
+      "path": "dist/cjs/index.js",
       "limit": "8 KB"
     },
     {
-      "path": "dist/es/index.js",
+      "path": "dist/esm/index.mjs",
       "limit": "8 KB"
     }
   ],
@@ -98,9 +94,16 @@
     "react": ">= 16.8 || 18.0.0"
   },
   "dependencies": {
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "attr-accept": "^2.2.2",
     "file-selector": "^0.6.0",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "rollup": "^3.29.4",
+    "rollup-plugin-banner2": "^1.2.2",
+    "rollup-plugin-esbuild": "^6.0.2",
+    "rollup-plugin-node-externals": "^6.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
@@ -121,9 +124,6 @@
     "@commitlint/config-angular": "^16.0.0",
     "@commitlint/prompt": "^16.1.0",
     "@commitlint/prompt-cli": "^16.1.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
     "@size-limit/preset-small-lib": "^7.0.5",
     "@size-limit/webpack": "^7.0.5",
     "@size-limit/webpack-why": "^7.0.5",
@@ -140,6 +140,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.19.4",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.4",
@@ -161,14 +162,10 @@
     "react-styleguidist": "^11.2.0",
     "react-test-renderer": "^18.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.66.1",
-    "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^7.0.5",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.3",
-    "typescript": "^4.0.2",
-    "webpack": "^5.67.0",
-    "webpack-blocks": "^2.1.0"
+    "typescript": "^4.0.2"
   },
   "typings": "typings/react-dropzone.d.ts",
   "version": "0.0.0-development",

rollup.config.js

@@ -0,0 +1,44 @@
+import commonjs from "@rollup/plugin-commonjs";
+import nodeExternals from "rollup-plugin-node-externals";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import banner from "rollup-plugin-banner2";
+import esbuild from "rollup-plugin-esbuild";
+
+export default {
+  input: "./src/index.jsx",
+  output: [
+    {
+      dir: "./dist/cjs",
+      preserveModules: true,
+      exports: "named",
+      format: "cjs",
+    },
+    {
+      dir: "./dist/esm",
+      preserveModules: true,
+      entryFileNames: "[name].mjs",
+      format: "esm",
+    },
+  ],
+
+  plugins: [
+    esbuild({
+      // minify: true,
+      // jsx: "transform",
+      sourceMap: false,
+      target: "es2015",
+    }),
+    nodeExternals(),
+    nodeResolve(),
+    commonjs(),
+    replace({ preventAssignment: true }),
+    banner((chunk) => {
+      if (chunk.fileName === "index.js" || chunk.fileName === "index.mjs") {
+        return "'use client';\n";
+      }
+
+      return undefined;
+    }),
+  ],
+};