Svelte: Component-specific Store not inherited by child components.

[PaulMaly]

REPL

SubChild should use parent store instead of root store.

[Conduitry]

This is because of this line. We'll need to find some other way to grab the store from the parent instead of from the root.

[PaulMaly]

I think it would be great if we'll have reference to the parent component this.parent like in Ractive.

[ekhaled]

This will be a breaking change for those of us who rely on this behaviour.

Maybe we need a way to explicitly specify which store to use rather than changing the default behaviour of using the root store.

[PaulMaly]

@ekhaled Seems, the current behavior is not described in docs and even @Rich-Harris thought that it's working with inheritance in the subtree. Moreover, the current behavior leads to uncontrolled consequences of using component-specific stores.

[ekhaled]

I think @Rich-Harris means to find a way to have both stores available.
At least thats what I understood from reading #1435

[PaulMaly]

@ekhaled Yep, but it will bring more complexity to store itself and how we use it. I don't think that there 're many cases where we actually need to have direct access to the stores through all hierarchy of components. But if so, what if you'll want to get access to the store of a parent of a parent of your component?

Actually, even right now each component in the tree can get direct access to root-store using this.root reference.

[ekhaled]

When I use, for example, $username in a template...

As long as I can be sure that this key has not been tainted somewhere in the hierarchy by a component with an alternative store, I'll be happy.

[PaulMaly]

@ekhaled You will be sure in that case, too. There are 3 ways to put some component in components tree:

1. Import it directly into the parent component:

<Child />
<script>
  import Child from './Child.html'
  export default {
    components: { Child }
  };
</script>

1. Inject it to parent from top-level component via slot :

<Parent>
   <Child />
</Parent>
<script>
  import Child from './Child.html'
  export default {
    components: { Child }
  };
</script>

1. Pass the component dynamicly via parent component props from top-level component:

<Parent {Child} />
<script>
  import Child from './Child.html'
  export default {
    data: { 
        return { Child };
    }
  };
</script>

So, only in first variant your Child component will inherit parent's component store. In this case, you use it explicitly inside subtree of components with redefined store. So, It won't unexpected for you.

You can also read this comment and check an example.

[PaulMaly]

@Rich-Harris Any updates here? Sorry for my intrusiveness, but we use Svelte in the real project for our customer and seems this issue already blocks our progress a little. Maybe we could implement a solution you describe in #1539 ?

[PaulMaly]

Fixed in 2.8.0