Task: Establish definitive approach to contextual value binding

[emmnull]

Task Description

To reduce explicit prop drilling in templates and facilitate composability of components using slots, we favor the use of contexts across related components within their respective trees. Though, a challenge arises when considering that svelte contexts are, by nature, non-reactive. We have to pass reactive values as stores, but we want to keep the outer component's props as non-stores (that is, keep the outer component's API as is, where one can bind:value to a simple string).

How should we bind the passed prop value with the component's store-ized value for it to be two way?

To put it in other terms, what we are essentially looking for here is a way to manually hook into any variable's reactivity, regardless of its data-type (primitive or not), with capabilities of get and set methods, without having to declare a reactive statement using the $: syntax.

Reading

• Input modifiers sveltejs/svelte#3937
• inconsistent behavior when updating reactive declared variable sveltejs/svelte#4933

List of actions

• Design a robust but simple system
• Decide if logic should be taken aside in abstract (purely functional) components, helpers, or simply kept within primitive components
• Document adopted system explicitely in primitive dir's readme

[emmnull]

Opted for simply proxying value to a contextual _value writable using two reactive statements:

export let value: string;

const _value = writable(value);

$: value = $_value;
$: _value.set(value) // Do not use "$_value = value" else results in circular dependency

For the time being, this seems like the simplest most straighforward. To revisit if pitfalls are encountered.