chore: New building process with rollup STC-358 (#139)

* chore: New building process with rollup STC-358

* chore: Fixed test script error STC-358

package.json

@@ -22,16 +22,12 @@
     "@tabler/icons": "^1.41.2",
     "@theme-ui/presets": "^0.9.1",
     "@tippyjs/react": "^4.2.5",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
-    "@types/react-table": "^7.7.1",
     "date-fns": "^2.22.1",
     "downshift": "^6.1.3",
     "framer-motion": "^4.1.17",
     "normalize.css": "^8.0.1",
     "polished": "^4.1.3",
     "react-dropzone": "^11.3.2",
-    "react-scripts": "^4.0.3",
     "react-table": "^7.7.0",
     "rifm": "^0.12.0",
     "theme-ui": "^0.9.1",
@@ -46,14 +42,9 @@
   },
   "scripts": {
     "dev": "styleguidist server",
-    "build": "yarn compile && npx styleguidist build",
     "test": "react-scripts test",
-    "compile:src": "yarn compile:src:cjs && yarn compile:src:es",
-    "compile:src:cjs": "BABEL_ENV=production babel src --out-dir ./lib/cjs --extensions \".ts,.tsx\" --ignore '@types,*.md'",
-    "compile:src:es": "BABEL_ENV=production babel src --no-babelrc --out-dir ./lib/es --extensions \".ts,.tsx\" --ignore '@types,*.md' --config-file ./.babelrc.es",
-    "build:types": "tsc --emitDeclarationOnly --noEmit false",
-    "compile": "rm -rf ./lib && yarn compile:src && yarn build:types",
-    "release": "yarn compile && dotenv release-it --",
+    "build": "rollup -c",
+    "release": "yarn build && dotenv release-it --",
     "changelog": "changelog",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "lint:fix": "yarn lint --fix",
@@ -97,9 +88,12 @@
   "devDependencies": {
     "@babel/cli": "^7.14.3",
     "@babel/core": "^7.14.3",
+    "@babel/plugin-external-helpers": "^7.14.5",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@release-it/keep-a-changelog": "^2.3.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.2",
     "@storybook/addon-a11y": "^6.3.2",
     "@storybook/addon-actions": "^6.3.2",
     "@storybook/addon-essentials": "^6.3.2",
@@ -119,7 +113,10 @@
     "@types/jest-axe": "^3.5.1",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.12.2",
+    "@types/react": "^17.0.15",
+    "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-table": "^7.7.2",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
     "@vitejs/plugin-react-refresh": "^1.3.5",
@@ -142,8 +139,14 @@
     "react-docgen-typescript": "^1.22.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
     "react-styleguidist": "^11.1.7",
     "release-it": "^14.8.0",
+    "rollup": "^2.55.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
     "storybook-addon-outline": "^1.4.1",
     "storybook-builder-vite": "^0.0.10",
     "typescript": "^4.1.3",

rollup.config.js

@@ -0,0 +1,53 @@
+import { terser } from "rollup-plugin-terser"
+import typescript from "rollup-plugin-typescript2"
+import peerDepsExternal from "rollup-plugin-peer-deps-external"
+import cleaner from "rollup-plugin-cleaner"
+import babel from "@rollup/plugin-babel"
+import { DEFAULT_EXTENSIONS } from "@babel/core"
+import packageJson from "./package.json"
+
+export default {
+  input: ["src/components/index.ts"],
+  output: [
+    {
+      dir: `${packageJson.main.replace("components/index.js", "")}`,
+      exports: "named",
+      format: "cjs",
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: "src",
+    },
+    {
+      dir: `${packageJson.module.replace("components/index.js", "")}`,
+      format: "esm",
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: "src",
+    },
+  ],
+  external: [
+    "classnames",
+    "debounce",
+    "lodash/memoize",
+    "prop-types",
+    "react",
+    "react-dom",
+  ],
+  plugins: [
+    cleaner({
+      targets: ["lib"],
+    }),
+    peerDepsExternal(),
+    terser(),
+    typescript({
+      exclude: ["node_modules/*", "**/*.stories.tsx", "**/*.test.tsx"],
+      useTsconfigDeclarationDir: true,
+    }),
+    babel({
+      babelHelpers: "external",
+      exclude: /node_modules/,
+      extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"],
+      plugins: ["@babel/plugin-external-helpers"],
+    }),
+  ],
+}