alternative approach

Author: Rich-Harris

.changeset/wise-grapes-enjoy.md

@@ -2,4 +2,4 @@
 'svelte': minor
 ---
 
-feat: Add `idPrefix` option in `render`/`mount`/`hydrate` functions
+feat: Add `idPrefix` option to `render`

packages/svelte/src/index.d.ts

@@ -16,7 +16,6 @@ export interface ComponentConstructorOptions<
 	props?: Props;
 	context?: Map<any, any>;
 	hydrate?: boolean;
-	idPrefix?: string;
 	intro?: boolean;
 	recover?: boolean;
 	sync?: boolean;
@@ -338,10 +337,6 @@ export type MountOptions<Props extends Record<string, any> = Record<string, any>
 	 * @default true
 	 */
 	intro?: boolean;
-	/**
-	 * Provide a prefix for the generated ID from `$props.id`
-	 */
-	idPrefix?: string;
 } & ({} extends Props
 	? {
 			/**

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

@@ -20,13 +20,6 @@ export function set_hydrating(value) {
 	hydrating = value;
 }
 
-export let id_prefix = '';
-
-/** @param {string} v */
-export function set_id_prefix(v) {
-	id_prefix = v;
-}
-
 /**
  * The node that is currently being hydrated. This starts out as the first node inside the opening
  * <!--[--> comment, and updates each time a component calls `$.child(...)` or `$.sibling(...)`.

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

@@ -1,5 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
-import { hydrate_next, hydrate_node, hydrating, id_prefix, set_hydrate_node } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child, is_firefox } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.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(`#${id_prefix}s`)
+		hydrate_node.textContent?.startsWith(`#`)
 	) {
 		const id = hydrate_node.textContent.substring(1);
 		hydrate_next();
 		return id;
 	}
 
-	return `${id_prefix}c${uid++}`;
+	// @ts-expect-error
+	(window.__svelte ??= {}).uid ??= 1;
+
+	// @ts-expect-error
+	return `c${window.__svelte.uid++}`;
 }

packages/svelte/src/internal/client/render.js

@@ -17,8 +17,7 @@ import {
 	hydrate_node,
 	hydrating,
 	set_hydrate_node,
-	set_hydrating,
-	set_id_prefix
+	set_hydrating
 } from './dom/hydration.js';
 import { array_from } from '../shared/utils.js';
 import {
@@ -87,15 +86,13 @@ export function mount(component, options) {
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: boolean;
- * 		idPrefix?: string;
  * 	} : {
  * 		target: Document | Element | ShadowRoot;
  * 		props: Props;
  * 		events?: Record<string, (e: any) => any>;
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: boolean;
- * 		idPrefix?: string;
  * 	}} options
  * @returns {Exports}
  */
@@ -168,10 +165,7 @@ const document_listeners = new Map();
  * @param {MountOptions} options
  * @returns {Exports}
  */
-function _mount(
-	Component,
-	{ target, anchor, props = {}, events, context, intro = true, idPrefix }
-) {
+function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) {
 	init_operations();
 
 	var registered_events = new Set();
@@ -215,14 +209,12 @@ function _mount(
 		var anchor_node = anchor ?? target.appendChild(create_text());
 
 		branch(() => {
-			if (context || idPrefix != null) {
+			if (context) {
 				push({});
 				var ctx = /** @type {ComponentContext} */ (component_context);
 				if (context) {
 					ctx.c = context;
 				}
-
-				set_id_prefix(idPrefix ? idPrefix + '-' : '');
 			}
 
 			if (events) {

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/legacy/legacy-client.js

@@ -116,8 +116,7 @@ class Svelte4Component {
 			props,
 			context: options.context,
 			intro: options.intro ?? false,
-			recover: options.recover,
-			idPrefix: options.idPrefix
+			recover: options.recover
 		});
 
 		// We don't flushSync for custom element wrappers or if the user doesn't want it

packages/svelte/tests/runtime-legacy/shared.ts

@@ -11,7 +11,6 @@ import { setup_html_equal } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
 import { suite_with_variants, type BaseTest } from '../suite.js';
-import { reset_props_id } from '../../src/internal/client/dom/template.js';
 
 type Assert = typeof import('vitest').assert & {
 	htmlEqual(a: string, b: string, description?: string): void;
@@ -348,7 +347,10 @@ async function run_test_variant(
 
 			if (runes) {
 				props = proxy({ ...(config.props || {}) });
-				reset_props_id();
+
+				// @ts-expect-error
+				globalThis.__svelte.uid = 1;
+
 				if (manual_hydrate) {
 					hydrate_fn = () => {
 						instance = hydrate(mod.default, {
@@ -364,8 +366,7 @@ async function run_test_variant(
 						target,
 						props,
 						intro: config.intro,
-						recover: config.recover ?? false,
-						idPrefix: config.id_prefix
+						recover: config.recover ?? false
 					});
 				}
 			} else {

packages/svelte/tests/runtime-runes/samples/props-id-prefix/_config.js

@@ -9,10 +9,10 @@ export default test({
 				target.innerHTML,
 				`
 					<button>toggle</button>
-					<h1>myPrefix-c1</h1>
-					<p>myPrefix-c2</p>
-					<p>myPrefix-c3</p>
-					<p>myPrefix-c4</p>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
 				`
 			);
 		} else {
@@ -36,11 +36,11 @@ export default test({
 				target.innerHTML,
 				`
 					<button>toggle</button>
-					<h1>myPrefix-c1</h1>
-					<p>myPrefix-c2</p>
-					<p>myPrefix-c3</p>
-					<p>myPrefix-c4</p>
-					<p>myPrefix-c5</p>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
+					<p>c5</p>
 				`
 			);
 		} else {
@@ -52,7 +52,7 @@ export default test({
 					<p>myPrefix-s2</p>
 					<p>myPrefix-s3</p>
 					<p>myPrefix-s4</p>
-					<p>myPrefix-c1</p>
+					<p>c1</p>
 				`
 			);
 		}

packages/svelte/types/index.d.ts

@@ -13,7 +13,6 @@ declare module 'svelte' {
 		props?: Props;
 		context?: Map<any, any>;
 		hydrate?: boolean;
-		idPrefix?: string;
 		intro?: boolean;
 		recover?: boolean;
 		sync?: boolean;
@@ -335,10 +334,6 @@ declare module 'svelte' {
 		 * @default true
 		 */
 		intro?: boolean;
-		/**
-		 * Provide a prefix for the generated ID from `$props.id`
-		 */
-		idPrefix?: string;
 	} & ({} extends Props
 		? {
 				/**
@@ -490,15 +485,13 @@ declare module 'svelte' {
 		context?: Map<any, any>;
 		intro?: boolean;
 		recover?: boolean;
-		idPrefix?: string;
 	} : {
 		target: Document | Element | ShadowRoot;
 		props: Props;
 		events?: Record<string, (e: any) => any>;
 		context?: Map<any, any>;
 		intro?: boolean;
 		recover?: boolean;
-		idPrefix?: string;
 	}): Exports;
 	/**
 	 * Unmounts a component that was previously mounted using `mount` or `hydrate`.
@@ -1882,10 +1875,10 @@ declare module 'svelte/motion' {
 		 * 	const tween = Tween.of(() => number);
 		 * </script>
 		 * ```
-		 *
+		 * 
 		 */
 		static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
-
+		
 		constructor(value: T, options?: TweenedOptions<T>);
 		/**
 		 * Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
@@ -1904,21 +1897,21 @@ declare module 'svelte/motion' {
 
 declare module 'svelte/reactivity' {
 	export class SvelteDate extends Date {
-
+		
 		constructor(...params: any[]);
 		#private;
 	}
 	export class SvelteSet<T> extends Set<T> {
-
+		
 		constructor(value?: Iterable<T> | null | undefined);
-
+		
 		add(value: T): this;
 		#private;
 	}
 	export class SvelteMap<K, V> extends Map<K, V> {
-
+		
 		constructor(value?: Iterable<readonly [K, V]> | null | undefined);
-
+		
 		set(key: K, value: V): this;
 		#private;
 	}
@@ -1928,7 +1921,7 @@ declare module 'svelte/reactivity' {
 	}
 	const REPLACE: unique symbol;
 	export class SvelteURLSearchParams extends URLSearchParams {
-
+		
 		[REPLACE](params: URLSearchParams): void;
 		#private;
 	}
@@ -2000,7 +1993,7 @@ declare module 'svelte/reactivity' {
 	 */
 	export function createSubscriber(start: (update: () => void) => (() => void) | void): () => void;
 	class ReactiveValue<T> {
-
+		
 		constructor(fn: () => T, onsubscribe: (update: () => void) => void);
 		get current(): T;
 		#private;
@@ -2065,7 +2058,7 @@ declare module 'svelte/reactivity/window' {
 		get current(): number | undefined;
 	};
 	class ReactiveValue<T> {
-
+		
 		constructor(fn: () => T, onsubscribe: (update: () => void) => void);
 		get current(): T;
 		#private;