[base] Add prepareForSlot util

[mnajdova]

Related to #32882

The PR adds a prepareForSlot util that can be used with third-party libraries' components if they are use inside the slots prop. Currently if a third-party component is used directly in a slot, there is a React warning shown: "React does not recognize the ownerState prop on a DOM element." In order for this to be fixed, so far developers needed to create wrapper component so that they would intercept the ownerState prop in order to not be propagated to the underlying component. This new util is basically doing this behind the scene.

 import NextLink from 'next/link';
 import { Button } from '@mui/base/Button';
+import { prepareForSlot } from '@mui/base/utils';

+const Link = prepareForSlot(NextLink);

 export default function App() {
   return (
-  <Button slots={{ root: NextLink }} href="/">Home</Button> // 💣 ownerState is propagated to the DOM <a/> element
+  <Button slots={{ root: Link }} href="/">Home</Button>
   );
 }

[mui-bot]

Netlify deploy preview

• docs/data/base/getting-started/customization/customization.md

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 8da9957

[michaldudak]

The hard part - naming. I'm not sure about "createSlot", as the function does not create a slot.
Something like "prepareForSlot" would be closer to the truth.

Also, please add JSDocs.

[siriwatknp]

If I have to compare createSlot and prepareForSlot, I would go with createSlot. It's more intuitive and easy to remember (as a user).

[michaldudak]

But it kind of goes against what we try to teach - slots are places where we insert components, so you can't really create them on your own.
@samuelsycamore, what do you think? Maybe something that's not a real word, like "slotify", work?

[samuelsycamore]

oof this is a hard one. Do we need to keep the basic structure of actionObject? Here are some spitball ideas to consider:

• customizeSlot
• insertSlot
• insertCustomSlot
• wrapCustomSlot

But all of these kind of muddy the definition of a slot, as you point out. 🤔

[mnajdova]

• createSlotComponent - you are not creating the slot, but the component to be used inside
• prepareForSlot - you prepare the component to be used as a slot, maybe shortly prepareSlot
  Two more options. I think if it is up to me I would go with createSlotComponent, it's a bit longer, but descriptive.

[samuelsycamore]

My gut says to go with createSlotComponent. I think it offers the most accurate description of what you're doing: creating the component that will go in the slot.

[samuelsycamore]

Forget what I said before! 😅 I think prepareForSlot is the most accurate.

[mnajdova]

I just realized it's the first name Michal proposed too :D Ok let's go with it.

[michaldudak]

I've got no remarks on the implementation. From the names you proposed I like prepareForSlot better, but I'll let @samuelsycamore decide.

[mnajdova]

Updated to prepareForSlot

[samuelsycamore]

Docs look good! I think we landed on the best name in the end. 😁

[oliviertassinari]

Off-topic. This page feels a bit out of context in the getting started area. This feels more like a how-to guide or an integration guide.

[oliviertassinari]

It looks like this example doesn't fully work in real life, for example, this returns a TypeScript error:

<Button href="/" slots={{ root: LinkSlot }} prefetch={false}>

https://nextjs.org/docs/pages/api-reference/components/link#prefetch

Maybe we should remove the prepareForSlot() API and instead document this?

import * as React from 'react';
import { Button, ButtonProps } from '@mui/base/Button';
import Link, { LinkProps } from 'next/link';

const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonProps & LinkProps>(
  function ButtonLink(props, ref) {
    const {
      // @ts-expect-error
      ownerState,
      ...other
    } = props;
    return <Button ref={ref as any} slots={{ root: Link }} {...other} />;
  },
);

export default function PrepareForSlot() {
  return (
    <ButtonLink href="/" prefetch={false}>
      Home
    </ButtonLink>
  );
}

Or maybe this goes back to the need for a component prop, it's working with Material UI:

For the sake of considering more options, Reshape' button is a span unless a onClick is provided, allowing to compose a > span. it feels quite strange though.

[michaldudak]

We dropped the implicit polymorphism, but it's possible to make it explicit, as described in https://mui.com/base-ui/react-button/#custom-structure

The example should use it:

<Button<typeof LinkSlot> href="/" slots={{ root: LinkSlot }} prefetch={false}>

[oliviertassinari]

Oh, I didn't know this. This sounds quite interesting.
What happens once a component is customized with styled(), does it still work?

Could we apply this to our example? As I think the initial point I raise stays true.

Actually, once applied repeatedly, it feels like this asks for a wrapper component to keep it more nominal. Once you introduce a wrapper, you are better not to use prepareForSlot as it creates fewer React components, better performance.

[michaldudak]

What happens once a component is customized with styled(), does it still work

Nope, this is a limitation of TypeScript. Similarly, in Material UI, you can't use component prop on a component returned from styled. It's one of the cases where render props or asChild work better.

Once you introduce a wrapper, you are better not to use prepareForSlot

That's right. prepareForSlot is meant to be used with bare 3rd party components. Once you wrap it and can prevent forwarding the ownerState, you don't have to use the function.

Could we apply this to our example?

Sure: #38640