<script>
// Cross-component communication!
// 1. Using event forwarding
// 2. Using stores
import {focusSearchStore} from './store.js'
import Button from './Button.svelte'
import StoreButton from './StoreButton.svelte'
let search
$: $focusSearchStore = search
const focusSearch = () => search.focus()
</script>
<h1>Imagine this is a layout.</h1>
<label>Imagine this is search <input bind:this={search} /></label>
<h2>
Imagine this is a page.
</h2>
<p>
Click on a button to focus on the search input.
</p>
<!-- focus on search using user events -->
<Button on:click={focusSearch}>
I want to search!
</Button>
<!-- focus on search using a store -->
<StoreButton>I want to search! (using store)</StoreButton>