build(umd): 🔧 add umd rollup plugin

package.json

@@ -15,17 +15,26 @@
   },
   "license": "MIT",
   "author": "Timeless <[email protected]>",
+  "main": "dist/lib/index.js",
+  "unpkg": "dist/renderless-components.production.min.js",
+  "module": "dist/es/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "yarn build:commonjs && yarn build:es && yarn build:types",
     "build-storybook": "build-storybook",
     "build:commonjs": "rimraf ./dist/lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx  ./src --out-dir dist/lib",
     "build:es": "rimraf ./dist/es && babel --extensions .ts,.tsx ./src --out-dir dist/es",
     "build:types": "rimraf ./dist/types && tsc --emitDeclarationOnly",
+    "build:umd": "rm -rf ./dist && NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
     "commit": "gacp",
     "format": "prettier --write \"./**/*.{js,ts,css,less,json,md,html,yml,yaml,pcss,jsx,tsx}\"",
     "keys": "node scripts/build/keys",
     "lint": "eslint . --ext .tsx,.ts,.jsx,.js --fix",
     "lint:package": "sort-package-json",
+    "stats": "open ./stats.html",
     "storybook": "start-storybook -p 6006",
     "test": "jest"
   },
@@ -58,6 +67,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-conventional": "11.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "@storybook/addon-a11y": "6.0.21",
     "@storybook/addon-actions": "6.0.21",
     "@storybook/addon-essentials": "6.0.21",
@@ -109,9 +119,23 @@
     "react-test-renderer": "16.13.1",
     "react-transition-group": "4.4.1",
     "rimraf": "^3.0.2",
+    "rollup": "^2.16.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-jscc": "^1.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.2",
+    "rollup-plugin-prettier": "^2.1.0",
+    "rollup-plugin-size": "^0.2.2",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-visualizer": "^4.0.4",
     "sort-package-json": "1.46.0",
     "ts-jest": "26.3.0",
     "ts-morph": "8.1.0",
     "typescript": "4.0.2"
+  },
+  "peerDependencies": {
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
   }
 }

rollup.config.js

@@ -0,0 +1,48 @@
+import babel from "rollup-plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import size from "rollup-plugin-size";
+import externalDeps from "rollup-plugin-peer-deps-external";
+import resolve from "rollup-plugin-node-resolve";
+import commonJS from "rollup-plugin-commonjs";
+import visualizer from "rollup-plugin-visualizer";
+import replace from "@rollup/plugin-replace";
+
+const external = ["react", "react-dom"];
+
+const globals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+};
+
+const inputSrc = "src/index.ts";
+
+const extensions = [".js", ".jsx", ".es6", ".es", ".mjs", ".ts", ".tsx"];
+const babelConfig = { extensions, runtimeHelpers: true };
+const resolveConfig = { extensions, preferBuiltins: true };
+
+export default [
+  {
+    input: inputSrc,
+    output: {
+      name: "Renderless Components",
+      file: "dist/renderless-components.production.min.js",
+      format: "umd",
+      sourcemap: true,
+      globals,
+    },
+    external,
+    plugins: [
+      replace({ "process.env.NODE_ENV": `"production"`, delimiters: ["", ""] }),
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+      terser(),
+      size(),
+      visualizer({
+        filename: "stats-react.json",
+        json: true,
+      }),
+    ],
+  },
+];