diff options
77 files changed, 459 insertions, 636 deletions
diff --git a/.changeset/five-dolls-smash.md b/.changeset/five-dolls-smash.md new file mode 100644 index 000000000..ad5e83fd9 --- /dev/null +++ b/.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. diff --git a/.changeset/tasty-coats-repair.md b/.changeset/tasty-coats-repair.md new file mode 100644 index 000000000..10b97e1c3 --- /dev/null +++ b/.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 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> diff --git a/packages/astro/e2e/fixtures/client-only/package.json b/packages/astro/e2e/fixtures/client-only/package.json index 846d05536..b8ff80595 100644 --- a/packages/astro/e2e/fixtures/client-only/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte index cc9fe8c93..d87611414 100644 --- a/packages/astro/e2e/fixtures/client-only/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/errors/package.json b/packages/astro/e2e/fixtures/errors/package.json index 3730d61f1..77c406778 100644 --- a/packages/astro/e2e/fixtures/errors/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte index 54dbab6a7..69d62a884 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte +++ b/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'); diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/package.json b/packages/astro/e2e/fixtures/multiple-frameworks/package.json index 810f2d729..e49300b35 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte index d6870af3c..fdaa73399 100644 --- a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/nested-in-preact/package.json b/packages/astro/e2e/fixtures/nested-in-preact/package.json index 75416af37..b7ee395b7 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-in-preact/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/nested-in-react/package.json b/packages/astro/e2e/fixtures/nested-in-react/package.json index 533ddb156..8482e4a95 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-in-react/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/nested-in-solid/package.json b/packages/astro/e2e/fixtures/nested-in-solid/package.json index b8c3a4dbc..a0cb765f1 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-in-solid/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/package.json b/packages/astro/e2e/fixtures/nested-in-svelte/package.json index d40b37c67..7a76711b6 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-in-svelte/src/components/svelte/SvelteCounter.svelte +++ b/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> diff --git a/packages/astro/e2e/fixtures/nested-in-vue/package.json b/packages/astro/e2e/fixtures/nested-in-vue/package.json index 82c8c6d32..9ee7a0ea4 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/package.json +++ b/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" } } diff --git a/packages/astro/e2e/fixtures/nested-in-vue/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-in-vue/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-in-vue/src/components/svelte/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-in-vue/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> diff --git a/packages/astro/e2e/fixtures/nested-recursive/package.json b/packages/astro/e2e/fixtures/nested-recursive/package.json index f2ac36dc7..feeb21cb8 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/package.json +++ b/packages/astro/e2e/fixtures/nested-recursive/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" }, "scripts": { diff --git a/packages/astro/e2e/fixtures/nested-recursive/src/components/svelte/SvelteCounter.svelte b/packages/astro/e2e/fixtures/nested-recursive/src/components/svelte/SvelteCounter.svelte index 733f58076..654df4f8b 100644 --- a/packages/astro/e2e/fixtures/nested-recursive/src/components/svelte/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/nested-recursive/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> diff --git a/packages/astro/e2e/fixtures/svelte-component/package.json b/packages/astro/e2e/fixtures/svelte-component/package.json index 04acc35e7..c4baf8616 100644 --- a/packages/astro/e2e/fixtures/svelte-component/package.json +++ b/packages/astro/e2e/fixtures/svelte-component/package.json @@ -6,6 +6,6 @@ "@astrojs/mdx": "workspace:*", "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte index 2f05ce798..de8555f87 100644 --- a/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte +++ b/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte @@ -1,6 +1,13 @@ <script lang="ts"> - export let id: string; - export let count: number = 0; + import type { Snippet } from 'svelte'; + + interface Props { + id: number; + count: number; + children?: Snippet + } + + let { id, count, children }: Props = $props(); function add() { count += 1; @@ -12,12 +19,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 id={`${id}-message`} class="message"> - <slot /> + {@render children?.()} </div> <style> diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/Stuff.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/Stuff.svelte index 9d7f1d4e0..ef2938423 100644 --- a/packages/astro/e2e/fixtures/svelte-component/src/components/Stuff.svelte +++ b/packages/astro/e2e/fixtures/svelte-component/src/components/Stuff.svelte @@ -1,4 +1,4 @@ <script> - export let id; + let { id, children } = $props(); </script> -<div {id}>Slot goes here:<slot /></div> +<div {id}>Slot goes here:{@render children?.()}</div> diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte index ff6894c00..0076cbe12 100644 --- a/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte +++ b/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte @@ -1,5 +1,5 @@ <script lang="ts"> - export let id: string; + let { id } = $props<{ id: string }>(); </script> <div {id}>Framework client:only component</div> diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte index 3a8595ff5..1d404b3b7 100644 --- a/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte +++ b/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte @@ -1,9 +1,9 @@ <script> - let isNavOpen = false; + let isNavOpen = $state(false); const toggleNav = () => (isNavOpen = !isNavOpen); </script> -<button id="toggle" on:click={toggleNav}> +<button id="toggle" onclick={toggleNav}> {#if isNavOpen} <slot name="open" /> {:else} diff --git a/packages/astro/e2e/fixtures/view-transitions/package.json b/packages/astro/e2e/fixtures/view-transitions/package.json index 84efaa227..3c94c2700 100644 --- a/packages/astro/e2e/fixtures/view-transitions/package.json +++ b/packages/astro/e2e/fixtures/view-transitions/package.json @@ -5,14 +5,14 @@ "dependencies": { "@astrojs/node": "^8.3.4", "@astrojs/react": "workspace:*", + "@astrojs/solid-js": "workspace:*", "@astrojs/svelte": "workspace:*", "@astrojs/vue": "workspace:*", - "@astrojs/solid-js": "workspace:*", "astro": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "svelte": "^4.2.19", - "vue": "^3.5.12", - "solid-js": "^1.9.3" + "solid-js": "^1.9.3", + "svelte": "^5.1.16", + "vue": "^3.5.12" } } diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte index 669ee1a5a..5fa67040d 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte @@ -1,6 +1,6 @@ <script lang="ts"> - let count = 0; - export let prefix = ""; + let { prefix, children } = $props() + let count = $state(0); function add() { count += 1; @@ -12,12 +12,12 @@ </script> <div class="counter"> - <button on:click={subtract} class="decrement">-</button> + <button onclick={subtract} class="decrement">-</button> <pre>{prefix}{count}</pre> - <button on:click={add} class="increment">+</button> + <button onclick={add} class="increment">+</button> </div> <div class="message"> - <slot /> + {@render children?.()} </div> <style> diff --git a/packages/astro/test/fixtures/0-css/package.json b/packages/astro/test/fixtures/0-css/package.json index c460f11db..8956aaf0a 100644 --- a/packages/astro/test/fixtures/0-css/package.json +++ b/packages/astro/test/fixtures/0-css/package.json @@ -9,7 +9,7 @@ "astro": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/test/fixtures/0-css/svelte.config.mjs b/packages/astro/test/fixtures/0-css/svelte.config.mjs new file mode 100644 index 000000000..cbaee33df --- /dev/null +++ b/packages/astro/test/fixtures/0-css/svelte.config.mjs @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@astrojs/svelte'; + +export default { + preprocess: vitePreprocess(), +}; diff --git a/packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json b/packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json index 0ae8cb82c..61ea81e43 100644 --- a/packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json +++ b/packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/alias-tsconfig/package.json b/packages/astro/test/fixtures/alias-tsconfig/package.json index 833a0a068..07e81ac0b 100644 --- a/packages/astro/test/fixtures/alias-tsconfig/package.json +++ b/packages/astro/test/fixtures/alias-tsconfig/package.json @@ -6,6 +6,6 @@ "@astrojs/svelte": "workspace:*", "@test/namespace-package": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/alias/package.json b/packages/astro/test/fixtures/alias/package.json index bd0599c5d..c237d7a6e 100644 --- a/packages/astro/test/fixtures/alias/package.json +++ b/packages/astro/test/fixtures/alias/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/astro-children/package.json b/packages/astro/test/fixtures/astro-children/package.json index 14e6da06e..7f341a250 100644 --- a/packages/astro/test/fixtures/astro-children/package.json +++ b/packages/astro/test/fixtures/astro-children/package.json @@ -8,7 +8,7 @@ "@astrojs/vue": "workspace:*", "astro": "workspace:*", "preact": "^10.24.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/test/fixtures/astro-children/src/components/Component.svelte b/packages/astro/test/fixtures/astro-children/src/components/Component.svelte index 4276a78b8..87a939e67 100644 --- a/packages/astro/test/fixtures/astro-children/src/components/Component.svelte +++ b/packages/astro/test/fixtures/astro-children/src/components/Component.svelte @@ -1,3 +1,7 @@ +<script> + let { children } = $props(); +</script> + <div id="svelte"> - <slot /> + {@render children?.()} </div> diff --git a/packages/astro/test/fixtures/astro-client-only/package.json b/packages/astro/test/fixtures/astro-client-only/package.json index e6f71f353..524570175 100644 --- a/packages/astro/test/fixtures/astro-client-only/package.json +++ b/packages/astro/test/fixtures/astro-client-only/package.json @@ -9,6 +9,6 @@ "astro": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounter.svelte b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounter.svelte index 855be29ea..f4d7180df 100644 --- a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounter.svelte +++ b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounter.svelte @@ -1,8 +1,8 @@ <script> import './logResize'; - let count = parseInt(localStorage.getItem('test:count')) || 0; - $: localStorage.setItem('test:count', count); + let count = $state(parseInt(localStorage.getItem('test:count')) || 0) + $effect(() => localStorage.setItem('test:count', count)); function add() { count += 1; @@ -18,7 +18,7 @@ } </style> <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> diff --git a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte index c851a42f8..cb2d51496 100644 --- a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte +++ b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte @@ -1,8 +1,8 @@ <script> import './logResize'; - let count = parseInt(localStorage.getItem('test:count')) || 0; - $: localStorage.setItem('test:count', count); + let count = $state(parseInt(localStorage.getItem('test:count')) || 0) + $effect(() => localStorage.setItem('test:count', count)); function add() { count += 1; @@ -18,7 +18,7 @@ } </style> <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> diff --git a/packages/astro/test/fixtures/astro-dynamic/package.json b/packages/astro/test/fixtures/astro-dynamic/package.json index 3d606041a..a308d8796 100644 --- a/packages/astro/test/fixtures/astro-dynamic/package.json +++ b/packages/astro/test/fixtures/astro-dynamic/package.json @@ -8,6 +8,6 @@ "astro": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/astro-dynamic/src/components/PersistentCounter.svelte b/packages/astro/test/fixtures/astro-dynamic/src/components/PersistentCounter.svelte index 1b74b3408..7790b66b3 100644 --- a/packages/astro/test/fixtures/astro-dynamic/src/components/PersistentCounter.svelte +++ b/packages/astro/test/fixtures/astro-dynamic/src/components/PersistentCounter.svelte @@ -2,8 +2,8 @@ <script> import './logResize'; - let count = parseInt(localStorage.getItem('test:count')) || 0; - $: localStorage.setItem('test:count', count); + let count = $state(parseInt(localStorage.getItem('test:count')) || 0) + $effect(() => localStorage.setItem('test:count', count)); function add() { count += 1; @@ -15,8 +15,8 @@ </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>
\ No newline at end of file diff --git a/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte b/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte index 8d6b3f5e1..d4972b7f9 100644 --- a/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte +++ b/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte @@ -1,7 +1,7 @@ <script> - let children; - let count = 0; + let { children } = $props(); + let count = $state(0); function add() { count += 1; @@ -13,10 +13,10 @@ </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="children"> - <slot /> + {@render children?.()} </div> diff --git a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs index ac3f1ab64..201ce52f2 100644 --- a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs @@ -1,8 +1,6 @@ -import svelte from "@astrojs/svelte"; -import { defineConfig } from 'astro/config'; +import { defineConfig } from "astro/config"; // https://astro.build/config export default defineConfig({ - integrations: [svelte()], - site: 'https://astro.build/', + site: "https://astro.build/", }); diff --git a/packages/astro/test/fixtures/astro-markdown/package.json b/packages/astro/test/fixtures/astro-markdown/package.json index c1903a941..9fe9dae01 100644 --- a/packages/astro/test/fixtures/astro-markdown/package.json +++ b/packages/astro/test/fixtures/astro-markdown/package.json @@ -3,7 +3,6 @@ "version": "0.0.0", "private": true, "dependencies": { - "@astrojs/svelte": "workspace:*", "astro": "workspace:*" } } diff --git a/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte b/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte deleted file mode 100644 index 4e91b2659..000000000 --- a/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte +++ /dev/null @@ -1,5 +0,0 @@ -<script> - export let count = 0; -</script> - -<button onClick={() => count += 1}>{count}</button> diff --git a/packages/astro/test/fixtures/astro-slots-nested/package.json b/packages/astro/test/fixtures/astro-slots-nested/package.json index 114e369d6..6d541872e 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/package.json +++ b/packages/astro/test/fixtures/astro-slots-nested/package.json @@ -13,7 +13,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/packages/astro/test/fixtures/component-library-shared/Counter.svelte b/packages/astro/test/fixtures/component-library-shared/Counter.svelte index 2f4c07339..0ca9f08b0 100644 --- a/packages/astro/test/fixtures/component-library-shared/Counter.svelte +++ b/packages/astro/test/fixtures/component-library-shared/Counter.svelte @@ -1,5 +1,6 @@ <script> - let count = 0; + let { children } = $props(); + let count = $state(0); function add() { count += 1; @@ -11,12 +12,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/packages/astro/test/fixtures/component-library/package.json b/packages/astro/test/fixtures/component-library/package.json index 02f65ab8d..7538d70a5 100644 --- a/packages/astro/test/fixtures/component-library/package.json +++ b/packages/astro/test/fixtures/component-library/package.json @@ -11,6 +11,6 @@ "preact": "^10.24.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/css-dangling-references/package.json b/packages/astro/test/fixtures/css-dangling-references/package.json index be0392db0..1b4ea51e7 100644 --- a/packages/astro/test/fixtures/css-dangling-references/package.json +++ b/packages/astro/test/fixtures/css-dangling-references/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } }
\ No newline at end of file diff --git a/packages/astro/test/fixtures/css-dangling-references/src/components/Wrapper.svelte b/packages/astro/test/fixtures/css-dangling-references/src/components/Wrapper.svelte index 083040742..33ab3b380 100644 --- a/packages/astro/test/fixtures/css-dangling-references/src/components/Wrapper.svelte +++ b/packages/astro/test/fixtures/css-dangling-references/src/components/Wrapper.svelte @@ -1,6 +1,5 @@ <script> - - export let path + let { path } = $props(); const allAppModules = import.meta.glob('./*.svelte') diff --git a/packages/astro/test/fixtures/fetch/package.json b/packages/astro/test/fixtures/fetch/package.json index 110f14dad..280c58bf9 100644 --- a/packages/astro/test/fixtures/fetch/package.json +++ b/packages/astro/test/fixtures/fetch/package.json @@ -8,7 +8,7 @@ "@astrojs/vue": "workspace:*", "astro": "workspace:*", "preact": "^10.24.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/test/fixtures/jsx/package.json b/packages/astro/test/fixtures/jsx/package.json index 2f5983029..b47b4c917 100644 --- a/packages/astro/test/fixtures/jsx/package.json +++ b/packages/astro/test/fixtures/jsx/package.json @@ -16,7 +16,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/packages/astro/test/fixtures/jsx/src/components/SvelteCounter.svelte b/packages/astro/test/fixtures/jsx/src/components/SvelteCounter.svelte index 3d6f1b2bd..f45740811 100644 --- a/packages/astro/test/fixtures/jsx/src/components/SvelteCounter.svelte +++ b/packages/astro/test/fixtures/jsx/src/components/SvelteCounter.svelte @@ -1,6 +1,6 @@ <script> - let count = 0; + let count = $state(0); function add() { count += 1; @@ -13,9 +13,9 @@ <div id="svelte"> <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="children">Svelte</div> </div> diff --git a/packages/astro/test/fixtures/postcss/package.json b/packages/astro/test/fixtures/postcss/package.json index c83201040..492521464 100644 --- a/packages/astro/test/fixtures/postcss/package.json +++ b/packages/astro/test/fixtures/postcss/package.json @@ -10,7 +10,7 @@ "autoprefixer": "^10.4.20", "postcss": "^8.4.47", "solid-js": "^1.9.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" }, "devDependencies": { diff --git a/packages/astro/test/fixtures/server-islands/hybrid/package.json b/packages/astro/test/fixtures/server-islands/hybrid/package.json index 03e184e63..f34f93b32 100644 --- a/packages/astro/test/fixtures/server-islands/hybrid/package.json +++ b/packages/astro/test/fixtures/server-islands/hybrid/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/server-islands/ssr/package.json b/packages/astro/test/fixtures/server-islands/ssr/package.json index 16e044fe3..27cd8be8b 100644 --- a/packages/astro/test/fixtures/server-islands/ssr/package.json +++ b/packages/astro/test/fixtures/server-islands/ssr/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/slots-svelte/package.json b/packages/astro/test/fixtures/slots-svelte/package.json index ddfa80d33..0625c77e2 100644 --- a/packages/astro/test/fixtures/slots-svelte/package.json +++ b/packages/astro/test/fixtures/slots-svelte/package.json @@ -6,6 +6,6 @@ "@astrojs/mdx": "workspace:*", "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte index b03e016b7..e4606601b 100644 --- a/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte +++ b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte @@ -1,6 +1,6 @@ <script> - let count = 0; - export let id; + let { id } = $props(); + let count = $state(0); function add() { count += 1; @@ -12,9 +12,9 @@ </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 id={id}> <slot><h1 id="fallback">Fallback</h1></slot><slot name="named" /><slot name="dash-case" /> diff --git a/packages/astro/test/fixtures/svelte-component/package.json b/packages/astro/test/fixtures/svelte-component/package.json index 830d980b7..3f4223780 100644 --- a/packages/astro/test/fixtures/svelte-component/package.json +++ b/packages/astro/test/fixtures/svelte-component/package.json @@ -5,6 +5,6 @@ "dependencies": { "@astrojs/svelte": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte index d74ae47ec..bbacb3b24 100644 --- a/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte +++ b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte @@ -1,5 +1,5 @@ <script lang="ts"> - export let message: string; + let { message } = $props(); </script> <div id="svelte-ts">{ message }</div> diff --git a/packages/astro/test/fixtures/vue-with-multi-renderer/package.json b/packages/astro/test/fixtures/vue-with-multi-renderer/package.json index d2e756c97..339dcfd24 100644 --- a/packages/astro/test/fixtures/vue-with-multi-renderer/package.json +++ b/packages/astro/test/fixtures/vue-with-multi-renderer/package.json @@ -6,7 +6,7 @@ "@astrojs/svelte": "workspace:*", "@astrojs/vue": "workspace:*", "astro": "workspace:*", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/test/postcss.test.js b/packages/astro/test/postcss.test.js index 562765e30..145db478f 100644 --- a/packages/astro/test/postcss.test.js +++ b/packages/astro/test/postcss.test.js @@ -37,15 +37,15 @@ describe('PostCSS', () => { }); it('works in JSX', () => { - assert.match(bundledCSS, /\.solid(\.(w|-)*)*\.nested/); + assert.match(bundledCSS, /\.solid(\.[\w-]+)?\.nested/); }); it('works in Vue', () => { - assert.match(bundledCSS, /\.vue(\.(w|-)*)*\.nested/); + assert.match(bundledCSS, /\.vue(\.[\w-]+)?\.nested/); }); it('works in Svelte', () => { - assert.match(bundledCSS, /\.svelte(\.(w|-)*)*\.nested/); + assert.match(bundledCSS, /\.svelte(\.[\w-]+)?\.nested/); }); it('ignores CSS in public/', async () => { diff --git a/packages/integrations/solid/src/server.ts b/packages/integrations/solid/src/server.ts index d03b4c74c..8d66fffe1 100644 --- a/packages/integrations/solid/src/server.ts +++ b/packages/integrations/solid/src/server.ts @@ -23,6 +23,10 @@ async function check( ) { if (typeof Component !== 'function') return false; if (Component.name === 'QwikComponent') return false; + // Svelte component renders fine by Solid as an empty string. The only way to detect + // if this isn't a Solid but Svelte component is to unfortunately copy the check + // implementation of the Svelte renderer. + if (Component.toString().includes('$$payload')) return false; // There is nothing particularly special about Solid components. Basically they are just functions. // In general, components from other frameworks (eg, MDX, React, etc.) tend to render as "undefined", diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js deleted file mode 100644 index 123e544f6..000000000 --- a/packages/integrations/svelte/client-v5.js +++ /dev/null @@ -1,60 +0,0 @@ -import { createRawSnippet, hydrate, mount, unmount } from 'svelte'; - -const existingApplications = new WeakMap(); - -export default (element) => { - return async (Component, props, slotted, { client }) => { - if (!element.hasAttribute('ssr')) return; - - let children = undefined; - let $$slots = undefined; - let renderFns = {}; - - for (const [key, value] of Object.entries(slotted)) { - // Legacy slot support - $$slots ??= {}; - if (key === 'default') { - $$slots.default = true; - children = createRawSnippet(() => ({ - render: () => `<astro-slot>${value}</astro-slot>`, - })); - } else { - $$slots[key] = createRawSnippet(() => ({ - render: () => `<astro-slot name="${key}">${value}</astro-slot>`, - })); - } - // @render support for Svelte ^5.0 - if (key === 'default') { - renderFns.children = createRawSnippet(() => ({ - render: () => `<astro-slot>${value}</astro-slot>`, - })); - } else { - renderFns[key] = createRawSnippet(() => ({ - render: () => `<astro-slot name="${key}">${value}</astro-slot>`, - })); - } - } - - const bootstrap = client !== 'only' ? hydrate : mount; - if (existingApplications.has(element)) { - existingApplications.get(element).$set({ - ...props, - children, - $$slots, - ...renderFns, - }); - } else { - const component = bootstrap(Component, { - target: element, - props: { - ...props, - children, - $$slots, - ...renderFns, - }, - }); - existingApplications.set(element, component); - element.addEventListener('astro:unmount', () => unmount(component), { once: true }); - } - }; -}; diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js deleted file mode 100644 index 288c7a661..000000000 --- a/packages/integrations/svelte/client.js +++ /dev/null @@ -1,125 +0,0 @@ -const noop = () => {}; - -let originalConsoleWarning; -let consoleFilterRefs = 0; - -const existingApplications = new WeakMap(); - -export default (element) => { - return (Component, props, slotted, { client }) => { - if (!element.hasAttribute('ssr')) return; - const slots = {}; - for (const [key, value] of Object.entries(slotted)) { - slots[key] = createSlotDefinition(key, value); - } - - try { - if (import.meta.env.DEV) useConsoleFilter(); - - if (existingApplications.has(element)) { - existingApplications.get(element).$set({ ...props, $$slots: slots, $$scope: { ctx: [] } }); - } else { - const component = new Component({ - target: element, - props: { - ...props, - $$slots: slots, - $$scope: { ctx: [] }, - }, - hydrate: client !== 'only', - $$inline: true, - }); - existingApplications.set(element, component); - - element.addEventListener('astro:unmount', () => component.$destroy(), { once: true }); - } - } finally { - if (import.meta.env.DEV) finishUsingConsoleFilter(); - } - }; -}; - -function createSlotDefinition(key, children) { - let parent; - return [ - () => ({ - // mount - m(target) { - parent = target; - target.insertAdjacentHTML( - 'beforeend', - `<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${children}</astro-slot>`, - ); - }, - // create - c: noop, - // hydrate - l: noop, - // destroy - d() { - if (!parent) return; - const slot = parent.querySelector( - `astro-slot${key === 'default' ? ':not([name])' : `[name="${key}"]`}`, - ); - if (slot) slot.remove(); - }, - }), - noop, - noop, - ]; -} - -/** - * Reduces console noise by filtering known non-problematic warnings. - * - * Performs reference counting to allow parallel usage from async code. - * - * To stop filtering, please ensure that there always is a matching call - * to `finishUsingConsoleFilter` afterwards. - */ -function useConsoleFilter() { - consoleFilterRefs++; - - if (!originalConsoleWarning) { - originalConsoleWarning = console.warn; - try { - console.warn = filteredConsoleWarning; - } catch { - // If we're unable to hook `console.warn`, just accept it - } - } -} - -/** - * Indicates that the filter installed by `useConsoleFilter` - * is no longer needed by the calling code. - */ -function finishUsingConsoleFilter() { - consoleFilterRefs--; - - // Note: Instead of reverting `console.warning` back to the original - // when the reference counter reaches 0, we leave our hook installed - // to prevent potential race conditions once `check` is made async -} - -/** - * Hook/wrapper function for the global `console.warning` function. - * - * Ignores known non-problematic errors while any code is using the console filter. - * Otherwise, simply forwards all arguments to the original function. - */ -function filteredConsoleWarning(msg, ...rest) { - if (consoleFilterRefs > 0 && typeof msg === 'string') { - // Astro passes `class` and `data-astro-cid` props to the Svelte component, which - // outputs the following warning, which we can safely filter out. - - // NOTE: In practice data-astro-cid props have a hash suffix. Hence the use of a - // quoted prop name string without a closing quote. - - const isKnownSvelteError = - msg.endsWith("was created with unknown prop 'class'") || - msg.includes("was created with unknown prop 'data-astro-cid"); - if (isKnownSvelteError) return; - } - originalConsoleWarning(msg, ...rest); -} diff --git a/packages/integrations/svelte/client.svelte.js b/packages/integrations/svelte/client.svelte.js new file mode 100644 index 000000000..1bff1bf24 --- /dev/null +++ b/packages/integrations/svelte/client.svelte.js @@ -0,0 +1,79 @@ +import { createRawSnippet, hydrate, mount, unmount } from 'svelte'; + +/** @type {WrakMap<any, ReturnType<typeof createComponent>} */ +const existingApplications = new WeakMap(); + +export default (element) => { + return async (Component, props, slotted, { client }) => { + if (!element.hasAttribute('ssr')) return; + + let children = undefined; + let _$$slots = undefined; + let renderFns = {}; + + for (const [key, value] of Object.entries(slotted)) { + // Legacy slot support + _$$slots ??= {}; + if (key === 'default') { + _$$slots.default = true; + children = createRawSnippet(() => ({ + render: () => `<astro-slot>${value}</astro-slot>`, + })); + } else { + _$$slots[key] = createRawSnippet(() => ({ + render: () => `<astro-slot name="${key}">${value}</astro-slot>`, + })); + } + // @render support for Svelte ^5.0 + if (key === 'default') { + renderFns.children = createRawSnippet(() => ({ + render: () => `<astro-slot>${value}</astro-slot>`, + })); + } else { + renderFns[key] = createRawSnippet(() => ({ + render: () => `<astro-slot name="${key}">${value}</astro-slot>`, + })); + } + } + + const resolvedProps = { + ...props, + children, + $$slots: _$$slots, + ...renderFns, + }; + if (existingApplications.has(element)) { + existingApplications.get(element).setProps(resolvedProps); + } else { + const component = createComponent(Component, element, resolvedProps, client !== 'only'); + existingApplications.set(element, component); + element.addEventListener('astro:unmount', () => component.destroy(), { once: true }); + } + }; +}; + +/** + * @param {any} Component + * @param {HTMLElement} target + * @param {Record<string, any>} props + * @param {boolean} shouldHydrate + */ +function createComponent(Component, target, props, shouldHydrate) { + let propsState = $state(props); + const bootstrap = shouldHydrate ? hydrate : mount; + const component = bootstrap(Component, { target, props: propsState }); + return { + setProps(newProps) { + Object.assign(propsState, newProps); + // Remove props in `propsState` but not in `newProps` + for (const key in propsState) { + if (!(key in newProps)) { + delete propsState[key]; + } + } + }, + destroy() { + unmount(component); + }, + }; +} diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json index 08a87c366..7c38648d1 100644 --- a/packages/integrations/svelte/package.json +++ b/packages/integrations/svelte/package.json @@ -23,26 +23,18 @@ ".": "./dist/index.js", "./editor": "./dist/editor.cjs", "./*": "./*", - "./client.js": "./client.js", - "./client-v5.js": "./client-v5.js", + "./client.js": "./client.svelte.js", "./server.js": { "default": "./server.js", "types": "./server.d.ts" }, - "./server-v5.js": { - "default": "./server-v5.js", - "types": "./server-v5.d.ts" - }, "./package.json": "./package.json" }, "files": [ "dist", "client.js", - "client-v5.js", "server.js", - "server.d.ts", - "server-v5.js", - "server-v5.d.ts" + "server.d.ts" ], "scripts": { "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc", @@ -50,18 +42,18 @@ "dev": "astro-scripts dev \"src/**/*.ts\"" }, "dependencies": { - "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "svelte2tsx": "^0.7.22" }, "devDependencies": { "astro": "workspace:*", "astro-scripts": "workspace:*", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vite": "^5.4.10" }, "peerDependencies": { "astro": "^4.0.0", - "svelte": "^4.0.0 || ^5.0.0-next.190", + "svelte": "^5.1.16", "typescript": "^5.3.3" }, "engines": { diff --git a/packages/integrations/svelte/server-v5.d.ts b/packages/integrations/svelte/server-v5.d.ts deleted file mode 100644 index bb2f29556..000000000 --- a/packages/integrations/svelte/server-v5.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import type { NamedSSRLoadedRendererValue } from 'astro'; -export default NamedSSRLoadedRendererValue; diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js deleted file mode 100644 index a38d38260..000000000 --- a/packages/integrations/svelte/server-v5.js +++ /dev/null @@ -1,57 +0,0 @@ -import { createRawSnippet } from 'svelte'; -import { render } from 'svelte/server'; - -function check(Component) { - // Svelte 5 generated components always accept these two props - const str = Component.toString(); - return str.includes('$$payload') && str.includes('$$props'); -} - -function needsHydration(metadata) { - // Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot` - return metadata.astroStaticSlot ? !!metadata.hydrate : true; -} - -async function renderToStaticMarkup(Component, props, slotted, metadata) { - const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot'; - - let children = undefined; - let $$slots = undefined; - const renderProps = {}; - - for (const [key, value] of Object.entries(slotted)) { - // Legacy slot support - $$slots ??= {}; - if (key === 'default') { - $$slots.default = true; - children = createRawSnippet(() => ({ - render: () => `<${tagName}>${value}</${tagName}>`, - })); - } else { - $$slots[key] = createRawSnippet(() => ({ - render: () => `<${tagName} name="${key}">${value}</${tagName}>`, - })); - } - // @render support for Svelte ^5.0 - const slotName = key === 'default' ? 'children' : key; - renderProps[slotName] = createRawSnippet(() => ({ - render: () => `<${tagName}${key !== 'default' ? ` name="${key}"` : ''}>${value}</${tagName}>`, - })); - } - - const result = render(Component, { - props: { - ...props, - children, - $$slots, - ...renderProps, - }, - }); - return { html: result.body }; -} - -export default { - check, - renderToStaticMarkup, - supportsAstroStaticSlot: true, -}; diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/server.js index 9878d3b59..ac133dced 100644 --- a/packages/integrations/svelte/server.js +++ b/packages/integrations/svelte/server.js @@ -1,5 +1,13 @@ +import { createRawSnippet } from 'svelte'; +import { render } from 'svelte/server'; + function check(Component) { - return Component['render'] && Component['$$render']; + if (typeof Component !== 'function') return false; + // Svelte 5 generated components always accept a `$$payload` prop. + // This assumes that the SSR build does not minify it (which Astro enforces by default). + // This isn't the best check, but the only other option otherwise is to try to render the + // component, which is taxing. We'll leave it as a last resort for the future for now. + return Component.toString().includes('$$payload'); } function needsHydration(metadata) { @@ -9,16 +17,44 @@ function needsHydration(metadata) { async function renderToStaticMarkup(Component, props, slotted, metadata) { const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot'; - const slots = {}; + + let children = undefined; + let $$slots = undefined; + const renderProps = {}; + for (const [key, value] of Object.entries(slotted)) { - slots[key] = () => - `<${tagName}${key === 'default' ? '' : ` name="${key}"`}>${value}</${tagName}>`; + // Legacy slot support + $$slots ??= {}; + if (key === 'default') { + $$slots.default = true; + children = createRawSnippet(() => ({ + render: () => `<${tagName}>${value}</${tagName}>`, + })); + } else { + $$slots[key] = createRawSnippet(() => ({ + render: () => `<${tagName} name="${key}">${value}</${tagName}>`, + })); + } + // @render support for Svelte ^5.0 + const slotName = key === 'default' ? 'children' : key; + renderProps[slotName] = createRawSnippet(() => ({ + render: () => `<${tagName}${key !== 'default' ? ` name="${key}"` : ''}>${value}</${tagName}>`, + })); } - const { html } = Component.render(props, { $$slots: slots }); - return { html }; + + const result = render(Component, { + props: { + ...props, + children, + $$slots, + ...renderProps, + }, + }); + return { html: result.body }; } export default { + name: '@astrojs/svelte', check, renderToStaticMarkup, supportsAstroStaticSlot: true, diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts index b0db3505c..0db02aff3 100644 --- a/packages/integrations/svelte/src/index.ts +++ b/packages/integrations/svelte/src/index.ts @@ -1,111 +1,36 @@ -import { fileURLToPath } from 'node:url'; import type { Options } from '@sveltejs/vite-plugin-svelte'; import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import type { AstroIntegration, AstroRenderer, ContainerRenderer } from 'astro'; -import { VERSION } from 'svelte/compiler'; -import type { UserConfig } from 'vite'; - -const isSvelte5 = Number.parseInt(VERSION.split('.').at(0)!) >= 5; function getRenderer(): AstroRenderer { return { name: '@astrojs/svelte', - clientEntrypoint: isSvelte5 ? '@astrojs/svelte/client-v5.js' : '@astrojs/svelte/client.js', - serverEntrypoint: isSvelte5 ? '@astrojs/svelte/server-v5.js' : '@astrojs/svelte/server.js', + clientEntrypoint: '@astrojs/svelte/client.js', + serverEntrypoint: '@astrojs/svelte/server.js', }; } export function getContainerRenderer(): ContainerRenderer { return { name: '@astrojs/svelte', - serverEntrypoint: isSvelte5 ? '@astrojs/svelte/server-v5.js' : '@astrojs/svelte/server.js', - }; -} - -async function svelteConfigHasPreprocess(root: URL) { - const svelteConfigFiles = ['./svelte.config.js', './svelte.config.cjs', './svelte.config.mjs']; - for (const file of svelteConfigFiles) { - const filePath = fileURLToPath(new URL(file, root)); - try { - // Suppress warnings by vite: "The above dynamic import cannot be analyzed by Vite." - const config = (await import(/* @vite-ignore */ filePath)).default; - return !!config.preprocess; - } catch {} - } -} - -type ViteConfigurationArgs = { - isDev: boolean; - options?: Options | OptionsCallback; - root: URL; -}; - -async function getViteConfiguration({ - options, - isDev, - root, -}: ViteConfigurationArgs): Promise<UserConfig> { - const defaultOptions: Partial<Options> = { - emitCss: true, - compilerOptions: { dev: isDev }, - }; - - // `hydratable` does not need to be set in Svelte 5 as it's always hydratable by default - if (!isSvelte5) { - // @ts-ignore ignore Partial type above - defaultOptions.compilerOptions.hydratable = true; - } - - // Disable hot mode during the build - if (!isDev) { - defaultOptions.hot = false; - } - - let resolvedOptions: Partial<Options>; - - if (!options) { - resolvedOptions = defaultOptions; - } else if (typeof options === 'function') { - resolvedOptions = options(defaultOptions); - } else { - resolvedOptions = { - ...options, - ...defaultOptions, - compilerOptions: { - ...options.compilerOptions, - // Always use dev and hydratable from defaults - ...defaultOptions.compilerOptions, - }, - }; - } - - if (!resolvedOptions.preprocess && !(await svelteConfigHasPreprocess(root))) { - resolvedOptions.preprocess = vitePreprocess(); - } - - return { - optimizeDeps: { - include: [isSvelte5 ? '@astrojs/svelte/client-v5.js' : '@astrojs/svelte/client.js'], - exclude: [isSvelte5 ? '@astrojs/svelte/server-v5.js' : '@astrojs/svelte/server.js'], - }, - plugins: [svelte(resolvedOptions)], + serverEntrypoint: '@astrojs/svelte/server.js', }; } -type OptionsCallback = (defaultOptions: Options) => Options; -export default function (options?: Options | OptionsCallback): AstroIntegration { +export default function svelteIntegration(options?: Options): AstroIntegration { return { name: '@astrojs/svelte', hooks: { - // Anything that gets returned here is merged into Astro Config - 'astro:config:setup': async ({ command, updateConfig, addRenderer, config }) => { + 'astro:config:setup': async ({ updateConfig, addRenderer }) => { addRenderer(getRenderer()); updateConfig({ - vite: await getViteConfiguration({ - options, - isDev: command === 'dev', - root: config.root, - }), + vite: { + optimizeDeps: { + include: ['@astrojs/svelte/client.js'], + exclude: ['@astrojs/svelte/server.js'], + }, + plugins: [svelte(options)], + }, }); }, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea794e1bf..e3066152c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -257,8 +257,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -320,8 +320,8 @@ importers: specifier: ^4.16.12 version: link:../../packages/astro svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 examples/framework-vue: dependencies: @@ -374,8 +374,8 @@ importers: specifier: ^4.16.12 version: link:../../packages/astro svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 examples/starlog: dependencies: @@ -934,8 +934,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1058,8 +1058,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1127,8 +1127,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1186,8 +1186,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1226,8 +1226,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1266,8 +1266,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1306,8 +1306,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1346,8 +1346,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1386,8 +1386,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1582,8 +1582,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/e2e/fixtures/tailwindcss: dependencies: @@ -1648,8 +1648,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1786,8 +1786,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1807,8 +1807,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/alias-tsconfig: dependencies: @@ -1822,8 +1822,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/alias-tsconfig-baseurl-only: dependencies: @@ -1834,8 +1834,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package: {} @@ -1959,8 +1959,8 @@ importers: specifier: ^10.24.3 version: 10.24.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -1992,8 +1992,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/astro-client-only/pkg: {} @@ -2084,8 +2084,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/astro-env: dependencies: @@ -2191,9 +2191,6 @@ importers: packages/astro/test/fixtures/astro-markdown: dependencies: - '@astrojs/svelte': - specifier: workspace:* - version: link:../../../../integrations/svelte astro: specifier: workspace:* version: link:../../.. @@ -2414,8 +2411,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -2498,8 +2495,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/component-library-shared: dependencies: @@ -2801,8 +2798,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/css-import-as-inline: dependencies: @@ -3053,8 +3050,8 @@ importers: specifier: ^10.24.3 version: 10.24.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -3257,8 +3254,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -3445,8 +3442,8 @@ importers: specifier: ^1.9.3 version: 1.9.3 svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -3639,8 +3636,8 @@ importers: specifier: workspace:* version: link:../../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/server-islands/ssr: dependencies: @@ -3651,8 +3648,8 @@ importers: specifier: workspace:* version: link:../../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/set-html: dependencies: @@ -3720,8 +3717,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/slots-vue: dependencies: @@ -4045,8 +4042,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 packages/astro/test/fixtures/tailwindcss: dependencies: @@ -4168,8 +4165,8 @@ importers: specifier: workspace:* version: link:../../.. svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -5167,11 +5164,11 @@ importers: packages/integrations/svelte: dependencies: '@sveltejs/vite-plugin-svelte': - specifier: ^3.1.2 - version: 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) + specifier: ^4.0.0 + version: 4.0.0(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) svelte2tsx: specifier: ^0.7.22 - version: 0.7.22(svelte@4.2.19)(typescript@5.6.3) + version: 0.7.22(svelte@5.1.16)(typescript@5.6.3) devDependencies: astro: specifier: workspace:* @@ -5180,8 +5177,8 @@ importers: specifier: workspace:* version: link:../../../scripts svelte: - specifier: ^4.2.19 - version: 4.2.19 + specifier: ^5.1.16 + version: 5.1.16 vite: specifier: ^5.4.10 version: 5.4.10(@types/node@18.19.50)(sass@1.80.6) @@ -6925,19 +6922,19 @@ packages: peerDependencies: solid-js: ^1.8.6 - '@sveltejs/vite-plugin-svelte-inspector@2.1.0': - resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==} - engines: {node: ^18.0.0 || >=20} + '@sveltejs/vite-plugin-svelte-inspector@3.0.1': + resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22} peerDependencies: - '@sveltejs/vite-plugin-svelte': ^3.0.0 - svelte: ^4.0.0 || ^5.0.0-next.0 + '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0 + svelte: ^5.0.0-next.96 || ^5.0.0 vite: ^5.0.0 - '@sveltejs/vite-plugin-svelte@3.1.2': - resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==} - engines: {node: ^18.0.0 || >=20} + '@sveltejs/vite-plugin-svelte@4.0.0': + resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22} peerDependencies: - svelte: ^4.0.0 || ^5.0.0-next.0 + svelte: ^5.0.0-next.96 || ^5.0.0 vite: ^5.0.0 '@trysound/sax@0.2.0': @@ -7324,6 +7321,11 @@ packages: peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + acorn-typescript@1.4.13: + resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==} + peerDependencies: + acorn: '>=8.9.0' + acorn@8.14.0: resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==} engines: {node: '>=0.4.0'} @@ -7631,9 +7633,6 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} - code-red@1.0.4: - resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} - collapse-white-space@2.1.0: resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} @@ -8120,6 +8119,9 @@ packages: jiti: optional: true + esm-env@1.1.4: + resolution: {integrity: sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==} + esm@3.2.25: resolution: {integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==} engines: {node: '>=6'} @@ -8137,6 +8139,9 @@ packages: resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==} engines: {node: '>=0.10'} + esrap@1.2.2: + resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==} + esrecurse@4.3.0: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} engines: {node: '>=4.0'} @@ -9459,9 +9464,6 @@ packages: perfect-debounce@1.0.0: resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} - periscopic@3.1.0: - resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} - picocolors@1.1.0: resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} @@ -10283,21 +10285,15 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - svelte-hmr@0.16.0: - resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==} - engines: {node: ^12.20 || ^14.13.1 || >= 16} - peerDependencies: - svelte: ^3.19.0 || ^4.0.0 - svelte2tsx@0.7.22: resolution: {integrity: sha512-hf55ujq17ufVpDQlJzaQfRr9EjlLIwGmFlpKq4uYrQAQFw/99q1OcVYyBT6568iJySgBUY9PdccURrORmfetmQ==} peerDependencies: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - svelte@4.2.19: - resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==} - engines: {node: '>=16'} + svelte@5.1.16: + resolution: {integrity: sha512-QcY+om9r8+uTcSfeFuv8++ExdfwVCKeT+Y7GPSZ6rQPczvy62BMtvMoi0rScabgv+upGE5jxKjd7M4u23+AjGA==} + engines: {node: '>=18'} svg-tags@1.0.0: resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} @@ -11012,6 +11008,9 @@ packages: resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==} engines: {node: '>=12.20'} + zimmerframe@1.1.2: + resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==} + zod-to-json-schema@3.23.5: resolution: {integrity: sha512-5wlSS0bXfF/BrL4jPAbz9da5hDlDptdEppYfe+x4eIJ7jioqKG9uUxOwPzqof09u/XeVdrgFu29lZi+8XNDJtA==} peerDependencies: @@ -12464,26 +12463,25 @@ snapshots: dependencies: solid-js: 1.9.3 - '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6))': + '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)))(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6))': dependencies: - '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) + '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) debug: 4.3.7 - svelte: 4.2.19 + svelte: 5.1.16 vite: 5.4.10(@types/node@18.19.50)(sass@1.80.6) transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6))': + '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6))': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) + '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)))(svelte@5.1.16)(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) debug: 4.3.7 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.12 - svelte: 4.2.19 - svelte-hmr: 0.16.0(svelte@4.2.19) + svelte: 5.1.16 vite: 5.4.10(@types/node@18.19.50)(sass@1.80.6) - vitefu: 0.2.5(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) + vitefu: 1.0.3(vite@5.4.10(@types/node@18.19.50)(sass@1.80.6)) transitivePeerDependencies: - supports-color @@ -12995,6 +12993,10 @@ snapshots: dependencies: acorn: 8.14.0 + acorn-typescript@1.4.13(acorn@8.14.0): + dependencies: + acorn: 8.14.0 + acorn@8.14.0: {} agent-base@7.1.1: @@ -13336,14 +13338,6 @@ snapshots: clsx@2.1.1: {} - code-red@1.0.4: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.0 - '@types/estree': 1.0.6 - acorn: 8.14.0 - estree-walker: 3.0.3 - periscopic: 3.1.0 - collapse-white-space@2.1.0: {} color-convert@2.0.1: @@ -13737,6 +13731,8 @@ snapshots: transitivePeerDependencies: - supports-color + esm-env@1.1.4: {} + esm@3.2.25: {} espree@10.3.0: @@ -13751,6 +13747,11 @@ snapshots: dependencies: estraverse: 5.3.0 + esrap@1.2.2: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + '@types/estree': 1.0.6 + esrecurse@4.3.0: dependencies: estraverse: 5.3.0 @@ -15433,12 +15434,6 @@ snapshots: perfect-debounce@1.0.0: {} - periscopic@3.1.0: - dependencies: - '@types/estree': 1.0.6 - estree-walker: 3.0.3 - is-reference: 3.0.2 - picocolors@1.1.0: {} picomatch@2.3.1: {} @@ -16435,33 +16430,28 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte-hmr@0.16.0(svelte@4.2.19): - dependencies: - svelte: 4.2.19 - - svelte2tsx@0.7.22(svelte@4.2.19)(typescript@5.6.3): + svelte2tsx@0.7.22(svelte@5.1.16)(typescript@5.6.3): dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 4.2.19 + svelte: 5.1.16 typescript: 5.6.3 - svelte@4.2.19: + svelte@5.1.16: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.5.0 - '@jridgewell/trace-mapping': 0.3.25 '@types/estree': 1.0.6 acorn: 8.14.0 + acorn-typescript: 1.4.13(acorn@8.14.0) aria-query: 5.3.2 axobject-query: 4.1.0 - code-red: 1.0.4 - css-tree: 2.3.1 - estree-walker: 3.0.3 + esm-env: 1.1.4 + esrap: 1.2.2 is-reference: 3.0.2 locate-character: 3.0.0 magic-string: 0.30.12 - periscopic: 3.1.0 + zimmerframe: 1.1.2 svg-tags@1.0.0: {} @@ -17195,6 +17185,8 @@ snapshots: yocto-queue@1.1.1: {} + zimmerframe@1.1.2: {} + zod-to-json-schema@3.23.5(zod@3.23.8): dependencies: zod: 3.23.8 |