[core] Ship modern bundle

.browserslistrc

@@ -1,6 +1,67 @@
-ie 11
-edge >= 14
-firefox >= 52
-chrome >= 49
-safari >= 10
-node 8.0
+[modern]
+last 1 chrome version
+last 1 edge version
+last 1 firefox version
+last 1 safari version
+node 14
+
+# Default/Fallback
+# `npx browserslist --mobile-to-desktop "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"` when the last major is released.
+# #stable-snapshot
+[stable]
+and_chr 84
+and_ff 79
+and_qq 10.4
+and_uc 12.12
+android 84
+baidu 7.12
+chrome 83
+edge 83
+firefox 68
+ios_saf 12.0
+kaios 2.5
+op_mini all
+op_mob 69
+opera 69
+safari 13
+samsung 11.1
+
+# Same as `stable` but with IE 11
+[legacy]
+IE 11
+and_chr 84
+and_ff 79
+and_qq 10.4
+and_uc 12.12
+android 84
+baidu 7.12
+chrome 83
+edge 83
+firefox 68
+ios_saf 12.0
+kaios 2.5
+op_mini all
+op_mob 69
+opera 69
+safari 13
+samsung 11.1
+
+# snapshot of `npx browserslist "maintained node versions"`
+[node]
+node 10.0
+
+# same as `node`
+[coverage]
+node 10.0
+
+# same as `node`
+[development]
+node 10.0
+
+# same as `node`
+[test]
+node 10.0
+
+# same as `node`
+[benchmark]
+node 10.0

babel.config.js

@@ -3,25 +3,6 @@ const path = require('path');
 const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
 const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';
 
-let defaultPresets;
-
-// We release a ES version of Material-UI.
-// It's something that matches the latest official supported features of JavaScript.
-// Nothing more (stage-1, etc), nothing less (require, etc).
-if (process.env.BABEL_ENV === 'es') {
-  defaultPresets = [];
-} else {
-  defaultPresets = [
-    [
-      '@babel/preset-env',
-      {
-        bugfixes: true,
-        modules: ['esm', 'production-umd'].includes(process.env.BABEL_ENV) ? false : 'commonjs',
-      },
-    ],
-  ];
-}
-
 const defaultAlias = {
   '@material-ui/core': './packages/material-ui/src',
   '@material-ui/docs': './packages/material-ui-docs/src',
@@ -46,9 +27,25 @@ const productionPlugins = [
   ],
 ];
 
-module.exports = {
-  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
-  plugins: [
+module.exports = function getBabelConfig(api) {
+  const useESModules = api.env(['legacy', 'modern', 'stable']);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        debug: process.env.MUI_BUILD_VERBOSE === 'true',
+        modules: useESModules ? false : 'commonjs',
+        shippedProposals: api.env('modern'),
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ];
+
+  const plugins = [
     [
       'babel-plugin-macros',
       {
@@ -59,77 +56,93 @@ module.exports = {
       },
     ],
     'babel-plugin-optimize-clsx',
+    // Need the following 3 proposals for all targets in .browserslistrc.
+    // With our usage the transpiled loose mode is equivalent to spec mode.
     ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
     ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
-    // any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
-    ['@babel/plugin-transform-runtime', { version: '^7.4.4' }],
-    // for IE 11 support
-    '@babel/plugin-transform-object-assign',
-  ],
-  ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
-  env: {
-    cjs: {
-      plugins: productionPlugins,
-    },
-    coverage: {
-      plugins: [
-        'babel-plugin-istanbul',
-        [
-          'babel-plugin-module-resolver',
-          {
-            root: ['./'],
-            alias: defaultAlias,
-          },
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        useESModules,
+        // any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
+        version: '^7.4.4',
+      },
+    ],
+  ];
+
+  if (process.env.NODE_ENV === 'production') {
+    plugins.push(...productionPlugins);
+  }
+  if (process.env.NODE_ENV === 'test') {
+    plugins.push([
+      'babel-plugin-module-resolver',
+      {
+        alias: defaultAlias,
+        root: ['./'],
+      },
+    ]);
+  }
+
+  return {
+    presets,
+    plugins,
+    ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
+    env: {
+      coverage: {
+        plugins: [
+          'babel-plugin-istanbul',
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
         ],
-      ],
-    },
-    development: {
-      plugins: [
-        [
-          'babel-plugin-module-resolver',
-          {
-            alias: {
-              modules: './modules',
+      },
+      development: {
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: {
+                modules: './modules',
+              },
             },
-          },
+          ],
         ],
-      ],
-    },
-    esm: {
-      plugins: [...productionPlugins, ['@babel/plugin-transform-runtime', { useESModules: true }]],
-    },
-    es: {
-      plugins: [...productionPlugins, ['@babel/plugin-transform-runtime', { useESModules: true }]],
-    },
-    production: {
-      plugins: [...productionPlugins, ['@babel/plugin-transform-runtime', { useESModules: true }]],
-    },
-    'production-umd': {
-      plugins: [...productionPlugins, ['@babel/plugin-transform-runtime', { useESModules: true }]],
-    },
-    test: {
-      sourceMaps: 'both',
-      plugins: [
-        [
-          'babel-plugin-module-resolver',
-          {
-            root: ['./'],
-            alias: defaultAlias,
-          },
+      },
+      legacy: {
+        plugins: [
+          // IE 11 support
+          '@babel/plugin-transform-object-assign',
         ],
-      ],
-    },
-    benchmark: {
-      plugins: [
-        ...productionPlugins,
-        [
-          'babel-plugin-module-resolver',
-          {
-            root: ['./'],
-            alias: defaultAlias,
-          },
+      },
+      test: {
+        sourceMaps: 'both',
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
         ],
-      ],
+      },
+      benchmark: {
+        plugins: [
+          ...productionPlugins,
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
     },
-  },
+  };
 };

docs/src/pages/getting-started/supported-platforms/supported-platforms.md

@@ -5,21 +5,26 @@
 ## Browser
 
 Material-UI supports the latest, stable releases of all major browsers and platforms.
-It also supports Internet Explorer 11.
 You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation.
 
-| IE  | Edge  | Firefox | Chrome | Safari | Googlebot |
-| :-- | :---- | :------ | :----- | :----- | :-------- |
-| 11  | >= 14 | >= 52   | >= 49  | >= 10  | ✅        |
+<!-- #stable-snapshot -->
+
+| Edge  | Firefox | Chrome | Safari |
+| :---- | :------ | :----- | :----- |
+| >= 83 | >= 68   | >= 83  | >= 13  |
+
+If you need to support IE 11, check out our [legacy bundle](/guides/minimizing-bundle-size#legacy-bundle).
 
 Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that Material-UI supports it.
 [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html).
 You can expect Material-UI's components to render without major issues.
 
 ## Server
 
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node).
-Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. We recommend using **node v10.x** or newer. However we still support **node v8.x**. The support of **node v8.x** will be stopped in Material-UI Version 5.
+<!-- #stable-snapshot -->
+
+We support [Node.js](https://github.com/nodejs/node) starting with version 10 for server-side rendering.
+Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported.
 
 ### CSS prefixing
 

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -45,6 +45,25 @@ yarn add @material-ui/core@next
 
 ## Handling breaking changes
 
+### Supported browsers and node versions
+
+The targets of the default bundle have changed.
+The exact versions will be pinned on release from the browserslist query `"> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions"`.
+
+The default bundle now supports:
+
+<!-- #stable-snapshot -->
+
+- Node 10 (up from 8)
+- Chrome 83 (up from 49)
+- Edge 83 (up from 14)
+- Firefox 68 (up from 52)
+- Safari 13 (up from 10)
+- and more (see [.browserslistrc (`stable` entry)](https://github.com/mui-org/material-ui/blob/HEAD/.browserslistrc#L11))
+
+It no longer supports IE 11.
+If you need to support IE 11, check out our [legacy bundle](/guides/minimizing-bundle-size#legacy-bundle).
+
 ### non-ref-forwarding class components
 
 Support for non-ref-forwarding class components in the `component` prop or as an immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything.