fix: fix rollup build (#73)

* fix: fix rollup build

* perf: enable loose mode (reduce build size)

.gitignore

@@ -3,3 +3,4 @@ dist/
 docs/
 node_modules/
 .DS_Store
+.size-snapshot.json

.npmignore

@@ -1,3 +1,3 @@
-.docz/
-src/
-node_modules/
+/*
+!/dist/*.js
+*.test.js

babel.config.js

@@ -4,16 +4,10 @@ module.exports = {
       plugins: ['@babel/plugin-transform-modules-commonjs']
     }
   },
-  presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
+  presets: [['@babel/preset-env', { modules: false, loose: true }], '@babel/preset-react'],
   plugins: [
     ['transform-react-remove-prop-types', { removeImport: true }],
-    [
-      'styled-components',
-      {
-        ssr: true,
-        displayName: true
-      }
-    ],
-    '@babel/plugin-proposal-class-properties'
+    ['styled-components', { ssr: true, displayName: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }]
   ]
 }

package.json

@@ -2,8 +2,8 @@
   "name": "welcome-ui",
   "version": "0.6.0",
   "description": "A delightful UI system from Welcome to the Jungle",
-  "main": "dist/cjs/welcome-ui.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/welcome-ui.cjs.js",
+  "module": "dist/welcome-ui.es.js",
   "scripts": {
     "start": "yarn docz:dev",
     "icons": "yarn icons:optimize && yarn icons:collect",
@@ -23,10 +23,6 @@
     "now-build": "yarn docz:build",
     "phoenix": "rm -rf node_modules && yarn cache clean && yarn"
   },
-  "files": [
-    "dist/esm/*",
-    "dist/cjs/*"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WTTJ/welcome-ui.git"
@@ -50,12 +46,14 @@
     "@babel/core": "=7.4.3",
     "@babel/plugin-proposal-class-properties": "=7.4.0",
     "@babel/plugin-transform-modules-commonjs": "=7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "=7.4.3",
     "@babel/preset-react": "=7.0.0",
     "@emotion/core": "^10.0.9",
     "@testing-library/react": "^8.0.1",
     "babel-eslint": "=10.0.1",
     "babel-jest": "=24.7.1",
+    "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-transform-react-remove-prop-types": "=0.4.24",
     "css-loader": "=2.1.1",
     "docz": "1.2.0",
@@ -80,14 +78,14 @@
     "react-router-dom": "4.2.2",
     "rollup": "=1.12.4",
     "rollup-plugin-babel": "=4.3.2",
-    "rollup-plugin-commonjs": "=10.0.0",
-    "rollup-plugin-node-resolve": "=4.2.3",
+    "rollup-plugin-node-resolve": "^5.0.1",
     "rollup-plugin-postcss": "=2.0.3",
-    "rollup-plugin-terser": "=4.0.4",
+    "rollup-plugin-size-snapshot": "^0.9.0",
     "style-loader": "=0.23.1",
     "svgo": "=1.2.2"
   },
   "dependencies": {
+    "@babel/runtime": "^7.4.5",
     "@xstyled/system": "^1.2.0",
     "lodash.concat": "^4.5.0",
     "lodash.get": "^4.4.2",
@@ -101,7 +99,7 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-router-dom": "^4.2.0"
+    "react-final-form": "^6.0.0"
   },
   "resolutions": {
     "docz/**/webpack": "4.31.0"

rollup.config.js

@@ -1,54 +1,44 @@
-import { terser } from 'rollup-plugin-terser'
 import babel from 'rollup-plugin-babel'
-import resolve from 'rollup-plugin-node-resolve'
+import nodeResolve from 'rollup-plugin-node-resolve'
 import postcss from 'rollup-plugin-postcss'
-import commonjs from 'rollup-plugin-commonjs'
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 
-const base = {
-  input: 'src/index.js',
-  external: [
-    'react',
-    'react-dom',
-    'react-router-dom',
-    'prop-types',
-    'styled-components',
-    'lodash.merge',
-    'lodash.get',
-    'lodash.concat'
+import pkg from './package.json'
+
+const input = 'src/index.js'
+const external = id => !id.startsWith('.') && !id.startsWith('/')
+const getBabelOptions = ({ useESModules }) => ({
+  exclude: '**/node_modules/**',
+  runtimeHelpers: true,
+  configFile: './babel.config.js',
+  plugins: [
+    'babel-plugin-annotate-pure-calls',
+    ['@babel/plugin-transform-runtime', { useESModules }]
   ]
-}
+})
 
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'react-router-dom': 'ReactRouterDOM',
-  'styled-components': 'styled',
-  'lodash.merge': 'merge',
-  'lodash.get': 'get',
-  'lodash.concat': 'concat'
+const cjsConfig = {
+  input,
+  output: { file: pkg.main, format: 'cjs' },
+  external,
+  plugins: [
+    babel(getBabelOptions({ useESModules: false })),
+    nodeResolve(),
+    postcss(),
+    sizeSnapshot()
+  ]
 }
 
-const plugins = [babel({ exclude: 'node_modules/**' }), resolve(), commonjs(), postcss()]
+const esmConfig = {
+  input,
+  output: { file: pkg.module, format: 'esm' },
+  external,
+  plugins: [
+    babel(getBabelOptions({ useESModules: true })),
+    nodeResolve(),
+    postcss(),
+    sizeSnapshot()
+  ]
+}
 
-export default [
-  {
-    ...base,
-    plugins: [terser(), ...plugins],
-    output: {
-      globals,
-      file: 'dist/cjs/welcome-ui.js',
-      format: 'cjs',
-      name: 'JungleUI',
-      esModule: false
-    }
-  },
-  {
-    ...base,
-    plugins,
-    output: {
-      globals,
-      file: 'dist/esm/index.js',
-      format: 'esm'
-    }
-  }
-]
+export default [cjsConfig, esmConfig]