From 206bdf42ed2ce1bfa2f9275e3193987eb82bbe83 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:57:52 +0200
Subject: [PATCH] fix: allow usage of `$props.id`

---
 .../svelte/src/internal/client/custom-renderer/state.js  | 3 +++
 packages/svelte/src/internal/client/dom/operations.js    | 9 ++++++++-
 packages/svelte/src/internal/client/dom/template.js      | 6 ++++--
 .../tests/custom-renderers/samples/props-id/_config.js   | 5 +++++
 .../tests/custom-renderers/samples/props-id/main.svelte  | 5 +++++
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/props-id/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/props-id/main.svelte

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 60bee26fd3..43d8cef47a 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -7,6 +7,9 @@
  */
 export let renderer = null;
 
+// to use with $props.id()
+export let custom_renderer_window = {};
+
 /**
  * @param {Renderer<any, any, any, any> | null} $renderer
  */
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 9aadb02734..b5acb544bf 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -13,7 +13,7 @@ import {
 } from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
-import { renderer } from '../custom-renderer/state.js';
+import { custom_renderer_window, renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -788,3 +788,10 @@ export function class_list_toggle(element, name, force) {
 	}
 	element.classList.toggle(name, force);
 }
+
+export function get_window() {
+	if (renderer) {
+		return custom_renderer_window;
+	}
+	return window;
+}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index c8744d7fb1..a099b7ccb5 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -20,7 +20,8 @@ import {
 	replace_with,
 	node_type,
 	get_node_value,
-	node_name
+	node_name,
+	get_window
 } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
@@ -417,7 +418,8 @@ export function props_id() {
 		return id;
 	}
 
-	// TODO RENDERER: figure out what to do here
+	let window = get_window();
+
 	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
 	(window.__svelte ??= {}).uid ??= 1;
 
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/_config.js b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
new file mode 100644
index 0000000000..904e7498a8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'c1'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
new file mode 100644
index 0000000000..bbed82af1e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+{id}
\ No newline at end of file