fix: falsy attachments on components

Author: paoloricciuti

.changeset/fuzzy-taxis-hunt.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: falsy attachments on components

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

@@ -261,7 +261,10 @@ export function build_component(node, component_name, context, anchor = context.
 			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
 
 			if (attribute.metadata.expression.has_state) {
-				expression = b.arrow([b.id('$$node')], b.call(expression, b.id('$$node')));
+				expression = b.arrow(
+					[b.id('$$node')],
+					b.call(b.call('$.safe_call', expression), b.id('$$node'))
+				);
 			}
 
 			push_prop(b.prop('get', b.call('$.attachment'), expression, true));

packages/svelte/src/internal/client/index.js

@@ -155,7 +155,7 @@ export {
 } from './dom/operations.js';
 export { attr, clsx } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
-export { noop, fallback, to_array } from '../shared/utils.js';
+export { noop, fallback, safe_call, to_array } from '../shared/utils.js';
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,

packages/svelte/src/internal/shared/utils.js

@@ -82,6 +82,16 @@ export function fallback(value, fallback, lazy = false) {
 		: value;
 }
 
+/**
+ * @param {*} value
+ */
+export function safe_call(value) {
+	if (is_function(value)) {
+		return value;
+	}
+	return noop;
+}
+
 /**
  * When encountering a situation like `let [a, b, c] = $derived(blah())`,
  * we need to stash an intermediate value that `a`, `b`, and `c` derive

packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte

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

packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	test() {}
+});

packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	function attachment(){
+		console.log("up");
+	}
+
+	let enabled = $state(false);
+</script>
+
+<button onclick={() => enabled = !enabled}></button>
+
+<Child {@attach enabled && attachment} />