[material-ui] Remove UMD bundle #42172

ZeeshanTamboli · 2024-05-09T06:32:38Z

I have followed (at least) the PR section of the contributing guide.

Closes #40960

PR to remove listing of UMD bundle size from contributor dashboard and toolpad dashboard - mui/mui-public#162.

mui-bot · 2024-05-09T06:36:05Z

Netlify deploy preview

packages/material-ui/material-ui.production.min.js: parsed: -100.00% 😍, gzip: -100.00% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a477294

Janpot · 2024-05-09T08:42:56Z

docs/data/material/getting-started/installation/installation.md

@@ -159,20 +159,9 @@ 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.
+Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.


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.



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

Yeah, and I would add this in

material-ui/docs/src/modules/components/MaterialUIExampleCollection.js

Line 16 in 9b2e523

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

too.

Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Zeeshan Tamboli <[email protected]>

docs/data/material/migration/migration-v5/migration-v5.md

Janpot

A few tweaks to docs, but otherwise looks good to me

packages/material-ui/material-ui.production.min.js: parsed: -100.00% 😍, gzip: -100.00% 😍

Seems to check out 😄

DiegoAndai

Thanks for working on this @ZeeshanTamboli!

examples/material-ui-via-cdn/README.md

docs/data/material/migration/migration-v5/migration-v5.md

examples/material-ui-via-cdn/README.md

DiegoAndai

I would like to unblock this so we can start closing out work for v6. We can review the migration guide copy before release. @ZeeshanTamboli if this is ready, please merge 🙌🏼

ZeeshanTamboli · 2024-05-17T10:20:50Z

@Janpot @DiegoAndai I've pushed two additional commits to remove some remaining elements. Could you review them and confirm if it's correct to remove them?

Janpot

Great job 👍

oliviertassinari

A few more comments for a follow up 😁

oliviertassinari · 2024-05-17T19:21:38Z

docs/data/material/migration/migration-v5/migration-v5.md

+
+<!-- #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.


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.

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.

oliviertassinari · 2024-05-17T19:26:03Z

docs/data/material/getting-started/installation/installation.md

@@ -159,20 +159,9 @@ 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.
+Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.


Yeah, and I would add this in

material-ui/docs/src/modules/components/MaterialUIExampleCollection.js

Line 16 in 9b2e523

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

too.

oliviertassinari · 2024-05-17T19:39:59Z

examples/material-ui-via-cdn/index.html

+      {
+        "imports": {
+          "react": "https://esm.sh/[email protected]",
+          "react-dom": "https://esm.sh/[email protected]",


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",

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"

@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.

oliviertassinari · 2024-05-17T19:51:57Z

scripts/copyFiles.mjs

-      './umd/material-ui.development.js',
-      './umd/material-ui.production.min.js',
-    ].map(async (file) => {
+    ['./index.js', './modern/index.js', './node/index.js'].map(async (file) => {


This is a win for https://packagephobia.com. Maybe enough to mention in the blog post.

oliviertassinari · 2024-05-17T19:57:17Z

examples/material-ui-via-cdn/index.html

-      root.render(
-        <ThemeProvider theme={theme}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-          <CssBaseline />


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.

oliviertassinari · 2024-05-17T20:17:27Z

examples/material-ui-via-cdn/index.html

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


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

ZeeshanTamboli · 2024-05-18T08:00:52Z

A few more comments for a follow up

@oliviertassinari PR - #42284

ZeeshanTamboli added 7 commits May 9, 2024 11:57

remove packages and umd commands

866679e

update Circle CI config

fefe75e

Update installation docs

e834ddf

Update Migrating to v6 docs

86c0962

update material-ui-via-cdn-example

7e04be5

remove files

4519235

prettier

c63a5a8

ZeeshanTamboli added package: material-ui Specific to @mui/material core Infrastructure work going on behind the scenes v6.x labels May 9, 2024

Fix vale

82d8210

ZeeshanTamboli mentioned this pull request May 9, 2024

[core] Remove outdated Babel plugins #42140

Merged

1 task

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 9, 2024

ZeeshanTamboli added 2 commits May 9, 2024 12:43

remove rollup snapshot i.e umd snapshot

416e06e

resolve conflicts

38873b1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 9, 2024

ZeeshanTamboli mentioned this pull request May 9, 2024

Remove UMD list from bundle size comparison code mui/mui-public#162

Open

ZeeshanTamboli marked this pull request as ready for review May 9, 2024 07:45

ZeeshanTamboli added 3 commits May 9, 2024 13:18

supports -> provides

9f03340

Change link to next

6980cc4

Add it as a list

2e14e62

ZeeshanTamboli requested review from Janpot and DiegoAndai May 9, 2024 08:06

Janpot reviewed May 9, 2024

View reviewed changes

Update docs/data/material/getting-started/installation/installation.md

02454b2

Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Zeeshan Tamboli <[email protected]>

Janpot reviewed May 9, 2024

View reviewed changes

docs/data/material/migration/migration-v5/migration-v5.md Outdated Show resolved Hide resolved

prettier

01297d5

Janpot approved these changes May 9, 2024

View reviewed changes

update migration to v6 docs

88e830d

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 9, 2024

DiegoAndai reviewed May 9, 2024

View reviewed changes

examples/material-ui-via-cdn/README.md Show resolved Hide resolved

docs/data/material/migration/migration-v5/migration-v5.md Outdated Show resolved Hide resolved

examples/material-ui-via-cdn/README.md Outdated Show resolved Hide resolved

DiegoAndai requested a review from samuelsycamore May 9, 2024 16:01

This comment was marked as outdated.

Sign in to view

ZeeshanTamboli added 2 commits May 10, 2024 12:04

review changes

3e540d6

resolve conflicts

8515f19

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 10, 2024

fix pnpm-lock.yaml file

9cdc4a8

ZeeshanTamboli requested a review from DiegoAndai May 10, 2024 06:58

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 12, 2024

resolve conflicts

e051bfa

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 14, 2024

pnpm dedupe

ac6d288

DiegoAndai removed the request for review from samuelsycamore May 16, 2024 17:15

DiegoAndai approved these changes May 16, 2024

View reviewed changes

ZeeshanTamboli added 3 commits May 17, 2024 15:15

Merge branch 'next' into remove-umd-bundle

a62bee9

remove legacy index file path from copying files script

1756fdf

Remove rollup env from babel config

a477294

Janpot approved these changes May 17, 2024

View reviewed changes

ZeeshanTamboli merged commit 393f744 into mui:next May 17, 2024
22 checks passed

ZeeshanTamboli deleted the remove-umd-bundle branch May 17, 2024 10:31

oliviertassinari reviewed May 17, 2024

View reviewed changes

ZeeshanTamboli mentioned this pull request May 18, 2024

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

Merged

oliviertassinari mentioned this pull request Sep 7, 2024

[examples] Fix CDN live preview demo #43641

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Remove UMD bundle #42172

[material-ui] Remove UMD bundle #42172

ZeeshanTamboli commented May 9, 2024 •

edited

Loading

mui-bot commented May 9, 2024 •

edited

Loading

Janpot May 9, 2024

oliviertassinari May 17, 2024

Janpot left a comment •

edited

Loading

DiegoAndai left a comment

This comment was marked as outdated.

DiegoAndai left a comment

ZeeshanTamboli commented May 17, 2024

Janpot left a comment •

edited

Loading

oliviertassinari left a comment

oliviertassinari May 17, 2024

oliviertassinari May 17, 2024

oliviertassinari May 17, 2024

oliviertassinari May 17, 2024 •

edited

Loading

Janpot May 18, 2024

oliviertassinari May 21, 2024 •

edited

Loading

oliviertassinari May 17, 2024 •

edited

Loading

oliviertassinari May 17, 2024

oliviertassinari May 17, 2024

ZeeshanTamboli commented May 18, 2024

	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.


		<!-- #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.

	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.

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

[material-ui] Remove UMD bundle #42172

[material-ui] Remove UMD bundle #42172

Conversation

ZeeshanTamboli commented May 9, 2024 • edited Loading

mui-bot commented May 9, 2024 • edited Loading

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot left a comment • edited Loading

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

This comment was marked as outdated.

DiegoAndai left a comment

Choose a reason for hiding this comment

ZeeshanTamboli commented May 17, 2024

Janpot left a comment • edited Loading

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari May 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari May 21, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari May 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli commented May 18, 2024

ZeeshanTamboli commented May 9, 2024 •

edited

Loading

mui-bot commented May 9, 2024 •

edited

Loading

Janpot left a comment •

edited

Loading

Janpot left a comment •

edited

Loading

oliviertassinari May 17, 2024 •

edited

Loading

oliviertassinari May 21, 2024 •

edited

Loading

oliviertassinari May 17, 2024 •

edited

Loading