bugfix(svelte): fix colliding id's generated from $props.id (#13339)

* bugfix(svelte): fix colliding id's generating from $props.id by utilizing the new `uidPrefix` option exposed for both server and client side rendering.

* bugfix(svelte): changeset

* Add server side ID prefix, not sure how to do this on the client.

* Discard changes to packages/integrations/svelte/client.svelte.js

* Update .changeset/flat-cherries-rule.md

Co-authored-by: Florian Lefebvre <[email protected]>

* feat: context

* revert peerDep bump

* revert html variable seperation

* feat: rename

* fix lockfile

---------

Co-authored-by: Florian Lefebvre <[email protected]>

Author: Hugos68

.changeset/flat-cherries-rule.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Fixes a case where `$props.id()` would not be unique across multiple islands

packages/integrations/svelte/context.js

@@ -0,0 +1,24 @@
+const contexts = new WeakMap();
+
+const ID_PREFIX = 's';
+
+function getContext(rendererContextResult) {
+	if (contexts.has(rendererContextResult)) {
+		return contexts.get(rendererContextResult);
+	}
+	const ctx = {
+		currentIndex: 0,
+		get id() {
+			return ID_PREFIX + this.currentIndex.toString();
+		},
+	};
+	contexts.set(rendererContextResult, ctx);
+	return ctx;
+}
+
+export function incrementId(rendererContextResult) {
+	const ctx = getContext(rendererContextResult);
+	const id = ctx.id;
+	ctx.currentIndex++;
+	return id;
+}

packages/integrations/svelte/package.json

@@ -31,7 +31,8 @@
     "dist",
     "client.svelte.js",
     "server.js",
-    "server.d.ts"
+    "server.d.ts",
+    "context.js"
   ],
   "scripts": {
     "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
@@ -46,7 +47,7 @@
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "svelte": "^5.21.0"
+    "svelte": "^5.22.1"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

packages/integrations/svelte/server.js

@@ -1,5 +1,6 @@
 import { createRawSnippet } from 'svelte';
 import { render } from 'svelte/server';
+import { incrementId } from './context.js';
 
 function check(Component) {
 	if (typeof Component !== 'function') return false;
@@ -20,8 +21,11 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 
 	let children = undefined;
 	let $$slots = undefined;
+	let idPrefix;
+	if (this && this.result) {
+		idPrefix = incrementId(this.result);
+	}
 	const renderProps = {};
-
 	for (const [key, value] of Object.entries(slotted)) {
 		// Legacy slot support
 		$$slots ??= {};
@@ -49,6 +53,7 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 			$$slots,
 			...renderProps,
 		},
+		idPrefix,
 	});
 	return { html: result.body };
 }