fix: ensure components always return an object (#12290)

Closes #12287

---------

Co-authored-by: Simon H <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

.changeset/warm-waves-reply.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure component always returns an object

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

@@ -339,6 +339,9 @@ export function client_component(source, analysis, options) {
 				? b.return(b.call('$.pop', b.object(component_returned_object)))
 				: b.stmt(b.call('$.pop'))
 		);
+	} else {
+		// Always return an object, so that `bind:this` on this component will not be falsy
+		component_block.body.push(b.return(b.object(component_returned_object)));
 	}
 
 	if (analysis.uses_rest_props) {

packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentA.svelte

@@ -0,0 +1,5 @@
+<script>
+	export const a = {};
+</script>
+
+<div>a</div>

packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentB.svelte

@@ -0,0 +1 @@
+<div>b</div>

packages/svelte/tests/runtime-runes/samples/bind-this-frozen/_config.js

@@ -0,0 +1,26 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>a</button><button>b</button><div>a</div>`,
+	compileOptions: {
+		dev: false
+	},
+
+	async test({ assert, target, logs, ok }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>a</button><button>b</button><div>b</div>`);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>a</button><button>b</button><div>a</div>`);
+		assert.deepEqual(logs, [{ a: {} }, {}, { a: {} }]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-this-frozen/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	import ComponentA from './ComponentA.svelte';
+	import ComponentB from './ComponentB.svelte';
+
+	let type = $state(ComponentA);
+	let elem = $state.frozen();
+
+	$effect(() => {
+		console.log(elem);
+	});
+</script>
+
+<button
+	onclick={() => {
+		type = ComponentA;
+	}}>a</button
+>
+<button
+	onclick={() => {
+		type = ComponentB;
+	}}>b</button
+>
+
+<svelte:component this={type} bind:this={elem}>Content</svelte:component>

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js

@@ -30,4 +30,5 @@ export default function Bind_component_snippet($$anchor) {
 
 	$.template_effect(() => $.set_text(text, ` value: ${$.get(value) ?? ""}`));
 	$.append($$anchor, fragment_1);
+	return {};
 }

packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js

@@ -3,4 +3,5 @@ import * as $ from "svelte/internal/client";
 
 export default function Bind_this($$anchor) {
 	$.bind_this(Foo($$anchor, { $$legacy: true }), ($$value) => foo = $$value, () => foo);
+	return {};
 }

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -30,4 +30,5 @@ export default function Main($$anchor) {
 	});
 
 	$.append($$anchor, fragment);
+	return {};
 }

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -13,4 +13,5 @@ export default function Each_string_template($$anchor) {
 	});
 
 	$.append($$anchor, fragment);
+	return {};
 }

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -22,4 +22,6 @@ export default function Function_prop_no_getter($$anchor) {
 		},
 		$$slots: { default: true }
 	});
+
+	return {};
 }

packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js

@@ -7,4 +7,5 @@ export default function Hello_world($$anchor) {
 	var h1 = root();
 
 	$.append($$anchor, h1);
+	return {};
 }

packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js

@@ -7,6 +7,7 @@ function Hmr($$anchor) {
 	var h1 = root();
 
 	$.append($$anchor, h1);
+	return {};
 }
 
 if (import.meta.hot) {

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js

@@ -28,6 +28,7 @@ export default function State_proxy_literal($$anchor) {
 	$.bind_value(input, () => $.get(str), ($$value) => $.set(str, $$value));
 	$.bind_value(input_1, () => $.get(tpl), ($$value) => $.set(tpl, $$value));
 	$.append($$anchor, fragment);
+	return {};
 }
 
 $.delegate(["click"]);

packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js

@@ -8,4 +8,5 @@ export default function Svelte_element($$anchor, $$props) {
 
 	$.element(node, tag, false);
 	$.append($$anchor, fragment);
+	return {};
 }