Update Svelte 5 examples (#202)

* update svelte 5 examples

* remove unnecessary functions in event dispatch example

* Apply suggestions from code review

Co-authored-by: Simon H <[email protected]>

---------

Co-authored-by: Simon H <[email protected]>

content/2-templating/4-event-click/svelte5/Counter.svelte

@@ -7,4 +7,4 @@
 </script>
 
 <p>Counter: {count}</p>
-<button on:click={incrementCount}>+1</button>
+<button onclick={incrementCount}>+1</button>

content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte

@@ -1,17 +1,7 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  function clickYes() {
-    dispatch("yes");
-  }
-
-  function clickNo() {
-    dispatch("no");
-  }
+  let { onYes, onNo } = $props()
 </script>
 
-<button on:click={clickYes}> YES </button>
+<button onclick={onYes}> YES </button>
 
-<button on:click={clickNo}> NO </button>
+<button onclick={onNo}> NO </button>

content/4-component-composition/2-emit-to-parent/svelte5/App.svelte

@@ -13,5 +13,5 @@
 </script>
 
 <p>Are you happy?</p>
-<AnswerButton on:yes={onAnswerYes} on:no={onAnswerNo} />
+<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
 <p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p>

content/4-component-composition/3-slot/svelte5/FunnyButton.svelte

@@ -1,5 +1,9 @@
+<script>
+  let { children } = $props();
+</script>
+
 <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 />
+  {@render children()}
 </button>

content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte

@@ -1,7 +1,13 @@
+<script>
+  let { children } = $props();
+</script>
+
 <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>
+  {#if children}
+    {@render children()}
+  {:else}
     <span>No content found</span>
-  </slot>
+  {/if}
 </button>

content/7-webapp-features/1-render-app/svelte5/app.js

@@ -1,6 +1,7 @@
+import { mount } from "svelte"
 import App from "./App.svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById("app"),
 });