[material-ui] Remove UMD bundle (#42172)

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
mui · May 17, 2024 · 393f744 · 393f744
1 parent cadb0b1
commit 393f744
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 757 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -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

diff --git a/babel.config.js b/babel.config.js
@@ -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'),
@@ -142,16 +142,6 @@ module.exports = function getBabelConfig(api) {
           ],
         ],
       },
-      rollup: {
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              alias: defaultAlias,
-            },
-          ],
-        ],
-      },
       test: {
         sourceMaps: 'both',
         plugins: [

diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
@@ -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/material@5.0.0/umd/material-ui.development.js).
-:::
diff --git a/docs/data/material/migration/migration-v5/migration-v5.md b/docs/data/material/migration/migration-v5/migration-v5.md
@@ -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.
diff --git a/examples/material-ui-via-cdn/README.md b/examples/material-ui-via-cdn/README.md
@@ -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)
 
-## 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.

diff --git a/examples/material-ui-via-cdn/index.html b/examples/material-ui-via-cdn/index.html
@@ -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/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"
+        }
+      }
+    </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 />
-          <App />
-        </ThemeProvider>,
-      );
+      createRoot(document.getElementById('root')).render(<App />);
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -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",

diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
@@ -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",
@@ -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",
@@ -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": {