1<script lang="typescript">
2 // Nested is defined elsewhere
3 import Nested from './Nested.svelte';
4
5 let src = 'example.png';
6 let name = 'world';
7
8 let names = [
9 { id: 'id0001', name: 'Name 1' },
10 { id: 'id0002', name: 'Name 2' },
11 { id: 'id0003', name: 'Name 3' }
12 ];
13</script>
14
15<style>
16 h1 {
17 color: red;
18 font-family: Arial, Helvetica, sans-serif;
19 font-size: 2em;
20 }
21</style>
22
23<style lang="sass">
24$color: red
25h1
26 color: $color
27 font-family: Arial, Helvetica, sans-serif
28 font-size: 2em
29</style>
30
31<h1>Hello {name}!</h1>
32<img {src} alt="Example image">
33
34<!-- import external component -->
35<Nested/>
36
37<ul>
38 {#each names as { id, name }, i}
39 <li>{name} ({id})</li>
40 {/each}
41</ul>
42
43<template>
44 <form on:submit|preventDefault="{submitSearch}">
45 <input type="search" bind:value="{name}" required />
46 <button type="submit">Search</button>
47 </form>
48
49 {#if porridge.temperature > 100}
50 <p>too hot!</p>
51 {:else if 80 > porridge.temperature}
52 <p>too cold!</p>
53 {:else}
54 <p>just right!</p>
55 {/if}
56
57 {#await promise}
58 <!-- promise is pending -->
59 <p>waiting for the promise to resolve...</p>
60 {:then value}
61 <!-- promise was fulfilled -->
62 <p>The value is {value}</p>
63 {:catch error}
64 <!-- promise was rejected -->
65 <p>Something went wrong: {error.message}</p>
66 {/await}
67
68 {#await promise then value}
69 <p>The value is {value}</p>
70 {/await}
71
72 {#await promise catch error}
73 <p>The error is {error}</p>
74 {/await}
75
76 {#key value}
77 <div transition:fade>{value}</div>
78 {/key}
79
80 <div class="blog-post">
81 <h1>{post.title}</h1>
82 {@html post.content}
83 </div>
84
85 {@debug user}
86</template>View as plain text