Refactor babelrc and add replace

.babelrc.js

@@ -0,0 +1,81 @@
+const env = process.env.NODE_ENV;
+const buildIgnore = [
+  '*.jest.js',
+  '*.e2e.js',
+  '*.ssr.js',
+  '*.example.js',
+  'source/demo',
+  'source/jest-*.js',
+  'source/TestUtils.js',
+];
+
+if (env === 'commonjs') {
+  module.exports = {
+    ignore: buildIgnore,
+    plugins: [
+      'transform-runtime',
+      ['flow-react-proptypes', {deadCode: true}],
+      ['transform-react-remove-prop-types', {mode: 'wrap'}],
+    ],
+    presets: ['env', 'react', 'flow', 'stage-1'],
+  };
+}
+
+if (env === 'es') {
+  module.exports = {
+    ignore: buildIgnore,
+    plugins: [
+      'transform-runtime',
+      ['flow-react-proptypes', {deadCode: true}],
+      ['transform-react-remove-prop-types', {mode: 'wrap'}],
+    ],
+    presets: [['env', {modules: false}], 'react', 'flow', 'stage-1'],
+  };
+}
+
+if (env === 'rollup') {
+  module.exports = {
+    comments: false,
+    plugins: ['external-helpers'],
+    presets: [['env', {modules: false}], 'react', 'flow', 'stage-1'],
+  };
+}
+
+if (env === 'test') {
+  module.exports = {
+    comments: false,
+    presets: ['env', 'react', 'flow', 'stage-1'],
+  };
+}
+
+if (env === 'development') {
+  module.exports = {
+    plugins: [
+      [
+        'react-transform',
+        {
+          transforms: [
+            {
+              transform: 'react-transform-hmr',
+              imports: ['react'],
+              locals: ['module'],
+            },
+            {
+              transform: 'react-transform-catch-errors',
+              imports: ['react', 'redbox-react'],
+            },
+          ],
+        },
+      ],
+    ],
+    presets: ['env', 'react', 'flow', 'stage-1'],
+  };
+}
+
+if (env === 'production') {
+  module.exports = {
+    comments: false,
+    plugins: ['transform-runtime'],
+    presets: [['env', {modules: false}], 'react', 'flow', 'stage-1'],
+  };
+}

package.json

@@ -16,7 +16,7 @@
     "build:css": "postcss source/styles.css -o styles.css --use autoprefixer",
     "build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail",
     "build:es": "npm run clean:es && npm run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es",
-    "build:umd": "npm run clean:umd && cross-env NODE_ENV=production rollup -c",
+    "build:umd": "npm run clean:umd && cross-env NODE_ENV=rollup rollup -c",
     "check-all": "yarn prettier && yarn lint && yarn flow",
     "ci-check": "yarn prettier:diff && yarn lint && yarn flow",
     "clean": "npm run clean:commonjs && npm run clean:demo && npm run clean:es && npm run clean:umd",
@@ -67,6 +67,11 @@
   "bugs": {
     "url": "https://github.com/bvaughn/react-virtualized/issues"
   },
+  "babel": {
+    "presets": [
+      "./.babelrc.js"
+    ]
+  },
   "jest": {
     "globalSetup": "./source/jest-global-setup.js",
     "globalTeardown": "./source/jest-global-teardown.js",
@@ -97,6 +102,7 @@
     "babel-eslint": "^8.1.2",
     "babel-jest": "^22.0.4",
     "babel-loader": "7.1.2",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-flow-react-proptypes": "^16.0.0",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
@@ -152,6 +158,7 @@
     "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
     "style-loader": "^0.19.1",
     "watch": "^1.0.2",

rollup.config.js

@@ -1,6 +1,7 @@
 import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
+import replace from 'rollup-plugin-replace';
 import uglify from 'rollup-plugin-uglify';
 
 export default {
@@ -22,7 +23,9 @@ export default {
     }),
     babel({
       exclude: 'node_modules/**',
-      runtimeHelpers: true,
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development'),
     }),
     uglify({
       mangle: false,

source/Collection/Collection.js

@@ -1,6 +1,6 @@
 /** @flow */
 import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import * as React from 'react';
 import CollectionView from './CollectionView';
 import calculateSizeAndPositionData from './utils/calculateSizeAndPositionData';
 import getUpdatedOffsetForIndex from '../utils/getUpdatedOffsetForIndex';
@@ -10,7 +10,7 @@ import type {ScrollPosition, SizeInfo} from './types';
  * Renders scattered or non-linear data.
  * Unlike Grid, which renders checkerboard data, Collection can render arbitrarily positioned- even overlapping- data.
  */
-export default class Collection extends PureComponent {
+export default class Collection extends React.PureComponent {
   static propTypes = {
     'aria-label': PropTypes.string,
 

source/Collection/CollectionView.js

@@ -1,6 +1,6 @@
 /** @flow */
 import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import * as React from 'react';
 import cn from 'classnames';
 import createCallbackMemoizer from '../utils/createCallbackMemoizer';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
@@ -26,7 +26,7 @@ const SCROLL_POSITION_CHANGE_REASONS = {
  * Monitors changes in properties (eg. cellCount) and state (eg. scroll offsets) to determine when rendering needs to occur.
  * This component does not render any visible content itself; it defers to the specified :cellLayoutManager.
  */
-export default class CollectionView extends PureComponent {
+export default class CollectionView extends React.PureComponent {
   static propTypes = {
     'aria-label': PropTypes.string,
 

source/Masonry/Masonry.js

@@ -1,5 +1,5 @@
 /** @flow */
-import React, {PureComponent} from 'react';
+import * as React from 'react';
 import cn from 'classnames';
 import PositionCache from './PositionCache';
 import {
@@ -65,7 +65,7 @@ export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
  *   The left position of all items within a column must align.
  *   (Items may not span multiple columns.)
  */
-export default class Masonry extends PureComponent<Props> {
+export default class Masonry extends React.PureComponent<Props> {
   static defaultProps = {
     autoHeight: false,
     keyMapper: identity,

source/MultiGrid/MultiGrid.js

@@ -1,6 +1,6 @@
 /** @flow */
 import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import * as React from 'react';
 import CellMeasurerCacheDecorator from './CellMeasurerCacheDecorator';
 import Grid from '../Grid';
 
@@ -13,7 +13,7 @@ const SCROLLBAR_SIZE_BUFFER = 20;
  * If no sticky columns, only 1 sticky header Grid will be rendered.
  * If sticky columns, 2 sticky header Grids will be rendered.
  */
-export default class MultiGrid extends PureComponent {
+export default class MultiGrid extends React.PureComponent {
   static propTypes = {
     classNameBottomLeftGrid: PropTypes.string.isRequired,
     classNameBottomRightGrid: PropTypes.string.isRequired,

source/Table/SortIndicator.js

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import SortDirection from './SortDirection';
 
 /**

source/Table/Table.js

@@ -5,7 +5,7 @@ import type {CellPosition} from '../Grid';
 import cn from 'classnames';
 import Column from './Column';
 import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import * as React from 'react';
 import {findDOMNode} from 'react-dom';
 import Grid, {accessibilityOverscanIndicesGetter} from '../Grid';
 
@@ -17,7 +17,7 @@ import SortDirection from './SortDirection';
  * Table component with fixed headers and virtualized rows for improved performance with large data sets.
  * This component expects explicit width, height, and padding parameters.
  */
-export default class Table extends PureComponent {
+export default class Table extends React.PureComponent {
   static propTypes = {
     'aria-label': PropTypes.string,
 

source/Table/defaultHeaderRenderer.js

@@ -1,5 +1,5 @@
 /** @flow */
-import React from 'react';
+import * as React from 'react';
 import SortIndicator from './SortIndicator';
 import type {HeaderRendererParams} from './types';
 

source/Table/defaultHeaderRowRenderer.js

@@ -1,5 +1,5 @@
 /** @flow */
-import React from 'react';
+import * as React from 'react';
 import type {HeaderRowRendererParams} from './types';
 
 export default function defaultHeaderRowRenderer({

source/Table/defaultRowRenderer.js

@@ -1,5 +1,5 @@
 /** @flow */
-import React from 'react';
+import * as React from 'react';
 import type {RowRendererParams} from './types';
 
 /**

source/WindowScroller/WindowScroller.e2e.js

@@ -7,13 +7,18 @@ const bootstrap = async () => {
   const scripts = [
     './node_modules/react/umd/react.development.js',
     './node_modules/react-dom/umd/react-dom.development.js',
+    './node_modules/prop-types/prop-types.js',
     './dist/umd/react-virtualized.js',
   ];
 
   for (const path of scripts) {
     await page.addScriptTag({path});
   }
 
+  page.on('console', msg =>
+    msg.args().forEach(arg => console.log(arg.toString())),
+  );
+
   return page;
 };
 

source/WindowScroller/WindowScroller.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import {
   registerScrollListener,
   unregisterScrollListener,