Svelte v4 components under Svelte v5: Internals leaked through slot variables when defined in component

[webJose]

Describe the bug

I the library I'm working on, I have a not-so-simple arrangement of components that together form a menu toolbar. The base component provides a named slot with a variable named setCurrentNode that, when run (because it is a function), performs the menu navigation. The function really teakes two parameters, but the second parameter is pre-filled by the base component, so the slot looks like this:

...
<slot name="node" setCurrentNode={(n) => setCurrentNode(n, parent)}>
   ...
</slot>
...

This works as expected in Svelte v4. In Svelte v5-next.166, however, the function is no longer a function. The consumer component, when doing let:setCurrentNode does not receive a function in the setCurrentNode variable and instead receives an object:

The word "object" in the screenshot is the result of typeof setCurrentNode.

If you notice, there's an fn property in the object that looks like a function. I tested by modifying the code from setCurrentNode(node) to setCurrentNode.fn(node) and this makes the error go away (I did not mention, but the error I get is setCurrentNode is not a function). However, while the error is gone, the logic of setCurrentNode does not seem to be happening.

Reproduction

This is private IP, and I tried to reproduce this, but it seems to be a non-trivial task to do so. If really important, I'll try again, but maybe you Svelte members recognize this object I'm showing in the screenshot and perhaps that's enough to locate the problem? Do let me know, as I'm very willing to help with whatever I can.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 16.17 GB / 39.73 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.22621.3527

Severity

blocking all usage of svelte

[webJose]

I have discovered that setCurrentNode.fn() returns the slot variable contents (what is expected to get directly in setCurrentNode). So I suppose some internal structure is being leaked here, for some reason unknown to me.

[webJose]

I logged the other slot variables coming from the base component's slot:

I guess it is no surprise, but they are all the same "proxy" object. To obtain the slot variable's correct value, the .fn property must be evaluated.

[webJose]

So, after the investigation, the menu toolbar component can go back to working state by adding .fn() to every slot variable being used:

        on:click={(ev) => {
            if (hasNodes.fn()) {
                (setCurrentNode.fn())(node.fn());
            }
        }}

[paoloricciuti]

Can you provide a minimal reproduction in the repl?

[webJose]

Hello. I've tried to reproduce in the REPL but so far I've been unable to. I'll try with Sveltekit.

[webJose]

Ok, I finally replicated it! Damn. This was hard.

I don't know how much this can be simplified, but at least this reproduces the issue in a Sveltekit project with this package.json:

{
	"name": "svelte5bug",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build && npm run package",
		"preview": "vite preview",
		"package": "svelte-kit sync && svelte-package && publint",
		"prepublishOnly": "npm run package",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"test": "vitest"
	},
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	},
	"files": [
		"dist",
		"!dist/**/*.test.*",
		"!dist/**/*.spec.*"
	],
	"peerDependencies": {
		"svelte": "^5.0.0-next.166"
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/package": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"publint": "^0.1.9",
		"svelte": "^5.0.0-next.166",
		"svelte-check": "^3.6.0",
		"tslib": "^2.4.1",
		"typescript": "^5.0.0",
		"vite": "^5.0.11",
		"vitest": "^1.2.0"
	},
	"svelte": "./dist/index.js",
	"types": "./dist/index.d.ts",
	"type": "module"
}

Components

Base Component

<script lang="ts" context="module">
	export type CNode<T extends CNode<T>> = {
		text: string;
		nodes?: CNode<T>[];
	}
</script>

<script lang="ts" generics="TNode extends CNode<TNode>">
	export let nodes: TNode[];

	function setNode(item: TNode, parent: TNode) {
		console.log('item: %o, parent: %o', item, parent);
	}
</script>

<ul>
	{#each nodes as item}
		{@const hasNodes = (item.nodes?.length ?? 0) > 0}
		{#if item.nodes?.length}
			<slot name="sometimes">
				Some content
			</slot>
		{/if}
		<li>
			<slot name="item" {hasNodes} {item} theFn={(n: TNode) => setNode(n, item)}>
				{item.text}
			</slot>
		</li>
	{/each}
</ul>

Derived Component

<script lang="ts">
    import Base, { type CNode } from "./Base.svelte";
    import DefaultItem from "./DefaultItem.svelte";

    interface Data extends CNode<Data> {
        id: number;
    };

    const nodes: Data[] = [
        {

            id: 1,
            text: 'A'
        },
        {
            id: 2,
            text: 'B'
        },
    ];

    function logSlotVars(...vars: any) {
        console.log(...vars);
        return null;
    }
</script>

<Base {nodes}>
    <DefaultItem
        slot="item"
        let:item
        let:theFn
        let:hasNodes
        on:click={() => logSlotVars(item, theFn, hasNodes)}
    >
        <slot {item} {theFn} {hasNodes}>
            {item.text} ({item.id})
        </slot>
    </DefaultItem>
</Base>

DefaultItem Component

<script lang="ts">
    import { createEventDispatcher } from 'svelte';


    const dispatch = createEventDispatcher<{
        click: MouseEvent
    }>();

    function handleClick(ev: MouseEvent) {
        dispatch('click', ev);
    }
</script>

<button on:click={handleClick}>
    <slot />
</button>

---

These are all Svelte v4 components, only running under Svelte v5.

Now render <Derived /> in +page.svelte. Click one of the buttons, and go watch the logged slot variables in the console.

How to "Fix"

Well, in Derived.svelte, I can do the following and the problem goes away:

-    <DefaultItem
+    <svelte:fragment
        slot="item"
        let:item
        let:theFn
        let:hasNodes
-        on:click={() => logSlotVars(item, theFn, hasNodes)}
    >
+        <DefaultItem
+            on:click={() => logSlotVars(item, theFn, hasNodes)}
        >
            <slot {item} {theFn} {hasNodes}>
                {item.text} ({item.id})
            </slot>
        </DefaultItem>
+    </svelte:fragment>

In plain English: If the DefaultItem component is the root of the slot content, the problem appears.

[webJose]

This continues to happen with version next.181. I just tested it.