Description
Describe the bug
The Attachments passed to a component will run again if we use a destructured derived somewhere in the props lifecycle, even if their references didn't actually change.
Reproduction
For example, in the following code, I'm trying to add a property to my props if the button is hovered; In this simple scenario, this is solely done to cause the derived to run again.
+page.svelte
<script lang="ts">
import AttachmentTest from "$components/Test/AttachmentTest.svelte";
import { createAttachmentKey } from "svelte/attachments";
const key = createAttachmentKey();
const objectWithAttachment = {
[key]: (node: HTMLButtonElement) => console.log(node),
};
</script>
<AttachmentTest {...objectWithAttachment} {key}></AttachmentTest>AttachmentTest.svelte
<script lang="ts">
let { key, ...restProps }: { key: symbol; [key: symbol]: Function } = $props();
let hover = $state(false);
const { hover: finalHover, ...otherRestProps } = $derived.by(() => {
return { ...restProps, hover } as typeof restProps & { hover: boolean };
});
$inspect(otherRestProps[key] === restProps[key]); // This always logs true, meaning the attachment's reference didn't change.
</script>
<button {...otherRestProps} onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>Button</button>What you will notice is that every time the button is hovered, even though the Attachment's reference didn't actually change, the code inside it keeps running again and again. I know that "otherRestProps" object's reference is changing, but shouldn't the attachment only run again if its own reference or any state inside of it changes?
The Svelte version: [email protected]
Logs
System Info
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
Memory: 6.85 GB / 15.63 GB
Binaries:
Node: 23.11.0 - C:\nvm4w\nodejs\node.EXE
npm: 11.3.0 - C:\nvm4w\nodejs\npm.CMD
Browsers:
Edge: Chromium (136.0.3240.64)
Internet Explorer: 11.0.26100.1882Severity
annoyance