[base] Ban default exports #38200

michaldudak · 2023-07-28T12:43:47Z

This PR changes the default exports in Base UI to named ones. The name of the previously default export matches the file name.
Along with the changes in code, I created additional logic in API docs builders and a codemod.

Breaking change

All exports from Base UI are named:

- import Button, { buttonClasses } from '@mui/base/Button';
+ import { Button, buttonClasses } from '@mui/base/Button';
- import BaseMenu from '@mui/base/Menu';
+ import { Menu as BaseMenu } from '@mui/base/Menu';

Additionally, the ClassNameGenerator has been moved to the directory matching its name:

- import ClassNameGenerator from '@mui/base/className';
+ import { ClassNameGenerator } from '@mui/base/ClassNameGenerator';

A codemod is provided to help with the migration:

npx @mui/codemod v5.0.0/base-use-named-imports <path>

To reviewers: please review by commit. The codemod was tested by running it on our codebase, but I'd also appreciate it if you could think of any other cases that could be verified in its tests.

Part of #21862 (comment)

mui-bot · 2023-07-28T12:48:50Z

Netlify deploy preview

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against adaa1c4

mnajdova · 2023-07-31T10:27:07Z

packages/mui-codemod/README.md

@@ -62,6 +62,22 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"

 ### v5.0.0

+### `base-use-named-imports`
+
+Base UI default exports were changed to named ones.


It would be great to add a bit of explanation of why it was done.

mnajdova · 2023-07-31T10:32:22Z

packages/mui-codemod/src/v5.0.0/base-use-named-exports.js

+    return null;
+  }
+
+  const baseImportPathMatch = source.match(/@mui\/base\/(?:(?:.*)\/)*([^/]+)/);


Can we simplify the regexp? We don't nest imports more than three times. Or is there other use-case we are trying to capture with it?

mnajdova · 2023-07-31T10:34:59Z

packages/mui-codemod/src/v5.0.0/base-use-named-exports.test/actual.js

+import BaseSwitch from '@mui/base/Switch';
+import BaseSelect, { selectClasses } from '@mui/base/Select';
+import { Menu, MenuItem } from '@mui/base';
+import ClassNameConfigurator from '@mui/base/utils/ClassNameConfigurator';


I would say this is not a valid import. We are leaking internal API. By convention we don't allow these imports and consider them private API.

Good point. Excluding this will simplify the codemod code.

packages/mui-base/src/Badge/badgeClasses.ts

mnajdova · 2023-07-31T10:52:47Z

packages/mui-base/src/index.js

-
-export { default as ClickAwayListener } from './ClickAwayListener';
-
-export { default as unstable_composeClasses } from './composeClasses';


This export is missing as far as I can see. We should check the unstable_ exports with the codemod. They are unstable_ but people may use them.

The codemod isn't responsible for this part, it only covers exports from @mui/base, not local.

Ok, but we should add back the export, right?

mnajdova · 2023-07-31T10:54:56Z

We should check all frozen sandboxes we have in case they have default Base UI imports. cc @samuelsycamore

mnajdova · 2023-07-31T10:56:08Z

packages/mui-base/src/index.d.ts

@@ -2,7 +2,7 @@ export * from './utils';
 export * from './Badge';
 export * from './Button';
 export * from './ClickAwayListener';
-export * from './composeClasses';
+export { composeClasses as unstable_composeClasses } from './composeClasses';


We likely need a map for the unstable_ utils.

mnajdova · 2023-07-31T10:56:40Z

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -8,12 +8,13 @@ import {
  unstable_useForkRef as useForkRef,
  unstable_capitalize as capitalize,
 } from '@mui/utils';
-import composeClasses from '@mui/base/composeClasses';
-import useAutocomplete, {
+import { composeClasses } from '@mui/base/composeClasses';


Shouldn't this be unstable_composeClasses as composeClasses?

mnajdova · 2023-07-31T11:02:14Z

packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts

+
+      let node: babel.Node = babelPath.node;
+
+      if (node.declaration == null) {


Is this going to work with the Unstable_NumberInput?

It shouldn't matter as the component is exported as NumberInput from its source file. The "unstable_" prefix is added in its index.ts, which this script doesn't care about.

mnajdova · 2023-07-31T11:04:54Z

There is an issue with the API imports generation, for non default imports:

Looks like there was a different issue even before, for e.g. https://mui.com/base-ui/react-form-control/hooks-api/#use-form-control-context

…t-base

mnajdova

Looks good 👍

mnajdova · 2023-08-03T12:23:15Z

packages/mui-material/src/utils/index.d.ts

@@ -15,4 +15,4 @@ export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
 export { default as useIsFocusVisible } from './useIsFocusVisible';
-export { unstable_ClassNameGenerator } from '@mui/base/className';


We should list this in the Breaking changes section.

michaldudak force-pushed the ban-default-export-base branch from 319e1f7 to 10a9302 Compare July 28, 2023 12:45

michaldudak added the package: base-ui Specific to @mui/base label Jul 28, 2023

michaldudak force-pushed the ban-default-export-base branch 2 times, most recently from dfc6853 to ef4da86 Compare July 28, 2023 15:08

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

michaldudak force-pushed the ban-default-export-base branch from cfce889 to 3b6e9b2 Compare July 31, 2023 08:11

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

michaldudak added the breaking change label Jul 31, 2023

michaldudak requested a review from mnajdova July 31, 2023 08:32

michaldudak marked this pull request as ready for review July 31, 2023 08:32

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

mnajdova reviewed Jul 31, 2023

View reviewed changes

packages/mui-base/src/Badge/badgeClasses.ts Show resolved Hide resolved

mnajdova reviewed Jul 31, 2023

View reviewed changes

Add the eslint rule

dd86235

michaldudak force-pushed the ban-default-export-base branch from 3b6e9b2 to 7422f23 Compare August 3, 2023 07:49

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

michaldudak added 5 commits August 3, 2023 12:11

Codemod

0577efc

Update Base exports

59949ae

Update Joy references

f618cb8

Update Material UI references

90cca10

Update Material UI Next references

4c14cc1

michaldudak added 11 commits August 3, 2023 12:11

Update the docs

4d15adb

Examples

53ff97b

Tests

1c3de68

Rename muiCancellableEvent

37e61f9

Fix of API generation

9c4cf5c

Update API pages

95558b5

Explain the change

354426a

Do not support deep imports

da34a9f

Codemod: support unstable exports

4596459

rename className directory in Base

baa95e0

export unstable_composeClasses

34c6fe0

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

Fix hooks import instructions

1c7e673

michaldudak force-pushed the ban-default-export-base branch from 4c4672f to 1c7e673 Compare August 3, 2023 10:37

michaldudak added 2 commits August 3, 2023 12:41

Merge remote-tracking branch 'upstream/master' into ban-default-expor…

22e68c9

…t-base

Update NumberInput

126ae63

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

Fix reexport of composeClasses

adaa1c4

mnajdova approved these changes Aug 3, 2023

View reviewed changes

michaldudak added this to the Base UI: Stable release milestone Aug 3, 2023

michaldudak merged commit 1e418e6 into mui:master Aug 3, 2023

michaldudak deleted the ban-default-export-base branch August 3, 2023 12:34

richbustos pushed a commit that referenced this pull request Aug 4, 2023

[base] Ban default exports (#38200)

ad3a2a6

richbustos pushed a commit that referenced this pull request Aug 7, 2023

[base] Ban default exports (#38200)

1b9cae0

sai6855 mentioned this pull request Sep 25, 2023

[base-ui][ClickAwayListener] Trouble with importing it #39142

Closed

1 task

DiegoAndai mentioned this pull request Oct 18, 2023

Update textarea-autosize.md. Fixed the import of TextareaAutosize, removed unnecessary destructuring. #39500

Closed

1 task

ZeeshanTamboli mentioned this pull request Nov 3, 2023

TextareaAutoResize doc have error in import statement #39693

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[base] Ban default exports #38200

[base] Ban default exports #38200

michaldudak commented Jul 28, 2023 •

edited

Loading

mui-bot commented Jul 28, 2023 •

edited

Loading

mnajdova Jul 31, 2023

mnajdova Jul 31, 2023 •

edited

Loading

mnajdova Jul 31, 2023

michaldudak Jul 31, 2023

mnajdova Jul 31, 2023

michaldudak Jul 31, 2023

mnajdova Aug 1, 2023

mnajdova commented Jul 31, 2023

mnajdova Jul 31, 2023

mnajdova Jul 31, 2023

mnajdova Jul 31, 2023

michaldudak Aug 3, 2023

mnajdova commented Jul 31, 2023 •

edited

Loading

mnajdova left a comment

mnajdova Aug 3, 2023


		export { default as ClickAwayListener } from './ClickAwayListener';

		export { default as unstable_composeClasses } from './composeClasses';


		let node: babel.Node = babelPath.node;

		if (node.declaration == null) {

[base] Ban default exports #38200

[base] Ban default exports #38200

Conversation

michaldudak commented Jul 28, 2023 • edited Loading

Breaking change

mui-bot commented Jul 28, 2023 • edited Loading

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

mnajdova Jul 31, 2023 • edited Loading

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 Jul 31, 2023

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 Jul 31, 2023 • edited Loading

mnajdova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaldudak commented Jul 28, 2023 •

edited

Loading

mui-bot commented Jul 28, 2023 •

edited

Loading

mnajdova Jul 31, 2023 •

edited

Loading

mnajdova commented Jul 31, 2023 •

edited

Loading