[✨] Default value for named slots

[hassanzohdy]

Is your feature request related to a problem?

No

Describe the solution you'd like

The FR is about adding the ability to add a default value when a named slot is not passed to the component.

There are tons of use cases that could be used especially the packages authors that could give the developers the option to add their own components i.e icon, header, footer..etc and if it is not present then use a default value for that named slot.

Describe alternatives you've considered

Maybe passing it as a component prop but that would lose the sense of named slots existence.

Additional context

No response

[wmertens]

This used to be possible but it meant having the default always in the DOM. So if you have a list of 1000 items, you would have 1000 default contents hidden in the DOM as well.

It's better to use an inline component to wrap what you want, like so:

const Foo = component$((props) => <div><Slot /></div>)
const FooWithDefault = ({children, ...props) => <Foo {...props}>{children || "No children passed"}</Foo>

I'll close this but feel free to ask followup questions.

[hassanzohdy]

Sorry but i'm not really following, consider the following example:

return (
<Carousel>
  <Carousel.Slide>Item 1</Carousel.Slide>
  <Carousel.Slide>Item 1</Carousel.Slide>
  <Carousel.Slide>Item 1</Carousel.Slide>
  <div q:slot="leftArrow">
    <button>Left</button>
  </div>
  <div q:slot="rightArrow">
    <button>Right</button>
  </div>
</Carousel>
)

If i'm building a carousel package, how can i make this syntax possible, so if the developer passed left/rightArrow slot then it will be used, otherwise i'd use the default arrows of the carousel.

[wmertens]

@hassanzohdy Hmm I think there's a bit of boilerplate that we could avoid.

Suppose your example is MyCarousel. You would make

const WrappedCarousel = ({children, ...props}) => {
  const arr = children ? Array.isArray(children) ? children : [children] : []
  return <MyCarousel {...props}>
    {children}
    {!arr.find(c => c.props['q:slot'] === 'leftArrow') && <button q:slot="leftArrow">Left</button>}
    {!arr.find(c => c.props['q:slot'] === 'rightArrow') && <button q:slot="rightArrow">Right</button>}
  </MyCarousel>
}

Notice the absence of component$, so this is an Inline Component and it runs as part of the component that renders the carousel. Thanks to that it has access to the children.

Perhaps we could have an API like this, which you provide a mapping of names and defaults?

const WrappedCarousel = defaultSlots(MyCarousel, {
  'leftArrow': () => <button>Left</button>,
  'rightArrow': () => <button>Right</button>,
})

This would then return an Inline Component.

Thoughts?

[hassanzohdy]

@wmertens That's a lot of work to do to achieve this, also why would we lose using component$ optimization.

This is how i imagine about it to be done:

export const Carousel = component$(props => {
    return (
        // if the leftArrow slot is provided, use it, otherwise use the default left arrow icon
        <Slot name="leftArrow">
            <LeftArrowIcon />
        </Slot>

        // if the rightArrow slot is provided, use it, otherwise use the default right arrow icon
        <Slot name="rightArrow">
            <RightArrowIcon />
        </Slot>
    )
});

This would make the code more sense especially this is a common use case that will be in many projects/packages.

I don't know if this is even applicable in Qwik to be achieved this way, if there is something that i can invetigate about it just give me some leads and i'll give it a shot.

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.