-
Notifications
You must be signed in to change notification settings - Fork 215
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
69 changed files
with
381 additions
and
7 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<script> | ||
let name = $state("John"); | ||
</script> | ||
|
||
<h1>Hello {name}</h1> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
let name = $state("John"); | ||
name = "Jane"; | ||
</script> | ||
|
||
<h1>Hello {name}</h1> |
File renamed without changes.
6 changes: 6 additions & 0 deletions
6
content/1-reactivity/3-computed-state/svelte5/DoubleCount.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
let count = $state(10); | ||
const doubleCount = $derived(count * 2); | ||
</script> | ||
|
||
<div>{doubleCount}</div> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<h1 class="title">I am red</h1> | ||
<button style="font-size: 10rem;">I am a button</button> | ||
|
||
<style> | ||
.title { | ||
color: red; | ||
} | ||
</style> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script> | ||
const colors = ["red", "green", "blue"]; | ||
</script> | ||
|
||
<ul> | ||
{#each colors as color (color)} | ||
<li>{color}</li> | ||
{/each} | ||
</ul> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<script> | ||
let count = $state(0); | ||
function incrementCount() { | ||
count++; | ||
} | ||
</script> | ||
|
||
<p>Counter: {count}</p> | ||
<button on:click={incrementCount}>+1</button> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script> | ||
let inputElement; | ||
$effect(() => { | ||
inputElement.focus(); | ||
}); | ||
</script> | ||
|
||
<input bind:this={inputElement} /> |
File renamed without changes.
23 changes: 23 additions & 0 deletions
23
content/2-templating/6-conditional/svelte5/TrafficLight.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<script> | ||
const TRAFFIC_LIGHTS = ["red", "orange", "green"]; | ||
let lightIndex = $state(0); | ||
const light = $derived(TRAFFIC_LIGHTS[lightIndex]); | ||
function nextLight() { | ||
lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length; | ||
} | ||
</script> | ||
|
||
<button on:click={nextLight}>Next light</button> | ||
<p>Light is: {light}</p> | ||
<p> | ||
You must | ||
{#if light === "red"} | ||
<span>STOP</span> | ||
{:else if light === "orange"} | ||
<span>SLOW DOWN</span> | ||
{:else if light === "green"} | ||
<span>GO</span> | ||
{/if} | ||
</p> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<script> | ||
let pageTitle = ""; | ||
$effect(() => { | ||
pageTitle = document.title; | ||
}); | ||
</script> | ||
|
||
<p>Page title is: {pageTitle}</p> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<script> | ||
let time = $state(new Date().toLocaleTimeString()); | ||
$effect(() => { | ||
const timer = setInterval(() => { | ||
time = new Date().toLocaleTimeString(); | ||
}, 1000); | ||
return () => clearInterval(timer); | ||
}); | ||
</script> | ||
|
||
<p>Current time: {time}</p> |
File renamed without changes.
File renamed without changes.
10 changes: 10 additions & 0 deletions
10
content/4-component-composition/1-props/svelte5/App.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<script> | ||
import UserProfile from "./UserProfile.svelte"; | ||
</script> | ||
|
||
<UserProfile | ||
name="John" | ||
age={20} | ||
favouriteColors={["green", "blue", "red"]} | ||
isAvailable | ||
/> |
13 changes: 13 additions & 0 deletions
13
content/4-component-composition/1-props/svelte5/UserProfile.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<script> | ||
const { | ||
name = "", | ||
age = null, | ||
favouriteColors = [], | ||
isAvailable = false, | ||
} = $props(); | ||
</script> | ||
|
||
<p>My name is {name}!</p> | ||
<p>My age is {age}!</p> | ||
<p>My favourite colors are {favouriteColors.join(", ")}!</p> | ||
<p>I am {isAvailable ? "available" : "not available"}</p> |
File renamed without changes.
File renamed without changes.
17 changes: 17 additions & 0 deletions
17
content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<script> | ||
import { createEventDispatcher } from "svelte"; | ||
const dispatch = createEventDispatcher(); | ||
function clickYes() { | ||
dispatch("yes"); | ||
} | ||
function clickNo() { | ||
dispatch("no"); | ||
} | ||
</script> | ||
|
||
<button on:click={clickYes}> YES </button> | ||
|
||
<button on:click={clickNo}> NO </button> |
17 changes: 17 additions & 0 deletions
17
content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<script> | ||
import AnswerButton from "./AnswerButton.svelte"; | ||
let isHappy = $state(true); | ||
function onAnswerNo() { | ||
isHappy = false; | ||
} | ||
function onAnswerYes() { | ||
isHappy = true; | ||
} | ||
</script> | ||
|
||
<p>Are you happy?</p> | ||
<AnswerButton on:yes={onAnswerYes} on:no={onAnswerNo} /> | ||
<p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<script> | ||
import FunnyButton from "./FunnyButton.svelte"; | ||
</script> | ||
|
||
<FunnyButton>Click me!</FunnyButton> |
5 changes: 5 additions & 0 deletions
5
content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<button | ||
style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;" | ||
> | ||
<slot /> | ||
</button> |
File renamed without changes.
File renamed without changes.
6 changes: 6 additions & 0 deletions
6
content/4-component-composition/4-slot-fallback/svelte5/App.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
import FunnyButton from "./FunnyButton.svelte"; | ||
</script> | ||
|
||
<FunnyButton /> | ||
<FunnyButton>I got content!</FunnyButton> |
7 changes: 7 additions & 0 deletions
7
content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<button | ||
style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;" | ||
> | ||
<slot> | ||
<span>No content found</span> | ||
</slot> | ||
</button> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
17 changes: 17 additions & 0 deletions
17
content/4-component-composition/5-context/svelte5/App.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<script> | ||
import { setContext } from "svelte"; | ||
import UserProfile from "./UserProfile.svelte"; | ||
import createUserState from "./createUserState.js"; | ||
// In a real app, you would fetch the user data from an API | ||
const user = createUserState({ | ||
id: 1, | ||
username: "unicorn42", | ||
email: "[email protected]", | ||
}); | ||
setContext("user", user); | ||
</script> | ||
|
||
<h1>Welcome back, {user.value.username}</h1> | ||
<UserProfile /> |
14 changes: 14 additions & 0 deletions
14
content/4-component-composition/5-context/svelte5/UserProfile.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<script> | ||
import { getContext } from "svelte"; | ||
const user = getContext("user"); | ||
</script> | ||
|
||
<div> | ||
<h2>My Profile</h2> | ||
<p>Username: {user.value.username}</p> | ||
<p>Email: {user.value.email}</p> | ||
<button on:click={() => user.updateUsername("Jane")}> | ||
Update username to Jane | ||
</button> | ||
</div> |
14 changes: 14 additions & 0 deletions
14
content/4-component-composition/5-context/svelte5/createUserState.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
export default function createUserState(initial) { | ||
let user = $state(initial); | ||
return { | ||
get value() { | ||
return user; | ||
}, | ||
updateUsername(newUsername) { | ||
user = { | ||
...user, | ||
username: newUsername, | ||
}; | ||
}, | ||
}; | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
let text = $state("Hello World"); | ||
</script> | ||
|
||
<p>{text}</p> | ||
<input bind:value={text} /> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
let isAvailable = $state(false); | ||
</script> | ||
|
||
<input id="is-available" type="checkbox" bind:checked={isAvailable} /> | ||
<label for="is-available">Is available</label> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<script> | ||
let picked = $state("red"); | ||
</script> | ||
|
||
<div>Picked: {picked}</div> | ||
|
||
<input id="blue-pill" bind:group={picked} type="radio" value="blue" /> | ||
<label for="blue-pill">Blue pill</label> | ||
|
||
<input id="red-pill" bind:group={picked} type="radio" value="red" /> | ||
<label for="red-pill">Red pill</label> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<script> | ||
let selectedColorId = $state(2); | ||
const colors = [ | ||
{ id: 1, text: "red" }, | ||
{ id: 2, text: "blue" }, | ||
{ id: 3, text: "green" }, | ||
{ id: 4, text: "gray", isDisabled: true }, | ||
]; | ||
</script> | ||
|
||
<select bind:value={selectedColorId}> | ||
{#each colors as color} | ||
<option value={color.id} disabled={color.isDisabled}> | ||
{color.text} | ||
</option> | ||
{/each} | ||
</select> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<h1>Hello world</h1> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<h1>Hello world</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import App from "./App.svelte"; | ||
|
||
const app = new App({ | ||
target: document.getElementById("app"), | ||
}); | ||
|
||
export default app; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<!doctype html> | ||
<html> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="./app.js"></script> | ||
</body> | ||
</html> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<script> | ||
import useFetchUsers from "./useFetchUsers"; | ||
const response = useFetchUsers(); | ||
</script> | ||
|
||
{#if response.isLoading} | ||
<p>Fetching users...</p> | ||
{:else if response.error} | ||
<p>An error occured while fetching users</p> | ||
{:else if response.users} | ||
<ul> | ||
{#each response.users as user} | ||
<li> | ||
<img src={user.picture.thumbnail} alt="user" /> | ||
<p> | ||
{user.name.first} | ||
{user.name.last} | ||
</p> | ||
</li> | ||
{/each} | ||
</ul> | ||
{/if} |
29 changes: 29 additions & 0 deletions
29
content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
export default function useFetchUsers() { | ||
const users = $state(); | ||
const error = $state(); | ||
const isLoading = $state(false); | ||
|
||
async function fetchData() { | ||
isLoading = true; | ||
try { | ||
const response = await fetch("https://randomuser.me/api/?results=3"); | ||
users = (await response.json()).results; | ||
} catch (err) { | ||
error = err; | ||
} | ||
isLoading = false; | ||
} | ||
fetchData(); | ||
|
||
return { | ||
get isLoading() { | ||
return isLoading; | ||
}, | ||
get error() { | ||
return error; | ||
}, | ||
get users() { | ||
return users; | ||
}, | ||
}; | ||
} |
File renamed without changes.
12 changes: 12 additions & 0 deletions
12
content/7-webapp-features/3-router-link/svelte5/sveltekit.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a> | ||
|
||
```svelte | ||
<ul> | ||
<li> | ||
<a href="/">Home</a> | ||
</li> | ||
<li> | ||
<a href="/about">About us</a> | ||
</li> | ||
</ul> | ||
``` |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a> | ||
|
||
``` | ||
|-- routes/ | ||
|-- +page.svelte // index page "/" | ||
|-- about/ | ||
|-- +page.svelte // about page "/about" | ||
|-- +error.svelte // handle HTTP errors 404, 500,... | ||
|-- +layout.svelte // global app layout | ||
``` |
Oops, something went wrong.