fix: avoid shadowing a variable in dynamic components

Author: 7nik

.changeset/short-mails-know.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid shadowing a variable in dynamic components

packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js

@@ -10,9 +10,10 @@ import { build_component } from './shared/component.js';
 export function Component(node, context) {
 	const component = build_component(
 		node,
-		// if it's not dynamic we will just use the node name, if it is dynamic we will use the node name
-		// only if it's a valid identifier, otherwise we will use a default name
-		!node.metadata.dynamic || regex_is_valid_identifier.test(node.name) ? node.name : '$$component',
+		// avoid shadowing the component variable by a variable used in $.component
+		node.metadata.dynamic
+			? '$$component_' + node.name.replaceAll(/[^a-zA-Z_$0-9]/g, '_')
+			: node.name,
 		context
 	);
 	context.state.init.push(component);

packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte

@@ -0,0 +1,5 @@
+<script>
+	const { children } = $props()
+</script>
+
+{@render children()}

packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'test');
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+
+	const B = $derived(A);
+</script>
+
+<B>
+	<B>test</B>
+</B>