Slots

[nihgwu]

Currently Ripple support slots in the following way (code could be wrong)

component Card({ $children, $header, $footer }) {
  <div>
    <$header />
    <$children />
    <$footer />
  </div>
}

export component App() {
  <Card>
    component $header() {
      <div>{"card header"}</div>
    }
    <div>{"default content"}</div>
    component $footer() {
      <div>{"card footer"}</div>
    }
  </Card>
}

But it's to cumbersome in practice as you have to wrap your named slot with component slot_name() {} everywhere you use the component
In real world we'd hope consumer can use it as

<Card>
  <CardHeader />
  <CardContent />
  <CardFooter />
</Card>

CardHeader/CardContent/CardFooter are all wrapped slots

Rough ideas
given the complexity of template compilation and static analyse in build phase, we can provide shorthand for named slots without slots props like

<Card>
  slot $header {<CardHeader />} 
  <CardContent />
  <CardFooter />
</Card>

or

<Card>
  <$slot name='header'><CardHeader />}</$slot>
  <CardContent />
  <CardFooter />
</Card>

More context:
https://www.npmjs.com/package/create-slots
reactjs/rfcs#223

[sreekar339339]

export component App() {
  <Card 
      $header={<div>{"card header"}</div>} 
      $footer={<div>{"card footer"}</div>}
  >
    <div>{"default content"}</div>
  </Card>
}

Would this not work?

[mustofa-id]

According to the docs, this should work:

<Card>
  <$header />
  // ...
</Card>

Also, I personally prefer the current syntax, it's a lot clearer, especially when slots take parameters (if that's supported):

component Card({ $children, $header, $footer }) {
  let stuff = "value";
  <div>
    <$header {stuff} />
    // ... 
  </div>
}

export component App() {
  <Card>
    component $header({ stuff }) {
      <div>{`card header with ${stuff}`}</div>
    }
    // ...
  </Card>
}

Other use cases like dynamic slots are also doable, for example: Svelte Dynamic Snippet

One small suggestion: instead of component $header() {}, maybe something like render $header() {} would make more sense for slots.

[nihgwu]

@mustofa-id

But it's to cumbersome in practice as you have to wrap your named slot with component slot_name() {} everywhere you use the component

[leonidaz]

But it's to cumbersome in practice as you have to wrap your named slot with component slot_name() {} everywhere you use the component

@nihgwu

You can save your components wherever and just import them to passed in as props including the necessary data. Here's an example:

component Card({ $children, $header, $footer, $data }) {
  const { title, text, menu } = $data;
  <div>
    <$header {title} />
    <$children {text} />
    <$footer {menu} />
  </div>
}

import { Card } from './Card.ripple';
import { Header, Footer, Content } from './CardParts.ripple';

$myData = {title: 'Ripple', menu: [1,2,3], text: 'Amazing Grace'};

<Card
  $data={$myData}
  $header={Header}
  $footer={Footer}
  $children={Content}
/>

But not entirely sure if this is what you were looking for.

[ansarizafar]

I also like the current syntax as it is very flexible.

[nihgwu]

I agree the current syntax is flexible, my point is in practice it's too verbose, if you have multi Cards with slightly diffs but can't do mapping, then you have to repeat component $header() {...} again and again, I'm asking for shorthands or even more convenient composition API

@trueadm I'm thinking maybe we can do this

component CardHeader(props) {
  ...
}

CardHeader.$slot = 'header'

and later

<Card>
  <CardHeader />
  ...
</Card>

should be easy to analyse statically, if there is relevant named slot in the template, portal to there, otherwise leave it as default slot(children), $slot is just an annotation to expand it to current slot syntax

There some areas to explore like how to propagate slot props back to template, the following example

<Card>
  <CardHeader id='card-header-id' />
</Card>

usually CardHeader can use auto generated id in the template for Card's aria-labelledby, but we should also respect id from user land, would be tricky for async slots unless we expose top level utility to read slot props

[leonidaz]

@nihgwu you can't just use props? I'm struggling to see your point about repeating a "component $header() {...} again and again".

let $header = CardHeader;

<Card {$header} $footer={Footer} $content={Content} />
<Card {$header} $footer={OtherFooter} $content={OtherContent} />

[nihgwu]

@leonidaz sure we can, I don't want to discuss the pros & cons of

<Card {$header} $footer={<Footer />} $content={<Content />} />

vs

<Card>
  <CardContent />
  <CardFooter />
</Card>

it's another big topic

[leonidaz]

I see, you strongly prefer this particular way of declarative composition and you want a shorter way of specifying component props with the nested component composition:

a shorter way of doing this:

<Card>
  component $header() {
    <Header />
  }
</Card>

• So, it would either has to be a special ripple wrapper which is essentially what component() {} is already providing, so no win here.
• or a special property on the declarative component, <Header />, that somehow links to the parent and instructs it to treat it a property, which you'd agree would be terribly complex and prone to bugs.
• what you're proposing here Slots #50 (comment) is also very complicated and deals with the component factory vs the component instance, which even if implemented would be pretty complicated and brittle.

I honestly don't see a win here, as any of the solutions would make Ripple harder to learn and use.

[nihgwu]

From both Ripple and DS perspective, I think FooPart.$$slot = 'slotName' is the simplest approach, the problem is typing, as it's disconnected from template, another way is createSlot/createSlots for typing

as any of the solutions would make Ripple harder to learn and use

Slots is mostly for ui library authors, and if you are familiar with Web Component's template/slots pattern, it's pretty straight forward

if we want to just follow WC's slots, we can just introduce <$slot name='slot_name'>...</$slot>, which is still better than component $slot_name() {...} in children

At least we need a cleaner and lightweight syntax for slot without slotProps