Passing Data Back to Parent with Scoped Slots

[karchung0930]

Is it possible to pass data into a component and have the component expose that data back for custom rendering?

// ComponentA.svelte

<script>
    let { rows } = $props();
</script>

{#each rows as row (row.id)}
    {#if row.dataType === 'custom'}
        // How to render this?
    {/if}
{/each}

// Usage
<script>
    const rows = [
        {
            id: 1,
            dataType: 'one',
        },
        {
            id: 2,
            dataType: 'two',
        },
        {
            id: 3,
            dataType: 'custom',
        },
    ];
</script>

<ComponentA {rows}>
    {#Custom (data)}
        // How to pass this and use the data?
    {/Custom}
</ComponentA>

[brunnerh]

This can be done via snippets, e.g.

<!-- ComponentA.svelte -->
<script>
    let { rows, customRowTemplate } = $props();
</script>

{#each rows as row (row.id)}
    {#if row.dataType === 'custom'}
        {@render customRowTemplate(row)}
    {/if}
{/each}

<ComponentA {rows}>
    {#snippet customRowTemplate(row)}
        Custom: {row.id}
    {/snippet}
</ComponentA>

[karchung0930]

@brunnerh Thanks for responding.

This is working but it's hard coded?
The intention is that when using ComponentA, the name of the snippet is not fixed, and it could be also more than one.

<script>
    const rows = [
        {
            id: 1,
            dataType: 'one',
            data: 'A'
        },
        {
            id: 2,
            dataType: 'custom',
            dataTypeName: 'TypeA',
            data: 'B'
        },
        {
            id: 3,
            dataType: 'custom',
            dataTypeName: 'TypeB',
            data: 'C'
        },
    ]
</script>

<ComponentA {rows}>
    {#snippet)}
        Custom: {row.data}
    {/snippet}
</ComponentA>

Here the snippet name should be the dataTypeName, this can be anything and not fixed.
May I know is it possible to handle this case?

[brunnerh]

There are different ways of approach this. E.g. create a dictionary for the snippets.

<script>
  import ComponentA from './ComponentA.svelte';

  const rows = [
      {
          id: 1,
          dataType: 'one',
          data: 'A'
      },
      {
          id: 2,
          dataType: 'custom',
          dataTypeName: 'TypeA',
          data: 'B'
      },
      {
          id: 3,
          dataType: 'custom',
          dataTypeName: 'TypeB',
          data: 'C'
      },
  ];
</script>

{#snippet one(row)}
  One: {row.data}
{/snippet}

{#snippet custom(row)}
  Custom: {row.data}
{/snippet}

<ComponentA {rows} snippets={{ one, custom }} />

<!-- ComponentA.svelte -->
<script>
    let { rows, snippets } = $props();
</script>

{#each rows as row (row.id)}
  {@render snippets[row.dataType](row)}
{/each}

[brunnerh]

You could also assign snippet instances to properties on your row objects, if the snippet can exist at the top level.

<script>
  import ComponentA from './ComponentA.svelte';

  const rows = [
      {
          id: 1,
          dataType: 'one',
          data: 'A',
          template: one,
      },
      {
          id: 2,
          dataType: 'custom',
          dataTypeName: 'TypeA',
          data: 'B',
          template: custom,
      },
      {
          id: 3,
          dataType: 'custom',
          dataTypeName: 'TypeB',
          data: 'C',
          template: custom,
      },
  ];
</script>

{#snippet one(row)}
  One: {row.data}
{/snippet}

{#snippet custom(row)}
  Custom: {row.data}
{/snippet}

<ComponentA {rows} />

<!-- ComponentA.svelte -->
<script>
    let { rows } = $props();
</script>

{#each rows as row (row.id)}
  {@render row.template(row)}
{/each}