Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Add createMuiStrictModeTheme #20523

Merged
merged 6 commits into from
Apr 17, 2020

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Apr 12, 2020

Possible solution for #13394 (comment)

I realized that a gist would be too hard to integrate if you already have a custom theme. We want to remove as much friction as possible since testing Material-UI in StrictMode is very useful.

So we're going with a (hopefully) tree-shakeable solution that won't affect prod bundles:

let createMuiTheme;
if (process.env.REACT_MODE === 'legacy') {
  createMuiTheme = createLegacyModeTheme;
} else {
  createMuiTheme = createStrictModeTheme;
}

docs bundle should not only show marginal size increases.

We use the <Component ComponentImplementation={FancyImplementation} /> pattern for dependency injection. Bundle aliases would not be sufficient. All the added props are undocumented for the time being. Otherwise we would need to prefix them with unstable_ and I'm too lazy for that 😉 So they stay private for now. Only the added components are public (with unstable_) since they are required if you build your own components on top of our transitions (like we do with e.g. the Notifications component).

Related to #13394

@eps1lon eps1lon added the package: material-ui Specific to @mui/material label Apr 12, 2020
@eps1lon eps1lon added this to the 16.8 React.StrictMode milestone Apr 12, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Apr 12, 2020

@material-ui/core: parsed: +2.01% , gzip: +1.62%

Details of bundle changes.

Comparing: 29d9ace...f43ffe2

Details of page changes
bundle Size Change Size Gzip Change Gzip
/components/snackbars ▲ +800 B (+3.23% ) 25.6 kB -- -1 B
/components/switches ▼ -100 B (-0.62% ) 16 kB -- -1 B
/components/speed-dial ▲ +100 B (+0.70% ) 14.4 kB -- -1 B
/components/toggle-button ▼ -100 B (-0.94% ) 10.5 kB -- -1 B
/premium-themes/onepirate ▲ +20 B (+0.28% ) 7.23 kB -- -1 B
/components/button-group ▼ -10 B (-0.15% ) 6.64 kB -- -1 B
/components/transfer-list ▼ -10 B (-0.11% ) 9.21 kB -- -1 B
/customization/density ▼ -10 B (-0.11% ) 9.13 kB -- -1 B
/getting-started/templates ▼ -10 B (-0.12% ) 8.62 kB -- -1 B
/getting-started/templates/album ▼ -10 B (-0.18% ) 5.57 kB -- -1 B
/getting-started/templates/blog ▼ -10 B (-0.13% ) 7.43 kB -- -1 B
/_app -- 33.6 kB -- -1 B
/api-docs/alert-title -- 1.18 kB -- -1 B
/api-docs/alert -- 2.19 kB -- -1 B
/api-docs/app-bar -- 1.72 kB -- -1 B
/api-docs/autocomplete -- 4.09 kB -- -1 B
/api-docs/avatar-group -- 1.29 kB -- -1 B
/api-docs/avatar -- 1.64 kB -- -1 B
/api-docs/backdrop -- 1.5 kB -- -1 B
/api-docs/badge -- 1.92 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.58 kB -- -1 B
/api-docs/bottom-navigation -- 1.47 kB -- -1 B
/api-docs/breadcrumbs -- 1.62 kB -- -1 B
/api-docs/button-base -- 2.11 kB -- -1 B
/api-docs/button-group -- 1.99 kB -- -1 B
/api-docs/button -- 2.36 kB -- -1 B
/api-docs/card-action-area -- 1.37 kB -- -1 B
/api-docs/card-actions -- 1.26 kB -- -1 B
/api-docs/card-content -- 1.23 kB -- -1 B
/api-docs/card-header -- 1.56 kB -- -1 B
/api-docs/card-media -- 1.46 kB -- -1 B
/api-docs/card -- 1.29 kB -- -1 B
/api-docs/checkbox -- 2.09 kB -- -1 B
/api-docs/chip -- 2.23 kB -- -1 B
/api-docs/circular-progress -- 1.84 kB -- -1 B
/api-docs/click-away-listener -- 1.16 kB -- -1 B
/api-docs/collapse -- 1.79 kB -- -1 B
/api-docs/container -- 1.65 kB -- -1 B
/api-docs/css-baseline -- 1.18 kB -- -1 B
/api-docs/dialog-actions -- 1.26 kB -- -1 B
/api-docs/dialog-content-text -- 1.27 kB -- -1 B
/api-docs/dialog-content -- 1.24 kB -- -1 B
/api-docs/dialog-title -- 1.28 kB -- -1 B
/api-docs/dialog -- 2.51 kB -- -1 B
/api-docs/divider -- 1.59 kB -- -1 B
/api-docs/drawer -- 1.91 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.27 kB -- -1 B
/api-docs/expansion-panel-details -- 1.2 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.5 kB -- -1 B
/api-docs/expansion-panel -- 1.75 kB -- -1 B
/api-docs/fab -- 1.89 kB -- -1 B
/api-docs/fade -- 1.17 kB -- -1 B
/api-docs/filled-input -- 2.66 kB -- -1 B
/api-docs/form-control-label -- 1.76 kB -- -1 B
/api-docs/form-control -- 2.15 kB -- -1 B
/api-docs/form-group -- 1.34 kB -- -1 B
/api-docs/form-helper-text -- 1.69 kB -- -1 B
/api-docs/form-label -- 1.62 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.57 kB -- -1 B
/api-docs/grid-list-tile -- 1.5 kB -- -1 B
/api-docs/grid-list -- 1.4 kB -- -1 B
/api-docs/grid -- 2.33 kB -- -1 B
/api-docs/grow -- 1.24 kB -- -1 B
/api-docs/hidden -- 1.32 kB -- -1 B
/api-docs/icon-button -- 1.89 kB -- -1 B
/api-docs/icon -- 1.57 kB -- -1 B
/api-docs/input-adornment -- 1.71 kB -- -1 B
/api-docs/input-base -- 2.75 kB -- -1 B
/api-docs/input-label -- 1.86 kB -- -1 B
/api-docs/input -- 2.62 kB -- -1 B
/api-docs/linear-progress -- 1.82 kB -- -1 B
/api-docs/link -- 1.72 kB -- -1 B
/api-docs/list-item-avatar -- 1.29 kB -- -1 B
/api-docs/list-item-icon -- 1.31 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.25 kB -- -1 B
/api-docs/list-item-text -- 1.57 kB -- -1 B
/api-docs/list-item -- 2.04 kB -- -1 B
/api-docs/list-subheader -- 1.55 kB -- -1 B
/api-docs/list -- 1.47 kB -- -1 B
/api-docs/menu-item -- 1.52 kB -- -1 B
/api-docs/menu-list -- 1.35 kB -- -1 B
/api-docs/menu -- 2.17 kB -- -1 B
/api-docs/mobile-stepper -- 1.71 kB -- -1 B
/api-docs/modal -- 2.14 kB -- -1 B
/api-docs/native-select -- 1.86 kB -- -1 B
/api-docs/no-ssr -- 1.09 kB -- -1 B
/api-docs/outlined-input -- 2.77 kB -- -1 B
/api-docs/pagination-item -- 1.75 kB -- -1 B
/api-docs/pagination -- 2.02 kB -- -1 B
/api-docs/paper -- 1.65 kB -- -1 B
/api-docs/popover -- 2.47 kB -- -1 B
/api-docs/popper -- 1.73 kB -- -1 B
/api-docs/portal -- 1.12 kB -- -1 B
/api-docs/radio-group -- 1.23 kB -- -1 B
/api-docs/radio -- 1.9 kB -- -1 B
/api-docs/rating -- 2.28 kB -- -1 B
/api-docs/root-ref -- 1.2 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.19 kB -- -1 B
/api-docs/select -- 2.72 kB -- -1 B
/api-docs/skeleton -- 1.55 kB -- -1 B
/api-docs/slide -- 1.32 kB -- -1 B
/api-docs/slider -- 2.89 kB -- -1 B
/api-docs/snackbar-content -- 1.41 kB -- -1 B
/api-docs/snackbar -- 2.5 kB -- -1 B
/api-docs/speed-dial-action -- 1.82 kB -- -1 B
/api-docs/speed-dial-icon -- 1.33 kB -- -1 B
/api-docs/speed-dial -- 2.09 kB -- -1 B
/api-docs/step-button -- 1.42 kB -- -1 B
/api-docs/step-connector -- 1.33 kB -- -1 B
/api-docs/step-content -- 1.51 kB -- -1 B
/api-docs/step-icon -- 1.35 kB -- -1 B
/api-docs/step-label -- 1.68 kB -- -1 B
/api-docs/step -- 1.42 kB -- -1 B
/api-docs/stepper -- 1.64 kB -- -1 B
/api-docs/svg-icon -- 2.04 kB -- -1 B
/api-docs/swipeable-drawer -- 1.78 kB -- -1 B
/api-docs/switch -- 2.25 kB -- -1 B
/api-docs/tab -- 1.78 kB -- -1 B
/api-docs/table-body -- 1.25 kB -- -1 B
/api-docs/table-cell -- 1.9 kB -- -1 B
/api-docs/table-container -- 1.25 kB -- -1 B
/api-docs/table-footer -- 1.25 kB -- -1 B
/api-docs/table-head -- 1.25 kB -- -1 B
/api-docs/table-pagination -- 2.24 kB -- -1 B
/api-docs/table-row -- 1.47 kB -- -1 B
/api-docs/table-sort-label -- 1.61 kB -- -1 B
/api-docs/table -- 1.46 kB -- -1 B
/api-docs/tabs -- 2.31 kB -- -1 B
/api-docs/text-field -- 2.97 kB -- -1 B
/api-docs/textarea-autosize -- 909 B -- -1 B
/api-docs/toggle-button-group -- 1.6 kB -- -1 B
/api-docs/toggle-button -- 1.59 kB -- -1 B
/api-docs/toolbar -- 1.43 kB -- -1 B
/api-docs/tooltip -- 2.33 kB -- -1 B
/api-docs/tree-item -- 1.57 kB -- -1 B
/api-docs/tree-view -- 1.7 kB -- -1 B
/api-docs/typography -- 2.37 kB -- -1 B
/api-docs/zoom -- 1.2 kB -- -1 B
/blog/2019-developer-survey-results -- 5.98 kB -- -1 B
/blog/2019 -- 3.87 kB -- -1 B
/blog/2020-introducing-sketch -- 3.1 kB -- -1 B
/blog/april-2019-update -- 2.76 kB -- -1 B
/blog/august-2019-update -- 1.87 kB -- -1 B
/blog/december-2019-update -- 2.01 kB -- -1 B
/blog/july-2019-update -- 1.77 kB -- -1 B
/blog/june-2019-update -- 1.63 kB -- -1 B
/blog/march-2019-update -- 2.17 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.29 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.32 kB -- -1 B
/blog/may-2019-update -- 1.96 kB -- -1 B
/blog/november-2019-update -- 2.37 kB -- -1 B
/blog/october-2019-update -- 2.12 kB -- -1 B
/blog/september-2019-update -- 2.3 kB -- -1 B
/company/about -- 1.56 kB -- -1 B
/company/contact -- 1.14 kB -- -1 B
/company/jobs -- 1.16 kB -- -1 B
/components/about-the-lab -- 5.55 kB -- -1 B
/components/alert -- 12.4 kB -- -1 B
/components/app-bar -- 30.9 kB -- -1 B
/components/autocomplete -- 94.4 kB -- -1 B
/components/avatars -- 8.44 kB -- -1 B
/components/backdrop -- 3.31 kB -- -1 B
/components/badges -- 14.9 kB -- -1 B
/components/bottom-navigation -- 6.21 kB -- -1 B
/components/box -- 7.97 kB -- -1 B
/components/breadcrumbs -- 14.3 kB -- -1 B
/components/buttons -- 24.3 kB -- -1 B
/components/cards -- 16.9 kB -- -1 B
/components/checkboxes -- 16.5 kB -- -1 B
/components/chips -- 21.5 kB -- -1 B
/components/click-away-listener -- 3.84 kB -- -1 B
/components/container -- 3.85 kB -- -1 B
/components/css-baseline -- 6.04 kB -- -1 B
/components/dialogs -- 43.4 kB -- -1 B
/components/dividers -- 12.2 kB -- -1 B
/components/drawers -- 29.9 kB -- -1 B
/components/expansion-panels -- 20 kB -- -1 B
/components/floating-action-button -- 10.3 kB -- -1 B
/components/grid-list -- 11.8 kB -- -1 B
/components/grid -- 33.8 kB -- -1 B
/components/hidden -- 10.5 kB -- -1 B
/components/icons -- 24.5 kB -- -1 B
/components/links -- 6.82 kB -- -1 B
/components/lists -- 26.2 kB -- -1 B
/components/material-icons -- 728 kB -- -1 B
/components/menus -- 23.4 kB -- -1 B
/components/modal -- 11.5 kB -- -1 B
/components/no-ssr -- 5.02 kB -- -1 B
/components/pagination -- 8.08 kB -- -1 B
/components/paper -- 3.33 kB -- -1 B
/components/pickers -- 38.2 kB -- -1 B
/components/popover -- 16.8 kB -- -1 B
/components/popper -- 22.5 kB -- -1 B
/components/portal -- 3.29 kB -- -1 B
/components/progress -- 21.7 kB -- -1 B
/components/radio-buttons -- 15.1 kB -- -1 B
/components/rating -- 11.1 kB -- -1 B
/components/selects -- 29.5 kB -- -1 B
/components/skeleton -- 10.1 kB -- -1 B
/components/slider -- 14.6 kB -- -1 B
/components/steppers -- 36.2 kB -- -1 B
/components/tables -- 174 kB -- -1 B
/components/tabs -- 19.6 kB -- -1 B
/components/text-fields -- 54.7 kB -- -1 B
/components/textarea-autosize -- 2.81 kB -- -1 B
/components/tooltips -- 17.3 kB -- -1 B
/components/transitions -- 10.9 kB -- -1 B
/components/tree-view -- 11.2 kB -- -1 B
/components/typography -- 9.71 kB -- -1 B
/components/use-media-query -- 13.1 kB -- -1 B
/customization/breakpoints -- 15.6 kB -- -1 B
/customization/color -- 21.9 kB -- -1 B
/customization/components -- 37.5 kB -- -1 B
/customization/default-theme -- 8.55 kB -- -1 B
/customization/globals -- 4.65 kB -- -1 B
/customization/palette -- 11.9 kB -- -1 B
/customization/spacing -- 2.55 kB -- -1 B
/customization/theming -- 17 kB -- -1 B
/customization/typography -- 11.6 kB -- -1 B
/customization/z-index -- 3.05 kB -- -1 B
/discover-more/backers -- 2.88 kB -- -1 B
/discover-more/changelog -- 1.37 kB -- -1 B
/discover-more/languages -- 3.38 kB -- -1 B
/discover-more/related-projects -- 7.25 kB -- -1 B
/discover-more/roadmap -- 3.67 kB -- -1 B
/discover-more/showcase -- 13.5 kB -- -1 B
/discover-more/team -- 6.51 kB -- -1 B
/discover-more/vision -- 7.03 kB -- -1 B
/getting-started/example-projects -- 6.17 kB -- -1 B
/getting-started/faq -- 32.2 kB -- -1 B
/getting-started/installation -- 7.6 kB -- -1 B
/getting-started/learn -- 8.39 kB -- -1 B
/getting-started/support -- 7.84 kB -- -1 B
/getting-started/supported-components -- 6.19 kB -- -1 B
/getting-started/supported-platforms -- 5.69 kB -- -1 B
/getting-started/templates/checkout -- 11.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.53 kB -- -1 B
/getting-started/templates/pricing -- 7.79 kB -- -1 B
/getting-started/templates/sign-in-side -- 9.24 kB -- -1 B
/getting-started/templates/sign-in -- 9.48 kB -- -1 B
/getting-started/templates/sign-up -- 9.59 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.37 kB -- -1 B
/guides/api -- 17.4 kB -- -1 B
/guides/composition -- 14.1 kB -- -1 B
/guides/flow -- 2.21 kB -- -1 B
/guides/interoperability -- 14.9 kB -- -1 B
/guides/localization -- 10.3 kB -- -1 B
/guides/migration-v0x -- 7.25 kB -- -1 B
/guides/migration-v3 -- 22.3 kB -- -1 B
/guides/minimizing-bundle-size -- 6.73 kB -- -1 B
/guides/responsive-ui -- 4.18 kB -- -1 B
/guides/right-to-left -- 6.73 kB -- -1 B
/guides/server-rendering -- 8.38 kB -- -1 B
/guides/testing -- 8.33 kB -- -1 B
/guides/typescript -- 13.4 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-emotion -- 8.49 kB -- -1 B
/performance/table-hook -- 2.23 kB -- -1 B
/performance/table-mui -- 4.47 kB -- -1 B
/performance/table-raw -- 613 B -- -1 B
/performance/table-styled-components -- 2.61 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.43 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 8.71 kB -- -1 B
/styles/advanced -- 30.8 kB -- -1 B
/styles/api -- 16 kB -- -1 B
/styles/basics -- 17.6 kB -- -1 B
/system/api -- 5.85 kB -- -1 B
/system/basics -- 27.1 kB -- -1 B
/system/borders -- 4.04 kB -- -1 B
/system/display -- 6.51 kB -- -1 B
/system/flexbox -- 5.72 kB -- -1 B
/system/palette -- 4.28 kB -- -1 B
/system/positions -- 2.46 kB -- -1 B
/system/shadows -- 3.44 kB -- -1 B
/system/sizing -- 3.44 kB -- -1 B
/system/spacing -- 5.97 kB -- -1 B
/system/typography -- 4.22 kB -- -1 B
/versions -- 23.2 kB -- -1 B
docs:chunk:shared -- 68.3 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +7.33 kB (+2.01% ) 372 kB ▲ +1.63 kB (+1.62% ) 102 kB
@material-ui/core[umd] ▲ +5.43 kB (+1.69% ) 327 kB ▲ +757 B (+0.81% ) 94 kB
Collapse ▲ +4.5 kB (+6.19% ) 77.2 kB ▲ +267 B (+1.19% ) 22.8 kB
Grow ▲ +4.15 kB (+14.31% ) 33.1 kB ▲ +332 B (+3.43% ) 10 kB
Fade ▲ +4.13 kB (+14.55% ) 32.5 kB ▲ +315 B (+3.33% ) 9.79 kB
Slide ▲ +4.09 kB (+13.45% ) 34.5 kB ▲ +308 B (+3.06% ) 10.4 kB
Zoom ▲ +4.09 kB (+14.36% ) 32.6 kB ▲ +188 B (+1.96% ) 9.78 kB
Drawer ▲ +260 B (+0.29% ) 89.5 kB ▲ +59 B (+0.22% ) 27.3 kB
SwipeableDrawer ▲ +252 B (+0.26% ) 96.9 kB ▲ +130 B (+0.43% ) 30.5 kB
@material-ui/lab ▲ +197 B (+0.10% ) 203 kB ▲ +7 B (+0.01% ) 60.3 kB
Backdrop ▲ +131 B (+0.18% ) 72.6 kB ▲ +38 B (+0.17% ) 22.5 kB
Dialog ▲ +126 B (+0.14% ) 87.7 kB ▲ +30 B (+0.11% ) 27.5 kB
TablePagination ▲ +72 B (+0.05% ) 147 kB ▲ +12 B (+0.03% ) 43.2 kB
Menu ▲ +71 B (+0.08% ) 93.3 kB ▲ +14 B (+0.05% ) 28.8 kB
TextField ▲ +71 B (+0.06% ) 129 kB ▲ +5 B (+0.01% ) 37.9 kB
Popover ▲ +68 B (+0.08% ) 87.7 kB ▲ +15 B (+0.06% ) 27.2 kB
Select ▲ +66 B (+0.05% ) 120 kB ▲ +2 B (+0.01% ) 35.9 kB
Tooltip ▲ +66 B (+0.06% ) 106 kB ▲ +1 B (0.00% ) 33.7 kB
ExpansionPanel ▲ +63 B (+0.08% ) 76.3 kB ▲ +26 B (+0.11% ) 24.1 kB
Snackbar ▲ +63 B (+0.08% ) 80.2 kB ▲ +21 B (+0.08% ) 25.2 kB
SpeedDial ▲ +63 B (+0.07% ) 90.6 kB ▲ +16 B (+0.06% ) 28.7 kB
TreeItem ▲ +63 B (+0.08% ) 79.9 kB ▲ +15 B (+0.06% ) 25.4 kB
StepContent ▲ +63 B (+0.09% ) 73.9 kB ▲ +13 B (+0.06% ) 23.1 kB
SpeedDialAction ▲ +63 B (+0.05% ) 122 kB ▲ +5 B (+0.01% ) 38.9 kB
Chip ▲ +8 B (+0.01% ) 87 kB ▼ -5 B (-0.02% ) 26.7 kB
Autocomplete ▲ +8 B (+0.01% ) 136 kB ▲ +3 B (+0.01% ) 42.8 kB
MenuItem ▲ +8 B (+0.01% ) 82.5 kB ▲ +3 B (+0.01% ) 25.9 kB
Pagination ▲ +8 B (+0.01% ) 88.8 kB ▼ -1 B (-0.00% ) 27.4 kB
RadioGroup ▲ +8 B (+0.01% ) 68.6 kB ▲ +1 B (0.00% ) 21.3 kB
FilledInput ▲ +6 B (+0.01% ) 78.2 kB ▲ +5 B (+0.02% ) 24.4 kB
FormControl ▲ +6 B (+0.01% ) 69.1 kB ▲ +4 B (+0.02% ) 21.6 kB
OutlinedInput ▲ +6 B (+0.01% ) 79.3 kB ▲ +4 B (+0.02% ) 24.7 kB
Fab ▲ +6 B (+0.01% ) 81.1 kB -- 25.4 kB
FormLabel ▲ +5 B (+0.01% ) 68.1 kB ▲ +4 B (+0.02% ) 21.2 kB
ListItem ▲ +5 B (+0.01% ) 81.4 kB ▲ +3 B (+0.01% ) 25.6 kB
MenuList ▲ +5 B (+0.01% ) 70.7 kB -- 22.2 kB
StepIcon ▲ +4 B (+0.01% ) 69.3 kB ▲ +3 B (+0.01% ) 21.6 kB
Avatar ▲ +3 B (0.00% ) 69.8 kB ▲ +3 B (+0.01% ) 21.9 kB
Input ▲ +3 B (0.00% ) 77.2 kB ▲ +2 B (+0.01% ) 24.2 kB
List ▲ +3 B (0.00% ) 67 kB ▲ +1 B (0.00% ) 20.9 kB
Button ▲ +2 B (0.00% ) 84 kB ▲ +4 B (+0.02% ) 25.8 kB
InputLabel ▲ +2 B (0.00% ) 70 kB ▲ +4 B (+0.02% ) 21.6 kB
IconButton ▲ +2 B (0.00% ) 80.4 kB ▲ +3 B (+0.01% ) 25.2 kB
LinearProgress ▲ +2 B (0.00% ) 70 kB ▲ +3 B (+0.01% ) 21.7 kB
StepLabel ▲ +2 B (0.00% ) 73.2 kB ▲ +3 B (+0.01% ) 22.7 kB
PaginationItem ▲ +2 B (0.00% ) 85.1 kB ▼ -2 B (-0.01% ) 26.3 kB
FormGroup ▲ +2 B (0.00% ) 66.7 kB -- 20.8 kB
FormHelperText ▲ +2 B (0.00% ) 68 kB -- 21.2 kB
SnackbarContent ▲ +2 B (0.00% ) 68.2 kB -- 21.3 kB
InputBase ▲ +1 B (0.00% ) 75.3 kB ▲ +3 B (+0.01% ) 23.7 kB
Typography ▲ +1 B (0.00% ) 68.3 kB ▲ +2 B (+0.01% ) 21.4 kB
Alert -- 87.6 kB ▼ -15 B (-0.05% ) 27.7 kB
Box -- 73.6 kB ▼ -12 B (-0.05% ) 22.4 kB
Checkbox -- 86.5 kB ▼ -11 B (-0.04% ) 27.4 kB
Slider -- 80.5 kB ▲ +11 B (+0.04% ) 25.7 kB
Tabs -- 89.6 kB ▲ +11 B (+0.04% ) 28.7 kB
ExpansionPanelSummary -- 82.4 kB ▼ -10 B (-0.04% ) 26.2 kB
GridListTileBar -- 67.9 kB ▼ -10 B (-0.05% ) 21.3 kB
GridListTile -- 68.4 kB ▼ -9 B (-0.04% ) 21.5 kB
Icon -- 67.5 kB ▼ -9 B (-0.04% ) 21.2 kB
Link -- 71.3 kB ▼ -9 B (-0.04% ) 22.6 kB
Switch -- 85.7 kB ▼ -9 B (-0.03% ) 27 kB
TableSortLabel -- 81.7 kB ▲ +9 B (+0.03% ) 26 kB
Breadcrumbs -- 84.8 kB ▲ +8 B (+0.03% ) 26.9 kB
ListItemIcon -- 66.9 kB ▲ +8 B (+0.04% ) 21 kB
Skeleton -- 67.7 kB ▼ -7 B (-0.03% ) 21.4 kB
StepButton -- 86.6 kB ▲ +6 B (+0.02% ) 27.4 kB
CardActions -- 66.7 kB ▼ -5 B (-0.02% ) 20.9 kB
CardContent -- 66.7 kB ▼ -5 B (-0.02% ) 20.9 kB
Container -- 67.9 kB ▼ -5 B (-0.02% ) 21.2 kB
GridList -- 67.2 kB ▼ -5 B (-0.02% ) 21.1 kB
ToggleButton -- 80.4 kB ▲ +5 B (+0.02% ) 25.5 kB
@material-ui/styles -- 52 kB ▲ +4 B (+0.03% ) 15.6 kB
InputAdornment -- 69.8 kB ▼ -4 B (-0.02% ) 22 kB
ListItemAvatar -- 66.8 kB ▲ +4 B (+0.02% ) 20.9 kB
Table -- 67.3 kB ▼ -4 B (-0.02% ) 21.1 kB
TableHead -- 66.8 kB ▼ -4 B (-0.02% ) 20.9 kB
@material-ui/system -- 17.2 kB ▲ +3 B (+0.07% ) 4.52 kB
AppBar -- 68.7 kB ▲ +3 B (+0.01% ) 21.6 kB
BottomNavigationAction -- 79.8 kB ▲ +3 B (+0.01% ) 25.3 kB
CardMedia -- 67 kB ▼ -3 B (-0.01% ) 21.1 kB
DialogActions -- 66.8 kB ▲ +3 B (+0.01% ) 21 kB
Radio -- 87.5 kB ▲ +3 B (+0.01% ) 27.7 kB
Step -- 67.3 kB ▲ +3 B (+0.01% ) 21.2 kB
Stepper -- 69.6 kB ▼ -3 B (-0.01% ) 22 kB
SvgIcon -- 67.7 kB ▲ +3 B (+0.01% ) 21.2 kB
Tab -- 80.6 kB ▼ -3 B (-0.01% ) 25.7 kB
TableFooter -- 66.8 kB ▼ -3 B (-0.01% ) 20.9 kB
TableRow -- 67.2 kB ▼ -3 B (-0.01% ) 21.1 kB
Toolbar -- 67 kB ▼ -3 B (-0.01% ) 21.1 kB
AvatarGroup -- 70.9 kB ▼ -2 B (-0.01% ) 22.5 kB
BottomNavigation -- 67.1 kB ▼ -2 B (-0.01% ) 21.1 kB
Card -- 67.5 kB ▲ +2 B (+0.01% ) 21.2 kB
ClickAwayListener -- 4.04 kB ▲ +2 B (+0.12% ) 1.63 kB
DialogContent -- 66.9 kB ▼ -2 B (-0.01% ) 21 kB
DialogTitle -- 69 kB ▼ -2 B (-0.01% ) 21.7 kB
ExpansionPanelActions -- 66.8 kB ▼ -2 B (-0.01% ) 20.9 kB
Grid -- 69.8 kB ▼ -2 B (-0.01% ) 21.9 kB
ListItemSecondaryAction -- 66.7 kB ▲ +2 B (+0.01% ) 20.9 kB
ListItemText -- 69.7 kB ▼ -2 B (-0.01% ) 22 kB
Modal -- 14.9 kB ▲ +2 B (+0.04% ) 5.23 kB
Popper -- 28.7 kB ▼ -2 B (-0.02% ) 10.3 kB
Rating -- 75.2 kB ▼ -2 B (-0.01% ) 24.2 kB
StepConnector -- 67.4 kB ▲ +2 B (+0.01% ) 21.3 kB
styles/createMuiTheme -- 22.2 kB ▲ +2 B (+0.03% ) 7.7 kB
TableCell -- 68.7 kB ▼ -2 B (-0.01% ) 21.7 kB
TableContainer -- 66.7 kB ▲ +2 B (+0.01% ) 20.9 kB
useAutocomplete -- 16.1 kB ▲ +2 B (+0.03% ) 5.74 kB
AlertTitle -- 68.9 kB ▼ -1 B (-0.00% ) 21.7 kB
Badge -- 70 kB ▲ +1 B (0.00% ) 21.8 kB
ButtonBase -- 78.3 kB ▲ +1 B (0.00% ) 24.6 kB
ButtonGroup -- 87.5 kB ▲ +1 B (0.00% ) 27.1 kB
CardActionArea -- 79.4 kB ▼ -1 B (-0.00% ) 25.1 kB
CardHeader -- 69.7 kB ▲ +1 B (0.00% ) 22 kB
CircularProgress -- 68.8 kB ▼ -1 B (-0.00% ) 21.7 kB
CssBaseline -- 66.7 kB ▲ +1 B (0.00% ) 21 kB
DialogContentText -- 68.7 kB ▼ -1 B (-0.00% ) 21.6 kB
FormControlLabel -- 70.2 kB ▲ +1 B (0.00% ) 22.1 kB
Hidden -- 70.6 kB ▲ +1 B (0.00% ) 22.3 kB
ListSubheader -- 67.4 kB ▼ -1 B (-0.00% ) 21.2 kB
MobileStepper -- 72.5 kB ▼ -1 B (-0.00% ) 22.8 kB
Portal -- 2.87 kB ▼ -1 B (-0.08% ) 1.29 kB
RootRef -- 4.62 kB ▼ -1 B (-0.06% ) 1.76 kB
SpeedDialIcon -- 69.2 kB ▲ +1 B (0.00% ) 21.8 kB
TableBody -- 66.8 kB ▲ +1 B (0.00% ) 20.9 kB
TreeView -- 73 kB ▲ +1 B (0.00% ) 23 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Divider -- 67.4 kB -- 21.2 kB
docs:/ -- 10.8 kB -- -1 B
docs:/_app -- 33.6 kB -- -1 B
ExpansionPanelDetails -- 66.6 kB -- 20.9 kB
NativeSelect -- 81.5 kB -- 25.9 kB
NoSsr -- 2.18 kB -- 1.03 kB
Paper -- 67 kB -- 20.9 kB
ScopedCssBaseline -- 67.5 kB -- 21.2 kB
TextareaAutosize -- 5.19 kB -- 2.17 kB
ToggleButtonGroup -- 67.9 kB -- 21.4 kB
useMediaQuery -- 2.56 kB -- 1.06 kB

Generated by 🚫 dangerJS against f43ffe2

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smart, +1 for using unstable until we shift work to v5.

...other
} = props;

return (
<Fade in={open} timeout={transitionDuration} {...other}>
<TransitionComponent in={open} timeout={transitionDuration} {...other}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I had forgotten about this one in #17047 (comment).

@eps1lon
Copy link
Member Author

eps1lon commented Apr 12, 2020

Bundle size looks good:

  • core module goes up as expected since we simply ship more components
  • /Collapse module goes up since we track the full module not just the default import
  • actual usage (docs, component packages) shows marginal increases ~100 Bytes. This is most likely transpilation/bundling overhead and negligible.
  • /snackbars shouldn't increase by that much though. Since a unstable_StrictMode* transition component weighs about 4kB you would expect that much gain if it's accidentally imported but we gain 2kB instead. Either some chunking deopt or notistack is not properly importing the transition components in a tree-shakeable way. I think this is fine since we're not intending to keep these components for long anyway.

@@ -74,7 +76,7 @@ const Zoom = React.forwardRef(function Zoom(props, ref) {
};

return (
<Transition
<TransitionComponent
Copy link
Member

@oliviertassinari oliviertassinari Apr 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we call the root component prop Component to match the other non transition component convention?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a fan of the generic term if the component has a specific task.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder. It could feel surprising 🤔.

Copy link
Member Author

@eps1lon eps1lon Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That the component responsible for Transition is named TransitionComponent over Component? Is this seriously a concern?

Copy link
Member

@oliviertassinari oliviertassinari Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be like we change the convention for the style rule, naming the root class name .transition over .root?

Copy link
Member

@oliviertassinari oliviertassinari Apr 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of the idea to introduce a Components?: { Root: React.ComponentType, … } prop for v5 and empowering deep component customizations with styled component?

Similarly to what we do for the class names:

  • className prop at the root
  • classes.root object at the root
  • classes.xxx object for the nested elements

we could have:

  • Component prop at the root
  • Components.Root object at the root
  • Components.xxx object for the nested components

@oliviertassinari oliviertassinari added core Infrastructure work going on behind the scenes and removed package: material-ui Specific to @mui/material labels Apr 13, 2020
@oliviertassinari oliviertassinari merged commit 241c802 into mui:master Apr 17, 2020
@eps1lon eps1lon deleted the feat/strict-mode-compat branch April 17, 2020 11:16
@TrySound
Copy link
Contributor

@oliviertassinari @eps1lon @material-ui/react-transition-group looks very outdated. It uses old dom-helpers 3 without esm support. It's one more commonjs dependency and dom-helpers 5 of react-transition-group cannot be reused here.

@iambryancs
Copy link

@TrySound yes this made our builds with esm fail yesterday. #20669 appears to experience the same fate and the proposed fix was to update @material-ui/react-transition-group to the latest from react-transition-group.

@eps1lon
Copy link
Member Author

eps1lon commented Apr 22, 2020

Generally these issues are indicative of a over-bundling. @material-ui/react-transition-group should not be part of your bundle unless you explicitly import unstable_createMuiStrictModeTheme.

@TrySound
Copy link
Contributor

Anyway it forces bundler to process two versions of the same package.

@eps1lon
Copy link
Member Author

eps1lon commented Apr 23, 2020

Anyway it forces bundler to process two versions of the same package.

What is the issue with that? A bundler should be able to do that. We have SemVer for that. Seems like you don't care about versioning packages. Maybe some bundlers can be configured to deduplicate every package to the highest version.

@TrySound
Copy link
Contributor

Nevermind. I missed you already published new version.

@saleebm
Copy link
Contributor

saleebm commented May 4, 2020

Hey thank you all for this, much relief from my console warnings. May we get typescript types for this please? I noticed the Transitions all have types (ex. unstable_StrictModeTransition..) but not for createMuiStrictModeTheme.

for now though will just be doing declare module '@material-ui/core/styles/createMuiStrictModeTheme'

@eps1lon
Copy link
Member Author

eps1lon commented May 4, 2020

May we get typescript types for this please?

PRs welcome as usual. We're not really pursuing this right now since there are other issues that aren't fixable without a breaking change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants