fix(svelte): update add_snippet_symbol import

[mass8326]

Changes

• What does this change?
• Be short and concise. Bullet points can help!
• Before/after screenshots can help as well.
• Don't forget a changeset! pnpm exec changeset

Fixes #11149

[email protected] removed the add_snippet_symbol export in svelte/internal/client. This changes the import from svelte/internal/client to svelte/internal/server.

---

Looking at the svelte source code, add_snippet_symbol from both client and server were simply re-exports of a shared file.

Though it feels wrong to import a server file into a client file, this might be acceptable since this is for dev validation only and the underlying function is the same.

The re-export from svelte/internal/server was originally added in [email protected]. Since the minimum version required is already [email protected], this should not be a breaking change.

Testing

Changing the import from svelte/internal/client to svelte/internal/server using pnpm patch in pre-existing projects allows build to complete.

diff --git a/client-v5.js b/client-v5.js
index 755a6aa5381ee602ba8ece2f91f6439c8b19dd3f..896be0982ee3047cdc182345bad818733e06be92 100644
--- a/client-v5.js
+++ b/client-v5.js
@@ -1,5 +1,5 @@
 import { hydrate, mount, unmount } from 'svelte';
-import { add_snippet_symbol } from 'svelte/internal/client';
+import { add_snippet_symbol } from 'svelte/internal/server';
 
 // Allow a slot to be rendered as a snippet (dev validation only)
 const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s;

Docs

This fix requires no changes on the part of the user and shouldn't need to be documented.

[changeset-bot]

🦋 Changeset detected

Latest commit: fc3ea5d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bluwy]

I don't think we can import from svelte/internal/server. It implies that it'll only work on the server side. From what I can tell, Svelte refactored it to wrap_snippet in sveltejs/svelte#11401, which caused add_snippet_symbol to be unused and subsequently removed in sveltejs/svelte#10800.

I think we need to use wrap_snippet in this case, but I'm not sure if there's any downsides to this. Otherwise it may be easier to remove calling the function in the first place if it works.

[mass8326]

I took a look into this and tried replacing the call with wrap_snippet and it seems like the integration silently fails.

<script lang="ts">
  import type { Snippet } from "svelte";
  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

---
import Test from "test.svelte";
---

<Test client:load>Hello world!</Test>

The above code will end up displaying nothing without throwing any errors.

It seems like the component context handling added to wrap_snippet won't work with what Astro passes in.

Should an issue be made with the svelte repo asking for add_snippet_symbol to be exposed from 'svelte/internal/client' again?

[mwc]

Is there any progress?