gistfile1.txt

-routes
--[category]
---_components
----List.html
---index.html
--index.html
--4xx.html
--5xx.html

svelte-tour.html

<h1>Showing {category} videos</h1>

{#if videos.length > 0}
  <List videos={videos}/>
{:else}
  <p>no {category} videos :(</p>
{/if}

<svelte:component this={SomeComponent} foo="bar" answer={42}>
  it can have children
</svelte:component>

<p>this paragraph is unstyled</p>

<button on:click="set({ category: 'cats' })">show cat videos</button>

<select bind:value=category>
  <option>bananas</option>
  <option>cats</option>
</select>

<script>
  const videos = {
    bananas: [
      'a monkey eating a banana',
      'a dog eating a banana'
    ],
    cats: [
      'a cat riding a unicycle'
    ]
  };

  export default {
    components: {
      List: './_components/List.html'
    },

    data() {
      return {
        SomeComponent
      }
    },

    computed: {
      videos: ({ category }) => videos[category] || [],
    },

    preload({ params, query }) {
      // we can do `this.fetch(...)` which is like an isomorphic fetch
      // return either a promise or some data
      return {
        category: params.category
      }
    }
  };
</script>