[core] Change UMD output name to 'MaterialUI'

[tkrotoff]

Change UMD output name from 'material-ui' to 'MaterialUI'.
This is a breaking change.

Closes #12387

See also Stack Overflow question: How do I add Material-UI to a JSFiddle project

Breaking change

This change is easing the usage of Material-UI with a CDN:

const {
  Button,
  TextField,
-} = window['material-ui'];
+} = MaterialUI;

It's consistent with the other projects:

• material-ui => MaterialUI
• react-dom => ReactDOM
• prop-types => PropTypes

You need to update the CDN example once this change is released.

[oliviertassinari]

Have we considered the MUI wording? cc @mui-org/core-contributors

[tkrotoff]

• react-dom => "ReactDOM"
• prop-types => "PropTypes"

Makes sense to follow the same pattern:

• material-ui => "MaterialUI"

[TrySound]

Could you please change only this line?

[tkrotoff]

If I keep and change name to be 'MaterialUI' then the file name will be changed aswell: build/umd/MaterialUI.production.min.js.
Probably not what we want, dashes are more common and better reflects the project name/typo: build/umd/material-ui.production.min.js.

[TrySound]

Okay, hardcode file names but reuse the name.

[tkrotoff]

I didn't do it on purpose because it does not add any value.

If you variabilize name then the file name and format should be treated equally:

const baseFileName = 'build/umd/material-ui';
const format = 'umd';
const outputName = 'MaterialUI';
// ...
output: {
  file: `${baseFileName}.development.js`,
  format,
  name: outputName,
  globals
}

vs

// ...
output: {
  file: 'build/umd/material-ui.development.js',
  format: 'umd',
  name: 'MaterialUI',
  globals
}

I believe the later form is more readable (the file is only 60 lines long and will stay small over time).
Sometimes variabilize/factorize small things can make them less readable.

We can try to be a smart asses and reduce lines of code by 2:

const getConfig = mode => ({
  input,
  output: {
    file: `build/umd/material-ui.${mode}.js`,
    format: 'umd',
    name: 'MaterialUI',
    globals
  },
  external: Object.keys(globals),
  plugins: [
    nodeResolve(),
    babel(babelOptions),
    commonjs(commonjsOptions),
    nodeGlobals(),
    replace({ 'process.env.NODE_ENV': JSON.stringify(mode) }),
    mode === 'production' && sizeSnapshot(),
    mode === 'production' && uglify()
  ]
});

export default [
  getConfig('development'),
  getConfig('production')
];

well, the added value on a very small file like this one is 0 and just make things harder IMHO.

[TrySound]

I mean hard code file name in rollup config. Without such tricky overconfiguration. And reuse the name of global variable.

[TrySound]

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 nodeGlobals from 'rollup-plugin-node-globals';
import { uglify } from 'rollup-plugin-uglify';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot';

const input = './src/index.js';
const name = 'MaterialUI';
const globals = {
  react: 'React',
  'react-dom': 'ReactDOM',
};
const babelOptions = {
  exclude: /node_modules/,
  // We are using @babel/plugin-transform-runtime
  runtimeHelpers: true,
  configFile: '../../babel.config.js',
};
const commonjsOptions = {
  ignoreGlobal: true,
  include: /node_modules/,
};

export default [
  {
    input,
    output: {
      file: 'build/umd/material-ui.development.js',
      format: 'umd',
      name,
      globals,
    },
    external: Object.keys(globals),
    plugins: [
      nodeResolve(),
      babel(babelOptions),
      commonjs(commonjsOptions),
      nodeGlobals(),
      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
    ],
  },
  {
    input,
    output: {
      file: 'build/umd/material-ui.production.min.js',
      format: 'umd',
      name,
      globals,
    },
    external: Object.keys(globals),
    plugins: [
      nodeResolve(),
      babel(babelOptions),
      commonjs(commonjsOptions),
      nodeGlobals(),
      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
      sizeSnapshot(),
      uglify(),
    ],
  },
];

[oliviertassinari]

@tkrotoff Thank you!