[material-ui][Alert] Convert to support zero runtime #41230

siriwatknp · 2024-02-22T04:27:46Z

Waiting for #41317

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

siriwatknp · 2024-02-22T04:30:26Z

apps/zero-runtime-next-app/src/app/alert/page.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@mui/zero-runtime';
+import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts';


At first, I tried to pull all the demos programmatically and render them with lazy loading but not successful, so I'll just go with importing manually and revisit this when I have more time.

siriwatknp · 2024-02-22T04:31:08Z

apps/zero-runtime-next-app/src/app/layout.tsx

+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';


Add this to test that emotion still works with zero-runtime.

mui-bot · 2024-02-22T06:51:03Z

Netlify deploy preview

https://deploy-preview-41230--material-ui.netlify.app/

@material-ui/core: parsed: +0.06% , gzip: +0.07%
@material-ui/lab: parsed: -0.05% 😍, gzip: +0.61%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against df00cea

mnajdova · 2024-02-22T10:17:40Z

@siriwatknp let's create separate PR for setting up how we test the components. We already have the Badge, Autocomplete, Avatar migrated to use the variants API, it will be easier to review. We can clean this PR later to just show the changes that developers migrating the components will need to do.

mnajdova · 2024-02-22T10:39:55Z

Ultimately I want to use the Slider as a template, because it has an example of both rtl and variants. We will need to solve #41217 first.

siriwatknp · 2024-02-23T08:03:53Z

@siriwatknp let's create separate PR for setting up how we test the components. We already have the Badge, Autocomplete, Avatar migrated to use the variants API, it will be easier to review. We can clean this PR later to just show the changes that developers migrating the components will need to do.

I can open another PR to tackle the migration setup first. My goal is to render the Material UI component from @mui/material, not the next-app components folder.

mnajdova · 2024-02-23T09:43:34Z

I can open another PR to tackle the migration setup first. My goal is to render the Material UI component from @mui/material, not the next-app components folder.

Yeah, that's great. I will update my PRs once we have this 👌

This reverts commit aacd7b9.

This reverts commit d17ab03.

This reverts commit b6f3ed3.

This reverts commit 635482e.

This reverts commit 2f21ebc.

…zero/alert

siriwatknp · 2024-02-28T09:48:34Z

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
  "version": "0.0.1",
  "private": true,
  "dependencies": {
-    "@mui/zero-runtime": "file:../../packages/zero-runtime/build"
+    "@mui/zero-runtime": "file:../../packages/zero-runtime"


Mistake from other PR.

siriwatknp · 2024-02-28T09:49:22Z

apps/zero-runtime-next-app/src/app/globals.css

-  margin: 0;
-}
+@layer reset, mui;

-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
+@layer reset {


This is to make the emotion overrides the globals.css, not related to zero-runtime.

siriwatknp · 2024-02-28T09:50:22Z

apps/zero-runtime-next-app/src/app/material-ui/page.tsx

@@ -0,0 +1,44 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars


Add an index page that links to each demo page.

siriwatknp · 2024-02-28T09:50:45Z

apps/zero-runtime-next-app/src/app/material-ui/react-alert/page.tsx

@@ -0,0 +1,72 @@
+'use client';


Generated from zero-render-mui-demos.mjs script.

siriwatknp · 2024-02-28T09:53:24Z

packages/mui-material/src/Alert/Alert.js

@@ -169,6 +182,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
    color,
    severity,
    variant,
+    colorSeverity: color || severity,


This is required because we can't do:

...Object.entries(theme.palette) .filter(([, value]) => value.main) .map(([color]) => ({ // this will throw error because a function cannot read variable `color`. props: ({ ownerState }) => color === (ownerState.color || ownerState.severity) && ownerState.variant === 'outlined', style: { color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6), border: `1px solid ${(theme.vars || theme).palette[color].light}`, [`& .${alertClasses.icon}`]: theme.vars ? { color: theme.vars.palette.Alert[`${color}IconColor`] } : { color: theme.palette[color].main, }, }, })),

So (ownerState.color || ownerState.severity) needs to be resolved before passing to ownerState.

scripts/zero-render-mui-demos.mjs

siriwatknp · 2024-02-28T09:55:29Z

@brijeshb42 @mnajdova It's ready for review.

…zero/alert

brijeshb42

LGTM

…zero/alert

alippai · 2024-03-05T16:55:08Z

Is there a preliminary benchmark in terms of asset sizes, build times or render timings?
This is in prod since v5.15.12, right?

siriwatknp added 4 commits February 21, 2024 22:53

add alert page

2f21ebc

update next-app to use build files

635482e

migrate Alert

1f8e0ea

add the rest of demos

b6f3ed3

siriwatknp commented Feb 22, 2024

View reviewed changes

siriwatknp changed the title ~~[material-ui] Enable Alert to support static extraction~~ [material-ui][Alert] Convert to support zero runtime Feb 22, 2024

siriwatknp added package: material-ui Specific to @mui/material component: alert This is the name of the generic UI component, not the React module! labels Feb 22, 2024

make the next-app works with workspace

d17ab03

fix theme types

aacd7b9

siriwatknp requested review from brijeshb42 and mnajdova February 22, 2024 06:53

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

siriwatknp added 10 commits February 28, 2024 14:08

Revert "fix theme types"

9b1de9e

This reverts commit aacd7b9.

Revert "make the next-app works with workspace"

16655aa

This reverts commit d17ab03.

Revert "add the rest of demos"

4cc4324

This reverts commit b6f3ed3.

Revert "update next-app to use build files"

336cb50

This reverts commit 635482e.

Revert "add alert page"

514c651

This reverts commit 2f21ebc.

Merge branch 'master' of https://github.com/mui/material-ui into mui-…

b4782e9

…zero/alert

add react-alert page to apps

37842c1

add components index page

1addb4f

fix path

8975ea5

add zero-runtime to the root so that apps can be built

2397c77

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

siriwatknp commented Feb 28, 2024

View reviewed changes

scripts/zero-render-mui-demos.mjs Outdated Show resolved Hide resolved

siriwatknp mentioned this pull request Feb 29, 2024

[material-ui] Convert Material UI components to support Pigment CSS #41273

Closed

62 tasks

siriwatknp added 3 commits February 29, 2024 14:55

Merge branch 'master' of https://github.com/mui/material-ui into mui-…

1c615dd

…zero/alert

convert AlertTitle

cd57f5a

use prettier module

f6910df

brijeshb42 approved these changes Feb 29, 2024

View reviewed changes

siriwatknp added 3 commits March 1, 2024 01:11

Merge branch 'master' of https://github.com/mui/material-ui into mui-…

eb39558

…zero/alert

fix iterating palette and add tests

0689c63

only test if ThemeProvider and createTheme are provided

b4b8cb1

siriwatknp force-pushed the mui-zero/alert branch from 5f94965 to b4b8cb1 Compare March 1, 2024 07:24

remove typo only

9bf53e2

siriwatknp added the on hold There is a blocker, we need to wait label Mar 1, 2024

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

siriwatknp added 4 commits March 4, 2024 09:31

Merge branch 'master' of https://github.com/mui/material-ui into mui-…

75c758b

…zero/alert

run pnpm install at root

bcb07aa

run pnpm install apps

df1c916

remove material-nextjs from vite-app

df00cea

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

siriwatknp merged commit e93d4ac into mui:master Mar 4, 2024
19 checks passed

mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Mar 8, 2024

[material-ui][Alert] Convert to support zero runtime (mui#41230)

3485382

alexfauquette mentioned this pull request Mar 22, 2024

[pigment-css][POC] Performance improvement on mui.com/blog #40780

Open

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui][Alert] Convert to support zero runtime #41230

[material-ui][Alert] Convert to support zero runtime #41230

siriwatknp commented Feb 22, 2024 •

edited

Loading

siriwatknp Feb 22, 2024

siriwatknp Feb 22, 2024

mui-bot commented Feb 22, 2024 •

edited

Loading

mnajdova commented Feb 22, 2024

mnajdova commented Feb 22, 2024

siriwatknp commented Feb 23, 2024

mnajdova commented Feb 23, 2024

siriwatknp Feb 28, 2024

siriwatknp Feb 28, 2024

siriwatknp Feb 28, 2024

siriwatknp Feb 28, 2024

siriwatknp Feb 28, 2024 •

edited

Loading

siriwatknp commented Feb 28, 2024

brijeshb42 left a comment

alippai commented Mar 5, 2024

		@@ -0,0 +1,45 @@
		import { styled } from '@mui/zero-runtime';
		import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts';

		@@ -0,0 +1,44 @@
		// eslint-disable-next-line @typescript-eslint/no-unused-vars

[material-ui][Alert] Convert to support zero runtime #41230

[material-ui][Alert] Convert to support zero runtime #41230

Conversation

siriwatknp commented Feb 22, 2024 • edited Loading

siriwatknp Feb 22, 2024

Choose a reason for hiding this comment

siriwatknp Feb 22, 2024

Choose a reason for hiding this comment

mui-bot commented Feb 22, 2024 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova commented Feb 22, 2024

mnajdova commented Feb 22, 2024

siriwatknp commented Feb 23, 2024

mnajdova commented Feb 23, 2024

siriwatknp Feb 28, 2024

Choose a reason for hiding this comment

siriwatknp Feb 28, 2024

Choose a reason for hiding this comment

siriwatknp Feb 28, 2024

Choose a reason for hiding this comment

siriwatknp Feb 28, 2024

Choose a reason for hiding this comment

siriwatknp Feb 28, 2024 • edited Loading

Choose a reason for hiding this comment

siriwatknp commented Feb 28, 2024

brijeshb42 left a comment

Choose a reason for hiding this comment

alippai commented Mar 5, 2024

siriwatknp commented Feb 22, 2024 •

edited

Loading

mui-bot commented Feb 22, 2024 •

edited

Loading

siriwatknp Feb 28, 2024 •

edited

Loading