Merge pull request #1553 from wdh2100/babel/add-core-js@3

Implement bundle with babel core-js@3

Author: wdh2100

.babelrc

@@ -1,21 +1,53 @@
 {
   "env": {
     "test": {
-      "plugins": ["istanbul"]
+      "plugins": [
+        "istanbul"
+      ]
     }
   },
   "presets": [
-    "@babel/react",
-    ["@babel/env", {
-      "targets": {
-        "browsers": ["> 1%", "iOS >= 8", "Android >= 4"],
-        "node": "6.10"
-      },
-      "debug": false
-    }]
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "ie >= 11",
+            "> 1%",
+            "iOS >= 8",
+            "Android >= 4"
+          ],
+          "node": "6.10"
+        },
+        "useBuiltIns": "usage",
+        "debug": false,
+        "modules": false,
+        "corejs": {
+          "version": 3,
+          "proposals": true
+        }
+      }
+    ],
+    [
+      "@babel/preset-react"
+    ]
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    [
+      "@babel/plugin-proposal-class-properties"
+    ],
+    [
+      "@babel/plugin-proposal-object-rest-spread"
+    ],
+    [
+      "@babel/plugin-transform-async-to-generator"
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 3,
+        "regenerator": true
+      }
+    ]
   ]
 }

.eslintrc

@@ -1,11 +1,18 @@
 {
   "parser": "babel-eslint",
   "settings": {
-    "import/extensions": [".js"],
+    "react": {
+      "version": "latest"
+    },
+    "import/extensions": [
+      ".js"
+    ],
     "import/parser": "babel-eslint",
     "import/resolver": {
       "node": {
-        "extensions": [".js"]
+        "extensions": [
+          ".js"
+        ]
       },
       "webpack": {
         "config": "webpack.config.js"
@@ -19,7 +26,7 @@
     "ecmaFeatures": {
       "jsx": true,
       "experimentalObjectRestSpread": true
-    },
+    }
   },
   "env": {
     "es6": true,
@@ -28,7 +35,7 @@
     "node": true
   },
   "extends": [
-   "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended"
   ],
   "rules": {
     "no-console": "off",
@@ -41,9 +48,12 @@
     "react/jsx-no-duplicate-props": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "jsx-a11y/no-autofocus": [ 2, {
-      "ignoreNonDOM": true
-    }]
+    "jsx-a11y/no-autofocus": [
+      2,
+      {
+        "ignoreNonDOM": true
+      }
+    ]
   },
   "plugins": [
     "import",

examples/Router/index.js

@@ -1,54 +1,62 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {HashRouter as Router, Route, Switch} from 'react-router-dom';
-import {withStyles} from "@material-ui/core/styles/index";
-import ExamplesGrid from "./ExamplesGrid";
-import examples from "../examples";
-import Button from "@material-ui/core/Button";
-import {withRouter} from 'react-router-dom';
+import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { withStyles } from '@material-ui/core/styles/index';
+import ExamplesGrid from './ExamplesGrid';
+import examples from '../examples';
+import Button from '@material-ui/core/Button';
+import { withRouter } from 'react-router-dom';
 
 const styles = {
-    root: {
-        display: 'flex',
-        justifyContent: 'center',
-    },
-    contentWrapper: {
-        width: '100%',
-    },
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  contentWrapper: {
+    width: '100%',
+  },
 };
 
 class Examples extends React.Component {
+  returnHome = () => {
+    this.props.history.push('/');
+  };
 
-    returnHome = () => {
-        this.props.history.push('/');
-    };
-
-    render() {
-        const {classes} = this.props;
-
-        var returnHomeStyle = {padding:'0px', margin:'20px 0 20px 0'};
-
-        return <main className={classes.root}>
-            <div className={classes.contentWrapper}>
-                <Switch>
-                    <Route path="/" exact render={() => <ExamplesGrid examples={examples}/>}/>
-                    {Object.keys(examples).map((label, index) => (
-                        <Route key={index} path={`/${label.replace(/\s+/g, '-').toLowerCase()}`} exact component={examples[label]}/>
-                    ))}
-                </Switch>
-                <div>
-                    {this.props.location.pathname !== '/' && (
-                      <div style={returnHomeStyle}>
-                        <Button color="primary" onClick={this.returnHome}>Back to Example Index</Button>
-                      </div>
-                    )}
-                </div>
-            </div>
-        </main>;
-    }
+  render() {
+    const { classes } = this.props;
+
+    var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
+
+    return (
+      <main className={classes.root}>
+        <div className={classes.contentWrapper}>
+          <Switch>
+            <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
+            {Object.keys(examples).map((label, index) => (
+              <Route
+                key={index}
+                path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
+                exact
+                component={examples[label]}
+              />
+            ))}
+          </Switch>
+          <div>
+            {this.props.location.pathname !== '/' && (
+              <div style={returnHomeStyle}>
+                <Button color="primary" onClick={this.returnHome}>
+                  Back to Example Index
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    );
+  }
 }
 
-const StyledExamples = withRouter( withStyles(styles)(Examples) );
+const StyledExamples = withRouter(withStyles(styles)(Examples));
 
 function App() {
   return (
@@ -58,4 +66,4 @@ function App() {
   );
 }
 
-ReactDOM.render(<App/>, document.getElementById('app-root'));
+ReactDOM.render(<App />, document.getElementById('app-root'));