[core] Allow deeper import of @mui/utils (#38806)

mui · Sep 16, 2023 · de106f1 · de106f1
1 parent 2843305
commit de106f1
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 15 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -67,13 +67,6 @@ module.exports = {
       {
         patterns: [
           '@mui/*/*/*',
-          // Begin block: Packages with files instead of packages in the top level
-          // Importing from the top level pulls in CommonJS instead of ES modules
-          // Allowing /icons as to reduce cold-start of dev builds significantly.
-          // There's nothing to tree-shake when importing from /icons this way:
-          // '@mui/icons-material/*/',
-          '@mui/utils/*',
-          // End block
           // Macros are fine since their import path is transpiled away
           '!@mui/utils/macros',
           '@mui/utils/macros/*',
@@ -333,7 +326,7 @@ module.exports = {
           'error',
           {
             patterns: [
-              // Allow deeper imports for TypeScript types. TODO?
+              // Allow deeper imports for TypeScript types. TODO remove
               '@mui/*/*/*/*',
               // Macros are fine since they're transpiled into something else
               '!@mui/utils/macros/*.macro',

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAutocomplete } from '@mui/base/useAutocomplete';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 
 const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   const {

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAutocomplete, UseAutocompleteProps } from '@mui/base/useAutocomplete';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 
 const Autocomplete = React.forwardRef(function Autocomplete(
   props: UseAutocompleteProps<(typeof top100Films)[number], false, false, false>,

diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useControlled as useControlled } from '@mui/utils';
+import useControlled from '@mui/utils/useControlled';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { FormControlContext } from './FormControlContext';
 import { getFormControlUtilityClass } from './formControlClasses';

diff --git a/packages/mui-base/tsconfig.build.json b/packages/mui-base/tsconfig.build.json
@@ -11,5 +11,6 @@
     "rootDir": "./src"
   },
   "include": ["src/**/*.ts*"],
-  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+  "references": [{ "path": "../mui-utils/tsconfig.build.json" }]
 }
diff --git a/packages/mui-material/scripts/rollup.config.mjs b/packages/mui-material/scripts/rollup.config.mjs
@@ -101,6 +101,10 @@ const nestedFolder = {
       return resolveNestedImport('mui-base', importee);
     }
 
+    if (importee.indexOf('@mui/utils/') === 0) {
+      return resolveNestedImport('mui-utils', importee);
+    }
+
     if (importee.indexOf('@mui/private-theming/') === 0) {
       return resolveNestedImport('mui-private-theming', importee);
     }

diff --git a/packages/mui-material/src/ListSubheader/listSubheaderClasses.ts b/packages/mui-material/src/ListSubheader/listSubheaderClasses.ts
@@ -1,4 +1,4 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '../generateUtilityClass';
 
 export interface ListSubheaderClasses {

diff --git a/packages/mui-system/tsconfig.build.json b/packages/mui-system/tsconfig.build.json
@@ -11,5 +11,6 @@
     "rootDir": "./src"
   },
   "include": ["src/**/*.ts*"],
-  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+  "references": [{ "path": "../mui-utils/tsconfig.build.json" }]
 }
diff --git a/packages/mui-utils/src/capitalize/capitalize.test.js b/packages/mui-utils/src/capitalize/capitalize.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import capitalize from './capitalize';
+import capitalize from '@mui/utils/capitalize';
 
 describe('capitalize', () => {
   it('should work', () => {

diff --git a/packages/mui-utils/src/integerPropType.d.ts b/packages/mui-utils/src/integerPropType.d.ts
@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+declare const integerPropType: PropTypes.Requireable<number>;
+
+export default integerPropType;
diff --git a/packages/mui-utils/tsconfig.build.json b/packages/mui-utils/tsconfig.build.json
@@ -3,6 +3,7 @@
   // Actual .ts source files are transpiled via babel
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "declaration": true,
     "noEmit": false,
     "emitDeclarationOnly": true,

diff --git a/tsconfig.json b/tsconfig.json
@@ -33,6 +33,8 @@
       "@mui/types": ["./packages/mui-types"],
       "@mui/base": ["./packages/mui-base/src"],
       "@mui/base/*": ["./packages/mui-base/src/*"],
+      "@mui/utils": ["./packages/mui-utils/src"],
+      "@mui/utils/*": ["./packages/mui-utils/src/*"],
       "@mui/docs": ["./packages/mui-docs/src"],
       "@mui/docs/*": ["./packages/mui-docs/src/*"],
       "@mui/material-next": ["./packages/mui-material-next/src"],