Tidyup build config (#1309)

* Tidyup build config - upgraded babel - upgraded rollup - fixed material-ui globals - replaced babel cli with rollup config with many entries - auto resolve named exports - skip non existent export warning - import correct (esm/cjs) babel helpers - error when material-ui global is not provided Here's generated build/esm/. Treeshaking should work fine. ``` Calendar-b9ae6101.js Calendar.js Clock-3486e4fb.js Clock.js ClockView.js DatePicker.js DateTimePicker.js Day.js Picker-429246aa.js Picker.js TimePicker.js TimePickerToolbar-e568e280.js Wrapper-12538b96.js index.js makePickerWithState-8a1dec7e.js useUtils-7fbeb79a.js ``` * Remove object-rest-spread
mui · Sep 13, 2019 · ad6314b · ad6314b
1 parent ddddbd9
commit ad6314b
Show file tree

Hide file tree

Showing 5 changed files with 314 additions and 212 deletions.
diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 103383,
-    "minified": 57000,
-    "gzipped": 15355,
+    "bundled": 97826,
+    "minified": 54733,
+    "gzipped": 15237,
     "treeshaked": {
       "rollup": {
-        "code": 46086,
-        "import_statements": 1795
+        "code": 43817,
+        "import_statements": 1794
       },
       "webpack": {
-        "code": 52521
+        "code": 50069
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 1072952,
-    "minified": 365394,
-    "gzipped": 100763
+    "bundled": 205895,
+    "minified": 78743,
+    "gzipped": 23429
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 837988,
-    "minified": 310015,
-    "gzipped": 86788
+    "bundled": 160063,
+    "minified": 67220,
+    "gzipped": 20255
   }
 }
diff --git a/lib/babel.config.js b/lib/babel.config.js
@@ -7,15 +7,9 @@ module.exports = {
   plugins: [
     'optimize-clsx',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
     ['@babel/plugin-transform-runtime'],
     // for IE 11 support
     '@babel/plugin-transform-object-assign',
     './remove-prop-types.js',
   ],
-  env: {
-    esm: {
-      plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]],
-    },
-  },
 };
diff --git a/lib/package.json b/lib/package.json
@@ -39,7 +39,7 @@
     "react-dom": "^16.8.4"
   },
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
+    "@babel/runtime": "^7.6.0",
     "@types/styled-jsx": "^2.2.8",
     "clsx": "^1.0.2",
     "react-transition-group": "^4.0.0",
@@ -62,21 +62,18 @@
     "build:copy": "node copy.js",
     "build:bundle": "rollup --config",
     "build:typescript": "tsc --project tsconfig.json",
-    "build:babel": "cross-env BABEL_ENV=esm babel ./src --extensions '.ts,.tsx' --out-dir ./build/esm",
-    "build": "npm run build:typescript && npm run build:bundle && npm run build:copy && npm run build:babel",
+    "build": "npm run build:typescript && npm run build:bundle && npm run build:copy",
     "build:analyze": "npm run build",
     "release": "yarn test && yarn version && yarn build && yarn publish --non-interactive build",
     "publish": "npm publish build"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/node": "^7.5.5",
+    "@babel/core": "^7.6.0",
+    "@babel/node": "^7.6.1",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-transform-object-assign": "^7.2.0",
-    "@babel/plugin-transform-runtime": "~7.5.5",
-    "@babel/preset-env": "^7.5.5",
+    "@babel/plugin-transform-runtime": "~7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@date-io/core": "^1.2.0",
     "@date-io/date-fns": "^1.3.0",
@@ -112,12 +109,12 @@
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "rollup": "^1.1.2",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-size-snapshot": "^0.8.0",
-    "rollup-plugin-terser": "^4.0.4",
+    "rollup": "^1.21.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-size-snapshot": "^0.10.0",
+    "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-typescript": "^1.0.0",
     "size-limit": "^0.21.1",
     "ts-jest": "^24.0.1",

diff --git a/lib/rollup.config.js b/lib/rollup.config.js
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import path from 'path';
 // @ts-ignore
 import pkg from './package.json';
@@ -9,104 +8,143 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
 
+// named exports detectors
+import propTypes from 'prop-types';
+import reactIs from 'react-is';
+
 // treat as externals not relative and not absolute paths
-const external = id => !id.startsWith('.') && !id.startsWith('/');
+const external = id => !id.startsWith('.') && !path.isAbsolute(id);
 
 const input = './src/index.ts';
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'prop-types': 'PropTypes',
+  '@material-ui/core/Button': 'material-ui.Button',
   '@material-ui/core/Icon': 'material-ui.Icon',
-  '@material-ui/core/Button/': 'material-ui/Button.',
   '@material-ui/core/IconButton': 'material-ui.IconButton',
   '@material-ui/core/InputAdornment': 'material-ui.InputAdornment',
   '@material-ui/core/TextField': 'material-ui.TextField',
-  '@material-ui/core/Button': 'material-ui.Button',
   '@material-ui/core/Dialog': 'material-ui.Dialog',
   '@material-ui/core/DialogActions': 'material-ui.DialogActions',
   '@material-ui/core/DialogContent': 'material-ui.DialogContent',
-  '@material-ui/styles/withStyles': 'material-ui.withStyles',
-  '@material-ui/styles/createStyles': 'material-ui.createStyles',
   '@material-ui/core/Toolbar': 'material-ui.Toolbar',
   '@material-ui/core/Typography': 'material-ui.Typography',
   '@material-ui/core/Popover': 'material-ui.Popover',
   '@material-ui/core/Paper': 'material-ui.Paper',
-  '@material-ui/styles/withTheme': 'material-ui.withTheme',
   '@material-ui/core/Tab': 'material-ui.Tab',
   '@material-ui/core/Tabs': 'material-ui.Tabs',
-  '@material-ui/styles': 'material-ui.styles',
   '@material-ui/core/SvgIcon': 'material-ui.SvgIcon',
-  '@material-ui/core/styles/colorManipulator': 'material-ui.styles.colorManipulator',
+  '@material-ui/core/CircularProgress': 'material-ui.CircularProgress',
+  '@material-ui/core/Grid': 'material-ui.Grid',
+  '@material-ui/core/styles': 'material-ui',
 };
 
-const extensions = ['.ts', '.tsx'];
+const extensions = ['.ts', '.tsx', '.js'];
 
-const babelOptions = {
+const getBabelOptions = ({ useESModules }) => ({
+  exclude: /node_modules/,
   runtimeHelpers: true,
   extensions,
-};
+  plugins: [['@babel/plugin-transform-runtime', { useESModules }]],
+});
 
 const commonjsOptions = {
   include: /node_modules/,
   namedExports: {
-    'react-is': ['ForwardRef'],
+    'prop-types': Object.keys(propTypes),
+    'react-is': Object.keys(reactIs),
   },
 };
 
+const onwarn = warning => {
+  // ignore imported types
+  if (warning.code === 'NON_EXISTENT_EXPORT') {
+    return;
+  }
+  throw Error(String(warning));
+};
+
 export default [
   {
     input,
     external,
+    onwarn,
     output: {
       file: 'build/dist/material-ui-pickers.js',
       format: 'cjs',
       sourcemap: true,
     },
-    plugins: [nodeResolve({ extensions }), babel(babelOptions)],
+    plugins: [nodeResolve({ extensions }), babel(getBabelOptions({ useESModules: false }))],
+  },
+
+  {
+    input: {
+      index: './src/index',
+      DatePicker: './src/DatePicker',
+      TimePicker: './src/TimePicker',
+      DateTimePicker: './src/DateTimePicker',
+      Calendar: './src/views/Calendar/Calendar',
+      Day: './src/views/Calendar/Day',
+      ClockView: './src/views/Clock/ClockView',
+      Clock: './src/views/Clock/Clock',
+      Picker: './src/Picker/Picker',
+    },
+    external,
+    onwarn,
+    output: {
+      dir: 'build/esm',
+      format: 'esm',
+      sourcemap: true,
+    },
+    plugins: [nodeResolve({ extensions }), babel(getBabelOptions({ useESModules: true }))],
   },
 
   {
     input,
     external,
+    onwarn,
     output: {
       file: 'build/dist/material-ui-pickers.esm.js',
       format: 'esm',
       sourcemap: true,
     },
     plugins: [
       nodeResolve({ extensions }),
-      babel(babelOptions),
-      replace({
-        delimiters: ['', ''],
-        values: { '/** @class */': '/*@__PURE__*/' },
-      }),
+      babel(getBabelOptions({ useESModules: true })),
       sizeSnapshot(),
     ],
   },
 
   {
     input,
     external: Object.keys(globals),
+    onwarn,
     output: {
       globals,
       format: 'umd',
       name: pkg.name,
       file: 'build/dist/material-ui-pickers.umd.js',
     },
-
     plugins: [
       nodeResolve({ extensions }),
-      babel(babelOptions),
+      babel(getBabelOptions({ useESModules: true })),
       commonjs(commonjsOptions),
       replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
       sizeSnapshot(),
+      {
+        transform(code, id) {
+          if (id.includes('@material-ui/core')) {
+            throw Error('add @material-ui/core imports to globals');
+          }
+        },
+      },
     ],
   },
 
   {
     input,
     external: Object.keys(globals),
+    onwarn,
     output: {
       globals,
       format: 'umd',
@@ -115,7 +153,7 @@ export default [
     },
     plugins: [
       nodeResolve({ extensions }),
-      babel(babelOptions),
+      babel(getBabelOptions({ useESModules: true })),
       commonjs(commonjsOptions),
       replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       sizeSnapshot(),