feat: add idPrefix to render (#15428)

This ensures someone like Astro can render multiple islands and the unique ids produced in them are able to be deduplicated

---------

Co-authored-by: Hugos68 <[email protected]>
Co-authored-by: paoloricciuti <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

Author: 4 people

.changeset/wise-grapes-enjoy.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: Add `idPrefix` option to `render`

packages/svelte/src/index.d.ts

@@ -19,6 +19,7 @@ export interface ComponentConstructorOptions<
 	intro?: boolean;
 	recover?: boolean;
 	sync?: boolean;
+	idPrefix?: string;
 	$$inline?: boolean;
 }
 

packages/svelte/src/internal/client/dom/template.js

@@ -250,12 +250,6 @@ export function append(anchor, dom) {
 	anchor.before(/** @type {Node} */ (dom));
 }
 
-let uid = 1;
-
-export function reset_props_id() {
-	uid = 1;
-}
-
 /**
  * Create (or hydrate) an unique UID for the component instance.
  */
@@ -264,12 +258,16 @@ export function props_id() {
 		hydrating &&
 		hydrate_node &&
 		hydrate_node.nodeType === 8 &&
-		hydrate_node.textContent?.startsWith('#s')
+		hydrate_node.textContent?.startsWith(`#`)
 	) {
 		const id = hydrate_node.textContent.substring(1);
 		hydrate_next();
 		return id;
 	}
 
-	return 'c' + uid++;
+	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
+	(window.__svelte ??= {}).uid ??= 1;
+
+	// @ts-expect-error
+	return `c${window.__svelte.uid++}`;
 }

packages/svelte/src/internal/disclose-version.js

@@ -1,5 +1,6 @@
 import { PUBLIC_VERSION } from '../version.js';
 
-if (typeof window !== 'undefined')
-	// @ts-ignore
-	(window.__svelte ||= { v: new Set() }).v.add(PUBLIC_VERSION);
+if (typeof window !== 'undefined') {
+	// @ts-expect-error
+	((window.__svelte ??= {}).v ??= new Set()).add(PUBLIC_VERSION);
+}

packages/svelte/src/internal/server/index.js

@@ -86,21 +86,26 @@ export function element(payload, tag, attributes_fn = noop, children_fn = noop)
  */
 export let on_destroy = [];
 
-function props_id_generator() {
+/**
+ * Creates an ID generator
+ * @param {string} prefix
+ * @returns {() => string}
+ */
+function props_id_generator(prefix) {
 	let uid = 1;
-	return () => 's' + uid++;
+	return () => `${prefix}s${uid++}`;
 }
 
 /**
  * Only available on the server and when compiling with the `server` option.
  * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
  * @template {Record<string, any>} Props
  * @param {import('svelte').Component<Props> | ComponentType<SvelteComponent<Props>>} component
- * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} [options]
+ * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} [options]
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	const uid = props_id_generator();
+	const uid = props_id_generator(options.idPrefix ? options.idPrefix + '-' : '');
 	/** @type {Payload} */
 	const payload = {
 		out: '',

packages/svelte/src/server/index.d.ts

@@ -12,10 +12,18 @@ export function render<
 	...args: {} extends Props
 		? [
 				component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-				options?: { props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+				options?: {
+					props?: Omit<Props, '$$slots' | '$$events'>;
+					context?: Map<any, any>;
+					idPrefix?: string;
+				}
 			]
 		: [
 				component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-				options: { props: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+				options: {
+					props: Omit<Props, '$$slots' | '$$events'>;
+					context?: Map<any, any>;
+					idPrefix?: string;
+				}
 			]
 ): RenderOutput;

packages/svelte/tests/hydration/test.ts

@@ -2,9 +2,9 @@
 
 import * as fs from 'node:fs';
 import { assert } from 'vitest';
-import { compile_directory, should_update_expected } from '../helpers.js';
+import { compile_directory } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { suite, assert_ok, type BaseTest } from '../suite.js';
+import { assert_ok, suite, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
 import { render } from 'svelte/server';
 import type { CompileOptions } from '#compiler';
@@ -13,6 +13,7 @@ import { flushSync } from 'svelte';
 interface HydrationTest extends BaseTest {
 	load_compiled?: boolean;
 	server_props?: Record<string, any>;
+	id_prefix?: string;
 	props?: Record<string, any>;
 	compileOptions?: Partial<CompileOptions>;
 	/**
@@ -50,7 +51,8 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	const head = window.document.head;
 
 	const rendered = render((await import(`${cwd}/_output/server/main.svelte.js`)).default, {
-		props: config.server_props ?? config.props ?? {}
+		props: config.server_props ?? config.props ?? {},
+		idPrefix: config?.id_prefix
 	});
 
 	const override = read(`${cwd}/_override.html`);
@@ -103,7 +105,8 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 			component: (await import(`${cwd}/_output/client/main.svelte.js`)).default,
 			target,
 			hydrate: true,
-			props: config.props
+			props: config.props,
+			idPrefix: config?.id_prefix
 		});
 
 		console.warn = warn;

packages/svelte/tests/runtime-browser/assert.js

@@ -119,6 +119,7 @@ function normalize_children(node) {
  *  skip_mode?: Array<'server' | 'client' | 'hydrate'>;
  *	html?: string;
  *	ssrHtml?: string;
+ *	id_prefix?: string;
  *	props?: Props;
  *	compileOptions?: Partial<CompileOptions>;
  *	test?: (args: {

packages/svelte/tests/runtime-browser/driver-ssr.js

@@ -6,5 +6,5 @@ import config from '__CONFIG__';
 import { render } from 'svelte/server';
 
 export default function () {
-	return render(SvelteComponent, { props: config.props || {} });
+	return render(SvelteComponent, { props: config.props || {}, idPrefix: config?.id_prefix });
 }

packages/svelte/tests/runtime-browser/test-ssr.ts

@@ -20,7 +20,7 @@ export async function run_ssr_test(
 		await compile_directory(test_dir, 'server', config.compileOptions);
 
 		const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
-		const { body } = render(Component, { props: config.props || {} });
+		const { body } = render(Component, { props: config.props || {}, idPrefix: config.id_prefix });
 
 		fs.writeFileSync(`${test_dir}/_output/rendered.html`, body);