[docs][examples] Improvements to Material UI UMD build removal (#42284)

Signed-off-by: Olivier Tassinari <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
mui · May 29, 2024 · 2af7a0f · 2af7a0f
1 parent e7023c5
commit 2af7a0f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 9 deletions.
diff --git a/docs/data/material/migration/migration-v5/migration-v5.md b/docs/data/material/migration/migration-v5/migration-v5.md
@@ -48,6 +48,8 @@ Expect updates as new breaking changes are introduced.
 
 ### UMD bundle was removed
 
-<!-- #default-branch-switch -->
+To align with React 19's removal of UMD builds, Material UI has also removed its UMD bundle.
+This results in a reduction of the `@mui/material` package size by 2.5MB or 25% of the total package size.
 
-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.
+Instead, using ESM-based CDNs such as [esm.sh](https://esm.sh/) is recommended.
+For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
@@ -8,6 +8,7 @@ import Link from '@mui/material/Link';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import CloudRoundedIcon from '@mui/icons-material/CloudRounded';
 
+// #default-branch-switch
 const examples = [
   {
     name: 'Next.js App Router',

diff --git a/examples/material-ui-via-cdn/index.html b/examples/material-ui-via-cdn/index.html
@@ -16,10 +16,10 @@
     <script type="importmap">
       {
         "imports": {
-          "react": "https://esm.sh/react@18.3.0",
-          "react-dom": "https://esm.sh/react-dom@18.3.0",
-          "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime",
-          "@mui/material": "https://esm.sh/@mui/material?external=react"
+          "react": "https://esm.sh/react@latest",
+          "react-dom": "https://esm.sh/react-dom@latest",
+          "react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime",
+          "@mui/material": "https://esm.sh/@mui/material@latest?external=react"
         }
       }
     </script>
@@ -32,13 +32,87 @@
     <script type="text/babel" data-type="module">
       import * as React from 'react';
       import { createRoot } from 'react-dom';
-      import { Button } from '@mui/material';
+      import {
+        colors,
+        CssBaseline,
+        ThemeProvider,
+        Typography,
+        Container,
+        createTheme,
+        Box,
+        SvgIcon,
+        Link,
+      } from '@mui/material';
+
+      // 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>
+        );
+      }
 
       function App() {
-        return <Button variant="contained">Button</Button>;
+        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>
+        );
       }
 
-      createRoot(document.getElementById('root')).render(<App />);
+      const root = createRoot(document.getElementById('root'));
+      root.render(
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <App />
+        </ThemeProvider>,
+      );
     </script>
   </body>
 </html>