diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/framework-multiple/package.json | 2 | ||||
| -rw-r--r-- | examples/framework-multiple/src/components/svelte/SvelteCounter.svelte | 15 | ||||
| -rw-r--r-- | examples/framework-svelte/package.json | 2 | ||||
| -rw-r--r-- | examples/framework-svelte/src/components/Counter.svelte | 15 | ||||
| -rw-r--r-- | examples/ssr/package.json | 2 | ||||
| -rw-r--r-- | examples/ssr/src/components/AddToCart.svelte | 5 | ||||
| -rw-r--r-- | examples/ssr/src/components/Cart.svelte | 4 |
7 files changed, 29 insertions, 16 deletions
diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 1e63e0247..fa0af0805 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -23,7 +23,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "solid-js": "^1.9.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte index 01e58574a..641312ae1 100644 --- a/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte +++ b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte @@ -2,7 +2,14 @@ A counter written with Svelte --> <script lang="ts"> - let count = 0; + import type { Snippet } from 'svelte'; + + interface Props { + children?: Snippet + } + + let { children }: Props = $props(); + let count = $state(0); function add() { count += 1; @@ -14,10 +21,10 @@ A counter written with Svelte </script> <div class="counter"> - <button on:click={subtract}>-</button> + <button onclick={subtract}>-</button> <pre>{count}</pre> - <button on:click={add}>+</button> + <button onclick={add}>+</button> </div> <div class="counter-message"> - <slot /> + {@render children?.()} </div> diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 9c1adf7cf..779267dd6 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -13,6 +13,6 @@ "dependencies": { "@astrojs/svelte": "^5.7.3", "astro": "^4.16.12", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte index 1353736aa..a11538645 100644 --- a/examples/framework-svelte/src/components/Counter.svelte +++ b/examples/framework-svelte/src/components/Counter.svelte @@ -1,5 +1,12 @@ <script lang="ts"> - let count = 0; + import type { Snippet } from 'svelte'; + + interface Props { + children?: Snippet + } + + let { children }: Props = $props(); + let count = $state(0); function add() { count += 1; @@ -11,12 +18,12 @@ </script> <div class="counter"> - <button on:click={subtract}>-</button> + <button onclick={subtract}>-</button> <pre>{count}</pre> - <button on:click={add}>+</button> + <button onclick={add}>+</button> </div> <div class="message"> - <slot /> + {@render children?.()} </div> <style> diff --git a/examples/ssr/package.json b/examples/ssr/package.json index 6d937bf2f..acc59c153 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -15,6 +15,6 @@ "@astrojs/node": "^8.3.4", "@astrojs/svelte": "^5.7.3", "astro": "^4.16.12", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/examples/ssr/src/components/AddToCart.svelte b/examples/ssr/src/components/AddToCart.svelte index 0f7a97a93..bae888b6b 100644 --- a/examples/ssr/src/components/AddToCart.svelte +++ b/examples/ssr/src/components/AddToCart.svelte @@ -1,7 +1,6 @@ <script> import { addToUserCart } from '../api'; - export let id = 0; - export let name = ''; + let { id, name } = $props() function notifyCartItem(id) { window.dispatchEvent(new CustomEvent('add-to-cart', { @@ -49,6 +48,6 @@ button:hover { text-transform: uppercase; } </style> -<button on:click={addToCart}> +<button click={addToCart}> <span class="pretext">Add to cart</span> </button> diff --git a/examples/ssr/src/components/Cart.svelte b/examples/ssr/src/components/Cart.svelte index 74db0bc79..5d4b7d251 100644 --- a/examples/ssr/src/components/Cart.svelte +++ b/examples/ssr/src/components/Cart.svelte @@ -1,5 +1,5 @@ <script> - export let count = 0; + let { count } = $props() let items = new Set(); function onAddToCart(ev) { @@ -27,7 +27,7 @@ font-size: 24px; } </style> -<svelte:window on:add-to-cart={onAddToCart}/> +<svelte:window onadd-to-cart={onAddToCart}/> <a href="/cart" class="cart"> <span class="material-icons cart-icon">shopping_cart</span> <span class="count">{count}</span> |