Function as a template

[EmilTholin]

Thank you for your hard work with Svelte! I heard about it in a tweet, and I got incredibly excited when I read the guide!

A big reason I moved from Backbone.js to React was because of the ability to use all the power of JS instead of templates. I know how cumbersome JSX is to implement, and that it would be outside the scope of your great idea with this project, but what do you think about the idea of using a function that returns a string representing the HTML as a complement to a template?

// App.html - Template
<ul>
  {{#each cats as cat}}
    <li><a target='_blank' href='{{cat.video}}'>{{cat.name}}</a></li>
  {{/each}}
</ul>

// App.html - Function
<script>
  export default {
    render({ cats }) {
      return `
        <ul> ${ 
          cats.map(c => `<li><a target='_blank' href='${c.video}'>${c.name}</a></li>`).join('')
         } <ul>
      `;
    }
  }
</script>

// index.html
...
<script src='App.js'></script>
<script>
  var app = new App({
    target: document.querySelector('main'),
    data: {
      cats: [
        {
          name: 'Keyboard Cat',
          video: 'https://www.youtube.com/watch?v=J---aiyznGQ'
        }
      ]
    }
  });
</script>
...

I apologize if this is a naive and silly suggestion. I would just like to hear your thoughts.

[Rich-Harris]

Not a silly suggestion at all – it's definitely useful to be able to inject arbitrary HTML. Svelte is primarily modelled after Ractive, which solves this problem with the triple-stache:

<div class='arbitrary-html'>
  {{{html}}}
</div>

html could be a data property, or a computed property, or an inline expression, so you'd have complete freedom about what gets rendered. It's not currently implemented, but it will be. I've opened an issue on the main repo – sveltejs/svelte#35.