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