language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

Slot props for named slots should be available in the default slot

Open Lay4U opened this issue 2 years ago • 3 comments

Describe the bug

When using the let:row directive in a parent component (+page.svelte) with nested slots, a compile error occurs. The goal is to make the row variable accessible in a nested component (LinkButton) within the parent component.

Reproduction

Create a parent component (+page.svelte) with a nested UserTable component. Inside the UserTable component, create a TableRow component. Inside the TableRow component, create a TableCell component. Use the let:row directive in the +page.svelte component and pass it through a slot to the nested LinkButton component. Observe the compile error related to the let:row directive in +page.svelte.

Expected behaviour

The row variable should be accessible within the nested LinkButton component in +page.svelte without any compile errors related to the let:row directive.

System Info

  • OS: Windows 11 22621.1555
  • IDE: Webstorm

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

image +page.svelte

    <UserTable
        headers={headers}
        rows={userData}
        let:row
    >
      <LinkButton slot="changePassword" title="change password" link={`/user/${row.id}/change-password`} />
    </UserTable>

UserTable.svelte

  {#if Array.isArray(rows)}
    {#each rows as row}
      <TableRow rowData={row} >
        <slot name="changePassword" slot="changePassword" {row} />
      </TableRow>
    {/each}
  {:else}
    <TableRow rowData={rows} >
      <slot name="changePassword" slot="changePassword" {rows} />
    </TableRow>
  {/if}

TableRow.svelte

<tr on:click={(event) => handleClick(event, rowData.id)}>
    {#each Object.keys(rowData) as key}
      <TableCell content={getCellValue(key)}/>
    {/each}
    <td>
      <slot name="changePassword"/>
    </td>
</tr>

Lay4U avatar Apr 25 '23 01:04 Lay4U

Mhm I'm honestly unsure if we should really fix this. This feels like a correct error, I'm not even sure if there ever was a concious decision to make this valid. It's also really easy to fix (and arguably more correct that way) - move let:row to the named slot.

dummdidumm avatar Apr 25 '23 07:04 dummdidumm

@dummdidumm Thank you for answer. What I'm trying to say is that if I remove let:row from +page.svelte, compiler won't be able to resolve the row variable that exists within the link attribute of the LinkButton.

2023-04-25 20 51 13

Lay4U avatar Apr 25 '23 11:04 Lay4U

Move let:row to the slot and at will be:

    <UserTable
        headers={headers}
        rows={userData}
        let:row
    >
      <LinkButton slot="changePassword" let:row  title="change password" link={`/user/${row.id}/change-password`} />
    </UserTable>

dummdidumm avatar Apr 28 '23 08:04 dummdidumm

Closing since snippets will replace slots in Svelte 5

dummdidumm avatar Jul 31 '24 12:07 dummdidumm