Update dependencies in Master (#480)

* `postcss` updated * HMR enabled for CSS * `mini-css-extract-plugin` replaces `extract-text-webpack-plugin` * `webpack` updated to v4 * Babel upgraded to v7 * other packages updated * Calypso codemods ran `calypso-codemods commonjs-imports,commonjs-exports ./src ./examples`. So now ES6 styled exports/imports are used throughout the code base (except for 1 or 2 edge cases)
schrodinger · Sep 18, 2019 · f0b485e · f0b485e
1 parent d14bbdd
commit f0b485e
Show file tree

Hide file tree

Showing 82 changed files with 5,099 additions and 3,016 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,9 +1,13 @@
 {
   "plugins": [
-    "transform-object-rest-spread",
-    "transform-object-assign",
-    "transform-class-properties",
+    ["@babel/plugin-transform-flow-strip-types", {"requireDirective": true}],
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-object-assign",
+    "@babel/plugin-proposal-class-properties",
     "syntax-trailing-function-commas"
   ],
-  "presets": ["es2015", "react"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
 }
diff --git a/build_helpers/buildNPMInternals.sh b/build_helpers/buildNPMInternals.sh
@@ -5,16 +5,16 @@
 var glob = require('glob');
 var path = require('path');
 var fs = require('fs');
-var babel = require('babel-core');
+var babel = require('@babel/core');
 
 var internalPath = path.join(__dirname, '../internal');
 if (!fs.existsSync(internalPath)) {
   fs.mkdirSync(internalPath);
 }
 
 var providesModuleRegex = /@providesModule ([^\s*]+)/;
-var moduleRequireRegex = /=\s+require\((?:'|")([\w\.\/]+)(?:'|")\);/gm;
-var excludePathRegex = /^react($|\/)/;
+var moduleRequireRegex = /require\((?:'|")([\w\.\/]+)(?:'|")\)/gm;
+var excludePathRegex = /^(react|lodash|redux|reselect)($|\/)/;
 var findDEVRegex = /__DEV__/g;
 
 function replaceRequirePath(match, modulePath) {
@@ -24,7 +24,7 @@ function replaceRequirePath(match, modulePath) {
     path = './' + path;
   }
 
-  return '= require(\'' + path + '\');';
+  return 'require(\'' + path + '\')';
 }
 
 var babelConf = JSON.parse(
@@ -45,4 +45,4 @@ function processFile(fileName) {
   }
 }
 
-glob.sync(path.join(__dirname, '../src/**/*.js')).forEach(processFile);
+glob.sync(path.join(__dirname, '../src/**/*.js')).forEach(processFile);
diff --git a/build_helpers/cssTransformLoader.js b/build_helpers/cssTransformLoader.js
@@ -15,10 +15,18 @@ function slashTransform(content) {
 
 module.exports = function(content) {
   content = slashTransform(content);
-  content = postcss()
-    .use(customProperties({variables: cssVars.CSS_VARS}))
-    .use(autoPrefixer())
-    .process(content).css;
+  var asyncCallback = this.async();
 
-  return content;
+  postcss([
+    customProperties({ variables: cssVars.CSS_VARS }),
+    autoPrefixer()
+  ])
+    .process(content, {
+      from: undefined,
+      to: undefined,
+      map: { inline: false },
+    })
+    .then(function(output) {
+      asyncCallback(null, output);
+    })
 };
diff --git a/examples/ColumnGroupsExample.js b/examples/ColumnGroupsExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell } = require('./helpers/cells');
-const { Table, Column, ColumnGroup, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell } from './helpers/cells';
+import { Table, Column, ColumnGroup, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class ColumnGroupsExample extends React.Component {
   constructor(props) {
@@ -70,4 +70,4 @@ class ColumnGroupsExample extends React.Component {
   }
 }
 
-module.exports = ColumnGroupsExample;
+export default ColumnGroupsExample;
diff --git a/examples/ContextExample.js b/examples/ContextExample.js
@@ -230,4 +230,4 @@ class ContextExample extends React.Component {
   }
 }
 
-module.exports = ContextExample;
+export default ContextExample;
diff --git a/examples/ExpandedExample.js b/examples/ExpandedExample.js
@@ -4,11 +4,11 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { CollapseCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
-const {StyleSheet, css} = require('aphrodite');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { CollapseCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
+import { StyleSheet, css } from 'aphrodite';
 
 class ExpandedExample extends React.Component {
   constructor(props) {
@@ -133,4 +133,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = ExpandedExample;
+export default ExpandedExample;
diff --git a/examples/FilterExample.js b/examples/FilterExample.js
@@ -4,11 +4,11 @@
 
 "use strict";
 
-const ExampleImage = require('./helpers/ExampleImage');
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { ImageCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import ExampleImage from './helpers/ExampleImage';
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { ImageCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class DataListWrapper {
   constructor(indexMap, data) {
@@ -121,4 +121,4 @@ class FilterExample extends React.Component {
   }
 }
 
-module.exports = FilterExample;
+export default FilterExample;
diff --git a/examples/FixedRightColumnsExample.js b/examples/FixedRightColumnsExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { DateCell, ImageCell, LinkCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { DateCell, ImageCell, LinkCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class FixedRightColumnsExample extends React.Component {
   constructor(props) {
@@ -83,4 +83,4 @@ class FixedRightColumnsExample extends React.Component {
   }
 }
 
-module.exports = FixedRightColumnsExample;
+export default FixedRightColumnsExample;
diff --git a/examples/FlexGrowExample.js b/examples/FlexGrowExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell, ColoredTextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell, ColoredTextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class FlexGrowExample extends React.Component {
   constructor(props) {
@@ -60,4 +60,4 @@ class FlexGrowExample extends React.Component {
   }
 }
 
-module.exports = FlexGrowExample;
+export default FlexGrowExample;
diff --git a/examples/HideColumnExample.js b/examples/HideColumnExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { ColoredTextCell, RemovableHeaderCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { ColoredTextCell, RemovableHeaderCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 let columnTitles = {
   'firstName': 'First Name',
@@ -86,4 +86,4 @@ class HideColumnExample extends React.Component {
   }
 }
 
-module.exports = HideColumnExample;
+export default HideColumnExample;
diff --git a/examples/InfiniteScrollExample.js b/examples/InfiniteScrollExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { PagedCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { PagedCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class PagedData {
   constructor(callback) {
@@ -124,4 +124,4 @@ class InfiniteScrollExample extends React.Component {
   }
 }
 
-module.exports = InfiniteScrollExample;
+export default InfiniteScrollExample;
diff --git a/examples/LongClickExample.js b/examples/LongClickExample.js
@@ -4,10 +4,10 @@
 
 'use strict';
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class LongClickExample extends React.Component {
 
@@ -102,4 +102,4 @@ class LongClickExample extends React.Component {
   }
 }
 
-module.exports = LongClickExample;
+export default LongClickExample;
diff --git a/examples/ObjectDataExample.js b/examples/ObjectDataExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { DateCell, ImageCell, LinkCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { DateCell, ImageCell, LinkCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class ObjectDataExample extends React.Component {
   constructor(props) {
@@ -83,4 +83,4 @@ class ObjectDataExample extends React.Component {
   }
 }
 
-module.exports = ObjectDataExample;
+export default ObjectDataExample;
diff --git a/examples/ReorderExample.js b/examples/ReorderExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 var columnTitles = {
   'firstName': 'First Name',
@@ -105,4 +105,4 @@ class ReorderExample extends React.Component {
   }
 }
 
-module.exports = ReorderExample;
+export default ReorderExample;
diff --git a/examples/ResizeExample.js b/examples/ResizeExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class ResizeExample extends React.Component {
   constructor(props) {
@@ -84,4 +84,4 @@ class ResizeExample extends React.Component {
   }
 }
 
-module.exports = ResizeExample;
+export default ResizeExample;
diff --git a/examples/ResponsiveExample.js b/examples/ResponsiveExample.js
@@ -4,11 +4,11 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
-const Dimensions = require('react-dimensions');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
+import Dimensions from 'react-dimensions';
 
 class ResponsiveExample extends React.Component {
   constructor(props) {
@@ -58,7 +58,7 @@ class ResponsiveExample extends React.Component {
 
 // See react-dimensions for the best way to configure
 // https://github.com/digidem/react-dimensions
-module.exports = Dimensions({
+export default Dimensions({
   getHeight: function(element) {
     return window.innerHeight - 200;
   },

diff --git a/examples/ScrollToColumnExample.js b/examples/ScrollToColumnExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { ImageCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { ImageCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class ScrollToColumnExample extends React.Component {
   constructor(props) {
@@ -117,4 +117,4 @@ class ScrollToColumnExample extends React.Component {
   }
 }
 
-module.exports = ScrollToColumnExample;
+export default ScrollToColumnExample;
diff --git a/examples/ScrollToRowExample.js b/examples/ScrollToRowExample.js
@@ -4,10 +4,10 @@
 
 "use strict";
 
-const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
-const { ImageCell, TextCell } = require('./helpers/cells');
-const { Table, Column, Cell } = require('fixed-data-table-2');
-const React = require('react');
+import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
+import { ImageCell, TextCell } from './helpers/cells';
+import { Table, Column, Cell } from 'fixed-data-table-2';
+import React from 'react';
 
 class ScrollToRowExample extends React.Component {
   constructor(props) {
@@ -157,4 +157,4 @@ class ScrollToRowExample extends React.Component {
   }
 }
 
-module.exports = ScrollToRowExample;
+export default ScrollToRowExample;