Refactored build infrastructure (#68)

Author: Andarist

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "stage-2", "react", "flow"]
+  "presets": ["./.babelrc.js"]
 }

.babelrc.js

@@ -0,0 +1,12 @@
+const { NODE_ENV, BABEL_ENV } = process.env
+const modules = BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false
+const loose = true
+
+module.exports = {
+  presets: [
+    ["env", { modules, loose, targets: { uglify: true } }],
+    'stage-2',
+    'react',
+    'flow',
+  ]
+}

.npmignore

@@ -1,30 +1,41 @@
 {
   "name": "react-content-loader",
   "version": "2.0.0",
-  "description":
-    "React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.",
+  "description": "React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.",
   "repository": {
     "type": "git",
     "url": "https://github.com/danilowoz/react-content-loader"
   },
   "author": "Danilo Woznica",
   "license": "MIT",
-  "jsnext:main": "index",
+  "main": "dist/react-content-loader.cjs.js",
+  "module": "dist/react-content-loader.es.js",
+  "jsnext:main": "dist/react-content-loader.es.js",
   "bugs": {
     "url": "https://github.com/danilowoz/react-content-loader/issues"
   },
   "homepage": "https://github.com/danilowoz/react-content-loader",
-  "keywords": ["react", "facebook-style", "loader", "loading", "content", "svg"],
+  "keywords": [
+    "react",
+    "facebook-style",
+    "loader",
+    "loading",
+    "content",
+    "svg"
+  ],
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "options": {
     "mocha": "--require scripts/mocha_runner ./tests/**/*.js ./tests/*.js"
   },
   "scripts": {
-    "watch":
-      "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
-    "build": "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
+    "watch": "npm run build -- --watch",
+    "build": "rollup -c",
     "lint": "eslint 'src/**/*.js'",
     "prettier": "prettier --write 'src/**/*.{js,jsx,json,css}'",
-    "testonly": "mocha $npm_package_options_mocha",
+    "testonly": "cross-env NODE_ENV=test mocha $npm_package_options_mocha",
     "test": "npm run lint && npm run testonly && npm run flow",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "storybook": "start-storybook -p 6006",
@@ -34,17 +45,18 @@
   },
   "devDependencies": {
     "@storybook/react": "^3.1.9",
-    "babel-cli": "^6.6.4",
     "babel-core": "^6.7.4",
     "babel-eslint": "^8.0.2",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
     "babel-polyfill": "^6.7.4",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
     "chai": "^4.1.2",
     "chai-enzyme": "^1.0.0-beta.0",
+    "cross-env": "^5.1.3",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "^4.12.0",
@@ -61,13 +73,14 @@
     "react": "^16.1.1",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^16.1.1",
-    "sinon": "^4.1.2",
-    "uuid": "^3.0.1"
+    "rollup": "0.53",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "sinon": "^4.1.2"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"
   },
-  "dependencies": {
-    "babel-runtime": "^6.6.1"
-  }
+  "dependencies": {}
 }

index.js

@@ -0,0 +1,92 @@
+import babel from 'rollup-plugin-babel'
+import replace from 'rollup-plugin-replace'
+import uglify from 'rollup-plugin-uglify'
+import pkg from './package.json'
+
+const mergeAll = (objs) => Object.assign({}, ...objs)
+
+const commonPlugins = [
+  babel({
+    exclude: 'node_modules/**',
+    plugins: ['external-helpers']
+  }),
+]
+
+const configBase = {
+  input: 'src/index.js',
+  output: {
+    exports: 'named'
+  },
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {})
+  ],
+  plugins: commonPlugins
+}
+
+const umdConfig = mergeAll([
+  configBase,
+  {
+    output: mergeAll([
+      configBase.output,
+      {
+        file: `dist/${pkg.name}.js`,
+        format: 'umd',
+        name: 'ContentLoader',
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        },
+
+      }
+    ]),
+    external: Object.keys(pkg.peerDependencies || {})
+  }
+])
+
+const devUmdConfig = mergeAll([
+  umdConfig,
+  {
+    plugins: umdConfig.plugins.concat(
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('development')
+      })
+    )
+  }
+])
+
+const prodUmdConfig = mergeAll([
+  umdConfig,
+  {
+    output: mergeAll([
+      umdConfig.output,
+      { file: umdConfig.output.file.replace(/\.js$/, '.min.js') }
+    ])
+  },
+  {
+    plugins: umdConfig.plugins.concat(
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production')
+      }),
+      uglify({
+        compress: {
+          pure_getters: true,
+          unsafe: true,
+          unsafe_comps: true,
+        }
+      })
+    )
+  }
+])
+
+const webConfig = mergeAll([
+  configBase,
+  {
+    output: [
+      mergeAll([configBase.output, { file: pkg.module, format: 'es' }]),
+      mergeAll([configBase.output, { file: pkg.main, format: 'cjs' }])
+    ]
+  }
+])
+
+export default [devUmdConfig, prodUmdConfig, webConfig]

package.json

@@ -1,6 +1,6 @@
 //@flow
 import * as React from 'react'
-import uuid from 'uuid'
+import uid from './uid'
 
 import type { Props as ContentLoaderProps } from './index'
 
@@ -9,8 +9,8 @@ export type WrapProps = {
 } & ContentLoaderProps
 
 const Wrap = (props: WrapProps): React.Element<*> => {
-  let idClip = uuid.v1()
-  let idGradient = uuid.v1()
+  let idClip = uid()
+  let idGradient = uid()
 
   return (
     <svg

rollup.config.js

@@ -0,0 +1,2 @@
+// @flow
+export default (): string => Math.random().toString(36).substring(2)