fix: ignore warning binding non reactive (#12524)

This prop that is bound to doesn't need to be reactive, so ignoring the warning is the best option
closes sveltejs/svelte#12514

Author: paoloricciuti

.changeset/gorgeous-jars-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: Svelte 5 - ignore `binding_non_reactive` warning in generated root component (you also need to update to `[email protected]`)

packages/kit/src/core/sync/write_root.js

@@ -21,15 +21,20 @@ export function write_root(manifest_data, output) {
 
 	let l = max_depth;
 
-	let pyramid = `<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`;
+	let pyramid = dedent`
+	${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
+	<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />
+	`;
 
 	while (l--) {
 		pyramid = dedent`
 			{#if constructors[${l + 1}]}
+				${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
 				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
 					${pyramid}
 				</svelte:component>
 			{:else}
+				${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
 				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />
 			{/if}
 		`;

packages/kit/test/apps/basics/test/client.test.js

@@ -1198,3 +1198,19 @@ test.describe('INP', () => {
 		expect(time).toBeLessThan(400);
 	});
 });
+
+test.describe('binding_property_non_reactive warn', () => {
+	test('warning is not thrown from the root of svelte', async ({ page }) => {
+		let is_warning_thrown = false;
+		page.on('console', (m) => {
+			if (
+				m.type() === 'warn' &&
+				m.text().includes('binding_property_non_reactive `bind:this={components[0]}`')
+			) {
+				is_warning_thrown = true;
+			}
+		});
+		await page.goto('/');
+		expect(is_warning_thrown).toBeFalsy();
+	});
+});