fix: push renderer at the very top of component

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

@@ -406,13 +406,6 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (analysis.custom_renderer) {
-		component_block.body.unshift(
-			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
-		);
-		component_block.body.push(b.stmt(b.call('$$pop_renderer')));
-	}
-
 	let should_inject_props =
 		should_inject_context ||
 		analysis.needs_props ||
@@ -616,6 +609,13 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.const(analysis.props_id, b.call('$.props_id')));
 	}
 
+	if (analysis.custom_renderer) {
+		component_block.body.unshift(
+			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
+		);
+		component_block.body.push(b.stmt(b.call('$$pop_renderer')));
+	}
+
 	if (state.events.size > 0) {
 		body.push(
 			b.stmt(b.call('$.delegate', b.array(Array.from(state.events).map((name) => b.literal(name)))))

packages/svelte/tests/custom-renderers/samples/props-id/Nested.svelte

@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+{id}

packages/svelte/tests/custom-renderers/samples/props-id/_config.js

@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	html: 'c1'
+	html: 'c1 c2'
 });

packages/svelte/tests/custom-renderers/samples/props-id/main.svelte

@@ -1,5 +1,7 @@
 <script>
+	import Nested from './Nested.svelte';
 	let id = $props.id();
 </script>
 
-{id}
+{id}
+<Nested />