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.

Sign up for GitHub

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

Jump to bottom

[code-infra] Update package layout for better ESM support #43264

Draft
wants to merge 86 commits into
base: master
Choose a base branch
from
Draft

[code-infra] Update package layout for better ESM support #43264

wants to merge 86 commits into from
+22,952 −1,647

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Aug 11, 2024 •
edited by DiegoAndai
Loading

closes #44055
closes #43980
closes #44265
closes #44180
closes #44993
closes #45018

Might close:

Add a new mode to the build:

  • Removes nested package.json files
  • Stores ESM files in esm subfolder with type:'module' in a package.json
  • Add exports field to package.json
  • Modern builds go in modern subfolder

Notes:

To Do:

Bundle size increase

The bundle size increase can be fully attributed to the inclusion of the following ESM/CJS interop helper in the webpack output:

Code 
/******/ 	/* webpack/runtime/create fake namespace object */
/******/ 	(() => {
/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
/******/ 		var leafPrototypes;
/******/ 		// create a fake namespace object
/******/ 		// mode & 1: value is a module id, require it
/******/ 		// mode & 2: merge all properties of value into the ns
/******/ 		// mode & 4: return value when already ns object
/******/ 		// mode & 16: return value when it's Promise-like
/******/ 		// mode & 8|1: behave like require
/******/ 		__webpack_require__.t = function(value, mode) {
/******/ 			if(mode & 1) value = this(value);
/******/ 			if(mode & 8) return value;
/******/ 			if(typeof value === 'object' && value) {
/******/ 				if((mode & 4) && value.__esModule) return value;
/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
/******/ 			}
/******/ 			var ns = Object.create(null);
/******/ 			__webpack_require__.r(ns);
/******/ 			var def = {};
/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
/******/ 			}
/******/ 			def['default'] = () => (value);
/******/ 			__webpack_require__.d(ns, def);
/******/ 			return ns;
/******/ 		};
/******/ 	})();

This is caused by the following import

material-ui/packages/mui-system/src/useMediaQuery/useMediaQuery.ts

Line 75 in eab1b9e

const maybeReactUseSyncExternalStore: undefined | any = (React as any)['useSyncExternalStore' + ''];

A potential switch to using use-sync-external-store has been explored in #43476 but ultimately it makes sense to keep it, it manifests in the webpack runtime.

Resolutions

To try out the changes use following resolutions:

"resolutions": {
    "@mui/internal-markdown": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/internal-markdown",
    "@mui/base": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/base",
    "@mui/codemod": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/codemod",
    "@mui/core-downloads-tracker": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/core-downloads-tracker",
    "@mui/docs": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/docs",
    "@mui/icons-material": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/icons-material",
    "@mui/lab": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/lab",
    "@mui/material-nextjs": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/material-nextjs",
    "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/material",
    "@mui/material-pigment-css": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/material-pigment-css",
    "@mui/private-theming": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/private-theming",
    "@mui/styled-engine-sc": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/styled-engine-sc",
    "@mui/styled-engine": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/styled-engine",
    "@mui/styles": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/styles",
    "@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/system",
    "@mui/types": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/types",
    "@mui/utils": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/utils",
    "@mui/internal-babel-plugin-resolve-imports": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/internal-babel-plugin-resolve-imports",
    "@mui/internal-docs-utils": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/internal-docs-utils",
    "@mui/internal-scripts": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/internal-scripts",
    "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/internal-test-utils",
    "@mui/x-license": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-license",
    "@mui/x-data-grid": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-data-grid",
    "@mui/x-data-grid-pro": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-data-grid-pro",
    "@mui/x-data-grid-premium": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-data-grid-premium",
    "@mui/x-data-grid-generator": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-data-grid-generator",
    "@mui/x-date-pickers": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-date-pickers",
    "@mui/x-date-pickers-pro": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-date-pickers-pro",
    "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-charts",
    "@mui/x-charts-pro": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-charts-pro",
    "@mui/x-charts-vendor": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-charts-vendor",
    "@mui/x-tree-view": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-tree-view",
    "@mui/x-tree-view-pro": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-tree-view-pro",
    "@mui/x-internals": "https://pkg.csb.dev/mui/mui-x/commit/6e71f7c9/@mui/x-internals"
  },

@Janpot Janpot added the scope: code-infra Specific to the core-infra product label Aug 11, 2024
@Janpot Janpot changed the title [core] Try new build mode that creates package exports [core] Update package layout for better ESM support Aug 11, 2024
@mui-bot
Copy link

mui-bot commented Aug 11, 2024 •
edited
Loading

Netlify deploy preview

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

Menu: parsed: +3.73% , gzip: +3.83%
@material-ui/unstyled: parsed: +0.92% , gzip: +1.01%
Select: parsed: +3.16% , gzip: +3.17%
Unstable_Popup: parsed: +3.05% , gzip: +2.63%
Unstable_NumberInput: parsed: +5.11% , gzip: +5.90%
@material-ui/core/useMediaQuery: parsed: +5.09% , gzip: +4.53%
MenuItem: parsed: +6.67% , gzip: +6.84%
Option: parsed: +6.97% , gzip: +7.39%
Tab: parsed: +7.47% , gzip: +7.53%
TabPanel: parsed: +12.28% , gzip: +11.45%
useAutocomplete: parsed: +5.06% , gzip: +5.47%
TablePagination: parsed: +7.54% , gzip: +8.23%
Tooltip: parsed: +0.53% , gzip: +0.45%
@mui/joy/Tooltip: parsed: +0.61% , gzip: +0.53%
@mui/joy/Menu: parsed: +0.49% , gzip: +0.46%
@mui/joy/Radio: parsed: +0.80% , gzip: +0.61%
@mui/joy/Checkbox: parsed: +0.78% , gzip: +0.59%
@mui/joy/Select: parsed: +0.46% , gzip: +0.43%
@mui/joy/Drawer: parsed: +0.65% , gzip: +0.54%
RadioGroup: parsed: +0.80% , gzip: +0.69%
and 27 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 7b2d481

@Janpot Janpot changed the title [core] Update package layout for better ESM support [code-infra] Update package layout for better ESM support Aug 12, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 12, 2024
@Janpot Janpot mentioned this pull request Aug 14, 2024
Merged
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 23, 2024
This was referenced Aug 26, 2024
Open
Merged
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 15, 2025
@Janpot Janpot mentioned this pull request Jan 15, 2025
Open
@DiegoAndai DiegoAndai mentioned this pull request Jan 15, 2025
Open
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 16, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
scope: code-infra Specific to the core-infra product
Projects
None yet
Milestone
No milestone
3 participants
@Janpot @mui-bot @oliviertassinari