[core] Upgrade Babel 6 to Babel 7

[oliviertassinari]

Following vercel/next.js#4050, it's still early, but let's see what's missing to complete the upgrade.

Blockers

• [7.0.0-beta.41] Cannot read property 'slice' of undefined babel/babel#7572
• Babel 7 support kentcdodds/babel-plugin-preval#52:

Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Following the stack trace, the error is coming from:
https://github.com/mui-org/material-ui/blob/1b90855ab0553b5cdb4c5bb9c1a66d8cb5cd48c6/docs/src/modules/components/withRoot.js#L7

• A weird non transpilated file issue.

[oliviertassinari]

The performance metrics I have to compare Babel 7 vs 6 cc @loganfsmyth

Execution time 👍 :

I have no clue what the incertainty is, so it might not be siginiticant:

-test_build: 02:39
+test_build 02:25
-test_browser 01:47
+test_browser 01:37
-test_unit 02:46
+test_unit 02:46

Generated code size output 👎 :

{
     "name": "The initial cost people pay for using one component",
     "webpack": true,
     "path": "packages/material-ui/build/Paper/index.js",
-    "limit": "25.4 KB"
+    "limit": "26.0 KB"
   },
   {
     "name": "The size of all the modules of material-ui.",
     "webpack": true,
     "path": "packages/material-ui/build/index.js",
-    "limit": "101.4 KB"
+    "limit": "102.3 KB"
   },
   {

[NMinhNguyen]

@oliviertassinari just curious, which bundles do you measure? I decided to look inside the development UMD bundle and noticed lots of _extends and _createClass helpers duplicated everywhere. I haven't had time to look into it, but I think it could be related to BABEL_ENV or NODE_ENV not being set properly for UMD causing transform-runtime not to be applied? I might get some time later, so could try to investigate further. But feel free to pick this up yourself if you wish 🙂

[oliviertassinari]

@NMinhNguyen Interesting. I can see that too. To investigate :)

[oliviertassinari]

@NMinhNguyen You were right, the umd/dev bundle was missing the execution of the transform-runtime Babel plugin. It should be fixed with #11298.

which bundles do you measure?

I don't use a bundle. I use an entry point:
https://github.com/mui-org/material-ui/blob/835286cb57f765fc9ed74f3dd1880a28fea00d06/.size-limit#L8-L13

[lookfirst]

Here is another idea... stop using babel and switch to the typescript compiler?

[oliviertassinari]

@lookfirst 1. We don't use TypeScript. 2. Babel is working on adding TypeScript support to it.

[lookfirst]

@oliviertassinari You don't have to write typescript (language) to use the typescript (compiler). I'd be curious if it produces smaller code.

[lookfirst]

@oliviertassinari As an experiment, I've been trying to compile using tsc and have made good progress, but I'm finding a bunch of issues, for example:

https://github.com/mui-org/material-ui/blob/v1-beta/packages/material-ui/src/Collapse/Collapse.d.ts#L3

...

src/Collapse/Collapse.d.ts(3,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/Drawer/Drawer.d.ts(6,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/Fade/Fade.d.ts(2,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/Grow/Grow.d.ts(3,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/Slide/Slide.d.ts(2,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/Typography/Typography.d.ts(3,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createTypography"' has no exported member 'Style'.
src/Typography/Typography.d.ts(3,17): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createTypography"' has no exported member 'TextStyle'.
src/Zoom/Zoom.d.ts(2,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.
src/styles/MuiThemeProvider.d.ts(3,10): error TS2305: Module '"/material-ui/packages/material-ui/src/styles/createMuiTheme"' has no exported member 'Theme'.