Render functions

Is your feature request related to a problem? Please describe. I would like to use functions to define content to render. This would allow me to have DOM content configurable within an array.

Describe the solution you’d like Vue has the h function that can be used to render the this content, something similar would be great, but I’m not sure that it is possible given that svelte does this compile time.

Describe alternatives you’ve considered This is the current solution I’m using @html with template literals

        <tr>
          {#each columns as col}
            <td>{@html col.renderValue }</td>
          {/each}
        </tr>

where render value is

      renderValue: v => {
        const className = v.red ? 'red' : 'not-red';
        return `<span class="${className}">${v.icon}</span>`;
      }

How important is this feature to you? I can do without it

Additional context repo/code

[SystemParadox]

Rather than just closing this as “anti-Svelte”, can we have more of discussion about how we should go about achieving this in a “Svelte way”? Perhaps leading to a blog post or a tutorial entry to point people to in the future? This seems like it could be quite a common question, particularly for users coming from React or Vue.

I’m a long time React user who’s been excited about Svelte for a while. I went through the complete tutorial and this was literally the only sticking point. It’s really not clear from the tutorial or any other information I could find how you would go about creating complex reusable components like tables.

As a first-effort towards a potential solution, this is what I have managed to come up with:

// Table.svelte
<script>
  export let columns, data;
</script>

<table>
  <tr>
    {#each columns as col}
      <th>{ col.label }</th>
    {/each}
  </tr>
  {#each data as row}
    <tr>
      {#each columns as col}
        <slot name='cell' col={ col } row={ row }>
          <td>{ row[col.key] }</td>
        </slot>
      {/each}
    </tr>
  {/each}
</table>

// App.svelte
<script>
  import Table from './Table.svelte';
  let columns = [
    { key: 'id', label: 'ID' },
    { key: 'name', label: 'Name' },
  ];
  let data = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
  ];
</script>

<Table {columns} {data}>
  <td slot='cell' let:row={ row } let:col={ col }>
    {#if col.key == 'id'}
      <td>ID: { row.id }</td>
    {:else if col.key == 'name'}
      <td>Name: { row.name }</td>
    {/if}
  </td>
</Table>

Is this the best way to achieve this? Is there any way to do it without the if-else tree?

If we had dynamic slot names the table could do something like <slot name={ col.key }> and then we could avoid the if-else tree by using different slots like this:

<Table {columns} {data}>
  <td slot='id' let:row={ row }>
    ID: { row.id }
  </td>
  <td slot='name' let:row={ row }>
    Name: { row.name }
  </td>
</Table>

Any thoughts?

[antony]

Hi @SystemParadox - we close issues as not Svelte when they are feature requests / suggestions that are not suitable or desirable for Svelte.

We don’t turn the issue into a discussion or a tutorial because github issues is a place we like to reserve for bug reports, enhancements, or feature requests for Svelte, and discussions and support issues are better held on discord, where you can get more “realtime” support and discussion.

We also have a Svelte REPL where concepts such as the one you have just shown above can be coded interactively, as a much better demonstration of a concept than un-highlighted code on github allows. This allows people to better understand your question and help you.

If you want to come and chat to us, and the wider community, we’ll be more than happy to help you, and perhaps if your feature doesn’t exist, could be turned into an RFC for discussion and possible addition to the Svelte API.