Svelte: Avoiding deep-nested two-way bindings on components

[arxpoetica]

The Good

Borrowing from it's predecessor, Svelte does some wonderful things internally with two-way state binding.

The Bad

When deep binding between nested components, things can get pretty hard to track down. Which component did what? Where's that update getting triggered from? Why is the value changing and then changing again? Who drank my Ovaltine?

<Somebody bind:somevar>
    <Hand bind:somevar>
        <Mug bind:somevar>
            <Ovaltine bind:somevar/>
        </Mug>
    </Hand>
</Somebody>

Obviously, the above code is a bit pedantic, but it drives the point (and it's also sometimes realistic)...what's the alternative? With deeply nested components, it's possible to have some fairly spaghetti code when it comes to bindings, hence, many people decouple bindings from such an app and turn to state management in other tools.

Recommendations on Gitter included using state management, a mediator, or global event emitter.

The Ugly

With past projects, declarative HTML bindings has been one of my biggest pain points. Is this simply a case of not using state management when one ought to? The argument against state management is that declarative bindings do really well what they are build for. It seems there ought to be a way to target specific components with bindings at will, without a declarative HTML daisy chain.

[Rich Harris said]...the short answer is that you would set things up in oncreate and ondestroy...

Just trying to open up the idea for discussion. Thoughts?

Alternately, is there a solid example out there in the wild of Svelte using state management? If this is obviously a solved problem and I'm just barking up the wrong tree, I'm happy to close this.

Thanks!

[aubergene]

The state management guide might help with this a bit

[Rich-Harris]

Ah, yes! We can close this now that we have Store.