build: reduce bundle size + preserve module (#427)

Co-authored-by: Ben Carleton <[email protected]>

Author: mitrotasios

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0-development",
   "description": "The React library to build dashboards faster.",
   "scripts": {
-    "rollup": "rollup -c",
+    "prebuild": "rm -rf dist",
+    "build": "rollup -c",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "prettier": "prettier --write \"{src,types,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
     "tests": "jest",
@@ -94,8 +95,8 @@
     "react": "^18.0.0",
     "react-dom": ">=16.6.0"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "files": [
     "dist"
   ],

rollup.config.js

@@ -6,40 +6,47 @@ import typescript from "@rollup/plugin-typescript";
 
 import dts from "rollup-plugin-dts";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import { terser } from "rollup-plugin-terser";
 import { typescriptPaths } from "rollup-plugin-typescript-paths";
+import { terser } from "rollup-plugin-terser";
 
-const packageJson = require("./package.json");
+const outputOptions = {
+  sourcemap: false,
+  preserveModules: true,
+  preserveModulesRoot: "src",
+};
 
 export default [
   {
     input: "src/index.ts",
     output: [
       {
-        file: packageJson.main,
+        dir: "dist",
         format: "cjs",
-        sourcemap: false,
+        entryFileNames: "[name].cjs",
+        exports: "auto",
+        ...outputOptions,
       },
       {
-        file: packageJson.module,
+        dir: "dist",
         format: "esm",
-        sourcemap: false,
+        ...outputOptions,
       },
     ],
+    external: [/node_modules/],
     plugins: [
       peerDepsExternal(),
       resolve(),
       commonjs(),
+      terser(),
       typescript({
         tsconfig: "./tsconfig.json",
         exclude: ["**/stories/**", "**/tests/**", "./styles.css"],
       }),
-      terser(),
       typescriptPaths(),
     ],
   },
   {
-    input: "dist/esm/index.d.ts",
+    input: "dist/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
     external: [/\.css$/],

tsconfig.json

@@ -7,12 +7,11 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
-    "jsx": "react", 
-    "module": "ESNext",  
+    "jsx": "react",
+    "module": "ESNext",
     "declaration": true,
-    "declarationDir": "types",
+    "declarationDir": "dist",
     "sourceMap": false,
-    "outDir": "dist",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "emitDeclarationOnly": true,