Description
I'm working on a little project that may or may not see the light of day, a router inspired by React Router v4. One thing I'm finding I wish Svelte could do is let me pass some data from the nesting component inside its contents, not just from the instantiating component to the contents. This is a little confusing to describe. An example:
App.html
<Outer>
{{foo}}
</Outer>
<script>
import Outer from './Outer.html'
export default {
components: { Outer },
}
</script>Outer.html
<div>
<div>Something</div>
{{yield}}
</div>
<script>
export default {
data: () => ({ foo: 'bar' }),
}
</script>The {{foo}} in App.html is undefined, because it's referring to foo in App.html. What I'm looking for is some way to get the value of foo that's in Outer.html into the yielded contents of the <Outer> component in App.html.
I think the data values that are passed in like this should definitely be explicitly mentioned. One thing I thought of, based on my idea of a <:Yield/> tag here, is to have a syntax like <:Yield foo='{{foo}}'/> instead of {{yield}}. What I'm not clear on, however, is if App.html also had a foo whether its foo or Outer.html's foo should take precedence.
I'm also not clear on whether this is something we'd want to have, or whether it's something that's practical to implement in Svelte currently. As far as I know, using a {{yield}} tag doesn't create another scope/context/state object, and everything inside <Outer> is just hooked up to the same state as everything outside it is. Implementing something like what I'm describing here would require creating a new state, one that's the result of merging two separate states. And then there'd be the question of what happens when someone calls this.set inside <Outer> ... which state is updated?
This could all turn out to be not worth the effort and complication! Thoughts welcome.