Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Remove UMD bundle #42172

Merged
merged 24 commits into from
May 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -423,12 +423,6 @@ jobs:
- run:
name: pnpm test:e2e
command: pnpm test:e2e
- run:
name: Can we generate the @mui/material umd build?
command: pnpm --filter @mui/material build:umd
- run:
name: Test umd release
command: pnpm test:umd
test_e2e_website:
# NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci
<<: *default-job
Expand Down
12 changes: 1 addition & 11 deletions babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const productionPlugins = [
];

module.exports = function getBabelConfig(api) {
const useESModules = api.env(['regressions', 'modern', 'stable', 'rollup']);
const useESModules = api.env(['regressions', 'modern', 'stable']);

const defaultAlias = {
'@mui/material': resolveAliasPath('./packages/mui-material/src'),
Expand Down Expand Up @@ -142,16 +142,6 @@ module.exports = function getBabelConfig(api) {
],
],
},
rollup: {
plugins: [
[
'babel-plugin-module-resolver',
{
alias: defaultAlias,
},
],
],
},
test: {
sourceMaps: 'both',
plugins: [
Expand Down
16 changes: 4 additions & 12 deletions docs/data/material/getting-started/installation/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,20 +159,12 @@ For instance, via Google Web Fonts:
## CDN

You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.
Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn) to get started.

<!-- #default-branch-switch -->

Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a marker so we don't forget to switch back when master becomes default branch again

Suggested change
Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.
<!-- #default-branch-switch -->
Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, and I would add this in

link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs',
too.


:::error
We do _not_ recommend using this approach in production.
It requires the client to download the entire library—regardless of which components are actually used—which negatively impacts performance and bandwidth utilization.
:::

Two Universal Module Definition (UMD) files are provided:

- one for development: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
- one for production: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js

:::warning
The UMD links use the `latest` tag to point to the latest version of the library.
This pointer is _unstable_ and subject to change as we release new versions.
You should consider pointing to a specific version, such as [v5.0.0](https://unpkg.com/@mui/[email protected]/umd/material-ui.development.js).
:::
6 changes: 6 additions & 0 deletions docs/data/material/migration/migration-v5/migration-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,9 @@ The steps you need to take to migrate from Material UI v5 to v6 are described
This list is a work in progress.
Expect updates as new breaking changes are introduced.
:::

### UMD bundle was removed

<!-- #default-branch-switch -->

The UMD bundle is no longer provided. This was replaced in favor of [ESM CDNs](https://esm.sh/). Please refer to the [CDN docs](https://next.mui.com/material-ui/getting-started/installation/#cdn) for alternatives.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a relative URL not an absolute one.

Suggested change
The UMD bundle is no longer provided. This was replaced in favor of [ESM CDNs](https://esm.sh/). Please refer to the [CDN docs](https://next.mui.com/material-ui/getting-started/installation/#cdn) for alternatives.
The UMD bundle is no longer provided. This was replaced in favor of [ESM CDNs](https://esm.sh/).
Please refer to the [CDN docs](/material-ui/getting-started/installation/#cdn) for alternatives.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I think we should mention that we are doing this to have parity with React 19 https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed. Also, helps transfer the blame upstream.

11 changes: 1 addition & 10 deletions examples/material-ui-via-cdn/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,14 @@ open index.html

## The idea behind the example

You can start using Material UI with minimal front-end infrastructure, which is great for prototyping.
You can start using Material UI with minimal front-end infrastructure, which is great for prototyping. It uses [ESM CDNs](https://esm.sh/).
We discourage using this approach in production, though.
The client has to download the entire library, regardless of which components are used, affecting performance and bandwidth usage.

<!-- #default-branch-switch -->

[The live preview.](https://rawcdn.githack.com/mui/material-ui/next/examples/material-ui-via-cdn/index.html)
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

## UMD releases

We are providing two Universal Module Definition (UMD) files:

- one for development: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
- one for production: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js

<!-- #default-branch-switch -->

## What's next?

You now have a working example project.
Expand Down
110 changes: 19 additions & 91 deletions examples/material-ui-via-cdn/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,6 @@
<meta charset="utf-8" />
<title>My page</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<script
src="https://unpkg.com/react@latest/umd/react.development.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script
src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/@babel/standalone@latest/babel.min.js"
crossorigin="anonymous"
></script>
<!-- Fonts to support Material Design -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand All @@ -26,91 +13,32 @@
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
Copy link
Member

@oliviertassinari oliviertassinari May 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels like it would be best to use latest here, so we know a lot faster when it breaks with a latest version. Especially since we don't have a test for this anymore.

Suggested change
"react-dom": "https://esm.sh/react-dom@18.3.0",
"react-dom": "https://esm.sh/react-dom@latest",

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another approach could be to version all dependencies with just their major version. To ensure compatibility across all dependencies while still enjoying the latest version.

"react-dom": "https://esm.sh/react-dom@18",
"@mui/material": "https://esm.sh/@mui/material@5?external=react"

Copy link
Member

@oliviertassinari oliviertassinari May 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Janpot Yeah, we could maybe do this. However, I think this should be for all the examples, not just this one, so let's go with the latest to scope down the change. First, let's get consistency. Second, we will see if we should change the tradeoff for all examples.

Setting the major version delays the report of bugs with the latest version and it's extra work. However, it also means that our examples are more likely to work at all times. I think that until we have more bandwidth than at the time of Me + Sebastian + Matt + Marija we shouldn't change the tradeoff. From what I have observed these last few years, we have been clearly slower, so I would delay this change. If you also consider that React, between two majors, almost never introduces breaking changes, they do deprecations first and that we are trending to do the same thing between MUI projects, then it might be fine. After a major, examples would continue to work, people would get new warnings, and we will fix them. A breakage would signal something isn't right.

A quick benchmark, Next.js is cherry-picking its examples version: https://github.com/vercel/next.js/blob/canary/examples/with-redis/package.json.

"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
"@mui/material": "https://esm.sh/@mui/material?external=react"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, interesting approach, makes sense to be able to use MUI X without duplication.

}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {
colors,
CssBaseline,
ThemeProvider,
Typography,
Container,
createTheme,
Box,
SvgIcon,
Link,
} = MaterialUI;

// Create a theme instance.
const theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: colors.red.A400,
},
},
});

function LightBulbIcon(props) {
return (
<SvgIcon {...props}>
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
</SvgIcon>
);
}

function ProTip() {
return (
<Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
<LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
{'Pro tip: See more '}
<Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
{' in the Material UI documentation.'}
</Typography>
);
}

function Copyright() {
return (
<Typography variant="body2" color="text.secondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
<!-- Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Usage -->
<script type="text/babel" data-type="module">
import * as React from 'react';
import { createRoot } from 'react-dom';
import { Button } from '@mui/material';

function App() {
return (
<Container maxWidth="sm">
<Box sx={{ my: 4 }}>
<Typography variant="h4" component="h1" sx={{ mb: 2 }}>
Material UI CDN example
</Typography>
<ProTip />
<Copyright />
</Box>
</Container>
);
return <Button variant="contained">Button</Button>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need CssBaseline for all examples, it's part of the recommanded approach to get started that we have in the docs. So I think it's a must add back.

Same for the rest, I think that we should match the other examples.

<App />
</ThemeProvider>,
);
createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
"test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
"test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
"test:regressions:server": "serve test/regressions -p 5001",
"test:umd": "node packages/mui-material/test/umd/run.js",
"test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
"test:argos": "node ./scripts/pushArgos.mjs",
"typescript": "lerna run --no-bail --parallel typescript",
Expand Down
11 changes: 1 addition & 10 deletions packages/mui-material/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,10 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
"build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:umd && pnpm build:types && pnpm build:copy-files",
"build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
"build:umd": "cross-env BABEL_ENV=rollup rollup -c scripts/rollup.config.mjs",
"build:copy-files": "node ../../scripts/copyFiles.mjs",
"build:types": "node ../../scripts/buildTypes.mjs",
"prebuild": "rimraf build tsconfig.build.tsbuildinfo",
Expand All @@ -58,7 +57,6 @@
"@mui-internal/test-utils": "workspace:^",
"@mui/internal-babel-macros": "workspace:^",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-replace": "^5.0.5",
"@testing-library/dom": "^9.3.4",
"@testing-library/user-event": "^14.5.2",
"@types/chai": "^4.3.16",
Expand All @@ -68,20 +66,13 @@
"@types/sinon": "^10.0.20",
"chai": "^4.4.1",
"css-mediaquery": "^0.1.2",
"express": "^4.19.2",
"fast-glob": "^3.3.2",
"fs-extra": "^11.2.0",
"lodash": "^4.17.21",
"playwright": "^1.44.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1",
"rollup": "^3.29.4",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^15.2.0"
},
"peerDependencies": {
Expand Down
Loading
Loading