Merge pull request #105 from souporserious/provide-bundles

Provide cjs, esm and umd bundles instead of transpiled files

.babelrc

@@ -4,15 +4,5 @@
     "@babel/stage-3",
     "@babel/react",
     "@babel/flow"
-  ],
-  plugins: [
-    ["@babel/transform-runtime", { "polyfill": false }]
-  ],
-  "env": {
-    "cjs": {
-      "plugins": [
-        "@babel/transform-modules-commonjs"
-      ]
-    }
-  }
+  ]
 }

.gitignore

@@ -8,9 +8,7 @@
 # APP
 node_modules
 npm-debug.log
-/dist/
-/lib/
-/esm/
+/dist
 /example/bundle.js
 
 # General Files

.prettierignore

@@ -1,2 +1 @@
-lib
-esm
+dist

.size-snapshot.json

@@ -0,0 +1,18 @@
+{
+  "dist/index.cjs.js": {
+    "bundled": 13110,
+    "minified": 7976,
+    "gzipped": 1867
+  },
+  "dist/index.esm.js": {
+    "bundled": 12814,
+    "minified": 7745,
+    "gzipped": 1800,
+    "treeshaked": 2886
+  },
+  "dist/index.umd.js": {
+    "bundled": 46401,
+    "minified": 14814,
+    "gzipped": 4138
+  }
+}

package.json

@@ -2,39 +2,25 @@
   "name": "react-measure",
   "version": "3.0.0-rc.3",
   "description": "Compute measurements of React components.",
-  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
   "files": [
     "dist",
-    "lib",
-    "src",
-    "esm"
+    "src"
   ],
   "scripts": {
-    "build:cjs": "del lib && cross-env NODE_ENV=cjs babel src --out-dir lib",
-    "build:esm": "del esm && babel src --out-dir esm",
-    "build:flow": "echo \"// @flow\\n\\nexport * from '../src';\" > lib/index.js.flow",
-    "build": "npm run build:esm && npm run build:cjs",
-    "postbuild": "npm run build:flow",
+    "build:code": "del dist && rollup -c",
+    "build:flow": "echo \"// @flow\\n\\nexport * from '../src';\" > dist/index.cjs.js.flow",
+    "build": "npm run build:code && npm run build:flow",
     "typecheck": "flow check --max-warnings=0",
     "lint": "prettier --list-different \"**/*.js\"",
     "deploy": "NODE_ENV=production TARGET=minify webpack && git-directory-deploy --directory example --branch gh-pages",
     "dev": "webpack-dev-server",
-    "test": "npm run typecheck && npm run lint && size-limit",
+    "test": "npm run typecheck && npm run lint",
     "prepublish": "npm run build && npm run lint",
     "start": "npm run dev",
     "precommit": "lint-staged"
   },
-  "size-limit": [
-    {
-      "path": "lib/index.js",
-      "limit": "9.6 KB"
-    },
-    {
-      "path": "esm/index.js",
-      "limit": "9.4 KB"
-    }
-  ],
   "lint-staged": {
     "*.{js,md}": [
       "prettier --write",
@@ -72,7 +58,6 @@
     "resize-observer-polyfill": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.42",
     "@babel/core": "^7.0.0-beta.42",
     "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.42",
     "@babel/plugin-transform-runtime": "^7.0.0-beta.42",
@@ -96,7 +81,10 @@
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-motion": "^0.5.2",
-    "size-limit": "^0.15.1",
+    "rollup": "^0.57.1",
+    "rollup-plugin-babel": "^4.0.0-beta.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-size-snapshot": "^0.2.1",
     "stylefire": "^1.1.9",
     "webpack": "^3.10.0",
     "webpack-dev-middleware": "^2.0.4",

rollup.config.js

@@ -0,0 +1,57 @@
+import nodeResolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
+
+const pkg = require('./package.json')
+
+const input = './src/index.js'
+
+const isExternal = id => !id.startsWith('.') && !id.startsWith('/')
+
+const getBabelOptions = ({ useESModules }) => ({
+  exclude: '**/node_modules/**',
+  runtimeHelpers: true,
+  plugins: [
+    [
+      '@babel/plugin-transform-runtime',
+      { polyfill: false, useBuiltIns: true, useESModules },
+    ],
+  ],
+})
+
+export default [
+  {
+    input,
+    output: {
+      file: 'dist/index.umd.js',
+      format: 'umd',
+      name: 'ReactMeasure',
+      globals: {
+        react: 'React',
+      },
+    },
+    external: ['react'],
+    plugins: [
+      nodeResolve(),
+      babel(getBabelOptions({ useESModules: true })),
+      sizeSnapshot(),
+    ],
+  },
+
+  {
+    input,
+    output: { file: pkg.main, format: 'cjs' },
+    external: isExternal,
+    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
+  },
+
+  {
+    input,
+    output: { file: pkg.module, format: 'es' },
+    external: isExternal,
+    plugins: [
+      babel(getBabelOptions({ useESModules: true })),
+      sizeSnapshot({ treeshake: true }),
+    ],
+  },
+]