How to manually mount() and $bindable

[Fd929c2CE5fA]

https://svelte.dev/docs/svelte/$bindable

The parent component doesn’t have to use bind: — it can just pass a normal prop. Some parents don’t want to listen to what their children have to say.

https://svelte.dev/docs/svelte/svelte#mount

How to implement bind: or not bind: in mount() manually?

[brunnerh]

A bindable property is identified by having get & set accessors.

If the set is missing, the update will only be local to the component, otherwise the value can be propagated through the set accessor to some other piece of state.

You need a getter if you want the mounted component to receive updates by referencing reactive state.

Example:

<script>
	import Input from './Input.svelte';
	import { mount } from 'svelte';

	let noBindingValue = $state('Text 1')
	let bindingValue = $state('Text 2');

	function noBinding(target) {
		mount(Input, {
			target,
			props: { get value() { return noBindingValue } },
		});
	}

	function binding(target) {
		mount(Input, {
			target,
			props: {
				get value() { return bindingValue },
				set value(v) { bindingValue = v },
			},
		});
	}
</script>

<h2>No binding</h2>
<div {@attach noBinding}></div> {noBindingValue}

<h2>Binding</h2>
<div {@attach binding}></div> {bindingValue}

Playground