fix: ensure dev validation in dynamic component works as intended (#11985)

Fixes #11984

Author: trueadm

.changeset/neat-jokes-beam.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: enusre dev validation in dynamic component works as intended

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

@@ -671,6 +671,9 @@ function serialize_inline_component(node, component_name, context) {
 	/** @type {import('estree').Identifier | import('estree').MemberExpression | null} */
 	let bind_this = null;
 
+	/**
+	 * @type {import("estree").ExpressionStatement[]}
+	 */
 	const binding_initializers = [];
 
 	/**
@@ -920,6 +923,8 @@ function serialize_inline_component(node, component_name, context) {
 		};
 	}
 
+	const statements = [...snippet_declarations];
+
 	if (node.type === 'SvelteComponent') {
 		const prev = fn;
 
@@ -930,6 +935,7 @@ function serialize_inline_component(node, component_name, context) {
 				b.arrow(
 					[b.id(component_name)],
 					b.block([
+						...binding_initializers,
 						b.stmt(
 							context.state.options.dev
 								? b.call('$.validate_dynamic_component', b.thunk(prev(node_id)))
@@ -939,10 +945,10 @@ function serialize_inline_component(node, component_name, context) {
 				)
 			);
 		};
+	} else {
+		statements.push(...binding_initializers);
 	}
 
-	const statements = [...snippet_declarations, ...binding_initializers];
-
 	if (Object.keys(custom_css_props).length > 0) {
 		context.state.template.push(
 			context.state.metadata.namespace === 'svg'

packages/svelte/tests/runtime-legacy/samples/dynamic-component-this/Test.svelte

@@ -0,0 +1,3 @@
+<script>
+  export let div;
+</script>

packages/svelte/tests/runtime-legacy/samples/dynamic-component-this/_config.js

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, component, target }) {
+		// Shouldn't error
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-component-this/main.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Test from './Test.svelte'
+
+  let div
+</script>
+
+<svelte:component this={Test} bind:div />