Svelte 5: Pass bind:value or function to snippet

[artttimiron]

Hey! Is it any way, how I can detect withdraw option change via snippet? Or pass function to here? Sorry, I'm new in Svelte

WithdrawOptions component has buttons, and I want to detect changes in my Parent component

<script lang="ts">
	import { SegmentedPicker } from '$lib';
	import type { TabList } from '$lib';
	import { WithdrawOptions } from '$lib';
	import { UserWalletBalance } from '$lib';
	let withdrawOptionId = $state<String | undefined>();

	const tabs: TabList = [
		{
			id: 'withdraw',
			label: 'Withdraw',
			content: () => withdraw(withdrawOptionId)
		},
		{
			id: 'earnings',
			label: 'Earnings',
			content: earnings
		}
	];

	let activeTabId = $state('withdraw');
</script>

{#snippet withdraw(param: String | undefined)}
	<div class="mt-1">
		<WithdrawOptions bind:testParam={param} />
	</div>
{/snippet}

{#snippet earnings()}
	<div>test me 2</div>
{/snippet}

<div class="bg-transparent">
	<UserWalletBalance currentBalance={0.5} lifetimeEarningUsd={0.5} />

	<div class="w-full max-w-md mx-auto mt-3">
		<SegmentedPicker {tabs} bind:activeTabId />
	</div>
</div>

<style>
	:global(:root) {
		--page-background: linear-gradient(180deg, #FFF 0%, #EDEDEE 100%);
	}
</style>

and SegmentPicker

<script lang="ts">
	import { Tabs } from 'bits-ui';
	import type { TabList } from '$lib';

	interface Props {
		tabs: TabList;
		activeTabId: string;
	}

	let { tabs, activeTabId = $bindable(tabs[0]?.id) }: Props = $props();
</script>

<div class="max-w-160">
	<Tabs.Root bind:value={activeTabId} class="bg-background-alt min-w-[300px] max-w-[500px] p-3">
		<Tabs.List
			class="rounded-9px bg-dark-10 shadow-mini-inset dark:bg-background grid w-full grid-cols-2 gap-1 p-1 text-sm font-semibold leading-[0.01em] dark:border dark:border-neutral-600/30"
		>
			{#each tabs as tab (tab.id)}
				<Tabs.Trigger value={tab.id}>
					{#snippet child({ props })}
						<button
							{...props}
							class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
						>
							{tab.label}
						</button>
					{/snippet}
				</Tabs.Trigger>
			{/each}
		</Tabs.List>

		{#each tabs as tab (tab.id)}
			<Tabs.Content value={tab.id} class="select-none pt-3">
				{@render tab.content()}
			</Tabs.Content>
		{/each}
	</Tabs.Root>
</div>

and types.ts

import type { Snippet } from 'svelte';

export interface Tab {
	id: string;
	label: string;
	content: Snippet;
}

export type TabList = Tab[];

[brunnerh]

I do not understand the question, and is all that code necessary to illustrate the issue?

Additionally, readability could be better via syntax highlighting which can be added by specifying a language after ```.
E.g. create a JS block:

```js
function test() {
  console.log('hi')
}
```

(For Svelte, use svelte.)

[artttimiron]

Hi! Thanks for the quick response. I'm facing an issue where I'm using a #snippet that includes a child component. This child component contains multiple buttons, and I need the parent component to be aware of changes happening inside the child component defined within the snippet.

However, when I try to pass a prop like this:

{#snippet withdraw(param: String | undefined)}
	<div class="mt-1">
		<WithdrawOptions bind:testMe={param} />
	</div>
{/snippet}

I get an error: "Svelte: Cannot reassign or bind to snippet parameter."

So I have two main questions:

1. Is it possible to pass a bindable value from the parent component to the child inside a #snippet
2. Can I pass a function from the parent into the #snippet, so that the child component can call it and notify the parent about changes?

[brunnerh]

1. You cannot bind to primitive values, it would be like reassigning a regular function argument: It has no effect on whatever was passed into the function.
   You can either pass in a stateful object and bind to one of its properties or use function binding syntax, e.g.

   {#snippet withdraw(
       getParam: () => (string | undefined),
       setParam: (v: string | undefined) => void
   )}
     <div class="mt-1">
       <WithdrawOptions bind:testMe={getParam, setParam} />
     </div>
   {/snippet}

   Function binding Playground example
   Object property binding Playground example
2. You can pass functions around and into the component like any other property. E.g.

   {#snippet withdraw(onchange: () => any)}
     <div class="mt-1">
       <WithdrawOptions {onchange} />
     </div>
   {/snippet}

   WithdrawOptions can then call the function when appropriate.
   Playground example

[artttimiron]

And how can define such snippet in my array? And which type it should have? content: Snippet;?

	const tabs: TabList = [
		{
			id: 'withdraw',
			label: 'Withdraw',
			content: () => withdraw(withdrawOptionId)
		},
		{
			id: 'earnings',
			label: 'Earnings',
			content: earnings
		}
	];

[brunnerh]

You cannot call snippets like that at all, they can only be used with @render.

See this related issue:

• Svelte 5: Avoiding {#snippet} boilerplate with the ability to pass parameters #10678

[brunnerh]

Here you could use a separate property and have the component pass on the arguments when it uses @render.

{
  // ...
  content: withdraw,
  contentArgs: withdrawOptionId,
}

[artttimiron]

Thank you! I also found extra solution, that also works.

<script lang="ts">
	let withdrawOptionId = $state<String | undefined>();

	function onWithdrawOptionChange(id: string) {
		withdrawOptionId = id
	}
</script>

{#snippet withdraw()}
	<div class="mt-1">
		<WithdrawOptions onWithdrawOptionChange={onWithdrawOptionChange} />
	</div>
{/snippet}