[zero] Set up Material UI migration demos #41267

siriwatknp · 2024-02-25T06:45:10Z

Goal

This PR sets up the structure of internal nextjs and vite apps to test the Material UI components while converting them to support Zero Runtime.

Changes

Added a utility script to generate a page for both nextjs and vite apps. The page will use existing demos that show in the docs. (The usage of the script will be added to an umbrella issue for people who want to contribute to the conversion)
Added file system routing to vite app for a consistent pattern with the nextjs app.
Started the effort using Avatar as the first conversion.

Test

pnpm install
pnpm build - build mui-material and zero-* packages
Run the apps pnpm --filter @app/vite-app run dev and pnpm --filter @app/next-app run dev in separate terminals

Run the script

node scripts/zero-render-mui-demos.mjs react-<component>

The component comes from the valid path of https://mui/material-ui/react-<component>, e.g. react-avatar, react-chip, etc.

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

…/setup-mui-migration

mui-bot · 2024-02-25T10:48:52Z

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against e83898e

siriwatknp · 2024-02-25T14:53:46Z

apps/zero-runtime-next-app/next.config.js

@@ -97,6 +116,7 @@ const zeroPluginOptions = {
  transformLibraries: ['local-ui-lib'],
  sourceMap: true,
  displayName: true,
+  transformSx: false,


sx support is not fully working. Need to disable it to be able to render demos.

siriwatknp · 2024-02-25T15:00:26Z

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

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


this page is generated from the script https://github.com/mui/material-ui/pull/41267/files#diff-a4d30ddb2faa2486c2c65415ce350349fb32db41f7467e0d5680ac41b41febd5

siriwatknp · 2024-02-25T15:06:35Z

apps/zero-runtime-next-app/src/app/theme.ts

@@ -0,0 +1,13 @@
+// theme for MUI System (emotion)


A lot of demos are using Stack component by targeting margin of its children. The converted component styles are extracted so margin can not be overridden by Stack. We can't change the demos, so need to use ThemeProvider to change to gap instead.

siriwatknp · 2024-02-25T15:07:47Z

apps/zero-runtime-vite-app/package.json

+    "react-router": "^6.22.1",
+    "react-router-dom": "^6.22.1"


Required by vite-plugin-pages

siriwatknp · 2024-02-25T15:08:11Z

apps/zero-runtime-vite-app/package.json

@@ -29,6 +32,7 @@
    "@vitejs/plugin-react": "^4.2.1",
    "postcss": "^8.4.35",
    "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.0.12"
+    "vite": "5.0.12",
+    "vite-plugin-pages": "^0.32.0"


To enable file system routing in vite.

siriwatknp · 2024-02-25T15:10:46Z

apps/zero-runtime-vite-app/tsconfig.json

@@ -1,7 +1,8 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true


Need to explicitly do import Demos from '../path/to/Demo.tsx to use tsx file because .js is not out of the box supported in Vite.

siriwatknp · 2024-02-25T15:15:12Z

package.json

@@ -112,6 +112,7 @@
    "@mui/joy": "workspace:*",
    "@mui/material": "workspace:^",
    "@mui/utils": "workspace:^",
+    "@mui/zero-runtime": "workspace:^",


Need to add @mui/zero-runtime at the root project, so that@mui/material works inside nextjs app.

siriwatknp · 2024-02-26T04:01:40Z

packages/zero-vite-plugin/src/index.ts

@@ -114,5 +115,5 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) {
    ...rest,
  });

-  return [injectMUITokensPlugin(), intermediateBabelPlugin(), zeroPlugin];
+  return [injectMUITokensPlugin(), transformSx ? intermediateBabelPlugin() : null, zeroPlugin];


Vite plugin was missing transformSx config.

mnajdova · 2024-02-26T09:51:37Z

The usage of the script will be added to an umbrella issue for people who want to contribute to the conversion

Please add the instructions on how to run the script in the PR description too, so we can test it with a few components.

mnajdova · 2024-02-26T10:04:04Z

Did you check the sx prop? It doesn't seem to work on the Letters and Sizes avatar examples.

siriwatknp · 2024-02-26T11:32:42Z

Did you check the sx prop? It doesn't seem to work on the Letters and Sizes avatar examples.

Yes, sx prop is not working properly, need to fix it from the Zero side. It's out-of-scope of this PR, that's why I set transformSx to false.

mnajdova · 2024-02-26T12:07:58Z

scripts/zero-render-mui-demos.mjs

+  const filenames = await fse.readdir(
+    path.join(process.cwd(), `docs/data/material/components/${dataFolderName}`),
+  );
+  const tsFiles = filenames.filter((filename) => filename.endsWith('.tsx'));


Nit-pick, for some demos we have only js version, but we can simplify and depend on the TSX demos for now.

Note: .js demo won't work with Vite with the current configuration.

mnajdova

It looks good, I pushed some small improvements on the script. I tried it with the badge component, it works as expected.

brijeshb42 · 2024-02-26T12:30:10Z

I think it'd be best if there is a way to test with the built files in @mui/material as that's what the users will end up using. It can be a simple vite plugin that replaces the imported paths with the ones from the build folder.

siriwatknp · 2024-02-26T13:57:08Z

I think it'd be best if there is a way to test with the built files in @mui/material as that's what the users will end up using. It can be a simple vite plugin that replaces the imported paths with the ones from the build folder.

Got your point, the current setup uses workspace which is not the build folder, is that what you meant?

brijeshb42 · 2024-02-26T13:58:53Z

Got your point, the current setup uses workspace which is not the build folder, is that what you meant?

Correct. If not in dev, at least in the build step it should consider the build folder so that we can verify if everything is working as expected.

This reverts commit 309e443.

siriwatknp · 2024-02-27T07:52:27Z

@brijeshb42 I think I got it working in b81f297

This is the files pass through wyw-in-js which looks the same I got in intermediate-repo (it contains emotion).

Avatar.js
Badge.js
Box.js
Box.jsx
ClassNameConfigurator.js
ClassNameGenerator.js
Container.js
GlobalStyles.js
Grid.js
GridProps.js
Person.js
PolymorphicComponent.js
ReactPropTypesSecret.js
Slider.js
SliderValueLabel.js
Stack.js
StackProps.js
StyledEngineProvider.js
SvgIcon.js
ThemeProvider.js
ZeroSlider.tsx
appendOwnerState.js
applyStyles.js
areArraysEqual.js
arrayLikeToArray.js
arrayWithHoles.js
arrayWithoutHoles.js
badgeClasses.js
blue.js
borders.js
boxClasses.js
breakpoints.js
capitalize.js
chainPropTypes.js
clamp.js
clsx.js
colorManipulator.js
common.js
compose.js
composeClasses.js
containerClasses.js
createBox.js
createBreakpoints.js
createChainedFunction.js
createContainer.js
createCssVarsProvider.js
createCssVarsTheme.js
createGetCssVar.js
createGrid.js
createMixins.js
createPalette.js
createSpacing.js
createStack.js
createStyled.js
createSvgIcon.js
createTheme.js
createTransitions.js
createTypography.js
cssGrid.js
cssVarsParser.js
debounce.js
deepmerge.js
defaultSxConfig.js
defaultTheme.js
defineProperty.js
deprecatedPropType.js
display.js
emotion-cache.cjs.js
emotion-cache.cjs.prod.js
emotion-element-4300ad44.cjs.prod.js
emotion-hash.cjs.js
emotion-hash.cjs.prod.js
emotion-is-prop-valid.cjs.js
emotion-is-prop-valid.cjs.prod.js
emotion-memoize.cjs.js
emotion-memoize.cjs.prod.js
emotion-react-_isolated-hnrs.cjs.prod.js
emotion-react.cjs.js
emotion-react.cjs.prod.js
emotion-serialize.cjs.js
emotion-serialize.cjs.prod.js
emotion-sheet.cjs.js
emotion-sheet.cjs.prod.js
emotion-styled-base.cjs.prod.js
emotion-styled.cjs.js
emotion-styled.cjs.prod.js
emotion-unitless.cjs.js
emotion-unitless.cjs.prod.js
emotion-use-insertion-effect-with-fallbacks.cjs.js
emotion-use-insertion-effect-with-fallbacks.cjs.prod.js
emotion-utils.cjs.js
emotion-utils.cjs.prod.js
emotion-weak-memoize.cjs.js
emotion-weak-memoize.cjs.prod.js
exactProp.js
extendSxProp.js
extends.js
extractEventHandlers.js
factoryWithThrowingShims.js
flexbox.js
formatMuiErrorMessage.js
generateUtilityClass.js
generateUtilityClasses.js
getDisplayName.js
getInitColorSchemeScript.js
getThemeProps.js
getThemeValue.js
green.js
grey.js
gridClasses.js
hoist-non-react-statics.cjs.js
identifier.js
index.js
interopRequireDefault.js
isHostComponent.js
isMuiElement.js
iterableToArray.js
iterableToArrayLimit.js
jsx-runtime.js
layout.tsx
lightBlue.js
memoize.js
merge.js
mergeSlotProps.js
nonIterableRest.js
nonIterableSpread.js
objectWithoutPropertiesLoose.js
omitEventHandlers.js
orange.js
ownerDocument.js
ownerWindow.js
page.tsx
palette.js
positions.js
prepareCssVars.js
prepareForSlot.js
purple.js
react-is.production.min.js
react-jsx-runtime.production.min.js
react.production.min.js
red.js
requirePropFactory.js
resolveComponentProps.js
resolveProps.js
responsivePropType.js
setRef.js
shadows.js
shape.js
shouldSpreadAdditionalProps.js
sizing.js
slicedToArray.js
sliderClasses.js
spacing.js
stackClasses.js
style.js
styleFunctionSx.js
styled.js
stylis.js
svgIconClasses.js
toConsumableArray.js
toPrimitive.js
toPropertyKey.js
traverseBreakpoints.js
typeof.js
types.js
typography.js
unsupportedIterableToArray.js
unsupportedProp.js
useControlled.js
useEnhancedEffect.js
useEventCallback.js
useForkRef.js
useId.js
useIsFocusVisible.js
useMediaQuery.js
useRootElementName.js
useSlider.js
useSlider.types.js
useSlotProps.js
useTheme.js
useThemeProps.js
useThemeWithoutDefault.js
zIndex.js

brijeshb42

I hope the changes in the packages to use file paths is just temporary. Rest all looks good.

This reverts commit b81f297.

siriwatknp · 2024-02-27T10:55:40Z

I hope the changes in the packages to use file paths is just temporary. Rest all looks good.

Okay, I'll go with this until we have a better solution for both dev and production environment.

siriwatknp added 5 commits February 25, 2024 11:11

create avatar page in nextjs-app with a script

045142b

make the react-avatar page works in zero-runtime-vite-app

4aef529

add baseline theme

1058ca5

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

4a1e577

…/setup-mui-migration

run pnpm dedupe

2e4e37d

siriwatknp commented Feb 25, 2024

View reviewed changes

simplify border

d86bdcb

siriwatknp commented Feb 25, 2024

View reviewed changes

siriwatknp marked this pull request as ready for review February 26, 2024 04:00

siriwatknp requested review from brijeshb42 and mnajdova February 26, 2024 04:00

siriwatknp commented Feb 26, 2024

View reviewed changes

prettier

1532a19

siriwatknp mentioned this pull request Feb 26, 2024

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

Open

58 tasks

mnajdova reviewed Feb 26, 2024

View reviewed changes

mnajdova added 2 commits February 26, 2024 13:17

create renders only once

c26e1c6

fix some inconsistencies with the commited files

ece370d

mnajdova approved these changes Feb 26, 2024

View reviewed changes

prettier

7ee9185

zannager added the package: pigment-css Specific to @pigment-css/* label Feb 26, 2024

siriwatknp added 3 commits February 27, 2024 14:21

create nested workspace

309e443

Revert "create nested workspace"

202e9d4

This reverts commit 309e443.

create nested workspace

b81f297

brijeshb42 reviewed Feb 27, 2024

View reviewed changes

siriwatknp added 3 commits February 27, 2024 17:30

Revert "create nested workspace"

f1992f1

This reverts commit b81f297.

create nested workspace

dca5264

revert dependency

e83898e

brijeshb42 approved these changes Feb 27, 2024

View reviewed changes

siriwatknp merged commit 49960f8 into mui:master Feb 27, 2024
19 checks passed

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

[zero] Set up Material UI migration demos (mui#41267)

989f786

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[zero] Set up Material UI migration demos #41267

[zero] Set up Material UI migration demos #41267

siriwatknp commented Feb 25, 2024 •

edited

mui-bot commented Feb 25, 2024 •

edited

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 25, 2024

siriwatknp Feb 26, 2024

mnajdova commented Feb 26, 2024

mnajdova commented Feb 26, 2024

siriwatknp commented Feb 26, 2024

mnajdova Feb 26, 2024

siriwatknp Feb 26, 2024

mnajdova left a comment

brijeshb42 commented Feb 26, 2024

siriwatknp commented Feb 26, 2024

brijeshb42 commented Feb 26, 2024 •

edited

siriwatknp commented Feb 27, 2024 •

edited

brijeshb42 left a comment •

edited

siriwatknp commented Feb 27, 2024

[zero] Set up Material UI migration demos #41267

[zero] Set up Material UI migration demos #41267

Conversation

siriwatknp commented Feb 25, 2024 • edited

Goal

Changes

Test

Run the script

mui-bot commented Feb 25, 2024 • edited

Netlify deploy preview

Bundle size report

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

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

mnajdova commented Feb 26, 2024

mnajdova commented Feb 26, 2024

siriwatknp commented Feb 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

brijeshb42 commented Feb 26, 2024

siriwatknp commented Feb 26, 2024

brijeshb42 commented Feb 26, 2024 • edited

siriwatknp commented Feb 27, 2024 • edited

brijeshb42 left a comment • edited

Choose a reason for hiding this comment

siriwatknp commented Feb 27, 2024

siriwatknp commented Feb 25, 2024 •

edited

mui-bot commented Feb 25, 2024 •

edited

brijeshb42 commented Feb 26, 2024 •

edited

siriwatknp commented Feb 27, 2024 •

edited

brijeshb42 left a comment •

edited