-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
Changes from 16 commits
866679e
fefe75e
e834ddf
86c0962
7e04be5
4519235
c63a5a8
82d8210
416e06e
38873b1
9f03340
6980cc4
2e14e62
02454b2
01297d5
88e830d
3e540d6
8515f19
9cdc4a8
e051bfa
ac6d288
a62bee9
1756fdf
a477294
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. | ||
|
||
:::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). | ||
::: |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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 /> | ||||||
|
@@ -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]", | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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" There was a problem hiding this comment. Choose a reason for hiding this commentThe 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" | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 /> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
material-ui/docs/src/modules/components/MaterialUIExampleCollection.js
Line 16 in 9b2e523