From 49dca5b3aa2f25ef38c0e5319ba4e58775fba042 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 20 Sep 2023 21:12:43 -0700
Subject: [PATCH] feat: add Svelte 5 runes (#188)

---
 .../{svelte => svelte4}/Name.svelte           |  0
 .../1-declare-state/svelte5/Name.svelte       |  5 ++++
 .../{svelte => svelte4}/Name.svelte           |  0
 .../2-update-state/svelte5/Name.svelte        |  6 ++++
 .../{svelte => svelte4}/DoubleCount.svelte    |  0
 .../svelte5/DoubleCount.svelte                |  6 ++++
 .../{svelte => svelte4}/HelloWorld.svelte     |  0
 .../svelte5/HelloWorld.svelte}                |  0
 .../{svelte => svelte4}/CssStyle.svelte       |  0
 .../2-styling/svelte5/CssStyle.svelte         |  8 +++++
 .../3-loop/{svelte => svelte4}/Colors.svelte  |  0
 .../2-templating/3-loop/svelte5/Colors.svelte |  9 ++++++
 .../{svelte => svelte4}/Counter.svelte        |  0
 .../4-event-click/svelte5/Counter.svelte      | 10 +++++++
 .../{svelte => svelte4}/InputFocused.svelte   |  0
 .../5-dom-ref/svelte5/InputFocused.svelte     |  9 ++++++
 .../{svelte => svelte4}/TrafficLight.svelte   |  0
 .../6-conditional/svelte5/TrafficLight.svelte | 23 +++++++++++++++
 .../{svelte => svelte4}/PageTitle.svelte      |  0
 .../1-on-mount/svelte5/PageTitle.svelte       |  8 +++++
 .../{svelte => svelte4}/Time.svelte           |  0
 .../2-on-unmount/svelte5/Time.svelte          | 13 +++++++++
 .../1-props/{svelte => svelte4}/App.svelte    |  0
 .../{svelte => svelte4}/UserProfile.svelte    |  0
 .../1-props/svelte5/App.svelte                | 10 +++++++
 .../1-props/svelte5/UserProfile.svelte        | 13 +++++++++
 .../{svelte => svelte4}/AnswerButton.svelte   |  0
 .../{svelte => svelte4}/App.svelte            |  0
 .../svelte5/AnswerButton.svelte               | 17 +++++++++++
 .../2-emit-to-parent/svelte5/App.svelte       | 17 +++++++++++
 .../3-slot/{svelte => svelte4}/App.svelte     |  0
 .../{svelte => svelte4}/FunnyButton.svelte    |  0
 .../3-slot/svelte5/App.svelte                 |  5 ++++
 .../3-slot/svelte5/FunnyButton.svelte         |  5 ++++
 .../{svelte => svelte4}/App.svelte            |  0
 .../{svelte => svelte4}/FunnyButton.svelte    |  0
 .../4-slot-fallback/svelte5/App.svelte        |  6 ++++
 .../svelte5/FunnyButton.svelte                |  7 +++++
 .../5-context/{svelte => svelte4}/App.svelte  |  0
 .../{svelte => svelte4}/UserProfile.svelte    |  0
 .../{svelte => svelte4}/createUserStore.js    |  0
 .../5-context/svelte5/App.svelte              | 17 +++++++++++
 .../5-context/svelte5/UserProfile.svelte      | 14 +++++++++
 .../5-context/svelte5/createUserState.js      | 14 +++++++++
 .../{svelte => svelte4}/InputHello.svelte     |  0
 .../1-input-text/svelte5/InputHello.svelte    |  6 ++++
 .../{svelte => svelte4}/IsAvailable.svelte    |  0
 .../2-checkbox/svelte5/IsAvailable.svelte     |  6 ++++
 .../{svelte => svelte4}/PickPill.svelte       |  0
 .../3-radio/svelte5/PickPill.svelte           | 11 +++++++
 .../{svelte => svelte4}/ColorSelect.svelte    |  0
 .../4-select/svelte5/ColorSelect.svelte       | 18 ++++++++++++
 .../1-render-app/svelte4/App.svelte           |  1 +
 .../1-render-app/{svelte => svelte4}/app.js   |  0
 .../{svelte => svelte4}/index.html            |  0
 .../1-render-app/svelte5/App.svelte           |  1 +
 .../1-render-app/svelte5/app.js               |  7 +++++
 .../1-render-app/svelte5/index.html           |  7 +++++
 .../{svelte => svelte4}/App.svelte            |  0
 .../{svelte => svelte4}/useFetchUsers.js      |  0
 .../2-fetch-data/svelte5/App.svelte           | 23 +++++++++++++++
 .../2-fetch-data/svelte5/useFetchUsers.js     | 29 +++++++++++++++++++
 .../{svelte => svelte4}/sveltekit.md          |  0
 .../3-router-link/svelte5/sveltekit.md        | 12 ++++++++
 .../{svelte => svelte4}/sveltekit.md          |  0
 .../4-routing/svelte5/sveltekit.md            | 10 +++++++
 frameworks.mjs                                | 22 ++++++++++++--
 package.json                                  |  3 +-
 src/App.svelte                                | 10 +++++--
 69 files changed, 381 insertions(+), 7 deletions(-)
 rename content/1-reactivity/1-declare-state/{svelte => svelte4}/Name.svelte (100%)
 create mode 100644 content/1-reactivity/1-declare-state/svelte5/Name.svelte
 rename content/1-reactivity/2-update-state/{svelte => svelte4}/Name.svelte (100%)
 create mode 100644 content/1-reactivity/2-update-state/svelte5/Name.svelte
 rename content/1-reactivity/3-computed-state/{svelte => svelte4}/DoubleCount.svelte (100%)
 create mode 100644 content/1-reactivity/3-computed-state/svelte5/DoubleCount.svelte
 rename content/2-templating/1-minimal-template/{svelte => svelte4}/HelloWorld.svelte (100%)
 rename content/{7-webapp-features/1-render-app/svelte/App.svelte => 2-templating/1-minimal-template/svelte5/HelloWorld.svelte} (100%)
 rename content/2-templating/2-styling/{svelte => svelte4}/CssStyle.svelte (100%)
 create mode 100644 content/2-templating/2-styling/svelte5/CssStyle.svelte
 rename content/2-templating/3-loop/{svelte => svelte4}/Colors.svelte (100%)
 create mode 100644 content/2-templating/3-loop/svelte5/Colors.svelte
 rename content/2-templating/4-event-click/{svelte => svelte4}/Counter.svelte (100%)
 create mode 100644 content/2-templating/4-event-click/svelte5/Counter.svelte
 rename content/2-templating/5-dom-ref/{svelte => svelte4}/InputFocused.svelte (100%)
 create mode 100644 content/2-templating/5-dom-ref/svelte5/InputFocused.svelte
 rename content/2-templating/6-conditional/{svelte => svelte4}/TrafficLight.svelte (100%)
 create mode 100644 content/2-templating/6-conditional/svelte5/TrafficLight.svelte
 rename content/3-lifecycle/1-on-mount/{svelte => svelte4}/PageTitle.svelte (100%)
 create mode 100644 content/3-lifecycle/1-on-mount/svelte5/PageTitle.svelte
 rename content/3-lifecycle/2-on-unmount/{svelte => svelte4}/Time.svelte (100%)
 create mode 100644 content/3-lifecycle/2-on-unmount/svelte5/Time.svelte
 rename content/4-component-composition/1-props/{svelte => svelte4}/App.svelte (100%)
 rename content/4-component-composition/1-props/{svelte => svelte4}/UserProfile.svelte (100%)
 create mode 100644 content/4-component-composition/1-props/svelte5/App.svelte
 create mode 100644 content/4-component-composition/1-props/svelte5/UserProfile.svelte
 rename content/4-component-composition/2-emit-to-parent/{svelte => svelte4}/AnswerButton.svelte (100%)
 rename content/4-component-composition/2-emit-to-parent/{svelte => svelte4}/App.svelte (100%)
 create mode 100644 content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
 create mode 100644 content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
 rename content/4-component-composition/3-slot/{svelte => svelte4}/App.svelte (100%)
 rename content/4-component-composition/3-slot/{svelte => svelte4}/FunnyButton.svelte (100%)
 create mode 100644 content/4-component-composition/3-slot/svelte5/App.svelte
 create mode 100644 content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
 rename content/4-component-composition/4-slot-fallback/{svelte => svelte4}/App.svelte (100%)
 rename content/4-component-composition/4-slot-fallback/{svelte => svelte4}/FunnyButton.svelte (100%)
 create mode 100644 content/4-component-composition/4-slot-fallback/svelte5/App.svelte
 create mode 100644 content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
 rename content/4-component-composition/5-context/{svelte => svelte4}/App.svelte (100%)
 rename content/4-component-composition/5-context/{svelte => svelte4}/UserProfile.svelte (100%)
 rename content/4-component-composition/5-context/{svelte => svelte4}/createUserStore.js (100%)
 create mode 100644 content/4-component-composition/5-context/svelte5/App.svelte
 create mode 100644 content/4-component-composition/5-context/svelte5/UserProfile.svelte
 create mode 100644 content/4-component-composition/5-context/svelte5/createUserState.js
 rename content/6-form-input/1-input-text/{svelte => svelte4}/InputHello.svelte (100%)
 create mode 100644 content/6-form-input/1-input-text/svelte5/InputHello.svelte
 rename content/6-form-input/2-checkbox/{svelte => svelte4}/IsAvailable.svelte (100%)
 create mode 100644 content/6-form-input/2-checkbox/svelte5/IsAvailable.svelte
 rename content/6-form-input/3-radio/{svelte => svelte4}/PickPill.svelte (100%)
 create mode 100644 content/6-form-input/3-radio/svelte5/PickPill.svelte
 rename content/6-form-input/4-select/{svelte => svelte4}/ColorSelect.svelte (100%)
 create mode 100644 content/6-form-input/4-select/svelte5/ColorSelect.svelte
 create mode 100644 content/7-webapp-features/1-render-app/svelte4/App.svelte
 rename content/7-webapp-features/1-render-app/{svelte => svelte4}/app.js (100%)
 rename content/7-webapp-features/1-render-app/{svelte => svelte4}/index.html (100%)
 create mode 100644 content/7-webapp-features/1-render-app/svelte5/App.svelte
 create mode 100644 content/7-webapp-features/1-render-app/svelte5/app.js
 create mode 100644 content/7-webapp-features/1-render-app/svelte5/index.html
 rename content/7-webapp-features/2-fetch-data/{svelte => svelte4}/App.svelte (100%)
 rename content/7-webapp-features/2-fetch-data/{svelte => svelte4}/useFetchUsers.js (100%)
 create mode 100644 content/7-webapp-features/2-fetch-data/svelte5/App.svelte
 create mode 100644 content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.js
 rename content/7-webapp-features/3-router-link/{svelte => svelte4}/sveltekit.md (100%)
 create mode 100644 content/7-webapp-features/3-router-link/svelte5/sveltekit.md
 rename content/7-webapp-features/4-routing/{svelte => svelte4}/sveltekit.md (100%)
 create mode 100644 content/7-webapp-features/4-routing/svelte5/sveltekit.md

diff --git a/content/1-reactivity/1-declare-state/svelte/Name.svelte b/content/1-reactivity/1-declare-state/svelte4/Name.svelte
similarity index 100%
rename from content/1-reactivity/1-declare-state/svelte/Name.svelte
rename to content/1-reactivity/1-declare-state/svelte4/Name.svelte
diff --git a/content/1-reactivity/1-declare-state/svelte5/Name.svelte b/content/1-reactivity/1-declare-state/svelte5/Name.svelte
new file mode 100644
index 0000000..7f65226
--- /dev/null
+++ b/content/1-reactivity/1-declare-state/svelte5/Name.svelte
@@ -0,0 +1,5 @@
+<script>
+  let name = $state("John");
+</script>
+
+<h1>Hello {name}</h1>
diff --git a/content/1-reactivity/2-update-state/svelte/Name.svelte b/content/1-reactivity/2-update-state/svelte4/Name.svelte
similarity index 100%
rename from content/1-reactivity/2-update-state/svelte/Name.svelte
rename to content/1-reactivity/2-update-state/svelte4/Name.svelte
diff --git a/content/1-reactivity/2-update-state/svelte5/Name.svelte b/content/1-reactivity/2-update-state/svelte5/Name.svelte
new file mode 100644
index 0000000..a6a11e1
--- /dev/null
+++ b/content/1-reactivity/2-update-state/svelte5/Name.svelte
@@ -0,0 +1,6 @@
+<script>
+  let name = $state("John");
+  name = "Jane";
+</script>
+
+<h1>Hello {name}</h1>
diff --git a/content/1-reactivity/3-computed-state/svelte/DoubleCount.svelte b/content/1-reactivity/3-computed-state/svelte4/DoubleCount.svelte
similarity index 100%
rename from content/1-reactivity/3-computed-state/svelte/DoubleCount.svelte
rename to content/1-reactivity/3-computed-state/svelte4/DoubleCount.svelte
diff --git a/content/1-reactivity/3-computed-state/svelte5/DoubleCount.svelte b/content/1-reactivity/3-computed-state/svelte5/DoubleCount.svelte
new file mode 100644
index 0000000..a685a81
--- /dev/null
+++ b/content/1-reactivity/3-computed-state/svelte5/DoubleCount.svelte
@@ -0,0 +1,6 @@
+<script>
+  let count = $state(10);
+  const doubleCount = $derived(count * 2);
+</script>
+
+<div>{doubleCount}</div>
diff --git a/content/2-templating/1-minimal-template/svelte/HelloWorld.svelte b/content/2-templating/1-minimal-template/svelte4/HelloWorld.svelte
similarity index 100%
rename from content/2-templating/1-minimal-template/svelte/HelloWorld.svelte
rename to content/2-templating/1-minimal-template/svelte4/HelloWorld.svelte
diff --git a/content/7-webapp-features/1-render-app/svelte/App.svelte b/content/2-templating/1-minimal-template/svelte5/HelloWorld.svelte
similarity index 100%
rename from content/7-webapp-features/1-render-app/svelte/App.svelte
rename to content/2-templating/1-minimal-template/svelte5/HelloWorld.svelte
diff --git a/content/2-templating/2-styling/svelte/CssStyle.svelte b/content/2-templating/2-styling/svelte4/CssStyle.svelte
similarity index 100%
rename from content/2-templating/2-styling/svelte/CssStyle.svelte
rename to content/2-templating/2-styling/svelte4/CssStyle.svelte
diff --git a/content/2-templating/2-styling/svelte5/CssStyle.svelte b/content/2-templating/2-styling/svelte5/CssStyle.svelte
new file mode 100644
index 0000000..dac20ee
--- /dev/null
+++ b/content/2-templating/2-styling/svelte5/CssStyle.svelte
@@ -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>
diff --git a/content/2-templating/3-loop/svelte/Colors.svelte b/content/2-templating/3-loop/svelte4/Colors.svelte
similarity index 100%
rename from content/2-templating/3-loop/svelte/Colors.svelte
rename to content/2-templating/3-loop/svelte4/Colors.svelte
diff --git a/content/2-templating/3-loop/svelte5/Colors.svelte b/content/2-templating/3-loop/svelte5/Colors.svelte
new file mode 100644
index 0000000..4ce949e
--- /dev/null
+++ b/content/2-templating/3-loop/svelte5/Colors.svelte
@@ -0,0 +1,9 @@
+<script>
+  const colors = ["red", "green", "blue"];
+</script>
+
+<ul>
+  {#each colors as color (color)}
+    <li>{color}</li>
+  {/each}
+</ul>
diff --git a/content/2-templating/4-event-click/svelte/Counter.svelte b/content/2-templating/4-event-click/svelte4/Counter.svelte
similarity index 100%
rename from content/2-templating/4-event-click/svelte/Counter.svelte
rename to content/2-templating/4-event-click/svelte4/Counter.svelte
diff --git a/content/2-templating/4-event-click/svelte5/Counter.svelte b/content/2-templating/4-event-click/svelte5/Counter.svelte
new file mode 100644
index 0000000..1a6eb50
--- /dev/null
+++ b/content/2-templating/4-event-click/svelte5/Counter.svelte
@@ -0,0 +1,10 @@
+<script>
+  let count = $state(0);
+
+  function incrementCount() {
+    count++;
+  }
+</script>
+
+<p>Counter: {count}</p>
+<button on:click={incrementCount}>+1</button>
diff --git a/content/2-templating/5-dom-ref/svelte/InputFocused.svelte b/content/2-templating/5-dom-ref/svelte4/InputFocused.svelte
similarity index 100%
rename from content/2-templating/5-dom-ref/svelte/InputFocused.svelte
rename to content/2-templating/5-dom-ref/svelte4/InputFocused.svelte
diff --git a/content/2-templating/5-dom-ref/svelte5/InputFocused.svelte b/content/2-templating/5-dom-ref/svelte5/InputFocused.svelte
new file mode 100644
index 0000000..f0ae463
--- /dev/null
+++ b/content/2-templating/5-dom-ref/svelte5/InputFocused.svelte
@@ -0,0 +1,9 @@
+<script>
+  let inputElement;
+
+  $effect(() => {
+    inputElement.focus();
+  });
+</script>
+
+<input bind:this={inputElement} />
diff --git a/content/2-templating/6-conditional/svelte/TrafficLight.svelte b/content/2-templating/6-conditional/svelte4/TrafficLight.svelte
similarity index 100%
rename from content/2-templating/6-conditional/svelte/TrafficLight.svelte
rename to content/2-templating/6-conditional/svelte4/TrafficLight.svelte
diff --git a/content/2-templating/6-conditional/svelte5/TrafficLight.svelte b/content/2-templating/6-conditional/svelte5/TrafficLight.svelte
new file mode 100644
index 0000000..634d7d4
--- /dev/null
+++ b/content/2-templating/6-conditional/svelte5/TrafficLight.svelte
@@ -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>
diff --git a/content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte b/content/3-lifecycle/1-on-mount/svelte4/PageTitle.svelte
similarity index 100%
rename from content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte
rename to content/3-lifecycle/1-on-mount/svelte4/PageTitle.svelte
diff --git a/content/3-lifecycle/1-on-mount/svelte5/PageTitle.svelte b/content/3-lifecycle/1-on-mount/svelte5/PageTitle.svelte
new file mode 100644
index 0000000..7bf9eab
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/svelte5/PageTitle.svelte
@@ -0,0 +1,8 @@
+<script>
+  let pageTitle = "";
+  $effect(() => {
+    pageTitle = document.title;
+  });
+</script>
+
+<p>Page title is: {pageTitle}</p>
diff --git a/content/3-lifecycle/2-on-unmount/svelte/Time.svelte b/content/3-lifecycle/2-on-unmount/svelte4/Time.svelte
similarity index 100%
rename from content/3-lifecycle/2-on-unmount/svelte/Time.svelte
rename to content/3-lifecycle/2-on-unmount/svelte4/Time.svelte
diff --git a/content/3-lifecycle/2-on-unmount/svelte5/Time.svelte b/content/3-lifecycle/2-on-unmount/svelte5/Time.svelte
new file mode 100644
index 0000000..15d303a
--- /dev/null
+++ b/content/3-lifecycle/2-on-unmount/svelte5/Time.svelte
@@ -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>
diff --git a/content/4-component-composition/1-props/svelte/App.svelte b/content/4-component-composition/1-props/svelte4/App.svelte
similarity index 100%
rename from content/4-component-composition/1-props/svelte/App.svelte
rename to content/4-component-composition/1-props/svelte4/App.svelte
diff --git a/content/4-component-composition/1-props/svelte/UserProfile.svelte b/content/4-component-composition/1-props/svelte4/UserProfile.svelte
similarity index 100%
rename from content/4-component-composition/1-props/svelte/UserProfile.svelte
rename to content/4-component-composition/1-props/svelte4/UserProfile.svelte
diff --git a/content/4-component-composition/1-props/svelte5/App.svelte b/content/4-component-composition/1-props/svelte5/App.svelte
new file mode 100644
index 0000000..4d39c2e
--- /dev/null
+++ b/content/4-component-composition/1-props/svelte5/App.svelte
@@ -0,0 +1,10 @@
+<script>
+  import UserProfile from "./UserProfile.svelte";
+</script>
+
+<UserProfile
+  name="John"
+  age={20}
+  favouriteColors={["green", "blue", "red"]}
+  isAvailable
+/>
diff --git a/content/4-component-composition/1-props/svelte5/UserProfile.svelte b/content/4-component-composition/1-props/svelte5/UserProfile.svelte
new file mode 100644
index 0000000..a18a48d
--- /dev/null
+++ b/content/4-component-composition/1-props/svelte5/UserProfile.svelte
@@ -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>
diff --git a/content/4-component-composition/2-emit-to-parent/svelte/AnswerButton.svelte b/content/4-component-composition/2-emit-to-parent/svelte4/AnswerButton.svelte
similarity index 100%
rename from content/4-component-composition/2-emit-to-parent/svelte/AnswerButton.svelte
rename to content/4-component-composition/2-emit-to-parent/svelte4/AnswerButton.svelte
diff --git a/content/4-component-composition/2-emit-to-parent/svelte/App.svelte b/content/4-component-composition/2-emit-to-parent/svelte4/App.svelte
similarity index 100%
rename from content/4-component-composition/2-emit-to-parent/svelte/App.svelte
rename to content/4-component-composition/2-emit-to-parent/svelte4/App.svelte
diff --git a/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte b/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
new file mode 100644
index 0000000..97630c6
--- /dev/null
+++ b/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
@@ -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>
diff --git a/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte b/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
new file mode 100644
index 0000000..a535059
--- /dev/null
+++ b/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
@@ -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>
diff --git a/content/4-component-composition/3-slot/svelte/App.svelte b/content/4-component-composition/3-slot/svelte4/App.svelte
similarity index 100%
rename from content/4-component-composition/3-slot/svelte/App.svelte
rename to content/4-component-composition/3-slot/svelte4/App.svelte
diff --git a/content/4-component-composition/3-slot/svelte/FunnyButton.svelte b/content/4-component-composition/3-slot/svelte4/FunnyButton.svelte
similarity index 100%
rename from content/4-component-composition/3-slot/svelte/FunnyButton.svelte
rename to content/4-component-composition/3-slot/svelte4/FunnyButton.svelte
diff --git a/content/4-component-composition/3-slot/svelte5/App.svelte b/content/4-component-composition/3-slot/svelte5/App.svelte
new file mode 100644
index 0000000..483f27f
--- /dev/null
+++ b/content/4-component-composition/3-slot/svelte5/App.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FunnyButton from "./FunnyButton.svelte";
+</script>
+
+<FunnyButton>Click me!</FunnyButton>
diff --git a/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte b/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
new file mode 100644
index 0000000..5f6a3c2
--- /dev/null
+++ b/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
@@ -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>
diff --git a/content/4-component-composition/4-slot-fallback/svelte/App.svelte b/content/4-component-composition/4-slot-fallback/svelte4/App.svelte
similarity index 100%
rename from content/4-component-composition/4-slot-fallback/svelte/App.svelte
rename to content/4-component-composition/4-slot-fallback/svelte4/App.svelte
diff --git a/content/4-component-composition/4-slot-fallback/svelte/FunnyButton.svelte b/content/4-component-composition/4-slot-fallback/svelte4/FunnyButton.svelte
similarity index 100%
rename from content/4-component-composition/4-slot-fallback/svelte/FunnyButton.svelte
rename to content/4-component-composition/4-slot-fallback/svelte4/FunnyButton.svelte
diff --git a/content/4-component-composition/4-slot-fallback/svelte5/App.svelte b/content/4-component-composition/4-slot-fallback/svelte5/App.svelte
new file mode 100644
index 0000000..3d64cf4
--- /dev/null
+++ b/content/4-component-composition/4-slot-fallback/svelte5/App.svelte
@@ -0,0 +1,6 @@
+<script>
+  import FunnyButton from "./FunnyButton.svelte";
+</script>
+
+<FunnyButton />
+<FunnyButton>I got content!</FunnyButton>
diff --git a/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte b/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
new file mode 100644
index 0000000..6a5cbd3
--- /dev/null
+++ b/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
@@ -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>
diff --git a/content/4-component-composition/5-context/svelte/App.svelte b/content/4-component-composition/5-context/svelte4/App.svelte
similarity index 100%
rename from content/4-component-composition/5-context/svelte/App.svelte
rename to content/4-component-composition/5-context/svelte4/App.svelte
diff --git a/content/4-component-composition/5-context/svelte/UserProfile.svelte b/content/4-component-composition/5-context/svelte4/UserProfile.svelte
similarity index 100%
rename from content/4-component-composition/5-context/svelte/UserProfile.svelte
rename to content/4-component-composition/5-context/svelte4/UserProfile.svelte
diff --git a/content/4-component-composition/5-context/svelte/createUserStore.js b/content/4-component-composition/5-context/svelte4/createUserStore.js
similarity index 100%
rename from content/4-component-composition/5-context/svelte/createUserStore.js
rename to content/4-component-composition/5-context/svelte4/createUserStore.js
diff --git a/content/4-component-composition/5-context/svelte5/App.svelte b/content/4-component-composition/5-context/svelte5/App.svelte
new file mode 100644
index 0000000..427a055
--- /dev/null
+++ b/content/4-component-composition/5-context/svelte5/App.svelte
@@ -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: "unicorn42@example.com",
+  });
+
+  setContext("user", user);
+</script>
+
+<h1>Welcome back, {user.value.username}</h1>
+<UserProfile />
diff --git a/content/4-component-composition/5-context/svelte5/UserProfile.svelte b/content/4-component-composition/5-context/svelte5/UserProfile.svelte
new file mode 100644
index 0000000..7eb0532
--- /dev/null
+++ b/content/4-component-composition/5-context/svelte5/UserProfile.svelte
@@ -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>
diff --git a/content/4-component-composition/5-context/svelte5/createUserState.js b/content/4-component-composition/5-context/svelte5/createUserState.js
new file mode 100644
index 0000000..a76e93b
--- /dev/null
+++ b/content/4-component-composition/5-context/svelte5/createUserState.js
@@ -0,0 +1,14 @@
+export default function createUserState(initial) {
+  let user = $state(initial);
+  return {
+    get value() {
+      return user;
+    },
+    updateUsername(newUsername) {
+      user = {
+        ...user,
+        username: newUsername,
+      };
+    },
+  };
+}
diff --git a/content/6-form-input/1-input-text/svelte/InputHello.svelte b/content/6-form-input/1-input-text/svelte4/InputHello.svelte
similarity index 100%
rename from content/6-form-input/1-input-text/svelte/InputHello.svelte
rename to content/6-form-input/1-input-text/svelte4/InputHello.svelte
diff --git a/content/6-form-input/1-input-text/svelte5/InputHello.svelte b/content/6-form-input/1-input-text/svelte5/InputHello.svelte
new file mode 100644
index 0000000..b6a5bac
--- /dev/null
+++ b/content/6-form-input/1-input-text/svelte5/InputHello.svelte
@@ -0,0 +1,6 @@
+<script>
+  let text = $state("Hello World");
+</script>
+
+<p>{text}</p>
+<input bind:value={text} />
diff --git a/content/6-form-input/2-checkbox/svelte/IsAvailable.svelte b/content/6-form-input/2-checkbox/svelte4/IsAvailable.svelte
similarity index 100%
rename from content/6-form-input/2-checkbox/svelte/IsAvailable.svelte
rename to content/6-form-input/2-checkbox/svelte4/IsAvailable.svelte
diff --git a/content/6-form-input/2-checkbox/svelte5/IsAvailable.svelte b/content/6-form-input/2-checkbox/svelte5/IsAvailable.svelte
new file mode 100644
index 0000000..82678ea
--- /dev/null
+++ b/content/6-form-input/2-checkbox/svelte5/IsAvailable.svelte
@@ -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>
diff --git a/content/6-form-input/3-radio/svelte/PickPill.svelte b/content/6-form-input/3-radio/svelte4/PickPill.svelte
similarity index 100%
rename from content/6-form-input/3-radio/svelte/PickPill.svelte
rename to content/6-form-input/3-radio/svelte4/PickPill.svelte
diff --git a/content/6-form-input/3-radio/svelte5/PickPill.svelte b/content/6-form-input/3-radio/svelte5/PickPill.svelte
new file mode 100644
index 0000000..c206a98
--- /dev/null
+++ b/content/6-form-input/3-radio/svelte5/PickPill.svelte
@@ -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>
diff --git a/content/6-form-input/4-select/svelte/ColorSelect.svelte b/content/6-form-input/4-select/svelte4/ColorSelect.svelte
similarity index 100%
rename from content/6-form-input/4-select/svelte/ColorSelect.svelte
rename to content/6-form-input/4-select/svelte4/ColorSelect.svelte
diff --git a/content/6-form-input/4-select/svelte5/ColorSelect.svelte b/content/6-form-input/4-select/svelte5/ColorSelect.svelte
new file mode 100644
index 0000000..62239bf
--- /dev/null
+++ b/content/6-form-input/4-select/svelte5/ColorSelect.svelte
@@ -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>
diff --git a/content/7-webapp-features/1-render-app/svelte4/App.svelte b/content/7-webapp-features/1-render-app/svelte4/App.svelte
new file mode 100644
index 0000000..159202e
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/svelte4/App.svelte
@@ -0,0 +1 @@
+<h1>Hello world</h1>
diff --git a/content/7-webapp-features/1-render-app/svelte/app.js b/content/7-webapp-features/1-render-app/svelte4/app.js
similarity index 100%
rename from content/7-webapp-features/1-render-app/svelte/app.js
rename to content/7-webapp-features/1-render-app/svelte4/app.js
diff --git a/content/7-webapp-features/1-render-app/svelte/index.html b/content/7-webapp-features/1-render-app/svelte4/index.html
similarity index 100%
rename from content/7-webapp-features/1-render-app/svelte/index.html
rename to content/7-webapp-features/1-render-app/svelte4/index.html
diff --git a/content/7-webapp-features/1-render-app/svelte5/App.svelte b/content/7-webapp-features/1-render-app/svelte5/App.svelte
new file mode 100644
index 0000000..159202e
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/svelte5/App.svelte
@@ -0,0 +1 @@
+<h1>Hello world</h1>
diff --git a/content/7-webapp-features/1-render-app/svelte5/app.js b/content/7-webapp-features/1-render-app/svelte5/app.js
new file mode 100644
index 0000000..5332616
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/svelte5/app.js
@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;
diff --git a/content/7-webapp-features/1-render-app/svelte5/index.html b/content/7-webapp-features/1-render-app/svelte5/index.html
new file mode 100644
index 0000000..e66268f
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/svelte5/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>
diff --git a/content/7-webapp-features/2-fetch-data/svelte/App.svelte b/content/7-webapp-features/2-fetch-data/svelte4/App.svelte
similarity index 100%
rename from content/7-webapp-features/2-fetch-data/svelte/App.svelte
rename to content/7-webapp-features/2-fetch-data/svelte4/App.svelte
diff --git a/content/7-webapp-features/2-fetch-data/svelte/useFetchUsers.js b/content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js
similarity index 100%
rename from content/7-webapp-features/2-fetch-data/svelte/useFetchUsers.js
rename to content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js
diff --git a/content/7-webapp-features/2-fetch-data/svelte5/App.svelte b/content/7-webapp-features/2-fetch-data/svelte5/App.svelte
new file mode 100644
index 0000000..a0a876d
--- /dev/null
+++ b/content/7-webapp-features/2-fetch-data/svelte5/App.svelte
@@ -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}
diff --git a/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.js b/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.js
new file mode 100644
index 0000000..2373dd2
--- /dev/null
+++ b/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.js
@@ -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;
+    },
+  };
+}
diff --git a/content/7-webapp-features/3-router-link/svelte/sveltekit.md b/content/7-webapp-features/3-router-link/svelte4/sveltekit.md
similarity index 100%
rename from content/7-webapp-features/3-router-link/svelte/sveltekit.md
rename to content/7-webapp-features/3-router-link/svelte4/sveltekit.md
diff --git a/content/7-webapp-features/3-router-link/svelte5/sveltekit.md b/content/7-webapp-features/3-router-link/svelte5/sveltekit.md
new file mode 100644
index 0000000..7f5a043
--- /dev/null
+++ b/content/7-webapp-features/3-router-link/svelte5/sveltekit.md
@@ -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>
+```
diff --git a/content/7-webapp-features/4-routing/svelte/sveltekit.md b/content/7-webapp-features/4-routing/svelte4/sveltekit.md
similarity index 100%
rename from content/7-webapp-features/4-routing/svelte/sveltekit.md
rename to content/7-webapp-features/4-routing/svelte4/sveltekit.md
diff --git a/content/7-webapp-features/4-routing/svelte5/sveltekit.md b/content/7-webapp-features/4-routing/svelte5/sveltekit.md
new file mode 100644
index 0000000..bde4d68
--- /dev/null
+++ b/content/7-webapp-features/4-routing/svelte5/sveltekit.md
@@ -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
+```
diff --git a/frameworks.mjs b/frameworks.mjs
index a81634c..d8d0c57 100644
--- a/frameworks.mjs
+++ b/frameworks.mjs
@@ -10,11 +10,11 @@ function sortAllFilenames(files, filenamesSorted) {
 
 export default [
   {
-    id: "svelte",
-    title: "Svelte",
+    id: "svelte4",
+    title: "Svelte 4",
     img: "framework/svelte.svg",
     eslint: {
-      files: ["*.svelte"],
+      files: ["**/svelte4/*.svelte"],
       parser: "svelte-eslint-parser",
     },
     playgroundURL: "https://svelte.dev/repl",
@@ -336,4 +336,20 @@ export default [
     repositoryLink: "https://github.com/aurelia/framework",
     mainPackageName: "aurelia-framework",
   },
+  {
+    id: "svelte5",
+    title: "Svelte 5 (preview)",
+    img: "framework/svelte.svg",
+    eslint: {
+      files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"],
+      parser: "svelte-eslint-parser",
+    },
+    playgroundURL: "https://svelte-5-preview.vercel.app/",
+    documentationURL: "https://svelte-5-preview.vercel.app/docs",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["index.html", "app.js", "App.svelte"]);
+    },
+    repositoryLink: "https://github.com/sveltejs/svelte",
+    mainPackageName: "svelte",
+  },
 ];
diff --git a/package.json b/package.json
index cba57cf..b685022 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,8 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,svelte,vue}": "eslint --cache --fix",
+    "*.{js,jsx,ts,tsx,vue}": "eslint --cache --fix",
+    "**/svelte4/*.svelte": "eslint --cache --fix",
     "*.{js,jsx,ts,tsx,svelte,vue,html,md,css,hbs}": "prettier --cache --write"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 544de82..a58021b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -65,12 +65,14 @@
     if (frameworkIdsSelectedOnInit.length === 0) {
       const frameworkIdsFromStorage = frameworkIdsStorage.getJSON();
       if (frameworkIdsFromStorage?.length > 0) {
-        frameworkIdsSelectedOnInit = frameworkIdsFromStorage;
+        frameworkIdsSelectedOnInit = frameworkIdsFromStorage.map((x) =>
+          x === "svelte" ? "svelte4" : x
+        );
       }
     }
 
     if (frameworkIdsSelectedOnInit.length === 0) {
-      frameworkIdsSelectedOnInit = ["svelte", "react"];
+      frameworkIdsSelectedOnInit = ["svelte4", "react"];
     }
 
     frameworkIdsSelected = new Set(frameworkIdsSelectedOnInit);
@@ -388,7 +390,9 @@
     margin-left: -0.87em;
     padding-right: 0.23em;
     font-weight: 500;
-    transition: color 0.25s, opacity 0.25s;
+    transition:
+      color 0.25s,
+      opacity 0.25s;
     opacity: 0;
     text-decoration: none;
   }