[codemod][base] Write a migration script for removal of component prop from components

[hbjORbj]

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

Before

• e.g.,

<InputUnstyled component='a' href='url'></InputUnstyled>;

• e.g.,

<BadgeUnstyled
  component={CustomRoot}
  slots={{ badge: CustomBadge }}
/>;

After

• e.g.,

<InputUnstyled<'a'> slots={{
  root: 'a'
}} href='url'></InputUnstyled>;

• e.g.,

<BadgeUnstyled<typeof CustomRoot>
  slots={{
    root: CustomRoot,
    badge: CustomBadge
  }} />;

Breaking Changes

• Base UI components no longer support component prop. The value passed to component must be transferred into slots.root.
• Below is an example of how the migration should look like:

-<Input component={CustomRoot} />
+<Input slots={{ root: CustomRoot }} />

You can use this codemod to help with the migration.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 72dfac1

[mnajdova]

This contradicts with the other codemod for removing this suffix, can be instead change the logic to look for imports from @mui/base?

[hbjORbj]

addressed: 3f88c6c

[mnajdova]

We should not depend on the name of the component. It would be best to depend on the import.

[hbjORbj]

Can you elaborate? If you are talking about filtering base components, I changed the logic so we filter base components based on import statements.

[mnajdova]

It's great that the changes are valid now as well, we don't have to sync the codemod with the changes we do per component.

[mnajdova]

Looks good, let's merge!

[hbjORbj]

Added the new codemod to README. Will merge once all CI tests pass.

[mnajdova]

We can test in a separate PR to run the codemod in the docs (for e.g. to update all examples), as the result of the codemod is a valid API even now. Would you like to create a PR for it @hbjORbj?

[hbjORbj]

Yes, sure :)