Rewrite the cropper to embrace showcase code

.gitignore

@@ -22,5 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+stats.html
+
 # documentation is not ready
 docs

package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-mobile-cropper",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "The react mobile cropper inspired by Android mobile croppers",
   "author": "Norserium",
   "license": "MIT",
   "repository": "Norserium/react-mobile-cropper",
-  "main": "dist/index.cjs.js",
-  "unpkg": "dist/index.global.js",
-  "jsdelivr": "dist/index.global.js",
-  "module": "dist/index.esm-bundler.js",
+	"main": "dist/index.cjs.js",
+	"browser": "dist/index.global.js",
+	"unpkg": "dist/index.global.js",
+	"jsdelivr": "dist/index.global.js",
+	"module": "dist/index.esm-bundler.js",
   "types": "dist/index.d.ts",
   "keywords": [
     "react",
@@ -74,14 +75,16 @@
     "rollup-plugin-postcss": "4.0.1",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "sass": "^1.53.0",
     "typescript": "^4.0.5"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
     "classnames": "^2.2.6",
-    "react-advanced-cropper": "^0.4.1",
+    "react-advanced-cropper": "^0.7.3",
     "tslib": "^2.0.3"
   }
 }

rollup.config.js

@@ -2,7 +2,7 @@ import path from 'path';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
-import replace from '@rollup/plugin-replace';
+import { visualizer } from 'rollup-plugin-visualizer';
 import url from '@rollup/plugin-url';
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
@@ -11,35 +11,23 @@ import { terser } from 'rollup-plugin-terser';
 import scss from 'rollup-plugin-scss';
 import pkg from './package.json';
 
-const output = [
-	{
-		file: pkg.module,
-		format: `es`,
-	},
-	{
-		file: pkg.main,
-		format: `cjs`,
-	},
-	{
-		file: pkg.unpkg,
-		format: `iife`,
-	},
-	{
-		file: pkg.browser || pkg.module.replace('bundler', 'browser'),
-		format: `es`,
-	},
-];
+const files = {
+	es: pkg.main,
+	cjs: pkg.module,
+	iife: pkg.browser,
+};
 
-export default {
+export default ['es', 'cjs', 'iife'].map((format) => ({
 	input: 'src/index.ts',
-	output: output.map((config) => ({
-		...config,
-		name: config.format === 'iife' ? 'ReactMobileCropper' : undefined,
+	output: {
+		file: files[format],
+		format,
+		name: format === 'iife' ? 'ReactMobileCropper' : undefined,
 		globals: {
 			react: 'React',
 		},
-		sourcemap: process.env.NODE_ENV !== 'production',
-	})),
+		sourcemap: true,
+	},
 	plugins: [
 		external(),
 		scss({
@@ -53,9 +41,8 @@ export default {
 		resolve(),
 		commonjs(),
 		typescript({ tsconfig: './tsconfig.json' }),
-		terser(),
-		replace({
-			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+		visualizer({
+			gzipSize: true,
 		}),
 	],
-};
+}));