feat(all): better tree shaking

bigcommerce · Nov 12, 2019 · c0998a7 · c0998a7
1 parent 721891c
commit c0998a7
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 331 deletions.
diff --git a/packages/big-design-icons/package.json b/packages/big-design-icons/package.json
@@ -3,8 +3,8 @@
   "version": "0.5.0",
   "private": false,
   "sideEffects": false,
-  "main": "dist/big-design-icons.cjs.js",
-  "module": "dist/big-design-icons.es.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "typings": "dist/index.d.ts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "BigCommerce Inc",
@@ -14,8 +14,9 @@
     "directory": "packages/big-design-icons"
   },
   "scripts": {
-    "build": "yarn run build:js && yarn run build:dt",
-    "build:js": "rollup -c rollup.config.js",
+    "build": "yarn run build:cjs && yarn run build:es && yarn run build:dt",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/cjs",
+    "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
     "build:dt": "tsc --emitDeclarationOnly",
     "build:icons": "node scripts/build.js",
     "download": "node scripts/downloader.js",
@@ -50,8 +51,12 @@
     "styled-components": "^4.3.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.0",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
@@ -74,11 +79,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
-    "rollup-plugin-babel": "4.2.0",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.1.0",
     "styled-components": "^4.3.0",
     "tslint": "^5.14.0",
     "typescript": "^3.7.2",

diff --git a/packages/big-design-icons/rollup.config.js b/packages/big-design-icons/rollup.config.js
diff --git a/packages/big-design-theme/package.json b/packages/big-design-theme/package.json
@@ -3,8 +3,8 @@
   "version": "0.3.0",
   "private": false,
   "sideEffects": false,
-  "main": "dist/big-design-theme.cjs.js",
-  "module": "dist/big-design-theme.es.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "typings": "dist/index.d.ts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "BigCommerce Inc",
@@ -14,8 +14,9 @@
     "directory": "packages/big-design-theme"
   },
   "scripts": {
-    "build": "yarn run build:js && yarn run build:dt",
-    "build:js": "rollup -c rollup.config.js",
+    "build": "yarn run build:cjs && yarn run build:es && yarn run build:dt",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/cjs",
+    "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
     "build:dt": "tsc --emitDeclarationOnly",
     "ci": "yarn run lint && yarn run test && yarn run build",
     "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
@@ -24,8 +25,8 @@
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
     "precommit": "lint-staged",
     "prepublishOnly": "rimraf dist && yarn run ci",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "test": "BABEL_ENV=test jest",
+    "test:watch": "yarn run test --watch"
   },
   "files": [
     "dist"
@@ -49,10 +50,15 @@
     "styled-components": "^4.3.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.0",
     "@bigcommerce/configs": "^0.8.0",
     "@types/jest": "^24.0.16",
     "@types/styled-components": "^4.1.12",
@@ -63,11 +69,6 @@
     "lint-staged": "^9.2.0",
     "prettier": "^1.16.4",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
-    "rollup-plugin-babel": "4.2.0",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.1.0",
     "styled-components": "^4.3.0",
     "tslint": "^5.14.0",
     "typescript": "^3.7.2",

diff --git a/packages/big-design-theme/rollup.config.js b/packages/big-design-theme/rollup.config.js
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -3,8 +3,8 @@
   "version": "0.13.0",
   "private": false,
   "sideEffects": false,
-  "main": "dist/big-design.cjs.js",
-  "module": "dist/big-design.es.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "typings": "dist/src/index.d.ts",
   "author": "BigCommerce Inc",
   "repository": {
@@ -17,16 +17,17 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn run build:js && yarn run build:dt",
-    "build:js": "rollup -c rollup.config.js",
+    "build": "yarn run build:cjs && yarn run build:es && yarn run build:dt",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/cjs",
+    "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
     "build:dt": "tsc --emitDeclarationOnly",
     "ci": "yarn run lint && yarn run test && yarn run build",
     "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
     "lint:prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
-    "start": "NODE_ENV=dev concurrently \"yarn:build:* --watch\"",
-    "test": "jest",
+    "start": "concurrently \"yarn:build:* --watch\"",
+    "test": "BABEL_ENV=test jest",
     "test:watch": "yarn run test --watch",
     "precommit": "lint-staged",
     "prepublishOnly": "rimraf dist && yarn run ci"
@@ -57,9 +58,12 @@
     "styled-components": "^4.3.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.0",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.0",
@@ -81,11 +85,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
-    "rollup-plugin-babel": "4.2.0",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.1.0",
     "styled-components": "^4.3.0",
     "tslint": "^5.14.0",
     "typescript": "^3.7.2",

diff --git a/packages/big-design/rollup.config.js b/packages/big-design/rollup.config.js
diff --git a/packages/big-design/src/components/Badge/Badge.tsx b/packages/big-design/src/components/Badge/Badge.tsx
@@ -10,6 +10,4 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, Margi
   variant?: 'danger' | 'secondary' | 'success' | 'warning';
 }
 
-export const Badge: React.FC<BadgeProps> = /*#__PURE__*/ memo(({ className, style, ...props }) => (
-  <StyledBadge {...props} />
-));
+export const Badge: React.FC<BadgeProps> = memo(({ className, style, ...props }) => <StyledBadge {...props} />);
diff --git a/packages/big-design/src/components/Box/Box.tsx b/packages/big-design/src/components/Box/Box.tsx
@@ -18,4 +18,4 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, DisplayP
   theme?: ThemeInterface;
 }
 
-export const Box: React.FC<BoxProps> = /*#__PURE__*/ memo(props => <StyledBox {...props} />);
+export const Box: React.FC<BoxProps> = memo(props => <StyledBox {...props} />);
diff --git a/packages/configs/babel/babel.config.js b/packages/configs/babel/babel.config.js
@@ -1,21 +1,41 @@
-const env = process.env.NODE_ENV || 'production';
-const isTestEnv = env === 'test';
+const BABEL_ENV = process.env.BABEL_ENV;
+
+const defaultPlugins = [
+  ['babel-plugin-styled-components', { pure: true }],
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-object-rest-spread',
+  // IE 11 support
+  '@babel/plugin-transform-object-assign'
+];
 
 module.exports = {
   presets: [
     [
       '@babel/preset-env',
       {
-        targets: isTestEnv ? { node: 'current' } : { browsers: 'defaults' },
-        modules: isTestEnv ? 'auto' : false
+        modules: ['cjs', 'test'].includes(BABEL_ENV) ? 'commonjs' : false,
+        targets:
+          BABEL_ENV === 'test' ? { node: 'current' } : { browsers: 'defaults' }
       }
     ],
     '@babel/preset-typescript',
     '@babel/preset-react'
   ],
-  plugins: [
-    ['babel-plugin-styled-components', { pure: true }],
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread'
-  ]
+  env: {
+    cjs: {
+      plugins: defaultPlugins,
+      ignore: ['**/spec.ts', '**/spec.tsx', '**/*.spec.ts', '**/*.spec.tsx']
+    },
+    es: {
+      plugins: [
+        ...defaultPlugins,
+        ['@babel/plugin-transform-runtime', { useESModules: true }]
+      ],
+      ignore: ['**/spec.ts', '**/spec.tsx', '**/*.spec.ts', '**/*.spec.tsx']
+    },
+    test: {
+      plugins: defaultPlugins,
+      ignore: []
+    }
+  }
 };
diff --git a/packages/configs/rollup/package.json b/packages/configs/rollup/package.json
diff --git a/packages/configs/rollup/rollup.config.js b/packages/configs/rollup/rollup.config.js