Update to svelte 5 (#12364)

Co-authored-by: bluwy <[email protected]>

.changeset/five-dolls-smash.md

@@ -0,0 +1,20 @@
+---
+'@astrojs/svelte': major
+---
+
+Adds support for Svelte 5. Svelte 3 and 4 are no longer supported.
+
+The integration will now also no longer add `vitePreprocess()` by default if a preprocessor is not set up in `svelte.config.js`. It is recommended to set up the Svelte config manually so that features like IDE completion and syntax highlighting work properly.
+
+If you're using SCSS, Stylus, etc in your Svelte component style tags, make sure that the preprocessor is also set up in `svelte.config.js`. For example:
+
+```js
+// svelte.config.js
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+};
+```
+
+Refer to the [Svelte 5 migration guide](https://svelte.dev/docs/svelte/v5-migration-guide) and [`@sveltejs/vite-plugin-svelte` changelog](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#400) for details of their respective breaking changes.

.changeset/tasty-coats-repair.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/solid-js': patch
+---
+
+Handles checking Svelte 5 component functions to avoid processing them as Solid components

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"
   }
 }

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>

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"
   }
 }

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>

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"
   }
 }

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>

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>

packages/astro/e2e/fixtures/client-only/package.json

@@ -15,7 +15,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"
   }
 }

packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte

@@ -1,8 +1,7 @@
 
 <script>
-	export let id;
-  let children;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -14,11 +13,11 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre>{ count }</pre>
-  <button class="increment" on:click={add}>+</button>
+  <button class="increment" onclick={add}>+</button>
 	<div class="children">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

packages/astro/e2e/fixtures/errors/package.json

@@ -14,7 +14,7 @@
     "react-dom": "^18.3.1",
     "sass": "^1.80.6",
     "solid-js": "^1.9.3",
-    "svelte": "^4.2.19",
+    "svelte": "^5.1.16",
     "vue": "^3.5.12"
   }
 }

packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let shouldThrow = true;
+	let { shouldThrow } = $props();
 
   if (shouldThrow) {
     throw new Error('SvelteRuntimeError');

packages/astro/e2e/fixtures/multiple-frameworks/package.json

@@ -18,7 +18,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"
   }
 }

packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte

@@ -1,7 +1,7 @@
 
 <script>
-	export let id;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -13,12 +13,12 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre>{ count }</pre>
-  <button class="increment" on:click={add}>+</button>
+  <button class="increment" onclick={add}>+</button>
 </div>
 <div class="counter-message">
-  <slot />
+	{@render children?.()}
 </div>
 
 <style>

packages/astro/e2e/fixtures/nested-in-preact/package.json

@@ -15,7 +15,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"
   }
 }

packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte

@@ -1,8 +1,7 @@
 
 <script>
-	export let id;
-  let children;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -14,11 +13,11 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre id={`${id}-count`}>{ count }</pre>
-  <button id={`${id}-increment`} class="increment" on:click={add}>+</button>
+  <button id={`${id}-increment`} class="increment" onclick={add}>+</button>
 	<div class="children">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

packages/astro/e2e/fixtures/nested-in-react/package.json

@@ -15,7 +15,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"
   }
 }

packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte

@@ -1,8 +1,7 @@
 
 <script>
-	export let id;
-  let children;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -14,11 +13,11 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre id={`${id}-count`}>{ count }</pre>
-  <button id={`${id}-increment`} class="increment" on:click={add}>+</button>
+  <button id={`${id}-increment`} class="increment" onclick={add}>+</button>
 	<div class="children">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

packages/astro/e2e/fixtures/nested-in-solid/package.json

@@ -15,7 +15,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"
   }
 }

packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte

@@ -1,8 +1,7 @@
 
 <script>
-	export let id;
-  let children;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -14,11 +13,11 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre id={`${id}-count`}>{ count }</pre>
-  <button id={`${id}-increment`} class="increment" on:click={add}>+</button>
+  <button id={`${id}-increment`} class="increment" onclick={add}>+</button>
 	<div class="children">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

packages/astro/e2e/fixtures/nested-in-svelte/package.json

@@ -15,7 +15,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"
   }
 }

packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte

@@ -1,8 +1,7 @@
 
 <script>
-	export let id;
-  let children;
-  let count = 0;
+	let { id, children } = $props();
+  let count = $state(0);
 
   function add() {
 		count += 1;
@@ -14,11 +13,11 @@
 </script>
 
 <div {id} class="counter">
-  <button class="decrement" on:click={subtract}>-</button>
+  <button class="decrement" onclick={subtract}>-</button>
   <pre id={`${id}-count`}>{ count }</pre>
-  <button id={`${id}-increment`} class="increment" on:click={add}>+</button>
+  <button id={`${id}-increment`} class="increment" onclick={add}>+</button>
 	<div class="children">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

packages/astro/e2e/fixtures/nested-in-vue/package.json

@@ -15,7 +15,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"
   }
 }