Svelte: Expose F7 instances through <slot> "let" props

[darrylyeo]

Currently, we have to use bind:this along with .instance() to access the internal Framework7 API of several Svelte components. Example from the docs:

<Sheet bind:this={component}>...</Sheet>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

I think this boilerplate can be reduced in many cases. I suggest we have the components directly pass the instance as a <slot> prop:

<!-- components/sheet.svelte -->

<script>
    ...
    f7Sheet = f7.sheet.create(params)
</script>

...

<slot sheet={f7Sheet} />

Then we can use the API like this:

<Sheet let:sheet>
    <Button onClick={() => sheet.close()}>Close</Button>
</Sheet>

This can apply to <Actions>, <Messagebar>, <Panel>, <PhotoBrowser>, <Popup>, <Searchbar>, <Sheet>, and many other interactive elements.

[darrylyeo]

For even more flexibility, the components could also export let the instance e.g. export let f7Sheet so component users can do <Sheet bind:f7Sheet={sheet}>.

[darrylyeo]

Fantastic! 🎉